fix rebalance feature get route, moved to top level nav

web/src/components/NavBar.tsx

@@ -44,6 +44,7 @@ export default function NavBar({
           <NavLink to="/spend" className={linkClass}>Transactions</NavLink>
           <NavLink to="/income" className={linkClass}>Income</NavLink>
           <NavLink to="/transactions" className={linkClass}>Records</NavLink>
+          <NavLink to="/rebalance" className={linkClass}>Rebalance</NavLink>
           <NavLink to="/settings" className={linkClass}>Settings</NavLink>
         </nav>
 
@@ -88,6 +89,7 @@ export default function NavBar({
                 <NavLink to="/spend" className={mobileLinkClass}>Transactions</NavLink>
                 <NavLink to="/income" className={mobileLinkClass}>Income</NavLink>
                 <NavLink to="/transactions" className={mobileLinkClass}>Records</NavLink>
+                <NavLink to="/rebalance" className={mobileLinkClass}>Rebalance</NavLink>
                 <NavLink to="/settings" className={mobileLinkClass}>Settings</NavLink>
               </div>
               <div className="mt-3 border-t border-[--color-border] pt-3 flex items-center justify-between">

web/src/main.tsx

@@ -57,6 +57,7 @@ const BetaAccessPage = lazy(() => import("./pages/BetaAccessPage"));
 const VerifyPage = lazy(() => import("./pages/VerifyPage"));
 const ForgotPasswordPage = lazy(() => import("./pages/ForgotPasswordPage"));
 const ResetPasswordPage = lazy(() => import("./pages/ResetPasswordPage"));
+const RebalancePage = lazy(() => import("./pages/settings/RebalancePage"));
 
 const router = createBrowserRouter(
   createRoutesFromElements(
@@ -169,10 +170,10 @@ const router = createBrowserRouter(
         }
       />
       <Route
-        path="/settings/rebalance"
+        path="/rebalance"
         element={
           <RequireAuth>
-            <SettingsPage />
+            <RebalancePage />
           </RequireAuth>
         }
       />

web/src/pages/settings/CategoriesSettings.tsx

@@ -414,7 +414,7 @@ function CategoriesSettingsInner(
         <div className="flex items-center justify-between flex-wrap gap-2">
           <h2 className="text-lg font-semibold">Expense Categories</h2>
           <div className="flex items-center gap-3">
-            <Link className="btn" to="/settings/rebalance">
+            <Link className="btn" to="/rebalance">
               Rebalance pool
             </Link>
             {hasChanges && (

web/src/pages/settings/SettingsPage.tsx

@@ -10,9 +10,8 @@ import PlansSettings, { type PlansSettingsHandle } from "./PlansSettings";
 import AccountSettings from "./AccountSettings";
 import ThemeSettings from "./ThemeSettings";
 import ReconcileSettings from "./ReconcileSettings";
-import RebalancePage from "./RebalancePage";
 
-type Tab = "categories" | "rebalance" | "plans" | "account" | "theme" | "reconcile";
+type Tab = "categories" | "plans" | "account" | "theme" | "reconcile";
 
 export default function SettingsPage() {
   const location = useLocation();
@@ -22,7 +21,6 @@ export default function SettingsPage() {
     if (location.pathname.includes("/settings/account")) return "account";
     if (location.pathname.includes("/settings/theme")) return "theme";
     if (location.pathname.includes("/settings/reconcile")) return "reconcile";
-    if (location.pathname.includes("/settings/rebalance")) return "rebalance";
     return "categories";
   };
 
@@ -68,7 +66,6 @@ export default function SettingsPage() {
 
   const tabs = [
     { id: "categories" as const, label: "Expenses" },
-    { id: "rebalance" as const, label: "Rebalance" },
     { id: "plans" as const, label: "Fixed Expenses" },
     { id: "account" as const, label: "Account" },
     { id: "theme" as const, label: "Theme" },
@@ -138,8 +135,6 @@ export default function SettingsPage() {
             onDirtyChange={setIsDirty}
           />
         );
-      case "rebalance":
-        return <RebalancePage />;
       case "plans":
         return (
           <PlansSettings ref={plansRef} onDirtyChange={setIsDirty} />