♻️(front) WIP test Vite+Tanstack Router instead of Next.js

.gitignore

@@ -14,8 +14,8 @@ dist/
 downloads/
 eggs/
 .eggs/
-lib/
-lib64/
+/lib/
+/lib64/
 parts/
 sdist/
 var/
@@ -46,11 +46,10 @@ env.d/terraform
 
 # npm
 node_modules
-src/frontend/out/
+src/frontend/dist/
 tsconfig.tsbuildinfo
 src/frontend/.config
-src/frontend/.next
-src/frontend/next-env.d.ts
+src/frontend/src/routeTree.gen.ts
 .vite
 
 # Mails

Makefile

@@ -214,6 +214,10 @@ analyze-back: ## analyze back-end python sources
 	@$(COMPOSE_RUN_APP_TOOLS) sh -c "pylint ."
 .PHONY: analyze-back
 
+analyze-front: ## analyze frontend bundle sizes (per-chunk + per-package breakdown)
+	@$(COMPOSE) run --rm frontend-tools npm run analyze
+.PHONY: analyze-front
+
 typecheck-front: ## run the frontend type checker
 	@$(COMPOSE) run --rm frontend-tools npm run ts:check
 .PHONY: typecheck-front

README.md

@@ -38,7 +38,7 @@ Messages is the all-in-one collaborative inbox for [La Suite territoriale](https
 
 Messages is a full communication platform enabling teams to collaborate on emails through shared or personal mailboxes.
 
-It features a [MTA](https://en.wikipedia.org/wiki/Message_transfer_agent) based on [Postfix](https://www.postfix.org/), a custom [MDA](https://en.wikipedia.org/wiki/Message_delivery_agent) built on top of [Django Rest Framework](https://www.django-rest-framework.org/) and a frontend using [Next.js](https://nextjs.org/) and [BlockNote.js](https://www.blocknotejs.org/).
+It features a [MTA](https://en.wikipedia.org/wiki/Message_transfer_agent) based on [Postfix](https://www.postfix.org/), a custom [MDA](https://en.wikipedia.org/wiki/Message_delivery_agent) built on top of [Django Rest Framework](https://www.django-rest-framework.org/) and a frontend using [Vite](https://vite.dev/), [TanStack Router](https://tanstack.com/router/) and [BlockNote.js](https://www.blocknotejs.org/).
 
 ### Familiar messaging features
 * 📝 Receive, draft and send emails.

env.d/development/frontend.defaults

@@ -1,5 +1,4 @@
 NEXT_PUBLIC_API_ORIGIN=http://localhost:8901
-NEXT_TELEMETRY_DISABLED=1
 NEXT_PUBLIC_FEEDBACK_WIDGET_API_URL=
 NEXT_PUBLIC_FEEDBACK_WIDGET_PATH=
 NEXT_PUBLIC_FEEDBACK_WIDGET_CHANNEL=

src/frontend/.gitignore

@@ -0,0 +1,2 @@
+.env
+bundle-stats.json

src/frontend/Dockerfile

@@ -27,7 +27,7 @@ RUN npm run build
 
 # Normalize output path to /app (matches the runtime-prod layout)
 FROM scratch AS frontend-build-output
-COPY --from=frontend-build /home/frontend/out /app
+COPY --from=frontend-build /home/frontend/dist /app
 
 # When FRONTEND_IMAGE is set to an external image, BuildKit skips
 # frontend-deps, frontend-build, and frontend-build-output entirely

src/frontend/README.md

@@ -1,40 +1,28 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/pages/api-reference/create-next-app).
+# Messages frontend
+
+This is the Messages frontend, built with [Vite](https://vite.dev/) and [TanStack Router](https://tanstack.com/router/).
 
 ## Getting Started
 
-First, run the development server:
+Install dependencies and run the development server:
 
 ```bash
+npm install
 npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
 ```
 
-Open [http://localhost:8900](http://localhost:8900) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) instead of React pages.
-
-This project uses [`next/font`](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn-pages-router) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+Open [http://localhost:8900](http://localhost:8900) when running through `make start`,
+or [http://localhost:3000](http://localhost:3000) when running `npm run dev` directly.
 
-## Deploy on Vercel
+Routes are file-based under `src/routes/`. Compatibility helpers for legacy
+`next/router`, `next/navigation`, and `next/link` call sites live in
+`src/lib/router-compat.ts`.
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## Useful scripts
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/pages/building-your-application/deploying) for more details.
+- `npm run dev` — start the Vite dev server.
+- `npm run build` — type-check and produce a production build in `dist/`.
+- `npm run preview` — preview the production build locally.
+- `npm run test` — run the Vitest test suite.
+- `npm run lint` — run ESLint.
+- `npm run ts:check` — run TypeScript in `--noEmit` mode.

src/frontend/caddy/Caddyfile

@@ -35,35 +35,17 @@
 			header_up X-Forwarded-For {remote_host}
 		}
 
-		# Next.js static export routes
-		@mailbox path_regexp ^/mailbox/[^/]+$
-		rewrite @mailbox /mailbox/[mailboxId].html
-
-		@mailbox_thread path_regexp ^/mailbox/[^/]+/thread/[^/]+$
-		rewrite @mailbox_thread /mailbox/[mailboxId]/thread/[threadId].html
-
-		@mailbox_new path_regexp ^/mailbox/[^/]+/new$
-		rewrite @mailbox_new /mailbox/[mailboxId]/new.html
-
-		@domain_root path /domain
-		rewrite @domain_root /domain.html
-
-		@domain_id path_regexp ^/domain/[^/]+$
-		rewrite @domain_id /domain/[maildomainId].html
-
-		@domain_dns path_regexp ^/domain/[^/]+/dns$
-		rewrite @domain_dns /domain/[maildomainId]/dns.html
-
-		@domain_signatures path_regexp ^/domain/[^/]+/signatures$
-		rewrite @domain_signatures /domain/[maildomainId]/signatures.html
-
-		# Default: SPA fallback
+		# SPA fallback: any unmatched request returns index.html so the
+		# client-side router can resolve the path.
 		try_files {path} /index.html
 		file_server
 	}
 
 	handle_errors {
-		rewrite * /404.html
-		file_server
+		@spa_404 expression `{err.status_code} == 404`
+		handle @spa_404 {
+			rewrite * /index.html
+			file_server
+		}
 	}
 }

src/frontend/eslint.config.mjs

@@ -1,23 +1,23 @@
 import { defineConfig, globalIgnores } from "eslint/config";
-import nextCoreWebVitals from "eslint-config-next/core-web-vitals";
-import nextTypescript from "eslint-config-next/typescript";
-
-
+import reactHooks from "eslint-plugin-react-hooks";
+import tseslint from "typescript-eslint";
 
 const eslintConfig = defineConfig([
-  ...nextCoreWebVitals,
-  ...nextTypescript,
-  globalIgnores(["out/**", "next-env.d.ts", ".next/**"]),
+  globalIgnores(["dist/**", "src/routeTree.gen.ts", "scripts/**"]),
   { ignores: ["src/features/api/gen/**/*.ts"] },
+  ...tseslint.configs.recommended,
+  reactHooks.configs.flat.recommended,
   {
     rules: {
-      "react-hooks/exhaustive-deps": "off",
-      "react-hooks/refs": "off",
       "no-console": ["error", { allow: ["error", "warn"] }],
       "@typescript-eslint/no-unused-vars": "error",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-empty-object-type": "off",
+      "react-hooks/exhaustive-deps": "off",
+      "react-hooks/refs": "off",
       "react-hooks/set-state-in-effect": "warn",
-    }
-  }
+    },
+  },
 ]);
 
 export default eslintConfig;

src/frontend/index.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="theme-color" content="#FFFFFF" />
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/images/pwa/icons/ios/32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/images/pwa/icons/ios/16.png" />
+    <link rel="shortcut icon" href="/images/pwa/icons/ios/32.png" />
+    <link rel="apple-touch-icon" href="/images/pwa/icons/ios/180.png" />
+    <link rel="apple-touch-icon" sizes="152x152" href="/images/pwa/icons/ios/152.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/images/pwa/icons/ios/180.png" />
+    <link rel="apple-touch-icon" sizes="167x167" href="/images/pwa/icons/ios/167.png" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="apple-mobile-web-app-title" content="Messaging" />
+    <meta name="apple-touch-fullscreen" content="yes" />
+    <meta name="msapplication-TileImage" content="/images/pwa/icons/ios/144.png" />
+    <meta name="msapplication-TileColor" content="#FFFFFF" />
+    <meta name="msapplication-config" content="/browserconfig.xml" />
+    <meta name="application-name" content="Messaging" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta name="description" content="Messaging" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-2048-2732.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-2732-2048.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-1668-2388.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-2388-1668.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-1536-2048.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-2048-1536.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-1640-2360.jpg" media="(device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-2360-1640.jpg" media="(device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-1668-2224.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-2224-1668.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-1620-2160.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-2160-1620.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-1488-2266.jpg" media="(device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-2266-1488.jpg" media="(device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-1320-2868.jpg" media="(device-width: 440px) and (device-height: 956px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-2868-1320.jpg" media="(device-width: 440px) and (device-height: 956px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-1206-2622.jpg" media="(device-width: 402px) and (device-height: 874px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-2622-1206.jpg" media="(device-width: 402px) and (device-height: 874px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-1290-2796.jpg" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-2796-1290.jpg" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-1179-2556.jpg" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-2556-1179.jpg" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-1170-2532.jpg" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-2532-1170.jpg" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-1284-2778.jpg" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-2778-1284.jpg" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-1125-2436.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-2436-1125.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-1242-2688.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-2688-1242.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-828-1792.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-1792-828.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-1242-2208.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-2208-1242.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-750-1334.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-1334-750.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-640-1136.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
+    <link rel="apple-touch-startup-image" href="/images/pwa/splash/apple-splash-1136-640.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
+    <title>Messaging</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <div id="portal-drag-preview"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

src/frontend/instrumentation-client.ts

@@ -1,15 +1,11 @@
-// Read more about this file in the documentation:
-// https://nextjs.org/docs/app/api-reference/file-conventions/instrumentation-client
+import * as Sentry from "@sentry/react";
 
-
-import * as Sentry from "@sentry/nextjs";
-
-const isSentryEnabled = process.env.NEXT_PUBLIC_SENTRY_DSN && process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT;
+const isSentryEnabled = import.meta.env.NEXT_PUBLIC_SENTRY_DSN && import.meta.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT;
 
 if (isSentryEnabled) {
     Sentry.init({
-        dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
-        environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT,
+        dsn: import.meta.env.NEXT_PUBLIC_SENTRY_DSN,
+        environment: import.meta.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT,
     });
     Sentry.setTag("application", "frontend");
 }