chore: release v3.3.1

.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';

.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

@@ -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

.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.11-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,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"

README.md

@@ -11,6 +11,7 @@
 </div>
 
 ## Table of Contents
+
 - [Main Features](#main-features)
 - [Getting Started](#getting-started)
   - [Setup](#setup)
@@ -24,7 +25,7 @@
 - [Contributing](#contributing)
 - [License](#license)
 
-## Main Features 
+## Main Features
 
 - **Organize bookmarks with collections**: Keep your links tidy and easily accessible by grouping them into customizable collections.
 - **Intuitive link management**: Add, edit, and manage your bookmarks effortlessly with a user-friendly interface.
@@ -91,6 +92,27 @@ pnpm run start
 openssl rand -base64 32
 ```
 
+### Google OAuth
+
+Pour obtenir le Client ID et Secret Google nécessaires à l'authentification :
+
+1. Accédez à la [Console Google Cloud](https://console.cloud.google.com/)
+2. Créez un nouveau projet ou sélectionnez un projet existant
+3. Activez l'API **Google+ API** (ou utilisez directement l'API OAuth 2.0)
+4. Allez dans **Identifiants** (Credentials) > **Créer des identifiants** > **ID client OAuth 2.0**
+5. Configurez l'écran de consentement OAuth si ce n'est pas déjà fait :
+   - Type d'application : **Interne** ou **Externe**
+   - Remplissez les informations requises (nom de l'application, email de support, etc.)
+6. Créez l'ID client OAuth 2.0 :
+   - Type d'application : **Application Web**
+   - Nom : choisissez un nom pour votre application
+   - URI de redirection autorisés : ajoutez `http://localhost:3333/auth/callback` pour le développement (ou votre URL de production + `/auth/callback`)
+7. Une fois créé, vous obtiendrez :
+   - **Client ID** : à définir dans `GOOGLE_CLIENT_ID`
+   - **Client Secret** : à définir dans `GOOGLE_CLIENT_SECRET`
+
+> **Note** : Pour la production, assurez-vous d'ajouter votre URL de production dans les URI de redirection autorisés (ex: `https://votre-domaine.com/auth/callback`)
+
 ### GitHub Actions
 
 Env var to define :
@@ -124,6 +146,7 @@ ssh-copy-id -i ./id_rsa.pub user@host
 > Source: https://github.com/appleboy/ssh-action#setting-up-a-ssh-key
 
 ## Contributing
+
 We welcome contributions! Please visit our Trello board for project management and roadmap details. You can contribute by:
 
 - Creating issues for bugs, features, or discussions.
@@ -133,4 +156,4 @@ For detailed contribution guidelines, refer to the CONTRIBUTING.md file.
 
 ## License
 
-This project is licensed under the [GPLv3 License](./LICENCE). 
+This project is licensed under the [GPLv3 License](./LICENCE).

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,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/api/collections/controllers/create_collection_controller.ts

@@ -0,0 +1,20 @@
+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 execute({ request, response }: HttpContext) {
+		console.log('avant');
+		const payload = await request.validateUsing(createCollectionValidator);
+		const collection = await this.collectionService.createCollection(payload);
+		console.log('après', collection);
+		return response.json({
+			message: 'Collection created successfully',
+			collection: collection.serialize(),
+		});
+	}
+}

app/api/collections/controllers/delete_collection_controller.ts

@@ -0,0 +1,17 @@
+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 execute({ request, response }: HttpContext) {
+		const { params } = await request.validateUsing(deleteCollectionValidator);
+		await this.collectionService.deleteCollection(params.id);
+		return response.json({
+			message: 'Collection deleted successfully',
+		});
+	}
+}

app/api/collections/controllers/get_collections_controller.ts

@@ -0,0 +1,16 @@
+import { CollectionService } from '#collections/services/collection_service';
+import { inject } from '@adonisjs/core';
+import { HttpContext } from '@adonisjs/core/http';
+
+@inject()
+export default class GetCollectionsController {
+	constructor(private collectionService: CollectionService) {}
+
+	async show({ response }: HttpContext) {
+		const collections =
+			await this.collectionService.getCollectionsForAuthenticatedUser();
+		return response.json({
+			collections: collections.map((collection) => collection.serialize()),
+		});
+	}
+}

app/api/collections/controllers/update_collection_controller.ts

@@ -0,0 +1,21 @@
+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 execute({ request, response }: HttpContext) {
+		const {
+			params: { id: collectionId },
+			...payload
+		} = await request.validateUsing(updateCollectionValidator);
+
+		await this.collectionService.updateCollection(collectionId, payload);
+		return response.json({
+			message: 'Collection updated successfully',
+		});
+	}
+}

app/api/collections/routes/api_create_collections_routes.ts

@@ -0,0 +1,14 @@
+import { middleware } from '#start/kernel';
+import router from '@adonisjs/core/services/router';
+
+const CreateCollectionsController = () =>
+	import('#api/collections/controllers/create_collection_controller');
+
+router
+	.group(() => {
+		router
+			.post('', [CreateCollectionsController, 'execute'])
+			.as('api-collections.create');
+	})
+	.prefix('/api/v1/collections')
+	.middleware([middleware.auth({ guards: ['api'] })]);

app/api/collections/routes/api_delete_collections_routes.ts

@@ -0,0 +1,14 @@
+import { middleware } from '#start/kernel';
+import router from '@adonisjs/core/services/router';
+
+const DeleteCollectionsController = () =>
+	import('#api/collections/controllers/delete_collection_controller');
+
+router
+	.group(() => {
+		router
+			.delete('/:id', [DeleteCollectionsController, 'execute'])
+			.as('api-collections.delete');
+	})
+	.prefix('/api/v1/collections')
+	.middleware([middleware.auth({ guards: ['api'] })]);

app/api/collections/routes/api_get_collections_routes.ts

@@ -0,0 +1,14 @@
+import { middleware } from '#start/kernel';
+import router from '@adonisjs/core/services/router';
+
+const GetCollectionsController = () =>
+	import('#api/collections/controllers/get_collections_controller');
+
+router
+	.group(() => {
+		router
+			.get('', [GetCollectionsController, 'show'])
+			.as('api-collections.index');
+	})
+	.prefix('/api/v1/collections')
+	.middleware([middleware.auth({ guards: ['api'] })]);

app/api/collections/routes/api_update_collections_routes.ts

@@ -0,0 +1,14 @@
+import { middleware } from '#start/kernel';
+import router from '@adonisjs/core/services/router';
+
+const UpdateCollectionsController = () =>
+	import('#api/collections/controllers/update_collection_controller');
+
+router
+	.group(() => {
+		router
+			.put('/:id', [UpdateCollectionsController, 'execute'])
+			.as('api-collections.update');
+	})
+	.prefix('/api/v1/collections')
+	.middleware([middleware.auth({ guards: ['api'] })]);

app/api/collections/routes/routes.ts

@@ -0,0 +1,4 @@
+import '#api/collections/routes/api_create_collections_routes';
+import '#api/collections/routes/api_delete_collections_routes';
+import '#api/collections/routes/api_get_collections_routes';
+import '#api/collections/routes/api_update_collections_routes';

app/api/links/controllers/create_link_controller.ts

@@ -0,0 +1,23 @@
+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) {}
+
+	async execute({ request, response }: HttpContext) {
+		const { collectionId, ...payload } =
+			await request.validateUsing(createLinkValidator);
+
+		const link = await this.linkService.createLink({
+			...payload,
+			collectionId,
+		});
+		return response.json({
+			message: 'Link created successfully',
+			link: link.serialize(),
+		});
+	}
+}

app/api/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/api/links/controllers/get_favorite_links_controller.ts

@@ -0,0 +1,13 @@
+import { LinkService } from '#links/services/link_service';
+import { inject } from '@adonisjs/core';
+import { HttpContext } from '@adonisjs/core/http';
+
+@inject()
+export default class GetFavoriteLinksController {
+	constructor(private linkService: LinkService) {}
+
+	public async execute({ response }: HttpContext) {
+		const links = await this.linkService.getFavoriteLinksForAuthenticatedUser();
+		return response.json(links);
+	}
+}

app/api/links/controllers/update_link_controller.ts

@@ -0,0 +1,19 @@
+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) {}
+
+	async execute({ request, response }: HttpContext) {
+		const { params, ...payload } =
+			await request.validateUsing(updateLinkValidator);
+
+		await this.linkService.updateLink(params.id, payload);
+		return response.json({
+			message: 'Link updated successfully',
+		});
+	}
+}

app/api/links/routes/api_create_link_routes.ts

@@ -0,0 +1,12 @@
+import { middleware } from '#start/kernel';
+import router from '@adonisjs/core/services/router';
+
+const CreateLinkController = () =>
+	import('#api/links/controllers/create_link_controller');
+
+router
+	.group(() => {
+		router.post('', [CreateLinkController, 'execute']).as('api-links.create');
+	})
+	.prefix('/api/v1/links')
+	.middleware([middleware.auth({ guards: ['api'] })]);

app/api/links/routes/api_delete_link_route.ts

@@ -0,0 +1,14 @@
+import { middleware } from '#start/kernel';
+import router from '@adonisjs/core/services/router';
+
+const DeleteLinkController = () =>
+	import('#api/links/controllers/delete_link_controller');
+
+router
+	.group(() => {
+		router
+			.delete('/:id', [DeleteLinkController, 'execute'])
+			.as('api-links.delete');
+	})
+	.prefix('/api/v1/links')
+	.middleware([middleware.auth({ guards: ['api'] })]);

app/api/links/routes/api_get_favorite_links_routes.ts

@@ -0,0 +1,14 @@
+import { middleware } from '#start/kernel';
+import router from '@adonisjs/core/services/router';
+
+const GetFavoriteLinksController = () =>
+	import('#api/links/controllers/get_favorite_links_controller');
+
+router
+	.group(() => {
+		router
+			.get('', [GetFavoriteLinksController, 'execute'])
+			.as('api-links.get-favorite-links');
+	})
+	.prefix('/api/v1/links/favorites')
+	.middleware([middleware.auth({ guards: ['api'] })]);

app/api/links/routes/api_update_link_route.ts

@@ -0,0 +1,14 @@
+import { middleware } from '#start/kernel';
+import router from '@adonisjs/core/services/router';
+
+const UpdateLinkController = () =>
+	import('#api/links/controllers/update_link_controller');
+
+router
+	.group(() => {
+		router
+			.put('/:id', [UpdateLinkController, 'execute'])
+			.as('api-links.update');
+	})
+	.prefix('/api/v1/links')
+	.middleware([middleware.auth({ guards: ['api'] })]);

app/api/links/routes/routes.ts

@@ -0,0 +1,4 @@
+import '#api/links/routes/api_create_link_routes';
+import '#api/links/routes/api_delete_link_route';
+import '#api/links/routes/api_get_favorite_links_routes';
+import '#api/links/routes/api_update_link_route';

app/api/tokens/controllers/api_token_controller.ts

@@ -0,0 +1,18 @@
+import UnAuthorizedException from '#api/tokens/exceptions/un_authorized_exception';
+import { getTokenFromHeader } from '#api/tokens/lib/index';
+import { inject } from '@adonisjs/core';
+import { HttpContext } from '@adonisjs/core/http';
+
+@inject()
+export default class ApiTokenController {
+	async index(ctx: HttpContext) {
+		const token = getTokenFromHeader(ctx);
+		if (!token) {
+			throw new UnAuthorizedException();
+		}
+
+		return ctx.response.json({
+			message: 'Token is valid',
+		});
+	}
+}

app/api/tokens/exceptions/un_authorized_exception.ts

@@ -0,0 +1,7 @@
+import { Exception } from '@adonisjs/core/exceptions';
+
+export default class UnAuthorizedException extends Exception {
+	static status = 401;
+	message = 'Missing or invalid authorization header';
+	code = 'UNAUTHORIZED';
+}

app/api/tokens/lib/index.ts

@@ -0,0 +1,11 @@
+import { HttpContext } from '@adonisjs/core/http';
+
+export function getTokenFromHeader(ctx: HttpContext) {
+	const authHeader = ctx.request.header('Authorization');
+
+	if (!authHeader || !authHeader.startsWith('Bearer ')) {
+		return null;
+	}
+
+	return authHeader.substring(7);
+}

app/api/tokens/routes/api_token_routes.ts

@@ -0,0 +1,12 @@
+import { middleware } from '#start/kernel';
+import router from '@adonisjs/core/services/router';
+
+const ApiTokenController = () =>
+	import('#api/tokens/controllers/api_token_controller');
+
+router
+	.group(() => {
+		router.get('/check', [ApiTokenController, 'index']).as('api-tokens.index');
+	})
+	.prefix('/api/v1/tokens')
+	.middleware([middleware.auth({ guards: ['api'] })]);

app/api/tokens/routes/routes.ts

@@ -0,0 +1 @@
+import '#api/tokens/routes/api_token_routes';

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/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,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/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/core/constants/paths.ts

@@ -1,6 +1,6 @@
 const PATHS = {
 	AUTHOR: 'https://www.sonny.dev/?utm_source=mylinks',
-	REPO_GITHUB: 'https://github.com/Sonny93/my-links',
+	REPO_GITHUB: 'https://github.com/my-links/my-links',
 	EXTENSION:
 		'https://chromewebstore.google.com/detail/mylinks/agkmlplihacolkakgeccnbhphnepphma',
 } as const;

app/core/exceptions/handler.ts

@@ -36,6 +36,13 @@ export default class HttpExceptionHandler extends ExceptionHandler {
 	 * response to the client
 	 */
 	async handle(error: unknown, ctx: HttpContext) {
+		if (ctx.request.url()?.startsWith('/api/v1')) {
+			return ctx.response.status(400).json({
+				message: 'Bad Request',
+				errors: [error],
+			});
+		}
+
 		if (error instanceof errors.E_ROW_NOT_FOUND) {
 			return ctx.response.redirectToNamedRoute('dashboard');
 		}

app/core/middlewares/service_worker_scope_extender.ts

@@ -0,0 +1,18 @@
+import { HttpContext } from '@adonisjs/core/http';
+
+const HEADER_NAME = 'Service-Worker-Allowed';
+
+export default class ServiceWorkerScopeExtender {
+	async handle(
+		{ request, response, logger }: HttpContext,
+		next: () => Promise<void>
+	) {
+		if (request.url().startsWith('/assets/sw.js')) {
+			response.header(HEADER_NAME, '/');
+			logger.debug(
+				`Header ${HEADER_NAME} for ${request.url()} set to ${response.getHeader(HEADER_NAME)}`
+			);
+		}
+		await next();
+	}
+}

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/links/validators/base_link_validator.ts

@@ -0,0 +1,9 @@
+import vine from '@vinejs/vine';
+
+export const baseLinkValidator = vine.object({
+	name: vine.string().trim().minLength(1).maxLength(254),
+	description: vine.string().trim().maxLength(300).optional(),
+	url: vine.string().url({ require_tld: false }).trim(),
+	favorite: vine.boolean(),
+	collectionId: vine.number(),
+});

app/links/validators/create_link_validator.ts

@@ -1,11 +1,8 @@
+import { baseLinkValidator } from '#links/validators/base_link_validator';
 import vine from '@vinejs/vine';
 
 export const createLinkValidator = vine.compile(
 	vine.object({
-		name: vine.string().trim().minLength(1).maxLength(254),
-		description: vine.string().trim().maxLength(300).optional(),
-		url: vine.string().trim(),
-		favorite: vine.boolean(),
-		collectionId: vine.number(),
+		...baseLinkValidator.getProperties(),
 	})
 );

app/links/validators/update_link_validator.ts

@@ -1,13 +1,10 @@
 import { params } from '#core/validators/params_object';
+import { baseLinkValidator } from '#links/validators/base_link_validator';
 import vine from '@vinejs/vine';
 
 export const updateLinkValidator = vine.compile(
 	vine.object({
-		name: vine.string().trim().minLength(1).maxLength(254),
-		description: vine.string().trim().maxLength(300).optional(),
-		url: vine.string().trim(),
-		favorite: vine.boolean(),
-		collectionId: vine.number(),
+		...baseLinkValidator.getProperties(),
 
 		params,
 	})

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/constants/theme.ts

@@ -1,2 +1,3 @@
-export const PREFER_DARK_THEME = 'prefer_dark_theme';
-export const DARK_THEME_DEFAULT_VALUE = true;
+export const KEY_USER_THEME = 'user_theme';
+export const THEMES = ['dark', 'light'] as const;
+export const DEFAULT_USER_THEME = THEMES.at(0);

app/user/controllers/api_token_controller.ts

@@ -0,0 +1,45 @@
+import { ApiTokenService } from '#user/services/api_token_service';
+import { createApiTokenValidator } from '#user/validators/token/create_api_token';
+import { deleteApiTokenValidator } from '#user/validators/token/delete_api_token';
+import { inject } from '@adonisjs/core';
+import { HttpContext } from '@adonisjs/core/http';
+
+@inject()
+export default class ApiTokenController {
+	constructor(private apiTokenService: ApiTokenService) {}
+
+	async store({ request, response, auth, session }: HttpContext) {
+		const { name, expiresAt } = await request.validateUsing(
+			createApiTokenValidator
+		);
+		const token = await this.apiTokenService.createToken(auth.user!, {
+			name,
+			expiresAt,
+		});
+		session.flash('token', {
+			...token.toJSON(),
+			token: token.value?.release(),
+			identifier: token.identifier,
+		});
+		return response.redirect().withQs().back();
+	}
+
+	async destroy({ request, response, auth }: HttpContext) {
+		const { params } = await request.validateUsing(deleteApiTokenValidator);
+		const tokenId = params.tokenId;
+
+		const token = await this.apiTokenService.getTokenByValue(
+			auth.user!,
+			tokenId
+		);
+		if (!token) {
+			return response.notFound();
+		}
+
+		await this.apiTokenService.revokeToken(
+			auth.user!,
+			Number(token.identifier)
+		);
+		return response.redirect().withQs().back();
+	}
+}

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/controllers/theme_controller.ts

@@ -1,12 +1,11 @@
-import { PREFER_DARK_THEME } from '#user/constants/theme';
+import { KEY_USER_THEME } from '#user/constants/theme';
 import { updateThemeValidator } from '#user/validators/update_theme_validator';
 import type { HttpContext } from '@adonisjs/core/http';
 
 export default class ThemeController {
 	async index({ request, session, response }: HttpContext) {
-		const { preferDarkTheme } =
-			await request.validateUsing(updateThemeValidator);
-		session.put(PREFER_DARK_THEME, preferDarkTheme);
+		const { theme } = await request.validateUsing(updateThemeValidator);
+		session.put(KEY_USER_THEME, theme);
 		return response.ok({ message: 'ok' });
 	}
 }

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,7 +1,10 @@
 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 { DbAccessTokensProvider } from '@adonisjs/auth/access_tokens';
 import { column, computed, hasMany } from '@adonisjs/lucid/orm';
 import type { HasMany } from '@adonisjs/lucid/types/relations';
 import { DateTime } from 'luxon';
@@ -51,4 +54,17 @@ 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;
+
+	static accessTokens = DbAccessTokensProvider.forModel(User);
 }

app/user/routes/api_token_routes.ts

@@ -0,0 +1,15 @@
+import { middleware } from '#start/kernel';
+import router from '@adonisjs/core/services/router';
+
+const ApiTokenController = () =>
+	import('#user/controllers/api_token_controller');
+
+router
+	.group(() => {
+		router.post('/', [ApiTokenController, 'store']).as('user.api-tokens.store');
+		router
+			.delete('/:tokenId', [ApiTokenController, 'destroy'])
+			.as('user.api-tokens.destroy');
+	})
+	.prefix('/user/api-tokens')
+	.middleware([middleware.auth()]);

app/user/routes/routes.ts

@@ -1 +1,3 @@
+import './api_token_routes.js';
+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/services/api_token_service.ts

@@ -0,0 +1,28 @@
+import User from '#user/models/user';
+
+type CreateTokenParams = {
+	name: string;
+	expiresAt?: Date;
+};
+
+export class ApiTokenService {
+	createToken(user: User, { name, expiresAt }: CreateTokenParams) {
+		const expiresIn = expiresAt ? expiresAt.getTime() - Date.now() : undefined;
+		return User.accessTokens.create(user, undefined, {
+			name,
+			expiresIn,
+		});
+	}
+
+	getTokens(user: User) {
+		return User.accessTokens.all(user);
+	}
+
+	revokeToken(user: User, identifier: number) {
+		return User.accessTokens.delete(user, identifier);
+	}
+
+	getTokenByValue(user: User, value: string) {
+		return User.accessTokens.find(user, value);
+	}
+}

app/user/validators/token/create_api_token.ts

@@ -0,0 +1,8 @@
+import vine from '@vinejs/vine';
+
+export const createApiTokenValidator = vine.compile(
+	vine.object({
+		name: vine.string().trim().minLength(1).maxLength(255),
+		expiresAt: vine.date().optional(),
+	})
+);

app/user/validators/token/delete_api_token.ts

@@ -0,0 +1,9 @@
+import vine from '@vinejs/vine';
+
+export const deleteApiTokenValidator = vine.compile(
+	vine.object({
+		params: vine.object({
+			tokenId: vine.string().trim().minLength(1).maxLength(255),
+		}),
+	})
+);

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

app/user/validators/update_theme_validator.ts

@@ -1,7 +1,8 @@
+import { THEMES } from '#user/constants/theme';
 import vine from '@vinejs/vine';
 
 export const updateThemeValidator = vine.compile(
 	vine.object({
-		preferDarkTheme: vine.boolean(),
+		theme: vine.enum(THEMES),
 	})
 );

app/user_settings/controllers/show_user_settings_controller.ts

@@ -0,0 +1,22 @@
+import { ApiTokenService } from '#user/services/api_token_service';
+import { inject } from '@adonisjs/core';
+import { HttpContext } from '@adonisjs/core/http';
+
+@inject()
+export default class ShowUserSettingsController {
+	constructor(private apiTokenService: ApiTokenService) {}
+
+	public async render({ auth, inertia }: HttpContext) {
+		const user = await auth.authenticate();
+		const tokens = await this.apiTokenService.getTokens(user);
+		return inertia.render('user_settings/show', {
+			user,
+			tokens: tokens.map((token) => {
+				return {
+					...token.toJSON(),
+					identifier: token.identifier,
+				};
+			}),
+		});
+	}
+}

app/user_settings/routes/routes.ts

@@ -0,0 +1 @@
+import './user_settings_routes.js';

app/user_settings/routes/user_settings_routes.ts

@@ -0,0 +1,8 @@
+import router from '@adonisjs/core/services/router';
+
+const ShowUserSettingsController = () =>
+	import('#user_settings/controllers/show_user_settings_controller');
+
+router
+	.get('/user/settings', [ShowUserSettingsController, 'render'])
+	.as('user.settings');

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/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/auth.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from '@adonisjs/auth';
+import { tokensGuard, tokensUserProvider } from '@adonisjs/auth/access_tokens';
 import { sessionGuard, sessionUserProvider } from '@adonisjs/auth/session';
 import { Authenticators, InferAuthEvents } from '@adonisjs/auth/types';
 
@@ -11,6 +12,12 @@ const authConfig = defineConfig({
 				model: () => import('#user/models/user'),
 			}),
 		}),
+		api: tokensGuard({
+			provider: tokensUserProvider({
+				tokens: 'accessTokens',
+				model: () => import('#user/models/user'),
+			}),
+		}),
 	},
 });
 

config/inertia.ts

@@ -1,7 +1,7 @@
-import {
-	PREFER_DARK_THEME,
-	DARK_THEME_DEFAULT_VALUE,
-} from '#user/constants/theme';
+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';
 
 export default defineConfig({
@@ -15,8 +15,10 @@ export default defineConfig({
 	 */
 	sharedData: {
 		errors: (ctx) => ctx.session?.flashMessages.get('errors'),
-		preferDarkTheme: (ctx) =>
-			ctx.session?.get(PREFER_DARK_THEME, DARK_THEME_DEFAULT_VALUE),
+		token: (ctx) => ctx.session?.flashMessages.get('token'),
+		user: (ctx) => ({
+			theme: ctx.session?.get(KEY_USER_THEME, DEFAULT_USER_THEME),
+		}),
 		auth: async (ctx) => {
 			await ctx.auth?.check();
 			return {
@@ -24,6 +26,7 @@ export default defineConfig({
 				isAuthenticated: ctx.auth?.isAuthenticated || false,
 			};
 		},
+		appUrl: env.get('APP_URL'),
 	},
 
 	/**
@@ -32,5 +35,10 @@ export default defineConfig({
 	ssr: {
 		enabled: true,
 		entrypoint: 'inertia/app/ssr.tsx',
+		pages: (_, page) => {
+			const ssrEnabled = isSSREnableForPage(page);
+			logger.debug(`Page "${page}" SSR enabled: ${ssrEnabled}`);
+			return ssrEnabled;
+		},
 	},
 });

config/project.ts

@@ -0,0 +1,13 @@
+export const PRIMARY_COLOR = '#3f88c5';
+
+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/ssr.ts

@@ -0,0 +1,2 @@
+export const CSR_ROUTES = ['dashboard'];
+export const isSSREnableForPage = (page: string) => !CSR_ROUTES.includes(page);

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

database/migrations/1755788189587_create_auth_access_tokens_table.ts

@@ -0,0 +1,31 @@
+import { BaseSchema } from '@adonisjs/lucid/schema';
+
+export default class CreateAuthAccessTokensTable extends BaseSchema {
+	protected tableName = 'auth_access_tokens';
+
+	async up() {
+		this.schema.createTable(this.tableName, (table) => {
+			table.increments('id');
+			table
+				.integer('tokenable_id')
+				.notNullable()
+				.unsigned()
+				.references('id')
+				.inTable('users')
+				.onDelete('CASCADE');
+
+			table.string('type').notNullable();
+			table.string('name').nullable();
+			table.string('hash').notNullable();
+			table.text('abilities').notNullable();
+			table.timestamp('created_at');
+			table.timestamp('updated_at');
+			table.timestamp('last_used_at').nullable();
+			table.timestamp('expires_at').nullable();
+		});
+	}
+
+	async down() {
+		this.schema.dropTable(this.tableName);
+	}
+}

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

@@ -1,8 +1,10 @@
 import { resolvePageComponent } from '@adonisjs/inertia/helpers';
 import { createInertiaApp } from '@inertiajs/react';
+import { isSSREnableForPage } from 'config-ssr';
 import 'dayjs/locale/en';
 import 'dayjs/locale/fr';
-import { hydrateRoot } from 'react-dom/client';
+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';
@@ -12,14 +14,29 @@ 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 }) {
-		hydrateRoot(el, <App {...props} />);
+		const componentName = props.initialPage.component;
+		const isSSREnabled = isSSREnableForPage(componentName);
+		console.debug(`Page "${componentName}" SSR enabled: ${isSSREnabled}`);
+		if (isSSREnabled) {
+			hydrateRoot(el, <App {...props} />);
+		} else {
+			createRoot(el).render(<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/api_tokens/api_tokens.tsx

@@ -0,0 +1,128 @@
+import { usePage } from '@inertiajs/react';
+import {
+	ActionIcon,
+	Button,
+	Card,
+	CopyButton,
+	Group,
+	Text,
+} from '@mantine/core';
+import { modals } from '@mantine/modals';
+import { useTranslation } from 'react-i18next';
+import { TbPlus, TbTrash } from 'react-icons/tb';
+import { SimpleTable } from '~/components/common/simple_table/simple_table';
+import { useApiTokens } from '~/hooks/use_api_tokens';
+import { ApiToken } from '~/types/app';
+import { CreateTokenModal } from './create_token_modal';
+
+const useGetCreatedToken = () => {
+	const newlyCreatedToken = usePage<{
+		token?: ApiToken;
+	}>().props.token;
+	return newlyCreatedToken;
+};
+
+export function ApiTokens() {
+	const { t } = useTranslation();
+	const { tokens, createToken, revokeToken } = useApiTokens();
+
+	const newlyCreatedToken = useGetCreatedToken();
+
+	const handleCreateTokenModal = () => {
+		modals.open({
+			title: t('api-tokens.create-new'),
+			children: (
+				<CreateTokenModal
+					onCreate={(name) => createToken(name)}
+					onClose={() => modals.closeAll()}
+				/>
+			),
+		});
+	};
+
+	const handleRevokeToken = async (tokenId: number) => {
+		const token = tokens.find((t) => t.identifier === tokenId);
+		if (!token) return;
+
+		modals.openConfirmModal({
+			title: (
+				<>
+					{t('api-tokens.revoke')} "<strong>{token.name}</strong>"
+				</>
+			),
+			children: <Text size="sm">{t('api-tokens.confirm-revoke')}</Text>,
+			labels: {
+				confirm: t('api-tokens.revoke'),
+				cancel: t('cancel'),
+			},
+			confirmProps: { color: 'red' },
+			onConfirm: () => revokeToken(tokenId),
+		});
+	};
+
+	const generateTokenRow = (token: ApiToken) =>
+		newlyCreatedToken?.identifier === token.identifier && (
+			<>
+				<Text c="green" size="sm">
+					{t('api-tokens.new-token')}{' '}
+					{newlyCreatedToken.token && (
+						<CopyButton value={newlyCreatedToken.token}>
+							{({ copied, copy }) => (
+								<Button
+									color={copied ? 'teal' : 'blue'}
+									onClick={copy}
+									size="xs"
+									variant="light"
+								>
+									{copied ? t('copied') : t('copy')}
+								</Button>
+							)}
+						</CopyButton>
+					)}
+				</Text>
+			</>
+		);
+
+	const generateRow = (token: ApiToken) => ({
+		key: token.identifier.toString(),
+		name: token.name,
+		token: generateTokenRow(token) || undefined,
+		expiresAt: token.expiresAt,
+		lastUsedAt: token.lastUsedAt,
+		actions: [
+			<ActionIcon
+				color="red"
+				variant="subtle"
+				onClick={() => handleRevokeToken(token.identifier)}
+			>
+				<TbTrash size={16} />
+			</ActionIcon>,
+		],
+	});
+
+	const rows = tokens.map(generateRow);
+
+	return (
+		<Card withBorder>
+			<Group justify="space-between" mb="md">
+				<Text fw={500}>{t('api-tokens.title')}</Text>
+				<Button
+					leftSection={<TbPlus size={16} />}
+					onClick={handleCreateTokenModal}
+					size="sm"
+					variant="light"
+				>
+					{t('api-tokens.create')}
+				</Button>
+			</Group>
+
+			{tokens.length === 0 && (
+				<Text c="dimmed" ta="center" py="xl">
+					{t('api-tokens.no-tokens')}
+				</Text>
+			)}
+
+			{tokens.length > 0 && <SimpleTable data={rows} />}
+		</Card>
+	);
+}

inertia/components/common/api_tokens/create_token_modal.tsx

@@ -0,0 +1,53 @@
+import { Button, Group, Stack, Text, TextInput } from '@mantine/core';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface CreateTokenModalProps {
+	onCreate: (name: string) => Promise<void>;
+	onClose: () => void;
+}
+
+export function CreateTokenModal({ onCreate, onClose }: CreateTokenModalProps) {
+	const { t } = useTranslation();
+	const [tokenName, setTokenName] = useState('');
+	const [isLoading, setIsLoading] = useState(false);
+
+	const handleCreate = async () => {
+		if (!tokenName.trim()) return;
+
+		setIsLoading(true);
+		try {
+			await onCreate(tokenName);
+			onClose();
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	return (
+		<Stack>
+			<Text size="sm" c="dimmed">
+				{t('api-tokens.create-description')}
+			</Text>
+			<TextInput
+				label={t('api-tokens.name')}
+				placeholder={t('api-tokens.name-placeholder')}
+				value={tokenName}
+				onChange={(e) => setTokenName(e.target.value)}
+				required
+			/>
+			<Group justify="flex-end">
+				<Button variant="subtle" onClick={onClose}>
+					{t('cancel')}
+				</Button>
+				<Button
+					onClick={handleCreate}
+					disabled={!tokenName.trim() || isLoading}
+					loading={isLoading}
+				>
+					{t('api-tokens.create')}
+				</Button>
+			</Group>
+		</Stack>
+	);
+}