refactor: collection controllers and service

.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/links_controller.ts').default['showCreatePage'],
+		false
+	>;
+};
+type LinksPost = {
+	request: MakeTuyauRequest<
+		InferInput<
+			(typeof import('../app/links/validators/create_link_validator.ts'))['createLinkValidator']
+		>
+	>;
+	response: MakeTuyauResponse<
+		import('../app/links/controllers/links_controller.ts').default['store'],
+		true
+	>;
+};
+type LinksEditGetHead = {
+	request: unknown;
+	response: MakeTuyauResponse<
+		import('../app/links/controllers/links_controller.ts').default['showEditPage'],
+		false
+	>;
+};
+type LinksIdPut = {
+	request: MakeTuyauRequest<
+		InferInput<
+			(typeof import('../app/links/validators/update_link_validator.ts'))['updateLinkValidator']
+		>
+	>;
+	response: MakeTuyauResponse<
+		import('../app/links/controllers/links_controller.ts').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/links_controller.ts').default['toggleFavorite'],
+		true
+	>;
+};
+type LinksDeleteGetHead = {
+	request: unknown;
+	response: MakeTuyauResponse<
+		import('../app/links/controllers/links_controller.ts').default['showDeletePage'],
+		false
+	>;
+};
+type LinksIdDelete = {
+	request: MakeTuyauRequest<
+		InferInput<
+			(typeof import('../app/links/validators/delete_link_validator.ts'))['deleteLinkValidator']
+		>
+	>;
+	response: MakeTuyauResponse<
+		import('../app/links/controllers/links_controller.ts').default['delete'],
+		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';

.dockerignore

@@ -13,7 +13,7 @@ storage
 
 # Additional good to have ignores for dockerignore
 Dockerfile*
-docker-compose*
+compose*
 .dockerignore
 *.md
 .git

.editorconfig

@@ -10,12 +10,5 @@ charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 
-[*.json]
-insert_final_newline = unset
-
 [**.min.js]
 indent_style = unset
-insert_final_newline = unset
-
-[*.md]
-trim_trailing_whitespace = false

.env.example

@@ -8,9 +8,9 @@ NODE_ENV=development
 SESSION_DRIVER=cookie
 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_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 GOOGLE_CLIENT_CALLBACK_URL=http://localhost:3333/auth/callback

.release-it.json

@@ -1,9 +1,6 @@
 {
   "hooks": {
-    "before:init": [
-      "pnpm format",
-      "pnpm lint"
-    ]
+    "before:init": ["pnpm lint", "pnpm run typecheck"]
   },
   "git": {
     "commitMessage": "chore: release v${version}",
@@ -17,4 +14,4 @@
   "npm": {
     "publish": false
   }
-}
+}

.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-	"recommendations": ["vunguyentuan.vscode-css-variables"]
-}

.vscode/settings.json

@@ -7,7 +7,7 @@
 	"explorer.fileNesting.enabled": true,
 	"explorer.fileNesting.patterns": {
 		"*.js": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts",
-		"package.json": "pnpm-lock.yaml, tsconfig.json, eslint.config.js, .babelrc, vite.config.ts, .editorconfig",
+		"package.json": "pnpm-lock.yaml, pnpm-workspace.yaml, tsconfig.json, eslint.config.js, .babelrc, vite.config.ts, .editorconfig",
 		"Makefile": "*compose.yml, Dockerfile, servers_pgadmin.json, .dockerignore"
 	},
 	"cssVariables.lookupFiles": [
@@ -17,4 +17,4 @@
 		"**/*.less",
 		"node_modules/@mantine/core/styles.css"
 	]
-}
+}

Dockerfile

@@ -1,6 +1,6 @@
 # Source : https://github.com/adonisjs-community/adonis-packages/blob/main/Dockerfile
 
-FROM node:22.11-alpine3.20 AS base
+FROM node:24.1-alpine3.20 AS base
 
 RUN apk --no-cache add curl
 RUN corepack enable

Makefile

@@ -1,21 +1,32 @@
+tuyau:
+	@node ace tuyau:generate
+	@pnpm run format
+
 dev:
 	@docker compose down
 	@docker compose -f dev.compose.yml pull
-	@docker compose -f dev.compose.yml up -d --wait
+	@docker compose -f dev.compose.yml up -d --wait --remove-orphans
 	@node ace migration:fresh
 	@pnpm run dev
 
 prod:
 	@docker compose -f dev.compose.yml down
 	@docker compose pull
-	@docker compose up -d --build --wait
+	@docker compose up -d --build --wait --remove-orphans
 
 seed:
 	@node ace db:seed
 
+fresh:
+	@node ace migration:fresh
+
 down:
 	@-docker compose down
 	@-docker compose -f dev.compose.yml down
 
 release:
 	@pnpm run release
+
+docker-weight:
+	@DOCKER_IMAGE_WEIGHT=$$(docker save axekin-axekin:latest | wc -c | awk '{printf "%.3f", $$1/1024/1024}'); \
+	echo "Docker image weight: $${DOCKER_IMAGE_WEIGHT} Mo"

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',
@@ -103,7 +109,7 @@ export default defineConfig({
 	],
 
 	assetsBundler: false,
-	unstable_assembler: {
+	hooks: {
 		onBuildStarting: [() => import('@adonisjs/vite/build_hook')],
 		onDevServerStarted: [() => import('@izzyjs/route/dev_hook')],
 	},

app/admin/controllers/admin_controller.ts

@@ -1,5 +1,5 @@
 import AuthController from '#auth/controllers/auth_controller';
-import CollectionsController from '#collections/controllers/collections_controller';
+import CollectionsController from '#collections/controllers/show_collections_controller';
 import LinksController from '#links/controllers/links_controller';
 import User from '#user/models/user';
 import { inject } from '@adonisjs/core';

app/collections/controllers/base_collection_controller.ts

@@ -0,0 +1,32 @@
+import Collection from '#collections/models/collection';
+import { HttpContext } from '@adonisjs/core/http';
+import vine from '@vinejs/vine';
+
+export default class BaseCollectionController {
+	protected collectionIdValidator = vine.compile(
+		vine.object({
+			collectionId: vine.number().positive().optional(),
+		})
+	);
+
+	async validateCollectionId(collectionIdRequired: boolean = true) {
+		const ctx = HttpContext.getOrFail();
+		const { collectionId } = await ctx.request.validateUsing(
+			this.collectionIdValidator
+		);
+		if (!collectionId && collectionIdRequired) {
+			console.log('redirecting to dashboard');
+			ctx.response.redirectToNamedRoute('dashboard');
+			return null;
+		}
+		console.log('collectionId', collectionId);
+		return collectionId;
+	}
+
+	redirectToCollectionId(collectionId: Collection['id']) {
+		const ctx = HttpContext.getOrFail();
+		return ctx.response.redirectToNamedRoute('dashboard', {
+			qs: { collectionId },
+		});
+	}
+}

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,25 @@
+import BaseCollectionController from '#collections/controllers/base_collection_controller';
+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 extends BaseCollectionController {
+	constructor(private collectionService: CollectionService) {
+		super();
+	}
+
+	async render({ inertia }: HttpContext) {
+		const collections = await this.collectionService.getCollectionsByAuthorId();
+		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.redirectToCollectionId(collection.id);
+	}
+}

app/collections/controllers/delete_collection_controller.ts

@@ -0,0 +1,29 @@
+import BaseCollectionController from '#collections/controllers/base_collection_controller';
+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 extends BaseCollectionController {
+	constructor(private collectionService: CollectionService) {
+		super();
+	}
+
+	async render({ inertia }: HttpContext) {
+		const collectionId = await this.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,34 @@
+import BaseCollectionController from '#collections/controllers/base_collection_controller';
+import { CollectionService } from '#collections/services/collection_service';
+import { inject } from '@adonisjs/core';
+import type { HttpContext } from '@adonisjs/core/http';
+
+@inject()
+export default class ShowCollectionsController extends BaseCollectionController {
+	constructor(private collectionService: CollectionService) {
+		super();
+	}
+
+	// Dashboard
+	async render({ inertia, response }: HttpContext) {
+		const activeCollectionId = await this.validateCollectionId(false);
+		const collections = await this.collectionService.getCollectionsByAuthorId();
+		if (collections.length === 0) {
+			return response.redirectToNamedRoute('collection.create-form');
+		}
+
+		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()),
+			activeCollection:
+				activeCollection?.serialize() || collections[0].serialize(),
+		});
+	}
+}

app/collections/controllers/update_collection_controller.ts

@@ -0,0 +1,33 @@
+import BaseCollectionController from '#collections/controllers/base_collection_controller';
+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 extends BaseCollectionController {
+	constructor(private collectionService: CollectionService) {
+		super();
+	}
+
+	async render({ inertia }: HttpContext) {
+		const collectionId = await this.validateCollectionId();
+		if (!collectionId) return;
+
+		const collection =
+			await this.collectionService.getCollectionById(collectionId);
+		return inertia.render('collections/update', {
+			collection: collection.serialize(),
+		});
+	}
+
+	async execute({ request }: HttpContext) {
+		const {
+			params: { id: collectionId },
+			...payload
+		} = await request.validateUsing(updateCollectionValidator);
+
+		await this.collectionService.updateCollection(collectionId, payload);
+		return this.redirectToCollectionId(collectionId);
+	}
+}

app/collections/models/collection.ts

@@ -15,9 +15,6 @@ export default class Collection extends AppBaseModel {
 	@column()
 	declare visibility: Visibility;
 
-	@column()
-	declare nextId: number;
-
 	@column()
 	declare authorId: number;
 

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,70 @@
+import { Visibility } from '#collections/enums/visibility';
+import Collection from '#collections/models/collection';
+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 getCollectionsByAuthorId() {
+		const context = this.getAuthContext();
+		return await Collection.query()
+			.where('author_id', context.auth.user!.id)
+			.orderBy('created_at')
+			.preload('links');
+	}
+
+	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();
+	}
+
+	getAuthContext() {
+		const context = HttpContext.getOrFail();
+		if (!context.auth.user || !context.auth.user.id) {
+			throw new Error('User not authenticated');
+		}
+		return context;
+	}
+}

app/collections/validators/create_collection_validator.ts

@@ -6,7 +6,6 @@ export const createCollectionValidator = vine.compile(
 		name: vine.string().trim().minLength(1).maxLength(254),
 		description: vine.string().trim().maxLength(254).nullable(),
 		visibility: vine.enum(Visibility),
-		nextId: vine.number().optional(),
 	})
 );
 

app/collections/validators/update_collection_validator.ts

@@ -7,7 +7,6 @@ export const updateCollectionValidator = vine.compile(
 		name: vine.string().trim().minLength(1).maxLength(254),
 		description: vine.string().trim().maxLength(254).nullable(),
 		visibility: vine.enum(Visibility),
-		nextId: vine.number().optional(),
 
 		params,
 	})

app/links/controllers/links_controller.ts

@@ -1,4 +1,4 @@
-import CollectionsController from '#collections/controllers/collections_controller';
+import CollectionsController from '#collections/controllers/show_collections_controller';
 import Link from '#links/models/link';
 import { createLinkValidator } from '#links/validators/create_link_validator';
 import { deleteLinkValidator } from '#links/validators/delete_link_validator';

compose.yml

@@ -15,33 +15,6 @@ services:
     ports:
       - '${DB_PORT}:5432'
 
-  pgadmin:
-    container_name: pgadmin
-    image: dpage/pgadmin4:8
-    restart: always
-    entrypoint: /bin/sh -c "chmod 0600 /pgpass; /entrypoint.sh;"
-    healthcheck:
-      test: ['CMD', 'wget', '-O', '-', 'http://localhost:80/misc/ping']
-      interval: 2s
-      timeout: 10s
-      retries: 30
-    env_file: .env
-    environment:
-      - PGADMIN_DEFAULT_EMAIL=myemail@gmail.com
-      - PGADMIN_DEFAULT_PASSWORD=a12345678
-      - PGADMIN_CONFIG_SERVER_MODE=False
-      - PGADMIN_CONFIG_MASTER_PASSWORD_REQUIRED=False
-    depends_on:
-      - postgres
-    ports:
-      - '5050:80'
-    user: root
-    configs:
-      - source: servers.json
-        target: /pgadmin4/servers.json
-      - source: pgpass
-        target: /pgpass
-
   my-links:
     container_name: my-links
     restart: always
@@ -61,19 +34,3 @@ services:
 
 volumes:
   postgres-volume:
-
-configs:
-  pgpass:
-    content: postgres:${DB_PORT}:*:${DB_USER}:${DB_PASSWORD}
-  servers.json:
-    content: |
-      {"Servers": {"1": {
-        "Group": "Servers",
-        "Name": "project",
-        "Host": "postgres",
-        "Port": ${DB_PORT},
-        "MaintenanceDB": "${DB_DATABASE}",
-        "Username": "${DB_USER}",
-        "PassFile": "/pgpass",
-        "SSLMode": "prefer"
-      }}}

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/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/1737478982886_drop_next_id_collections_table.ts

@@ -0,0 +1,21 @@
+import { BaseSchema } from '@adonisjs/lucid/schema';
+
+export default class extends BaseSchema {
+	protected tableName = 'collections';
+
+	async up() {
+		this.schema.alterTable('collections', (table) => {
+			table.dropColumn('next_id');
+		});
+	}
+
+	async down() {
+		this.schema.alterTable('collections', (table) => {
+			table
+				.integer('next_id')
+				.references('id')
+				.inTable('collections')
+				.defaultTo(null);
+		});
+	}
+}

database/seeders/collection_seeder.ts

@@ -4,6 +4,8 @@ import User from '#user/models/user';
 import { BaseSeeder } from '@adonisjs/lucid/seeders';
 import { faker } from '@faker-js/faker';
 
+const ID_OFFSET = 100;
+
 export default class extends BaseSeeder {
 	static environment = ['development', 'testing'];
 
@@ -11,7 +13,7 @@ export default class extends BaseSeeder {
 		const users = await getUserIds();
 
 		const collections = faker.helpers.multiple(
-			() => createRandomCollection(users),
+			(_, index) => createRandomCollection(users, ID_OFFSET + index),
 			{
 				count: 50,
 			}
@@ -25,16 +27,13 @@ export async function getUserIds() {
 	return users.map(({ id }) => id);
 }
 
-let collectionId = 0;
-function createRandomCollection(userIds: User['id'][]) {
+function createRandomCollection(userIds: User['id'][], id: number) {
 	const authorId = faker.helpers.arrayElements(userIds, 1).at(0);
-	collectionId++;
 	return {
-		id: collectionId,
+		id,
 		name: faker.string.alphanumeric({ length: { min: 5, max: 25 } }),
 		description: faker.string.alphanumeric({ length: { min: 0, max: 254 } }),
 		visibility: Visibility.PRIVATE,
-		nextId: collectionId + 1,
 		authorId,
 	};
 }

database/seeders/link_seeder.ts

@@ -5,6 +5,8 @@ import User from '#user/models/user';
 import { BaseSeeder } from '@adonisjs/lucid/seeders';
 import { faker } from '@faker-js/faker';
 
+const ID_OFFSET = 100;
+
 export default class extends BaseSeeder {
 	static environment = ['development', 'testing'];
 
@@ -12,9 +14,12 @@ export default class extends BaseSeeder {
 		const users = await getUserIds();
 
 		const links = await Promise.all(
-			faker.helpers.multiple(async () => createRandomLink(users), {
-				count: 500,
-			})
+			faker.helpers.multiple(
+				async (_, index) => createRandomLink(users, ID_OFFSET + index),
+				{
+					count: 500,
+				}
+			)
 		);
 		await Link.createMany(links.filter((a) => typeof a !== 'undefined') as any);
 	}
@@ -25,7 +30,7 @@ async function getCollectionIds(authorId: User['id']) {
 	return collection.map(({ id }) => id);
 }
 
-async function createRandomLink(userIds: User['id'][]) {
+async function createRandomLink(userIds: User['id'][], id: number) {
 	const authorId = faker.helpers.arrayElements(userIds, 1).at(0)!;
 	const collections = await getCollectionIds(authorId);
 
@@ -35,7 +40,7 @@ async function createRandomLink(userIds: User['id'][]) {
 	}
 
 	return {
-		id: faker.string.uuid(),
+		id,
 		name: faker.string.alphanumeric({ length: { min: 5, max: 25 } }),
 		description: faker.string.alphanumeric({ length: { min: 0, max: 254 } }),
 		url: faker.internet.url(),

database/seeders/user_seeder.ts

@@ -3,22 +3,27 @@ import { GoogleToken } from '@adonisjs/ally/types';
 import { BaseSeeder } from '@adonisjs/lucid/seeders';
 import { faker } from '@faker-js/faker';
 
+const ID_OFFSET = 100;
+
 export default class extends BaseSeeder {
 	static environment = ['development', 'testing'];
 
 	async run() {
-		const users = faker.helpers.multiple(createRandomUser, {
-			count: 25,
-		});
+		const users = faker.helpers.multiple(
+			(_, index) => createRandomUser(ID_OFFSET + index),
+			{
+				count: 25,
+			}
+		);
 		await User.createMany(users);
 	}
 }
 
-export function createRandomUser() {
+export function createRandomUser(index: number) {
 	return {
-		id: faker.number.int(),
+		id: index,
 		email: faker.internet.email(),
-		name: faker.internet.userName(),
+		name: faker.internet.username(),
 		nickName: faker.internet.displayName(),
 		avatarUrl: faker.image.avatar(),
 		isAdmin: false,

dev.compose.yml

@@ -15,48 +15,5 @@ services:
     ports:
       - "${DB_PORT}:5432"
 
-  pgadmin:
-    container_name: pgadmin
-    image: dpage/pgadmin4:8
-    restart: always
-    entrypoint: /bin/sh -c "chmod 0600 /pgpass; /entrypoint.sh;"
-    healthcheck:
-      test: ["CMD", "wget", "-O", "-", "http://localhost:80/misc/ping"]
-      interval: 2s
-      timeout: 10s
-      retries: 30
-    env_file: .env
-    environment:
-      - PGADMIN_DEFAULT_EMAIL=myemail@gmail.com
-      - PGADMIN_DEFAULT_PASSWORD=a12345678
-      - PGADMIN_CONFIG_SERVER_MODE=False
-      - PGADMIN_CONFIG_MASTER_PASSWORD_REQUIRED=False
-    depends_on:
-      - postgres
-    ports:
-      - "5050:80"
-    user: root
-    configs:
-      - source: servers.json
-        target: /pgadmin4/servers.json
-      - source: pgpass
-        target: /pgpass
-
 volumes:
   postgres-volume:
-
-configs:
-  pgpass:
-    content: postgres:${DB_PORT}:*:${DB_USER}:${DB_PASSWORD}
-  servers.json:
-    content: |
-      {"Servers": {"1": {
-        "Group": "Servers",
-        "Name": "project",
-        "Host": "postgres",
-        "Port": ${DB_PORT},
-        "MaintenanceDB": "${DB_DATABASE}",
-        "Username": "${DB_USER}",
-        "PassFile": "/pgpass",
-        "SSLMode": "prefer"
-      }}}

eslint.config.js

@@ -1,4 +1,7 @@
 import { configApp } from '@adonisjs/eslint-config';
 export default configApp({
   files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+  rules: {
+    'unicorn/filename-case': 'off',
+  },
 });

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,17 @@ 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')
 		);
+
+		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,11 @@ 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`];
+			pageComponent.default.layout =
+				pageComponent?.default?.layout ||
+				((pageChildren: any) => <DefaultLayout children={pageChildren} />);
+			return pageComponent;
 		},
 		setup: ({ App, props }) => <App {...props} />,
 	});

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,108 @@
+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 { 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 = (
+		<>
+			<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>}
+						{isMobile && <Burger opened={opened} onClick={handler.toggle} />}
+						{auth.isAuthenticated && <UserDropdown />}
+						{!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>
+				</Drawer>
+			</Box>
+		</>
+	);
+}

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

@@ -0,0 +1,24 @@
+.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)
+		);
+	}
+
+	@media (max-width: 768px) {
+		display: none;
+	}
+}
+
+.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,73 @@
+import { Avatar, Group, Menu, Text, UnstyledButton } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import cx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { TbChevronDown, TbLogout, TbUser } from 'react-icons/tb';
+import { InternalLink } from '~/components/common/links/internal_link';
+import { InternalLinkUnstyled } from '~/components/common/links/internal_link_unstyled';
+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();
+	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>
+				<Menu.Label>{t('common:user')}</Menu.Label>
+				<Menu.Item
+					leftSection={<TbUser size={16} />}
+					component={InternalLinkUnstyled}
+					href={`/user/${auth.user?.fullname}`}
+					color="inherit"
+				>
+					{t('common:profile')}
+				</Menu.Item>
+
+				{auth.user?.isAdmin && (
+					<>
+						<Menu.Label>{t('common:admin')}</Menu.Label>
+						<InternalLink href="/admin">{t('common:admin')}</InternalLink>
+					</>
+				)}
+
+				<Menu.Label>{t('common:settings')}</Menu.Label>
+				<Menu.Item
+					leftSection={<TbLogout size={16} />}
+					component={InternalLinkUnstyled}
+					href="/auth/logout"
+					color="inherit"
+				>
+					{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/dashboard/collection/item/collection_item.module.css

@@ -6,7 +6,7 @@
 	text-decoration: none;
 	font-size: var(--mantine-font-size-sm);
 	color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
-	padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+	padding: rem(8px) rem(12px);
 	border-radius: var(--mantine-radius-sm);
 	font-weight: 500;
 

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

@@ -24,8 +24,6 @@ export default function CollectionItem({
 		}
 	}, [collection.id, activeCollection?.id]);
 
-	const linksCount = collection?.links.length ?? 0;
-	const showLinks = linksCount > 0;
 	return (
 		<Link
 			className={classes.link}
@@ -39,11 +37,6 @@ export default function CollectionItem({
 			<Text lineClamp={1} maw={'200px'} style={{ wordBreak: 'break-all' }}>
 				{collection.name}
 			</Text>
-			{showLinks && (
-				<Text style={{ whiteSpace: 'nowrap' }} c="dimmed" ml="sm">
-					— {linksCount}
-				</Text>
-			)}
 		</Link>
 	);
 }

inertia/components/dashboard/dashboard_navbar.tsx

@@ -17,11 +17,11 @@ 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 { 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';
@@ -32,7 +32,7 @@ interface DashboardNavbarProps {
 }
 export function DashboardNavbar({ isOpen, toggle }: DashboardNavbarProps) {
 	const { t } = useTranslation('common');
-	const { isAuthenticated, user } = useUser();
+	const { isAuthenticated, user } = useAuth();
 
 	const { activeCollection } = useActiveCollection();
 	const { globalHotkeysEnabled, setGlobalHotkeysEnabled } =
@@ -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/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

@@ -3,13 +3,12 @@ import { FormEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import BackToDashboard from '~/components/common/navigation/back_to_dashboard';
 import { FormLayout, FormLayoutProps } from '~/layouts/form_layout';
-import { Collection, Visibility } from '~/types/app';
+import { Visibility } from '~/types/app';
 
 export type FormCollectionData = {
 	name: string;
 	description: string | null;
 	visibility: Visibility;
-	nextId?: Collection['id'];
 };
 
 interface FormCollectionProps extends FormLayoutProps {

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/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_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_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/layouts/_base_layout.tsx

@@ -1,23 +1,85 @@
+import { api } from '#adonis/api';
+import { PRIMARY_COLOR } from '#config/project';
+import { PageProps } from '@adonisjs/inertia/types';
 import { router, usePage } from '@inertiajs/react';
-import { ColorSchemeScript, createTheme, MantineProvider } from '@mantine/core';
+import {
+	ColorSchemeScript,
+	createTheme,
+	MantineProvider,
+	rem,
+} from '@mantine/core';
+import '@mantine/core/styles.css';
+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 { InertiaPage } from '~/types/inertia';
-
-import '@mantine/core/styles.css';
-import '@mantine/spotlight/styles.css';
 import '../styles/index.css';
 
-const theme = createTheme({});
 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 { language } = usePage<InertiaPage>().props;
-	i18n.changeLanguage(language);
 	dayjs.locale(i18n.language);
+	const { props } = usePage<PageProps & { appBaseUrl: string }>();
+
+	const tuyauClient = createTuyau({
+		api,
+		baseUrl: props.appBaseUrl,
+	});
 
 	const findAppElement = () => document.getElementById('app');
 
@@ -34,7 +96,6 @@ export default function BaseLayout({ children }: { children: ReactNode }) {
 
 	useEffect(() => {
 		const currentLocation = new URL(window.location.href);
-		flipClass(TRANSITION_IN_CLASS, TRANSITION_OUT_CLASS);
 
 		const removeStartEventListener = router.on(
 			'start',
@@ -56,9 +117,9 @@ export default function BaseLayout({ children }: { children: ReactNode }) {
 	}, []);
 
 	return (
-		<>
+		<TuyauProvider client={tuyauClient}>
 			<ColorSchemeScript />
-			<MantineProvider theme={theme}>{children}</MantineProvider>
-		</>
+			<MantineProvider theme={customTheme}>{children}</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(60),
+				}}
+			>
+				{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={{
@@ -87,7 +86,6 @@ function FormLayout({
 							{textSubmitButton}
 						</Button>
 					</Group>
-					<MantineFooter />
 				</form>
 			</main>
 		</Container>

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/collections/edit.tsx

@@ -18,7 +18,6 @@ export default function EditCollectionPage({
 			name: collection.name,
 			description: collection.description,
 			visibility: collection.visibility,
-			nextId: collection.nextId,
 		});
 	const canSubmit = useMemo<boolean>(() => {
 		const trimmedName = data.name.trim();

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,8 +1,7 @@
 import { Flex, Text } from '@mantine/core';
-import { ReactNode, useEffect } from 'react';
+import { 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';
 
@@ -10,7 +9,7 @@ interface SharedPageProps {
 	collection: CollectionWithLinks & { author: PublicUser };
 }
 
-function SharedPage({ collection }: SharedPageProps) {
+export default function SharedPage({ collection }: SharedPageProps) {
 	const { t } = useTranslation('common');
 	const { setActiveCollection } = useCollectionsSetter();
 
@@ -43,6 +42,3 @@ function SharedPage({ collection }: SharedPageProps) {
 		</>
 	);
 }
-
-SharedPage.layout = (page: ReactNode) => <ContentLayout>{page}</ContentLayout>;
-export default SharedPage;

inertia/pages/terms.tsx

@@ -1,10 +1,8 @@
 import { Link } from '@inertiajs/react';
 import { route } from '@izzyjs/route/client';
-import { ReactNode } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { ContentLayout } from '~/layouts/content_layout';
 
-function TermsPage() {
+export default function TermsPage() {
 	const { t } = useTranslation('terms');
 	return (
 		<>
@@ -52,6 +50,3 @@ function TermsPage() {
 		</>
 	);
 }
-
-TermsPage.layout = (page: ReactNode) => <ContentLayout children={page} />;
-export default TermsPage;

inertia/stores/collection_store.ts

@@ -74,6 +74,7 @@ export const useFavorites = () =>
 	);
 
 export function useCollectionsSetter() {
+	// eslint-disable-next-line @typescript-eslint/naming-convention
 	const { _setCollections, setActiveCollection } = useCollectionStore();
 	return { _setCollections, setActiveCollection };
 }

inertia/styles/index.css

@@ -3,11 +3,26 @@
 	--ml-bg-dark: rgb(34, 40, 49);
 }
 
-html,
-body {
-	min-height: 100svh;
-	width: 100%;
-	background-color: light-dark(var(--ml-bg-light), var(--ml-bg-dark));
+/* Fix nprogress position */
+#nprogress {
+	position: relative;
+	z-index: 9999999;
+}
+
+#app {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+}
+
+/* For light mode */
+:root[data-mantine-color-scheme='light'] {
+	--mantine-color-body: var(--ml-bg-light) !important;
+}
+
+/* For dark mode */
+:root[data-mantine-color-scheme='dark'] {
+	--mantine-color-body: var(--ml-bg-dark) !important;
 }
 
 .__transition_fadeIn {

inertia/types/app.ts

@@ -49,7 +49,6 @@ export type Collection = CommonBase & {
 	name: string;
 	description: string | null;
 	visibility: Visibility;
-	nextId: number;
 	authorId: number;
 };
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "my-links",
-	"version": "3.1.0",
+	"version": "3.1.3",
 	"type": "module",
 	"license": "GPL-3.0-only",
 	"scripts": {
@@ -11,14 +11,18 @@
 		"lint": "eslint . --report-unused-disable-directives --max-warnings 0",
 		"format": "prettier --write --parser typescript '**/*.{ts,tsx}'",
 		"typecheck": "tsc --noEmit",
+		"check": "pnpm run lint && pnpm run typecheck",
 		"prepare": "husky",
 		"release": "release-it",
-		"generate-icons": "pwa-assets-generator"
+		"generate-icons": "pwa-assets-generator",
+		"tuyau": "node ace tuyau:generate"
 	},
 	"imports": {
 		"#admin/*": "./app/admin/*.js",
+		"#adonis/api": "./.adonisjs/api.ts",
 		"#auth/*": "./app/auth/*.js",
 		"#collections/*": "./app/collections/*.js",
+		"#config/*": "./config/*.js",
 		"#core/*": "./app/core/*.js",
 		"#favicons/*": "./app/favicons/*.js",
 		"#home/*": "./app/home/*.js",
@@ -30,73 +34,78 @@
 		"#providers/*": "./providers/*.js",
 		"#database/*": "./database/*.js",
 		"#tests/*": "./tests/*.js",
-		"#start/*": "./start/*.js",
-		"#config/*": "./config/*.js"
+		"#shared/*": "./shared/*.js",
+		"#start/*": "./start/*.js"
 	},
 	"devDependencies": {
 		"@adonisjs/assembler": "^7.8.2",
-		"@adonisjs/eslint-config": "2.0.0-beta.6",
-		"@adonisjs/prettier-config": "^1.4.0",
-		"@adonisjs/tsconfig": "^1.4.0",
-		"@faker-js/faker": "^9.3.0",
-		"@japa/assert": "^4.0.0",
-		"@japa/plugin-adonisjs": "^3.0.1",
-		"@japa/runner": "^3.1.4",
-		"@swc/core": "^1.10.4",
-		"@types/luxon": "^3.4.2",
-		"@types/node": "^22.10.4",
-		"@types/react": "^19.0.2",
-		"@types/react-dom": "^19.0.2",
-		"@typescript-eslint/eslint-plugin": "^8.19.0",
-		"@vite-pwa/assets-generator": "^0.2.6",
-		"@vitejs/plugin-react": "^4.3.4",
-		"eslint": "^9.17.0",
+		"@adonisjs/eslint-config": "2.1.1",
+		"@adonisjs/prettier-config": "^1.4.5",
+		"@adonisjs/tsconfig": "^1.4.1",
+		"@faker-js/faker": "^9.9.0",
+		"@japa/assert": "^4.1.1",
+		"@japa/plugin-adonisjs": "^4.0.0",
+		"@japa/runner": "^4.3.0",
+		"@swc/core": "^1.13.3",
+		"@tuyau/utils": "^0.0.9",
+		"@types/luxon": "^3.7.1",
+		"@types/node": "^24.2.0",
+		"@types/react": "^19.1.9",
+		"@types/react-dom": "^19.1.7",
+		"@typescript-eslint/eslint-plugin": "^8.39.0",
+		"@vite-pwa/assets-generator": "^1.0.0",
+		"eslint": "^9.32.0",
 		"hot-hook": "^0.4.0",
 		"husky": "^9.1.7",
-		"lint-staged": "^15.3.0",
-		"pino-pretty": "^13.0.0",
-		"postcss": "^8.4.49",
-		"postcss-preset-mantine": "^1.17.0",
+		"lint-staged": "^16.1.4",
+		"pino-pretty": "^13.1.1",
+		"postcss": "^8.5.6",
+		"postcss-preset-mantine": "^1.18.0",
 		"postcss-simple-vars": "^7.0.1",
-		"prettier": "^3.4.2",
-		"release-it": "^17.11.0",
-		"ts-node-maintained": "^10.9.4",
-		"typescript": "~5.7.2",
-		"vite": "^6.0.6"
+		"prettier": "^3.6.2",
+		"release-it": "^19.0.4",
+		"ts-node-maintained": "^10.9.6",
+		"typescript": "~5.9.2",
+		"vite": "^7.0.6"
 	},
 	"dependencies": {
-		"@adonisjs/ally": "^5.0.2",
-		"@adonisjs/auth": "^9.3.0",
-		"@adonisjs/core": "^6.17.0",
+		"@adonisjs/ally": "^5.1.0",
+		"@adonisjs/auth": "^9.4.2",
+		"@adonisjs/core": "^6.19.0",
 		"@adonisjs/cors": "^2.2.1",
-		"@adonisjs/inertia": "^2.1.2",
-		"@adonisjs/lucid": "^21.6.0",
-		"@adonisjs/session": "^7.5.0",
-		"@adonisjs/shield": "^8.1.1",
+		"@adonisjs/inertia": "^3.1.1",
+		"@adonisjs/lucid": "^21.8.0",
+		"@adonisjs/session": "^7.5.1",
+		"@adonisjs/shield": "^8.2.0",
 		"@adonisjs/static": "^1.1.1",
 		"@adonisjs/vite": "^4.0.0",
-		"@inertiajs/react": "^2.0.0",
+		"@inertiajs/react": "^2.0.17",
 		"@izzyjs/route": "^1.2.0",
-		"@mantine/core": "^7.15.2",
-		"@mantine/hooks": "^7.15.2",
-		"@mantine/spotlight": "^7.15.2",
-		"@vinejs/vine": "^3.0.0",
-		"bentocache": "^1.0.0-beta.9",
+		"@mantine/core": "^8.2.3",
+		"@mantine/hooks": "^8.2.3",
+		"@mantine/spotlight": "^8.2.3",
+		"@tuyau/client": "^0.2.10",
+		"@tuyau/core": "^0.4.2",
+		"@tuyau/inertia": "^0.0.15",
+		"@vinejs/vine": "^3.0.1",
+		"@vitejs/plugin-react-oxc": "^0.3.0",
+		"bentocache": "^1.5.0",
+		"clsx": "^2.1.1",
 		"dayjs": "^1.11.13",
-		"edge.js": "^6.2.0",
-		"i18next": "^24.2.0",
+		"edge.js": "^6.3.0",
+		"i18next": "^25.3.2",
 		"knex": "^3.1.0",
-		"luxon": "^3.5.0",
+		"luxon": "^3.7.1",
 		"node-html-parser": "^7.0.1",
-		"pg": "^8.13.1",
-		"react": "^19.0.0",
-		"react-dom": "^19.0.0",
-		"react-hotkeys-hook": "^4.6.1",
-		"react-i18next": "^15.4.0",
-		"react-icons": "^5.4.0",
+		"pg": "^8.16.3",
+		"react": "^19.1.1",
+		"react-dom": "^19.1.1",
+		"react-hotkeys-hook": "^5.1.0",
+		"react-i18next": "^15.6.1",
+		"react-icons": "^5.5.0",
 		"reflect-metadata": "^0.2.2",
-		"vite-plugin-pwa": "^0.21.1",
-		"zustand": "^5.0.2"
+		"vite-plugin-pwa": "^1.0.2",
+		"zustand": "^5.0.7"
 	},
 	"hotHook": {
 		"boundaries": [
@@ -118,6 +127,11 @@
 		"*.js,*.ts,*.jsx,*.tsx": "eslint --cache --fix"
 	},
 	"volta": {
-		"node": "22.11.0"
+		"node": "24.1.0"
+	},
+	"pnpm": {
+		"overrides": {
+			"vite": "npm:rolldown-vite@latest"
+		}
 	}
 }

pnpm-workspace.yaml

@@ -0,0 +1,4 @@
+onlyBuiltDependencies:
+  - '@swc/core'
+  - esbuild
+  - sharp

pwa-assets.config.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @unicorn/filename-case */
 import {
 	defineConfig,
 	minimal2023Preset as preset,

resources/views/inertia_layout.edge

@@ -17,10 +17,6 @@
     href='/favicon.png'
     type='image/png'
   />
-  <link
-    rel='manifest'
-    href='/assets/manifest.webmanifest'
-  />
   <link
     rel='apple-touch-icon'
     href='/favicon.png'
@@ -30,6 +26,11 @@
     href='/favicon.png'
   />
   <title inertia>MyLinks</title>
+	@if(nodeEnv === 'production')
+  <link
+    rel='manifest'
+    href='/assets/manifest.webmanifest'
+  />
 	<script defer>
     if('serviceWorker' in navigator) {
       window.addEventListener('load', () => {
@@ -37,6 +38,7 @@
       })
     }
   </script>
+	@endif
 
   @routes()
   @inertiaHead()

shared/types/index.ts

@@ -0,0 +1,3 @@
+import { api } from '#adonis/api';
+
+export type ApiRouteName = (typeof api.routes)[number]['name'];

start/view.ts

@@ -0,0 +1,7 @@
+import env from '#start/env';
+import edge from 'edge.js';
+
+/**
+ * Define a global property
+ */
+edge.global('nodeEnv', env.get('NODE_ENV'));

vite.config.ts

@@ -1,8 +1,12 @@
-import project from '#config/project';
+import {
+	PRIMARY_COLOR,
+	PROJECT_DESCRIPTION,
+	PROJECT_NAME,
+} from '#config/project';
 import { getDirname } from '@adonisjs/core/helpers';
 import inertia from '@adonisjs/inertia/client';
 import adonisjs from '@adonisjs/vite/client';
-import react from '@vitejs/plugin-react';
+import react from '@vitejs/plugin-react-oxc';
 import { defineConfig } from 'vite';
 import { VitePWA } from 'vite-plugin-pwa';
 
@@ -16,11 +20,11 @@ export default defineConfig({
 				enabled: true,
 			},
 			manifest: {
-				name: project.name,
-				short_name: project.name,
-				description: project.description,
-				theme_color: project.color,
-				background_color: project.color,
+				name: PROJECT_NAME,
+				short_name: PROJECT_NAME,
+				description: PROJECT_DESCRIPTION,
+				theme_color: PRIMARY_COLOR,
+				background_color: PRIMARY_COLOR,
 				scope: '/',
 				display: 'standalone',
 				orientation: 'portrait',
@@ -101,7 +105,7 @@ export default defineConfig({
 		inertia({ ssr: { enabled: true, entrypoint: 'inertia/app/ssr.tsx' } }),
 		react(),
 		adonisjs({
-			entrypoints: ['inertia/app/app.tsx'],
+			entrypoints: [`${getDirname(import.meta.url)}/inertia/app/app.tsx`],
 			reload: ['resources/views/**/*.edge'],
 		}),
 	],