feat: add user customisable default archive display behaviour (#1505)

* fix typo

* implementation

* bug fix and refactoring

* Use nuqs for searchParam management

* remove the todo about the tests

* fix tests

---------

Co-authored-by: Mohamed Bassem <me@mbassem.com>

1 files changed, 49 insertions, 3 deletions

diff --git a/apps/web/components/settings/UserOptions.tsx b/apps/web/components/settings/UserOptions.tsx
index c8aa5e86..3918ceed 100644
--- a/apps/web/components/settings/UserOptions.tsx
+++ b/apps/web/components/settings/UserOptions.tsx
@@ -73,12 +73,22 @@ export default function UserSettings() {
     ZUserSettings["bookmarkClickAction"],
     string
   > = {
-    open_original_link: t("settings.info.user_settings.open_external_url"),
+    open_original_link: t(
+      "settings.info.user_settings.bookmark_click_action.open_external_url",
+    ),
     expand_bookmark_preview: t(
-      "settings.info.user_settings.open_bookmark_details",
+      "settings.info.user_settings.bookmark_click_action.open_bookmark_details",
     ),
   };
 
+  const archiveDisplayBehaviourTranslation: Record<
+    ZUserSettings["archiveDisplayBehaviour"],
+    string
+  > = {
+    show: t("settings.info.user_settings.archive_display_behaviour.show"),
+    hide: t("settings.info.user_settings.archive_display_behaviour.hide"),
+  };
+
   const form = useForm<z.infer<typeof zUserSettingsSchema>>({
     resolver: zodResolver(zUserSettingsSchema),
     defaultValues: data,
@@ -97,7 +107,7 @@ export default function UserSettings() {
         render={({ field }) => (
           <div className="flex w-full flex-col gap-2">
             <Label>
-              {t("settings.info.user_settings.boomark_click_action")}
+              {t("settings.info.user_settings.bookmark_click_action.title")}
             </Label>
             <Select
               disabled={!!clientConfig.demoMode}
@@ -127,6 +137,42 @@ export default function UserSettings() {
           </div>
         )}
       />
+      <FormField
+        control={form.control}
+        name="archiveDisplayBehaviour"
+        render={({ field }) => (
+          <div className="flex w-full flex-col gap-2">
+            <Label>
+              {t("settings.info.user_settings.archive_display_behaviour.title")}
+            </Label>
+            <Select
+              disabled={!!clientConfig.demoMode}
+              value={field.value}
+              onValueChange={(value) => {
+                mutate({
+                  archiveDisplayBehaviour:
+                    value as ZUserSettings["archiveDisplayBehaviour"],
+                });
+              }}
+            >
+              <SelectTrigger>
+                <SelectValue>
+                  {archiveDisplayBehaviourTranslation[field.value]}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                {Object.entries(archiveDisplayBehaviourTranslation).map(
+                  ([value, label]) => (
+                    <SelectItem key={value} value={value}>
+                      {label}
+                    </SelectItem>
+                  ),
+                )}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+      />
     </Form>
   );
 }