refactor: remove useless stuff in Dockerfile

This version seems to be broken.
In dev mode, styled component theme props's missing only when SSR

.adonisjs/api.ts

@@ -0,0 +1,467 @@
+import type { MakeTuyauRequest, MakeTuyauResponse } from '@tuyau/utils/types';
+import type { InferInput } from '@vinejs/vine/types';
+
+type UserThemePost = {
+	request: MakeTuyauRequest<
+		InferInput<
+			(typeof import('../app/validators/user.ts'))['updateUserThemeValidator']
+		>
+	>;
+	response: MakeTuyauResponse<
+		import('../app/controllers/apps_controller.ts').default['updateUserTheme']
+	>;
+};
+type FaviconGetHead = {
+	request: unknown;
+	response: MakeTuyauResponse<
+		import('../app/controllers/favicons_controller.ts').default['index']
+	>;
+};
+type SharedIdGetHead = {
+	request: MakeTuyauRequest<
+		InferInput<
+			(typeof import('../app/validators/shared_collection.ts'))['getSharedCollectionValidator']
+		>
+	>;
+	response: MakeTuyauResponse<
+		import('../app/controllers/shared_collections_controller.ts').default['index']
+	>;
+};
+type AdminGetHead = {
+	request: unknown;
+	response: MakeTuyauResponse<
+		import('../app/controllers/admin_controller.ts').default['index']
+	>;
+};
+type AuthLoginGetHead = {
+	request: unknown;
+	response: MakeTuyauResponse<
+		import('../app/controllers/users_controller.ts').default['login']
+	>;
+};
+type AuthCallbackGetHead = {
+	request: unknown;
+	response: MakeTuyauResponse<
+		import('../app/controllers/users_controller.ts').default['callbackAuth']
+	>;
+};
+type AuthLogoutGetHead = {
+	request: unknown;
+	response: MakeTuyauResponse<
+		import('../app/controllers/users_controller.ts').default['logout']
+	>;
+};
+type DashboardGetHead = {
+	request: unknown;
+	response: MakeTuyauResponse<
+		import('../app/controllers/collections_controller.ts').default['index']
+	>;
+};
+type CollectionsCreateGetHead = {
+	request: unknown;
+	response: MakeTuyauResponse<
+		import('../app/controllers/collections_controller.ts').default['showCreatePage']
+	>;
+};
+type CollectionsPost = {
+	request: MakeTuyauRequest<
+		InferInput<
+			(typeof import('../app/validators/collection.ts'))['createCollectionValidator']
+		>
+	>;
+	response: MakeTuyauResponse<
+		import('../app/controllers/collections_controller.ts').default['store']
+	>;
+};
+type CollectionsEditGetHead = {
+	request: unknown;
+	response: MakeTuyauResponse<
+		import('../app/controllers/collections_controller.ts').default['showEditPage']
+	>;
+};
+type CollectionsIdPut = {
+	request: MakeTuyauRequest<
+		InferInput<
+			(typeof import('../app/validators/collection.ts'))['updateCollectionValidator']
+		>
+	>;
+	response: MakeTuyauResponse<
+		import('../app/controllers/collections_controller.ts').default['update']
+	>;
+};
+type CollectionsDeleteGetHead = {
+	request: unknown;
+	response: MakeTuyauResponse<
+		import('../app/controllers/collections_controller.ts').default['showDeletePage']
+	>;
+};
+type CollectionsIdDelete = {
+	request: MakeTuyauRequest<
+		InferInput<
+			(typeof import('../app/validators/collection.ts'))['deleteCollectionValidator']
+		>
+	>;
+	response: MakeTuyauResponse<
+		import('../app/controllers/collections_controller.ts').default['delete']
+	>;
+};
+type LinksCreateGetHead = {
+	request: unknown;
+	response: MakeTuyauResponse<
+		import('../app/controllers/links_controller.ts').default['showCreatePage']
+	>;
+};
+type LinksPost = {
+	request: MakeTuyauRequest<
+		InferInput<
+			(typeof import('../app/validators/link.ts'))['createLinkValidator']
+		>
+	>;
+	response: MakeTuyauResponse<
+		import('../app/controllers/links_controller.ts').default['store']
+	>;
+};
+type LinksEditGetHead = {
+	request: unknown;
+	response: MakeTuyauResponse<
+		import('../app/controllers/links_controller.ts').default['showEditPage']
+	>;
+};
+type LinksIdPut = {
+	request: MakeTuyauRequest<
+		InferInput<
+			(typeof import('../app/validators/link.ts'))['updateLinkValidator']
+		>
+	>;
+	response: MakeTuyauResponse<
+		import('../app/controllers/links_controller.ts').default['update']
+	>;
+};
+type LinksIdFavoritePut = {
+	request: MakeTuyauRequest<
+		InferInput<
+			(typeof import('../app/validators/link.ts'))['updateLinkFavoriteStatusValidator']
+		>
+	>;
+	response: MakeTuyauResponse<
+		import('../app/controllers/links_controller.ts').default['toggleFavorite']
+	>;
+};
+type LinksDeleteGetHead = {
+	request: unknown;
+	response: MakeTuyauResponse<
+		import('../app/controllers/links_controller.ts').default['showDeletePage']
+	>;
+};
+type LinksIdDelete = {
+	request: MakeTuyauRequest<
+		InferInput<
+			(typeof import('../app/validators/link.ts'))['deleteLinkValidator']
+		>
+	>;
+	response: MakeTuyauResponse<
+		import('../app/controllers/links_controller.ts').default['delete']
+	>;
+};
+type SearchGetHead = {
+	request: MakeTuyauRequest<
+		InferInput<
+			(typeof import('../app/validators/search_term.ts'))['searchTermValidator']
+		>
+	>;
+	response: MakeTuyauResponse<
+		import('../app/controllers/searches_controller.ts').default['search']
+	>;
+};
+export interface ApiDefinition {
+	user: {
+		theme: {
+			$url: {};
+			$post: UserThemePost;
+		};
+	};
+	favicon: {
+		$url: {};
+		$get: FaviconGetHead;
+		$head: FaviconGetHead;
+	};
+	shared: {
+		':id': {
+			$url: {};
+			$get: SharedIdGetHead;
+			$head: SharedIdGetHead;
+		};
+	};
+	admin: {
+		$url: {};
+		$get: AdminGetHead;
+		$head: AdminGetHead;
+	};
+	auth: {
+		login: {
+			$url: {};
+			$get: AuthLoginGetHead;
+			$head: AuthLoginGetHead;
+		};
+		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;
+		};
+	};
+	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;
+	};
+}
+const routes = [
+	{
+		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: 'user.theme',
+		path: '/user/theme',
+		method: ['POST'],
+		types: {} as UserThemePost,
+	},
+	{
+		params: [],
+		name: 'favicon',
+		path: '/favicon',
+		method: ['GET', 'HEAD'],
+		types: {} as FaviconGetHead,
+	},
+	{
+		params: ['id'],
+		name: 'shared',
+		path: '/shared/:id',
+		method: ['GET', 'HEAD'],
+		types: {} as SharedIdGetHead,
+	},
+	{
+		params: [],
+		name: 'admin.dashboard',
+		path: '/admin',
+		method: ['GET', 'HEAD'],
+		types: {} as AdminGetHead,
+	},
+	{
+		params: [],
+		name: 'auth.login',
+		path: '/auth/login',
+		method: ['GET', 'HEAD'],
+		types: {} as AuthLoginGetHead,
+	},
+	{
+		params: [],
+		name: 'auth.google',
+		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: '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,
+	},
+] as const;
+export const api = {
+	routes,
+	definition: {} as ApiDefinition,
+};

.dockerignore

@@ -4,7 +4,7 @@ build
 coverage
 .vscode
 .DS_STORE
-# .env
+.env
 tmp
 storage
 

.editorconfig

@@ -3,7 +3,7 @@
 root = true
 
 [*]
-indent_style = space
+indent_style = tab
 indent_size = 2
 end_of_line = lf
 charset = utf-8
@@ -17,8 +17,5 @@ insert_final_newline = unset
 indent_style = unset
 insert_final_newline = unset
 
-[MakeFile]
-indent_style = space
-
 [*.md]
 trim_trailing_whitespace = false

.env.example

@@ -1,8 +1,9 @@
+# node ace generate:key
+APP_KEY=soY8ZAtItT_fCkNUADfgffZUUo675lOj
 TZ=UTC
 PORT=3333
 HOST=localhost
 LOG_LEVEL=info
-APP_KEY=sLoJth45JD1vcS8n92Y2JUd8w3OL4HQb
 NODE_ENV=development
 SESSION_DRIVER=cookie
 DB_HOST=127.0.0.1

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx lint-staged

.vscode/settings.json

@@ -1,3 +1,13 @@
 {
-  "typescript.preferences.importModuleSpecifier": "non-relative"
+	"typescript.preferences.importModuleSpecifier": "non-relative",
+	/* Prefer tabs over spaces for accessibility */
+	"editor.insertSpaces": false,
+	"editor.detectIndentation": false,
+	/* Explorer */
+	"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",
+		"Makefile": "*compose.yml, Dockerfile, servers_pgadmin.json, .dockerignore"
+	}
 }

Dockerfile

@@ -8,34 +8,30 @@ RUN corepack enable
 # All deps stage
 FROM base as deps
 WORKDIR /app
-ADD package.json package-lock.json ./
-RUN npm install --ignore-scripts
+COPY package.json pnpm-lock.yaml /app/
+COPY .adonisjs /app/.adonisjs
+RUN pnpm install --ignore-scripts
 
 # Production only deps stage
 FROM base as production-deps
 WORKDIR /app
-ADD package.json package-lock.json ./
-RUN npm install --omit="dev" --ignore-scripts
+COPY package.json pnpm-lock.yaml /app/
+COPY .adonisjs /app/.adonisjs
+RUN pnpm install --ignore-scripts --prod
 
 # Build stage
 FROM base as build
 WORKDIR /app
 COPY --from=deps /app/node_modules /app/node_modules
-ADD . .
-RUN node ace izzy:routes
+COPY . /app
 RUN node ace build
 
 # Production stage
 FROM base
-
 ENV NODE_ENV=production
-ENV LOG_LEVEL=debug
-ENV CACHE_VIEWS=false
-ENV SESSION_DRIVER=cookie
-ENV PORT=$PORT
-
 WORKDIR /app
 COPY --from=production-deps /app/node_modules /app/node_modules
+COPY --from=production-deps /app/.adonisjs /app/.adonisjs
 COPY --from=build /app/build /app
 
 # Expose port
@@ -43,3 +39,4 @@ EXPOSE $PORT
 
 # Start app
 CMD node bin/console.js migration:run --force && node bin/server.js
+

Makefile

@@ -1,19 +1,21 @@
 dev:
-	docker compose down
-	docker compose -f dev.docker-compose.yml up -d --wait
-	node ace migration:fresh
-	npm run dev
+	@docker compose down
+	@docker compose -f dev.compose.yml pull
+	@docker compose -f dev.compose.yml up -d --wait
+	@node ace migration:fresh
+	@pnpm run dev
 
 prod:
-	docker compose -f dev.docker-compose.yml down
-	docker compose up -d --build --wait
+	@docker compose -f dev.compose.yml down
+	@docker compose pull
+	@docker compose up -d --build --wait
 
 seed:
-	node ace db:seed
+	@node ace db:seed
 
 down:
-	-docker compose down
-	-docker compose -f dev.docker-compose.yml down
+	@-docker compose down
+	@-docker compose -f dev.compose.yml down
 
 release:
-	npm run release
+	@pnpm run release

README.md

@@ -19,13 +19,13 @@ cp example.env .env
 make dev
 ```
 
-### NPM
+### PNPM
 
 ```shell
 # reset database and (force) apply all migrations
 node ace migration:fresh
 # start dev server
-npm run dev
+pnpm run dev
 ```
 
 ## Start as prod
@@ -36,17 +36,17 @@ npm run dev
 make prod
 ```
 
-### NPM
+### PNPM
 
 ```shell
 # create production build
-npm run build
+pnpm run build
 # go to the build folder
 cd build
 # clone your .env
 cp ../.env .
 # then start the production build
-npm run start
+pnpm run start
 ```
 
 ## Generate app_key

ace.js

@@ -19,8 +19,7 @@
 /**
  * Register hook to process TypeScript files using ts-node
  */
-import { register } from 'node:module';
-register('ts-node/esm', import.meta.url);
+import 'ts-node-maintained/register/esm';
 
 /**
  * Import ace console entrypoint

adonisrc.ts

@@ -13,7 +13,7 @@ export default defineConfig({
 	commands: [
 		() => import('@adonisjs/core/commands'),
 		() => import('@adonisjs/lucid/commands'),
-    () => import('@izzyjs/route/commands'),
+		() => import('@tuyau/core/commands'),
 	],
 
 	/*
@@ -43,8 +43,8 @@ export default defineConfig({
 		() => import('@adonisjs/auth/auth_provider'),
 		() => import('@adonisjs/inertia/inertia_provider'),
 		() => import('@adonisjs/ally/ally_provider'),
-    () => import('@izzyjs/route/izzy_provider'),
 		() => import('#providers/route_provider'),
+		() => import('@tuyau/core/tuyau_provider'),
 	],
 
 	/*
@@ -105,6 +105,5 @@ export default defineConfig({
 	assetsBundler: false,
 	unstable_assembler: {
 		onBuildStarting: [() => import('@adonisjs/vite/build_hook')],
-    onDevServerStarted: [() => import('@izzyjs/route/dev_hook')],
 	},
 });

app/controllers/admin_controller.ts

@@ -14,12 +14,12 @@ class UserWithRelationCountDto {
 		fullname: this.user.name,
 		avatarUrl: this.user.avatarUrl,
 		isAdmin: this.user.isAdmin,
-    createdAt: this.user.createdAt,
-    updatedAt: this.user.updatedAt,
-    count: {
-      link: Number(this.user.$extras.totalLinks),
-      collection: Number(this.user.$extras.totalCollections),
-    },
+		createdAt: this.user.createdAt.toString(),
+		updatedAt: this.user.updatedAt.toString(),
+		lastSeenAt:
+			this.user.lastSeenAt?.toString() ?? this.user.updatedAt.toString(),
+		linksCount: Number(this.user.$extras.totalLinks),
+		collectionsCount: Number(this.user.$extras.totalCollections),
 	});
 }
 

app/controllers/collections_controller.ts

@@ -25,9 +25,11 @@ export default class CollectionsController {
 			return response.redirectToNamedRoute('dashboard');
 		}
 
+		// TODO: Create DTOs
 		return inertia.render('dashboard', {
-      collections,
-      activeCollection: activeCollection || collections[0],
+			collections: collections.map((collection) => collection.serialize()),
+			activeCollection:
+				activeCollection?.serialize() || collections[0].serialize(),
 		});
 	}
 

app/controllers/searches_controller.ts

@@ -1,16 +1,12 @@
+import { searchTermValidator } from '#validators/search_term';
 import type { HttpContext } from '@adonisjs/core/http';
 import db from '@adonisjs/lucid/services/db';
 
 export default class SearchesController {
 	async search({ request, auth }: HttpContext) {
-    const term = request.qs()?.term;
-    if (!term) {
-      console.warn('qs term null');
-      return { error: 'missing "term" query param' };
-    }
-
+		const { searchTerm } = await request.validateUsing(searchTermValidator);
 		const { rows } = await db.rawQuery('SELECT * FROM search_text(?, ?)', [
-      term,
+			searchTerm,
 			auth.user!.id,
 		]);
 		return { results: rows };

app/controllers/users_controller.ts

@@ -1,8 +1,8 @@
 import User from '#models/user';
+import { RouteName } from '#types/tuyau';
 import type { HttpContext } from '@adonisjs/core/http';
 import logger from '@adonisjs/core/services/logger';
 import db from '@adonisjs/lucid/services/db';
-import { RouteName } from '@izzyjs/route/types';
 
 export default class UsersController {
 	private redirectTo: RouteName = 'auth.login';

app/lib/tuyau.ts

@@ -0,0 +1,22 @@
+import { api } from '#adonisjs/api';
+import { QueryParams } from '#types/query_params';
+import { RouteName } from '#types/tuyau';
+
+export const getRoute = (routeName: RouteName, options?: QueryParams) => {
+	const current = api.routes.find((route) => route.name === routeName);
+	if (!current) {
+		throw new Error(`Route ${routeName} not found`);
+	}
+
+	if (options?.qs) {
+		const searchParams = new URLSearchParams(options?.qs);
+		return { ...current, path: `${current.path}?${searchParams.toString()}` };
+	}
+
+	return current;
+};
+
+export function getPath(routeName: RouteName, options?: QueryParams) {
+	const current = getRoute(routeName, options);
+	return current.path;
+}

app/middleware/auth_middleware.ts

@@ -1,7 +1,7 @@
+import { getPath } from '#lib/tuyau';
 import type { Authenticators } from '@adonisjs/auth/types';
 import type { HttpContext } from '@adonisjs/core/http';
 import type { NextFn } from '@adonisjs/core/types/http';
-import { route } from '@izzyjs/route/client';
 
 /**
  * Auth middleware is used authenticate HTTP requests and deny
@@ -11,7 +11,7 @@ export default class AuthMiddleware {
 	/**
 	 * The URL to redirect to, when authentication fails
 	 */
-  redirectTo = route('auth.login').url;
+	redirectTo = getPath('auth.login');
 
 	async handle(
 		ctx: HttpContext,

app/middleware/silent_auth_middleware.ts

@@ -0,0 +1,9 @@
+import type { HttpContext } from '@adonisjs/core/http';
+import type { NextFn } from '@adonisjs/core/types/http';
+
+export default class SilentAuthMiddleware {
+	async handle(ctx: HttpContext, next: NextFn) {
+		await ctx.auth.check();
+		return next();
+	}
+}

app/middleware/update_user_last_seen_middleware.ts

@@ -0,0 +1,16 @@
+import type { HttpContext } from '@adonisjs/core/http';
+import type { NextFn } from '@adonisjs/core/types/http';
+import { DateTime } from 'luxon';
+
+export default class UpdateUserLastSeenMiddleware {
+	async handle(ctx: HttpContext, next: NextFn) {
+		const user = ctx.auth.user;
+		if (user) {
+			user.lastSeenAt = DateTime.local();
+			await user.save();
+		}
+
+		const output = await next();
+		return output;
+	}
+}

app/models/user.ts

@@ -4,6 +4,7 @@ import type { GoogleToken } from '@adonisjs/ally/types';
 import { column, computed, hasMany } from '@adonisjs/lucid/orm';
 import type { HasMany } from '@adonisjs/lucid/types/relations';
 import AppBaseModel from './app_base_model.js';
+import { DateTime } from 'luxon';
 
 export default class User extends AppBaseModel {
 	@column()
@@ -44,4 +45,10 @@ export default class User extends AppBaseModel {
 	get fullname() {
 		return this.nickName || this.name;
 	}
+
+	@column.dateTime({
+		autoCreate: true,
+		autoUpdate: true,
+	})
+	declare lastSeenAt: DateTime;
 }

app/types/query_params.ts

@@ -0,0 +1 @@
+export type QueryParams = { qs?: Record<string, any> };

app/types/tuyau.ts

@@ -0,0 +1,4 @@
+import { api } from '#adonisjs/api';
+
+export type RouteName = (typeof api)['routes'][number]['name'];
+export type RouteParams = (typeof api)['routes'][number]['params'];

app/validators/search_term.ts

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

compose.yml

@@ -9,7 +9,7 @@ services:
       - POSTGRES_USER=${DB_USER}
       - POSTGRES_PASSWORD=${DB_PASSWORD}
     healthcheck:
-      test: ['CMD-SHELL', 'pg_isready']
+      test: ['CMD-SHELL', 'pg_isready', '-U', '${DB_USER}']
     volumes:
       - postgres-volume:/var/lib/postgresql/data
     ports:
@@ -17,22 +17,30 @@ services:
 
   pgadmin:
     container_name: pgadmin
-    image: dpage/pgadmin4:8.6
+    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
-    volumes:
-      - ./docker-config/servers_pgadmin.json:/pgadmin4/servers.json
     ports:
       - '5050:80'
+    user: root
+    configs:
+      - source: servers.json
+        target: /pgadmin4/servers.json
+      - source: pgpass
+        target: /pgpass
 
   my-links:
     container_name: my-links
@@ -53,4 +61,19 @@ services:
 
 volumes:
   postgres-volume:
-    name: postgres-prod-my-links
+
+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/session.ts

@@ -1,5 +1,4 @@
 import env from '#start/env';
-import app from '@adonisjs/core/services/app';
 import { defineConfig, stores } from '@adonisjs/session';
 
 const sessionConfig = defineConfig({
@@ -16,7 +15,7 @@ const sessionConfig = defineConfig({
 	 * Define how long to keep the session data alive without
 	 * any activity.
 	 */
-  age: '2h',
+	age: '7d',
 
 	/**
 	 * Configuration for session cookie and the
@@ -25,8 +24,10 @@ const sessionConfig = defineConfig({
 	cookie: {
 		path: '/',
 		httpOnly: true,
-    secure: app.inProduction,
-    sameSite: 'lax',
+		secure: true,
+
+		// TODO: set this to lax and found a solution to keep auth when using extension
+		sameSite: 'none',
 	},
 
 	/**

config/shield.ts

@@ -27,8 +27,7 @@ const shieldConfig = defineConfig({
 	 * iFrames
 	 */
 	xFrame: {
-    enabled: true,
-    action: 'DENY',
+		enabled: false,
 	},
 
 	/**

config/tuyau.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from '@tuyau/core'
+
+const tuyauConfig = defineConfig({
+  codegen: {
+    /**
+     * Filters the definitions and named routes to be generated
+     */
+    // definitions: {
+    //  only: [],
+    // }
+    // routes: {
+    //  only: [],
+    // }
+  }
+})
+
+export default tuyauConfig

database/migrations/1714218548323_create_users_table.ts

@@ -5,7 +5,14 @@ export default class CreateUsersTable extends BaseSchema {
 	static tableName = 'users';
 
 	async up() {
-    this.schema.createTableIfNotExists(CreateUsersTable.tableName, (table) => {
+		const exists = await this.schema.hasTable(CreateUsersTable.tableName);
+		if (exists) {
+			return console.warn(
+				`Table ${CreateUsersTable.tableName} already exists.`
+			);
+		}
+
+		this.schema.createTable(CreateUsersTable.tableName, (table) => {
 			table.string('email', 254).notNullable().unique();
 			table.string('name', 254).notNullable();
 			table.string('nick_name', 254).nullable();

database/migrations/1714253983443_create_collections_table.ts

@@ -8,9 +8,14 @@ export default class CreateCollectionTable extends BaseSchema {
 
 	async up() {
 		this.schema.raw(`DROP TYPE IF EXISTS ${this.visibilityEnumName}`);
-    this.schema.createTableIfNotExists(
-      CreateCollectionTable.tableName,
-      (table) => {
+		const exists = await this.schema.hasTable(CreateCollectionTable.tableName);
+		if (exists) {
+			return console.warn(
+				`Table ${CreateCollectionTable.tableName} already exists.`
+			);
+		}
+
+		this.schema.createTable(CreateCollectionTable.tableName, (table) => {
 			table.string('name', 254).notNullable();
 			table.string('description', 254).nullable();
 			table
@@ -33,8 +38,7 @@ export default class CreateCollectionTable extends BaseSchema {
 				.onDelete('CASCADE');
 
 			defaultTableFields(table);
-      }
-    );
+		});
 	}
 
 	async down() {

database/migrations/1714254076754_create_links_table.ts

@@ -5,7 +5,13 @@ export default class CreateLinksTable extends BaseSchema {
 	static tableName = 'links';
 
 	async up() {
-    this.schema.createTableIfNotExists(CreateLinksTable.tableName, (table) => {
+		const exists = await this.schema.hasTable(CreateLinksTable.tableName);
+		if (exists) {
+			return console.warn(`Table ${CreateLinksTable.tableName} already
+			exists.`);
+		}
+
+		this.schema.createTable(CreateLinksTable.tableName, (table) => {
 			table.string('name', 254).notNullable();
 			table.string('description', 254).nullable();
 			table.text('url').notNullable();

database/migrations/1728257868871_update_user_last_seens_table.ts

@@ -0,0 +1,15 @@
+import { BaseSchema } from '@adonisjs/lucid/schema';
+
+export default class extends BaseSchema {
+	protected tableName = 'users';
+
+	async up() {
+		this.schema.alterTable(this.tableName, (table) => {
+			table.timestamp('last_seen_at');
+		});
+	}
+
+	async down() {
+		this.schema.dropTable(this.tableName);
+	}
+}

database/seeders/collection_seeder.ts

@@ -8,7 +8,6 @@ export default class extends BaseSeeder {
 	static environment = ['development', 'testing'];
 
 	async run() {
-    // eslint-disable-next-line unicorn/no-await-expression-member
 		const users = await getUserIds();
 
 		const collections = faker.helpers.multiple(
@@ -26,14 +25,16 @@ export async function getUserIds() {
 	return users.map(({ id }) => id);
 }
 
+let collectionId = 0;
 function createRandomCollection(userIds: User['id'][]) {
 	const authorId = faker.helpers.arrayElements(userIds, 1).at(0);
+	collectionId++;
 	return {
-    id: faker.string.uuid(),
+		id: collectionId,
 		name: faker.string.alphanumeric({ length: { min: 5, max: 25 } }),
 		description: faker.string.alphanumeric({ length: { min: 0, max: 254 } }),
 		visibility: Visibility.PRIVATE,
-    nextId: undefined,
+		nextId: collectionId + 1,
 		authorId,
 	};
 }

database/seeders/link_seeder.ts

@@ -9,7 +9,6 @@ export default class extends BaseSeeder {
 	static environment = ['development', 'testing'];
 
 	async run() {
-    // eslint-disable-next-line unicorn/no-await-expression-member
 		const users = await getUserIds();
 
 		const links = await Promise.all(

dev.compose.yml

@@ -0,0 +1,62 @@
+name: my-links-dev
+services:
+  postgres:
+    container_name: postgres
+    image: postgres:16
+    restart: always
+    environment:
+      - POSTGRES_DB=${DB_DATABASE}
+      - POSTGRES_USER=${DB_USER}
+      - POSTGRES_PASSWORD=${DB_PASSWORD}
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready", "-U", "${DB_USER}"]
+    volumes:
+      - postgres-volume:/var/lib/postgresql/data
+    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"
+      }}}

dev.docker-compose.yml

@@ -1,34 +0,0 @@
-name: dev-stack
-services:
-  postgres:
-    container_name: postgres
-    image: postgres:16
-    restart: always
-    environment:
-      - POSTGRES_DB=${DB_DATABASE}
-      - POSTGRES_USER=${DB_USER}
-      - POSTGRES_PASSWORD=${DB_PASSWORD}
-    healthcheck:
-      test: ['CMD-SHELL', 'pg_isready']
-    volumes:
-      - postgres_volume:/var/lib/postgresql/data
-    ports:
-      - '${DB_PORT}:5432'
-
-  pgadmin:
-    container_name: pgadmin
-    image: dpage/pgadmin4:8.6
-    restart: always
-    environment:
-      - PGADMIN_DEFAULT_EMAIL=myemail@gmail.com
-      - PGADMIN_DEFAULT_PASSWORD=a12345678
-    depends_on:
-      - postgres
-    volumes:
-      - ./docker-config/servers_pgadmin.json:/pgadmin4/servers.json
-    ports:
-      - '5050:80'
-
-volumes:
-  postgres_volume:
-    name: postgres_test_dev_stack

docker-config/servers_pgadmin.json

@@ -1,13 +0,0 @@
-{
-  "Servers": {
-    "1": {
-      "Name": "project",
-      "Group": "Servers",
-      "Port": 5432,
-      "Username": "postgres",
-      "Host": "postgres",
-      "SSLMode": "prefer",
-      "MaintenanceDB": "my-links"
-    }
-  }
-}

eslint.config.js

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

inertia/components/common/dropdown/dropdown.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { ReactNode, useRef } from 'react';
+import { HtmlHTMLAttributes, ReactNode, useRef } from 'react';
 import DropdownContainer from '~/components/common/dropdown/dropdown_container';
 import DropdownLabel from '~/components/common/dropdown/dropdown_label';
 import useClickOutside from '~/hooks/use_click_outside';
@@ -34,8 +34,8 @@ export default function Dropdown({
 	label,
 	className,
 	svgSize,
-}: {
-  children: ReactNode;
+	onClick,
+}: HtmlHTMLAttributes<HTMLDivElement> & {
 	label: ReactNode | string;
 	className?: string;
 	svgSize?: number;
@@ -49,7 +49,10 @@ export default function Dropdown({
 	return (
 		<DropdownStyle
 			opened={isShowing}
-      onClick={toggle}
+			onClick={(event) => {
+				onClick?.(event);
+				toggle();
+			}}
 			ref={dropdownRef}
 			className={className}
 			svgSize={svgSize}

inertia/components/common/icon_button.tsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+
+const IconButton = styled.button(({ theme }) => ({
+	cursor: 'pointer',
+	height: '2rem',
+	width: '2rem',
+	fontSize: '1rem',
+	color: theme.colors.font,
+	backgroundColor: theme.colors.grey,
+	borderRadius: '50%',
+	border: 0,
+	display: 'flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+
+	'&:disabled': {
+		cursor: 'not-allowed',
+		opacity: 0.15,
+	},
+}));
+
+export default IconButton;

inertia/components/common/legend.tsx

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+
+const Legend = styled.span(({ theme }) => ({
+	fontSize: '13px',
+	color: theme.colors.grey,
+}));
+
+export default Legend;

inertia/components/common/navigation/back_to_dashboard.tsx

@@ -1,16 +1,14 @@
 import { router } from '@inertiajs/react';
-import { route } from '@izzyjs/route/client';
 import { ReactNode } from 'react';
 import useSearchParam from '~/hooks/use_search_param';
 import useShortcut from '~/hooks/use_shortcut';
-import { appendCollectionId } from '~/lib/navigation';
+import { routeWithCollectionId } from '~/lib/navigation';
 
 export default function BackToDashboard({ children }: { children: ReactNode }) {
 	const collectionId = Number(useSearchParam('collectionId'));
 	useShortcut(
 		'ESCAPE_KEY',
-    () =>
-      router.visit(appendCollectionId(route('dashboard').url, collectionId)),
+		() => router.visit(routeWithCollectionId('dashboard', collectionId)),
 		{ disableGlobalCheck: true }
 	);
 	return <>{children}</>;

inertia/components/common/table.tsx

@@ -0,0 +1,227 @@
+import styled from '@emotion/styled';
+import {
+	ColumnDef,
+	flexRender,
+	getCoreRowModel,
+	getPaginationRowModel,
+	getSortedRowModel,
+	PaginationState,
+	SortingState,
+	useReactTable,
+} from '@tanstack/react-table';
+import { useState } from 'react';
+import IconButton from '~/components/common/icon_button';
+
+import {
+	MdKeyboardArrowLeft,
+	MdKeyboardArrowRight,
+	MdKeyboardDoubleArrowLeft,
+	MdKeyboardDoubleArrowRight,
+} from 'react-icons/md';
+import Input from '~/components/common/form/_input';
+
+const TablePageFooter = styled.div({
+	display: 'flex',
+	gap: '1em',
+	alignItems: 'center',
+});
+
+const Box = styled(TablePageFooter)({
+	gap: '0.35em',
+});
+
+const Resizer = styled.div<{ isResizing: boolean }>(
+	({ theme, isResizing }) => ({
+		cursor: 'col-resize',
+		userSelect: 'none',
+		touchAction: 'none',
+		position: 'absolute',
+		right: 0,
+		top: 0,
+		height: '100%',
+		width: '5px',
+		opacity: !isResizing ? 0 : 1,
+		background: !isResizing ? theme.colors.white : theme.colors.primary,
+		'&:hover': {
+			opacity: 0.5,
+		},
+	})
+);
+
+type TableProps<T> = {
+	columns: ColumnDef<T>[];
+	data: T[];
+	defaultSorting?: SortingState;
+};
+
+export default function Table<T>({
+	columns,
+	data,
+	defaultSorting = [],
+}: TableProps<T>) {
+	const [pagination, setPagination] = useState<PaginationState>({
+		pageIndex: 0,
+		pageSize: 10,
+	});
+	const [sorting, setSorting] = useState<SortingState>(defaultSorting);
+
+	const table = useReactTable({
+		data,
+		columns,
+		enableColumnResizing: true,
+		columnResizeMode: 'onChange',
+		state: {
+			pagination,
+			sorting,
+		},
+		onPaginationChange: setPagination,
+		getCoreRowModel: getCoreRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		onSortingChange: setSorting,
+		debugTable: true,
+	});
+
+	return (
+		<div css={{ fontSize: '0.9rem', paddingBlock: '1em' }}>
+			<div
+				css={{
+					maxWidth: '100%',
+					marginBottom: '1em',
+					display: 'block',
+					overflowX: 'auto',
+					overflowY: 'hidden',
+				}}
+			>
+				<table>
+					<thead>
+						{table.getHeaderGroups().map((headerGroup) => (
+							<tr key={headerGroup.id}>
+								{headerGroup.headers.map((header) => (
+									<th
+										key={header.id}
+										style={{
+											width: header.getSize(),
+										}}
+										css={{
+											position: 'relative',
+											userSelect: 'none',
+											// resizer
+											'&:hover > div > div': {
+												opacity: 0.5,
+											},
+										}}
+										colSpan={header.colSpan}
+									>
+										{header.isPlaceholder ? null : (
+											<div
+												css={{
+													cursor: header.column.getCanSort()
+														? 'pointer'
+														: 'default',
+												}}
+												onClick={header.column.getToggleSortingHandler()}
+												title={
+													header.column.getCanSort()
+														? header.column.getNextSortingOrder() === 'asc'
+															? 'Sort ascending'
+															: header.column.getNextSortingOrder() === 'desc'
+																? 'Sort descending'
+																: 'Clear sort'
+														: undefined
+												}
+											>
+												{flexRender(
+													header.column.columnDef.header,
+													header.getContext()
+												)}
+												{{
+													asc: ' 🔼',
+													desc: ' 🔽',
+												}[header.column.getIsSorted() as string] ?? null}
+												{header.column.getCanResize() && (
+													<Resizer
+														onMouseDown={header.getResizeHandler()}
+														onTouchStart={header.getResizeHandler()}
+														isResizing={header.column.getIsResizing()}
+													/>
+												)}
+											</div>
+										)}
+									</th>
+								))}
+							</tr>
+						))}
+					</thead>
+					<tbody>
+						{table
+							.getRowModel()
+							.rows.slice(0, 10)
+							.map((row) => (
+								<tr key={row.id}>
+									{row.getVisibleCells().map((cell) => (
+										<td key={cell.id} style={{ width: cell.column.getSize() }}>
+											{flexRender(
+												cell.column.columnDef.cell,
+												cell.getContext()
+											)}
+										</td>
+									))}
+								</tr>
+							))}
+					</tbody>
+				</table>
+			</div>
+			{table.getPageCount() > 1 && (
+				<TablePageFooter>
+					<Box>
+						<IconButton
+							onClick={() => table.setPageIndex(0)}
+							disabled={!table.getCanPreviousPage()}
+						>
+							<MdKeyboardDoubleArrowLeft />
+						</IconButton>
+						<IconButton
+							onClick={() => table.previousPage()}
+							disabled={!table.getCanPreviousPage()}
+						>
+							<MdKeyboardArrowLeft />
+						</IconButton>
+						<IconButton
+							onClick={() => table.nextPage()}
+							disabled={!table.getCanNextPage()}
+						>
+							<MdKeyboardArrowRight />
+						</IconButton>
+						<IconButton
+							onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+							disabled={!table.getCanNextPage()}
+						>
+							<MdKeyboardDoubleArrowRight />
+						</IconButton>
+					</Box>
+					<Box>
+						<span>Page</span>
+						<strong>
+							{table.getState().pagination.pageIndex + 1} of{' '}
+							{table.getPageCount()}
+						</strong>
+					</Box>
+					<Box>
+						Go to page
+						<Input
+							type="number"
+							min="1"
+							max={table.getPageCount()}
+							defaultValue={table.getState().pagination.pageIndex + 1}
+							onChange={(e) => {
+								const page = e.target.value ? Number(e.target.value) - 1 : 0;
+								table.setPageIndex(page);
+							}}
+						/>
+					</Box>
+				</TablePageFooter>
+			)}
+		</div>
+	);
+}

inertia/components/dashboard/collection/header/collection_controls.tsx

@@ -1,4 +1,3 @@
-import { route } from '@izzyjs/route/client';
 import { useTranslation } from 'react-i18next';
 import { BsThreeDotsVertical } from 'react-icons/bs';
 import { GoPencil } from 'react-icons/go';
@@ -6,7 +5,7 @@ import { IoIosAddCircleOutline } from 'react-icons/io';
 import { IoTrashOutline } from 'react-icons/io5';
 import Dropdown from '~/components/common/dropdown/dropdown';
 import { DropdownItemLink } from '~/components/common/dropdown/dropdown_item';
-import { appendCollectionId } from '~/lib/navigation';
+import { getPath, routeWithCollectionId } from '~/lib/navigation';
 import { Collection } from '~/types/app';
 
 export default function CollectionControls({
@@ -17,22 +16,16 @@ export default function CollectionControls({
 	const { t } = useTranslation('common');
 	return (
 		<Dropdown label={<BsThreeDotsVertical />} svgSize={18}>
-      <DropdownItemLink href={route('link.create-form').url}>
+			<DropdownItemLink href={getPath('link.create-form')}>
 				<IoIosAddCircleOutline /> {t('link.create')}
 			</DropdownItemLink>
 			<DropdownItemLink
-        href={appendCollectionId(
-          route('collection.edit-form').url,
-          collectionId
-        )}
+				href={routeWithCollectionId('collection.edit-form', collectionId)}
 			>
 				<GoPencil /> {t('collection.edit')}
 			</DropdownItemLink>
 			<DropdownItemLink
-        href={appendCollectionId(
-          route('collection.delete-form').url,
-          collectionId
-        )}
+				href={routeWithCollectionId('collection.delete-form', collectionId)}
 				danger
 			>
 				<IoTrashOutline /> {t('collection.delete')}

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

@@ -1,12 +1,11 @@
 import styled from '@emotion/styled';
 import { Link } from '@inertiajs/react';
-import { route } from '@izzyjs/route/client';
 import { useEffect, useRef } from 'react';
 import { AiFillFolderOpen, AiOutlineFolder } from 'react-icons/ai';
 import TextEllipsis from '~/components/common/text_ellipsis';
 import { Item } from '~/components/dashboard/side_nav/nav_item';
 import useActiveCollection from '~/hooks/use_active_collection';
-import { appendCollectionId } from '~/lib/navigation';
+import { routeWithCollectionId } from '~/lib/navigation';
 import { CollectionWithLinks } from '~/types/app';
 
 const CollectionItemStyle = styled(Item, {
@@ -43,7 +42,7 @@ export default function CollectionItem({
 
 	return (
 		<CollectionItemLink
-      href={appendCollectionId(route('dashboard').url, collection.id)}
+			href={routeWithCollectionId('dashboard', collection.id)}
 			isActive={isActiveCollection}
 			ref={itemRef}
 		>

inertia/components/dashboard/dashboard_provider.tsx

@@ -1,13 +1,12 @@
 import { router } from '@inertiajs/react';
-import { route } from '@izzyjs/route/client';
 import { ReactNode, useMemo, useState } from 'react';
 import { ActiveCollectionContext } from '~/contexts/active_collection_context';
 import CollectionsContext from '~/contexts/collections_context';
 import FavoritesContext from '~/contexts/favorites_context';
 import GlobalHotkeysContext from '~/contexts/global_hotkeys_context';
 import useShortcut from '~/hooks/use_shortcut';
-import { appendCollectionId } from '~/lib/navigation';
-import { CollectionWithLinks, Link } from '~/types/app';
+import { routeWithCollectionId } from '~/lib/navigation';
+import { CollectionWithLinks, LinkWithCollection } from '~/types/app';
 
 export default function DashboardProviders(
 	props: Readonly<{
@@ -28,17 +27,21 @@ export default function DashboardProviders(
 
 	const handleChangeCollection = (collection: CollectionWithLinks) => {
 		setActiveCollection(collection);
-    router.visit(appendCollectionId(route('dashboard').url, collection.id));
+		router.visit(routeWithCollectionId('dashboard', collection.id));
 	};
 
-  const favorites = useMemo<Link[]>(
+	// TODO: compute this in controller
+	const favorites = useMemo<LinkWithCollection[]>(
 		() =>
 			collections.reduce((acc, collection) => {
-        collection.links.forEach((link) =>
-          link.favorite ? acc.push(link) : null
-        );
+				collection.links.forEach((link) => {
+					if (link.favorite) {
+						const newLink: LinkWithCollection = { ...link, collection };
+						acc.push(newLink);
+					}
+				});
 				return acc;
-      }, [] as Link[]),
+			}, [] as LinkWithCollection[]),
 		[collections]
 	);
 
@@ -63,7 +66,7 @@ export default function DashboardProviders(
 		'OPEN_CREATE_LINK_KEY',
 		() =>
 			router.visit(
-        appendCollectionId(route('link.create-form').url, activeCollection?.id)
+				routeWithCollectionId('link.create-form', activeCollection?.id)
 			),
 		{
 			enabled: globalHotkeysEnabled,
@@ -71,11 +74,12 @@ export default function DashboardProviders(
 	);
 	useShortcut(
 		'OPEN_CREATE_COLLECTION_KEY',
-    () => router.visit(route('collection.create-form').url),
+		() => router.visit('collection.create-form'),
 		{
 			enabled: globalHotkeysEnabled,
 		}
 	);
+
 	return (
 		<CollectionsContext.Provider value={collectionsContextValue}>
 			<ActiveCollectionContext.Provider value={activeCollectionContextValue}>

inertia/components/dashboard/link/link_controls.tsx

@@ -1,71 +1,17 @@
 import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import { route } from '@izzyjs/route/client';
-import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { AiFillStar, AiOutlineStar } from 'react-icons/ai';
 import { BsThreeDotsVertical } from 'react-icons/bs';
 import { GoPencil } from 'react-icons/go';
 import { IoTrashOutline } from 'react-icons/io5';
 import Dropdown from '~/components/common/dropdown/dropdown';
-import {
-  DropdownItemButton,
-  DropdownItemLink,
-} from '~/components/common/dropdown/dropdown_item';
-import useActiveCollection from '~/hooks/use_active_collection';
-import useCollections from '~/hooks/use_collections';
-import { appendLinkId } from '~/lib/navigation';
-import { makeRequest } from '~/lib/request';
+import { DropdownItemLink } from '~/components/common/dropdown/dropdown_item';
+import FavoriteDropdownItem from '~/components/dashboard/side_nav/favorite/favorite_dropdown_item';
+import { routeWithLinkId } from '~/lib/navigation';
 import { Link } from '~/types/app';
 
-const StartItem = styled(DropdownItemButton)(({ theme }) => ({
-  color: theme.colors.yellow,
-}));
-
 export default function LinkControls({ link }: { link: Link }) {
 	const theme = useTheme();
 	const { t } = useTranslation('common');
-  const { collections, setCollections } = useCollections();
-  const { setActiveCollection } = useActiveCollection();
-
-  const toggleFavorite = useCallback(
-    (linkId: Link['id']) => {
-      let linkIndex = 0;
-      const collectionIndex = collections.findIndex(({ links }) => {
-        const lIndex = links.findIndex((l) => l.id === linkId);
-        if (lIndex !== -1) {
-          linkIndex = lIndex;
-        }
-        return lIndex !== -1;
-      });
-
-      const collectionLink = collections[collectionIndex].links[linkIndex];
-      const collectionsCopy = [...collections];
-      collectionsCopy[collectionIndex].links[linkIndex] = {
-        ...collectionLink,
-        favorite: !collectionLink.favorite,
-      };
-
-      setCollections(collectionsCopy);
-      setActiveCollection(collectionsCopy[collectionIndex]);
-    },
-    [collections, setCollections]
-  );
-
-  const onFavorite = () => {
-    const { url, method } = route('link.toggle-favorite', {
-      params: { id: link.id.toString() },
-    });
-    makeRequest({
-      url,
-      method,
-      body: {
-        favorite: !link.favorite,
-      },
-    })
-      .then(() => toggleFavorite(link.id))
-      .catch(console.error);
-  };
 
 	return (
 		<Dropdown
@@ -73,24 +19,12 @@ export default function LinkControls({ link }: { link: Link }) {
 			css={{ backgroundColor: theme.colors.secondary }}
 			svgSize={18}
 		>
-      <StartItem onClick={onFavorite}>
-        {!link.favorite ? (
-          <>
-            <AiFillStar /> {t('add-favorite')}
-          </>
-        ) : (
-          <>
-            <AiOutlineStar /> {t('remove-favorite')}
-          </>
-        )}
-      </StartItem>
-      <DropdownItemLink
-        href={appendLinkId(route('link.edit-form').url, link.id)}
-      >
+			<FavoriteDropdownItem link={link} />
+			<DropdownItemLink href={routeWithLinkId('link.edit-form', link.id)}>
 				<GoPencil /> {t('link.edit')}
 			</DropdownItemLink>
 			<DropdownItemLink
-        href={appendLinkId(route('link.delete-form').url, link.id)}
+				href={routeWithLinkId('link.delete-form', link.id)}
 				danger
 			>
 				<IoTrashOutline /> {t('link.delete')}

inertia/components/dashboard/link/no_item.tsx

@@ -1,9 +1,8 @@
 import styled from '@emotion/styled';
 import { Link } from '@inertiajs/react';
-import { route } from '@izzyjs/route/client';
 import { useTranslation } from 'react-i18next';
 import useActiveCollection from '~/hooks/use_active_collection';
-import { appendCollectionId } from '~/lib/navigation';
+import { routeWithCollectionId } from '~/lib/navigation';
 import { fadeIn } from '~/styles/keyframes';
 
 const NoCollectionStyle = styled.div({
@@ -30,9 +29,7 @@ export function NoCollection() {
 	return (
 		<NoCollectionStyle>
 			<Text>{t('select-collection')}</Text>
-      <Link href={route('collection.create-form').url}>
-        {t('or-create-one')}
-      </Link>
+			<Link href={'collection.create-form'}>{t('or-create-one')}</Link>
 		</NoCollectionStyle>
 	);
 }
@@ -54,10 +51,7 @@ export function NoLink() {
 				}}
 			/>
 			<Link
-        href={appendCollectionId(
-          route('link.create-form').url,
-          activeCollection?.id
-        )}
+				href={routeWithCollectionId('link.create-form', activeCollection?.id)}
 			>
 				{t('link.create')}
 			</Link>

inertia/components/dashboard/search/search_modal.tsx

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import { route } from '@izzyjs/route/client';
 import { FormEvent, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IoIosSearch } from 'react-icons/io';
@@ -11,7 +10,7 @@ import useActiveCollection from '~/hooks/use_active_collection';
 import useCollections from '~/hooks/use_collections';
 import useToggle from '~/hooks/use_modal';
 import useShortcut from '~/hooks/use_shortcut';
-import { makeRequest } from '~/lib/request';
+import { tuyau, tuyauAbortController } from '~/lib/tuyau';
 import { SearchResult } from '~/types/search';
 
 const SearchInput = styled.input(({ theme }) => ({
@@ -78,18 +77,14 @@ function SearchModal({ openItem: OpenItem }: SearchModalProps) {
 			return setResults([]);
 		}
 
-    const controller = new AbortController();
-    const { url, method } = route('search', { qs: { term: searchTerm } });
-    makeRequest({
-      method,
-      url,
-      controller,
-    }).then(({ results: _results }) => {
-      setResults(_results);
-      setSelectedItem(_results?.[0]);
+		tuyau.search.$get({ query: { searchTerm } }).then(({ error, data }) => {
+			if (error?.status === 404) return setResults([]);
+			const results = data?.results || [];
+			setResults(results);
+			setSelectedItem(results?.[0]);
 		});
 
-    return () => controller.abort();
+		return () => tuyauAbortController.abort();
 	}, [searchTerm]);
 
 	return (

inertia/components/dashboard/search/search_result_item.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import { RefObject, useEffect, useRef, useState } from 'react';
 import { AiOutlineFolder } from 'react-icons/ai';
+import Legend from '~/components/common/legend';
 import TextEllipsis from '~/components/common/text_ellipsis';
 import LinkFavicon from '~/components/dashboard/link/link_favicon';
 import useCollections from '~/hooks/use_collections';
@@ -14,7 +15,7 @@ const SearchItemStyle = styled('li', {
 	shouldForwardProp: (propName) => propName !== 'isActive',
 })<{ isActive: boolean }>(({ theme, isActive }) => ({
 	fontSize: '16px',
-  backgroundColor: isActive ? theme.colors.background : 'transparent',
+	backgroundColor: isActive ? theme.colors.secondary : 'transparent',
 	display: 'flex',
 	gap: '0.35em',
 	alignItems: 'center',
@@ -22,11 +23,6 @@ const SearchItemStyle = styled('li', {
 	padding: '0.25em 0.35em !important',
 }));
 
-const ItemLegeng = styled.span(({ theme }) => ({
-  fontSize: '13px',
-  color: theme.colors.grey,
-}));
-
 interface CommonResultProps {
 	innerRef: RefObject<HTMLLIElement>;
 	isActive: boolean;
@@ -100,7 +96,7 @@ function ResultLink({
 					__html: result.matched_part ?? result.name,
 				}}
 			/>
-      <ItemLegeng>({collection.name})</ItemLegeng>
+			<Legend>({collection.name})</Legend>
 		</SearchItemStyle>
 	);
 }

inertia/components/dashboard/side_nav/favorite/favorite_dropdown_item.tsx

@@ -0,0 +1,60 @@
+import styled from '@emotion/styled';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AiFillStar, AiOutlineStar } from 'react-icons/ai';
+import { DropdownItemButton } from '~/components/common/dropdown/dropdown_item';
+import useActiveCollection from '~/hooks/use_active_collection';
+import useCollections from '~/hooks/use_collections';
+import { onFavorite } from '~/lib/favorite';
+import { Link } from '~/types/app';
+
+const StarItem = styled(DropdownItemButton)(({ theme }) => ({
+	color: theme.colors.yellow,
+}));
+
+export default function FavoriteDropdownItem({ link }: { link: Link }) {
+	const { collections, setCollections } = useCollections();
+	const { setActiveCollection } = useActiveCollection();
+	const { t } = useTranslation();
+
+	const toggleFavorite = useCallback(
+		(linkId: Link['id']) => {
+			let linkIndex = 0;
+			const collectionIndex = collections.findIndex(({ links }) => {
+				const lIndex = links.findIndex((l) => l.id === linkId);
+				if (lIndex !== -1) {
+					linkIndex = lIndex;
+				}
+				return lIndex !== -1;
+			});
+
+			const collectionLink = collections[collectionIndex].links[linkIndex];
+			const collectionsCopy = [...collections];
+			collectionsCopy[collectionIndex].links[linkIndex] = {
+				...collectionLink,
+				favorite: !collectionLink.favorite,
+			};
+
+			setCollections(collectionsCopy);
+			setActiveCollection(collectionsCopy[collectionIndex]);
+		},
+		[collections, setCollections]
+	);
+
+	const onFavoriteCallback = () => toggleFavorite(link.id);
+	return (
+		<StarItem
+			onClick={() => onFavorite(link.id, !link.favorite, onFavoriteCallback)}
+		>
+			{!link.favorite ? (
+				<>
+					<AiFillStar /> {t('add-favorite')}
+				</>
+			) : (
+				<>
+					<AiOutlineStar /> {t('remove-favorite')}
+				</>
+			)}
+		</StarItem>
+	);
+}

inertia/components/dashboard/side_nav/favorite/favorite_item.tsx

@@ -1,8 +1,66 @@
 import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';
+import { BsThreeDotsVertical } from 'react-icons/bs';
+import { FaRegEye } from 'react-icons/fa';
+import { GoPencil } from 'react-icons/go';
+import { IoTrashOutline } from 'react-icons/io5';
+import Dropdown from '~/components/common/dropdown/dropdown';
+import { DropdownItemLink } from '~/components/common/dropdown/dropdown_item';
+import Legend from '~/components/common/legend';
+import TextEllipsis from '~/components/common/text_ellipsis';
+import LinkFavicon from '~/components/dashboard/link/link_favicon';
+import FavoriteDropdownItem from '~/components/dashboard/side_nav/favorite/favorite_dropdown_item';
 import { ItemExternalLink } from '~/components/dashboard/side_nav/nav_item';
+import { routeWithCollectionId, routeWithLinkId } from '~/lib/navigation';
+import { LinkWithCollection } from '~/types/app';
 
-const FavoriteItem = styled(ItemExternalLink)(({ theme }) => ({
+const FavoriteItemStyle = styled(ItemExternalLink)(({ theme }) => ({
+	height: 'auto',
 	backgroundColor: theme.colors.secondary,
 }));
 
-export default FavoriteItem;
+const FavoriteDropdown = styled(Dropdown)(({ theme }) => ({
+	backgroundColor: theme.colors.secondary,
+}));
+
+const FavoriteContainer = styled.div({
+	flex: 1,
+	lineHeight: '1.1rem',
+});
+
+export default function FavoriteItem({ link }: { link: LinkWithCollection }) {
+	const { t } = useTranslation();
+	return (
+		<FavoriteItemStyle href={link.url}>
+			<LinkFavicon url={link.url} size={24} />
+			<FavoriteContainer>
+				<TextEllipsis>{link.name}</TextEllipsis>
+				<Legend>{link.collection.name}</Legend>
+			</FavoriteContainer>
+			<FavoriteDropdown
+				onClick={(event) => {
+					event.preventDefault();
+					event.stopPropagation();
+				}}
+				label={<BsThreeDotsVertical />}
+				svgSize={18}
+			>
+				<DropdownItemLink
+					href={routeWithCollectionId('dashboard', link.collection.id)}
+				>
+					<FaRegEye /> {t('go-to-collection')}
+				</DropdownItemLink>
+				<FavoriteDropdownItem link={link} />
+				<DropdownItemLink href={routeWithLinkId('link.edit-form', link.id)}>
+					<GoPencil /> {t('link.edit')}
+				</DropdownItemLink>
+				<DropdownItemLink
+					href={routeWithLinkId('link.delete-form', link.id)}
+					danger
+				>
+					<IoTrashOutline /> {t('link.delete')}
+				</DropdownItemLink>
+			</FavoriteDropdown>
+		</FavoriteItemStyle>
+	);
+}

inertia/components/dashboard/side_nav/favorite/favorite_list.tsx

@@ -1,7 +1,5 @@
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
-import TextEllipsis from '~/components/common/text_ellipsis';
-import LinkFavicon from '~/components/dashboard/link/link_favicon';
 import FavoriteListContainer from '~/components/dashboard/side_nav/favorite/favorite_container';
 import FavoriteItem from '~/components/dashboard/side_nav/favorite/favorite_item';
 import useFavorites from '~/hooks/use_favorites';
@@ -44,11 +42,8 @@ export default function FavoriteList() {
 				{t('favorite')} • {favorites.length}
 			</FavoriteLabel>
 			<FavoriteListStyle>
-        {favorites.map(({ id, name, url }) => (
-          <FavoriteItem href={url} key={id}>
-            <LinkFavicon url={url} size={24} />
-            <TextEllipsis>{name}</TextEllipsis>
-          </FavoriteItem>
+				{favorites.map((link) => (
+					<FavoriteItem link={link} key={link.id} />
 				))}
 			</FavoriteListStyle>
 		</FavoriteListContainer>

inertia/components/dashboard/side_nav/side_navigation.tsx

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import { route } from '@izzyjs/route/client';
 import { useTranslation } from 'react-i18next';
 import { AiOutlineFolderAdd } from 'react-icons/ai';
 import { IoAdd, IoShieldHalfSharp } from 'react-icons/io5';
@@ -11,7 +10,7 @@ import ModalSettings from '~/components/settings/settings_modal';
 import useActiveCollection from '~/hooks/use_active_collection';
 import useUser from '~/hooks/use_user';
 import { rgba } from '~/lib/color';
-import { appendCollectionId } from '~/lib/navigation';
+import { getPath, routeWithCollectionId } from '~/lib/navigation';
 
 const SideMenu = styled.nav(({ theme }) => ({
 	height: '100%',
@@ -56,21 +55,18 @@ export default function SideNavigation() {
 			<div css={{ paddingInline: '10px' }}>
 				<UserCard />
 				{user!.isAdmin && (
-          <AdminButton href={route('admin.dashboard').url}>
+					<AdminButton href={getPath('admin.dashboard')}>
 						<IoShieldHalfSharp /> {t('admin')}
 					</AdminButton>
 				)}
 				<ModalSettings openItem={SettingsButton} />
 				<SearchModal openItem={SearchButton} />
 				<AddButton
-          href={appendCollectionId(
-            route('link.create-form').url,
-            activeCollection?.id
-          )}
+					href={routeWithCollectionId('link.create-form', activeCollection?.id)}
 				>
 					<IoAdd /> {t('link.create')}
 				</AddButton>
-        <AddButton href={route('collection.create-form').url}>
+				<AddButton href={getPath('collection.create-form')}>
 					<AiOutlineFolderAdd /> {t('collection.create')}
 				</AddButton>
 			</div>

inertia/components/footer/footer.tsx

@@ -1,9 +1,9 @@
 import PATHS from '#constants/paths';
 import styled from '@emotion/styled';
 import { Link } from '@inertiajs/react';
-import { route } from '@izzyjs/route/client';
 import { useTranslation } from 'react-i18next';
 import ExternalLink from '~/components/common/external_link';
+import { getPath } from '~/lib/navigation';
 import packageJson from '../../../package.json';
 
 const FooterStyle = styled.footer(({ theme }) => ({
@@ -22,9 +22,9 @@ export default function Footer({ className }: { className?: string }) {
 	return (
 		<FooterStyle className={className}>
 			<div className="row">
-        <Link href={route('privacy').url}>{t('privacy')}</Link>
+				<Link href={getPath('privacy')}>{t('privacy')}</Link>
 				{' • '}
-        <Link href={route('terms').url}>{t('terms')}</Link>
+				<Link href={getPath('terms')}>{t('terms')}</Link>
 				{' • '}
 				<ExternalLink href={PATHS.EXTENSION}>Extension</ExternalLink>
 			</div>

inertia/components/home/hero_header.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 import { Link } from '@inertiajs/react';
-import { route } from '@izzyjs/route/client';
 import { useTranslation } from 'react-i18next';
 import Quotes from '~/components/quotes';
+import { getPath } from '~/lib/navigation';
 
 const HeroStyle = styled.header(({ theme }) => ({
 	height: '250px',
@@ -46,9 +46,7 @@ export default function HeroHeader() {
 		<HeroStyle>
 			<HeroTitle>{t('about:hero.title')}</HeroTitle>
 			<HeroQuote>{t('common:slogan')}</HeroQuote>
-      <LinkButton href={route('dashboard').url}>
-        {t('about:hero.cta')}
-      </LinkButton>
+			<LinkButton href={getPath('dashboard')}>{t('about:hero.cta')}</LinkButton>
 		</HeroStyle>
 	);
 }

inertia/components/layouts/_theme_layout.tsx

@@ -131,7 +131,9 @@ function GlobalStyles() {
 		},
 
 		'th, td': {
-      whiteSpace: 'nowrap',
+			whiteSspace: 'nowrap',
+			overflow: 'hidden',
+			textOverflow: 'ellipsis',
 		},
 
 		'tr:nth-of-type(even)': {

inertia/components/layouts/form_layout.tsx

@@ -1,13 +1,12 @@
 import styled from '@emotion/styled';
 import { Head, Link } from '@inertiajs/react';
-import { route } from '@izzyjs/route/client';
 import { FormEvent, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import Button from '~/components/common/form/_button';
 import Form from '~/components/common/form/_form';
 import TransitionLayout from '~/components/layouts/_transition_layout';
 import i18n from '~/i18n';
-import { appendCollectionId } from '~/lib/navigation';
+import { routeWithCollectionId } from '~/lib/navigation';
 import BaseLayout from './_base_layout';
 
 const FormLayoutStyle = styled(TransitionLayout)(({ theme }) => ({
@@ -59,7 +58,7 @@ export default function FormLayout({
 					</Button>
 				</Form>
 				{!disableHomeLink && (
-          <Link href={appendCollectionId(route('dashboard').url, collectionId)}>
+					<Link href={routeWithCollectionId('dashboard', collectionId)}>
 						{t('back-home')}
 					</Link>
 				)}

inertia/components/navbar/navbar.tsx

@@ -1,7 +1,6 @@
 import PATHS from '#constants/paths';
 import styled from '@emotion/styled';
 import { Link } from '@inertiajs/react';
-import { route } from '@izzyjs/route/client';
 import { useTranslation } from 'react-i18next';
 import { IoIosLogOut } from 'react-icons/io';
 import Dropdown from '~/components/common/dropdown/dropdown';
@@ -14,6 +13,7 @@ import RoundedImage from '~/components/common/rounded_image';
 import UnstyledList from '~/components/common/unstyled/unstyled_list';
 import ModalSettings from '~/components/settings/settings_modal';
 import useUser from '~/hooks/use_user';
+import { getPath } from '~/lib/navigation';
 
 type NavbarListDirection = {
 	right?: boolean;
@@ -66,7 +66,7 @@ export default function Navbar() {
 		<Nav>
 			<NavList>
 				<li>
-          <Link href={route('home').url} css={{ fontSize: '24px' }}>
+					<Link href={getPath('home')} css={{ fontSize: '24px' }}>
 						MyLinks
 					</Link>
 				</li>
@@ -79,13 +79,13 @@ export default function Navbar() {
 					<>
 						{user.isAdmin && (
 							<li>
-                <AdminLink href={route('admin.dashboard').url}>
+								<AdminLink href={getPath('admin.dashboard')}>
 									{t('admin')}
 								</AdminLink>
 							</li>
 						)}
 						<li>
-              <Link href={route('dashboard').url}>Dashboard</Link>
+							<Link href={getPath('dashboard')}>Dashboard</Link>
 						</li>
 						<li>
 							<ProfileDropdown />
@@ -97,7 +97,7 @@ export default function Navbar() {
 							<ModalSettings openItem={DropdownItemButtonWithPadding} />
 						</li>
 						<li>
-              <Link href={route('auth.login').url}>{t('login')}</Link>
+							<Link href={getPath('auth.login')}>{t('login')}</Link>
 						</li>
 					</>
 				)}
@@ -124,7 +124,7 @@ function ProfileDropdown() {
 			}
 		>
 			<ModalSettings openItem={DropdownItemButton} />
-      <DropdownItemLink href={route('auth.logout').url} danger>
+			<DropdownItemLink href={getPath('auth.logout')} danger>
 				<IoIosLogOut /> {t('logout')}
 			</DropdownItemLink>
 		</Dropdown>

inertia/components/settings/profile.tsx

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 import { Link } from '@inertiajs/react';
-import { route } from '@izzyjs/route/client';
 import dayjs from 'dayjs';
 import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -8,13 +7,14 @@ import RoundedImage from '~/components/common/rounded_image';
 import UnstyledList from '~/components/common/unstyled/unstyled_list';
 import { DATE_FORMAT } from '~/constants';
 import useUser from '~/hooks/use_user';
+import { getPath } from '~/lib/navigation';
 
 const ProfileStyle = styled(UnstyledList)({
 	display: 'flex',
 	gap: '1.25em',
 });
 
-const Column = styled.li({
+const Column = styled.div({
 	display: 'flex',
 	gap: '1rem',
 	flexDirection: 'column',
@@ -47,7 +47,7 @@ export default function Profile() {
 					alt={avatarLabel}
 					title={avatarLabel}
 				/>
-        <Link href={route('auth.logout').url}>{t('logout')}</Link>
+				<Link href={getPath('auth.logout')}>{t('logout')}</Link>
 			</Column>
 			<Column>
 				<Field>

inertia/contexts/dark_theme_context.tsx

@@ -1,7 +1,6 @@
 import { usePage } from '@inertiajs/react';
-import { route } from '@izzyjs/route/client';
 import { ReactNode, createContext, useEffect, useState } from 'react';
-import { makeRequest } from '~/lib/request';
+import { tuyau } from '~/lib/tuyau';
 
 const LS_KEY = 'dark_theme';
 
@@ -19,13 +18,8 @@ export default function DarkThemeContextProvider({
 	const [isDarkTheme, setDarkTheme] = useState<boolean>(preferDarkTheme);
 	const toggleDarkTheme = (value: boolean) => {
 		setDarkTheme(value);
-    const { method, url } = route('user.theme');
-    makeRequest({
-      method,
-      url,
-      body: {
+		tuyau.user.theme.$post({
 			preferDarkTheme: value,
-      },
 		});
 	};
 

inertia/contexts/favorites_context.ts

@@ -1,12 +1,12 @@
 import { createContext } from 'react';
-import { Link } from '~/types/app';
+import { LinkWithCollection } from '~/types/app';
 
 type FavoritesContextType = {
-  favorites: Link[];
+	favorites: LinkWithCollection[];
 };
 
 const iFavoritesContextState = {
-  favorites: [] as Link[],
+	favorites: [] as LinkWithCollection[],
 };
 
 const FavoritesContext = createContext<FavoritesContextType>(

inertia/i18n/locales/en/admin.json

@@ -1,7 +1,7 @@
 {
 	"role": "Role",
 	"created_at": "Created at",
-  "updated_at": "Updated at",
+	"last_seen_at": "Last seen at",
 	"admin": "Administrator",
 	"user": "User",
 	"users": "Users",

inertia/i18n/locales/en/common.json

@@ -32,6 +32,7 @@
   "add-favorite": "Add to favorites",
   "remove-favorite": "Remove from favorites",
   "favorites-appears-here": "Your favorites will appear here",
+  "go-to-collection": "Go to collection",
   "no-item-found": "No item found",
   "admin": "Administrator",
   "search": "Search",

inertia/i18n/locales/fr/admin.json

@@ -1,7 +1,7 @@
 {
 	"role": "Rôle",
 	"created_at": "Création",
-  "updated_at": "Mise à jour",
+	"last_seen_at": "Dernière connexion",
 	"admin": "Administrateur",
 	"user": "Utilisateur",
 	"users": "Utilisateurs",

inertia/i18n/locales/fr/common.json

@@ -32,6 +32,7 @@
   "add-favorite": "Ajouter aux favoris",
   "remove-favorite": "Retirer des favoris",
   "favorites-appears-here": "Vos favoris apparaîtront ici",
+  "go-to-collection": "Voir la collection",
   "no-item-found": "Aucun élément trouvé",
   "admin": "Administrateur",
   "search": "Rechercher",

inertia/lib/favorite.ts

@@ -0,0 +1,19 @@
+import { tuyau } from '~/lib/tuyau';
+import { Link } from '~/types/app';
+
+export const onFavorite = (
+	linkId: Link['id'],
+	isFavorite: boolean,
+	cb: () => void
+) => {
+	tuyau
+		.$route('link.toggle-favorite', {
+			id: linkId.toString(),
+		})
+		.$put({
+			favorite: isFavorite,
+			params: { id: linkId.toString() },
+		})
+		.then(() => cb())
+		.catch(console.error);
+};

inertia/lib/navigation.ts

@@ -1,19 +1,43 @@
+import { tuyau } from '~/lib/tuyau';
 import { Collection, Link } from '~/types/app';
+import { RouteName } from '~/types/tuyau';
 
-export const appendCollectionId = (
-  url: string,
+export const routeWithCollectionId = (
+	routeName: RouteName,
 	collectionId?: Collection['id'] | null | undefined
-) => `${url}${collectionId ? `?collectionId=${collectionId}` : ''}`;
+) =>
+	buildUrlWithQueryParams(routeName, {
+		collectionId,
+	});
 
-export const appendLinkId = (
-  url: string,
+export const routeWithLinkId = (
+	routeName: RouteName,
 	linkId?: Link['id'] | null | undefined
-) => `${url}${linkId ? `?linkId=${linkId}` : ''}`;
+) => buildUrlWithQueryParams(routeName, { linkId });
 
-export const appendResourceId = (
-  url: string,
+export const routeWithResourceId = (
+	routeName: RouteName,
 	resourceId?: Collection['id'] | Link['id']
-) => `${url}${resourceId ? `/${resourceId}` : ''}`;
+) => `${routeName}${resourceId ? `/${resourceId}` : ''}`;
+
+export function buildUrlWithQueryParams(
+	routeName: RouteName,
+	queryParam: Record<string, string | number | null | undefined>
+) {
+	const path = tuyau.$route(routeName).path;
+	const [key, value] = Object.entries(queryParam)[0];
+	if (!value) {
+		return path;
+	}
+
+	const searchParams = new URLSearchParams({
+		[key]: value.toString(),
+	});
+	return `${path}?${searchParams}`;
+}
+
+export const getRoute = (routeName: RouteName) => tuyau.$route(routeName);
+export const getPath = (routeName: RouteName) => getRoute(routeName).path;
 
 export function isValidHttpUrl(urlParam: string) {
 	let url;

inertia/lib/tuyau.ts

@@ -0,0 +1,11 @@
+/// <reference path="../../adonisrc.ts" />
+
+import { api } from '#adonisjs/api';
+import { createTuyau } from '@tuyau/client';
+
+export const tuyauAbortController = new AbortController();
+export const tuyau = createTuyau({
+	api,
+	baseUrl: 'http://localhost:3333',
+	signal: tuyauAbortController.signal,
+});

inertia/pages/admin/dashboard.tsx

@@ -1,14 +1,13 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { ColumnDef } from '@tanstack/react-table';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { ReactNode } from 'react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import RoundedImage from '~/components/common/rounded_image';
-import TextEllipsis from '~/components/common/text_ellipsis';
+import Table from '~/components/common/table';
 import ContentLayout from '~/components/layouts/content_layout';
 import { DATE_FORMAT } from '~/constants';
-import { sortByCreationDate } from '~/lib/array';
 import { UserWithRelationCount } from '~/types/app';
 
 dayjs.extend(relativeTime);
@@ -19,15 +18,18 @@ interface AdminDashboardProps {
 	totalLinks: number;
 }
 
-const Cell = styled.div<{ column?: boolean; fixed?: boolean }>(
-  ({ column, fixed }) => ({
-    width: '100%',
+const CenteredCell = styled.div({
 	display: 'flex',
 	alignItems: 'center',
-    justifyContent: fixed ? 'unset' : 'center',
-    gap: column ? 0 : '0.35em',
-    flexDirection: column ? 'column' : 'row',
-  })
+	justifyContent: 'center',
+	flexDirection: 'column',
+});
+
+const RenderDateCell = (info: any) => (
+	<CenteredCell>
+		<span>{dayjs(info.getValue().toString()).fromNow()}</span>
+		<span>{dayjs(info.getValue().toString()).format(DATE_FORMAT)}</span>
+	</CenteredCell>
 );
 
 const ThemeProvider = (props: AdminDashboardProps) => (
@@ -44,95 +46,87 @@ function AdminDashboard({
 }: AdminDashboardProps) {
 	const { t } = useTranslation();
 	const theme = useTheme();
-  return (
-    <div style={{ overflow: 'auto', marginTop: '1em' }}>
-      <table>
-        <thead>
-          <tr>
-            <TableCell type="th">#</TableCell>
-            <TableCell type="th">{t('common:name')}</TableCell>
-            <TableCell type="th">{t('common:email')}</TableCell>
-            <TableCell type="th">
+	const columns = useMemo(
+		() =>
+			[
+				{
+					accessorKey: 'id',
+					header: () => (
+						<>
+							# <span css={{ color: theme.colors.grey }}>({users.length})</span>
+						</>
+					),
+					cell: (info) => info.getValue(),
+				},
+				{
+					accessorKey: 'fullname',
+					header: t('common:name'),
+					cell: (info) => info.getValue(),
+				},
+				{
+					accessorKey: 'email',
+					header: t('common:email'),
+					cell: (info) => info.getValue(),
+				},
+				{
+					accessorKey: 'collectionsCount',
+					header: () => (
+						<>
 							{t('common:collection.collections', { count: totalCollections })}{' '}
 							<span css={{ color: theme.colors.grey }}>
 								({totalCollections})
 							</span>
-            </TableCell>
-            <TableCell type="th">
+						</>
+					),
+					cell: (info) => info.getValue(),
+				},
+				{
+					accessorKey: 'linksCount',
+					header: () => (
+						<>
 							{t('common:link.links', { count: totalLinks })}{' '}
 							<span css={{ color: theme.colors.grey }}>({totalLinks})</span>
-            </TableCell>
-            <TableCell type="th">{t('admin:role')}</TableCell>
-            <TableCell type="th">{t('admin:created_at')}</TableCell>
-            <TableCell type="th">{t('admin:updated_at')}</TableCell>
-          </tr>
-        </thead>
-        <tbody>
-          {users.length !== 0 &&
-            sortByCreationDate(users).map((user) => (
-              <TableUserRow user={user} key={user.id} />
-            ))}
-        </tbody>
-      </table>
-    </div>
-  );
-}
-
-function TableUserRow({ user }: { user: UserWithRelationCount }) {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const { id, fullname, avatarUrl, email, isAdmin, createdAt, updatedAt } =
-    user;
-  return (
-    <tr>
-      <TableCell type="td">{id}</TableCell>
-      <TableCell type="td" fixed>
-        {avatarUrl && (
-          <RoundedImage
-            src={avatarUrl}
-            width={24}
-            height={24}
-            alt={fullname}
-            title={fullname}
-            referrerPolicy="no-referrer"
-          />
-        )}
-        <TextEllipsis>{fullname ?? '-'}</TextEllipsis>
-      </TableCell>
-      <TableCell type="td">
-        <TextEllipsis>{email}</TextEllipsis>
-      </TableCell>
-      <TableCell type="td">{user.count.collection}</TableCell>
-      <TableCell type="td">{user.count.link}</TableCell>
-      <TableCell type="td">
-        {isAdmin ? (
+						</>
+					),
+					cell: (info: any) => info.getValue(),
+				},
+				{
+					accessorKey: 'isAdmin',
+					header: t('admin:role'),
+					cell: (info) =>
+						info.getValue() ? (
 							<span style={{ color: theme.colors.lightRed }}>
 								{t('admin:admin')}
 							</span>
 						) : (
-          <span style={{ color: theme.colors.green }}>{t('admin:user')}</span>
-        )}
-      </TableCell>
-      <TableCell type="td" column>
-        <span>{dayjs(createdAt.toString()).fromNow()}</span>
-        <span>{dayjs(createdAt.toString()).format(DATE_FORMAT)}</span>
-      </TableCell>
-      <TableCell type="td" column>
-        <span>{dayjs(updatedAt.toString()).fromNow()}</span>
-        <span>{dayjs(updatedAt.toString()).format(DATE_FORMAT)}</span>
-      </TableCell>
-    </tr>
+							<span style={{ color: theme.colors.green }}>
+								{t('admin:user')}
+							</span>
+						),
+				},
+				{
+					accessorKey: 'createdAt',
+					header: t('admin:created_at'),
+					cell: RenderDateCell,
+				},
+				{
+					accessorKey: 'lastSeenAt',
+					header: t('admin:last_seen_at'),
+					cell: RenderDateCell,
+				},
+			] satisfies ColumnDef<UserWithRelationCount>[],
+		[]
+	);
+	return (
+		<Table
+			columns={columns}
+			data={users}
+			defaultSorting={[
+				{
+					id: 'lastSeenAt',
+					desc: true,
+				},
+			]}
+		/>
 	);
 }
-
-type TableItem = {
-  children: ReactNode;
-  type: 'td' | 'th';
-  fixed?: boolean;
-  column?: boolean;
-};
-
-function TableCell({ children, type, ...props }: TableItem) {
-  const child = <Cell {...props}>{children}</Cell>;
-  return type === 'td' ? <td>{child}</td> : <th>{child}</th>;
-}

inertia/pages/collections/create.tsx

@@ -1,11 +1,11 @@
 import { Visibility } from '#enums/visibility';
 import { useForm } from '@inertiajs/react';
-import { route } from '@izzyjs/route/client';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import FormCollection, {
 	FormCollectionData,
 } from '~/components/form/form_collection';
+import { getRoute } from '~/lib/navigation';
 
 export default function CreateCollectionPage({
 	disableHomeLink,
@@ -24,8 +24,8 @@ export default function CreateCollectionPage({
 	);
 
 	const handleSubmit = () => {
-    const { method, url } = route('collection.create');
-    submit(method, url);
+		const { method, path } = getRoute('collection.create');
+		submit(method.at(0) as any, path);
 	};
 
 	return (

inertia/pages/collections/delete.tsx

@@ -1,9 +1,9 @@
 import { useForm } from '@inertiajs/react';
-import { route } from '@izzyjs/route/client';
 import { useTranslation } from 'react-i18next';
 import FormCollection, {
 	FormCollectionData,
 } from '~/components/form/form_collection';
+import { tuyau } from '~/lib/tuyau';
 import { Collection } from '~/types/app';
 
 export default function DeleteCollectionPage({
@@ -20,10 +20,10 @@ export default function DeleteCollectionPage({
 		});
 
 	const handleSubmit = () => {
-    const { method, url } = route('collection.delete', {
-      params: { id: collection.id.toString() },
+		const { method, path } = tuyau.$route('collection.delete', {
+			id: collection.id.toString(),
 		});
-    submit(method, url);
+		submit(method.at(0) as any, path);
 	};
 
 	return (

inertia/pages/collections/edit.tsx

@@ -1,10 +1,10 @@
 import { useForm } from '@inertiajs/react';
-import { route } from '@izzyjs/route/client';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import FormCollection, {
 	FormCollectionData,
 } from '~/components/form/form_collection';
+import { tuyau } from '~/lib/tuyau';
 import { Collection } from '~/types/app';
 
 export default function EditCollectionPage({
@@ -30,10 +30,10 @@ export default function EditCollectionPage({
 	}, [data, collection]);
 
 	const handleSubmit = () => {
-    const { method, url } = route('collection.edit', {
-      params: { id: collection.id.toString() },
+		const { method, path } = tuyau.$route('collection.edit', {
+			id: collection.id.toString(),
 		});
-    submit(method, url);
+		submit(method.at(0) as any, path);
 	};
 
 	return (

inertia/pages/links/create.tsx

@@ -1,10 +1,10 @@
 import { useForm } from '@inertiajs/react';
-import { route } from '@izzyjs/route/client';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import FormLink from '~/components/form/form_link';
 import useSearchParam from '~/hooks/use_search_param';
 import { isValidHttpUrl } from '~/lib/navigation';
+import { tuyau } from '~/lib/tuyau';
 import { Collection } from '~/types/app';
 
 export default function CreateLinkPage({
@@ -33,8 +33,8 @@ export default function CreateLinkPage({
 	);
 
 	const handleSubmit = () => {
-    const { method, url } = route('link.create');
-    submit(method, url);
+		const { method, path } = tuyau.$route('link.create');
+		submit(method.at(0) as any, path);
 	};
 
 	return (

inertia/pages/links/delete.tsx

@@ -1,7 +1,7 @@
 import { useForm } from '@inertiajs/react';
-import { route } from '@izzyjs/route/client';
 import { useTranslation } from 'react-i18next';
 import FormLink from '~/components/form/form_link';
+import { tuyau } from '~/lib/tuyau';
 import { LinkWithCollection } from '~/types/app';
 
 export default function DeleteLinkPage({ link }: { link: LinkWithCollection }) {
@@ -15,10 +15,10 @@ export default function DeleteLinkPage({ link }: { link: LinkWithCollection }) {
 	});
 
 	const handleSubmit = () => {
-    const { method, url } = route('link.delete', {
-      params: { id: link.id.toString() },
+		const { method, path } = tuyau.$route('link.delete', {
+			id: link.id.toString(),
 		});
-    submit(method, url);
+		submit(method.at(0) as any, path);
 	};
 
 	return (

inertia/pages/links/edit.tsx

@@ -1,9 +1,9 @@
 import { useForm } from '@inertiajs/react';
-import { route } from '@izzyjs/route/client';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import FormLink from '~/components/form/form_link';
 import { isValidHttpUrl } from '~/lib/navigation';
+import { tuyau } from '~/lib/tuyau';
 import { Collection, Link } from '~/types/app';
 
 export default function EditLinkPage({
@@ -39,10 +39,10 @@ export default function EditLinkPage({
 	}, [data, processing]);
 
 	const handleSubmit = () => {
-    const { method, url } = route('link.edit', {
-      params: { id: link.id.toString() },
+		const { method, path } = tuyau.$route('link.edit', {
+			id: link.id.toString(),
 		});
-    submit(method, url);
+		submit(method.at(0) as any, path);
 	};
 
 	return (

inertia/pages/login.tsx

@@ -1,12 +1,12 @@
 import styled from '@emotion/styled';
 import { Head, Link } from '@inertiajs/react';
-import { route } from '@izzyjs/route/client';
 import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FcGoogle } from 'react-icons/fc';
 import Button from '~/components/common/form/_button';
 import ContentLayout from '~/components/layouts/content_layout';
 import Quotes from '~/components/quotes';
+import { getPath } from '~/lib/navigation';
 
 const LoginContainer = styled.div({
 	width: '100%',
@@ -70,14 +70,14 @@ function LoginPage() {
 			<FormWrapper>
 				<h1>{t('login:title')}</h1>
 				<InformativeText>{t('login:informative-text')}</InformativeText>
-        <ButtonLink href={route('auth.google').url}>
+				<ButtonLink href={getPath('auth.google')}>
 					<FcGoogle size="1.5em" />{' '}
 					{t('login:continue-with', { provider: 'Google' })}
 				</ButtonLink>
 			</FormWrapper>
 			<AgreementText>
 				{t('login:accept-terms')}{' '}
-        <Link href={route('terms').url}>{t('common:terms')}</Link>
+				<Link href={getPath('terms')}>{t('common:terms')}</Link>
 			</AgreementText>
 		</LoginContainer>
 	);

inertia/pages/terms.tsx

@@ -1,8 +1,8 @@
 import { Link } from '@inertiajs/react';
-import { route } from '@izzyjs/route/client';
 import { ReactNode } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import LegalContentLayout from '~/components/layouts/legal_content_layout';
+import { getPath } from '~/lib/navigation';
 
 function TermsPage() {
 	const { t } = useTranslation('terms');
@@ -30,7 +30,7 @@ function TermsPage() {
 			<p>
 				<Trans
 					i18nKey="personal_data.collect.description"
-          components={{ a: <Link href={route('privacy').url} /> }}
+					components={{ a: <Link href={getPath('privacy')} /> }}
 				/>
 			</p>
 

inertia/types/app.d.ts

@@ -24,10 +24,9 @@ type UserWithRelationCount = CommonBase & {
 	fullname: string;
 	avatarUrl: string;
 	isAdmin: string;
-  count: {
-    link: number;
-    collection: number;
-  };
+	linksCount: number;
+	collectionsCount: number;
+	lastSeenAt: string;
 };
 
 type Link = CommonBase & {

inertia/types/tuyau.ts

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

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "my-links",
-  "version": "2.0.0",
+	"version": "2.2.1",
 	"type": "module",
 	"license": "UNLICENSED",
 	"scripts": {
@@ -8,7 +8,7 @@
 		"build": "node ace build",
 		"dev": "node ace serve --watch",
 		"test": "node ace test",
-    "lint": "eslint . --ext .ts,.tsx --report-unused-disable-directives --max-warnings 0",
+		"lint": "eslint . --report-unused-disable-directives --max-warnings 0",
 		"format": "prettier --write --parser typescript '**/*.{ts,tsx}'",
 		"typecheck": "tsc --noEmit",
 		"prepare": "husky",
@@ -33,70 +33,75 @@
 		"#tests/*": "./tests/*.js",
 		"#start/*": "./start/*.js",
 		"#config/*": "./config/*.js",
-    "#lib/*": "./app/lib/*.js"
+		"#lib/*": "./app/lib/*.js",
+		"#types/*": "./app/types/*.js",
+		"#adonisjs/*": "./.adonisjs/*.js"
 	},
 	"devDependencies": {
-    "@adonisjs/assembler": "^7.7.0",
-    "@adonisjs/eslint-config": "^1.3.0",
-    "@adonisjs/tsconfig": "^1.3.0",
-    "@emotion/babel-plugin": "^11.11.0",
-    "@faker-js/faker": "^8.4.1",
+		"@adonisjs/assembler": "^7.8.2",
+		"@adonisjs/eslint-config": "2.0.0-beta.6",
+		"@adonisjs/prettier-config": "^1.4.0",
+		"@adonisjs/tsconfig": "^1.4.0",
+		"@emotion/babel-plugin": "^11.12.0",
+		"@faker-js/faker": "^9.1.0",
 		"@japa/assert": "^3.0.0",
 		"@japa/plugin-adonisjs": "^3.0.1",
 		"@japa/runner": "^3.1.4",
-    "@swc/core": "^1.5.24",
+		"@swc/core": "^1.7.40",
 		"@types/luxon": "^3.4.2",
-    "@types/node": "^20.13.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@types/react-select": "^5.0.1",
+		"@types/node": "^20.14.10",
+		"@types/react": "^18.3.12",
+		"@types/react-dom": "^18.3.1",
 		"@types/react-toggle": "^4.0.5",
-    "@typescript-eslint/eslint-plugin": "^7.11.0",
-    "@vitejs/plugin-react": "^4.3.0",
-    "eslint": "^8.57.0",
-    "hot-hook": "^0.2.6",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.5",
-    "pino-pretty": "^11.1.0",
-    "prettier": "^3.3.0",
-    "release-it": "^17.3.0",
-    "ts-node": "^10.9.2",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.12"
+		"@typescript-eslint/eslint-plugin": "^8.11.0",
+		"@vitejs/plugin-react": "^4.3.3",
+		"eslint": "^9.13.0",
+		"hot-hook": "^0.3.1",
+		"husky": "^9.1.6",
+		"lint-staged": "^15.2.10",
+		"pino-pretty": "^11.3.0",
+		"prettier": "^3.3.3",
+		"release-it": "^17.10.0",
+		"ts-node-maintained": "^10.9.4",
+		"typescript": "~5.5.4",
+		"vite": "^5.4.10"
 	},
 	"dependencies": {
 		"@adonisjs/ally": "^5.0.2",
-    "@adonisjs/auth": "^9.2.1",
-    "@adonisjs/core": "^6.9.1",
+		"@adonisjs/auth": "^9.2.3",
+		"@adonisjs/core": "^6.14.1",
 		"@adonisjs/cors": "^2.2.1",
-    "@adonisjs/inertia": "^1.1.0",
-    "@adonisjs/lucid": "^20.6.0",
-    "@adonisjs/session": "^7.4.0",
+		"@adonisjs/inertia": "^1.2.3",
+		"@adonisjs/lucid": "^21.3.0",
+		"@adonisjs/session": "^7.5.0",
 		"@adonisjs/shield": "^8.1.1",
 		"@adonisjs/static": "^1.1.1",
 		"@adonisjs/vite": "^3.0.0",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@inertiajs/react": "^1.1.0",
-    "@izzyjs/route": "^1.1.0-0",
+		"@emotion/react": "11.12.0",
+		"@emotion/styled": "^11.13.0",
+		"@inertiajs/react": "^1.2.0",
+		"@tanstack/react-table": "^8.20.5",
+		"@tuyau/client": "^0.1.3",
+		"@tuyau/core": "^0.2.1",
+		"@tuyau/utils": "^0.0.4",
 		"@vinejs/vine": "^2.1.0",
 		"bentocache": "^1.0.0-beta.9",
-    "dayjs": "^1.11.11",
-    "edge.js": "^6.0.2",
+		"dayjs": "^1.11.13",
+		"edge.js": "^6.2.0",
 		"hex-rgb": "^5.0.0",
-    "i18next": "^23.11.5",
+		"i18next": "^23.16.4",
 		"knex": "^3.1.0",
-    "luxon": "^3.4.4",
+		"luxon": "^3.5.0",
 		"node-html-parser": "^6.1.13",
-    "pg": "^8.11.5",
+		"pg": "^8.13.1",
 		"react": "^18.3.1",
 		"react-dnd": "^16.0.1",
 		"react-dnd-html5-backend": "^16.0.1",
 		"react-dom": "^18.3.1",
-    "react-hotkeys-hook": "^4.5.0",
-    "react-i18next": "^14.1.2",
-    "react-icons": "^5.2.1",
-    "react-select": "^5.8.0",
+		"react-hotkeys-hook": "^4.5.1",
+		"react-i18next": "^15.1.0",
+		"react-icons": "^5.3.0",
+		"react-select": "^5.8.2",
 		"react-swipeable": "^7.0.1",
 		"react-toggle": "^4.1.3",
 		"reflect-metadata": "^0.2.2"
@@ -107,14 +112,11 @@
 			"./app/middleware/*.ts"
 		]
 	},
-  "eslintConfig": {
-    "extends": "@adonisjs/eslint-config/app"
-  },
 	"prettier": {
 		"trailingComma": "es5",
 		"semi": true,
 		"singleQuote": true,
-    "useTabs": false,
+		"useTabs": true,
 		"quoteProps": "as-needed",
 		"bracketSpacing": true,
 		"arrowParens": "always",

src/extensions.ts

@@ -1,18 +1,17 @@
+import { getRoute } from '#lib/tuyau';
+import { QueryParams } from '#types/query_params';
+import { RouteName, RouteParams } from '#types/tuyau';
 import { Response } from '@adonisjs/core/http';
-import { route } from '@izzyjs/route/client';
-import { RouteName } from '@izzyjs/route/types';
 
-type IzzyRouteOptions = {
-  params?: Record<string, any>; //Params<Name>;
-  qs?: Record<string, any>;
-  prefix?: string;
-};
+type RouteOptions = {
+	params?: RouteParams;
+} & QueryParams;
 
 declare module '@adonisjs/core/http' {
 	export interface Response {
 		redirectToNamedRoute: (
 			routeName: RouteName,
-      options?: IzzyRouteOptions
+			options?: RouteOptions
 		) => void;
 	}
 }
@@ -20,12 +19,7 @@ declare module '@adonisjs/core/http' {
 Response.macro(
 	'redirectToNamedRoute',
 	function (this: Response, routeName, options) {
-    // TODO: fix this
-    // @ts-ignore
-    const current = route(routeName, options);
-    this.redirect().toRoute(current.url, current.params, {
-      qs: current.qs,
-      disableRouteLookup: true,
-    });
+		const route = getRoute(routeName, options);
+		this.redirect().toRoute(route.path, route.params, options);
 	}
 );

start/kernel.ts

@@ -29,7 +29,6 @@ server.use([
 	() => import('@adonisjs/cors/cors_middleware'),
 	() => import('@adonisjs/vite/vite_middleware'),
 	() => import('@adonisjs/inertia/inertia_middleware'),
-  () => import('@izzyjs/route/izzy_middleware'),
 ]);
 
 /**
@@ -41,6 +40,8 @@ router.use([
 	() => import('@adonisjs/session/session_middleware'),
 	() => import('@adonisjs/shield/shield_middleware'),
 	() => import('@adonisjs/auth/initialize_auth_middleware'),
+	() => import('#middleware/silent_auth_middleware'),
+	() => import('#middleware/update_user_last_seen_middleware'),
 ]);
 
 /**

tests/bootstrap.ts

@@ -1,9 +1,8 @@
-import { assert } from '@japa/assert';
 import app from '@adonisjs/core/services/app';
-import type { Config } from '@japa/runner/types';
-import { pluginAdonisJS } from '@japa/plugin-adonisjs';
 import testUtils from '@adonisjs/core/services/test_utils';
-import { izzyRoutePlugin } from '@izzyjs/route/plugins/japa';
+import { assert } from '@japa/assert';
+import { pluginAdonisJS } from '@japa/plugin-adonisjs';
+import type { Config } from '@japa/runner/types';
 
 /**
  * This file is imported by the "bin/test.ts" entrypoint file
@@ -13,11 +12,7 @@ import { izzyRoutePlugin } from '@izzyjs/route/plugins/japa';
  * Configure Japa plugins in the plugins array.
  * Learn more - https://japa.dev/docs/runner-config#plugins-optional
  */
-export const plugins: Config['plugins'] = [
-  assert(),
-  pluginAdonisJS(app),
-  izzyRoutePlugin(),
-];
+export const plugins: Config['plugins'] = [assert(), pluginAdonisJS(app)];
 
 /**
  * Configure lifecycle function to run before and after all the