feat(dropdown): Remember selected filter

The filter drop down currently always uses All by default.
This default can be annoying if you have a deleted masked emails
that sort near the top.

This changes FilterEmailsDropdown to remember the selected filter
between invocations, so the default changes to what you selected last
time.

Note that it remembers the value only when changed with the drop down
and not when you create a new masked email.

src/pages/popup/components/home/Home.tsx

@@ -7,10 +7,17 @@ import FilterEmailsDropdown from '@pages/popup/components/home/filter/FilterEmai
 import TopComponent from '@pages/popup/components/home/top/Top';
 import EmailCount from '@pages/popup/components/home/emails/EmailCount';
 import browser from 'webextension-polyfill';
-import { getFastmailSession } from '../../../../../utils/storageUtil';
+import {
+  getFastmailSession,
+  getDefaultFilter,
+  setDefaultFilter
+} from '../../../../../utils/storageUtil';
 import CreateEmailModal from '@pages/popup/components/home/detail/modals/CreateEmailModal';
 import LogoutConfirmationModal from '@pages/popup/components/home/detail/modals/LogoutConfirmationModal';
-import { FILTER_OPTIONS } from '@pages/popup/components/home/filter/FilterOption';
+import {
+  FILTER_OPTIONS,
+  FilterOption
+} from '@pages/popup/components/home/filter/FilterOption';
 
 interface HomeComponentProps {
   onLogout: () => void;
@@ -43,6 +50,21 @@ export default function HomeComponent({ onLogout }: HomeComponentProps) {
     setShowLogoutConfirmationModal(true);
   };
 
+  const setFilterOptionAndRemember = (
+    value: ((prevState: FilterOption) => FilterOption) | FilterOption
+  ) => {
+    if (typeof value == 'function') {
+      setFilterOption((prevState) => {
+        const newValue = value(prevState);
+        setDefaultFilter(newValue);
+        return newValue;
+      });
+    } else {
+      setFilterOption(value);
+      setDefaultFilter(value);
+    }
+  };
+
   useEffect(() => {
     // Declare the async function
     const fetchActiveTabUrl = async () => {
@@ -58,8 +80,14 @@ export default function HomeComponent({ onLogout }: HomeComponentProps) {
       }
     };
 
+    const fetchDefaultFilter = async () => {
+      const filter = await getDefaultFilter();
+      setFilterOption(filter);
+    };
+
     // Call the async function
     fetchActiveTabUrl();
+    fetchDefaultFilter();
   }, []);
 
   const refreshMaskedEmails = async () => {
@@ -128,7 +156,7 @@ export default function HomeComponent({ onLogout }: HomeComponentProps) {
           <div className="columns-[250px] border-r border-r-big-stone">
             <div className="h-[35px] border-b border-b-big-stone flex items-center justify-center">
               <FilterEmailsDropdown
-                setFilterOption={setFilterOption}
+                setFilterOption={setFilterOptionAndRemember}
                 filterOption={filterOption}
               />
               <EmailCount count={filteredEmailsCount} />

utils/constants/constants.ts

@@ -1,3 +1,4 @@
 export const outputFolderName = 'dist';
 export const FASTMAIL_SESSION_KEY = 'fastmail_session';
 export const FAVORITE_EMAILS_KEY = 'favorite_emails';
+export const DEFAULT_FILTER_KEY = 'default_filter';

utils/storageUtil.ts

@@ -1,9 +1,11 @@
 import {
   FASTMAIL_SESSION_KEY,
-  FAVORITE_EMAILS_KEY
+  FAVORITE_EMAILS_KEY,
+  DEFAULT_FILTER_KEY
 } from './constants/constants';
 import browser from 'webextension-polyfill';
 import { Session } from 'fastmail-masked-email';
+import { FILTER_OPTIONS, FilterOption } from '@src/pages/popup/components/home/filter/FilterOption';
 
 export const getFavoriteEmailIds = async (): Promise<string[]> => {
   const data = await browser.storage.sync.get(FAVORITE_EMAILS_KEY);
@@ -25,6 +27,16 @@ export const setFastmailSession = async (session: Session): Promise<void> => {
   await browser.storage.sync.set({ [FASTMAIL_SESSION_KEY]: session });
 };
 
+export const getDefaultFilter = async (): Promise<FilterOption> => {
+  const data = await browser.storage.sync.get(DEFAULT_FILTER_KEY);
+  const value = data[DEFAULT_FILTER_KEY] || 'All';
+  return FILTER_OPTIONS[value] || FILTER_OPTIONS.All;
+}
+
+export const setDefaultFilter = async (filter: FilterOption): Promise<void> => {
+  await browser.storage.sync.set({ [DEFAULT_FILTER_KEY]: filter.value });
+}
+
 export const clearStorage = async (): Promise<void> => {
   await browser.storage.sync.clear();
 };