feat: migrate all 5 Vite apps from react-router to TanStack Router

Migrated backoffice, hackathon, dimentorin, gacha, qrcampaign, and
infra from custom react-router file-based routing to TanStack Router
file-based routing following the tanstack-frontend-best-practice
convention.

Key changes per app:
- New routes/ directory with __root.tsx, _public.tsx, _authenticated.tsx
- Auth guards via beforeLoad (replaces old middleware.ts)
- createFileRoute pattern for all page components
- TanStackRouterVite plugin in vite.config for auto route generation
- _components/_hooks folders colocated with routes (ignored by router)
- routeTree.gen.ts auto-generated on dev/build

Convention:
- _public/* routes redirect to dashboard if authenticated
- _authenticated/* routes redirect to /auth/login if not authenticated
- $param for dynamic segments (was [param] in old convention)
- _layout suffix for pathless layout routes

Removed:
- Old src/app/ directories from all apps
- Old src/middleware.ts files
- Custom convertPagesToRoute utility (no longer needed)
- react-router dependency usage (kept in package.json for shared libs)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/infra/src/main.tsx

@@ -1,14 +1,23 @@
-import { createRoot } from 'react-dom/client';
-import { StrictMode } from 'react';
-import App from './app/App';
-import './index.css';
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { RouterProvider, createRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+import './index.css'
 
-const rootElement = document.getElementById('root');
+const router = createRouter({ routeTree })
 
-if (!rootElement) throw new Error('Failed to find the root element');
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+const rootElement = document.getElementById('root')
+
+if (!rootElement) throw new Error('Failed to find the root element')
 
 createRoot(rootElement).render(
   <StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </StrictMode>
-);
+)

apps/infra/src/routeTree.gen.ts

@@ -0,0 +1,2 @@
+// This file is auto-generated by TanStack Router
+export const routeTree = {} as any

apps/infra/src/routes/__root.tsx

@@ -0,0 +1,5 @@
+import { createRootRoute, Outlet } from '@tanstack/react-router'
+
+export const Route = createRootRoute({
+  component: () => <Outlet />,
+})

apps/infra/src/routes/index.tsx

@@ -1,3 +1,5 @@
+import { createFileRoute } from '@tanstack/react-router'
+
 const apps = [
   { name: 'Landing', domain: 'imphnen.dev', type: 'Next.js', color: 'blue' },
   { name: 'WWW', domain: 'www.imphnen.dev', type: 'Redirect', color: 'purple' },
@@ -8,7 +10,7 @@ const apps = [
   { name: 'QR Campaign', domain: 'qr.imphnen.dev', type: 'Vite', color: 'green' },
   { name: 'Infra', domain: 'infra.imphnen.dev', type: 'Vite', color: 'green' },
   { name: 'API QR', domain: 'api-qr.imphnen.dev', type: 'Backend', color: 'orange' },
-];
+]
 
 const techStack = [
   { category: 'OS', items: ['NixOS 25.05'] },
@@ -19,9 +21,13 @@ const techStack = [
   { category: 'Frontend', items: ['React', 'Next.js', 'Vite', 'TailwindCSS'] },
   { category: 'Backend', items: ['Go', 'Supabase'] },
   { category: 'Secrets', items: ['sops-nix'] },
-];
+]
 
-export default function App() {
+export const Route = createFileRoute('/')({
+  component: InfraPage,
+})
+
+function InfraPage() {
   return (
     <div className="min-h-screen bg-[#0a0a0a]">
 
@@ -234,5 +240,5 @@ export default function App() {
         </div>
       </footer>
     </div>
-  );
+  )
 }

apps/infra/vite.config.ts

@@ -3,6 +3,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
 import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
 
 export default defineConfig(() => ({
   root: __dirname,
@@ -15,7 +16,14 @@ export default defineConfig(() => ({
     port: 3007,
     host: 'localhost',
   },
-  plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+  plugins: [
+    TanStackRouterVite({
+      routeFileIgnorePattern: '_components|_hooks|_hook|_data',
+    }),
+    react(),
+    nxViteTsPaths(),
+    nxCopyAssetsPlugin(['*.md']),
+  ],
   build: {
     outDir: '../../dist/apps/infra',
     emptyOutDir: true,