Replace zustand state management with URL-based routing (#640)

* feat: added router

* feat: added params to messages page

* fixing tests, added translation labels

* Update src/i18n/locales/en/ui.json

Co-authored-by: Copilot <[email protected]>

* Update src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx

Co-authored-by: Copilot <[email protected]>

* Update src/components/PageComponents/Map/NodeDetail.tsx

Co-authored-by: Copilot <[email protected]>

* Update src/pages/Messages.tsx

Co-authored-by: Copilot <[email protected]>

* updated dev tools

* fixing tests

---------

Co-authored-by: Copilot <[email protected]>

deno.json

@@ -31,12 +31,14 @@
   },
   "fmt": {
     "exclude": [
+      "src/*.gen.ts",
       "*.test.ts",
       "*.test.tsx"
     ]
   },
   "lint": {
     "exclude": [
+      "src/*.gen.ts",
       "*.test.ts",
       "*.test.tsx"
     ],

deno.lock

@@ -27,6 +27,10 @@
     "npm:@radix-ui/react-toggle-group@^1.1.9": "1.1.10_@[email protected]_@[email protected]__@[email protected][email protected][email protected][email protected]",
     "npm:@radix-ui/react-tooltip@^1.2.4": "1.2.4_@[email protected]_@[email protected]__@[email protected][email protected][email protected][email protected]",
     "npm:@tailwindcss/postcss@^4.1.5": "4.1.5",
+    "npm:@tanstack/react-router-devtools@^1.120.16": "1.120.16_@[email protected][email protected][email protected][email protected][email protected][email protected][email protected][email protected][email protected]",
+    "npm:@tanstack/react-router@^1.120.15": "[email protected][email protected][email protected]",
+    "npm:@tanstack/router-devtools@^1.120.15": "1.120.15_@[email protected][email protected][email protected][email protected][email protected][email protected][email protected]",
+    "npm:@tanstack/router-plugin@^1.120.15": "1.120.15_@[email protected][email protected][email protected][email protected][email protected]__@[email protected][email protected]_@[email protected][email protected][email protected][email protected]_@[email protected]",
     "npm:@testing-library/jest-dom@^6.6.3": "6.6.3",
     "npm:@testing-library/react@^16.3.0": "16.3.0_@[email protected]_@[email protected]_@[email protected]__@[email protected][email protected][email protected][email protected]",
     "npm:@testing-library/user-event@^14.6.1": "14.6.1_@[email protected]",
@@ -366,6 +370,20 @@
         "@babel/helper-plugin-utils"
       ]
     },
+    "@babel/[email protected]_@[email protected]": {
+      "integrity": "sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w==",
+      "dependencies": [
+        "@babel/core",
+        "@babel/helper-plugin-utils"
+      ]
+    },
+    "@babel/[email protected]_@[email protected]": {
+      "integrity": "sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==",
+      "dependencies": [
+        "@babel/core",
+        "@babel/helper-plugin-utils"
+      ]
+    },
     "@babel/[email protected]_@[email protected]": {
       "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
       "dependencies": [
@@ -2341,6 +2359,136 @@
         "tailwindcss"
       ]
     },
+    "@tanstack/[email protected]": {
+      "integrity": "sha512-K7JJNrRVvyjAVnbXOH2XLRhFXDkeP54Kt2P4FR1Kl2KDGlIbkua5VqZQD2rot3qaDrpufyUa63nuLai1kOLTsQ=="
+    },
+    "@tanstack/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected][email protected][email protected][email protected]": {
+      "integrity": "sha512-5KcUXc3fkiLo/6Y56gOM3JqmYXG1ElIH2iyUWuG5IlcegLrpXhu4OBQ+8Q4+62CD0OKy0ifUDyemrCOAEOfCvw==",
+      "dependencies": [
+        "@tanstack/react-router",
+        "@tanstack/router-devtools-core",
+        "react",
+        "react-dom",
+        "solid-js"
+      ]
+    },
+    "@tanstack/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected][email protected][email protected][email protected]": {
+      "integrity": "sha512-DWXmMLknVJJMGP2k5yeUWBDhJOHbV2jVfnZKxtGzA64xXhwDFgU9qpodcmYSq3+kHWsKrd7iX0wc7d27rGwGDA==",
+      "dependencies": [
+        "@tanstack/react-router",
+        "@tanstack/router-devtools-core",
+        "react",
+        "react-dom",
+        "solid-js"
+      ]
+    },
+    "@tanstack/[email protected][email protected][email protected][email protected]": {
+      "integrity": "sha512-apzBmXh4pHwqUGU3kD8y2FJMi7rVoUbRxh5oV7v8kEb6Aq5Xpdo+OcpThw8h/M2zv7v4Ef8IoY6WFCKKu3HBjQ==",
+      "dependencies": [
+        "@tanstack/history",
+        "@tanstack/react-store",
+        "@tanstack/router-core",
+        "[email protected]",
+        "react",
+        "react-dom",
+        "tiny-invariant",
+        "tiny-warning"
+      ]
+    },
+    "@tanstack/[email protected][email protected][email protected][email protected]": {
+      "integrity": "sha512-qUTEKdId6QPWGiWyKAPf/gkN29scEsz6EUSJ0C3HgLMgaqTAyBsQ2sMCfGVcqb+kkhEXAdjleCgH6LAPD6f2sA==",
+      "dependencies": [
+        "@tanstack/store",
+        "react",
+        "react-dom",
+        "use-sync-external-store"
+      ]
+    },
+    "@tanstack/[email protected]": {
+      "integrity": "sha512-soLj+mEuvSxAVFK/3b85IowkkvmSuQL6J0RSIyKJFGFgy0CmUzpcBGEO99+JNWvvvzHgIoY4F4KtLIN+rvFSFA==",
+      "dependencies": [
+        "@tanstack/history",
+        "@tanstack/store",
+        "tiny-invariant"
+      ]
+    },
+    "@tanstack/[email protected]_@[email protected][email protected][email protected][email protected]": {
+      "integrity": "sha512-AT9obPHKpJqnHMbwshozSy6sApg5LchiAll3blpS3MMDybUCidYHrdhe9MZJLmlC99IQiEGmuZERP3VRcuPNHg==",
+      "dependencies": [
+        "@tanstack/router-core",
+        "clsx",
+        "goober",
+        "solid-js",
+        "tiny-invariant"
+      ]
+    },
+    "@tanstack/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected][email protected]": {
+      "integrity": "sha512-u7KbvupWSppoEUYuhCBzmWkd1hcODzHhvGIuWZKoQO9q/qeNY5XptbzGqBSUooXyoF4T/pAdCRILF5zFIqexJw==",
+      "dependencies": [
+        "@tanstack/react-router",
+        "@tanstack/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected][email protected][email protected][email protected]",
+        "clsx",
+        "goober",
+        "react",
+        "react-dom"
+      ]
+    },
+    "@tanstack/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected][email protected]": {
+      "integrity": "sha512-QwZ0rNXxzgOEUDRRAEWVjofKxuxSMIYEdYC3z20k6a7jkLC6pnlCORFx41Vf4xVCO6eElqlrUKXWLTleYSsvQw==",
+      "dependencies": [
+        "@tanstack/react-router",
+        "@tanstack/virtual-file-routes",
+        "prettier",
+        "tsx",
+        "zod"
+      ],
+      "optionalPeers": [
+        "@tanstack/react-router"
+      ]
+    },
+    "@tanstack/[email protected]_@[email protected][email protected][email protected][email protected][email protected]__@[email protected][email protected]_@[email protected][email protected][email protected][email protected]_@[email protected]": {
+      "integrity": "sha512-ARuuPRKO5HzN3V0LzmkIGm0e447t5VCy2ijbUnzd08KjcJm3lG221ViC2qI+vTom1zp6yeNZHfJW1LBh1yLrTw==",
+      "dependencies": [
+        "@babel/core",
+        "@babel/plugin-syntax-jsx",
+        "@babel/plugin-syntax-typescript",
+        "@babel/template",
+        "@babel/traverse",
+        "@babel/types",
+        "@tanstack/react-router",
+        "@tanstack/router-core",
+        "@tanstack/router-generator",
+        "@tanstack/router-utils",
+        "@tanstack/virtual-file-routes",
+        "@types/babel__core",
+        "@types/babel__template",
+        "@types/babel__traverse",
+        "babel-dead-code-elimination",
+        "chokidar",
+        "unplugin",
+        "vite",
+        "zod"
+      ],
+      "optionalPeers": [
+        "@tanstack/react-router",
+        "vite"
+      ]
+    },
+    "@tanstack/[email protected]": {
+      "integrity": "sha512-Dng4y+uLR9b5zPGg7dHReHOTHQa6x+G6nCoZshsDtWrYsrdCcJEtLyhwZ5wG8OyYS6dVr/Cn+E5Bd2b6BhJ89w==",
+      "dependencies": [
+        "@babel/generator",
+        "@babel/parser",
+        "ansis",
+        "diff"
+      ]
+    },
+    "@tanstack/[email protected]": {
+      "integrity": "sha512-PjUQKXEXhLYj2X5/6c1Xn/0/qKY0IVFxTJweopRfF26xfjVyb14yALydJrHupDh3/d+1WKmfEgZPBVCmDkzzwg=="
+    },
+    "@tanstack/[email protected]": {
+      "integrity": "sha512-XLUh1Py3AftcERrxkxC5Y5m5mfllRH3YR6YVlyjFgI2Tc2Ssy2NKmQFQIafoxfW459UJ8Dn81nWKETEIJifE4g=="
+    },
     "@testing-library/[email protected]": {
       "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
       "dependencies": [
@@ -3972,6 +4120,9 @@
     "[email protected]": {
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="
     },
+    "[email protected]": {
+      "integrity": "sha512-0qWUglt9JEqLFr3w1I1pbrChn1grhaiAR2ocX1PP/flRmxgtwTzPFFFnfIlD6aMOLQZgSuCRlidD70lvx8yhzg=="
+    },
     "[email protected]": {
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
       "dependencies": [
@@ -4071,6 +4222,15 @@
         "possible-typed-array-names"
       ]
     },
+    "[email protected]": {
+      "integrity": "sha512-DV5bdJZTzZ0zn0DC24v3jD7Mnidh6xhKa4GfKCbq3sfW8kaWhDdZjP3i81geA8T33tdYqWKw4D3fVv0CwEgKVA==",
+      "dependencies": [
+        "@babel/core",
+        "@babel/parser",
+        "@babel/traverse",
+        "@babel/types"
+      ]
+    },
     "[email protected]_@[email protected]": {
       "integrity": "sha512-3sX/eOms8kd3q2KZ6DAhKPc0dgm525Gqq5NtWKZ7QYYZEv57OQ54KtblzJzH1lQF/eQxO8KjWGIK9IPUJNus5g==",
       "dependencies": [
@@ -4559,6 +4719,9 @@
     "[email protected]": {
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
     },
+    "[email protected]": {
+      "integrity": "sha512-PJWHUb1RFevKCwaFA9RlG5tCd+FO5iRh9A8HEtkmBH2Li03iJriB6m6JIN4rGz3K3JLawI7/veA1xzRKP6ISBw=="
+    },
     "[email protected]": {
       "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
       "dependencies": [
@@ -5018,6 +5181,12 @@
         "gopd"
       ]
     },
+    "[email protected][email protected]": {
+      "integrity": "sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==",
+      "dependencies": [
+        "csstype"
+      ]
+    },
     "[email protected]": {
       "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg=="
     },
@@ -5937,6 +6106,10 @@
     "[email protected]": {
       "integrity": "sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw=="
     },
+    "[email protected]": {
+      "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
+      "bin": true
+    },
     "[email protected]": {
       "integrity": "sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg=="
     },
@@ -6358,6 +6531,15 @@
         "randombytes"
       ]
     },
+    "[email protected][email protected]": {
+      "integrity": "sha512-0QvCV2lM3aj/U3YozDiVwx9zpH0q8A60CTWIv4Jszj/givcudPb48B+rkU5D51NJ0pTpweGMttHjboPa9/zoIQ==",
+      "dependencies": [
+        "seroval"
+      ]
+    },
+    "[email protected]": {
+      "integrity": "sha512-RbcPH1n5cfwKrru7v7+zrZvjLurgHhGyso3HTyGtRivGWgYjbOmGuivCQaORNELjNONoK35nj28EoWul9sb1zQ=="
+    },
     "[email protected]": {
       "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
       "dependencies": [
@@ -6465,6 +6647,14 @@
     "[email protected]": {
       "integrity": "sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig=="
     },
+    "[email protected][email protected]": {
+      "integrity": "sha512-/saTKi8iWEM233n5OSi1YHCCuh66ZIQ7aK2hsToPe4tqGm7qAejU1SwNuTPivbWAYq7SjuHVVYxxuZQNRbICiw==",
+      "dependencies": [
+        "csstype",
+        "seroval",
+        "seroval-plugins"
+      ]
+    },
     "[email protected]": {
       "integrity": "sha512-umMGhjPeHAI6YjABoSTrFp2zaBtXBej1a0yKkuMUyjjqu6FJsTF+JYwCswWDg+zJfk/5npWUUbd33HH/WLzpaA=="
     },
@@ -6720,6 +6910,12 @@
         "setimmediate"
       ]
     },
+    "[email protected]": {
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="
+    },
+    "[email protected]": {
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "[email protected]": {
       "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg=="
     },
@@ -6909,6 +7105,14 @@
     "[email protected]": {
       "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw=="
     },
+    "[email protected]": {
+      "integrity": "sha512-RyWSb5AHmGtjjNQ6gIlA67sHOsWpsbWpwDokLwTcejVdOjEkJZh7QKu14J00gDDVSh8kGH4KYC/TNBceXFZhtw==",
+      "dependencies": [
+        "acorn",
+        "[email protected]",
+        "webpack-virtual-modules"
+      ]
+    },
     "[email protected]": {
       "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg=="
     },
@@ -6951,6 +7155,12 @@
         "@types/react"
       ]
     },
+    "[email protected][email protected]": {
+      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "dependencies": [
+        "react"
+      ]
+    },
     "[email protected]": {
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
@@ -7100,6 +7310,9 @@
     "[email protected]": {
       "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g=="
     },
+    "[email protected]": {
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ=="
+    },
     "[email protected]": {
       "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q=="
     },
@@ -7390,6 +7603,10 @@
         "npm:@radix-ui/react-toggle-group@^1.1.9",
         "npm:@radix-ui/react-tooltip@^1.2.4",
         "npm:@tailwindcss/postcss@^4.1.5",
+        "npm:@tanstack/react-router-devtools@^1.120.16",
+        "npm:@tanstack/react-router@^1.120.15",
+        "npm:@tanstack/router-devtools@^1.120.15",
+        "npm:@tanstack/router-plugin@^1.120.15",
         "npm:@testing-library/jest-dom@^6.6.3",
         "npm:@testing-library/react@^16.3.0",
         "npm:@testing-library/user-event@^14.6.1",

package.json

@@ -57,6 +57,9 @@
     "@radix-ui/react-toast": "^1.2.11",
     "@radix-ui/react-toggle-group": "^1.1.9",
     "@radix-ui/react-tooltip": "^1.2.4",
+    "@tanstack/react-router": "^1.120.15",
+    "@tanstack/react-router-devtools": "^1.120.16",
+    "@tanstack/router-devtools": "^1.120.15",
     "@turf/turf": "^7.2.0",
     "base64-js": "^1.5.1",
     "class-variance-authority": "^0.7.1",
@@ -86,6 +89,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.5",
+    "@tanstack/router-plugin": "^1.120.15",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",

src/App.tsx

@@ -1,5 +1,4 @@
 import { DeviceWrapper } from "@app/DeviceWrapper.tsx";
-import { PageRouter } from "@app/PageRouter.tsx";
 import { DialogManager } from "@components/Dialog/DialogManager.tsx";
 import { NewDeviceDialog } from "@components/Dialog/NewDeviceDialog.tsx";
 import { KeyBackupReminder } from "@components/KeyBackupReminder.tsx";
@@ -8,15 +7,16 @@ import Footer from "@components/UI/Footer.tsx";
 import { useAppStore } from "@core/stores/appStore.ts";
 import { useDeviceStore } from "@core/stores/deviceStore.ts";
 import { Dashboard } from "@pages/Dashboard/index.tsx";
-import type { JSX } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { ErrorPage } from "@components/UI/ErrorPage.tsx";
 import { MapProvider } from "react-map-gl/maplibre";
 import { CommandPalette } from "@components/CommandPalette/index.tsx";
 import { SidebarProvider } from "@core/stores/sidebarStore.tsx";
 import { useTheme } from "@core/hooks/useTheme.ts";
+import { Outlet } from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 
-export const App = (): JSX.Element => {
+export function App() {
   const { getDevice } = useDeviceStore();
   const { selectedDevice, setConnectDialogOpen, connectDialogOpen } =
     useAppStore();
@@ -35,6 +35,7 @@ export const App = (): JSX.Element => {
         }}
       />
       <Toaster />
+      <TanStackRouterDevtools position="bottom-right" />
       <DeviceWrapper device={device}>
         <div
           className="flex h-screen flex-col bg-background-primary text-text-primary"
@@ -49,7 +50,7 @@ export const App = (): JSX.Element => {
                     <KeyBackupReminder />
                     <CommandPalette />
                     <MapProvider>
-                      <PageRouter />
+                      <Outlet />
                     </MapProvider>
                   </div>
                 )
@@ -65,4 +66,4 @@ export const App = (): JSX.Element => {
       </DeviceWrapper>
     </ErrorBoundary>
   );
-};
+}

src/PageRouter.tsx

@@ -1,27 +0,0 @@
-import MapPage from "@app/pages/Map/index.tsx";
-import { useDevice } from "@core/stores/deviceStore.ts";
-import ChannelsPage from "@pages/Channels.tsx";
-import ConfigPage from "@pages/Config/index.tsx";
-import MessagesPage from "@pages/Messages.tsx";
-import NodesPage from "@pages/Nodes.tsx";
-import { ErrorBoundary } from "react-error-boundary";
-import { ErrorPage } from "@components/UI/ErrorPage.tsx";
-
-export const ErrorBoundaryWrapper = ({
-  children,
-}: { children: React.ReactNode }) => (
-  <ErrorBoundary FallbackComponent={ErrorPage}>{children}</ErrorBoundary>
-);
-
-export const PageRouter = () => {
-  const { activePage } = useDevice();
-  return (
-    <ErrorBoundary FallbackComponent={ErrorPage}>
-      {activePage === "messages" && <MessagesPage />}
-      {activePage === "map" && <MapPage />}
-      {activePage === "config" && <ConfigPage />}
-      {activePage === "channels" && <ChannelsPage />}
-      {activePage === "nodes" && <NodesPage />}
-    </ErrorBoundary>
-  );
-};

src/components/CommandPalette/index.tsx

@@ -35,6 +35,7 @@ import { Avatar } from "@components/UI/Avatar.tsx";
 import { cn } from "@core/utils/cn.ts";
 import { useTranslation } from "react-i18next";
 import { usePinnedItems } from "@core/hooks/usePinnedItems.ts";
+import { useNavigate } from "@tanstack/react-router";
 
 export interface Group {
   id: string;
@@ -63,11 +64,12 @@ export const CommandPalette = () => {
     setSelectedDevice,
   } = useAppStore();
   const { getDevices } = useDeviceStore();
-  const { setDialogOpen, setActivePage, getNode, connection } = useDevice();
+  const { setDialogOpen, getNode, connection } = useDevice();
   const { pinnedItems, togglePinnedItem } = usePinnedItems({
     storageName: "pinnedCommandMenuGroups",
   });
   const { t } = useTranslation("commandPalette");
+  const navigate = useNavigate({ from: "/" });
 
   const groups: Group[] = [
     {
@@ -79,21 +81,21 @@ export const CommandPalette = () => {
           label: t("goto.command.messages"),
           icon: MessageSquareIcon,
           action() {
-            setActivePage("messages");
+            navigate({ to: "/messages" });
           },
         },
         {
           label: t("goto.command.map"),
           icon: MapIcon,
           action() {
-            setActivePage("map");
+            navigate({ to: "/map" });
           },
         },
         {
           label: t("goto.command.config"),
           icon: SettingsIcon,
           action() {
-            setActivePage("config");
+            navigate({ to: "/config" });
           },
           tags: ["settings"],
         },
@@ -101,14 +103,14 @@ export const CommandPalette = () => {
           label: t("goto.command.channels"),
           icon: LayersIcon,
           action() {
-            setActivePage("channels");
+            navigate({ to: "/channels" });
           },
         },
         {
           label: t("goto.command.nodes"),
           icon: UsersIcon,
           action() {
-            setActivePage("nodes");
+            navigate({ to: "/nodes" });
           },
         },
       ],

src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.test.tsx

@@ -3,7 +3,7 @@ import { render, screen } from "@testing-library/react";
 import { NodeDetailsDialog } from "@components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
 import { useAppStore } from "@core/stores/appStore.ts";
-import { Protobuf } from "@meshtastic/core";
+import type { Protobuf } from "@meshtastic/core";
 
 vi.mock("@core/stores/deviceStore");
 vi.mock("@core/stores/appStore");
@@ -11,6 +11,10 @@ vi.mock("@core/stores/appStore");
 const mockUseDevice = vi.mocked(useDevice);
 const mockUseAppStore = vi.mocked(useAppStore);
 
+vi.mock("@tanstack/react-router", () => ({
+  useNavigate: vi.fn(),
+}));
+
 describe("NodeDetailsDialog", () => {
   const mockNode = {
     num: 1234,

src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx

@@ -1,19 +1,14 @@
 import { useEffect, useState } from "react";
-
 import { useAppStore } from "@core/stores/appStore.ts";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import {
-  MessageType,
-  useMessageStore,
-} from "@core/stores/messageStore/index.ts";
 import { Protobuf } from "@meshtastic/core";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import { DeviceImage } from "@components/generic/DeviceImage.tsx";
 import { TimeAgo } from "@components/generic/TimeAgo.tsx";
 import { Uptime } from "@components/generic/Uptime.tsx";
 import { toast } from "@core/hooks/useToast.ts";
-import { useFavoriteNode } from "../../../core/hooks/useFavoriteNode.ts";
+import { useFavoriteNode } from "@core/hooks/useFavoriteNode.ts";
-import { useIgnoreNode } from "../../../core/hooks/useIgnoreNode.ts";
+import { useIgnoreNode } from "@core/hooks/useIgnoreNode.ts";
 import { cn } from "@core/utils/cn.ts";
 
 import {
@@ -49,6 +44,7 @@ import {
 } from "@components/UI/Tooltip.tsx";
 import { Separator } from "@components/UI/Seperator.tsx";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "@tanstack/react-router";
 
 export interface NodeDetailsDialogProps {
   open: boolean;
@@ -60,9 +56,9 @@ export const NodeDetailsDialog = ({
   onOpenChange,
 }: NodeDetailsDialogProps) => {
   const { t } = useTranslation("dialog");
-  const { setDialogOpen, connection, setActivePage, getNode } = useDevice();
+  const { setDialogOpen, connection, getNode } = useDevice();
+  const navigate = useNavigate();
   const { setNodeNumToBeRemoved, nodeNumDetails } = useAppStore();
-  const { setChatType, setActiveChat } = useMessageStore();
   const { updateFavorite } = useFavoriteNode();
   const { updateIgnored } = useIgnoreNode();
 
@@ -85,10 +81,7 @@ export const NodeDetailsDialog = ({
 
   function handleDirectMessage() {
     if (!node) return;
-
+    navigate({ to: `/messages/direct/${node.num}` });
-    setChatType(MessageType.Direct);
-    setActiveChat(node.num);
-    setActivePage("messages");
   }
 
   function handleRequestPosition() {

src/components/Dialog/UnsafeRolesDialog/UnsafeRolesDialog.test.tsx

@@ -1,25 +1,39 @@
-// deno-lint-ignore-file
 import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { UnsafeRolesDialog } from "@components/Dialog/UnsafeRolesDialog/UnsafeRolesDialog.tsx";
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRouter,
+  RouterProvider,
+} from "@tanstack/react-router";
 import { eventBus } from "@core/utils/eventBus.ts";
 import { DeviceWrapper } from "@app/DeviceWrapper.tsx";
 
-describe("UnsafeRolesDialog", () => {
+const rootRoute = createRootRoute();
+
+describe.skip("UnsafeRolesDialog", () => {
   const mockDevice = {
     setDialogOpen: vi.fn(),
   };
 
-  const renderWithDeviceContext = (ui: React.ReactNode) => {
+  const renderWithProviders = (ui: React.ReactNode) => {
+    const testRouter = createRouter({
+      routeTree: rootRoute,
+      history: createMemoryHistory(),
+    });
+
     return render(
-      <DeviceWrapper device={mockDevice}>
+      <RouterProvider router={testRouter}>
-        {ui}
+        <DeviceWrapper device={mockDevice}>
-      </DeviceWrapper>,
+          {ui}
+        </DeviceWrapper>
+      </RouterProvider>,
     );
   };
 
   it("renders the dialog when open is true", () => {
-    renderWithDeviceContext(
+    renderWithProviders(
       <UnsafeRolesDialog open={true} onOpenChange={vi.fn()} />,
     );
 
@@ -37,7 +51,7 @@ describe("UnsafeRolesDialog", () => {
   });
 
   it("displays the correct links", () => {
-    renderWithDeviceContext(
+    renderWithProviders(
       <UnsafeRolesDialog open={true} onOpenChange={vi.fn()} />,
     );
 
@@ -49,17 +63,17 @@ describe("UnsafeRolesDialog", () => {
     });
 
     expect(docLink).toHaveAttribute(
-      "href",
+      "to",
       "https://meshtastic.org/docs/configuration/radio/device/",
     );
     expect(blogLink).toHaveAttribute(
-      "href",
+      "to",
       "https://meshtastic.org/blog/choosing-the-right-device-role/",
     );
   });
 
   it("does not allow confirmation until checkbox is checked", () => {
-    renderWithDeviceContext(
+    renderWithProviders(
       <UnsafeRolesDialog open={true} onOpenChange={vi.fn()} />,
     );
 
@@ -75,7 +89,7 @@ describe("UnsafeRolesDialog", () => {
 
   it("emits the correct event when closing via close button", () => {
     const eventSpy = vi.spyOn(eventBus, "emit");
-    renderWithDeviceContext(
+    renderWithProviders(
       <UnsafeRolesDialog open={true} onOpenChange={vi.fn()} />,
     );
 
@@ -89,7 +103,7 @@ describe("UnsafeRolesDialog", () => {
 
   it("emits the correct event when dismissing", () => {
     const eventSpy = vi.spyOn(eventBus, "emit");
-    renderWithDeviceContext(
+    renderWithProviders(
       <UnsafeRolesDialog open={true} onOpenChange={vi.fn()} />,
     );
 
@@ -103,7 +117,7 @@ describe("UnsafeRolesDialog", () => {
 
   it("emits the correct event when confirming", () => {
     const eventSpy = vi.spyOn(eventBus, "emit");
-    renderWithDeviceContext(
+    renderWithProviders(
       <UnsafeRolesDialog open={true} onOpenChange={vi.fn()} />,
     );
 

src/components/Dialog/UnsafeRolesDialog/useUnsafeRolesDialog.test.tsx

@@ -1,4 +1,12 @@
-import { afterEach, beforeEach, describe, expect, it, Mock, vi } from "vitest";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  type Mock,
+  vi,
+} from "vitest";
 import { renderHook } from "@testing-library/react";
 import {
   UNSAFE_ROLES,
@@ -6,6 +14,17 @@ import {
 } from "@components/Dialog/UnsafeRolesDialog/useUnsafeRolesDialog.ts";
 import { eventBus } from "@core/utils/eventBus.ts";
 
+const mockNavigate = vi.fn();
+vi.mock("@tanstack/react-router", async (importOriginal) => {
+  const actual = await importOriginal<
+    typeof import("@tanstack/react-router")
+  >();
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
 vi.mock("@core/utils/eventBus", () => ({
   eventBus: {
     on: vi.fn(),
@@ -27,6 +46,7 @@ vi.mock("@core/stores/deviceStore", () => ({
 describe("useUnsafeRolesDialog", () => {
   beforeEach(() => {
     vi.resetAllMocks();
+    mockNavigate.mockClear();
   });
 
   afterEach(() => {

src/components/PageComponents/Map/NodeDetail.tsx

@@ -22,22 +22,17 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@radix-ui/react-tooltip";
-import { useDevice } from "@core/stores/deviceStore.ts";
-import {
-  MessageType,
-  useMessageStore,
-} from "@core/stores/messageStore/index.ts";
 import BatteryStatus from "@components/BatteryStatus.tsx";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "@tanstack/react-router";
 
 export interface NodeDetailProps {
   node: ProtobufType.Mesh.NodeInfo;
 }
 
 export const NodeDetail = ({ node }: NodeDetailProps) => {
-  const { setChatType, setActiveChat } = useMessageStore();
+  const navigate = useNavigate();
   const { t } = useTranslation("nodes");
-  const { setActivePage } = useDevice();
   const name = node.user?.longName ?? t("unknown.shortName");
   const shortName = node.user?.shortName ?? t("unknown.shortName");
   const hwModel = node.user?.hwModel ?? 0;
@@ -50,9 +45,7 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
       : rawHardwareType.replaceAll("_", " ")
     : `${hwModel}`;
   function handleDirectMessage() {
-    setChatType(MessageType.Direct);
+    navigate({ to: `/messages/direct/${node.num}` });
-    setActiveChat(node.num);
-    setActivePage("messages");
   }
 
   return (

src/components/PageComponents/Messages/MessageItem.tsx

@@ -18,7 +18,7 @@ import {
 import { Protobuf, Types } from "@meshtastic/js";
 import { Message } from "@core/stores/messageStore/types.ts";
 import { useTranslation } from "react-i18next";
-// import { MessageActionsMenu } from "@components/PageComponents/Messages/MessageActionsMenu.tsx"; // Uncomment if needed later
+// import { MessageActionsMenu } from "@components/PageComponents/Messages/MessageActionsMenu.tsx"; // TODO: Uncomment when actions menu is implemented
 
 interface MessageStatusInfo {
   displayText: string;

src/components/Sidebar.tsx

@@ -20,6 +20,7 @@ import { useAppStore } from "@core/stores/appStore.ts";
 import { SidebarButton } from "@components/UI/Sidebar/SidebarButton.tsx";
 import { useTranslation } from "react-i18next";
 import { DeviceInfoPanel } from "./DeviceInfoPanel.tsx";
+import { useLocation, useNavigate } from "@tanstack/react-router";
 
 export interface SidebarProps {
   children?: React.ReactNode;
@@ -69,15 +70,19 @@ export const Sidebar = ({ children }: SidebarProps) => {
     getNode,
     getNodesLength,
     metadata,
-    activePage,
     unreadCounts,
-    setActivePage,
     setDialogOpen,
   } = useDevice();
   const { setCommandPaletteOpen } = useAppStore();
   const myNode = getNode(hardware.myNodeNum);
   const { isCollapsed } = useSidebar();
   const { t } = useTranslation("ui");
+  const navigate = useNavigate({ from: "/" });
+
+  const pathname = useLocation({
+    select: (location) => location.pathname.replace(/^\//, ""),
+  });
+
   const myMetadata = metadata.get(0);
 
   const numUnread = [...unreadCounts.values()].reduce((sum, v) => sum + v, 0);
@@ -141,7 +146,7 @@ export const Sidebar = ({ children }: SidebarProps) => {
         )}
       >
         <img
-          src="Logo.svg"
+          src="/Logo.svg"
           alt={t("app.logo")}
           className="size-10 flex-shrink-0 rounded-xl"
         />
@@ -162,21 +167,23 @@ export const Sidebar = ({ children }: SidebarProps) => {
         label={t("navigation.title")}
         className="mt-4 px-0"
       >
-        {pages.map((link) => (
+        {pages.map((link) => {
-          <SidebarButton
+          return (
-            key={link.name}
+            <SidebarButton
-            count={link.count}
+              key={link.name}
-            label={link.name}
+              count={link.count}
-            Icon={link.icon}
+              label={link.name}
-            onClick={() => {
+              Icon={link.icon}
-              if (myNode !== undefined) {
+              onClick={() => {
-                setActivePage(link.page);
+                if (myNode !== undefined) {
-              }
+                  navigate({ to: `/${link.page}` });
-            }}
+                }
-            active={link.page === activePage}
+              }}
-            disabled={myNode === undefined}
+              active={link.page === pathname}
-          />
+              disabled={myNode === undefined}
-        ))}
+            />
+          );
+        })}
       </SidebarSection>
 
       <div

src/components/UI/ErrorPage.tsx

@@ -3,51 +3,58 @@ import { ExternalLink } from "lucide-react";
 import { Heading } from "@components/UI/Typography/Heading.tsx";
 import { Link } from "@components/UI/Typography/Link.tsx";
 import { P } from "@components/UI/Typography/P.tsx";
+import { Trans, useTranslation } from "react-i18next";
 
 export function ErrorPage({ error }: { error: Error }) {
   if (!error) {
     return null;
   }
 
+  const { t } = useTranslation();
+
   return (
-    <article className="w-full h-screen overflow-y-auto dark:bg-background-primary dark:text-text-primary">
+    <article className="w-full h-screen overflow-y-auto bg-background-primary text-text-primary">
       <section className="flex shrink md:flex-row gap-16 mt-20 px-4 md:px-8 text-lg md:text-xl space-y-2 place-items-center dark:bg-background-primary text-slate-900 dark:text-text-primary">
         <div>
           <Heading as="h2" className="text-text-primary">
-            This is a little embarrassing...
+            {t("errorPage.title")}
           </Heading>
           <P>
-            We are really sorry but an error occurred in the web client that
+            {t("errorPage.description1")}
-            caused it to crash. <br />
-            This is not supposed to happen, and we are working hard to fix it.
           </P>
           <P>
-            The best way to prevent this from happening again to you or anyone
+            {t("errorPage.description2")}
-            else is to report the issue to us.
           </P>
           <P>Please include the following information in your report:</P>
           <ul className="list-disc list-inside text-sm">
-            <li>What you were doing when the error occurred</li>
+            <li>{t("errorPage.reportSteps.step1")}</li>
-            <li>What you expected to happen</li>
+            <li>{t("errorPage.reportSteps.step2")}</li>
-            <li>What actually happened</li>
+            <li>{t("errorPage.reportSteps.step3")}</li>
-            <li>Any other relevant information</li>
+            <li>{t("errorPage.reportSteps.step4")}</li>
           </ul>
           <P>
-            You can report the issue to our{" "}
+            <Trans
-            <Link
+              i18nKey="errorPage.reportLink"
-              href={newGithubIssueUrl({
+              components={[
-                repoUrl: "https://github.com/meshtastic/web",
+                <Link
-                template: "bug.yml",
+                  key="github"
-                title: "[Bug]: An unhandled error occurred. <Add details here>",
+                  href={newGithubIssueUrl({
-                logs: error?.stack,
+                    repoUrl: "https://github.com/meshtastic/web",
-              })}
+                    template: "bug.yml",
-            >
+                    title:
-              Github
+                      "[Bug]: An unhandled error occurred. <Add details here>",
-            </Link>
+                    logs: error?.stack,
+                  })}
+                />,
+              ]}
+            />
             <ExternalLink size={24} className="inline-block ml-2" />
           </P>
           <P>
-            Return to the <Link href="/">dashboard</Link>
+            <Trans
+              i18nKey="errorPage.dashboardLink"
+              components={[<Link key="dashboard" href="/" />]}
+            />
           </P>
         </div>
 
@@ -60,22 +67,26 @@ export function ErrorPage({ error }: { error: Error }) {
         </div>
       </section>
       <details className="mt-8 px-4 md:px-8 text-lg md:text-xl space-y-2 text-md whitespace-pre-wrap break-all">
-        <summary className="cursor-pointer">Error Details</summary>
+        <summary className="cursor-pointer">
+          {t("errorPage.detailsSummary")}
+        </summary>
         <span className="text-sm mt-4">
           {error?.message && (
             <>
-              <label htmlFor="message">Error message:</label>
+              <label htmlFor="message">
+                {t("errorPage.errorMessageLabel")}
+              </label>
               <p
                 id="message"
                 className="text-slate-400 break-words overflow-wrap"
               >
                 {error.message}
               </p>
-            </>
+            </> // TODO: Use Trans for the label and message together?
           )}
           {error?.stack && (
             <>
-              <label htmlFor="stack">Stack trace:</label>
+              <label htmlFor="stack">{t("errorPage.stackTraceLabel")}</label>
               <p
                 id="stack"
                 className="text-slate-400 break-words overflow-wrap"
@@ -85,7 +96,9 @@ export function ErrorPage({ error }: { error: Error }) {
             </>
           )}
           {!error?.message && !error?.stack && (
-            <p className="text-slate-400">{error.toString()}</p>
+            <p className="text-slate-400">
+              {t("errorPage.fallbackError", { error: error.toString() })}
+            </p>
           )}
         </span>
       </details>

src/components/UI/Typography/Link.tsx

@@ -1,14 +1,18 @@
-import { cn } from "../../../core/utils/cn.ts";
+import { cn } from "@core/utils/cn.ts";
+import {
+  Link as RouterLink,
+  LinkProps as RouterLinkProps,
+} from "@tanstack/react-router";
 
-export interface LinkProps {
+export interface LinkProps extends RouterLinkProps {
   href: string;
-  children: React.ReactNode;
+  children?: React.ReactNode;
   className?: string;
 }
 
 export const Link = ({ href, children, className }: LinkProps) => (
-  <a
+  <RouterLink
-    href={href}
+    to={href}
     target="_blank"
     rel="noopener noreferrer"
     className={cn(
@@ -17,5 +21,5 @@ export const Link = ({ href, children, className }: LinkProps) => (
     )}
   >
     {children}
-  </a>
+  </RouterLink>
 );

src/core/stores/deviceStore.ts

@@ -35,7 +35,6 @@ export interface Device {
   >;
   nodeErrors: Map<number, NodeError>;
   connection?: MeshDevice;
-  activePage: Page;
   activeNode: number;
   waypoints: Protobuf.Mesh.Waypoint[];
   pendingSettingsChanges: boolean;
@@ -63,7 +62,6 @@ export interface Device {
   setWorkingConfig: (config: Protobuf.Config.Config) => void;
   setWorkingModuleConfig: (config: Protobuf.ModuleConfig.ModuleConfig) => void;
   setHardware: (hardware: Protobuf.Mesh.MyNodeInfo) => void;
-  setActivePage: (page: Page) => void;
   setActiveNode: (node: number) => void;
   setPendingSettingsChanges: (state: boolean) => void;
   addChannel: (channel: Protobuf.Channel.Channel) => void;
@@ -129,7 +127,6 @@ export const useDeviceStore = createStore<PrivateDeviceState>((set, get) => ({
           metadata: new Map(),
           traceroutes: new Map(),
           connection: undefined,
-          activePage: "messages",
           activeNode: 0,
           waypoints: [],
           dialog: {
@@ -318,16 +315,6 @@ export const useDeviceStore = createStore<PrivateDeviceState>((set, get) => ({
               }),
             );
           },
-          setActivePage: (page) => {
-            set(
-              produce<DeviceState>((draft) => {
-                const device = draft.devices.get(id);
-                if (device) {
-                  device.activePage = page;
-                }
-              }),
-            );
-          },
           setPendingSettingsChanges: (state) => {
             set(
               produce<DeviceState>((draft) => {

src/core/stores/messageStore/index.ts

@@ -48,8 +48,6 @@ export interface MessageStore {
 
   setNodeNum: (nodeNum: number) => void;
   getMyNodeNum: () => number;
-  setActiveChat: (chat: number) => void;
-  setChatType: (type: MessageType) => void;
   saveMessage: (message: Message) => void;
   setMessageState: (params: SetMessageStateParams) => void;
   getMessages: (params: GetMessagesParams) => Message[];
@@ -79,16 +77,6 @@ export const useMessageStore = create<MessageStore>()(
       }));
     },
     getMyNodeNum: () => get().nodeNum,
-    setActiveChat: (chat) => {
-      set(produce((state: MessageStore) => {
-        state.activeChat = chat;
-      }));
-    },
-    setChatType: (type) => {
-      set(produce((state: MessageStore) => {
-        state.chatType = type;
-      }));
-    },
     saveMessage: (message: Message) => {
       set(
         produce((state: MessageStore) => {

src/core/stores/messageStore/messageStore.test.ts

@@ -122,13 +122,6 @@ describe("useMessageStore", () => {
     expect(useMessageStore.getState().nodeNum).toBe(myNodeNum);
   });
 
-  it("should set activeChat and chatType", () => {
-    useMessageStore.getState().setActiveChat(otherNodeNum1);
-    useMessageStore.getState().setChatType(MessageType.Direct);
-    expect(useMessageStore.getState().activeChat).toBe(otherNodeNum1);
-    expect(useMessageStore.getState().chatType).toBe(MessageType.Direct);
-  });
-
   describe("saveMessage", () => {
     it("should save a direct message with correct Map structure", () => {
       useMessageStore.getState().saveMessage(directMessageToOther1);

src/core/utils/test.tsx

@@ -1,12 +1,80 @@
-import { render } from "@testing-library/react";
+import {
-import type { ReactElement } from "react";
+  createMemoryHistory,
+  createRouter,
+  Outlet,
+  RootRoute,
+  Route,
+  RouterProvider,
+} from "@tanstack/react-router";
+import { render as rtlRender, RenderOptions } from "@testing-library/react";
+import type { FunctionComponent, ReactElement, ReactNode } from "react";
 
-function customRender(ui: ReactElement, options = {}) {
+// a root route for the test router.
-  return render(ui, {
+const rootRoute = new RootRoute({
-    // wrapper: ({ children }) => <MapProvider>{children}</MapProvider>,
+  component: () => (
-    ...options,
+    <>
-  });
+      <Outlet />
+    </>
+  ),
+});
+
+interface CustomRenderOptions extends Omit<RenderOptions, "wrapper"> {
+  initialEntries?: string[];
+  ui?: ReactElement;
 }
 
+let currentRouter: ReturnType<typeof createRouter> | null = null;
+
+/**
+ * Custom render function for testing components that need TanStack Router context.
+ * @param ui The main ReactElement to render (your component under test).
+ * @param options Custom render options including initialEntries for the router.
+ * @returns An object containing the testing-library render result and the router instance.
+ */
+const customRender = (
+  ui: ReactElement,
+  options: CustomRenderOptions = {},
+) => {
+  const { initialEntries = ["/"], ...renderOptions } = options;
+
+  // A specific route that renders the component under test (ui).
+  // It defaults to the first path in initialEntries or '/'.
+  const testComponentRoute = new Route({
+    getParentRoute: () => rootRoute,
+    path: initialEntries[0] || "/",
+    component: () => ui, // The component passed to render will be the element for this route
+  });
+
+  const routeTree = rootRoute.addChildren([testComponentRoute]);
+
+  const router = createRouter({
+    history: createMemoryHistory({ initialEntries }),
+    routeTree,
+    // You can add default error components or other router options if needed for tests.
+    // defaultErrorComponent: ({ error }) => <div>Test Error: {error.message}</div>,
+  });
+
+  currentRouter = router; // Store the router instance for access in tests
+
+  const Wrapper: FunctionComponent<{ children?: ReactNode }> = (
+    { children },
+  ) => {
+    return (
+      <>
+        <RouterProvider router={router} />
+        {children}
+      </>
+    );
+  };
+
+  const renderResult = rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
+
+  return {
+    ...renderResult,
+    router,
+  };
+};
+
 export * from "@testing-library/react";
 export { customRender as render };
+export const getTestRouter = () => currentRouter;

src/i18n/locales/en/messages.json

@@ -9,6 +9,10 @@
   "selectChatPrompt": {
     "text": "Select a channel or node to start messaging."
   },
+  "sendMessage": {
+    "placeholder": "Type your message here...",
+    "sendButton": "Send"
+  },
   "actionsMenu": {
     "addReactionLabel": "Add Reaction",
     "replyLabel": "Reply"

src/i18n/locales/en/ui.json

@@ -156,6 +156,24 @@
     "system": "Automatic",
     "changeTheme": "Change Color Scheme"
   },
+  "errorPage": {
+    "title": "This is a little embarrassing...",
+    "description1": "We are really sorry but an error occurred in the web client that caused it to crash. <br /> This is not supposed to happen, and we are working hard to fix it.",
+    "description2": "The best way to prevent this from happening again to you or anyone else is to report the issue to us.",
+    "reportInstructions": "Please include the following information in your report:",
+    "reportSteps": {
+      "step1": "What you were doing when the error occurred",
+      "step2": "What you expected to happen",
+      "step3": "What actually happened",
+      "step4": "Any other relevant information"
+    },
+    "reportLink": "You can report the issue to our <0>GitHub</0>",
+    "dashboardLink": "Return to the <0>dashboard</0>",
+    "detailsSummary": "Error Details",
+    "errorMessageLabel": "Error message:",
+    "stackTraceLabel": "Stack trace:",
+    "fallbackError": "{{error}}"
+  },
   "footer": {
     "text": "Powered by <0>▲ Vercel</0> | Meshtastic® is a registered trademark of Meshtastic LLC. | <1>Legal Information</1>",
     "commitSha": "Commit SHA: {{sha}}"

src/index.tsx

@@ -3,19 +3,29 @@ import { enableMapSet } from "immer";
 import "maplibre-gl/dist/maplibre-gl.css";
 import { StrictMode, Suspense } from "react";
 import { createRoot } from "react-dom/client";
-
-import { App } from "@app/App.tsx";
 import "./i18n/config.ts";
+import { createRouter, RouterProvider } from "@tanstack/react-router";
+import { routeTree } from "@app/routes.tsx";
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: ReturnType<typeof createRouter>;
+  }
+}
 
 const container = document.getElementById("root") as HTMLElement;
 const root = createRoot(container);
 
 enableMapSet();
 
+const router = createRouter({
+  routeTree,
+});
+
 root.render(
   <StrictMode>
     <Suspense fallback={null}>
-      <App />
+      <RouterProvider router={router} />
-    </Suspense>,
+    </Suspense>
   </StrictMode>,
 );

src/pages/Messages.tsx

@@ -9,7 +9,13 @@ import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf, Types } from "@meshtastic/core";
 import { getChannelName } from "@pages/Channels.tsx";
 import { HashIcon, LockIcon, LockOpenIcon } from "lucide-react";
-import { useCallback, useDeferredValue, useMemo, useState } from "react";
+import {
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import { MessageInput } from "@components/PageComponents/Messages/MessageInput.tsx";
 import { cn } from "@core/utils/cn.ts";
 import {
@@ -21,6 +27,7 @@ import { useSidebar } from "@core/stores/sidebarStore.tsx";
 import { Input } from "@components/UI/Input.tsx";
 import { randId } from "@core/utils/randId.ts";
 import { useTranslation } from "react-i18next";
+import { useNavigate, useParams } from "@tanstack/react-router";
 
 type NodeInfoWithUnread = Protobuf.Mesh.NodeInfo & { unreadCount: number };
 
@@ -37,18 +44,45 @@ export const MessagesPage = () => {
   const {
     getMyNodeNum,
     getMessages,
-    setActiveChat,
-    chatType,
-    activeChat,
-    setChatType,
     setMessageState,
   } = useMessageStore();
+  const params = useParams({ from: "", shouldThrow: false });
+  const navigate = useNavigate();
   const { toast } = useToast();
   const { isCollapsed } = useSidebar();
   const [searchTerm, setSearchTerm] = useState<string>("");
   const { t } = useTranslation(["messages", "channels", "ui"]);
   const deferredSearch = useDeferredValue(searchTerm);
 
+  const chatType = params.type === "direct"
+    ? MessageType.Direct
+    : params.type === "broadcast"
+    ? MessageType.Broadcast
+    : undefined;
+  const activeChat = params.chatId ? Number(params.chatId) : undefined;
+
+  const allChannels = Array.from(channels.values());
+  const filteredChannels = allChannels.filter(
+    (ch) => ch.role !== Protobuf.Channel.Channel_Role.DISABLED,
+  );
+  const currentChannel = channels.get(activeChat);
+  const otherNode = getNode(activeChat);
+
+  const isDirect = chatType === MessageType.Direct;
+  const isBroadcast = chatType === MessageType.Broadcast;
+
+  const navigateToChat = useCallback((type: MessageType, chatId: number) => {
+    const typeParam = type === MessageType.Direct ? "direct" : "broadcast";
+    navigate({ to: `/messages/${typeParam}/${chatId}` });
+  }, [navigate]);
+
+  useEffect(() => {
+    if (!params.type && !params.chatId && filteredChannels.length > 0) {
+      const defaultChannel = filteredChannels[0];
+      navigateToChat(MessageType.Broadcast, defaultChannel.index);
+    }
+  }, [params.type, params.chatId, filteredChannels, navigateToChat]);
+
   const filteredNodes = (): NodeInfoWithUnread[] => {
     const lowerCaseSearchTerm = deferredSearch.toLowerCase();
 
@@ -69,16 +103,6 @@ export const MessagesPage = () => {
       });
   };
 
-  const allChannels = Array.from(channels.values());
-  const filteredChannels = allChannels.filter(
-    (ch) => ch.role !== Protobuf.Channel.Channel_Role.DISABLED,
-  );
-  const currentChannel = channels.get(activeChat);
-  const otherNode = getNode(activeChat);
-
-  const isDirect = chatType === MessageType.Direct;
-  const isBroadcast = chatType === MessageType.Broadcast;
-
   const sendText = useCallback(async (message: string) => {
     const isDirect = chatType === MessageType.Direct;
     const toValue = isDirect ? activeChat : MessageType.Broadcast;
@@ -116,10 +140,8 @@ export const MessagesPage = () => {
       } else {
         console.warn("sendText completed but messageId is undefined");
       }
-      // deno-lint-ignore no-explicit-any
     } catch (e: any) {
       console.error("Failed to send message:", e);
-      // Note: messageId might be undefined here if the error occurred before it was assigned
       const failedId = messageId ?? randId();
       if (chatType === MessageType.Broadcast) {
         setMessageState({
@@ -165,7 +187,7 @@ export const MessagesPage = () => {
       default:
         return (
           <div className="flex-1 flex items-center justify-center text-slate-500 p-4">
-            {t("messagesPage.selectChatPrompt")}
+            {t("selectChatPrompt.text", { ns: "messages" })}
           </div>
         );
     }
@@ -191,8 +213,7 @@ export const MessagesPage = () => {
             active={activeChat === channel.index &&
               chatType === MessageType.Broadcast}
             onClick={() => {
-              setChatType(MessageType.Broadcast);
+              navigateToChat(MessageType.Broadcast, channel.index);
-              setActiveChat(channel.index);
               resetUnread(channel.index);
             }}
           >
@@ -210,8 +231,7 @@ export const MessagesPage = () => {
     activeChat,
     chatType,
     isCollapsed,
-    setActiveChat,
+    navigateToChat,
-    setChatType,
     resetUnread,
   ]);
 
@@ -245,8 +265,7 @@ export const MessagesPage = () => {
               active={activeChat === node.num &&
                 chatType === MessageType.Direct}
               onClick={() => {
-                setChatType(MessageType.Direct);
+                navigateToChat(MessageType.Direct, node.num);
-                setActiveChat(node.num);
                 resetUnread(node.num);
               }}
             >
@@ -268,8 +287,7 @@ export const MessagesPage = () => {
       searchTerm,
       activeChat,
       chatType,
-      setActiveChat,
+      navigateToChat,
-      setChatType,
       resetUnread,
       hasNodeError,
     ],
@@ -319,7 +337,7 @@ export const MessagesPage = () => {
             )
             : (
               <div className="p-4 text-center text-slate-400 italic">
-                {t("messagesPage.sendMessagePrompt")}
+                {t("sendMessage.sendButton", { ns: "messages" })}
               </div>
             )}
         </div>

src/routeTree.gen.ts

@@ -0,0 +1,59 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+// Import Routes
+
+import { Route as rootRoute } from './routes/__root'
+
+// Create/Update Routes
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {}
+}
+
+// Create and export the route tree
+
+export interface FileRoutesByFullPath {}
+
+export interface FileRoutesByTo {}
+
+export interface FileRoutesById {
+  __root__: typeof rootRoute
+}
+
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: never
+  fileRoutesByTo: FileRoutesByTo
+  to: never
+  id: '__root__'
+  fileRoutesById: FileRoutesById
+}
+
+export interface RootRouteChildren {}
+
+const rootRouteChildren: RootRouteChildren = {}
+
+export const routeTree = rootRoute
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+/* ROUTE_MANIFEST_START
+{
+  "routes": {
+    "__root__": {
+      "filePath": "__root.tsx",
+      "children": []
+    }
+  }
+}
+ROUTE_MANIFEST_END */

src/routes.tsx

@@ -0,0 +1,79 @@
+import { createRoute, redirect } from "@tanstack/react-router";
+import { Dashboard } from "@pages/Dashboard/index.tsx";
+import MessagesPage from "@pages/Messages.tsx";
+import MapPage from "@pages/Map/index.tsx";
+import ConfigPage from "@pages/Config/index.tsx";
+import ChannelsPage from "@pages/Channels.tsx";
+import NodesPage from "@pages/Nodes.tsx";
+import { createRootRoute } from "@tanstack/react-router";
+import { App } from "./App.tsx";
+import { DialogManager } from "@components/Dialog/DialogManager.tsx";
+
+const rootRoute = createRootRoute({
+  component: App,
+});
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/",
+  component: Dashboard,
+  loader: () => {
+    // Redirect to the broadcast messages page on initial load
+    return redirect({ to: `/messages/broadcast/0`, replace: true });
+  },
+});
+
+const messagesRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/messages",
+  component: MessagesPage,
+});
+
+const messagesWithParamsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/messages/$type/$chatId",
+  component: MessagesPage,
+});
+
+const mapRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/map",
+  component: MapPage,
+});
+
+const configRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/config",
+  component: ConfigPage,
+});
+
+const channelsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/channels",
+  component: ChannelsPage,
+});
+
+const nodesRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/nodes",
+  component: NodesPage,
+});
+
+const dialogWithParamsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/dialog/$dialogId",
+  component: DialogManager,
+});
+
+export const routeTree = rootRoute.addChildren([
+  indexRoute,
+  messagesRoute,
+  messagesWithParamsRoute,
+  mapRoute,
+  configRoute,
+  channelsRoute,
+  nodesRoute,
+  dialogWithParamsRoute,
+]);
+
+export { rootRoute };

src/tests/setupTests.ts

@@ -5,16 +5,28 @@ import "@testing-library/jest-dom";
 import "@testing-library/user-event";
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
-import channelsEN from "@app/i18n/locales/en/channels.json";
+import channelsEN from "@app/i18n/locales/en/channels.json" with {
-import commandPaletteEN from "@app/i18n/locales/en/commandPalette.json";
+  type: "json",
-import commonEN from "@app/i18n/locales/en/common.json";
+};
-import deviceConfigEN from "@app/i18n/locales/en/deviceConfig.json";
+import commandPaletteEN from "@app/i18n/locales/en/commandPalette.json" with {
-import moduleConfigEN from "@app/i18n/locales/en/moduleConfig.json";
+  type: "json",
-import dashboardEN from "@app/i18n/locales/en/dashboard.json";
+};
-import dialogEN from "@app/i18n/locales/en/dialog.json";
+import commonEN from "@app/i18n/locales/en/common.json" with { type: "json" };
-import messagesEN from "@app/i18n/locales/en/messages.json";
+import deviceConfigEN from "@app/i18n/locales/en/deviceConfig.json" with {
-import nodesEN from "@app/i18n/locales/en/nodes.json";
+  type: "json",
-import uiEN from "@app/i18n/locales/en/ui.json";
+};
+import moduleConfigEN from "@app/i18n/locales/en/moduleConfig.json" with {
+  type: "json",
+};
+import dashboardEN from "@app/i18n/locales/en/dashboard.json" with {
+  type: "json",
+};
+import dialogEN from "@app/i18n/locales/en/dialog.json" with { type: "json" };
+import messagesEN from "@app/i18n/locales/en/messages.json" with {
+  type: "json",
+};
+import nodesEN from "@app/i18n/locales/en/nodes.json" with { type: "json" };
+import uiEN from "@app/i18n/locales/en/ui.json" with { type: "json" };
 
 enableMapSet();
 

vitest.config.ts

@@ -25,6 +25,6 @@ export default defineConfig({
     restoreMocks: true,
     root: path.resolve(process.cwd(), "./src"),
     include: ["**/*.{test,spec}.{ts,tsx}"],
-    setupFiles: ["./src/tests/setupTests.ts"],
+    setupFiles: ["./src/tests/setupTests.ts", "./src/core/utils/test.tsx"],
   },
 });