feat: display notes on bookmark card (#2083)

* feat: display notes on bookmark card

* apply styling

* include mobile impl

* apply pr comments

* add display options menu into PR

* put it under app setting

* cleanup

* address pr comments

* change the default for show notes to false

* make the in-card note font lighter

---------

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

4 files changed, 28 insertions, 0 deletions

diff --git a/apps/web/lib/i18n/locales/en/translation.json b/apps/web/lib/i18n/locales/en/translation.json
index 63e4ae2d..9b40416d 100644
--- a/apps/web/lib/i18n/locales/en/translation.json
+++ b/apps/web/lib/i18n/locales/en/translation.json
@@ -47,6 +47,13 @@
     "list": "List",
     "compact": "Compact"
   },
+  "view_options": {
+    "title": "View Options",
+    "layout": "Layout",
+    "columns": "Columns",
+    "display_options": "Display Options",
+    "show_note_previews": "Show Notes"
+  },
   "actions": {
     "change_layout": "Change Layout",
     "archive": "Archive",
@@ -59,6 +66,7 @@
     "recrawl": "Recrawl",
     "download_full_page_archive": "Download Full Page Archive",
     "edit_tags": "Edit Tags",
+    "edit_notes": "Edit Notes",
     "add_to_list": "Add to List",
     "select_all": "Select All",
     "unselect_all": "Unselect All",
diff --git a/apps/web/lib/userLocalSettings/bookmarksLayout.tsx b/apps/web/lib/userLocalSettings/bookmarksLayout.tsx
index 346c85e0..504d8d8c 100644
--- a/apps/web/lib/userLocalSettings/bookmarksLayout.tsx
+++ b/apps/web/lib/userLocalSettings/bookmarksLayout.tsx
@@ -14,12 +14,20 @@ export const UserLocalSettingsCtx = createContext<
   bookmarkGridLayout: defaultLayout,
   lang: fallbackLng,
   gridColumns: 3,
+  showNotes: false,
 });
 
 function useUserLocalSettings() {
   return useContext(UserLocalSettingsCtx);
 }
 
+export function useBookmarkDisplaySettings() {
+  const settings = useUserLocalSettings();
+  return {
+    showNotes: settings.showNotes,
+  };
+}
+
 export function useBookmarkLayout() {
   const settings = useUserLocalSettings();
   return settings.bookmarkGridLayout;
diff --git a/apps/web/lib/userLocalSettings/types.ts b/apps/web/lib/userLocalSettings/types.ts
index c87c8c33..54b75b80 100644
--- a/apps/web/lib/userLocalSettings/types.ts
+++ b/apps/web/lib/userLocalSettings/types.ts
@@ -9,6 +9,7 @@ export const zUserLocalSettings = z.object({
   bookmarkGridLayout: zBookmarkGridLayout.optional().default("masonry"),
   lang: z.string().optional().default("en"),
   gridColumns: z.number().min(1).max(6).optional().default(3),
+  showNotes: z.boolean().optional().default(false),
 });
 
 export type UserLocalSettings = z.infer<typeof zUserLocalSettings>;
diff --git a/apps/web/lib/userLocalSettings/userLocalSettings.ts b/apps/web/lib/userLocalSettings/userLocalSettings.ts
index 11bd0a84..25c10e1b 100644
--- a/apps/web/lib/userLocalSettings/userLocalSettings.ts
+++ b/apps/web/lib/userLocalSettings/userLocalSettings.ts
@@ -48,3 +48,14 @@ export async function updateGridColumns(gridColumns: number) {
     sameSite: "lax",
   });
 }
+
+export async function updateShowNotes(showNotes: boolean) {
+  const userSettings = (await cookies()).get(USER_LOCAL_SETTINGS_COOKIE_NAME);
+  const parsed = parseUserLocalSettings(userSettings?.value);
+  (await cookies()).set({
+    name: USER_LOCAL_SETTINGS_COOKIE_NAME,
+    value: JSON.stringify({ ...parsed, showNotes }),
+    maxAge: 34560000, // Chrome caps max age to 400 days
+    sameSite: "lax",
+  });
+}