chore: release v3.2.0

.adonisjs/api.ts

@@ -0,0 +1,476 @@
+// @ts-nocheck
+/* eslint-disable */
+// --------------------------------------------------
+// This file is auto-generated by Tuyau. Do not edit manually !
+// --------------------------------------------------
+
+import type { MakeTuyauRequest, MakeTuyauResponse } from '@tuyau/utils/types';
+import type { InferInput } from '@vinejs/vine/types';
+
+type AdminGetHead = {
+	request: unknown;
+	response: MakeTuyauResponse<
+		import('../app/admin/controllers/admin_controller.ts').default['index'],
+		false
+	>;
+};
+type AuthCallbackGetHead = {
+	request: unknown;
+	response: MakeTuyauResponse<
+		import('../app/auth/controllers/auth_controller.ts').default['callbackAuth'],
+		false
+	>;
+};
+type AuthLogoutGetHead = {
+	request: unknown;
+	response: MakeTuyauResponse<
+		import('../app/auth/controllers/auth_controller.ts').default['logout'],
+		false
+	>;
+};
+type DashboardGetHead = {
+	request: unknown;
+	response: MakeTuyauResponse<
+		import('../app/collections/controllers/show_collections_controller.ts').default['render'],
+		false
+	>;
+};
+type CollectionsCreateGetHead = {
+	request: unknown;
+	response: MakeTuyauResponse<
+		import('../app/collections/controllers/create_collection_controller.ts').default['render'],
+		false
+	>;
+};
+type CollectionsPost = {
+	request: MakeTuyauRequest<
+		InferInput<
+			(typeof import('../app/collections/validators/create_collection_validator.ts'))['createCollectionValidator']
+		>
+	>;
+	response: MakeTuyauResponse<
+		import('../app/collections/controllers/create_collection_controller.ts').default['execute'],
+		true
+	>;
+};
+type CollectionsEditGetHead = {
+	request: unknown;
+	response: MakeTuyauResponse<
+		import('../app/collections/controllers/update_collection_controller.ts').default['render'],
+		false
+	>;
+};
+type CollectionsIdPut = {
+	request: MakeTuyauRequest<
+		InferInput<
+			(typeof import('../app/collections/validators/update_collection_validator.ts'))['updateCollectionValidator']
+		>
+	>;
+	response: MakeTuyauResponse<
+		import('../app/collections/controllers/update_collection_controller.ts').default['execute'],
+		true
+	>;
+};
+type CollectionsDeleteGetHead = {
+	request: unknown;
+	response: MakeTuyauResponse<
+		import('../app/collections/controllers/delete_collection_controller.ts').default['render'],
+		false
+	>;
+};
+type CollectionsIdDelete = {
+	request: MakeTuyauRequest<
+		InferInput<
+			(typeof import('../app/collections/validators/delete_collection_validator.ts'))['deleteCollectionValidator']
+		>
+	>;
+	response: MakeTuyauResponse<
+		import('../app/collections/controllers/delete_collection_controller.ts').default['execute'],
+		true
+	>;
+};
+type FaviconGetHead = {
+	request: unknown;
+	response: MakeTuyauResponse<
+		import('../app/favicons/controllers/favicons_controller.ts').default['index'],
+		false
+	>;
+};
+type LinksCreateGetHead = {
+	request: unknown;
+	response: MakeTuyauResponse<
+		import('../app/links/controllers/delete_link_controller.js').default['showCreatePage'],
+		false
+	>;
+};
+type LinksPost = {
+	request: MakeTuyauRequest<
+		InferInput<
+			(typeof import('../app/links/validators/create_link_validator.ts'))['createLinkValidator']
+		>
+	>;
+	response: MakeTuyauResponse<
+		import('../app/links/controllers/delete_link_controller.js').default['store'],
+		true
+	>;
+};
+type LinksEditGetHead = {
+	request: unknown;
+	response: MakeTuyauResponse<
+		import('../app/links/controllers/delete_link_controller.js').default['showEditPage'],
+		false
+	>;
+};
+type LinksIdPut = {
+	request: MakeTuyauRequest<
+		InferInput<
+			(typeof import('../app/links/validators/update_link_validator.ts'))['updateLinkValidator']
+		>
+	>;
+	response: MakeTuyauResponse<
+		import('../app/links/controllers/delete_link_controller.js').default['update'],
+		true
+	>;
+};
+type LinksIdFavoritePut = {
+	request: MakeTuyauRequest<
+		InferInput<
+			(typeof import('../app/links/validators/update_favorite_link_validator.ts'))['updateLinkFavoriteStatusValidator']
+		>
+	>;
+	response: MakeTuyauResponse<
+		import('../app/links/controllers/delete_link_controller.js').default['toggleFavorite'],
+		true
+	>;
+};
+type LinksDeleteGetHead = {
+	request: unknown;
+	response: MakeTuyauResponse<
+		import('../app/links/controllers/delete_link_controller.js').default['showDeletePage'],
+		false
+	>;
+};
+type LinksIdDelete = {
+	request: MakeTuyauRequest<
+		InferInput<
+			(typeof import('../app/links/validators/delete_link_validator.ts'))['deleteLinkValidator']
+		>
+	>;
+	response: MakeTuyauResponse<
+		import('../app/links/controllers/delete_link_controller.js').default['execute'],
+		true
+	>;
+};
+type SearchGetHead = {
+	request: unknown;
+	response: MakeTuyauResponse<
+		import('../app/search/controllers/search_controller.ts').default['search'],
+		false
+	>;
+};
+type SharedIdGetHead = {
+	request: MakeTuyauRequest<
+		InferInput<
+			(typeof import('../app/shared_collections/validators/shared_collection.ts'))['getSharedCollectionValidator']
+		>
+	>;
+	response: MakeTuyauResponse<
+		import('../app/shared_collections/controllers/shared_collections_controller.ts').default['index'],
+		true
+	>;
+};
+type UserThemePost = {
+	request: MakeTuyauRequest<
+		InferInput<
+			(typeof import('../app/user/validators/update_theme_validator.ts'))['updateThemeValidator']
+		>
+	>;
+	response: MakeTuyauResponse<
+		import('../app/user/controllers/theme_controller.ts').default['index'],
+		true
+	>;
+};
+export interface ApiDefinition {
+	admin: {
+		$url: {};
+		$get: AdminGetHead;
+		$head: AdminGetHead;
+	};
+	auth: {
+		callback: {
+			$url: {};
+			$get: AuthCallbackGetHead;
+			$head: AuthCallbackGetHead;
+		};
+		logout: {
+			$url: {};
+			$get: AuthLogoutGetHead;
+			$head: AuthLogoutGetHead;
+		};
+	};
+	dashboard: {
+		$url: {};
+		$get: DashboardGetHead;
+		$head: DashboardGetHead;
+	};
+	collections: {
+		create: {
+			$url: {};
+			$get: CollectionsCreateGetHead;
+			$head: CollectionsCreateGetHead;
+		};
+		$url: {};
+		$post: CollectionsPost;
+		edit: {
+			$url: {};
+			$get: CollectionsEditGetHead;
+			$head: CollectionsEditGetHead;
+		};
+		':id': {
+			$url: {};
+			$put: CollectionsIdPut;
+			$delete: CollectionsIdDelete;
+		};
+		delete: {
+			$url: {};
+			$get: CollectionsDeleteGetHead;
+			$head: CollectionsDeleteGetHead;
+		};
+	};
+	favicon: {
+		$url: {};
+		$get: FaviconGetHead;
+		$head: FaviconGetHead;
+	};
+	links: {
+		create: {
+			$url: {};
+			$get: LinksCreateGetHead;
+			$head: LinksCreateGetHead;
+		};
+		$url: {};
+		$post: LinksPost;
+		edit: {
+			$url: {};
+			$get: LinksEditGetHead;
+			$head: LinksEditGetHead;
+		};
+		':id': {
+			$url: {};
+			$put: LinksIdPut;
+			favorite: {
+				$url: {};
+				$put: LinksIdFavoritePut;
+			};
+			$delete: LinksIdDelete;
+		};
+		delete: {
+			$url: {};
+			$get: LinksDeleteGetHead;
+			$head: LinksDeleteGetHead;
+		};
+	};
+	search: {
+		$url: {};
+		$get: SearchGetHead;
+		$head: SearchGetHead;
+	};
+	shared: {
+		':id': {
+			$url: {};
+			$get: SharedIdGetHead;
+			$head: SharedIdGetHead;
+		};
+	};
+	user: {
+		theme: {
+			$url: {};
+			$post: UserThemePost;
+		};
+	};
+}
+const routes = [
+	{
+		params: [],
+		name: 'admin.dashboard',
+		path: '/admin',
+		method: ['GET', 'HEAD'],
+		types: {} as AdminGetHead,
+	},
+	{
+		params: [],
+		name: 'auth',
+		path: '/auth/google',
+		method: ['GET', 'HEAD'],
+		types: {} as unknown,
+	},
+	{
+		params: [],
+		name: 'auth.callback',
+		path: '/auth/callback',
+		method: ['GET', 'HEAD'],
+		types: {} as AuthCallbackGetHead,
+	},
+	{
+		params: [],
+		name: 'auth.logout',
+		path: '/auth/logout',
+		method: ['GET', 'HEAD'],
+		types: {} as AuthLogoutGetHead,
+	},
+	{
+		params: [],
+		name: 'dashboard',
+		path: '/dashboard',
+		method: ['GET', 'HEAD'],
+		types: {} as DashboardGetHead,
+	},
+	{
+		params: [],
+		name: 'collection.create-form',
+		path: '/collections/create',
+		method: ['GET', 'HEAD'],
+		types: {} as CollectionsCreateGetHead,
+	},
+	{
+		params: [],
+		name: 'collection.create',
+		path: '/collections',
+		method: ['POST'],
+		types: {} as CollectionsPost,
+	},
+	{
+		params: [],
+		name: 'collection.edit-form',
+		path: '/collections/edit',
+		method: ['GET', 'HEAD'],
+		types: {} as CollectionsEditGetHead,
+	},
+	{
+		params: ['id'],
+		name: 'collection.edit',
+		path: '/collections/:id',
+		method: ['PUT'],
+		types: {} as CollectionsIdPut,
+	},
+	{
+		params: [],
+		name: 'collection.delete-form',
+		path: '/collections/delete',
+		method: ['GET', 'HEAD'],
+		types: {} as CollectionsDeleteGetHead,
+	},
+	{
+		params: ['id'],
+		name: 'collection.delete',
+		path: '/collections/:id',
+		method: ['DELETE'],
+		types: {} as CollectionsIdDelete,
+	},
+	{
+		params: [],
+		name: 'favicon',
+		path: '/favicon',
+		method: ['GET', 'HEAD'],
+		types: {} as FaviconGetHead,
+	},
+	{
+		params: [],
+		name: 'home',
+		path: '/',
+		method: ['GET', 'HEAD'],
+		types: {} as unknown,
+	},
+	{
+		params: [],
+		name: 'terms',
+		path: '/terms',
+		method: ['GET', 'HEAD'],
+		types: {} as unknown,
+	},
+	{
+		params: [],
+		name: 'privacy',
+		path: '/privacy',
+		method: ['GET', 'HEAD'],
+		types: {} as unknown,
+	},
+	{
+		params: [],
+		name: 'link.create-form',
+		path: '/links/create',
+		method: ['GET', 'HEAD'],
+		types: {} as LinksCreateGetHead,
+	},
+	{
+		params: [],
+		name: 'link.create',
+		path: '/links',
+		method: ['POST'],
+		types: {} as LinksPost,
+	},
+	{
+		params: [],
+		name: 'link.edit-form',
+		path: '/links/edit',
+		method: ['GET', 'HEAD'],
+		types: {} as LinksEditGetHead,
+	},
+	{
+		params: ['id'],
+		name: 'link.edit',
+		path: '/links/:id',
+		method: ['PUT'],
+		types: {} as LinksIdPut,
+	},
+	{
+		params: ['id'],
+		name: 'link.toggle-favorite',
+		path: '/links/:id/favorite',
+		method: ['PUT'],
+		types: {} as LinksIdFavoritePut,
+	},
+	{
+		params: [],
+		name: 'link.delete-form',
+		path: '/links/delete',
+		method: ['GET', 'HEAD'],
+		types: {} as LinksDeleteGetHead,
+	},
+	{
+		params: ['id'],
+		name: 'link.delete',
+		path: '/links/:id',
+		method: ['DELETE'],
+		types: {} as LinksIdDelete,
+	},
+	{
+		params: [],
+		name: 'search',
+		path: '/search',
+		method: ['GET', 'HEAD'],
+		types: {} as SearchGetHead,
+	},
+	{
+		params: ['id'],
+		name: 'shared',
+		path: '/shared/:id',
+		method: ['GET', 'HEAD'],
+		types: {} as SharedIdGetHead,
+	},
+	{
+		params: [],
+		name: 'user.theme',
+		path: '/user/theme',
+		method: ['POST'],
+		types: {} as UserThemePost,
+	},
+] as const;
+export const api = {
+	routes,
+	definition: {} as ApiDefinition,
+};
+declare module '@tuyau/inertia/types' {
+	type InertiaApi = typeof api;
+	export interface Api extends InertiaApi {}
+}

.adonisjs/index.ts

@@ -0,0 +1,3 @@
+/// <reference path="../adonisrc.ts" />
+
+export * from './api.js';

.env.example

@@ -1,16 +1,22 @@
-# node ace generate:key
-APP_KEY=soY8ZAtItT_fCkNUADfgffZUUo675lOj
+# App
 TZ=UTC
 PORT=3333
 HOST=localhost
-LOG_LEVEL=info
+LOG_LEVEL=debug
+APP_KEY=soY8ZAtItT_fCkNUADfgffZUUo675lOj # node ace generate:key
 NODE_ENV=development
 SESSION_DRIVER=cookie
+
+# App url
+APP_URL=http://localhost:3333
+
+# Database
 DB_HOST=127.0.0.1
 DB_PORT=5432
-DB_USER=postgres
-DB_PASSWORD=my-links-pwd
-DB_DATABASE=my-links
+DB_USER=root
+DB_PASSWORD=root
+DB_DATABASE=app
+
+# Google
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
-GOOGLE_CLIENT_CALLBACK_URL=http://localhost:3333/auth/callback

Dockerfile

@@ -1,6 +1,6 @@
 # Source : https://github.com/adonisjs-community/adonis-packages/blob/main/Dockerfile
 
-FROM node:24.1-alpine3.20 AS base
+FROM node:24.6-alpine3.22 AS base
 
 RUN apk --no-cache add curl
 RUN corepack enable
@@ -34,9 +34,9 @@ ENV DB_PORT=5432
 ENV DB_USER=db_user
 ENV DB_PASSWORD=db_password
 ENV DB_DATABASE=db_db
+ENV APP_URL=http://localhost:3333
 ENV GOOGLE_CLIENT_ID=client_id
 ENV GOOGLE_CLIENT_SECRET=client_secret
-ENV GOOGLE_CLIENT_CALLBACK_URL=http://localhost:3333/auth/callback
 
 RUN node ace izzy:routes
 RUN node ace build

Makefile

@@ -1,3 +1,7 @@
+tuyau:
+	@node ace tuyau:generate
+	@pnpm run format
+
 dev:
 	@docker compose down
 	@docker compose -f dev.compose.yml pull

adonisrc.ts

@@ -2,29 +2,30 @@ import { defineConfig } from '@adonisjs/core/app';
 
 export default defineConfig({
 	/*
-  |--------------------------------------------------------------------------
-  | Commands
-  |--------------------------------------------------------------------------
-  |
-  | List of ace commands to register from packages. The application commands
-  | will be scanned automatically from the "./commands" directory.
-  |
-  */
+|--------------------------------------------------------------------------
+| Commands
+|--------------------------------------------------------------------------
+|
+| List of ace commands to register from packages. The application commands
+| will be scanned automatically from the "./commands" directory.
+|
+*/
 	commands: [
 		() => import('@adonisjs/core/commands'),
 		() => import('@adonisjs/lucid/commands'),
 		() => import('@izzyjs/route/commands'),
+		() => import('@tuyau/core/commands'),
 	],
 
 	/*
-  |--------------------------------------------------------------------------
-  | Service providers
-  |--------------------------------------------------------------------------
-  |
-  | List of service providers to import and register when booting the
-  | application
-  |
-  */
+|--------------------------------------------------------------------------
+| Service providers
+|--------------------------------------------------------------------------
+|
+| List of service providers to import and register when booting the
+| application
+|
+*/
 	providers: [
 		() => import('@adonisjs/core/providers/app_provider'),
 		() => import('@adonisjs/core/providers/hash_provider'),
@@ -45,27 +46,32 @@ export default defineConfig({
 		() => import('@adonisjs/ally/ally_provider'),
 		() => import('@izzyjs/route/izzy_provider'),
 		() => import('#providers/route_provider'),
+		() => import('@tuyau/core/tuyau_provider'),
 	],
 
 	/*
-  |--------------------------------------------------------------------------
-  | Preloads
-  |--------------------------------------------------------------------------
-  |
-  | List of modules to import before starting the application.
-  |
-  */
-	preloads: [() => import('#start/routes'), () => import('#start/kernel')],
+|--------------------------------------------------------------------------
+| Preloads
+|--------------------------------------------------------------------------
+|
+| List of modules to import before starting the application.
+|
+*/
+	preloads: [
+		() => import('#start/routes'),
+		() => import('#start/kernel'),
+		() => import('#start/view'),
+	],
 
 	/*
-  |--------------------------------------------------------------------------
-  | Tests
-  |--------------------------------------------------------------------------
-  |
-  | List of test suites to organize tests by their type. Feel free to remove
-  | and add additional suites.
-  |
-  */
+|--------------------------------------------------------------------------
+| Tests
+|--------------------------------------------------------------------------
+|
+| List of test suites to organize tests by their type. Feel free to remove
+| and add additional suites.
+|
+*/
 	tests: {
 		suites: [
 			{
@@ -83,14 +89,14 @@ export default defineConfig({
 	},
 
 	/*
-  |--------------------------------------------------------------------------
-  | Metafiles
-  |--------------------------------------------------------------------------
-  |
-  | A collection of files you want to copy to the build folder when creating
-  | the production build.
-  |
-  */
+|--------------------------------------------------------------------------
+| Metafiles
+|--------------------------------------------------------------------------
+|
+| A collection of files you want to copy to the build folder when creating
+| the production build.
+|
+*/
 	metaFiles: [
 		{
 			pattern: 'resources/views/**/*.edge',

app/admin/controllers/admin_controller.ts

@@ -1,6 +1,6 @@
 import AuthController from '#auth/controllers/auth_controller';
-import CollectionsController from '#collections/controllers/collections_controller';
-import LinksController from '#links/controllers/links_controller';
+import { CollectionService } from '#collections/services/collection_service';
+import LinksController from '#links/controllers/delete_link_controller';
 import User from '#user/models/user';
 import { inject } from '@adonisjs/core';
 import { HttpContext } from '@adonisjs/core/http';
@@ -28,14 +28,14 @@ export default class AdminController {
 	constructor(
 		protected usersController: AuthController,
 		protected linksController: LinksController,
-		protected collectionsController: CollectionsController
+		protected collectionService: CollectionService
 	) {}
 
 	async index({ inertia }: HttpContext) {
 		const users = await this.usersController.getAllUsersWithTotalRelations();
 		const linksCount = await this.linksController.getTotalLinksCount();
 		const collectionsCount =
-			await this.collectionsController.getTotalCollectionsCount();
+			await this.collectionService.getTotalCollectionsCount();
 
 		return inertia.render('admin/dashboard', {
 			users: users.map((user) => new UserWithRelationCountDto(user).toJson()),

app/collections/controllers/collections_controller.ts

@@ -1,141 +0,0 @@
-import Collection from '#collections/models/collection';
-import { createCollectionValidator } from '#collections/validators/create_collection_validator';
-import { deleteCollectionValidator } from '#collections/validators/delete_collection_validator';
-import { updateCollectionValidator } from '#collections/validators/update_collection_validator';
-import User from '#user/models/user';
-import type { HttpContext } from '@adonisjs/core/http';
-import db from '@adonisjs/lucid/services/db';
-
-export default class CollectionsController {
-	// Dashboard
-	async index({ auth, inertia, request, response }: HttpContext) {
-		const collections = await this.getCollectionsByAuthorId(auth.user!.id);
-		if (collections.length === 0) {
-			return response.redirectToNamedRoute('collection.create-form');
-		}
-
-		const activeCollectionId = Number(request.qs()?.collectionId ?? '');
-		const activeCollection = collections.find(
-			(c) => c.id === activeCollectionId
-		);
-
-		if (!activeCollection && !!activeCollectionId) {
-			return response.redirectToNamedRoute('dashboard');
-		}
-
-		// TODO: Create DTOs
-		return inertia.render('dashboard', {
-			collections: collections.map((collection) => collection.serialize()),
-			activeCollection:
-				activeCollection?.serialize() || collections[0].serialize(),
-		});
-	}
-
-	// Create collection form
-	async showCreatePage({ inertia, auth }: HttpContext) {
-		const collections = await this.getCollectionsByAuthorId(auth.user!.id);
-		return inertia.render('collections/create', {
-			disableHomeLink: collections.length === 0,
-		});
-	}
-
-	// Method called when creating a collection
-	async store({ request, response, auth }: HttpContext) {
-		const payload = await request.validateUsing(createCollectionValidator);
-		const collection = await Collection.create({
-			...payload,
-			authorId: auth.user?.id!,
-		});
-		return this.redirectToCollectionId(response, collection.id);
-	}
-
-	async showEditPage({ auth, request, inertia, response }: HttpContext) {
-		const collectionId = request.qs()?.collectionId;
-		if (!collectionId) {
-			return response.redirectToNamedRoute('dashboard');
-		}
-
-		const collection = await this.getCollectionById(
-			collectionId,
-			auth.user!.id
-		);
-		return inertia.render('collections/edit', {
-			collection,
-		});
-	}
-
-	async update({ request, auth, response }: HttpContext) {
-		const { params, ...payload } = await request.validateUsing(
-			updateCollectionValidator
-		);
-
-		// Cant use validator (vinejs) custom rule 'cause its too generic,
-		// because we have to find a collection by identifier and
-		// check whether the current user is the author.
-		// https://vinejs.dev/docs/extend/custom_rules
-		await this.getCollectionById(params.id, auth.user!.id);
-
-		await Collection.updateOrCreate(
-			{
-				id: params.id,
-			},
-			payload
-		);
-		return this.redirectToCollectionId(response, params.id);
-	}
-
-	async showDeletePage({ auth, request, inertia, response }: HttpContext) {
-		const collectionId = request.qs()?.collectionId;
-		if (!collectionId) {
-			return response.redirectToNamedRoute('dashboard');
-		}
-
-		const collection = await this.getCollectionById(
-			collectionId,
-			auth.user!.id
-		);
-		return inertia.render('collections/delete', {
-			collection,
-		});
-	}
-
-	async delete({ request, auth, response }: HttpContext) {
-		const { params } = await request.validateUsing(deleteCollectionValidator);
-		const collection = await this.getCollectionById(params.id, auth.user!.id);
-		await collection.delete();
-		return response.redirectToNamedRoute('dashboard');
-	}
-
-	async getTotalCollectionsCount() {
-		const totalCount = await db.from('collections').count('* as total');
-		return Number(totalCount[0].total);
-	}
-
-	/**
-	 * Get collection by id.
-	 *
-	 * /!\ Only return private collection (create by the current user)
-	 */
-	async getCollectionById(id: Collection['id'], userId: User['id']) {
-		return await Collection.query()
-			.where('id', id)
-			.andWhere('author_id', userId)
-			.firstOrFail();
-	}
-
-	async getCollectionsByAuthorId(authorId: User['id']) {
-		return await Collection.query()
-			.where('author_id', authorId)
-			.orderBy('created_at')
-			.preload('links');
-	}
-
-	redirectToCollectionId(
-		response: HttpContext['response'],
-		collectionId: Collection['id']
-	) {
-		return response.redirectToNamedRoute('dashboard', {
-			qs: { collectionId },
-		});
-	}
-}

app/collections/controllers/create_collection_controller.ts

@@ -0,0 +1,23 @@
+import { CollectionService } from '#collections/services/collection_service';
+import { createCollectionValidator } from '#collections/validators/create_collection_validator';
+import { inject } from '@adonisjs/core';
+import { type HttpContext } from '@adonisjs/core/http';
+
+@inject()
+export default class CreateCollectionController {
+	constructor(private collectionService: CollectionService) {}
+
+	async render({ inertia }: HttpContext) {
+		const collections =
+			await this.collectionService.getCollectionsForAuthenticatedUser();
+		return inertia.render('collections/create', {
+			disableHomeLink: collections.length === 0,
+		});
+	}
+
+	async execute({ request }: HttpContext) {
+		const payload = await request.validateUsing(createCollectionValidator);
+		const collection = await this.collectionService.createCollection(payload);
+		return this.collectionService.redirectToCollectionId(collection.id);
+	}
+}

app/collections/controllers/delete_collection_controller.ts

@@ -0,0 +1,26 @@
+import { CollectionService } from '#collections/services/collection_service';
+import { deleteCollectionValidator } from '#collections/validators/delete_collection_validator';
+import { inject } from '@adonisjs/core';
+import { HttpContext } from '@adonisjs/core/http';
+
+@inject()
+export default class DeleteCollectionController {
+	constructor(private collectionService: CollectionService) {}
+
+	async render({ inertia }: HttpContext) {
+		const collectionId = await this.collectionService.validateCollectionId();
+		if (!collectionId) return;
+
+		const collection =
+			await this.collectionService.getCollectionById(collectionId);
+		return inertia.render('collections/delete', {
+			collection,
+		});
+	}
+
+	async execute({ request, response }: HttpContext) {
+		const { params } = await request.validateUsing(deleteCollectionValidator);
+		await this.collectionService.deleteCollection(params.id);
+		return response.redirectToNamedRoute('dashboard');
+	}
+}

app/collections/controllers/show_collections_controller.ts

@@ -0,0 +1,36 @@
+import { CollectionService } from '#collections/services/collection_service';
+import { LinkService } from '#links/services/link_service';
+import { inject } from '@adonisjs/core';
+import type { HttpContext } from '@adonisjs/core/http';
+
+@inject()
+export default class ShowCollectionsController {
+	constructor(
+		private collectionService: CollectionService,
+		private linkService: LinkService
+	) {}
+
+	// Dashboard
+	async render({ inertia, response }: HttpContext) {
+		const activeCollectionId =
+			await this.collectionService.validateCollectionId(false);
+		const [collections, favoriteLinks] = await Promise.all([
+			this.collectionService.getCollectionsForAuthenticatedUser(),
+			this.linkService.getFavoriteLinksForAuthenticatedUser(),
+		]);
+
+		const activeCollection = collections.find(
+			(c) => c.id === activeCollectionId
+		);
+
+		if (!activeCollection && !!activeCollectionId) {
+			return response.redirectToNamedRoute('dashboard');
+		}
+
+		return inertia.render('dashboard', {
+			collections: collections.map((collection) => collection.serialize()),
+			favoriteLinks: favoriteLinks.map((link) => link.serialize()),
+			activeCollection: activeCollection?.serialize(),
+		});
+	}
+}

app/collections/controllers/update_collection_controller.ts

@@ -0,0 +1,30 @@
+import { CollectionService } from '#collections/services/collection_service';
+import { updateCollectionValidator } from '#collections/validators/update_collection_validator';
+import { inject } from '@adonisjs/core';
+import { HttpContext } from '@adonisjs/core/http';
+
+@inject()
+export default class UpdateCollectionController {
+	constructor(private collectionService: CollectionService) {}
+
+	async render({ inertia }: HttpContext) {
+		const collectionId = await this.collectionService.validateCollectionId();
+		if (!collectionId) return;
+
+		const collection =
+			await this.collectionService.getCollectionById(collectionId);
+		return inertia.render('collections/edit', {
+			collection: collection.serialize(),
+		});
+	}
+
+	async execute({ request }: HttpContext) {
+		const {
+			params: { id: collectionId },
+			...payload
+		} = await request.validateUsing(updateCollectionValidator);
+
+		await this.collectionService.updateCollection(collectionId, payload);
+		return this.collectionService.redirectToCollectionId(collectionId);
+	}
+}

app/collections/routes/collections_routes.ts

@@ -1,33 +1,45 @@
 import { middleware } from '#start/kernel';
 import router from '@adonisjs/core/services/router';
-const CollectionsController = () =>
-	import('#collections/controllers/collections_controller');
+
+const ShowCollectionsController = () =>
+	import('#collections/controllers/show_collections_controller');
+const CreateCollectionController = () =>
+	import('#collections/controllers/create_collection_controller');
+const UpdateCollectionController = () =>
+	import('#collections/controllers/update_collection_controller');
+const DeleteCollectionController = () =>
+	import('#collections/controllers/delete_collection_controller');
 
 router
 	.group(() => {
-		router.get('/dashboard', [CollectionsController, 'index']).as('dashboard');
+		router
+			.get('/dashboard', [ShowCollectionsController, 'render'])
+			.as('dashboard');
 
 		router
 			.group(() => {
+				// Create
 				router
-					.get('/create', [CollectionsController, 'showCreatePage'])
+					.get('/create', [CreateCollectionController, 'render'])
 					.as('collection.create-form');
 				router
-					.post('/', [CollectionsController, 'store'])
+					.post('/', [CreateCollectionController, 'execute'])
 					.as('collection.create');
 
+				// Update
 				router
-					.get('/edit', [CollectionsController, 'showEditPage'])
+					.get('/edit', [UpdateCollectionController, 'render'])
 					.as('collection.edit-form');
 				router
-					.put('/:id', [CollectionsController, 'update'])
+					.put('/:id', [UpdateCollectionController, 'execute'])
 					.as('collection.edit');
 
+				// Delete
 				router
-					.get('/delete', [CollectionsController, 'showDeletePage'])
+					.get('/delete', [DeleteCollectionController, 'render'])
 					.as('collection.delete-form');
 				router
-					.delete('/:id', [CollectionsController, 'delete'])
+					.delete('/:id', [DeleteCollectionController, 'execute'])
 					.as('collection.delete');
 			})
 			.prefix('/collections');

app/collections/services/collection_service.ts

@@ -0,0 +1,104 @@
+import { Visibility } from '#collections/enums/visibility';
+import Collection from '#collections/models/collection';
+import { collectionIdValidator } from '#collections/validators/collection_id_validator';
+import { HttpContext } from '@adonisjs/core/http';
+import db from '@adonisjs/lucid/services/db';
+
+type CreateCollectionPayload = {
+	name: string;
+	description: string | null;
+	visibility: Visibility;
+};
+
+type UpdateCollectionPayload = CreateCollectionPayload;
+
+export class CollectionService {
+	async getCollectionById(id: Collection['id']) {
+		const context = this.getAuthContext();
+		return await Collection.query()
+			.where('id', id)
+			.andWhere('author_id', context.auth.user!.id)
+			.firstOrFail();
+	}
+
+	async getCollectionsForAuthenticatedUser() {
+		const context = this.getAuthContext();
+		return await Collection.query()
+			.where('author_id', context.auth.user!.id)
+			.orderBy('created_at')
+			.preload('links', (q) => q.orderBy('favorite', 'desc'));
+	}
+
+	async getTotalCollectionsCount() {
+		const totalCount = await db.from('collections').count('* as total');
+		return Number(totalCount[0].total);
+	}
+
+	createCollection(payload: CreateCollectionPayload) {
+		const context = this.getAuthContext();
+		return Collection.create({
+			...payload,
+			authorId: context.auth.user!.id,
+		});
+	}
+
+	async updateCollection(
+		id: Collection['id'],
+		payload: UpdateCollectionPayload
+	) {
+		const context = this.getAuthContext();
+		return await Collection.query()
+			.where('id', id)
+			.andWhere('author_id', context.auth.user!.id)
+			.update(payload);
+	}
+
+	deleteCollection(id: Collection['id']) {
+		const context = this.getAuthContext();
+		return Collection.query()
+			.where('id', id)
+			.andWhere('author_id', context.auth.user!.id)
+			.delete();
+	}
+
+	getPublicCollectionById(id: Collection['id']) {
+		return Collection.query()
+			.where('id', id)
+			.andWhere('visibility', Visibility.PUBLIC)
+			.preload('links')
+			.preload('author')
+			.firstOrFail();
+	}
+
+	private getAuthContext() {
+		const context = HttpContext.getOrFail();
+		if (!context.auth.user || !context.auth.user.id) {
+			throw new Error('User not authenticated');
+		}
+		return context;
+	}
+
+	async validateCollectionId(collectionIdRequired: boolean = true) {
+		const ctx = HttpContext.getOrFail();
+		const { collectionId } = await ctx.request.validateUsing(
+			collectionIdValidator
+		);
+		if (!collectionId && collectionIdRequired) {
+			this.redirectToDashboard();
+			return null;
+		}
+		return collectionId;
+	}
+
+	redirectToCollectionId(collectionId: Collection['id']) {
+		const ctx = HttpContext.getOrFail();
+		return ctx.response.redirectToNamedRoute('dashboard', {
+			qs: { collectionId },
+		});
+	}
+
+	redirectToDashboard() {
+		const ctx = HttpContext.getOrFail();
+		return ctx.response.redirectToNamedRoute('dashboard');
+	}
+}

app/collections/validators/collection_id_validator.ts

@@ -0,0 +1,7 @@
+import vine from '@vinejs/vine';
+
+export const collectionIdValidator = vine.compile(
+	vine.object({
+		collectionId: vine.number().positive().optional(),
+	})
+);

app/links/controllers/create_link_controller.ts

@@ -0,0 +1,30 @@
+import { CollectionService } from '#collections/services/collection_service';
+import { LinkService } from '#links/services/link_service';
+import { createLinkValidator } from '#links/validators/create_link_validator';
+import { inject } from '@adonisjs/core';
+import { HttpContext } from '@adonisjs/core/http';
+
+@inject()
+export default class CreateLinkController {
+	constructor(
+		private linkService: LinkService,
+		private collectionsService: CollectionService
+	) {}
+
+	async render({ inertia }: HttpContext) {
+		const collections =
+			await this.collectionsService.getCollectionsForAuthenticatedUser();
+		return inertia.render('links/create', { collections });
+	}
+
+	async execute({ request }: HttpContext) {
+		const { collectionId, ...payload } =
+			await request.validateUsing(createLinkValidator);
+
+		await this.linkService.createLink({
+			...payload,
+			collectionId,
+		});
+		return this.collectionsService.redirectToCollectionId(collectionId);
+	}
+}

app/links/controllers/delete_link_controller.ts

@@ -0,0 +1,39 @@
+import { CollectionService } from '#collections/services/collection_service';
+import { LinkService } from '#links/services/link_service';
+import { deleteLinkValidator } from '#links/validators/delete_link_validator';
+import { inject } from '@adonisjs/core';
+import { HttpContext } from '@adonisjs/core/http';
+import db from '@adonisjs/lucid/services/db';
+
+@inject()
+export default class DeleteLinkController {
+	constructor(
+		protected collectionsService: CollectionService,
+		protected linkService: LinkService
+	) {}
+
+	async render({ auth, inertia, request }: HttpContext) {
+		const linkId = request.qs()?.linkId;
+		if (!linkId) {
+			return this.collectionsService.redirectToDashboard();
+		}
+
+		const link = await this.linkService.getLinkById(linkId, auth.user!.id);
+		await link.load('collection');
+		return inertia.render('links/delete', { link });
+	}
+
+	async execute({ request, auth }: HttpContext) {
+		const { params } = await request.validateUsing(deleteLinkValidator);
+
+		const link = await this.linkService.getLinkById(params.id, auth.user!.id);
+		await this.linkService.deleteLink(params.id);
+
+		return this.collectionsService.redirectToCollectionId(link.collectionId);
+	}
+
+	async getTotalLinksCount() {
+		const totalCount = await db.from('links').count('* as total');
+		return Number(totalCount[0].total);
+	}
+}

app/links/controllers/links_controller.ts

@@ -1,129 +0,0 @@
-import CollectionsController from '#collections/controllers/collections_controller';
-import Link from '#links/models/link';
-import { createLinkValidator } from '#links/validators/create_link_validator';
-import { deleteLinkValidator } from '#links/validators/delete_link_validator';
-import { updateLinkFavoriteStatusValidator } from '#links/validators/update_favorite_link_validator';
-import { updateLinkValidator } from '#links/validators/update_link_validator';
-import { inject } from '@adonisjs/core';
-import { HttpContext } from '@adonisjs/core/http';
-import db from '@adonisjs/lucid/services/db';
-
-@inject()
-export default class LinksController {
-	constructor(protected collectionsController: CollectionsController) {}
-
-	async showCreatePage({ auth, inertia }: HttpContext) {
-		const collections =
-			await this.collectionsController.getCollectionsByAuthorId(auth.user!.id);
-		return inertia.render('links/create', { collections });
-	}
-
-	async store({ auth, request, response }: HttpContext) {
-		const { collectionId, ...payload } =
-			await request.validateUsing(createLinkValidator);
-
-		await this.collectionsController.getCollectionById(
-			collectionId,
-			auth.user!.id
-		);
-		await Link.create({
-			...payload,
-			collectionId,
-			authorId: auth.user?.id!,
-		});
-		return this.collectionsController.redirectToCollectionId(
-			response,
-			collectionId
-		);
-	}
-
-	async showEditPage({ auth, inertia, request, response }: HttpContext) {
-		const linkId = request.qs()?.linkId;
-		if (!linkId) {
-			return response.redirectToNamedRoute('dashboard');
-		}
-
-		const userId = auth.user!.id;
-		const collections =
-			await this.collectionsController.getCollectionsByAuthorId(userId);
-		const link = await this.getLinkById(linkId, userId);
-
-		return inertia.render('links/edit', { collections, link });
-	}
-
-	async update({ request, auth, response }: HttpContext) {
-		const { params, ...payload } =
-			await request.validateUsing(updateLinkValidator);
-
-		// Throw if invalid link id provided
-		await this.getLinkById(params.id, auth.user!.id);
-
-		await Link.updateOrCreate(
-			{
-				id: params.id,
-			},
-			payload
-		);
-
-		return response.redirectToNamedRoute('dashboard', {
-			qs: { collectionId: payload.collectionId },
-		});
-	}
-
-	async toggleFavorite({ request, auth, response }: HttpContext) {
-		const { params, favorite } = await request.validateUsing(
-			updateLinkFavoriteStatusValidator
-		);
-
-		// Throw if invalid link id provided
-		await this.getLinkById(params.id, auth.user!.id);
-
-		await Link.updateOrCreate(
-			{
-				id: params.id,
-			},
-			{ favorite }
-		);
-
-		return response.json({ status: 'ok' });
-	}
-
-	async showDeletePage({ auth, inertia, request, response }: HttpContext) {
-		const linkId = request.qs()?.linkId;
-		if (!linkId) {
-			return response.redirectToNamedRoute('dashboard');
-		}
-
-		const link = await this.getLinkById(linkId, auth.user!.id);
-		await link.load('collection');
-		return inertia.render('links/delete', { link });
-	}
-
-	async delete({ request, auth, response }: HttpContext) {
-		const { params } = await request.validateUsing(deleteLinkValidator);
-
-		const link = await this.getLinkById(params.id, auth.user!.id);
-		await link.delete();
-
-		return response.redirectToNamedRoute('dashboard', {
-			qs: { collectionId: link.id },
-		});
-	}
-
-	async getTotalLinksCount() {
-		const totalCount = await db.from('links').count('* as total');
-		return Number(totalCount[0].total);
-	}
-
-	/**
-	 * Get link by id.
-	 *
-	 * /!\ Only return private link (create by the current user)
-	 */
-	private async getLinkById(id: Link['id'], userId: Link['id']) {
-		return await Link.query()
-			.where('id', id)
-			.andWhere('author_id', userId)
-			.firstOrFail();
-	}
-}

app/links/controllers/toggle_favorite_controller.ts

@@ -0,0 +1,19 @@
+import { LinkService } from '#links/services/link_service';
+import { updateLinkFavoriteStatusValidator } from '#links/validators/update_favorite_link_validator';
+import { inject } from '@adonisjs/core';
+import { HttpContext } from '@adonisjs/core/http';
+
+@inject()
+export default class ToggleFavoriteController {
+	constructor(private linkService: LinkService) {}
+
+	async toggleFavorite({ request, response }: HttpContext) {
+		const { params, favorite } = await request.validateUsing(
+			updateLinkFavoriteStatusValidator
+		);
+
+		await this.linkService.updateFavorite(params.id, favorite);
+
+		return response.json({ status: 'ok' });
+	}
+}

app/links/controllers/update_link_controller.ts

@@ -0,0 +1,34 @@
+import { CollectionService } from '#collections/services/collection_service';
+import { LinkService } from '#links/services/link_service';
+import { updateLinkValidator } from '#links/validators/update_link_validator';
+import { inject } from '@adonisjs/core';
+import { HttpContext } from '@adonisjs/core/http';
+
+@inject()
+export default class UpdateLinkController {
+	constructor(
+		private linkService: LinkService,
+		private collectionsService: CollectionService
+	) {}
+
+	async render({ auth, inertia, request, response }: HttpContext) {
+		const linkId = request.qs()?.linkId;
+		if (!linkId) {
+			return response.redirectToNamedRoute('dashboard');
+		}
+
+		const collections =
+			await this.collectionsService.getCollectionsForAuthenticatedUser();
+		const link = await this.linkService.getLinkById(linkId, auth.user!.id);
+
+		return inertia.render('links/edit', { collections, link });
+	}
+
+	async execute({ request }: HttpContext) {
+		const { params, ...payload } =
+			await request.validateUsing(updateLinkValidator);
+
+		await this.linkService.updateLink(params.id, payload);
+		return this.collectionsService.redirectToCollectionId(payload.collectionId);
+	}
+}

app/links/routes/links_routes.ts

@@ -1,6 +1,14 @@
 import { middleware } from '#start/kernel';
 import router from '@adonisjs/core/services/router';
-const LinksController = () => import('#links/controllers/links_controller');
+
+const CreateLinkController = () =>
+	import('#links/controllers/create_link_controller');
+const DeleteLinkController = () =>
+	import('#links/controllers/delete_link_controller');
+const UpdateLinkController = () =>
+	import('#links/controllers/update_link_controller');
+const ToggleFavoriteController = () =>
+	import('#links/controllers/toggle_favorite_controller');
 
 /**
  * Routes for authenticated users
@@ -8,21 +16,21 @@ const LinksController = () => import('#links/controllers/links_controller');
 router
 	.group(() => {
 		router
-			.get('/create', [LinksController, 'showCreatePage'])
+			.get('/create', [CreateLinkController, 'render'])
 			.as('link.create-form');
-		router.post('/', [LinksController, 'store']).as('link.create');
+		router.post('/', [CreateLinkController, 'execute']).as('link.create');
 
-		router.get('/edit', [LinksController, 'showEditPage']).as('link.edit-form');
-		router.put('/:id', [LinksController, 'update']).as('link.edit');
+		router.get('/edit', [UpdateLinkController, 'render']).as('link.edit-form');
+		router.put('/:id', [UpdateLinkController, 'execute']).as('link.edit');
 
 		router
-			.put('/:id/favorite', [LinksController, 'toggleFavorite'])
+			.put('/:id/favorite', [ToggleFavoriteController, 'toggleFavorite'])
 			.as('link.toggle-favorite');
 
 		router
-			.get('/delete', [LinksController, 'showDeletePage'])
+			.get('/delete', [DeleteLinkController, 'render'])
 			.as('link.delete-form');
-		router.delete('/:id', [LinksController, 'delete']).as('link.delete');
+		router.delete('/:id', [DeleteLinkController, 'execute']).as('link.delete');
 	})
 	.middleware([middleware.auth()])
 	.prefix('/links');

app/links/services/link_service.ts

@@ -0,0 +1,68 @@
+import Link from '#links/models/link';
+import { HttpContext } from '@adonisjs/core/http';
+
+type CreateLinkPayload = {
+	name: string;
+	description?: string;
+	url: string;
+	favorite: boolean;
+	collectionId: number;
+};
+
+type UpdateLinkPayload = CreateLinkPayload;
+
+export class LinkService {
+	createLink(payload: CreateLinkPayload) {
+		const context = this.getAuthContext();
+		return Link.create({
+			...payload,
+			authorId: context.auth.user!.id,
+		});
+	}
+
+	updateLink(id: number, payload: UpdateLinkPayload) {
+		const context = this.getAuthContext();
+		return Link.query()
+			.where('id', id)
+			.andWhere('author_id', context.auth.user!.id)
+			.update(payload);
+	}
+
+	deleteLink(id: number) {
+		const context = this.getAuthContext();
+		return Link.query()
+			.where('id', id)
+			.andWhere('author_id', context.auth.user!.id)
+			.delete();
+	}
+
+	async getLinkById(id: Link['id'], userId: Link['id']) {
+		return await Link.query()
+			.where('id', id)
+			.andWhere('author_id', userId)
+			.firstOrFail();
+	}
+
+	updateFavorite(id: number, favorite: boolean) {
+		return Link.query()
+			.where('id', id)
+			.andWhere('author_id', this.getAuthContext().auth.user!.id)
+			.update({ favorite });
+	}
+
+	async getFavoriteLinksForAuthenticatedUser() {
+		const context = this.getAuthContext();
+		return await Link.query()
+			.where('author_id', context.auth.user!.id)
+			.where('favorite', true)
+			.orderBy('created_at');
+	}
+
+	getAuthContext() {
+		const context = HttpContext.getOrFail();
+		if (!context.auth.user || !context.auth.user.id) {
+			throw new Error('User not authenticated');
+		}
+		return context;
+	}
+}

app/shared_collections/controllers/shared_collections_controller.ts

@@ -1,61 +1,19 @@
-import { Visibility } from '#collections/enums/visibility';
-import Collection from '#collections/models/collection';
-import Link from '#links/models/link';
-import User from '#user/models/user';
+import { CollectionService } from '#collections/services/collection_service';
+import { inject } from '@adonisjs/core';
 import type { HttpContext } from '@adonisjs/core/http';
 import { getSharedCollectionValidator } from '../validators/shared_collection.js';
 
-class LinkWithoutFavoriteDto {
-	constructor(private link: Link) {}
-
-	toJson = () => ({
-		id: this.link.id,
-		name: this.link.name,
-		description: this.link.description,
-		url: this.link.url,
-		collectionId: this.link.collectionId,
-		createdAt: this.link.createdAt.toString(),
-		updatedAt: this.link.updatedAt.toString(),
-	});
-}
-
-class UserWithoutEmailDto {
-	constructor(private user: User) {}
-
-	toJson = () => ({
-		id: this.user.id,
-		fullname: this.user.name,
-		avatarUrl: this.user.avatarUrl,
-		isAdmin: this.user.isAdmin,
-		createdAt: this.user.createdAt.toString(),
-		updatedAt: this.user.updatedAt.toString(),
-	});
-}
-
+@inject()
 export default class SharedCollectionsController {
+	constructor(private collectionService: CollectionService) {}
+
 	async index({ request, inertia }: HttpContext) {
 		const { params } = await request.validateUsing(
 			getSharedCollectionValidator
 		);
 
-		const collection = await this.getSharedCollectionById(params.id);
-		return inertia.render('shared', { collection });
-	}
-
-	private async getSharedCollectionById(id: Collection['id']) {
-		const collection = await Collection.query()
-			.where('id', id)
-			.andWhere('visibility', Visibility.PUBLIC)
-			.preload('links')
-			.preload('author')
-			.firstOrFail();
-
-		return {
-			...collection.serialize(),
-			links: collection.links.map((link) =>
-				new LinkWithoutFavoriteDto(link).toJson()
-			),
-			author: new UserWithoutEmailDto(collection.author).toJson(),
-		};
+		const activeCollection =
+			await this.collectionService.getPublicCollectionById(params.id);
+		return inertia.render('shared', { activeCollection });
 	}
 }

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
+				),
+		}),
+	})
+);

config/ally.ts

@@ -5,7 +5,7 @@ const allyConfig = defineConfig({
 	google: services.google({
 		clientId: env.get('GOOGLE_CLIENT_ID'),
 		clientSecret: env.get('GOOGLE_CLIENT_SECRET'),
-		callbackUrl: env.get('GOOGLE_CLIENT_CALLBACK_URL'),
+		callbackUrl: env.get('APP_URL') + '/auth/callback',
 		prompt: 'select_account',
 		display: 'page',
 		scopes: ['userinfo.email', 'userinfo.profile'],

config/app.ts

@@ -1,7 +1,7 @@
 import env from '#start/env';
-import app from '@adonisjs/core/services/app';
 import { Secret } from '@adonisjs/core/helpers';
 import { defineConfig } from '@adonisjs/core/http';
+import app from '@adonisjs/core/services/app';
 
 /**
  * The app key is used for encrypting cookies, generating signed URLs,
@@ -23,7 +23,7 @@ export const http = defineConfig({
 	 * Enabling async local storage will let you access HTTP context
 	 * from anywhere inside your application.
 	 */
-	useAsyncLocalStorage: false,
+	useAsyncLocalStorage: true,
 
 	/**
 	 * Manage cookies configuration. The settings for the session id cookie are

config/inertia.ts

@@ -1,4 +1,5 @@
 import { isSSREnableForPage } from '#config/ssr';
+import env from '#start/env';
 import { DEFAULT_USER_THEME, KEY_USER_THEME } from '#user/constants/theme';
 import logger from '@adonisjs/core/services/logger';
 import { defineConfig } from '@adonisjs/inertia';
@@ -24,6 +25,7 @@ export default defineConfig({
 				isAuthenticated: ctx.auth?.isAuthenticated || false,
 			};
 		},
+		appUrl: env.get('APP_URL'),
 	},
 
 	/**

config/project.ts

@@ -1,12 +1,13 @@
-const PROJECT_NAME = 'MyLinks';
-const PROJECT_DESCRIPTION =
-	'Another bookmark manager that lets you manage and share your favorite links in an intuitive interface';
-const PROJECT_URL = 'https://www.mylinks.app';
-const APP_COLOR = '#f0eef6';
+export const PRIMARY_COLOR = '#3f88c5';
 
-export default {
-	name: PROJECT_NAME,
-	description: PROJECT_DESCRIPTION,
-	url: PROJECT_URL,
-	color: APP_COLOR,
-};
+export const PROJECT_NAME = 'MyLinks';
+export const PROJECT_DESCRIPTION =
+	'Another bookmark manager that lets you manage and share your favorite links in an intuitive interface';
+export const PROJECT_URL = 'https://www.mylinks.app';
+export const PROJECT_REPO_GITHUB_URL = 'https://github.com/my-links/my-links';
+export const PROJECT_EXTENSION_URL =
+	'https://chromewebstore.google.com/detail/mylinks/agkmlplihacolkakgeccnbhphnepphma';
+
+export const AUTHOR_NAME = 'Sonny';
+export const AUTHOR_GITHUB_URL = 'https://github.com/Sonny93';
+export const AUTHOR_WEBSITE_URL = 'https://www.sonny.dev/?utm_source=mylinks';

config/tuyau.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from '@tuyau/core';
+
+const tuyauConfig = defineConfig({
+	codegen: {},
+});
+
+export default tuyauConfig;

database/migrations/1755640100586_persist_data_display_preferences_table.ts

@@ -0,0 +1,17 @@
+import { BaseSchema } from '@adonisjs/lucid/schema';
+
+export default class extends BaseSchema {
+	protected tableName = 'users';
+
+	async up() {
+		this.schema.alterTable(this.tableName, (table) => {
+			table.jsonb('display_preferences').defaultTo('{}');
+		});
+	}
+
+	async down() {
+		this.schema.alterTable(this.tableName, (table) => {
+			table.dropColumn('display_preferences');
+		});
+	}
+}

inertia/app/app.tsx

@@ -4,6 +4,7 @@ import { isSSREnableForPage } from 'config-ssr';
 import 'dayjs/locale/en';
 import 'dayjs/locale/fr';
 import { createRoot, hydrateRoot } from 'react-dom/client';
+import DefaultLayout from '~/layouts/default_layout';
 import '../i18n/index';
 
 const appName = import.meta.env.VITE_APP_NAME || 'MyLinks';
@@ -13,11 +14,19 @@ createInertiaApp({
 
 	title: (title) => `${appName}${title && ` - ${title}`}`,
 
-	resolve: (name) => {
-		return resolvePageComponent(
+	resolve: async (name) => {
+		const currentPage: any = await resolvePageComponent(
 			`../pages/${name}.tsx`,
 			import.meta.glob('../pages/**/*.tsx')
 		);
+
+		if (currentPage?.default) {
+			currentPage.default.layout =
+				currentPage.default.layout ||
+				((p: any) => <DefaultLayout children={p} />);
+		}
+
+		return currentPage;
 	},
 
 	setup({ el, App, props }) {

inertia/app/ssr.tsx

@@ -1,5 +1,6 @@
 import { createInertiaApp } from '@inertiajs/react';
 import ReactDOMServer from 'react-dom/server';
+import DefaultLayout from '~/layouts/default_layout';
 
 export default function render(page: any) {
 	return createInertiaApp({
@@ -7,7 +8,15 @@ export default function render(page: any) {
 		render: ReactDOMServer.renderToString,
 		resolve: (name) => {
 			const pages = import.meta.glob('../pages/**/*.tsx', { eager: true });
-			return pages[`../pages/${name}.tsx`];
+			let pageComponent: any = pages[`../pages/${name}.tsx`];
+
+			if (pageComponent?.default) {
+				pageComponent.default.layout =
+					pageComponent.default.layout ||
+					((pageChildren: any) => <DefaultLayout children={pageChildren} />);
+			}
+
+			return pageComponent;
 		},
 		setup: ({ App, props }) => <App {...props} />,
 	});

inertia/components/common/combo_list/combo_list.tsx

@@ -0,0 +1,66 @@
+import { Combobox, Input, InputBase, useCombobox } from '@mantine/core';
+import { ComboListItem } from '~/components/common/combo_list/combo_list_item';
+
+export type ValueWithIcon = {
+	label: string;
+	value: string;
+	icon: React.ReactNode;
+};
+
+export function ComboList({
+	selectedValue,
+	values,
+	setValue,
+}: {
+	selectedValue: string;
+	values: ValueWithIcon[];
+	setValue: (value: string) => void;
+}) {
+	const combobox = useCombobox({
+		onDropdownClose: () => combobox.resetSelectedOption(),
+	});
+
+	const selectedOption = values.find((item) => item.value === selectedValue);
+
+	const options = values.map((item) => (
+		<Combobox.Option value={item.value} key={item.value}>
+			<ComboListItem emoji={item.icon} label={item.label} />
+		</Combobox.Option>
+	));
+
+	return (
+		<Combobox
+			store={combobox}
+			withinPortal={false}
+			onOptionSubmit={(val) => {
+				setValue(val as string);
+				combobox.closeDropdown();
+			}}
+		>
+			<Combobox.Target>
+				<InputBase
+					component="button"
+					type="button"
+					pointer
+					rightSection={<Combobox.Chevron />}
+					onClick={() => combobox.toggleDropdown()}
+					rightSectionPointerEvents="none"
+					multiline
+				>
+					{selectedOption ? (
+						<ComboListItem
+							emoji={selectedOption.icon}
+							label={selectedOption.label}
+						/>
+					) : (
+						<Input.Placeholder>Pick value</Input.Placeholder>
+					)}
+				</InputBase>
+			</Combobox.Target>
+
+			<Combobox.Dropdown>
+				<Combobox.Options>{options}</Combobox.Options>
+			</Combobox.Dropdown>
+		</Combobox>
+	);
+}

inertia/components/common/combo_list/combo_list_item.tsx

@@ -0,0 +1,16 @@
+import { Group, Text } from '@mantine/core';
+
+export const ComboListItem = ({
+	emoji,
+	label,
+}: {
+	emoji: React.ReactNode;
+	label: string;
+}) => (
+	<Group gap="xs" align="center">
+		{emoji}
+		<Text fz="sm" fw={500}>
+			{label}
+		</Text>
+	</Group>
+);

inertia/components/common/floating_navbar/floating_navbar.module.css

@@ -0,0 +1,36 @@
+.navbarWrapper {
+	z-index: 9;
+}
+
+.navbar {
+	height: rem(60);
+	background-color: color-mix(
+		in srgb,
+		var(--mantine-color-body) 50%,
+		transparent
+	);
+	padding-inline: var(--mantine-spacing-lg);
+	transition: transform 400ms ease;
+	backdrop-filter: blur(16px);
+	overflow: hidden;
+	position: sticky;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 9;
+}
+
+.navbar__content {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	height: 100%;
+	max-width: 100%;
+	margin-inline: auto;
+}
+
+.navbar__content > div:last-child {
+	flex: 1;
+	justify-content: flex-end;
+}

inertia/components/common/floating_navbar/floating_navbar.tsx

@@ -0,0 +1,116 @@
+import {
+	PROJECT_EXTENSION_URL,
+	PROJECT_NAME,
+	PROJECT_REPO_GITHUB_URL,
+} from '#config/project';
+import {
+	Box,
+	Burger,
+	Button,
+	Drawer,
+	Flex,
+	Group,
+	Image,
+	rem,
+	useMantineTheme,
+} from '@mantine/core';
+import { useDisclosure, useMediaQuery } from '@mantine/hooks';
+import { useEffect } from 'react';
+import { UserDropdown } from '~/components/common/floating_navbar/user_dropdown';
+import { ExternalLinkUnstyled } from '~/components/common/links/external_link_unstyled';
+import { InternalLink } from '~/components/common/links/internal_link';
+import { LocaleSwitcher } from '~/components/common/locale_switcher';
+import { ThemeSwitcher } from '~/components/common/theme_switcher';
+import { useAuth } from '~/hooks/use_auth';
+import classes from './floating_navbar.module.css';
+
+interface FloatingNavbarProps {
+	width: string;
+}
+
+export function FloatingNavbar({ width }: FloatingNavbarProps) {
+	const auth = useAuth();
+	const theme = useMantineTheme();
+	const [opened, handler] = useDisclosure(false);
+	const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`, false);
+
+	useEffect(() => {
+		if (opened && !isMobile) {
+			handler.close();
+		}
+	}, [isMobile]);
+
+	const links = (
+		<>
+			{auth.isAuthenticated && (
+				<InternalLink route="dashboard" style={{ fontSize: rem(16) }}>
+					Dashboard
+				</InternalLink>
+			)}
+			<ExternalLinkUnstyled
+				href={PROJECT_REPO_GITHUB_URL}
+				style={{ fontSize: rem(16) }}
+			>
+				Github
+			</ExternalLinkUnstyled>
+			<ExternalLinkUnstyled
+				href={PROJECT_EXTENSION_URL}
+				style={{ fontSize: rem(16) }}
+			>
+				Extension
+			</ExternalLinkUnstyled>
+		</>
+	);
+
+	return (
+		<>
+			<Box className={classes.navbar}>
+				<Group className={classes.navbar__content} style={{ width }}>
+					<Group>
+						<InternalLink style={{ fontSize: rem(24) }} route="home">
+							<Image
+								src="/logo.png"
+								h={35}
+								alt="MyLinks's logo"
+								referrerPolicy="no-referrer"
+							/>
+						</InternalLink>
+					</Group>
+					<Group>
+						{!isMobile && <Group>{links}</Group>}
+						{auth.isAuthenticated && <UserDropdown />}
+						{isMobile && <Burger opened={opened} onClick={handler.toggle} />}
+						{!auth.isAuthenticated && (
+							<Button
+								variant="default"
+								component={ExternalLinkUnstyled}
+								newTab={false}
+								href="/auth/google"
+							>
+								Log in
+							</Button>
+						)}
+					</Group>
+				</Group>
+
+				{/* Mobile drawer */}
+				<Drawer
+					opened={opened}
+					onClose={handler.close}
+					padding="md"
+					title={PROJECT_NAME}
+					zIndex={999999}
+					onClick={handler.close}
+				>
+					<Flex direction="column" gap="md">
+						{links}
+					</Flex>
+					<Group mt="md">
+						<ThemeSwitcher />
+						<LocaleSwitcher />
+					</Group>
+				</Drawer>
+			</Box>
+		</>
+	);
+}

inertia/components/common/floating_navbar/user_dropdown.module.css

@@ -0,0 +1,20 @@
+.user {
+	color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
+	padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm) !important;
+	border-radius: var(--mantine-radius-sm);
+	transition: background-color 100ms ease;
+
+	&:hover {
+		background-color: light-dark(
+			var(--mantine-color-white),
+			var(--mantine-color-dark-8)
+		);
+	}
+}
+
+.userActive {
+	background-color: light-dark(
+		var(--mantine-color-white),
+		var(--mantine-color-dark-8)
+	);
+}

inertia/components/common/floating_navbar/user_dropdown.tsx

@@ -0,0 +1,84 @@
+import { Avatar, Group, Menu, Text, UnstyledButton } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { modals } from '@mantine/modals';
+import cx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { TbChevronDown, TbLogout, TbSettings, TbShield } from 'react-icons/tb';
+import { InternalLinkUnstyled } from '~/components/common/links/internal_link_unstyled';
+import { UserPreferences } from '~/components/common/user_preferences/user_preferences';
+import { useAuth } from '~/hooks/use_auth';
+import classes from './user_dropdown.module.css';
+
+export function UserDropdown() {
+	const auth = useAuth();
+	const [userMenuOpened, { open: openUserMenu, close: closeUserMenu }] =
+		useDisclosure(false);
+	const { t } = useTranslation();
+
+	const handlePreferencesModal = () => {
+		modals.open({
+			title: t('user-preferences'),
+			children: <UserPreferences />,
+		});
+	};
+
+	return (
+		<Menu
+			width={260}
+			position="bottom-end"
+			transitionProps={{ transition: 'pop-top-right' }}
+			onClose={closeUserMenu}
+			onOpen={openUserMenu}
+			withinPortal
+		>
+			<Menu.Target>
+				<UnstyledButton
+					className={cx(classes.user, { [classes.userActive]: userMenuOpened })}
+				>
+					<Group gap={7}>
+						<Avatar
+							src={auth.user?.avatarUrl}
+							alt={auth.user?.fullname}
+							radius="xl"
+							size={20}
+						/>
+						<Text fw={500} size="sm" lh={1} mr={3}>
+							{auth.user?.fullname}
+						</Text>
+						<TbChevronDown size={12} />
+					</Group>
+				</UnstyledButton>
+			</Menu.Target>
+			<Menu.Dropdown>
+				{auth.user?.isAdmin && (
+					<>
+						<Menu.Label>{t('common:admin')}</Menu.Label>
+						<Menu.Item
+							leftSection={<TbShield size={16} />}
+							component={InternalLinkUnstyled}
+							href="/admin"
+							color="red"
+						>
+							{t('common:manage-users')}
+						</Menu.Item>
+					</>
+				)}
+
+				<Menu.Label>{t('common:settings')}</Menu.Label>
+				<Menu.Item
+					leftSection={<TbSettings size={16} />}
+					onClick={handlePreferencesModal}
+				>
+					{t('common:preferences')}
+				</Menu.Item>
+				<Menu.Item
+					leftSection={<TbLogout size={16} />}
+					component={InternalLinkUnstyled}
+					href="/auth/logout"
+				>
+					{t('common:logout')}
+				</Menu.Item>
+			</Menu.Dropdown>
+		</Menu>
+	);
+}

inertia/components/common/footer/footer.module.css

@@ -0,0 +1,23 @@
+.footer {
+	background-color: color-mix(
+		in srgb,
+		var(--mantine-color-body) 50%,
+		transparent
+	);
+	padding: var(--mantine-spacing-sm) var(--mantine-spacing-lg);
+}
+
+.footer__content {
+	max-width: 100%;
+	gap: var(--mantine-spacing-xs);
+	margin-inline: auto;
+}
+
+.footer__content p {
+	font-size: var(--mantine-font-size-sm) !important;
+	color: var(--mantine-color-dimmed) !important;
+}
+
+.footer__content a {
+	font-size: var(--mantine-font-size-sm) !important;
+}

inertia/components/common/footer/footer.tsx

@@ -0,0 +1,33 @@
+import { AUTHOR_GITHUB_URL, AUTHOR_NAME } from '#config/project';
+import PATHS from '#core/constants/paths';
+import { Anchor, Group, Text } from '@mantine/core';
+import ExternalLink from '~/components/common/external_link';
+import { ExternalLinkStyled } from '~/components/common/links/external_link_styled';
+import { LocaleSwitcher } from '~/components/common/locale_switcher';
+import { ThemeSwitcher } from '~/components/common/theme_switcher';
+import packageJson from '../../../../package.json';
+import classes from './footer.module.css';
+
+export const Footer = () => (
+	<Group className={classes.footer}>
+		<Group className={classes.footer__content}>
+			<Text>
+				Made with ❤️ by{' '}
+				<ExternalLinkStyled href={AUTHOR_GITHUB_URL}>
+					{AUTHOR_NAME}
+				</ExternalLinkStyled>
+			</Text>
+			•
+			<Text>
+				<Anchor size="sm" component={ExternalLink} href={PATHS.REPO_GITHUB}>
+					{packageJson.version}
+				</Anchor>
+			</Text>
+			•
+			<Group gap="sm" mt={4} mb={4}>
+				<ThemeSwitcher />
+				<LocaleSwitcher />
+			</Group>
+		</Group>
+	</Group>
+);

inertia/components/common/links/external_link_styled.tsx

@@ -0,0 +1,28 @@
+import { Anchor } from '@mantine/core';
+import { AnchorHTMLAttributes, CSSProperties, ReactNode } from 'react';
+
+interface ExternalLinkStyledProps
+	extends AnchorHTMLAttributes<HTMLAnchorElement> {
+	children: ReactNode;
+	style?: CSSProperties;
+	title?: string;
+	className?: string;
+}
+
+export const ExternalLinkStyled = ({
+	children,
+	title,
+	href,
+	...props
+}: ExternalLinkStyledProps) => (
+	<Anchor<'a'>
+		component="a"
+		target="_blank"
+		rel="noreferrer"
+		title={title}
+		href={href}
+		{...props}
+	>
+		{children}
+	</Anchor>
+);

inertia/components/common/links/external_link_unstyled.tsx

@@ -0,0 +1,26 @@
+import { Anchor, CSSProperties } from '@mantine/core';
+import { AnchorHTMLAttributes, ReactNode } from 'react';
+
+interface ExternalLinkUnstyledProps
+	extends AnchorHTMLAttributes<HTMLAnchorElement> {
+	children: ReactNode;
+	style?: CSSProperties;
+	title?: string;
+	className?: string;
+	newTab?: boolean;
+}
+export const ExternalLinkUnstyled = ({
+	children,
+	newTab = true,
+	...props
+}: ExternalLinkUnstyledProps) => (
+	<Anchor
+		component="a"
+		target={newTab ? '_blank' : undefined}
+		rel="noreferrer"
+		{...props}
+		style={{ ...props.style, textDecoration: 'none' }}
+	>
+		{children}
+	</Anchor>
+);

inertia/components/common/links/internal_link.tsx

@@ -0,0 +1,50 @@
+import { ApiRouteName } from '#shared/types/index';
+import { Link } from '@inertiajs/react';
+import { Anchor } from '@mantine/core';
+import { useTuyau } from '@tuyau/inertia/react';
+import { CSSProperties } from 'react';
+
+interface InternalLinkProps {
+	children: React.ReactNode;
+	onClick?: (event: React.MouseEvent<any>) => void;
+	route?: ApiRouteName;
+	href?: string;
+	forceRefresh?: boolean;
+	style?: CSSProperties;
+	className?: string;
+	params?: Record<string, string>;
+}
+
+export const InternalLink = ({
+	children,
+	onClick,
+	route,
+	href,
+	forceRefresh,
+	style,
+	className,
+	params,
+}: InternalLinkProps) => {
+	const tuyau = useTuyau();
+
+	if ((!route && !href) || !tuyau) {
+		throw new Error('InternalLink: route, href or tuyau is missing');
+	}
+
+	const url = route ? tuyau.$route(route, params).path : href;
+	if (!url) {
+		throw new Error('InternalLink: url not found');
+	}
+
+	return (
+		<Anchor<'a' | typeof Link>
+			component={forceRefresh ? 'a' : Link}
+			href={url}
+			style={style}
+			onClick={onClick}
+			className={className}
+		>
+			{children}
+		</Anchor>
+	);
+};

inertia/components/common/links/internal_link_unstyled.tsx

@@ -0,0 +1,61 @@
+import { ApiRouteName } from '#shared/types/index';
+import { Link } from '@inertiajs/react';
+import { useTuyau } from '@tuyau/inertia/react';
+import { CSSProperties } from 'react';
+
+interface InternalLinkProps {
+	children: React.ReactNode;
+	onClick?: (event: React.MouseEvent<any>) => void;
+	route?: ApiRouteName;
+	href?: string;
+	forceRefresh?: boolean;
+	style?: CSSProperties;
+	className?: string;
+	params?: Record<string, string>;
+}
+
+export const InternalLinkUnstyled = ({
+	children,
+	onClick,
+	route,
+	href,
+	forceRefresh,
+	style,
+	className,
+	params,
+}: InternalLinkProps) => {
+	const tuyau = useTuyau();
+
+	if ((!route && !href) || !tuyau) {
+		throw new Error('InternalLink: route, href or tuyau is missing');
+	}
+
+	const url = route ? tuyau.$route(route, params).path : href;
+	if (!url) {
+		throw new Error('InternalLink: url not found');
+	}
+
+	if (forceRefresh) {
+		return (
+			<a
+				href={url}
+				style={{ ...style, textDecoration: 'none' }}
+				onClick={onClick}
+				className={className}
+			>
+				{children}
+			</a>
+		);
+	}
+
+	return (
+		<Link
+			href={url}
+			style={{ ...style, textDecoration: 'none' }}
+			onClick={onClick}
+			className={className}
+		>
+			{children}
+		</Link>
+	);
+};

inertia/components/common/locale_switcher.tsx

@@ -2,7 +2,7 @@ import { ActionIcon, Image } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { LS_LANG_KEY } from '~/constants';
 
-export function MantineLanguageSwitcher() {
+export function LocaleSwitcher() {
 	const { i18n } = useTranslation();
 	const newLanguage = i18n.language === 'en' ? 'fr' : 'en';
 	return (

inertia/components/common/theme_switcher.tsx

@@ -2,7 +2,7 @@ import { ActionIcon, useMantineColorScheme } from '@mantine/core';
 import { TbMoonStars, TbSun } from 'react-icons/tb';
 import { makeRequest } from '~/lib/request';
 
-export function MantineThemeSwitcher() {
+export function ThemeSwitcher() {
 	const { colorScheme, toggleColorScheme } = useMantineColorScheme();
 	const handleThemeChange = () => {
 		toggleColorScheme();

inertia/components/common/user_card.tsx

@@ -3,7 +3,7 @@ import { Avatar, Group, Menu, Text, UnstyledButton } from '@mantine/core';
 import { forwardRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TbChevronRight } from 'react-icons/tb';
-import useUser from '~/hooks/use_user';
+import { useAuth } from '~/hooks/use_auth';
 
 interface UserButtonProps extends React.ComponentPropsWithoutRef<'button'> {
 	image: string;
@@ -45,9 +45,9 @@ const UserButton = forwardRef<HTMLButtonElement, UserButtonProps>(
 	)
 );
 
-export function MantineUserCard() {
+export function UserCard() {
 	const { t } = useTranslation('common');
-	const { user, isAuthenticated } = useUser();
+	const { user, isAuthenticated } = useAuth();
 	return (
 		isAuthenticated && (
 			<Menu withArrow>

inertia/components/common/user_preferences/user_preferences.tsx

@@ -0,0 +1,43 @@
+import { LinkListDisplay } from '#shared/types/index';
+import { Fieldset, Stack, Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { ComboList } from '~/components/common/combo_list/combo_list';
+import { CollectionListSelector } from '~/components/dashboard/collection/collection_list_selector';
+import { useDisplayPreferences } from '~/hooks/use_display_preferences';
+import { useIsMobile } from '~/hooks/use_is_mobile';
+import { getLinkListDisplayOptions } from '~/lib/display_preferences';
+
+export function UserPreferences() {
+	const { displayPreferences, handleUpdateDisplayPreferences } =
+		useDisplayPreferences();
+	const { t } = useTranslation();
+	const isMobile = useIsMobile();
+
+	return (
+		<Fieldset legend={t('preferences')}>
+			{isMobile && (
+				<Text size="xs" c="orange" mb="sm">
+					{t('preferences-description')}
+				</Text>
+			)}
+			<Stack>
+				<Text size="sm" c="dimmed">
+					{t('display-preferences.collection-list-display')}
+				</Text>
+				<CollectionListSelector />
+				<Text size="sm" c="dimmed">
+					{t('display-preferences.link-list-display')}
+				</Text>
+				<ComboList
+					selectedValue={displayPreferences.linkListDisplay}
+					values={getLinkListDisplayOptions()}
+					setValue={(value) =>
+						handleUpdateDisplayPreferences({
+							linkListDisplay: value as LinkListDisplay,
+						})
+					}
+				/>
+			</Stack>
+		</Fieldset>
+	);
+}

inertia/components/dashboard/collection/collection_list.tsx

@@ -0,0 +1,29 @@
+import { ScrollArea, Stack, Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { CollectionFavoriteItem } from '~/components/dashboard/collection/item/collection_favorite_item';
+import { CollectionItem } from '~/components/dashboard/collection/item/collection_item';
+import { useCollections } from '~/hooks/collections/use_collections';
+import { useIsMobile } from '~/hooks/use_is_mobile';
+import styles from './list/collection_list.module.css';
+
+export function CollectionList() {
+	const { t } = useTranslation();
+	const collections = useCollections();
+	const isMobile = useIsMobile();
+
+	return (
+		<Stack gap="xs" h="100%" w={isMobile ? '100%' : '350px'}>
+			<div style={{ display: 'flex', flexDirection: 'column' }}>
+				<Text c="dimmed" ml="md" mb="sm">
+					{t('collection.collections')} • {collections.length}
+				</Text>
+				<ScrollArea className={styles.collectionList}>
+					<CollectionFavoriteItem />
+					{collections.map((collection) => (
+						<CollectionItem collection={collection} />
+					))}
+				</ScrollArea>
+			</div>
+		</Stack>
+	);
+}

inertia/components/dashboard/collection/collection_list_selector.tsx

@@ -0,0 +1,20 @@
+import { CollectionListDisplay } from '#shared/types/index';
+import { ComboList } from '~/components/common/combo_list/combo_list';
+import { useDisplayPreferences } from '~/hooks/use_display_preferences';
+import { getCollectionListDisplayOptions } from '~/lib/display_preferences';
+
+export function CollectionListSelector() {
+	const { displayPreferences, handleUpdateDisplayPreferences } =
+		useDisplayPreferences();
+	return (
+		<ComboList
+			selectedValue={displayPreferences.collectionListDisplay}
+			values={getCollectionListDisplayOptions()}
+			setValue={(value) =>
+				handleUpdateDisplayPreferences({
+					collectionListDisplay: value as CollectionListDisplay,
+				})
+			}
+		/>
+	);
+}

inertia/components/dashboard/collection/inline_collection_list.tsx

@@ -0,0 +1,58 @@
+import { router } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
+import { Chip, Group, Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { useActiveCollection } from '~/hooks/collections/use_active_collection';
+import { useCollections } from '~/hooks/collections/use_collections';
+import { appendCollectionId } from '~/lib/navigation';
+
+export function InlineCollectionList() {
+	const { t } = useTranslation();
+	const collections = useCollections();
+	const activeCollection = useActiveCollection();
+
+	const handleCollectionChange = (value?: string) => {
+		if (value) {
+			router.visit(appendCollectionId(route('dashboard').path, Number(value)));
+			return;
+		}
+		router.visit(route('dashboard').path);
+	};
+
+	const fields = [
+		{
+			label: t('common:favorite'),
+			value: 'favorite',
+		},
+		...collections.map((c) => ({
+			label: (
+				<Group gap="xs" wrap="nowrap">
+					<>{c.name}</>
+					<Text size="xs" c="dimmed">
+						{c.links.length}
+					</Text>
+				</Group>
+			),
+			value: c.id.toString(),
+		})),
+	];
+
+	return (
+		<Group gap="xs" w="100%">
+			{fields.map((field) => (
+				<Chip
+					key={field.value}
+					checked={
+						activeCollection?.id
+							? activeCollection.id === Number(field.value)
+							: field.value === 'favorite'
+					}
+					variant="light"
+					onClick={() => handleCollectionChange(field.value)}
+				>
+					{field.label}
+				</Chip>
+			))}
+		</Group>
+	);
+}

inertia/components/dashboard/collection/item/collection_favorite_item.tsx

@@ -0,0 +1,29 @@
+import { Link } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
+import { Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { TbStar, TbStarFilled } from 'react-icons/tb';
+import { useActiveCollection } from '~/hooks/collections/use_active_collection';
+import classes from './collection_item.module.css';
+
+export function CollectionFavoriteItem() {
+	const { t } = useTranslation();
+	const activeCollection = useActiveCollection();
+	const isActiveCollection = !activeCollection?.id;
+	const FolderIcon = isActiveCollection ? TbStarFilled : TbStar;
+
+	return (
+		<Link
+			className={classes.link}
+			data-active={isActiveCollection || undefined}
+			href={route('dashboard').path}
+			key="favorite"
+			title="Favorite"
+		>
+			<FolderIcon className={classes.linkIcon} />
+			<Text maw={'200px'} style={{ wordBreak: 'break-all' }}>
+				{t('favorite')}
+			</Text>
+		</Link>
+	);
+}

inertia/components/dashboard/collection/item/collection_item.tsx

@@ -3,18 +3,18 @@ import { route } from '@izzyjs/route/client';
 import { Text } from '@mantine/core';
 import { useEffect, useRef } from 'react';
 import { AiFillFolderOpen, AiOutlineFolder } from 'react-icons/ai';
+import { useActiveCollection } from '~/hooks/collections/use_active_collection';
 import { appendCollectionId } from '~/lib/navigation';
-import { useActiveCollection } from '~/stores/collection_store';
 import { CollectionWithLinks } from '~/types/app';
 import classes from './collection_item.module.css';
 
-export default function CollectionItem({
-	collection,
-}: {
+interface CollectionItemProps {
 	collection: CollectionWithLinks;
-}) {
+}
+
+export function CollectionItem({ collection }: CollectionItemProps) {
 	const itemRef = useRef<HTMLAnchorElement>(null);
-	const { activeCollection } = useActiveCollection();
+	const activeCollection = useActiveCollection();
 	const isActiveCollection = collection.id === activeCollection?.id;
 	const FolderIcon = isActiveCollection ? AiFillFolderOpen : AiOutlineFolder;
 
@@ -34,7 +34,10 @@ export default function CollectionItem({
 			title={collection.name}
 		>
 			<FolderIcon className={classes.linkIcon} />
-			<Text lineClamp={1} maw={'200px'} style={{ wordBreak: 'break-all' }}>
+			<Text
+				lineClamp={1}
+				style={{ wordBreak: 'break-all', whiteSpace: 'pre-line' }}
+			>
 				{collection.name}
 			</Text>
 		</Link>

inertia/components/dashboard/collection/list/collection_list.tsx

@@ -1,50 +1,12 @@
-import { router } from '@inertiajs/react';
-import { route } from '@izzyjs/route/client';
 import { Box, ScrollArea, Text } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import CollectionItem from '~/components/dashboard/collection/item/collection_item';
-import useShortcut from '~/hooks/use_shortcut';
-import { appendCollectionId } from '~/lib/navigation';
-import { useActiveCollection, useCollections } from '~/stores/collection_store';
+import { useCollections } from '~/hooks/collections/use_collections';
 import styles from './collection_list.module.css';
 
 export default function CollectionList() {
 	const { t } = useTranslation('common');
-	const { collections } = useCollections();
-	const { activeCollection, setActiveCollection } = useActiveCollection();
-
-	const replaceUrl = (collectionId: number) =>
-		router.get(appendCollectionId(route('dashboard').path, collectionId));
-
-	const goToPreviousCollection = () => {
-		const currentCategoryIndex = collections.findIndex(
-			({ id }) => id === activeCollection?.id
-		);
-		if (currentCategoryIndex === -1 || currentCategoryIndex === 0) return;
-
-		const collection = collections[currentCategoryIndex - 1];
-		replaceUrl(collection.id);
-		setActiveCollection(collection);
-	};
-
-	const goToNextCollection = () => {
-		const currentCategoryIndex = collections.findIndex(
-			({ id }) => id === activeCollection?.id
-		);
-		if (
-			currentCategoryIndex === -1 ||
-			currentCategoryIndex === collections.length - 1
-		)
-			return;
-
-		const collection = collections[currentCategoryIndex + 1];
-		replaceUrl(collection.id);
-		setActiveCollection(collection);
-	};
-
-	useShortcut('ARROW_UP', goToPreviousCollection);
-	useShortcut('ARROW_DOWN', goToNextCollection);
-
+	const collections = useCollections();
 	return (
 		<Box className={styles.sideMenu}>
 			<Box className={styles.listContainer}>

inertia/components/dashboard/collection/mobile_collection_list.tsx

@@ -0,0 +1,50 @@
+import { Button, Drawer, Portal, rem, Text } from '@mantine/core';
+import { useDisclosure, useHeadroom } from '@mantine/hooks';
+import { useTranslation } from 'react-i18next';
+import { TbFolder } from 'react-icons/tb';
+import { CollectionFavoriteItem } from '~/components/dashboard/collection/item/collection_favorite_item';
+import { useCollections } from '~/hooks/collections/use_collections';
+import { CollectionItem } from './item/collection_item';
+
+export function MobileCollectionList() {
+	const { t } = useTranslation();
+	const [opened, handler] = useDisclosure();
+	const collections = useCollections();
+	const pinned = useHeadroom({ fixedAt: 0 });
+
+	return (
+		<>
+			<Drawer
+				opened={opened}
+				onClose={handler.close}
+				title={t('collection.collections', { count: collections.length })}
+			>
+				<CollectionFavoriteItem />
+				{collections.map((collection) => (
+					<CollectionItem collection={collection} />
+				))}
+			</Drawer>
+			<Portal>
+				<Button
+					onClick={handler.open}
+					variant="outline"
+					size="xs"
+					style={{
+						position: 'fixed',
+						left: '50%',
+						bottom: pinned ? rem(16) : rem(-100),
+						width: `calc(100% - ${rem(16)} * 2)`,
+						backgroundColor: 'var(--mantine-color-body)',
+						transition: 'all 0.2s ease-in-out',
+						transform: 'translateX(-50%)',
+					}}
+				>
+					<TbFolder size={18} />
+					<Text ml={4}>
+						{t('collection.collections', { count: collections.length })}
+					</Text>
+				</Button>
+			</Portal>
+		</>
+	);
+}

inertia/components/dashboard/collection/shared_collection_copy_link.tsx

@@ -0,0 +1,32 @@
+import { Badge, CopyButton } from '@mantine/core';
+import { t } from 'i18next';
+import { TbCopy } from 'react-icons/tb';
+import { useActiveCollection } from '~/hooks/collections/use_active_collection';
+import { useAppUrl } from '~/hooks/use_app_url';
+
+const COPY_TIMEOUT = 3_000;
+
+export function SharedCollectionCopyLink() {
+	const appUrl = useAppUrl();
+	const activeCollection = useActiveCollection();
+
+	if (!activeCollection) {
+		return null;
+	}
+
+	const copyUrl = `${appUrl}/shared/${activeCollection.id}`;
+	return (
+		<CopyButton value={copyUrl} timeout={COPY_TIMEOUT}>
+			{({ copied, copy }) => (
+				<Badge
+					variant={copied ? 'filled' : 'light'}
+					onClick={copy}
+					style={{ cursor: 'pointer' }}
+				>
+					{copied ? t('success-copy') : t('visibility.public')}
+					{!copied && <TbCopy style={{ marginLeft: 4 }} />}
+				</Badge>
+			)}
+		</CopyButton>
+	);
+}

inertia/components/dashboard/dashboard_header.tsx

@@ -16,8 +16,8 @@ import { GoPencil } from 'react-icons/go';
 import { IoIosAddCircleOutline } from 'react-icons/io';
 import { IoTrashOutline } from 'react-icons/io5';
 import { ShareCollection } from '~/components/share/share_collection';
+import { useActiveCollection } from '~/hooks/collections/use_active_collection';
 import { appendCollectionId } from '~/lib/navigation';
-import { useActiveCollection } from '~/stores/collection_store';
 import { Visibility } from '~/types/app';
 
 interface DashboardHeaderProps {
@@ -32,7 +32,7 @@ interface DashboardHeaderProps {
 }
 export function DashboardHeader({ navbar, aside }: DashboardHeaderProps) {
 	const { t } = useTranslation('common');
-	const { activeCollection } = useActiveCollection();
+	const activeCollection = useActiveCollection();
 	return (
 		<AppShell.Header style={{ display: 'flex', alignItems: 'center' }}>
 			<Group justify="space-between" px="md" flex={1} wrap="nowrap">

inertia/components/dashboard/dashboard_navbar.tsx

@@ -17,13 +17,13 @@ import { AiOutlineFolderAdd } from 'react-icons/ai';
 import { IoIosSearch } from 'react-icons/io';
 import { IoAdd, IoShieldHalfSharp } from 'react-icons/io5';
 import { PiGearLight } from 'react-icons/pi';
-import { MantineUserCard } from '~/components/common/user_card';
+import { UserCard } from '~/components/common/user_card';
 import { FavoriteList } from '~/components/dashboard/favorite/favorite_list';
 import { SearchSpotlight } from '~/components/search/search';
+import { useActiveCollection } from '~/hooks/collections/use_active_collection';
+import { useAuth } from '~/hooks/use_auth';
 import useShortcut from '~/hooks/use_shortcut';
-import useUser from '~/hooks/use_user';
 import { appendCollectionId } from '~/lib/navigation';
-import { useActiveCollection } from '~/stores/collection_store';
 import { useGlobalHotkeysStore } from '~/stores/global_hotkeys_store';
 
 interface DashboardNavbarProps {
@@ -32,9 +32,9 @@ interface DashboardNavbarProps {
 }
 export function DashboardNavbar({ isOpen, toggle }: DashboardNavbarProps) {
 	const { t } = useTranslation('common');
-	const { isAuthenticated, user } = useUser();
+	const { isAuthenticated, user } = useAuth();
 
-	const { activeCollection } = useActiveCollection();
+	const activeCollection = useActiveCollection();
 	const { globalHotkeysEnabled, setGlobalHotkeysEnabled } =
 		useGlobalHotkeysStore();
 
@@ -84,7 +84,7 @@ export function DashboardNavbar({ isOpen, toggle }: DashboardNavbarProps) {
 				<Burger opened={isOpen} onClick={toggle} size="sm" />
 				<Text>Navigation</Text>
 			</Group>
-			<MantineUserCard />
+			<UserCard />
 			<Divider mt="xs" mb="md" />
 			{isAuthenticated && user.isAdmin && (
 				<NavLink

inertia/components/dashboard/favorite/favorite_list.tsx

@@ -1,13 +1,13 @@
 import { Flex, Group, Stack, Text } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { FavoriteItem } from '~/components/dashboard/favorite/item/favorite_item';
-import { useFavorites } from '~/stores/collection_store';
+import { useFavoriteLinks } from '~/hooks/collections/use_favorite_links';
 
 export function FavoriteList() {
 	const { t } = useTranslation('common');
-	const { favorites } = useFavorites();
+	const favoriteLinks = useFavoriteLinks();
 
-	if (favorites.length === 0) {
+	if (favoriteLinks.length === 0) {
 		return (
 			<Group justify="center">
 				<Text c="dimmed" size="sm" mt="sm">
@@ -20,10 +20,10 @@ export function FavoriteList() {
 	return (
 		<Flex direction="column">
 			<Text c="dimmed" mt="xs" ml="md" mb={4}>
-				{t('favorite')} • {favorites.length}
+				{t('favorite')} • {favoriteLinks.length}
 			</Text>
 			<Stack gap={4}>
-				{favorites.map((link) => (
+				{favoriteLinks.map((link) => (
 					<FavoriteItem link={link} key={link.id} />
 				))}
 			</Stack>

inertia/components/dashboard/link/item/link_controls.tsx

@@ -1,4 +1,4 @@
-import { Link as InertiaLink } from '@inertiajs/react';
+import { Link as InertiaLink, router } from '@inertiajs/react';
 import { route } from '@izzyjs/route/client';
 import { ActionIcon, Menu } from '@mantine/core';
 import { MouseEvent } from 'react';
@@ -10,7 +10,6 @@ import { IoTrashOutline } from 'react-icons/io5';
 import { MdFavorite, MdFavoriteBorder } from 'react-icons/md';
 import { onFavorite } from '~/lib/favorite';
 import { appendCollectionId, appendLinkId } from '~/lib/navigation';
-import { useFavorites } from '~/stores/collection_store';
 import { Link, PublicLink } from '~/types/app';
 
 interface LinksControlsProps {
@@ -21,10 +20,14 @@ export default function LinkControls({
 	link,
 	showGoToCollection = false,
 }: LinksControlsProps) {
-	const { toggleFavorite } = useFavorites();
 	const { t } = useTranslation('common');
 
-	const onFavoriteCallback = () => toggleFavorite(link.id);
+	const onFavoriteCallback = () => {
+		const path = route('link.toggle-favorite', {
+			params: { id: link.id.toString() },
+		}).path;
+		router.put(path);
+	};
 	const handleStopPropagation = (event: MouseEvent<HTMLButtonElement>) =>
 		event.preventDefault();
 

inertia/components/dashboard/link/item/link_item.tsx

@@ -28,7 +28,13 @@ export function LinkItem({ link, hideMenu: hideMenu = false }: LinkItemProps) {
 					{!hideMenu && <LinkControls link={link} />}
 				</Group>
 				{description && (
-					<Text c="dimmed" size="sm" mt="xs" lineClamp={3}>
+					<Text
+						c="dimmed"
+						size="sm"
+						mt="xs"
+						lineClamp={3}
+						style={{ wordBreak: 'break-word', whiteSpace: 'pre-line' }}
+					>
 						{description}
 					</Text>
 				)}

inertia/components/dashboard/link/list/link_list.tsx

@@ -1,24 +1,48 @@
-import { Stack } from '@mantine/core';
+import { DisplayPreferences } from '#shared/types/index';
+import { SimpleGrid, Stack, StyleProp } from '@mantine/core';
 import { LinkItem } from '~/components/dashboard/link/item/link_item';
 import { NoLink } from '~/components/dashboard/link/no_link/no_link';
-import { useActiveCollection } from '~/stores/collection_store';
+import { useActiveCollection } from '~/hooks/collections/use_active_collection';
+import { useFavoriteLinks } from '~/hooks/collections/use_favorite_links';
+import { useDisplayPreferences } from '~/hooks/use_display_preferences';
 
 export interface LinkListProps {
 	hideMenu?: boolean;
 }
 
 export function LinkList({ hideMenu = false }: LinkListProps) {
-	const { activeCollection } = useActiveCollection();
+	const activeCollection = useActiveCollection();
+	const favoriteLinks = useFavoriteLinks();
+	const { displayPreferences } = useDisplayPreferences();
 
-	if (!activeCollection?.links || activeCollection.links.length === 0) {
+	const links = activeCollection?.links || favoriteLinks;
+
+	if (links.length === 0) {
 		return <NoLink hideMenu={hideMenu} />;
 	}
 
 	return (
 		<Stack gap="xs">
-			{activeCollection?.links.map((link) => (
-				<LinkItem link={link} key={link.id} hideMenu={hideMenu} />
-			))}
+			<SimpleGrid cols={getColsByView(displayPreferences)} spacing="xs">
+				{links.map((link) => (
+					<LinkItem link={link} key={link.id} hideMenu={hideMenu} />
+				))}
+			</SimpleGrid>
 		</Stack>
 	);
 }
+
+function getColsByView(
+	displayPreferences: DisplayPreferences
+): StyleProp<number> {
+	const { linkListDisplay } = displayPreferences;
+
+	if (linkListDisplay === 'grid') {
+		return {
+			sm: 1,
+			md: 2,
+			lg: 3,
+		};
+	}
+	return 1;
+}

inertia/components/dashboard/link/no_link/no_link.tsx

@@ -3,30 +3,36 @@ import { route } from '@izzyjs/route/client';
 import { Anchor, Box, Text } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import type { LinkListProps } from '~/components/dashboard/link/list/link_list';
+import { useActiveCollection } from '~/hooks/collections/use_active_collection';
 import { appendCollectionId } from '~/lib/navigation';
-import { useActiveCollection } from '~/stores/collection_store';
 import styles from './no_link.module.css';
 
 interface NoLinkProps extends LinkListProps {}
 
 export function NoLink({ hideMenu }: NoLinkProps) {
 	const { t } = useTranslation('common');
-	const { activeCollection } = useActiveCollection();
+	const activeCollection = useActiveCollection();
+	const isFavorite = !activeCollection?.id;
+
+	const noLinkForCollection = t(
+		'home:no-link',
+		{ name: activeCollection?.name ?? '' } as any,
+		{
+			interpolation: { escapeValue: false },
+		}
+	);
+
+	const noLinkForFavorite = t('home:no-link-favorite');
+
 	return (
 		<Box className={styles.noCollection} p="xl">
 			<Text
 				className={styles.text}
 				dangerouslySetInnerHTML={{
-					__html: t(
-						'home:no-link',
-						{ name: activeCollection?.name ?? '' } as any,
-						{
-							interpolation: { escapeValue: false },
-						}
-					),
+					__html: isFavorite ? noLinkForFavorite : noLinkForCollection,
 				}}
 			/>
-			{!hideMenu && (
+			{!hideMenu && !isFavorite && (
 				<Anchor
 					component={Link}
 					href={appendCollectionId(

inertia/components/footer/footer.tsx

@@ -4,8 +4,8 @@ import { route } from '@izzyjs/route/client';
 import { Anchor, Group, Text } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import ExternalLink from '~/components/common/external_link';
-import { MantineLanguageSwitcher } from '~/components/common/language_switcher';
-import { MantineThemeSwitcher } from '~/components/common/theme_switcher';
+import { LocaleSwitcher } from '~/components/common/locale_switcher';
+import { ThemeSwitcher } from '~/components/common/theme_switcher';
 import packageJson from '../../../package.json';
 import classes from './footer.module.css';
 
@@ -46,8 +46,8 @@ export function MantineFooter() {
 				</Group>
 
 				<Group gap="sm" mt={4} mb={4}>
-					<MantineThemeSwitcher />
-					<MantineLanguageSwitcher />
+					<ThemeSwitcher />
+					<LocaleSwitcher />
 				</Group>
 
 				<Group gap="xs" justify="flex-end" wrap="nowrap">

inertia/components/form/form_collection.tsx

@@ -2,6 +2,7 @@ import { Box, Group, SegmentedControl, Text, TextInput } from '@mantine/core';
 import { FormEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import BackToDashboard from '~/components/common/navigation/back_to_dashboard';
+import useSearchParam from '~/hooks/use_search_param';
 import { FormLayout, FormLayoutProps } from '~/layouts/form_layout';
 import { Visibility } from '~/types/app';
 
@@ -29,6 +30,7 @@ export default function MantineFormCollection({
 	...props
 }: FormCollectionProps) {
 	const { t } = useTranslation('common');
+	const collectionId = Number(useSearchParam('collectionId'));
 
 	const onSubmit = (event: FormEvent<HTMLFormElement>) => {
 		event.preventDefault();
@@ -36,7 +38,7 @@ export default function MantineFormCollection({
 	};
 
 	return (
-		<FormLayout handleSubmit={onSubmit} {...props}>
+		<FormLayout handleSubmit={onSubmit} collectionId={collectionId} {...props}>
 			<BackToDashboard disabled={props.disableHomeLink}>
 				<TextInput
 					label={t('form.name')}

inertia/components/navbar/navbar.tsx

@@ -15,9 +15,9 @@ import {
 import { useDisclosure } from '@mantine/hooks';
 import { useTranslation } from 'react-i18next';
 import ExternalLink from '~/components/common/external_link';
-import { MantineLanguageSwitcher } from '~/components/common/language_switcher';
-import { MantineThemeSwitcher } from '~/components/common/theme_switcher';
-import useUser from '~/hooks/use_user';
+import { LocaleSwitcher } from '~/components/common/locale_switcher';
+import { ThemeSwitcher } from '~/components/common/theme_switcher';
+import useUser from '~/hooks/use_auth';
 import classes from './mobile.module.css';
 
 export default function Navbar() {
@@ -47,8 +47,8 @@ export default function Navbar() {
 					</Group>
 
 					<Group gap="xs">
-						<MantineThemeSwitcher />
-						<MantineLanguageSwitcher />
+						<ThemeSwitcher />
+						<LocaleSwitcher />
 						{!isAuthenticated ? (
 							<Button
 								component="a"

inertia/components/share/share_collection.tsx

@@ -2,15 +2,15 @@ import { ActionIcon, Anchor, CopyButton, Popover, Text } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { TbShare3 } from 'react-icons/tb';
 import { Fragment } from 'react/jsx-runtime';
+import { useActiveCollection } from '~/hooks/collections/use_active_collection';
 import { generateShareUrl } from '~/lib/navigation';
-import { useActiveCollection } from '~/stores/collection_store';
 import { Visibility } from '~/types/app';
 
 const COPY_SUCCESS_TIMEOUT = 2_000;
 
 export function ShareCollection() {
 	const { t } = useTranslation('common');
-	const { activeCollection } = useActiveCollection();
+	const activeCollection = useActiveCollection();
 	if (
 		activeCollection?.visibility !== Visibility.PUBLIC ||
 		typeof window === 'undefined'

inertia/hooks/collections/use_active_collection.tsx

@@ -0,0 +1,25 @@
+import { PageProps } from '@adonisjs/inertia/types';
+import { usePage } from '@inertiajs/react';
+import { CollectionWithLinks } from '~/types/app';
+
+interface UseActiveCollectionProps {
+	activeCollection?: CollectionWithLinks;
+}
+
+export const useActiveCollection = () => {
+	const { props } = usePage<PageProps & UseActiveCollectionProps>();
+	return props.activeCollection;
+};
+
+export type WithActiveCollectionProps = {
+	activeCollection?: CollectionWithLinks;
+};
+
+export const withActiveCollection = (
+	Component: React.ComponentType<WithActiveCollectionProps>
+) => {
+	return (props: WithActiveCollectionProps) => {
+		const activeCollection = useActiveCollection();
+		return <Component {...props} activeCollection={activeCollection} />;
+	};
+};

inertia/hooks/collections/use_collections.tsx

@@ -0,0 +1,25 @@
+import { PageProps } from '@adonisjs/inertia/types';
+import { usePage } from '@inertiajs/react';
+import { CollectionWithLinks } from '~/types/app';
+
+interface UseCollectionsProps {
+	collections: CollectionWithLinks[];
+}
+
+export const useCollections = () => {
+	const { props } = usePage<PageProps & UseCollectionsProps>();
+	return props.collections;
+};
+
+export type WithCollectionsProps = {
+	collections: CollectionWithLinks[];
+};
+
+export const withCollections = <T extends object>(
+	Component: React.ComponentType<T & WithCollectionsProps>
+): React.ComponentType<Omit<T, 'collections'>> => {
+	return (props: Omit<T, 'collections'>) => {
+		const collections = useCollections();
+		return <Component {...(props as T)} collections={collections} />;
+	};
+};

inertia/hooks/collections/use_favorite_links.tsx

@@ -0,0 +1,12 @@
+import { PageProps } from '@adonisjs/inertia/types';
+import { usePage } from '@inertiajs/react';
+import { LinkWithCollection } from '~/types/app';
+
+interface UseFavoriteLinksProps {
+	favoriteLinks: LinkWithCollection[];
+}
+
+export const useFavoriteLinks = () => {
+	const { props } = usePage<PageProps & UseFavoriteLinksProps>();
+	return props.favoriteLinks;
+};

inertia/hooks/use_app_url.tsx

@@ -0,0 +1,7 @@
+import { PageProps } from '@adonisjs/inertia/types';
+import { usePage } from '@inertiajs/react';
+
+export function useAppUrl() {
+	const { props } = usePage<PageProps & { appUrl: string }>();
+	return props.appUrl;
+}

inertia/hooks/use_auth.tsx

@@ -0,0 +1,25 @@
+import { usePage } from '@inertiajs/react';
+import type { Auth, InertiaPage } from '~/types/inertia';
+
+export const useAuth = () => usePage<InertiaPage>().props.auth;
+
+export const withAuth = <T extends object>(
+	Component: React.ComponentType<T & { auth: Auth }>
+): React.ComponentType<Omit<T, 'auth'>> => {
+	return (props: Omit<T, 'auth'>) => {
+		const auth = useAuth();
+		return <Component {...(props as T)} auth={auth} />;
+	};
+};
+
+export const withAuthRequired = <T extends object>(
+	Component: React.ComponentType<T & { auth: Auth }>
+): React.ComponentType<Omit<T, 'auth'>> => {
+	return (props: Omit<T, 'auth'>) => {
+		const auth = useAuth();
+		if (!auth.isAuthenticated) {
+			return null;
+		}
+		return <Component {...(props as T)} auth={auth} />;
+	};
+};

inertia/hooks/use_disable_overflow.ts

@@ -1,9 +0,0 @@
-import { useEffect } from 'react';
-
-export const useDisableOverflow = () =>
-	useEffect(() => {
-		document.body.style.overflow = 'hidden';
-		return () => {
-			document.body.style.overflow = 'auto';
-		};
-	}, []);

inertia/hooks/use_display_preferences.tsx

@@ -0,0 +1,26 @@
+import { getDisplayPreferences } from '#shared/lib/display_preferences';
+import { DisplayPreferences } from '#shared/types/index';
+import { router } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
+import { useAuth } from '~/hooks/use_auth';
+
+export const useDisplayPreferences = () => {
+	const { user } = useAuth();
+	const displayPreferences = getDisplayPreferences(user?.displayPreferences);
+
+	const handleUpdateDisplayPreferences = (
+		displayPreferences: Partial<DisplayPreferences>
+	) => {
+		router.visit(route('user.update-display-preferences').path, {
+			method: 'post',
+			data: {
+				displayPreferences,
+			},
+		});
+	};
+
+	return {
+		displayPreferences,
+		handleUpdateDisplayPreferences,
+	};
+};

inertia/hooks/use_is_mobile.tsx

@@ -0,0 +1,3 @@
+import { useMediaQuery } from '@mantine/hooks';
+
+export const useIsMobile = () => useMediaQuery('(max-width: 768px)');

inertia/hooks/use_route.tsx

@@ -0,0 +1,48 @@
+import { ApiRouteName } from '#shared/types/index';
+import { useTuyau } from '@tuyau/inertia/react';
+import { buildUrl } from '~/lib/navigation';
+
+interface TuyauRoute {
+	route: ApiRouteName;
+	params?: Record<string, string>; // TODO: add type
+}
+
+interface NonTuyauRoute {
+	href: string;
+}
+
+type UseRouteProps = TuyauRoute | NonTuyauRoute;
+
+type TuyauReturn = {
+	url: string;
+	method: string;
+};
+
+type NonTuyauReturn = {
+	url: string;
+};
+
+type UseRouteReturn<T extends UseRouteProps> = T extends TuyauRoute
+	? TuyauReturn
+	: NonTuyauReturn;
+
+export const useRoute = <T extends UseRouteProps>(
+	props: T
+): UseRouteReturn<T> => {
+	const tuyau = useTuyau();
+	if ('href' in props) {
+		return {
+			url: props.href,
+		} as UseRouteReturn<T>;
+	}
+
+	const route = tuyau?.$route(props.route, props.params);
+	if (!route) {
+		throw new Error(`Route ${props.route} not found`);
+	}
+
+	return {
+		url: buildUrl(route.path, props.params ?? {}),
+		method: route.method,
+	} as UseRouteReturn<T>;
+};

inertia/hooks/use_shortcut.tsx

@@ -1,5 +1,5 @@
 import KEYS from '#core/constants/keys';
-import { useHotkeys } from 'react-hotkeys-hook';
+import { useHotkeys } from '@mantine/hooks';
 import { useGlobalHotkeysStore } from '~/stores/global_hotkeys_store';
 
 type ShortcutOptions = {
@@ -16,15 +16,12 @@ export default function useShortcut(
 	}
 ) {
 	const { globalHotkeysEnabled } = useGlobalHotkeysStore();
+	const isEnabled = disableGlobalCheck
+		? enabled
+		: enabled && globalHotkeysEnabled;
 	return useHotkeys(
-		KEYS[key],
-		(event) => {
-			event.preventDefault();
-			cb();
-		},
-		{
-			enabled: disableGlobalCheck ? enabled : enabled && globalHotkeysEnabled,
-			enableOnFormTags: ['INPUT'],
-		}
+		[[KEYS[key], () => isEnabled && cb(), { preventDefault: true }]],
+		undefined,
+		true
 	);
 }

inertia/hooks/use_user.tsx

@@ -1,5 +0,0 @@
-import { usePage } from '@inertiajs/react';
-import type { InertiaPage } from '~/types/inertia';
-
-const useUser = () => usePage<InertiaPage>().props.auth;
-export default useUser;

inertia/i18n/locales/en/common.json

@@ -1,35 +1,35 @@
 {
-  "slogan": "Manage your links in the best possible way",
-  "confirm": "Confirm",
-  "cancel": "Cancel",
+	"slogan": "Manage your links in the best possible way",
+	"confirm": "Confirm",
+	"cancel": "Cancel",
 	"home": "Home",
-  "back-home": "← Back to home",
-  "logout": "Logout",
-  "login": "Login",
-  "link": {
-    "links": "Links",
-    "link": "Link URL",
-    "name": "Link name",
-    "description": "Link description",
-    "create": "Create a link",
-    "edit": "Edit a link",
-    "delete": "Delete a link",
-    "delete-confirm": "Confirm deletion?"
-  },
-  "collection": {
-    "collections": "Collection",
-    "collections_other": "Collections",
-    "name": "Collection name",
-    "description": "Collection description",
-    "no-description": "No description",
-    "visibility": "Public",
-    "create": "Create a collection",
-    "edit": "Edit a collection",
-    "delete": "Delete a collection",
-    "delete-confirm": "Confirm deletion?",
-    "delete-description": "You must delete all links in this collection before you can delete this collection.",
+	"back-home": "← Back to home",
+	"logout": "Logout",
+	"login": "Login",
+	"link": {
+		"links": "Links",
+		"link": "Link URL",
+		"name": "Link name",
+		"description": "Link description",
+		"create": "Create a link",
+		"edit": "Edit a link",
+		"delete": "Delete a link",
+		"delete-confirm": "Confirm deletion?"
+	},
+	"collection": {
+		"collections": "Collection",
+		"collections_other": "Collections",
+		"name": "Collection name",
+		"description": "Collection description",
+		"no-description": "No description",
+		"visibility": "Public",
+		"create": "Create a collection",
+		"edit": "Edit a collection",
+		"delete": "Delete a collection",
+		"delete-confirm": "Confirm deletion?",
+		"delete-description": "You must delete all links in this collection before you can delete this collection.",
 		"managed-by": "Collection managed by <b>{{name}}</b>"
-  },
+	},
 	"form": {
 		"name": "Name",
 		"description": "Description",
@@ -49,38 +49,47 @@
 		"private": "Privé",
 		"public": "Public"
 	},
-  "favorite": "Favorite",
-  "add-favorite": "Add to favorites",
-  "remove-favorite": "Remove from favorites",
-  "favorites-appears-here": "Your favorites will appear here",
-  "go-to-collection": "Go to collection",
-  "no-item-found": "No item found",
-  "admin": "Administrator",
+	"favorite": "Favorite",
+	"add-favorite": "Add to favorites",
+	"remove-favorite": "Remove from favorites",
+	"favorites-appears-here": "Your favorites will appear here",
+	"go-to-collection": "Go to collection",
+	"no-item-found": "No item found",
+	"admin": "Admin",
+	"manage-users": "Manage users",
 	"user": "User",
-  "search": "Search",
-  "search-with": "Search with",
-  "avatar": "{{name}}'s avatar",
-  "generic-error": "Something went wrong",
-  "generic-error-description": "An error has occurred, if this happens again please <a href=\"https://github.com/Sonny93/my-links\" target=\"_blank\">create an issue</a> with as much detail as possible.",
-  "retry": "Retry",
-  "privacy": "Privacy",
-  "terms": "Terms of use",
-  "language": {
-    "fr": "Français",
-    "en": "English"
-  },
-  "lang": "Language",
-  "settings": "Settings",
-  "profile": "Profile",
-  "select-your-lang": "Change the language",
-  "name": "Name",
-  "email": "Email",
-  "member-since": "Member since",
-  "footer": {
-    "made_by": "Made with ❤\uFE0F by"
-  },
+	"search": "Search",
+	"search-with": "Search with",
+	"avatar": "{{name}}'s avatar",
+	"generic-error": "Something went wrong",
+	"generic-error-description": "An error has occurred, if this happens again please <a href=\"https://github.com/Sonny93/my-links\" target=\"_blank\">create an issue</a> with as much detail as possible.",
+	"retry": "Retry",
+	"privacy": "Privacy",
+	"terms": "Terms of use",
+	"language": {
+		"fr": "Français",
+		"en": "English"
+	},
+	"lang": "Language",
+	"settings": "Settings",
+	"profile": "Profile",
+	"select-your-lang": "Change the language",
+	"name": "Name",
+	"email": "Email",
+	"member-since": "Member since",
+	"footer": {
+		"made_by": "Made with ❤\uFE0F by"
+	},
 	"loading": "Loading...",
 	"no-results": "No results found",
 	"click-to-copy": "Click on the following link to copy the shareable url",
-	"success-copy": "Link copied to clipboard"
-}
+	"success-copy": "Link copied to clipboard",
+	"user-preferences": "User preferences",
+	"preferences": "Preferences",
+	"preferences-description": "Display preferences do not apply on mobile",
+	"display-preferences": {
+		"collection-list-display": "Collection list display",
+		"link-list-display": "Link list display"
+	},
+	"coming-soon": "Under development"
+}

inertia/i18n/locales/en/home.json

@@ -1,5 +1,6 @@
 {
-  "select-collection": "Please select a collection",
-  "or-create-one": "or create one",
-  "no-link": "No link for <b>{{name}}</b>"
+	"select-collection": "Please select a collection",
+	"or-create-one": "or create one",
+	"no-link": "No link for <b>{{name}}</b>",
+	"no-link-favorite": "No favorite link"
 }

inertia/i18n/locales/fr/common.json

@@ -1,35 +1,35 @@
 {
-  "slogan": "Gérez vos liens de la meilleure des façons",
-  "confirm": "Confirmer",
-  "cancel": "Annuler",
+	"slogan": "Gérez vos liens de la meilleure des façons",
+	"confirm": "Confirmer",
+	"cancel": "Annuler",
 	"home": "Accueil",
-  "back-home": "← Revenir à l'accueil",
-  "logout": "Déconnexion",
-  "login": "Connexion",
-  "link": {
-    "links": "Liens",
-    "link": "URL du lien",
-    "name": "Nom du lien",
-    "description": "Description du lien",
-    "create": "Créer un lien",
-    "edit": "Modifier un lien",
-    "delete": "Supprimer un lien",
-    "delete-confirm": "Confirmer la suppression ?"
-  },
-  "collection": {
-    "collections": "Collection",
-    "collections_other": "Collections",
-    "name": "Nom de la collection",
-    "description": "Description de la collection",
-    "no-description": "Aucune description",
-    "visibility": "Public",
-    "create": "Créer une collection",
-    "edit": "Modifier une collection",
-    "delete": "Supprimer une collection",
-    "delete-confirm": "Confirmer la suppression ?",
-    "delete-description": "Vous devez supprimer tous les liens de cette collection avant de pouvoir supprimer cette collection",
+	"back-home": "← Revenir à l'accueil",
+	"logout": "Déconnexion",
+	"login": "Connexion",
+	"link": {
+		"links": "Liens",
+		"link": "URL du lien",
+		"name": "Nom du lien",
+		"description": "Description du lien",
+		"create": "Créer un lien",
+		"edit": "Modifier un lien",
+		"delete": "Supprimer un lien",
+		"delete-confirm": "Confirmer la suppression ?"
+	},
+	"collection": {
+		"collections": "Collection",
+		"collections_other": "Collections",
+		"name": "Nom de la collection",
+		"description": "Description de la collection",
+		"no-description": "Aucune description",
+		"visibility": "Public",
+		"create": "Créer une collection",
+		"edit": "Modifier une collection",
+		"delete": "Supprimer une collection",
+		"delete-confirm": "Confirmer la suppression ?",
+		"delete-description": "Vous devez supprimer tous les liens de cette collection avant de pouvoir supprimer cette collection",
 		"managed-by": "Collection gérée par <b>{{name}}</b>"
-  },
+	},
 	"form": {
 		"name": "Nom",
 		"description": "Description",
@@ -49,38 +49,47 @@
 		"private": "Privé",
 		"public": "Public"
 	},
-  "favorite": "Favoris",
-  "add-favorite": "Ajouter aux favoris",
-  "remove-favorite": "Retirer des favoris",
-  "favorites-appears-here": "Vos favoris apparaîtront ici",
-  "go-to-collection": "Voir la collection",
-  "no-item-found": "Aucun élément trouvé",
-	"admin": "Administrateur",
+	"favorite": "Favoris",
+	"add-favorite": "Ajouter aux favoris",
+	"remove-favorite": "Retirer des favoris",
+	"favorites-appears-here": "Vos favoris apparaîtront ici",
+	"go-to-collection": "Voir la collection",
+	"no-item-found": "Aucun élément trouvé",
+	"admin": "Admin",
+	"manage-users": "Gestion des utilisateurs",
 	"user": "Utilisateur",
-  "search": "Rechercher",
-  "search-with": "Rechercher avec",
-  "avatar": "Avatar de {{name}}",
-  "generic-error": "Une erreur est survenue",
-  "generic-error-description": "Une erreur est survenue, si cela se reproduit merci de <a href=\"https://github.com/Sonny93/my-links\" target=\"_blank\">créer une issue</a> avec le maximum de détails.",
-  "retry": "Recommencer",
-  "privacy": "Confidentialité",
-  "terms": "CGU",
-  "language": {
-    "fr": "Français",
-    "en": "English"
-  },
-  "lang": "Langage",
-  "settings": "Paramètres",
-  "profile": "Profil",
-  "select-your-lang": "Modifier la langue",
-  "name": "Nom",
-  "email": "Email",
-  "member-since": "Membre depuis",
-  "footer": {
-    "made_by": "Fait avec ❤\uFE0F par"
-  },
+	"search": "Rechercher",
+	"search-with": "Rechercher avec",
+	"avatar": "Avatar de {{name}}",
+	"generic-error": "Une erreur est survenue",
+	"generic-error-description": "Une erreur est survenue, si cela se reproduit merci de <a href=\"https://github.com/Sonny93/my-links\" target=\"_blank\">créer une issue</a> avec le maximum de détails.",
+	"retry": "Recommencer",
+	"privacy": "Confidentialité",
+	"terms": "CGU",
+	"language": {
+		"fr": "Français",
+		"en": "English"
+	},
+	"lang": "Langage",
+	"settings": "Paramètres",
+	"profile": "Profil",
+	"select-your-lang": "Modifier la langue",
+	"name": "Nom",
+	"email": "Email",
+	"member-since": "Membre depuis",
+	"footer": {
+		"made_by": "Fait avec ❤\uFE0F par"
+	},
 	"loading": "Chargement...",
 	"no-results": "Aucun résultat trouvé",
 	"click-to-copy": "Cliquez sur le lien suivant pour copier l'URL partageable",
-	"success-copy": "Link copié dans le presse-papiers"
-}
+	"success-copy": "Link copié dans le presse-papiers",
+	"user-preferences": "Préférences utilisateur",
+	"preferences": "Préférences",
+	"preferences-description": "Les préférences d'affichage ne s'appliquent pas sur mobile",
+	"display-preferences": {
+		"collection-list-display": "Affichage de la liste des collections",
+		"link-list-display": "Affichage de la liste des liens"
+	},
+	"coming-soon": "En cours de développement"
+}

inertia/i18n/locales/fr/home.json

@@ -1,5 +1,6 @@
 {
-  "select-collection": "Veuillez sélectionner une collection",
-  "or-create-one": "ou en créer une",
-  "no-link": "Aucun lien pour <b>{{name}}</b>"
+	"select-collection": "Veuillez sélectionner une collection",
+	"or-create-one": "ou en créer une",
+	"no-link": "Aucun lien pour <b>{{name}}</b>",
+	"no-link-favorite": "Aucun lien dans les favoris"
 }

inertia/layouts/_base_layout.tsx

@@ -1,19 +1,87 @@
+import { api } from '#adonis/api';
+import { PRIMARY_COLOR } from '#config/project';
 import { router } from '@inertiajs/react';
-import { ColorSchemeScript, MantineProvider } from '@mantine/core';
+import {
+	ColorSchemeScript,
+	createTheme,
+	MantineProvider,
+	rem,
+} from '@mantine/core';
 import '@mantine/core/styles.css';
+import { ModalsProvider } from '@mantine/modals';
 import '@mantine/spotlight/styles.css';
+import { createTuyau } from '@tuyau/client';
+import { TuyauProvider } from '@tuyau/inertia/react';
 import dayjs from 'dayjs';
 import { ReactNode, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useAppUrl } from '~/hooks/use_app_url';
 import '../styles/index.css';
 
 const TRANSITION_IN_CLASS = '__transition_fadeIn';
 const TRANSITION_OUT_CLASS = '__transition_fadeOut';
 
-export default function BaseLayout({ children }: { children: ReactNode }) {
+const customTheme = createTheme({
+	colors: {
+		blue: [
+			'#e7f5ff',
+			'#d0ebff',
+			'#a5d8ff',
+			'#74c0fc',
+			'#4dabf7',
+			PRIMARY_COLOR,
+			'#228be6',
+			'#1c7ed6',
+			'#1971c2',
+			'#1864ab',
+		],
+	},
+	primaryColor: 'blue',
+	fontFamily: 'Poppins, sans-serif',
+	respectReducedMotion: true,
+	components: {
+		Button: {
+			styles: {
+				root: {
+					fontWeight: '400',
+				},
+			},
+		},
+		Badge: {
+			styles: {
+				root: {
+					fontWeight: '500',
+				},
+			},
+		},
+	},
+	headings: {
+		fontWeight: '400',
+
+		sizes: {
+			h1: {
+				fontSize: rem(36),
+				lineHeight: '1.4',
+			},
+			h2: { fontSize: rem(30), lineHeight: '1.2' },
+			h3: { fontSize: rem(24), lineHeight: '1.2' },
+			h4: { fontSize: rem(20), lineHeight: '1.2' },
+			h5: { fontSize: rem(16), lineHeight: '1.2' },
+			h6: { fontSize: rem(12), lineHeight: '1.2' },
+		},
+	},
+});
+
+export function BaseLayout({ children }: { children: ReactNode }) {
 	const { i18n } = useTranslation();
+	const appUrl = useAppUrl();
 	dayjs.locale(i18n.language);
 
+	const tuyauClient = createTuyau({
+		api,
+		baseUrl: appUrl,
+	});
+
 	const findAppElement = () => document.getElementById('app');
 
 	const flipClass = (addClass: string, removeClass: string) => {
@@ -50,9 +118,11 @@ export default function BaseLayout({ children }: { children: ReactNode }) {
 	}, []);
 
 	return (
-		<>
+		<TuyauProvider client={tuyauClient}>
 			<ColorSchemeScript />
-			<MantineProvider>{children}</MantineProvider>
-		</>
+			<MantineProvider theme={customTheme}>
+				<ModalsProvider>{children}</ModalsProvider>
+			</MantineProvider>
+		</TuyauProvider>
 	);
 }

inertia/layouts/content_layout.tsx

@@ -1,33 +0,0 @@
-import { Container } from '@mantine/core';
-import { PropsWithChildren } from 'react';
-import { MantineFooter } from '~/components/footer/footer';
-import Navbar from '~/components/navbar/navbar';
-import BaseLayout from '~/layouts/_base_layout';
-
-const ContentLayout = ({ children }: PropsWithChildren) => (
-	<Container
-		style={{
-			minHeight: '100%',
-			display: 'flex',
-			flexDirection: 'column',
-		}}
-	>
-		<Navbar />
-		<main
-			style={{
-				flex: 1,
-			}}
-		>
-			{children}
-		</main>
-		<MantineFooter />
-	</Container>
-);
-
-const LayoutWrapper = ({ children }: PropsWithChildren) => (
-	<BaseLayout>
-		<ContentLayout>{children}</ContentLayout>
-	</BaseLayout>
-);
-
-export { LayoutWrapper as ContentLayout };

inertia/layouts/dashboard_layout.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import BaseLayout from '~/layouts/_base_layout';
+import { BaseLayout } from '~/layouts/_base_layout';
 
 const LayoutWrapper = ({ children }: PropsWithChildren) => (
 	<BaseLayout>{children}</BaseLayout>

inertia/layouts/default_layout.tsx

@@ -0,0 +1,44 @@
+import { Box, rem } from '@mantine/core';
+import { PropsWithChildren } from 'react';
+import { FloatingNavbar } from '~/components/common/floating_navbar/floating_navbar';
+import { Footer } from '~/components/common/footer/footer';
+import { BaseLayout } from './_base_layout';
+
+const DefaultLayout = ({ children }: PropsWithChildren) => (
+	<BaseLayout>
+		<Layout>{children}</Layout>
+	</BaseLayout>
+);
+
+export default DefaultLayout;
+
+const LAYOUT_WIDTH = '1500px';
+const Layout = ({ children }: PropsWithChildren) => (
+	<>
+		{/* Top navbar */}
+		<FloatingNavbar width={LAYOUT_WIDTH} />
+
+		{/* Page content */}
+		<Box
+			style={{
+				paddingInline: 'var(--mantine-spacing-lg)',
+				flex: 1,
+			}}
+		>
+			<Box
+				style={{
+					height: '100%',
+					maxWidth: '100%',
+					width: LAYOUT_WIDTH,
+					marginInline: 'auto',
+					marginBlock: rem(30),
+				}}
+			>
+				{children}
+			</Box>
+		</Box>
+
+		{/* Footer */}
+		<Footer />
+	</>
+);

inertia/layouts/form_layout.tsx

@@ -3,9 +3,8 @@ import { route } from '@izzyjs/route/client';
 import { Anchor, Button, Container, Group, rem, Title } from '@mantine/core';
 import { FormEvent, PropsWithChildren } from 'react';
 import { useTranslation } from 'react-i18next';
-import { MantineFooter } from '~/components/footer/footer';
 import i18n from '~/i18n';
-import BaseLayout from '~/layouts/_base_layout';
+import { BaseLayout } from '~/layouts/_base_layout';
 import { appendCollectionId } from '~/lib/navigation';
 
 export interface FormLayoutProps extends PropsWithChildren {
@@ -40,7 +39,7 @@ function FormLayout({
 				display: 'flex',
 				flexDirection: 'column',
 			}}
-			pt={80}
+			pt={rem(40)}
 		>
 			<main
 				style={{
@@ -71,7 +70,7 @@ function FormLayout({
 						{!disableHomeLink && (
 							<Anchor
 								component={Link}
-								href={appendCollectionId(route('dashboard').url, collectionId)}
+								href={appendCollectionId(route('dashboard').path, collectionId)}
 								disabled={disableHomeLink}
 							>
 								{t('back-home')}
@@ -87,7 +86,6 @@ function FormLayout({
 							{textSubmitButton}
 						</Button>
 					</Group>
-					<MantineFooter />
 				</form>
 			</main>
 		</Container>

inertia/lib/display_preferences.tsx

@@ -0,0 +1,34 @@
+import {
+	COLLECTION_LIST_DISPLAYS,
+	LINK_LIST_DISPLAYS,
+} from '#shared/lib/display_preferences';
+import { AiOutlineFolder } from 'react-icons/ai';
+import { IoGridOutline } from 'react-icons/io5';
+import { TbList } from 'react-icons/tb';
+import { ValueWithIcon } from '~/components/common/combo_list/combo_list';
+
+const collectionListDisplayIcons = {
+	list: <TbList size={20} />,
+	inline: <AiOutlineFolder size={20} />,
+} as const;
+
+export function getCollectionListDisplayOptions(): ValueWithIcon[] {
+	return COLLECTION_LIST_DISPLAYS.map((display) => ({
+		label: display,
+		value: display,
+		icon: collectionListDisplayIcons[display],
+	}));
+}
+
+const linkListDisplayIcons = {
+	list: <TbList size={20} />,
+	grid: <IoGridOutline size={20} />,
+} as const;
+
+export function getLinkListDisplayOptions(): ValueWithIcon[] {
+	return LINK_LIST_DISPLAYS.map((display) => ({
+		label: display,
+		value: display,
+		icon: linkListDisplayIcons[display],
+	}));
+}

inertia/lib/navigation.ts

@@ -34,3 +34,11 @@ export const generateShareUrl = (
 	if (typeof window === 'undefined') return pathname;
 	return `${window.location.origin}${pathname}`;
 };
+
+export const buildUrl = (url: string, params: Record<string, string>) => {
+	const urlObj = new URL(url);
+	Object.entries(params).forEach(([key, value]) => {
+		urlObj.searchParams.set(key, value);
+	});
+	return urlObj.toString();
+};

inertia/pages/admin/dashboard.tsx

@@ -1,15 +1,8 @@
-import { ReactNode } from 'react';
 import {
 	UsersTable,
 	UsersTableProps,
 } from '~/components/admin/users/users_table';
-import { ContentLayout } from '~/layouts/content_layout';
 
-function AdminDashboardPage(props: UsersTableProps) {
+export default function AdminDashboardPage(props: UsersTableProps) {
 	return <UsersTable {...props} />;
 }
-
-AdminDashboardPage.layout = (page: ReactNode) => (
-	<ContentLayout children={page} />
-);
-export default AdminDashboardPage;

inertia/pages/dashboard.tsx

@@ -1,98 +1,121 @@
-import { AppShell, ScrollArea } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
-import { useEffect } from 'react';
-import { DashboardAside } from '~/components/dashboard/dashboard_aside';
-import { DashboardHeader } from '~/components/dashboard/dashboard_header';
-import { DashboardNavbar } from '~/components/dashboard/dashboard_navbar';
-import { LinkList } from '~/components/dashboard/link/list/link_list';
-import { MantineFooter } from '~/components/footer/footer';
-import { useDisableOverflow } from '~/hooks/use_disable_overflow';
-import useShortcut from '~/hooks/use_shortcut';
-import { DashboardLayout } from '~/layouts/dashboard_layout';
+import { Link } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
 import {
-	useActiveCollection,
-	useCollectionsSetter,
-} from '~/stores/collection_store';
-import { CollectionWithLinks } from '~/types/app';
-import classes from './dashboard.module.css';
+	Box,
+	Button,
+	Divider,
+	Group,
+	Input,
+	Stack,
+	Text,
+	Tooltip,
+} from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { CollectionList } from '~/components/dashboard/collection/collection_list';
+import { InlineCollectionList } from '~/components/dashboard/collection/inline_collection_list';
+import { MobileCollectionList } from '~/components/dashboard/collection/mobile_collection_list';
+import { SharedCollectionCopyLink } from '~/components/dashboard/collection/shared_collection_copy_link';
+import { LinkList } from '~/components/dashboard/link/list/link_list';
+import { useActiveCollection } from '~/hooks/collections/use_active_collection';
+import { useDisplayPreferences } from '~/hooks/use_display_preferences';
+import { useIsMobile } from '~/hooks/use_is_mobile';
+import { appendCollectionId } from '~/lib/navigation';
+import { Visibility } from '~/types/app';
 
-interface DashboardPageProps {
-	collections: CollectionWithLinks[];
-	activeCollection: CollectionWithLinks;
-}
+export default function Dashboard() {
+	const { t } = useTranslation();
+	const { displayPreferences } = useDisplayPreferences();
+	const activeCollection = useActiveCollection();
 
-const HEADER_SIZE_WITH_DESCRIPTION = 60;
-const HEADER_SIZE_WITHOUT_DESCRIPTION = 50;
-
-export default function MantineDashboard(props: Readonly<DashboardPageProps>) {
-	const [openedNavbar, { toggle: toggleNavbar, close: closeNavbar }] =
-		useDisclosure();
-	const [openedAside, { toggle: toggleAside, close: closeAside }] =
-		useDisclosure();
-
-	const { activeCollection } = useActiveCollection();
-	const { _setCollections, setActiveCollection } = useCollectionsSetter();
-
-	useShortcut('ESCAPE_KEY', () => {
-		closeNavbar();
-		closeAside();
-	});
-
-	useDisableOverflow();
-
-	useEffect(() => {
-		_setCollections(props.collections);
-		setActiveCollection(props.activeCollection);
-	}, []);
-
-	const headerHeight = !!activeCollection?.description
-		? HEADER_SIZE_WITH_DESCRIPTION
-		: HEADER_SIZE_WITHOUT_DESCRIPTION;
-	const footerHeight = 45;
+	const isMobile = useIsMobile();
+	const isFavorite = !activeCollection?.id;
 	return (
-		<DashboardLayout>
-			<div className={classes.app_wrapper}>
-				<AppShell
-					layout="alt"
-					header={{ height: headerHeight }}
-					navbar={{
-						width: 300,
-						breakpoint: 'sm',
-						collapsed: { mobile: !openedNavbar },
-					}}
-					aside={{
-						width: 300,
-						breakpoint: 'md',
-						collapsed: { mobile: !openedAside },
-					}}
-					footer={{ height: footerHeight }}
-					classNames={{
-						aside: classes.ml_custom_class,
-						footer: classes.ml_custom_class,
-						navbar: classes.ml_custom_class,
-						header: classes.ml_custom_class,
-					}}
-					className={classes.app_shell}
-				>
-					<DashboardHeader
-						navbar={{ opened: openedNavbar, toggle: toggleNavbar }}
-						aside={{ opened: openedAside, toggle: toggleAside }}
+		<Stack w="100%">
+			<Group justify="space-between">
+				<Tooltip label={t('coming-soon')}>
+					<Input
+						placeholder={t('search')}
+						w={isMobile ? '100%' : '350px'}
+						disabled
 					/>
-					<DashboardNavbar isOpen={openedNavbar} toggle={toggleNavbar} />
-					<AppShell.Main>
-						<ScrollArea
-							h="calc(100vh - var(--app-shell-header-height) - var(--app-shell-footer-height, 0px))"
-							p="md"
+				</Tooltip>
+				<Group>
+					{activeCollection?.visibility === Visibility.PUBLIC && (
+						<>
+							<SharedCollectionCopyLink />
+							<Divider orientation="vertical" />
+						</>
+					)}
+
+					<Button
+						variant="outline"
+						component={Link}
+						href={appendCollectionId(
+							route('collection.create-form').path,
+							activeCollection?.id
+						)}
+						size="xs"
+					>
+						{t('collection.create')}
+					</Button>
+					{!isFavorite && (
+						<Button
+							variant="outline"
+							component={Link}
+							href={appendCollectionId(
+								route('collection.edit-form').path,
+								activeCollection?.id
+							)}
+							size="xs"
 						>
-							<LinkList />
-						</ScrollArea>
-					</AppShell.Main>
-					<DashboardAside isOpen={openedAside} toggle={toggleAside} />
-					<AppShell.Footer pl="xs" pr="xs">
-						<MantineFooter />
-					</AppShell.Footer>
-				</AppShell>
-			</div>
-		</DashboardLayout>
+							{t('collection.edit')}
+						</Button>
+					)}
+
+					<>
+						<Divider orientation="vertical" />
+						<Button
+							variant="light"
+							component={Link}
+							href={appendCollectionId(
+								route('link.create-form').path,
+								activeCollection?.id
+							)}
+							size="xs"
+						>
+							{t('link.create')}
+						</Button>
+					</>
+				</Group>
+			</Group>
+			{displayPreferences.collectionListDisplay === 'inline' && !isMobile && (
+				<InlineCollectionList />
+			)}
+			<Group
+				wrap="nowrap"
+				align="flex-start"
+				style={{ flexDirection: isMobile ? 'column-reverse' : 'row' }}
+				flex={1}
+				w="100%"
+			>
+				<Box w="100%">
+					{activeCollection?.description && (
+						<Text
+							size="sm"
+							c="dimmed"
+							mb="md"
+							style={{ wordBreak: 'break-word', whiteSpace: 'pre-line' }}
+						>
+							{activeCollection.description}
+						</Text>
+					)}
+					<LinkList />
+				</Box>
+				{displayPreferences.collectionListDisplay === 'list' && !isMobile && (
+					<CollectionList />
+				)}
+			</Group>
+			{isMobile && <MobileCollectionList />}
+		</Stack>
 	);
 }

inertia/pages/home.module.css

@@ -7,7 +7,6 @@
 	font-family:
 		Greycliff CF,
 		var(--mantine-font-family);
-	font-weight: 900;
 	margin-bottom: var(--mantine-spacing-md);
 	text-align: center;
 
@@ -18,6 +17,7 @@
 }
 
 .description {
+	color: var(--mantine-color-dimmed);
 	text-align: center;
 
 	@media (max-width: $mantine-breakpoint-sm) {

inertia/pages/home.tsx

@@ -1,11 +1,9 @@
 import { Container, Text, Title } from '@mantine/core';
-import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FeatureList } from '~/components/home/feature_list';
 import classes from './home.module.css';
-import { ContentLayout } from '~/layouts/content_layout';
 
-function HomePage() {
+export default function HomePage() {
 	const { t } = useTranslation('about');
 	return (
 		<Container className={classes.wrapper}>
@@ -21,6 +19,3 @@ function HomePage() {
 		</Container>
 	);
 }
-
-HomePage.layout = (page: ReactNode) => <ContentLayout children={page} />;
-export default HomePage;

inertia/pages/privacy.tsx

@@ -1,8 +1,6 @@
-import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ContentLayout } from '~/layouts/content_layout';
 
-function PrivacyPage() {
+export default function PrivacyPage() {
 	const { t } = useTranslation('privacy');
 	return (
 		<>
@@ -43,6 +41,3 @@ function PrivacyPage() {
 		</>
 	);
 }
-
-PrivacyPage.layout = (page: ReactNode) => <ContentLayout children={page} />;
-export default PrivacyPage;

inertia/pages/shared.tsx

@@ -1,29 +1,20 @@
 import { Flex, Text } from '@mantine/core';
-import { ReactNode, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { LinkList } from '~/components/dashboard/link/list/link_list';
-import { ContentLayout } from '~/layouts/content_layout';
-import { useCollectionsSetter } from '~/stores/collection_store';
 import type { CollectionWithLinks, PublicUser } from '~/types/app';
 
 interface SharedPageProps {
-	collection: CollectionWithLinks & { author: PublicUser };
+	activeCollection: CollectionWithLinks & { author: PublicUser };
 }
 
-function SharedPage({ collection }: SharedPageProps) {
+export default function SharedPage({ activeCollection }: SharedPageProps) {
 	const { t } = useTranslation('common');
-	const { setActiveCollection } = useCollectionsSetter();
-
-	useEffect(() => {
-		setActiveCollection(collection);
-	}, []);
-
 	return (
 		<>
 			<Flex direction="column">
-				<Text size="xl">{collection.name}</Text>
+				<Text size="xl">{activeCollection.name}</Text>
 				<Text size="sm" c="dimmed">
-					{collection.description}
+					{activeCollection.description}
 				</Text>
 				<Flex justify="flex-end">
 					<Text
@@ -33,7 +24,7 @@ function SharedPage({ collection }: SharedPageProps) {
 						mb="lg"
 						dangerouslySetInnerHTML={{
 							__html: t('collection.managed-by', {
-								name: collection.author.fullname,
+								name: activeCollection.author.fullname,
 							}),
 						}}
 					/>
@@ -43,6 +34,3 @@ function SharedPage({ collection }: SharedPageProps) {
 		</>
 	);
 }
-
-SharedPage.layout = (page: ReactNode) => <ContentLayout>{page}</ContentLayout>;
-export default SharedPage;