feat: Configurable number of grid columns. Fixes #1713

3 files changed, 18 insertions, 0 deletions

diff --git a/apps/web/lib/userLocalSettings/bookmarksLayout.tsx b/apps/web/lib/userLocalSettings/bookmarksLayout.tsx
index a122c6e7..346c85e0 100644
--- a/apps/web/lib/userLocalSettings/bookmarksLayout.tsx
+++ b/apps/web/lib/userLocalSettings/bookmarksLayout.tsx
@@ -13,6 +13,7 @@ export const UserLocalSettingsCtx = createContext<
 >({
   bookmarkGridLayout: defaultLayout,
   lang: fallbackLng,
+  gridColumns: 3,
 });
 
 function useUserLocalSettings() {
@@ -29,6 +30,11 @@ export function useInterfaceLang() {
   return settings.lang;
 }
 
+export function useGridColumns() {
+  const settings = useUserLocalSettings();
+  return settings.gridColumns;
+}
+
 export function bookmarkLayoutSwitch<T>(
   layout: BookmarksLayoutTypes,
   data: Record<BookmarksLayoutTypes, T>,
diff --git a/apps/web/lib/userLocalSettings/types.ts b/apps/web/lib/userLocalSettings/types.ts
index 94c9bb21..c87c8c33 100644
--- a/apps/web/lib/userLocalSettings/types.ts
+++ b/apps/web/lib/userLocalSettings/types.ts
@@ -8,6 +8,7 @@ export type BookmarksLayoutTypes = z.infer<typeof zBookmarkGridLayout>;
 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),
 });
 
 export type UserLocalSettings = z.infer<typeof zUserLocalSettings>;
diff --git a/apps/web/lib/userLocalSettings/userLocalSettings.ts b/apps/web/lib/userLocalSettings/userLocalSettings.ts
index 311ad99f..85ec69a6 100644
--- a/apps/web/lib/userLocalSettings/userLocalSettings.ts
+++ b/apps/web/lib/userLocalSettings/userLocalSettings.ts
@@ -37,3 +37,14 @@ export async function updateInterfaceLang(lang: string) {
     sameSite: "lax",
   });
 }
+
+export async function updateGridColumns(gridColumns: number) {
+  const userSettings = cookies().get(USER_LOCAL_SETTINGS_COOKIE_NAME);
+  const parsed = parseUserLocalSettings(userSettings?.value);
+  cookies().set({
+    name: USER_LOCAL_SETTINGS_COOKIE_NAME,
+    value: JSON.stringify({ ...parsed, gridColumns }),
+    maxAge: 34560000, // Chrome caps max age to 400 days
+    sameSite: "lax",
+  });
+}