chore: release v3.1.2

.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": [
+    "before:init": ["pnpm lint", "pnpm run typecheck"]
-      "pnpm format",
-      "pnpm lint"
-    ]
   },
   "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

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).

app/collections/models/collection.ts

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

app/collections/validators/create_collection_validator.ts

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

app/collections/validators/update_collection_validator.ts

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

app/core/constants/paths.ts

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

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

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

app/user/controllers/theme_controller.ts

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

app/user/validators/update_theme_validator.ts

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

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

@@ -1,7 +1,6 @@
-import {
+import { isSSREnableForPage } from '#config/ssr';
-	PREFER_DARK_THEME,
+import { DEFAULT_USER_THEME, KEY_USER_THEME } from '#user/constants/theme';
-	DARK_THEME_DEFAULT_VALUE,
+import logger from '@adonisjs/core/services/logger';
-} from '#user/constants/theme';
 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) =>
+		user: (ctx) => ({
-			ctx.session?.get(PREFER_DARK_THEME, DARK_THEME_DEFAULT_VALUE),
+			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/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

@@ -34,7 +34,6 @@ function createRandomCollection(userIds: User['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,
 	};
 }

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

@@ -40,12 +40,8 @@ export default function CollectionItem({
 				{collection.name}
 			</Text>
 			{showLinks && (
-				<Text
+				<Text style={{ whiteSpace: 'nowrap' }} c="dimmed" ml="sm">
-					style={{ whiteSpace: 'nowrap' }}
+					— {linksCount}
-					c="var(--mantine-color-gray-5)"
-					ml={4}
-				>
-					— {linksCount}0
 				</Text>
 			)}
 		</Link>

inertia/components/dashboard/dashboard_header.tsx

@@ -35,7 +35,7 @@ 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 justify="space-between" px="md" flex={1} wrap="nowrap">
 				<Group h="100%" wrap="nowrap">
 					<Burger
 						opened={navbar.opened}
@@ -57,7 +57,7 @@ export function DashboardHeader({ navbar, aside }: DashboardHeaderProps) {
 						)}
 					</Box>
 				</Group>
-				<Group>
+				<Group wrap="nowrap">
 					<ShareCollection />
 
 					<Menu withinPortal shadow="md" width={225}>

inertia/components/footer/footer.tsx

@@ -13,15 +13,16 @@ export function MantineFooter() {
 	const { t } = useTranslation('common');
 
 	const links = [
-		{ link: route('privacy').url, label: t('privacy') },
+		{ link: route('privacy').path, label: t('privacy'), external: false },
-		{ link: route('terms').url, label: t('terms') },
+		{ link: route('terms').path, label: t('terms'), external: false },
-		{ link: PATHS.EXTENSION, label: 'Extension' },
+		{ link: PATHS.EXTENSION, label: 'Extension', external: true },
 	];
 
 	const items = links.map((link) => (
 		<Anchor
 			c="dimmed"
-			component={Link}
+			// @ts-expect-error
+			component={link.external ? ExternalLink : Link}
 			key={link.label}
 			href={link.link}
 			size="sm"

inertia/components/form/form_collection.tsx

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

inertia/components/navbar/navbar.tsx

@@ -17,7 +17,6 @@ import { useTranslation } from 'react-i18next';
 import ExternalLink from '~/components/common/external_link';
 import { MantineLanguageSwitcher } from '~/components/common/language_switcher';
 import { MantineThemeSwitcher } from '~/components/common/theme_switcher';
-import { MantineUserCard } from '~/components/common/user_card';
 import useUser from '~/hooks/use_user';
 import classes from './mobile.module.css';
 
@@ -31,7 +30,9 @@ export default function Navbar() {
 		<Box pb={40}>
 			<header className={classes.header}>
 				<Group justify="space-between" h="100%">
-					<Image src="/logo-light.png" h={35} alt="MyLinks's logo" />
+					<Link href="/">
+						<Image src="/logo.png" h={35} alt="MyLinks's logo" />
+					</Link>
 
 					<Group h="100%" gap={0} visibleFrom="sm">
 						<Link href="/" className={classes.link}>
@@ -102,11 +103,13 @@ export default function Navbar() {
 
 					<Group justify="center" grow pb="xl" px="md">
 						{!isAuthenticated ? (
-							<Button component="a" href={route('auth').path}>
+							<Button component="a" href={route('auth').path} w={110}>
 								{t('login')}
 							</Button>
 						) : (
-							<MantineUserCard />
+							<Button component={Link} href={route('dashboard').path} w={110}>
+								Dashboard
+							</Button>
 						)}
 					</Group>
 				</ScrollArea>

inertia/pages/collections/edit.tsx

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

inertia/stores/collection_store.ts

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

inertia/tsconfig.json

@@ -6,8 +6,9 @@
 		"jsx": "react-jsx",
 		"resolveJsonModule": true,
 		"paths": {
-			"~/*": ["./*"]
+			"~/*": ["./*"],
+			"config-ssr": ["../config/ssr"]
 		}
 	},
-	"include": ["./**/*.ts", "./**/*.tsx"]
+	"include": ["./**/*.ts", "./**/*.tsx", "../config/ssr.ts"]
 }

inertia/types/app.ts

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

package.json

@@ -1,18 +1,20 @@
 {
 	"name": "my-links",
-	"version": "3.0.2",
+	"version": "3.1.2",
 	"type": "module",
 	"license": "GPL-3.0-only",
 	"scripts": {
 		"start": "node bin/server.js",
 		"build": "node ace build",
-		"dev": "node ace serve --watch",
+		"dev": "node ace serve --hmr",
 		"test": "node ace test",
 		"lint": "eslint . --report-unused-disable-directives --max-warnings 0",
 		"format": "prettier --write --parser typescript '**/*.{ts,tsx}'",
 		"typecheck": "tsc --noEmit",
+		"check": "pnpm run lint && pnpm run typecheck",
 		"prepare": "husky",
-		"release": "release-it"
+		"release": "release-it",
+		"generate-icons": "pwa-assets-generator"
 	},
 	"imports": {
 		"#admin/*": "./app/admin/*.js",
@@ -34,66 +36,68 @@
 	},
 	"devDependencies": {
 		"@adonisjs/assembler": "^7.8.2",
-		"@adonisjs/eslint-config": "2.0.0-beta.6",
+		"@adonisjs/eslint-config": "2.1.0",
-		"@adonisjs/prettier-config": "^1.4.0",
+		"@adonisjs/prettier-config": "^1.4.5",
-		"@adonisjs/tsconfig": "^1.4.0",
+		"@adonisjs/tsconfig": "^1.4.1",
-		"@faker-js/faker": "^9.2.0",
+		"@faker-js/faker": "^9.9.0",
-		"@japa/assert": "^3.0.0",
+		"@japa/assert": "^4.0.1",
-		"@japa/plugin-adonisjs": "^3.0.1",
+		"@japa/plugin-adonisjs": "^4.0.0",
-		"@japa/runner": "^3.1.4",
+		"@japa/runner": "^4.2.0",
-		"@swc/core": "^1.9.1",
+		"@swc/core": "^1.12.9",
-		"@types/luxon": "^3.4.2",
+		"@types/luxon": "^3.6.2",
-		"@types/node": "^20.14.10",
+		"@types/node": "^24.0.10",
-		"@types/react": "^18.3.12",
+		"@types/react": "^19.1.8",
-		"@types/react-dom": "^18.3.1",
+		"@types/react-dom": "^19.1.6",
-		"@typescript-eslint/eslint-plugin": "^8.13.0",
+		"@typescript-eslint/eslint-plugin": "^8.35.1",
-		"@vitejs/plugin-react": "^4.3.3",
+		"@vite-pwa/assets-generator": "^1.0.0",
-		"eslint": "^9.14.0",
+		"eslint": "^9.30.1",
-		"hot-hook": "^0.3.1",
+		"hot-hook": "^0.4.0",
-		"husky": "^9.1.6",
+		"husky": "^9.1.7",
-		"lint-staged": "^15.2.10",
+		"lint-staged": "^16.1.2",
-		"pino-pretty": "^12.1.0",
+		"pino-pretty": "^13.0.0",
-		"postcss": "^8.4.47",
+		"postcss": "^8.5.6",
-		"postcss-preset-mantine": "^1.17.0",
+		"postcss-preset-mantine": "^1.18.0",
 		"postcss-simple-vars": "^7.0.1",
-		"prettier": "^3.3.3",
+		"prettier": "^3.6.2",
-		"release-it": "^17.10.0",
+		"release-it": "^19.0.3",
-		"ts-node-maintained": "^10.9.4",
+		"ts-node-maintained": "^10.9.5",
-		"typescript": "~5.6.3",
+		"typescript": "~5.8.3",
-		"vite": "^5.4.10"
+		"vite": "^7.0.2"
 	},
 	"dependencies": {
-		"@adonisjs/ally": "^5.0.2",
+		"@adonisjs/ally": "^5.1.0",
-		"@adonisjs/auth": "^9.2.4",
+		"@adonisjs/auth": "^9.4.0",
-		"@adonisjs/core": "^6.14.1",
+		"@adonisjs/core": "^6.19.0",
 		"@adonisjs/cors": "^2.2.1",
-		"@adonisjs/inertia": "^1.2.3",
+		"@adonisjs/inertia": "^3.1.1",
-		"@adonisjs/lucid": "^21.3.0",
+		"@adonisjs/lucid": "^21.7.0",
-		"@adonisjs/session": "^7.5.0",
+		"@adonisjs/session": "^7.5.1",
-		"@adonisjs/shield": "^8.1.1",
+		"@adonisjs/shield": "^8.2.0",
 		"@adonisjs/static": "^1.1.1",
-		"@adonisjs/vite": "^3.0.0",
+		"@adonisjs/vite": "^4.0.0",
-		"@inertiajs/react": "^1.2.0",
+		"@inertiajs/react": "^2.0.14",
 		"@izzyjs/route": "^1.2.0",
-		"@mantine/core": "^7.13.5",
+		"@mantine/core": "^8.1.2",
-		"@mantine/hooks": "^7.13.5",
+		"@mantine/hooks": "^8.1.2",
-		"@mantine/spotlight": "^7.13.5",
+		"@mantine/spotlight": "^8.1.2",
-		"@vinejs/vine": "^2.1.0",
+		"@vinejs/vine": "^3.0.1",
-		"bentocache": "^1.0.0-beta.9",
+		"@vitejs/plugin-react-oxc": "^0.2.3",
+		"bentocache": "^1.4.0",
 		"dayjs": "^1.11.13",
-		"edge.js": "^6.2.0",
+		"edge.js": "^6.2.1",
-		"i18next": "^23.16.5",
+		"i18next": "^25.3.1",
 		"knex": "^3.1.0",
-		"luxon": "^3.5.0",
+		"luxon": "^3.6.1",
-		"node-html-parser": "^6.1.13",
+		"node-html-parser": "^7.0.1",
-		"pg": "^8.13.1",
+		"pg": "^8.16.3",
-		"react": "^18.3.1",
+		"react": "^19.1.0",
-		"react-dom": "^18.3.1",
+		"react-dom": "^19.1.0",
-		"react-hotkeys-hook": "^4.6.1",
+		"react-hotkeys-hook": "^5.1.0",
-		"react-i18next": "^15.1.1",
+		"react-i18next": "^15.6.0",
-		"react-icons": "^5.3.0",
+		"react-icons": "^5.5.0",
 		"reflect-metadata": "^0.2.2",
-		"zustand": "^5.0.1"
+		"vite-plugin-pwa": "^1.0.1",
+		"zustand": "^5.0.6"
 	},
 	"hotHook": {
 		"boundaries": [
@@ -115,6 +119,11 @@
 		"*.js,*.ts,*.jsx,*.tsx": "eslint --cache --fix"
 	},
 	"volta": {
-		"node": "22.11.0"
+		"node": "24.1.0"
+	},
+	"pnpm": {
+		"overrides": {
+			"vite": "npm:rolldown-vite@latest"
+		}
 	}
 }

pnpm-workspace.yaml

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

public/manifest.json

@@ -1,21 +0,0 @@
-{
-  "name": "MyLinks",
-  "short_name": "MyLinks",
-  "description": "MyLinks is a free and open source software, that lets you manage your favorite links in an intuitive interface",
-  "launch_handler": {
-    "client_mode": ["focus-existing", "auto"]
-  },
-  "icons": [
-    {
-      "src": "/favicon.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "any maskable"
-    }
-  ],
-  "theme_color": "#f0eef6",
-  "background_color": "#f0eef6",
-  "start_url": "/",
-  "display": "standalone",
-  "orientation": "portrait"
-}

pwa-assets.config.ts

@@ -0,0 +1,13 @@
+/* eslint-disable @unicorn/filename-case */
+import {
+	defineConfig,
+	minimal2023Preset as preset,
+} from '@vite-pwa/assets-generator/config';
+
+export default defineConfig({
+	headLinkOptions: {
+		preset: '2023',
+	},
+	preset,
+	images: ['public/favicon.png'],
+});

resources/views/inertia_layout.edge

@@ -19,7 +19,7 @@
   />
   <link
     rel='manifest'
-    href='/manifest.json'
+    href='/assets/manifest.webmanifest'
   />
   <link
     rel='apple-touch-icon'
@@ -30,6 +30,13 @@
     href='/favicon.png'
   />
   <title inertia>MyLinks</title>
+	<script defer>
+    if('serviceWorker' in navigator) {
+      window.addEventListener('load', () => {
+        navigator.serviceWorker.register('/assets/sw.js', { scope: '/' })
+      })
+    }
+  </script>
 
   @routes()
   @inertiaHead()

start/kernel.ts

@@ -24,6 +24,7 @@ server.errorHandler(() => import('#core/exceptions/handler'));
  */
 server.use([
 	() => import('#core/middlewares/container_bindings_middleware'),
+	() => import('#core/middlewares/service_worker_scope_extender'),
 	() => import('@adonisjs/static/static_middleware'),
 	() => import('#core/middlewares/log_request'),
 	() => import('@adonisjs/cors/cors_middleware'),

tsconfig.json

@@ -1,8 +1,12 @@
 {
-  "extends": "@adonisjs/tsconfig/tsconfig.app.json",
+	"extends": "@adonisjs/tsconfig/tsconfig.app.json",
-  "compilerOptions": {
+	"compilerOptions": {
-    "rootDir": "./",
+		"rootDir": "./",
-    "outDir": "./build"
+		"outDir": "./build"
-  },
+	},
-  "exclude": ["./inertia/**/*", "node_modules", "build"]
+	"exclude": [
-}
+		"./inertia/**/*",
+		"node_modules",
+		"build"
+	]
+}

vite.config.ts

@@ -1,26 +1,115 @@
-import { defineConfig } from 'vite';
+import project from '#config/project';
 import { getDirname } from '@adonisjs/core/helpers';
 import inertia from '@adonisjs/inertia/client';
-import react from '@vitejs/plugin-react';
 import adonisjs from '@adonisjs/vite/client';
+import react from '@vitejs/plugin-react-oxc';
+import { defineConfig } from 'vite';
+import { VitePWA } from 'vite-plugin-pwa';
 
 export default defineConfig({
 	plugins: [
+		VitePWA({
+			registerType: 'autoUpdate',
+			injectRegister: false,
+			strategies: 'generateSW',
+			devOptions: {
+				enabled: true,
+			},
+			manifest: {
+				name: project.name,
+				short_name: project.name,
+				description: project.description,
+				theme_color: project.color,
+				background_color: project.color,
+				scope: '/',
+				display: 'standalone',
+				orientation: 'portrait',
+				icons: [
+					{
+						src: '/pwa-64x64.png',
+						sizes: '64x64',
+						type: 'image/png',
+					},
+					{
+						src: '/pwa-192x192.png',
+						sizes: '192x192',
+						type: 'image/png',
+					},
+					{
+						src: '/pwa-512x512.png',
+						sizes: '512x512',
+						type: 'image/png',
+						purpose: 'any',
+					},
+					{
+						src: '/maskable-icon-512x512.png',
+						sizes: '512x512',
+						type: 'image/png',
+						purpose: 'maskable',
+					},
+				],
+				launch_handler: {
+					client_mode: ['focus-existing', 'auto'],
+				},
+			},
+			workbox: {
+				clientsClaim: true,
+				skipWaiting: true,
+				globPatterns: ['**/*.{js,css,html,png,svg,ico,json,woff2}'],
+				globIgnores: ['sw*.js', '**/manifest.webmanifest*'],
+				// undefined is required for solving the following error :
+				// Uncaught (in promise) non-precached-url: non-precached-url :: [{"url":"/index.html"}]
+				// Source : https://github.com/vite-pwa/nuxt/issues/53#issuecomment-1615266204
+				navigateFallback: undefined,
+				runtimeCaching: [
+					{
+						urlPattern: /\.(?:js|css|woff2|woff|ttf|eot|otf)$/,
+						handler: 'CacheFirst',
+						options: {
+							cacheName: 'static-assets-cache',
+							expiration: {
+								maxEntries: 50,
+								maxAgeSeconds: 60 * 60 * 24 * 30,
+							},
+						},
+					},
+					{
+						urlPattern: /\.(?:png|jpg|jpeg|svg|gif|webp|ico)$/,
+						handler: 'CacheFirst',
+						options: {
+							cacheName: 'images-cache',
+							expiration: {
+								maxEntries: 100,
+								maxAgeSeconds: 60 * 60 * 24 * 30,
+							},
+						},
+					},
+					{
+						urlPattern: /\/.*$/,
+						handler: 'NetworkFirst',
+						options: {
+							cacheName: 'html-cache',
+							expiration: {
+								maxEntries: 20,
+								maxAgeSeconds: 60 * 60 * 24 * 7,
+							},
+						},
+					},
+				],
+			},
+		}),
 		inertia({ ssr: { enabled: true, entrypoint: 'inertia/app/ssr.tsx' } }),
 		react(),
 		adonisjs({
-			entrypoints: ['inertia/app/app.tsx'],
+			entrypoints: [`${getDirname(import.meta.url)}/inertia/app/app.tsx`],
 			reload: ['resources/views/**/*.edge'],
 		}),
 	],
 
-	/**
-	 * Define aliases for importing modules from
-	 * your frontend code
-	 */
 	resolve: {
 		alias: {
 			'~/': `${getDirname(import.meta.url)}/inertia/`,
+			'config-ssr': `${getDirname(import.meta.url)}/config/ssr.ts`,
 		},
 	},
 });