feat: add default tab setting

ayoung19 · Nov 20, 2024 · dbc4940 · dbc4940
1 parent 892e020
commit dbc4940
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 8 deletions.
diff --git a/popup/App.tsx b/popup/App.tsx
@@ -34,6 +34,7 @@ import { getClipboardSnapshot, watchClipboardSnapshot } from "~storage/clipboard
 import { getEntryIdToTags, watchEntryIdToTags } from "~storage/entryIdToTags";
 import { getFavoriteEntryIds, watchFavoriteEntryIds } from "~storage/favoriteEntryIds";
 import { getSettings, watchSettings } from "~storage/settings";
+import { Tab } from "~types/tab";
 import { getEntries, watchEntries } from "~utils/storage";
 import { defaultBorderColor } from "~utils/sx";
 
@@ -50,7 +51,7 @@ import {
 } from "./states/atoms";
 
 export const App = () => {
-  const [tab, setTab] = useState("all");
+  const [tab, setTab] = useState<Tab>(Tab.Enum.All);
 
   const [search, setSearch] = useAtom(searchAtom);
 
@@ -69,7 +70,12 @@ export const App = () => {
     (async () => setFavoriteEntryIds(await getFavoriteEntryIds()))();
     watchFavoriteEntryIds(setFavoriteEntryIds);
 
-    (async () => setSettings(await getSettings()))();
+    (async () => {
+      const settings = await getSettings();
+
+      setSettings(settings);
+      setTab(settings.defaultTab);
+    })();
     watchSettings(setSettings);
 
     (async () => setEntryIdToTags(await getEntryIdToTags()))();
@@ -161,9 +167,9 @@ export const App = () => {
         />
         <SegmentedControl
           value={tab}
-          onChange={setTab}
+          onChange={(newTab) => setTab(Tab.parse(newTab))}
           size="xs"
-          color={tab === "all" ? "indigo.5" : "yellow.5"}
+          color={tab === Tab.Enum.All ? "indigo.5" : "yellow.5"}
           data={[
             {
               label: (
@@ -172,7 +178,7 @@ export const App = () => {
                   <Text>All</Text>
                 </Group>
               ),
-              value: "all",
+              value: Tab.Enum.All,
             },
             {
               label: (
@@ -181,12 +187,12 @@ export const App = () => {
                   <Text>Favorites</Text>
                 </Group>
               ),
-              value: "favorites",
+              value: Tab.Enum.Favorites,
             },
           ]}
         />
       </Group>
-      {tab === "all" ? <AllPage /> : <FavoritesPage />}
+      {tab === Tab.Enum.All ? <AllPage /> : <FavoritesPage />}
     </Card>
   );
 };
diff --git a/popup/components/modals/SettingsModalContent.tsx b/popup/components/modals/SettingsModalContent.tsx
@@ -38,6 +38,7 @@ import { z } from "zod";
 
 import { settingsAtom } from "~popup/states/atoms";
 import { setSettings } from "~storage/settings";
+import { Tab } from "~types/tab";
 import { removeActionBadgeText, setActionBadgeText } from "~utils/actionBadge";
 import { getClipboardHistoryIOExport, importFile } from "~utils/importExport";
 import { getEntries } from "~utils/storage";
@@ -143,6 +144,26 @@ export const SettingsModalContent = () => {
               />
             </Group>
             <Divider sx={(theme) => ({ borderColor: defaultBorderColor(theme) })} />
+            <Group align="flex-start" spacing="md" position="apart" noWrap>
+              <Stack spacing={0}>
+                <Title order={6}>Default Tab</Title>
+                <Text fz="xs">Select the tab shown when the extension is opened.</Text>
+              </Stack>
+              <Select
+                value={settings.defaultTab}
+                onChange={(newDefaultTab) =>
+                  newDefaultTab &&
+                  setSettings({ ...settings, defaultTab: Tab.parse(newDefaultTab) })
+                }
+                data={[
+                  { value: Tab.Enum.All, label: Tab.Enum.All },
+                  { value: Tab.Enum.Favorites, label: Tab.Enum.Favorites },
+                ]}
+                size="xs"
+                withinPortal
+              />
+            </Group>
+            <Divider sx={(theme) => ({ borderColor: defaultBorderColor(theme) })} />
             <Group align="flex-start" spacing="md" position="apart" noWrap>
               <Stack spacing={0}>
                 <Title order={6}>Theme</Title>

diff --git a/popup/states/atoms.ts b/popup/states/atoms.ts
@@ -6,7 +6,6 @@ import { Entry } from "~types/entry";
 import { EntryIdToTags } from "~types/entryIdToTags";
 import { defaultSettings, Settings } from "~types/settings";
 
-export const tabAtom = atom<string>("all");
 export const searchAtom = atom<string>("");
 
 export const entriesAtom = atom<Entry[]>([]);

diff --git a/types/settings.ts b/types/settings.ts
@@ -1,9 +1,12 @@
 import { z } from "zod";
 
+import { Tab } from "./tab";
+
 // DO NOT REUSE DEPRECATED FIELDS.
 export const defaultSettings = {
   totalItemsBadge: true,
   allowBlankItems: true,
+  defaultTab: Tab.Enum.All,
   // theme: "light",
   themeV2: "system",
   localItemLimit: null,
@@ -13,6 +16,7 @@ export const Settings = z
   .object({
     totalItemsBadge: z.boolean().default(defaultSettings.totalItemsBadge),
     allowBlankItems: z.boolean().default(defaultSettings.allowBlankItems),
+    defaultTab: Tab.default(defaultSettings.defaultTab),
     // theme: z.string().default(defaultSettings.theme),
     themeV2: z.string().default(defaultSettings.themeV2),
     localItemLimit: z.number().nullable().default(defaultSettings.localItemLimit),

diff --git a/types/tab.ts b/types/tab.ts
@@ -0,0 +1,4 @@
+import { z } from "zod";
+
+export const Tab = z.enum(["All", "Favorites"]);
+export type Tab = z.infer<typeof Tab>;