feat: Add view options to show tag/title and control image fit. Fixes #1960

3 files changed, 21 insertions, 0 deletions

diff --git a/apps/web/lib/userLocalSettings/bookmarksLayout.tsx b/apps/web/lib/userLocalSettings/bookmarksLayout.tsx
index 504d8d8c..3bd77e4a 100644
--- a/apps/web/lib/userLocalSettings/bookmarksLayout.tsx
+++ b/apps/web/lib/userLocalSettings/bookmarksLayout.tsx
@@ -15,6 +15,9 @@ export const UserLocalSettingsCtx = createContext<
   lang: fallbackLng,
   gridColumns: 3,
   showNotes: false,
+  showTags: true,
+  showTitle: true,
+  imageFit: "cover",
 });
 
 function useUserLocalSettings() {
@@ -25,6 +28,9 @@ export function useBookmarkDisplaySettings() {
   const settings = useUserLocalSettings();
   return {
     showNotes: settings.showNotes,
+    showTags: settings.showTags,
+    showTitle: settings.showTitle,
+    imageFit: settings.imageFit,
   };
 }
 
diff --git a/apps/web/lib/userLocalSettings/types.ts b/apps/web/lib/userLocalSettings/types.ts
index 54b75b80..949c9229 100644
--- a/apps/web/lib/userLocalSettings/types.ts
+++ b/apps/web/lib/userLocalSettings/types.ts
@@ -10,6 +10,9 @@ export const zUserLocalSettings = z.object({
   lang: z.string().optional().default("en"),
   gridColumns: z.number().min(1).max(6).optional().default(3),
   showNotes: z.boolean().optional().default(false),
+  showTags: z.boolean().optional().default(true),
+  showTitle: z.boolean().optional().default(true),
+  imageFit: z.enum(["cover", "contain"]).optional().default("cover"),
 });
 
 export type UserLocalSettings = z.infer<typeof zUserLocalSettings>;
diff --git a/apps/web/lib/userLocalSettings/userLocalSettings.ts b/apps/web/lib/userLocalSettings/userLocalSettings.ts
index aff3645c..55070cd6 100644
--- a/apps/web/lib/userLocalSettings/userLocalSettings.ts
+++ b/apps/web/lib/userLocalSettings/userLocalSettings.ts
@@ -46,3 +46,15 @@ export async function updateGridColumns(gridColumns: number) {
 export async function updateShowNotes(showNotes: boolean) {
   await readModifyWrite(() => ({ showNotes }));
 }
+
+export async function updateShowTags(showTags: boolean) {
+  await readModifyWrite(() => ({ showTags }));
+}
+
+export async function updateShowTitle(showTitle: boolean) {
+  await readModifyWrite(() => ({ showTitle }));
+}
+
+export async function updateImageFit(imageFit: "cover" | "contain") {
+  await readModifyWrite(() => ({ imageFit }));
+}