feat: add multiple way to show collections and links

app/user/controllers/display_preferences_controller.ts

@@ -0,0 +1,26 @@
+import { getDisplayPreferences } from '#shared/lib/display_preferences';
+import { updateDisplayPreferencesValidator } from '#user/validators/update_display_preferences';
+import { HttpContext } from '@adonisjs/core/http';
+
+export default class DisplayPreferencesController {
+	async update({ request, response, auth }: HttpContext) {
+		const { displayPreferences } = await request.validateUsing(
+			updateDisplayPreferencesValidator
+		);
+		const userPrefs = auth.user!.displayPreferences ?? {};
+		const mergedPrefs = {
+			linkListDisplay:
+				displayPreferences.linkListDisplay ??
+				userPrefs.linkListDisplay ??
+				getDisplayPreferences().linkListDisplay,
+			collectionListDisplay:
+				displayPreferences.collectionListDisplay ??
+				userPrefs.collectionListDisplay ??
+				getDisplayPreferences().collectionListDisplay,
+		};
+		auth.user!.displayPreferences = mergedPrefs;
+		console.log(auth.user!.displayPreferences);
+		await auth.user!.save();
+		return response.redirect().withQs().back();
+	}
+}

app/user/lib/index.ts

@@ -0,0 +1,12 @@
+import { type DisplayPreferences } from '#shared/types/index';
+import User from '#user/models/user';
+
+export function ensureDisplayPreferences(user: User): DisplayPreferences {
+	const defaults: DisplayPreferences = {
+		linkListDisplay: 'grid',
+		collectionListDisplay: 'list',
+	};
+
+	user.displayPreferences = { ...defaults, ...user.displayPreferences };
+	return user.displayPreferences;
+}

app/user/models/user.ts

@@ -1,6 +1,8 @@
 import Collection from '#collections/models/collection';
 import AppBaseModel from '#core/models/app_base_model';
 import Link from '#links/models/link';
+import { type DisplayPreferences } from '#shared/types/index';
+import { ensureDisplayPreferences } from '#user/lib/index';
 import type { GoogleToken } from '@adonisjs/ally/types';
 import { column, computed, hasMany } from '@adonisjs/lucid/orm';
 import type { HasMany } from '@adonisjs/lucid/types/relations';
@@ -51,4 +53,15 @@ export default class User extends AppBaseModel {
 		autoUpdate: true,
 	})
 	declare lastSeenAt: DateTime;
+
+	@column({
+		serialize: (value) => {
+			if (typeof value === 'string') {
+				return ensureDisplayPreferences(JSON.parse(value));
+			}
+			return value;
+		},
+		prepare: (value) => JSON.stringify(value),
+	})
+	declare displayPreferences: DisplayPreferences;
 }

app/user/routes/routes.ts

@@ -1 +1,2 @@
+import './user_display_preferences_route.js';
 import './user_theme_route.js';

app/user/routes/user_display_preferences_route.ts

@@ -0,0 +1,10 @@
+import { middleware } from '#start/kernel';
+import router from '@adonisjs/core/services/router';
+
+const DisplayPreferencesController = () =>
+	import('#user/controllers/display_preferences_controller');
+
+router
+	.post('/user/display-preferences', [DisplayPreferencesController, 'update'])
+	.as('user.update-display-preferences')
+	.middleware([middleware.auth()]);

app/user/validators/update_display_preferences.ts

@@ -0,0 +1,26 @@
+import {
+	COLLECTION_LIST_DISPLAYS,
+	DEFAULT_LIST_DISPLAY_PREFERENCES,
+	LINK_LIST_DISPLAYS,
+} from '#shared/lib/display_preferences';
+import vine from '@vinejs/vine';
+
+export const updateDisplayPreferencesValidator = vine.compile(
+	vine.object({
+		displayPreferences: vine.object({
+			linkListDisplay: vine
+				.enum(LINK_LIST_DISPLAYS)
+				.optional()
+				.transform(
+					(value) => value ?? DEFAULT_LIST_DISPLAY_PREFERENCES.linkListDisplay
+				),
+			collectionListDisplay: vine
+				.enum(COLLECTION_LIST_DISPLAYS)
+				.optional()
+				.transform(
+					(value) =>
+						value ?? DEFAULT_LIST_DISPLAY_PREFERENCES.collectionListDisplay
+				),
+		}),
+	})
+);