chore: release v3.1.3

.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

.release-it.json

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

.vscode/extensions.json

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

.vscode/settings.json

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

Dockerfile

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

Makefile

@@ -1,21 +1,28 @@
 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.
@@ -124,6 +125,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 +135,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

@@ -103,7 +103,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,9 +1,9 @@
-import CollectionsController from '#controllers/collections_controller';
-import LinksController from '#controllers/links_controller';
-import UsersController from '#controllers/users_controller';
-import User from '#models/user';
+import AuthController from '#auth/controllers/auth_controller';
+import CollectionsController from '#collections/controllers/collections_controller';
+import LinksController from '#links/controllers/links_controller';
+import User from '#user/models/user';
 import { inject } from '@adonisjs/core';
-import type { HttpContext } from '@adonisjs/core/http';
+import { HttpContext } from '@adonisjs/core/http';
 
 class UserWithRelationCountDto {
 	constructor(private user: User) {}
@@ -26,7 +26,7 @@ class UserWithRelationCountDto {
 @inject()
 export default class AdminController {
 	constructor(
-		protected usersController: UsersController,
+		protected usersController: AuthController,
 		protected linksController: LinksController,
 		protected collectionsController: CollectionsController
 	) {}

app/admin/routes/admin_routes.ts

@@ -1,7 +1,7 @@
 import { middleware } from '#start/kernel';
 import router from '@adonisjs/core/services/router';
 
-const AdminController = () => import('#controllers/admin_controller');
+const AdminController = () => import('#admin/controllers/admin_controller');
 
 /**
  * Routes for admin dashboard

app/admin/routes/routes.ts

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

app/auth/controllers/auth_controller.ts

@@ -1,10 +1,10 @@
-import User from '#models/user';
+import User from '#user/models/user';
 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 {
+export default class AuthController {
 	private redirectTo: RouteName = 'auth';
 
 	login({ inertia }: HttpContext) {

app/auth/routes/auth_routes.ts

@@ -1,6 +1,6 @@
 import { middleware } from '#start/kernel';
 import router from '@adonisjs/core/services/router';
-const UsersController = () => import('#controllers/users_controller');
+const AuthController = () => import('#auth/controllers/auth_controller');
 
 const ROUTES_PREFIX = '/auth';
 
@@ -9,9 +9,9 @@ const ROUTES_PREFIX = '/auth';
  */
 router
 	.group(() => {
-		router.get('/google', [UsersController, 'google']).as('auth');
+		router.get('/google', [AuthController, 'google']).as('auth');
 		router
-			.get('/callback', [UsersController, 'callbackAuth'])
+			.get('/callback', [AuthController, 'callbackAuth'])
 			.as('auth.callback');
 	})
 	.prefix(ROUTES_PREFIX);
@@ -21,7 +21,7 @@ router
  */
 router
 	.group(() => {
-		router.get('/logout', [UsersController, 'logout']).as('auth.logout');
+		router.get('/logout', [AuthController, 'logout']).as('auth.logout');
 	})
 	.middleware([middleware.auth()])
 	.prefix(ROUTES_PREFIX);

app/auth/routes/routes.ts

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

app/collections/controllers/collections_controller.ts

@@ -1,10 +1,8 @@
-import Collection from '#models/collection';
-import User from '#models/user';
-import {
-	createCollectionValidator,
-	deleteCollectionValidator,
-	updateCollectionValidator,
-} from '#validators/collection';
+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';
 

app/collections/models/collection.ts

@@ -1,9 +1,9 @@
-import AppBaseModel from '#models/app_base_model';
-import Link from '#models/link';
-import User from '#models/user';
+import { Visibility } from '#collections/enums/visibility';
+import AppBaseModel from '#core/models/app_base_model';
+import Link from '#links/models/link';
+import User from '#user/models/user';
 import { belongsTo, column, hasMany } from '@adonisjs/lucid/orm';
 import type { BelongsTo, HasMany } from '@adonisjs/lucid/types/relations';
-import { Visibility } from '#enums/visibility';
 
 export default class Collection extends AppBaseModel {
 	@column()
@@ -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,7 +1,7 @@
 import { middleware } from '#start/kernel';
 import router from '@adonisjs/core/services/router';
 const CollectionsController = () =>
-	import('#controllers/collections_controller');
+	import('#collections/controllers/collections_controller');
 
 router
 	.group(() => {

app/collections/routes/routes.ts

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

app/collections/validators/create_collection_validator.ts

@@ -0,0 +1,15 @@
+import { Visibility } from '#collections/enums/visibility';
+import vine, { SimpleMessagesProvider } from '@vinejs/vine';
+
+export const createCollectionValidator = vine.compile(
+	vine.object({
+		name: vine.string().trim().minLength(1).maxLength(254),
+		description: vine.string().trim().maxLength(254).nullable(),
+		visibility: vine.enum(Visibility),
+	})
+);
+
+createCollectionValidator.messagesProvider = new SimpleMessagesProvider({
+	name: 'Collection name is required',
+	'visibility.required': 'Collection visibiliy is required',
+});

app/collections/validators/delete_collection_validator.ts

@@ -0,0 +1,8 @@
+import { params } from '#core/validators/params_object';
+import vine from '@vinejs/vine';
+
+export const deleteCollectionValidator = vine.compile(
+	vine.object({
+		params,
+	})
+);

app/collections/validators/update_collection_validator.ts

@@ -0,0 +1,13 @@
+import { Visibility } from '#collections/enums/visibility';
+import { params } from '#core/validators/params_object';
+import vine from '@vinejs/vine';
+
+export const updateCollectionValidator = vine.compile(
+	vine.object({
+		name: vine.string().trim().minLength(1).maxLength(254),
+		description: vine.string().trim().maxLength(254).nullable(),
+		visibility: vine.enum(Visibility),
+
+		params,
+	})
+);

app/constants/session.ts

@@ -1,2 +0,0 @@
-export const PREFER_DARK_THEME = 'prefer_dark_theme';
-export const DARK_THEME_DEFAULT_VALUE = true;

app/controllers/apps_controller.ts

@@ -1,13 +0,0 @@
-import { PREFER_DARK_THEME } from '#constants/session';
-import { updateUserThemeValidator } from '#validators/user';
-import type { HttpContext } from '@adonisjs/core/http';
-
-export default class AppsController {
-	async updateUserTheme({ request, session, response }: HttpContext) {
-		const { preferDarkTheme } = await request.validateUsing(
-			updateUserThemeValidator
-		);
-		session.put(PREFER_DARK_THEME, preferDarkTheme);
-		return response.ok({ message: 'ok' });
-	}
-}

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/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/core/validators/params_object.ts

@@ -0,0 +1,5 @@
+import vine from '@vinejs/vine';
+
+export const params = vine.object({
+	id: vine.number(),
+});

app/favicons/controllers/favicons_controller.ts

@@ -0,0 +1,34 @@
+import { CacheService } from '#favicons/services/cache_service';
+import { FaviconService } from '#favicons/services/favicons_service';
+import { Favicon } from '#favicons/types/favicon_type';
+import { inject } from '@adonisjs/core';
+import type { HttpContext } from '@adonisjs/core/http';
+
+@inject()
+export default class FaviconsController {
+	private faviconService: FaviconService;
+	private cacheService: CacheService;
+
+	constructor(faviconService: FaviconService, cacheService: CacheService) {
+		this.faviconService = faviconService;
+		this.cacheService = cacheService;
+	}
+
+	async index(ctx: HttpContext) {
+		const url = ctx.request.qs()?.url;
+		if (!url) {
+			throw new Error('Missing URL');
+		}
+
+		const favicon = await this.cacheService.getOrSetFavicon(url, () =>
+			this.faviconService.getFavicon(url)
+		);
+		return this.sendImage(ctx, favicon);
+	}
+
+	private sendImage(ctx: HttpContext, { buffer, type, size }: Favicon) {
+		ctx.response.header('Content-Type', type);
+		ctx.response.header('Content-Length', size.toString());
+		ctx.response.send(buffer, true);
+	}
+}

app/favicons/routes/favicons_routes.ts

@@ -1,5 +1,6 @@
 import router from '@adonisjs/core/services/router';
-const FaviconsController = () => import('#controllers/favicons_controller');
+const FaviconsController = () =>
+	import('#favicons/controllers/favicons_controller');
 
 /**
  * Favicon routes

app/favicons/routes/routes.ts

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

app/favicons/services/cache_service.ts

@@ -0,0 +1,17 @@
+import { cache } from '#core/lib/cache';
+import { Favicon } from '#favicons/types/favicon_type';
+
+export class CacheService {
+	private cacheNs = cache.namespace('favicon');
+
+	async getOrSetFavicon(
+		url: string,
+		factory: () => Promise<Favicon>
+	): Promise<Favicon> {
+		return this.cacheNs.getOrSet({
+			key: url,
+			ttl: '1h',
+			factory,
+		});
+	}
+}

app/favicons/services/favicons_service.ts

@@ -1,17 +1,9 @@
-import FaviconNotFoundException from '#exceptions/favicon_not_found_exception';
-import { cache } from '#lib/cache';
-import type { HttpContext } from '@adonisjs/core/http';
+import FaviconNotFoundException from '#favicons/exceptions/favicon_not_found_exception';
+import { Favicon } from '#favicons/types/favicon_type';
 import logger from '@adonisjs/core/services/logger';
 import { parse } from 'node-html-parser';
 
-interface Favicon {
-	buffer: Buffer;
-	url: string;
-	type: string;
-	size: number;
-}
-
-export default class FaviconsController {
+export class FaviconService {
 	private userAgent =
 		'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36 Edg/119.0.0.0';
 	private relList = [
@@ -24,27 +16,11 @@ export default class FaviconsController {
 		'fluid-icon',
 	];
 
-	async index(ctx: HttpContext) {
-		const url = ctx.request.qs()?.url;
-		if (!url) {
-			throw new Error('Missing URL');
-		}
-
-		const cacheNs = cache.namespace('favicon');
-		const favicon = await cacheNs.getOrSet({
-			key: url,
-			ttl: '1h',
-			factory: () => this.tryGetFavicon(url),
-		});
-		return this.sendImage(ctx, favicon);
-	}
-
-	private async tryGetFavicon(url: string): Promise<Favicon> {
-		const faviconUrl = this.buildFaviconUrl(url, '/favicon.ico');
+	async getFavicon(url: string): Promise<Favicon> {
 		try {
-			return await this.fetchFavicon(faviconUrl);
+			return await this.fetchFavicon(this.buildFaviconUrl(url, '/favicon.ico'));
 		} catch {
-			logger.debug(`Unable to retrieve favicon from ${faviconUrl}`);
+			logger.debug(`Unable to retrieve favicon from ${url}/favicon.ico`);
 		}
 
 		const documentText = await this.fetchDocumentText(url);
@@ -54,15 +30,7 @@ export default class FaviconsController {
 			throw new FaviconNotFoundException(`No favicon path found in ${url}`);
 		}
 
-		if (faviconPath.startsWith('http')) {
-			try {
-				return await this.fetchFavicon(faviconPath);
-			} catch {
-				logger.debug(`Unable to retrieve favicon from ${faviconPath}`);
-			}
-		}
-
-		return this.fetchFaviconFromPath(url, faviconPath);
+		return await this.fetchFaviconFromPath(url, faviconPath);
 	}
 
 	private async fetchFavicon(url: string): Promise<Favicon> {
@@ -127,7 +95,9 @@ export default class FaviconsController {
 
 		const basePath = this.urlWithoutSearchParams(base);
 		const baseUrl = basePath.endsWith('/') ? basePath.slice(0, -1) : basePath;
-		return `${baseUrl}/${path}`;
+		const finalUrl = `${baseUrl}/${path}`;
+		logger.debug(`Built favicon URL: ${finalUrl}`);
+		return finalUrl;
 	}
 
 	private urlWithoutSearchParams(url: string): string {
@@ -151,10 +121,4 @@ export default class FaviconsController {
 		const headers = new Headers({ 'User-Agent': this.userAgent });
 		return fetch(url, { headers });
 	}
-
-	private sendImage(ctx: HttpContext, { buffer, type, size }: Favicon) {
-		ctx.response.header('Content-Type', type);
-		ctx.response.header('Content-Length', size.toString());
-		ctx.response.send(buffer, true);
-	}
 }

app/favicons/types/favicon_type.ts

@@ -0,0 +1,6 @@
+export type Favicon = {
+	buffer: Buffer;
+	url: string;
+	type: string;
+	size: number;
+};

app/home/routes/home_routes.ts

@@ -0,0 +1,3 @@
+import router from '@adonisjs/core/services/router';
+
+router.on('/').renderInertia('home').as('home');

app/home/routes/routes.ts

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

app/legal/routes/legal_routes.ts

@@ -0,0 +1,4 @@
+import router from '@adonisjs/core/services/router';
+
+router.on('/terms').renderInertia('terms').as('terms');
+router.on('/privacy').renderInertia('privacy').as('privacy');

app/legal/routes/routes.ts

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

app/links/controllers/links_controller.ts

@@ -1,13 +1,11 @@
-import CollectionsController from '#controllers/collections_controller';
-import Link from '#models/link';
-import {
-	createLinkValidator,
-	deleteLinkValidator,
-	updateLinkFavoriteStatusValidator,
-	updateLinkValidator,
-} from '#validators/link';
+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 type { HttpContext } from '@adonisjs/core/http';
+import { HttpContext } from '@adonisjs/core/http';
 import db from '@adonisjs/lucid/services/db';
 
 @inject()

app/links/models/link.ts

@@ -1,6 +1,6 @@
-import AppBaseModel from '#models/app_base_model';
-import Collection from '#models/collection';
-import User from '#models/user';
+import Collection from '#collections/models/collection';
+import AppBaseModel from '#core/models/app_base_model';
+import User from '#user/models/user';
 import { belongsTo, column } from '@adonisjs/lucid/orm';
 import type { BelongsTo } from '@adonisjs/lucid/types/relations';
 

app/links/routes/links_routes.ts

@@ -1,6 +1,6 @@
 import { middleware } from '#start/kernel';
 import router from '@adonisjs/core/services/router';
-const LinksController = () => import('#controllers/links_controller');
+const LinksController = () => import('#links/controllers/links_controller');
 
 /**
  * Routes for authenticated users

app/links/routes/routes.ts

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

app/links/validators/create_link_validator.ts

@@ -0,0 +1,11 @@
+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(),
+	})
+);

app/links/validators/delete_link_validator.ts

@@ -0,0 +1,8 @@
+import { params } from '#core/validators/params_object';
+import vine from '@vinejs/vine';
+
+export const deleteLinkValidator = vine.compile(
+	vine.object({
+		params,
+	})
+);

app/links/validators/update_favorite_link_validator.ts

@@ -0,0 +1,10 @@
+import { params } from '#core/validators/params_object';
+import vine from '@vinejs/vine';
+
+export const updateLinkFavoriteStatusValidator = vine.compile(
+	vine.object({
+		favorite: vine.boolean(),
+
+		params,
+	})
+);

app/links/validators/update_link_validator.ts

@@ -0,0 +1,14 @@
+import { params } from '#core/validators/params_object';
+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(),
+
+		params,
+	})
+);

app/search/controllers/search_controller.ts

@@ -1,7 +1,7 @@
 import type { HttpContext } from '@adonisjs/core/http';
 import db from '@adonisjs/lucid/services/db';
 
-export default class SearchesController {
+export default class SearchController {
 	async search({ request, auth }: HttpContext) {
 		const term = request.qs()?.term;
 		if (!term) {

app/search/routes/routes.ts

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

app/search/routes/search_routes.ts

@@ -1,7 +1,8 @@
 import { middleware } from '#start/kernel';
 import router from '@adonisjs/core/services/router';
 
-const SearchesController = () => import('#controllers/searches_controller');
+const SearchesController = () =>
+	import('#search/controllers/search_controller');
 
 /**
  * Search routes

app/shared_collections/controllers/shared_collections_controller.ts

@@ -1,9 +1,9 @@
-import { Visibility } from '#enums/visibility';
-import Collection from '#models/collection';
-import Link from '#models/link';
-import User from '#models/user';
-import { getSharedCollectionValidator } from '#validators/shared_collection';
+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 type { HttpContext } from '@adonisjs/core/http';
+import { getSharedCollectionValidator } from '../validators/shared_collection.js';
 
 class LinkWithoutFavoriteDto {
 	constructor(private link: Link) {}

app/shared_collections/routes/routes.ts

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

app/shared_collections/routes/shared_collections_routes.ts

@@ -1,6 +1,6 @@
 import router from '@adonisjs/core/services/router';
 
 const SharedCollectionsController = () =>
-	import('#controllers/shared_collections_controller');
+	import('#shared_collections/controllers/shared_collections_controller');
 
 router.get('/shared/:id', [SharedCollectionsController, 'index']).as('shared');

app/shared_collections/validators/shared_collection.ts

@@ -1,9 +1,6 @@
+import { params } from '#core/validators/params_object';
 import vine from '@vinejs/vine';
 
-const params = vine.object({
-	id: vine.number(),
-});
-
 export const getSharedCollectionValidator = vine.compile(
 	vine.object({
 		params,

app/user/constants/theme.ts

@@ -0,0 +1,3 @@
+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/theme_controller.ts

@@ -0,0 +1,11 @@
+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 { theme } = await request.validateUsing(updateThemeValidator);
+		session.put(KEY_USER_THEME, theme);
+		return response.ok({ message: 'ok' });
+	}
+}

app/user/models/user.ts

@@ -1,9 +1,9 @@
-import Collection from '#models/collection';
-import Link from '#models/link';
+import Collection from '#collections/models/collection';
+import AppBaseModel from '#core/models/app_base_model';
+import Link from '#links/models/link';
 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 {

app/user/routes/routes.ts

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

app/user/routes/user_theme_route.ts

@@ -0,0 +1,5 @@
+import router from '@adonisjs/core/services/router';
+
+const ThemeController = () => import('#user/controllers/theme_controller');
+
+router.post('/user/theme', [ThemeController, 'index']).as('user.theme');

app/user/validators/update_theme_validator.ts

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

app/validators/collection.ts

@@ -1,37 +0,0 @@
-import { Visibility } from '#enums/visibility';
-import vine, { SimpleMessagesProvider } from '@vinejs/vine';
-
-const params = vine.object({
-	id: vine.number(),
-});
-
-export const createCollectionValidator = vine.compile(
-	vine.object({
-		name: vine.string().trim().minLength(1).maxLength(254),
-		description: vine.string().trim().maxLength(254).nullable(),
-		visibility: vine.enum(Visibility),
-		nextId: vine.number().optional(),
-	})
-);
-
-export const updateCollectionValidator = vine.compile(
-	vine.object({
-		name: vine.string().trim().minLength(1).maxLength(254),
-		description: vine.string().trim().maxLength(254).nullable(),
-		visibility: vine.enum(Visibility),
-		nextId: vine.number().optional(),
-
-		params,
-	})
-);
-
-export const deleteCollectionValidator = vine.compile(
-	vine.object({
-		params,
-	})
-);
-
-createCollectionValidator.messagesProvider = new SimpleMessagesProvider({
-	name: 'Collection name is required',
-	'visibility.required': 'Collection visibiliy is required',
-});

app/validators/link.ts

@@ -1,43 +0,0 @@
-import vine from '@vinejs/vine';
-
-const params = vine.object({
-	id: vine.number(),
-});
-
-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(),
-	})
-);
-
-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(),
-
-		params,
-	})
-);
-
-export const deleteLinkValidator = vine.compile(
-	vine.object({
-		params,
-	})
-);
-
-export const updateLinkFavoriteStatusValidator = vine.compile(
-	vine.object({
-		favorite: vine.boolean(),
-
-		params: vine.object({
-			id: vine.number(),
-		}),
-	})
-);

app/validators/user.ts

@@ -1,7 +0,0 @@
-import vine from '@vinejs/vine';
-
-export const updateUserThemeValidator = vine.compile(
-	vine.object({
-		preferDarkTheme: vine.boolean(),
-	})
-);

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

@@ -1,6 +1,6 @@
 import { defineConfig } from '@adonisjs/auth';
-import { InferAuthEvents, Authenticators } from '@adonisjs/auth/types';
 import { sessionGuard, sessionUserProvider } from '@adonisjs/auth/session';
+import { Authenticators, InferAuthEvents } from '@adonisjs/auth/types';
 
 const authConfig = defineConfig({
 	default: 'web',
@@ -8,7 +8,7 @@ const authConfig = defineConfig({
 		web: sessionGuard({
 			useRememberMeTokens: false,
 			provider: sessionUserProvider({
-				model: () => import('#models/user'),
+				model: () => import('#user/models/user'),
 			}),
 		}),
 	},

config/inertia.ts

@@ -1,7 +1,6 @@
-import {
-	DARK_THEME_DEFAULT_VALUE,
-	PREFER_DARK_THEME,
-} from '#constants/session';
+import { isSSREnableForPage } from '#config/ssr';
+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 +14,9 @@ export default defineConfig({
 	 */
 	sharedData: {
 		errors: (ctx) => ctx.session?.flashMessages.get('errors'),
-		preferDarkTheme: (ctx) =>
-			ctx.session?.get(PREFER_DARK_THEME, DARK_THEME_DEFAULT_VALUE),
+		user: (ctx) => ({
+			theme: ctx.session?.get(KEY_USER_THEME, DEFAULT_USER_THEME),
+		}),
 		auth: async (ctx) => {
 			await ctx.auth?.check();
 			return {
@@ -32,5 +32,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,12 @@
+const PROJECT_NAME = 'MyLinks';
+const PROJECT_DESCRIPTION =
+	'Another bookmark manager that lets you manage and share your favorite links in an intuitive interface';
+const PROJECT_URL = 'https://www.mylinks.app';
+const APP_COLOR = '#f0eef6';
+
+export default {
+	name: PROJECT_NAME,
+	description: PROJECT_DESCRIPTION,
+	url: PROJECT_URL,
+	color: APP_COLOR,
+};

config/ssr.ts

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

database/migrations/1714253983443_create_collections_table.ts

@@ -1,5 +1,5 @@
+import { Visibility } from '#collections/enums/visibility';
 import { defaultTableFields } from '#database/default_table_fields';
-import { Visibility } from '#enums/visibility';
 import { BaseSchema } from '@adonisjs/lucid/schema';
 
 export default class CreateCollectionTable extends BaseSchema {

database/migrations/1737478982886_drop_next_id_collections_table.ts

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

database/seeders/collection_seeder.ts

@@ -1,9 +1,11 @@
-import { Visibility } from '#enums/visibility';
-import Collection from '#models/collection';
-import User from '#models/user';
+import { Visibility } from '#collections/enums/visibility';
+import Collection from '#collections/models/collection';
+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

@@ -1,10 +1,12 @@
+import Collection from '#collections/models/collection';
 import { getUserIds } from '#database/seeders/collection_seeder';
-import Collection from '#models/collection';
-import Link from '#models/link';
-import User from '#models/user';
+import Link from '#links/models/link';
+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

@@ -1,24 +1,29 @@
-import User from '#models/user';
+import User from '#user/models/user';
 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,9 @@
 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 '../i18n/index';
 
 const appName = import.meta.env.VITE_APP_NAME || 'MyLinks';
@@ -20,6 +21,13 @@ createInertiaApp({
 	},
 
 	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/components/admin/users/users_table.tsx

@@ -8,7 +8,7 @@ import {
 } from '@mantine/core';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { useState } from 'react';
+import { ChangeEvent, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TbSearch } from 'react-icons/tb';
 import { Th } from '~/components/admin/users/th';
@@ -25,6 +25,11 @@ export type UserWithCounts = User & {
 };
 export type UsersWithCounts = UserWithCounts[];
 
+export type Columns = keyof UserWithCounts;
+
+const DEFAULT_SORT_BY: Columns = 'lastSeenAt';
+const DEFAULT_SORT_DIRECTION = true;
+
 export interface UsersTableProps {
 	users: UsersWithCounts;
 	totalCollections: number;
@@ -37,10 +42,19 @@ export function UsersTable({
 	totalLinks,
 }: UsersTableProps) {
 	const { t } = useTranslation();
-	const [search, setSearch] = useState('');
-	const [sortedData, setSortedData] = useState(users);
-	const [sortBy, setSortBy] = useState<keyof UserWithCounts | null>(null);
-	const [reverseSortDirection, setReverseSortDirection] = useState(false);
+
+	const [search, setSearch] = useState<string>('');
+	const [sortBy, setSortBy] = useState<Columns | null>(DEFAULT_SORT_BY);
+	const [reverseSortDirection, setReverseSortDirection] = useState(
+		DEFAULT_SORT_DIRECTION
+	);
+	const [sortedData, setSortedData] = useState(() =>
+		sortData(users, {
+			sortBy: sortBy,
+			reversed: reverseSortDirection,
+			search: '',
+		})
+	);
 
 	const setSorting = (field: keyof UserWithCounts) => {
 		const reversed = field === sortBy ? !reverseSortDirection : false;
@@ -49,7 +63,7 @@ export function UsersTable({
 		setSortedData(sortData(users, { sortBy: field, reversed, search }));
 	};
 
-	const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+	const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {
 		const { value } = event.currentTarget;
 		setSearch(value);
 		setSortedData(
@@ -83,7 +97,7 @@ export function UsersTable({
 	return (
 		<ScrollArea>
 			<TextInput
-				placeholder="Search by any field"
+				placeholder={`Search by any field (${users.length} users)`}
 				mb="md"
 				leftSection={<TbSearch style={{ width: rem(16), height: rem(16) }} />}
 				value={search}

inertia/components/common/theme_switcher.tsx

@@ -1,13 +1,22 @@
 import { ActionIcon, useMantineColorScheme } from '@mantine/core';
 import { TbMoonStars, TbSun } from 'react-icons/tb';
+import { makeRequest } from '~/lib/request';
 
 export function MantineThemeSwitcher() {
 	const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+	const handleThemeChange = () => {
+		toggleColorScheme();
+		makeRequest({
+			url: '/user/theme',
+			method: 'POST',
+			body: { theme: colorScheme === 'dark' ? 'light' : 'dark' },
+		});
+	};
 	return (
 		<ActionIcon
 			variant="light"
 			aria-label="Toggle color scheme"
-			onClick={() => toggleColorScheme()}
+			onClick={handleThemeChange}
 			size="lg"
 		>
 			{colorScheme === 'dark' ? <TbSun /> : <TbMoonStars />}

inertia/components/dashboard/collection/item/collection_item.module.css

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

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

@@ -24,8 +24,6 @@ export default function CollectionItem({
 		}
 	}, [collection.id, activeCollection?.id]);
 
-	const linksCount = collection?.links.length ?? 0;
-	const showLinks = linksCount > 0;
 	return (
 		<Link
 			className={classes.link}
@@ -33,16 +31,12 @@ export default function CollectionItem({
 			href={appendCollectionId(route('dashboard').path, collection.id)}
 			key={collection.id}
 			ref={itemRef}
+			title={collection.name}
 		>
 			<FolderIcon className={classes.linkIcon} />
-			<Text lineClamp={1} maw={showLinks ? '160px' : '200px'}>
+			<Text lineClamp={1} maw={'200px'} style={{ wordBreak: 'break-all' }}>
 				{collection.name}
 			</Text>
-			{showLinks && (
-				<Text c="var(--mantine-color-gray-5)" ml="xs">
-					— {linksCount}
-				</Text>
-			)}
 		</Link>
 	);
 }

inertia/components/dashboard/collection/list/collection_list.module.css

@@ -14,8 +14,6 @@
 }
 
 .collectionList {
-	padding: 1px;
-	padding-right: 5px;
 	display: flex;
 	flex: 1;
 	gap: 0.35em;

inertia/components/dashboard/dashboard_header.tsx

@@ -1,12 +1,11 @@
-import { Visibility } from '#enums/visibility';
 import { Link } from '@inertiajs/react';
 import { route } from '@izzyjs/route/client';
 import {
 	ActionIcon,
 	AppShell,
 	Badge,
+	Box,
 	Burger,
-	Flex,
 	Group,
 	Menu,
 	Text,
@@ -19,6 +18,7 @@ import { IoTrashOutline } from 'react-icons/io5';
 import { ShareCollection } from '~/components/share/share_collection';
 import { appendCollectionId } from '~/lib/navigation';
 import { useActiveCollection } from '~/stores/collection_store';
+import { Visibility } from '~/types/app';
 
 interface DashboardHeaderProps {
 	navbar: {
@@ -35,15 +35,15 @@ export function DashboardHeader({ navbar, aside }: DashboardHeaderProps) {
 	const { activeCollection } = useActiveCollection();
 	return (
 		<AppShell.Header style={{ display: 'flex', alignItems: 'center' }}>
-			<Group justify="space-between" px="md" flex={1}>
-				<Group h="100%">
+			<Group justify="space-between" px="md" flex={1} wrap="nowrap">
+				<Group h="100%" wrap="nowrap">
 					<Burger
 						opened={navbar.opened}
 						onClick={navbar.toggle}
 						hiddenFrom="sm"
 						size="sm"
 					/>
-					<Flex direction="column">
+					<Box>
 						<Text lineClamp={1}>
 							{activeCollection?.name}{' '}
 							{activeCollection?.visibility === Visibility.PUBLIC && (
@@ -55,9 +55,9 @@ export function DashboardHeader({ navbar, aside }: DashboardHeaderProps) {
 								{activeCollection.description}
 							</Text>
 						)}
-					</Flex>
+					</Box>
 				</Group>
-				<Group>
+				<Group wrap="nowrap">
 					<ShareCollection />
 
 					<Menu withinPortal shadow="md" width={225}>

inertia/components/dashboard/favorite/favorite_list.module.css

@@ -1,28 +0,0 @@
-.sideMenu {
-	height: 100%;
-	width: 100%;
-	display: flex;
-	gap: 0.35em;
-	flex-direction: column;
-}
-
-.listContainer {
-	height: 100%;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-}
-
-.collectionList {
-	padding: 1px;
-	padding-right: 5px;
-	display: flex;
-	flex: 1;
-	gap: 0.35em;
-	flex-direction: column;
-	overflow: auto;
-}
-
-.noFavorite {
-	text-align: center;
-}

inertia/components/dashboard/favorite/favorite_list.tsx

@@ -1,8 +1,7 @@
-import { Box, Group, ScrollArea, Stack, Text } from '@mantine/core';
+import { Flex, Group, Stack, Text } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { FavoriteItem } from '~/components/dashboard/favorite/item/favorite_item';
 import { useFavorites } from '~/stores/collection_store';
-import styles from './favorite_list.module.css';
 
 export function FavoriteList() {
 	const { t } = useTranslation('common');
@@ -19,21 +18,15 @@ export function FavoriteList() {
 	}
 
 	return (
-		<Box className={styles.sideMenu}>
-			<Box className={styles.listContainer}>
-				<div style={{ display: 'flex', flexDirection: 'column' }}>
-					<Text c="dimmed" mt="xs" ml="md" mb={4}>
-						{t('favorite')} • {favorites.length}
-					</Text>
-					<ScrollArea className={styles.collectionList}>
-						<Stack gap={4}>
-							{favorites.map((link) => (
-								<FavoriteItem link={link} key={link.id} />
-							))}
-						</Stack>
-					</ScrollArea>
-				</div>
-			</Box>
-		</Box>
+		<Flex direction="column">
+			<Text c="dimmed" mt="xs" ml="md" mb={4}>
+				{t('favorite')} • {favorites.length}
+			</Text>
+			<Stack gap={4}>
+				{favorites.map((link) => (
+					<FavoriteItem link={link} key={link.id} />
+				))}
+			</Stack>
+		</Flex>
 	);
 }

inertia/components/dashboard/favorite/item/favorite_item.module.css

@@ -2,43 +2,11 @@
 	user-select: none;
 	cursor: pointer;
 	width: 100%;
-	background-color: light-dark(var(--mantine-color-gray-1), rgb(50, 58, 71));
+	background-color: light-dark(var(--mantine-color-white), rgb(50, 58, 71));
 	padding: 0.25em 0.5em !important;
-	border-radius: var(--border-radius);
 	border: 1px solid transparent;
 }
 
 .linkWrapper:hover {
 	border: 1px solid var(--mantine-color-blue-4);
 }
-
-.linkName {
-	width: 100%;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-}
-
-.linkDescription {
-	margin-top: 0.5em;
-	font-size: 0.8em;
-	word-wrap: break-word;
-}
-
-.linkUrl {
-	width: 100%;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-	font-size: 0.8em;
-	transition: opacity 0.3s;
-}
-
-.linkWrapper:hover .linkUrlPathname {
-	opacity: 1;
-}
-
-.linkUrlPathname {
-	opacity: 0;
-	transition: opacity 0.3s;
-}

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

@@ -1,4 +1,4 @@
-import { Card, Group, Text } from '@mantine/core';
+import { Card, Flex, Group, Text } from '@mantine/core';
 import { ExternalLinkStyled } from '~/components/common/external_link_styled';
 import LinkFavicon from '~/components/dashboard/link/item/favicon/link_favicon';
 import LinkControls from '~/components/dashboard/link/item/link_controls';
@@ -6,18 +6,26 @@ import { LinkWithCollection } from '~/types/app';
 import styles from './favorite_item.module.css';
 
 export const FavoriteItem = ({ link }: { link: LinkWithCollection }) => (
-	<Card className={styles.linkWrapper} radius="sm" withBorder>
-		<Group justify="center" gap="xs">
-			<LinkFavicon size={32} url={link.url} />
-			<ExternalLinkStyled href={link.url} style={{ flex: 1 }}>
-				<div className={styles.linkName}>
-					<Text lineClamp={1}>{link.name} </Text>
-				</div>
-				<Text c="gray" size="xs" mb={4} lineClamp={1}>
-					{link.collection.name}
-				</Text>
-			</ExternalLinkStyled>
-			<LinkControls link={link} showGoToCollection />
-		</Group>
-	</Card>
+	<ExternalLinkStyled href={link.url} title={link.url}>
+		<Card className={styles.linkWrapper}>
+			<Group gap="xs" wrap="nowrap">
+				<LinkFavicon url={link.url} />
+				<Flex style={{ width: '100%' }} direction="column">
+					<Text lineClamp={1} c="blue">
+						{link.name}
+					</Text>
+					<Text
+						c="gray"
+						size="xs"
+						mb={4}
+						lineClamp={1}
+						style={{ wordBreak: 'break-all' }}
+					>
+						{link.collection.name}
+					</Text>
+				</Flex>
+				<LinkControls link={link} showGoToCollection />
+			</Group>
+		</Card>
+	</ExternalLinkStyled>
 );

inertia/components/dashboard/link/item/link.module.css

@@ -2,9 +2,8 @@
 	user-select: none;
 	cursor: pointer;
 	width: 100%;
-	background-color: light-dark(var(--mantine-color-gray-1), rgb(50, 58, 71));
-	padding: 0.75em 1em;
-	border-radius: var(--border-radius);
+	background-color: light-dark(var(--mantine-color-white), rgb(50, 58, 71));
+	padding: 0.5em 0.75em !important;
 	border: 1px solid transparent;
 }
 
@@ -12,32 +11,8 @@
 	border: 1px solid var(--mantine-color-blue-4);
 }
 
-.linkHeader {
-	display: flex;
-	gap: 1em;
-	align-items: center;
-}
-
-.linkName {
-	width: 100%;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-}
-
-.linkDescription {
-	margin-top: 0.5em;
-	font-size: 0.8em;
-	word-wrap: break-word;
-}
-
 .linkUrl {
-	width: 100%;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-	font-size: 0.8em;
-	transition: opacity 0.3s;
+	transition: opacity 0.15s;
 }
 
 .linkWrapper:hover .linkUrlPathname {
@@ -46,5 +21,5 @@
 
 .linkUrlPathname {
 	opacity: 0;
-	transition: opacity 0.3s;
+	transition: opacity 0.15s;
 }