Upgrade reset filters button

package.json

@@ -160,6 +160,7 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.1",
+    "@types/swiper": "^6.0.0",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
     "@vitejs/plugin-react-swc": "^3.7.2",

src/features/explorer/components/explorer-cards.tsx

@@ -23,14 +23,14 @@ const ExplorerCards = () => {
   const handleClick = () => {
     setIsOpen((prev) => {
       const newValue = !prev;
-      localStorage.setItem('soapbox:explorer:card', JSON.stringify(!isOpen));
+      localStorage.setItem('soapbox:explorer:card:status', JSON.stringify(!isOpen));
       return newValue;
     });
   };
 
   useEffect(
     () => {
-      const value = localStorage.getItem('soapbox:explorer:card');
+      const value = localStorage.getItem('soapbox:explorer:card:status');
       if (value !== null) {
         setIsOpen(JSON.parse(value));
       }

src/features/explorer/components/explorerFilter.tsx

@@ -12,7 +12,6 @@ import {
   CreateFilter,
   LanguageFilter,
   MediaFilter,
-  PersistentFilter,
   PlatformFilters,
   ToggleRepliesFilter,
   generateFilter,
@@ -49,7 +48,7 @@ const ExplorerFilter = () => {
   const handleClick = () => {
     setIsOpen((prev) => {
       const newValue = !prev;
-      localStorage.setItem('soapbox:explorer:filter', JSON.stringify(newValue));
+      localStorage.setItem('soapbox:explorer:filter:status', JSON.stringify(newValue));
       return newValue;
     });
   };
@@ -58,7 +57,7 @@ const ExplorerFilter = () => {
     () => {
       const value = formatFilters(filters);
 
-      sessionStorage.setItem('reduxFilterState', JSON.stringify(filters));
+      localStorage.setItem('soapbox:explorer:filters', JSON.stringify(filters));
 
       dispatch(changeSearch(value));
       dispatch(submitSearch(undefined, value));
@@ -67,7 +66,7 @@ const ExplorerFilter = () => {
 
   useEffect(
     () => {
-      const isOpenStatus = localStorage.getItem('soapbox:explorer:filter');
+      const isOpenStatus = localStorage.getItem('soapbox:explorer:filter:status');
       if (isOpenStatus !== null) {
         setIsOpen(JSON.parse(isOpenStatus));
       }
@@ -116,7 +115,6 @@ const ExplorerFilter = () => {
 
         <Divider />
         {/* Reset your filters */}
-        <PersistentFilter />
 
       </Stack>
 

src/features/explorer/components/filters.tsx

@@ -1,3 +1,4 @@
+import refreshIcon from '@tabler/icons/outline/refresh.svg';
 import searchIcon from '@tabler/icons/outline/search.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
@@ -27,7 +28,7 @@ const messages = defineMessages({
   language: { id: 'column.explorer.filters.language', defaultMessage: 'Language:' },
   platforms: { id: 'column.explorer.filters.platforms', defaultMessage: 'Platforms:' },
   createYourFilter: { id: 'column.explorer.filters.create_your_filter', defaultMessage: 'Create your filter' },
-  filterPersistence: { id: 'column.explorer.filters.filter_persistence', defaultMessage: 'Filter persistence:' },
+  resetFilter: { id: 'column.explorer.filters.reset', defaultMessage: 'Reset Filters' },
   filterByWords: { id: 'column.explorer.filters.filter_by_words', defaultMessage: 'Filter by this/these words' },
   include: { id: 'column.explorer.filters.include', defaultMessage: 'Include' },
   exclude: { id: 'column.explorer.filters.exclude', defaultMessage: 'Exclude' },
@@ -164,38 +165,6 @@ const PlatformFilters = () => {
 
 };
 
-const PersistentFilter = () => {
-  const intl = useIntl();
-  const dispatch = useAppDispatch();
-  const filters = useAppSelector((state) => state.search_filter);
-
-
-  const handleSalveFilter = () => {
-    localStorage.setItem('reduxFilterState', JSON.stringify(filters));
-  };
-
-  const handleReset = () => {
-    dispatch(resetFilters());
-    localStorage.removeItem('reduxFilterState');
-  };
-
-
-  return (
-    <HStack alignItems='center' space={2}>
-      <Text size='md' weight='bold'>
-        {intl.formatMessage(messages.filterPersistence)}
-      </Text>
-
-      <HStack alignItems='center' space={2} grow className='p-1'>
-        <Button text='Reset Filters' className='w-full' theme='tertiary' onClick={handleReset} />
-        <Button text='Save Filters' className='w-full' theme='primary' onClick={handleSalveFilter} />
-      </HStack>
-    </HStack>
-
-  );
-
-};
-
 const CreateFilter = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
@@ -212,11 +181,20 @@ const CreateFilter = () => {
     }
   };
 
+  const handleReset = () => {
+    dispatch(resetFilters());
+    localStorage.removeItem('soapbox:explorer:filters');
+  };
+
   return (
     <Stack space={3}>
-      <Text size='md' weight='bold'>
+      <HStack justifyContent='between' alignItems='center'>
-        {intl.formatMessage(messages.createYourFilter)}
+        <Text size='md' weight='bold'>
-      </Text>
+          {intl.formatMessage(messages.createYourFilter)}
+        </Text>
+
+        <IconButton src={refreshIcon} iconClassName='w-4' className='px-4' text={intl.formatMessage(messages.resetFilter)} theme='secondary' onClick={handleReset} />
+      </HStack>
 
       <Stack space={2}>
         <Text size='md'>
@@ -229,7 +207,7 @@ const CreateFilter = () => {
           <div className='relative w-full items-center p-0.5'>
             <Input theme='search' value={inputValue} className='h-9' onChange={(e) => setInputValue(e.target.value)} />
             <div
-              role='button'
+              // role='button'
               tabIndex={0}
               className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3 rtl:left-0 rtl:right-auto'
             >
@@ -460,4 +438,4 @@ const generateFilter = (dispatch: AppDispatch, { name, status }: IGenerateFilter
   );
 };
 
-export { CreateFilter, PersistentFilter, PlatformFilters, MediaFilter, LanguageFilter, ToggleRepliesFilter, generateFilter };
+export { CreateFilter, PlatformFilters, MediaFilter, LanguageFilter, ToggleRepliesFilter, generateFilter };

src/locales/en.json

@@ -378,7 +378,6 @@
   "column.explorer.filters.exclude": "Exclude",
   "column.explorer.filters.fediverse": "Fediverse",
   "column.explorer.filters.filter_by_words": "Filter by this/these words",
-  "column.explorer.filters.filter_persistence": "Filter persistence:",
   "column.explorer.filters.include": "Include",
   "column.explorer.filters.language": "Language:",
   "column.explorer.filters.language.default": "Global",
@@ -386,6 +385,7 @@
   "column.explorer.filters.no_replies": "No Replies:",
   "column.explorer.filters.nostr": "Nostr",
   "column.explorer.filters.platforms": "Platforms:",
+  "column.explorer.filters.reset": "Reset Filters",
   "column.explorer.media_filters.all": "All",
   "column.explorer.media_filters.image": "Image only",
   "column.explorer.media_filters.none": "No media",

src/store.ts

@@ -9,7 +9,7 @@ import type { AnyAction } from 'redux';
 
 const loadState = () => {
   try {
-    const savedState = localStorage.getItem('reduxFilterState');
+    const savedState = localStorage.getItem('soapbox:explorer:filters');
     return savedState ? JSON.parse(savedState) : undefined;
   } catch (error) {
     console.error('Failed to load state:', error);

yarn.lock

@@ -2807,6 +2807,13 @@
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.2.tgz#31f6eec1ed7ec23f4f05608d3a2d381df041f564"
   integrity sha512-7aqorHYgdNO4DM36stTiGO3DvKoex9TQRwsJU6vMaFGyqpBA1MNZkz+PG3gaNUPpTAOYhT1WR7M1JyA3fbS9Cw==
 
+"@types/swiper@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@types/swiper/-/swiper-6.0.0.tgz#9934ecd569611b660a2a9bf200f25ce5ba4b4d63"
+  integrity sha512-QPZRgxZ+ivXXtzV43B3LxpXUIC7FE/EoKM+rtxngmgt2M7eeUYypZhyqZD8UxJtlBcUDw/ATGoVeSNpvBBrz2w==
+  dependencies:
+    swiper "*"
+
 "@types/trusted-types@*", "@types/trusted-types@^2.0.2":
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
@@ -7989,7 +7996,7 @@ svgo@^3.0.2:
     csso "^5.0.5"
     picocolors "^1.0.0"
 
-swiper@^11.2.4:
+swiper@*, swiper@^11.2.4:
   version "11.2.4"
   resolved "https://registry.yarnpkg.com/swiper/-/swiper-11.2.4.tgz#4d1b55e07f909957e0406bdbff81b850b9dc8aeb"
   integrity sha512-DTtglrsFfMYytid+oNy4QI3t2N2+XhhwSYbnyOhlwBmvY8Bkoj3ombK1/b80w8vDpQ+Lqlnbm+0737+i32MrcA==