feat: introduce framework mode of react router

.gitignore

@@ -25,6 +25,7 @@ supabase/.temp/
 .DS_Store
 yarn-debug.log*
 yarn-error.log*
+.react-router/
 
 # Yarn 4
 .yarn/install-state.gz

.prettierignore

@@ -1,6 +1,7 @@
 dist/
 dist-ssr/
 supabase/
+.react-router/
 tests/coverage/
 .yarn/releases/
 vercel.json

.yarnrc.yml

@@ -13,4 +13,4 @@ packageExtensions:
       redux:
         optional: true
 
-yarnPath: .yarn/releases/yarn-4.16.0.cjs
+yarnPath: .yarn/releases/yarn-4.17.1.cjs

package.json

@@ -26,12 +26,13 @@
   "scripts": {
     "prepare": "husky install",
     "prebuild": "yarn typecheck && yarn eslint:check && yarn prettier:check",
-    "dev": "vite --open",
-    "build": "vite build && node scripts/prerender.mjs",
+    "dev": "react-router dev",
+    "build": "vite build",
     "preview": "vite preview --open",
     "typecheck": "tsc --noEmit",
     "eslint:check": "eslint .",
     "eslint:fix": "eslint --fix .",
+    "rr:gen-types": "react-router typegen",
     "prettier:check": "prettier --check .",
     "prettier:write": "prettier --write .",
     "lint:sql": "node scripts/sqlfluff.js lint",
@@ -55,26 +56,28 @@
     "@heroui/react": "3.2.2",
     "@internationalized/date": "^3.12.2",
     "@phosphor-icons/react": "^2.1.10",
+    "@react-router/node": "^8.3.0",
     "@redux-devtools/extension": "^4.0.0",
     "@rollbar/react": "^1.0.0",
-    "@supabase/supabase-js": "^2.110.7",
+    "@supabase/supabase-js": "^2.110.8",
     "@vercel/analytics": "^2.0.1",
     "border-beam": "^1.3.0",
     "browser-image-compression": "^2.0.2",
     "camelcase-keys": "^10.0.2",
     "decamelize-keys": "^2.0.1",
     "immer": "^11.1.15",
+    "isbot": "^5",
     "lodash.capitalize": "^4.2.1",
     "lodash.groupby": "^4.6.0",
     "lodash.isequal": "^4.5.0",
     "lodash.keyby": "^4.6.0",
     "pluralize": "^8.0.0",
     "prop-types": "^15.8.1",
-    "react": "^19.2.7",
+    "react": "^19.2.8",
     "react-aria": "^3.50.0",
     "react-colorful": "^5.8.0",
-    "react-dom": "^19.2.7",
-    "react-router": "^8.2.0",
+    "react-dom": "^19.2.8",
+    "react-router": "^8.3.0",
     "react-stately": "^3.48.0",
     "react-swipeable": "^7.0.2",
     "rollbar": "3.1.0",
@@ -86,6 +89,7 @@
     "@eslint/compat": "^2.1.0",
     "@eslint/eslintrc": "^3.3.6",
     "@eslint/js": "^10.0.1",
+    "@react-router/dev": "^8.3.0",
     "@relative-ci/agent": "^4.3.1",
     "@stylistic/eslint-plugin": "^5.10.0",
     "@tailwindcss/vite": "^4.3.3",
@@ -101,7 +105,6 @@
     "@types/prop-types": "^15.7.15",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.3",
     "@vitest/coverage-v8": "4.1.10",
     "eslint": "^10.7.0",
     "eslint-config-prettier": "^10.1.8",
@@ -112,8 +115,8 @@
     "globals": "^17.7.0",
     "husky": "^9.1.7",
     "jsdom": "^29.1.1",
-    "lint-staged": "^17.1.0",
-    "prettier": "^3.9.5",
+    "lint-staged": "^17.2.0",
+    "prettier": "^3.9.6",
     "prettier-plugin-tailwindcss": "^0.8.1",
     "rollup-plugin-visualizer": "^7.0.1",
     "rollup-plugin-webpack-stats": "^3.1.3",
@@ -135,5 +138,5 @@
     "map-obj": "6.0.0",
     "quick-lru": "7.3.0"
   },
-  "packageManager": "yarn@4.16.0"
+  "packageManager": "yarn@4.17.1"
 }

react-router.config.ts

@@ -0,0 +1,9 @@
+import type { Config } from '@react-router/dev/config';
+
+export default {
+  appDirectory: './src',
+  ssr: true,
+  async prerender() {
+    return ['/'];
+  },
+} satisfies Config;

src/App.tsx

@@ -13,7 +13,7 @@ import { useSession } from '@hooks';
 import { ErrorFallbackPage } from '@pages';
 import { MEDIA_QUERY, useThemeActions } from '@stores';
 
-import AppRoutes from './Routes';
+import AppRoutes from './OldRoutes';
 
 const App = () => {
   const { error, isLoading } = useSession();

src/catchall.tsx

@@ -0,0 +1,5 @@
+import App from './App';
+
+export default function Component() {
+  return <App />;
+}

src/components/sidebar/SidebarContent.tsx

@@ -163,7 +163,7 @@ const SidebarContent = ({
                 : '-translate-x-1 opacity-0'
             )}
           >
-            Habitrack
+            <a href="/">Habitrack</a>
           </h1>
         )}
         <SidebarModeSelect

src/entry.client.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { HydratedRouter } from 'react-router/dom';
+
+import './index.css';
+
+ReactDOM.hydrateRoot(
+  document,
+  <React.StrictMode>
+    <HydratedRouter />
+  </React.StrictMode>
+);

src/hooks/use-screen-width.ts

@@ -2,6 +2,10 @@ import React from 'react';
 
 const useScreenWidth = () => {
   const [screenWidth, setScreenWidth] = React.useState(() => {
+    if (typeof window === 'undefined') {
+      return 0;
+    }
+
     return window.innerWidth;
   });
 

src/hooks/use-session.ts

@@ -71,7 +71,7 @@ const useSession = () => {
     return () => {
       subscription.unsubscribe();
     };
-  }, [setUser, fetchProfile, rollbar, isLoading]);
+  }, [setUser, fetchProfile, isLoading, rollbar]);
 
   return { error, isLoading };
 };

src/index.css

@@ -4,6 +4,92 @@
 
 @custom-variant dark (&:is(.dark *));
 
+@font-face {
+  font-display: swap;
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 500;
+  src: url('/fonts/nunito-v32-cyrillic_latin-500.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 600;
+  src: url('/fonts/nunito-v32-cyrillic_latin-600.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Nunito';
+  font-style: italic;
+  font-weight: 600;
+  src: url('/fonts/nunito-v32-cyrillic_latin-600italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 700;
+  src: url('/fonts/nunito-v32-cyrillic_latin-700.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 800;
+  src: url('/fonts/nunito-v32-cyrillic_latin-800.woff2') format('woff2');
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Nunito', sans-serif;
+  font-weight: 600;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  * {
+    box-sizing: border-box;
+  }
+}
+
+.infinity-loader {
+  height: calc(var(--uib-size) * (2.1 / 5));
+  width: var(--uib-size);
+  transform-origin: center;
+  overflow: visible;
+
+  .car {
+    fill: none;
+    stroke: var(--uib-color);
+    stroke-dasharray: 15, 85;
+    stroke-dashoffset: 0;
+    stroke-linecap: round;
+    animation: travel var(--uib-speed) linear infinite;
+    will-change: stroke-dasharray, stroke-dashoffset;
+    transition: stroke 0.5s ease;
+  }
+
+  .track {
+    stroke: var(--uib-color);
+    opacity: var(--uib-bg-opacity);
+  }
+}
+
+@keyframes travel {
+  0% {
+    stroke-dashoffset: 0;
+  }
+
+  100% {
+    stroke-dashoffset: 100;
+  }
+}
+
 @layer components {
   .kbd {
     @apply rounded-2xl;