Migrate codebase to TanStack Router

package.json

@@ -62,6 +62,7 @@
     "@tanstack/react-query": "^5.56.2",
     "@tanstack/react-query-devtools": "^5.81.2",
     "@tanstack/react-query-persist-client": "^5.85.9",
+    "@tanstack/react-router": "^1.136.18",
     "@types/marked": "^5.0.2",
     "@types/react-helmet": "^6.1.11",
     "@vercel/speed-insights": "^1.2.0",
@@ -85,7 +86,6 @@
     "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.53.0",
     "react-resizable-panels": "^2.1.3",
-    "react-router-dom": "^6.26.2",
     "recharts": "^2.12.7",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.5.2",
@@ -101,6 +101,8 @@
   "devDependencies": {
     "@playwright/test": "^1.54.1",
     "@tailwindcss/typography": "^0.5.15",
+    "@tanstack/router-devtools": "^1.136.18",
+    "@tanstack/router-vite-plugin": "^1.136.18",
     "@types/node": "^22.5.5",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

src/components/invite/useInviteValidation.ts

@@ -1,23 +1,23 @@
 import { useState, useEffect } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useSearch } from "@tanstack/react-router";
 import { useToast } from "@/components/ui/use-toast";
 import {
   useInviteValidationQuery,
   useInviteMutation,
 } from "@/hooks/queries/useInviteValidationQuery";
 
 export function useInviteValidation() {
-  const [searchParams] = useSearchParams();
+  const search = useSearch();
   const [inviteToken, setInviteToken] = useState<string | null>(null);
   const { toast } = useToast();
 
   // Extract token from search params
   useEffect(() => {
-    const token = searchParams.get("invite");
+    const token = search.invite;
     if (token) {
       setInviteToken(token);
     }
-  }, [searchParams]);
+  }, [search]);
 
   const {
     data: inviteValidation,

src/components/layout/AppFooter.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "@tanstack/react-router";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 import { Settings } from "lucide-react";

src/components/layout/AppHeader/AdminActions.tsx

@@ -1,6 +1,6 @@
 import { Menu, Settings } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Link } from "react-router-dom";
+import { Link } from "@tanstack/react-router";
 import {
   DropdownMenu,
   DropdownMenuContent,

src/components/layout/AppHeader/AppBranding.tsx

@@ -1,4 +1,4 @@
-import { Link } from "react-router-dom";
+import { Link } from "@tanstack/react-router";
 import { Music } from "lucide-react";
 import { useAuth } from "@/contexts/AuthContext";
 import { useFestivalEdition } from "@/contexts/FestivalEditionContext";

src/components/layout/AppHeader/Navigation.tsx

@@ -1,4 +1,4 @@
-import { Link, useNavigate } from "react-router-dom";
+import { Link } from "@tanstack/react-router";
 import { ArrowLeft, Users } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
@@ -49,7 +49,6 @@ export function Navigation({
   isMobile,
 }: NavigationProps) {
   const { user } = useAuth();
-  const navigate = useNavigate();
 
   return (
     <div className="flex items-center gap-3">
@@ -58,7 +57,7 @@ export function Navigation({
         <TooltipButton
           variant="outline"
           size={isMobile ? "sm" : "default"}
-          onClick={() => navigate(-1)}
+          onClick={() => window.history.back()}
           className="border-purple-400/50 text-purple-300 hover:bg-purple-600 hover:text-white hover:border-purple-600 transition-colors"
           tooltip={backLabel}
           isMobile={isMobile}

src/components/layout/AppHeader/UserMenu.tsx

@@ -11,7 +11,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { UserAvatar } from "./UserAvatar";
 import { Database } from "@/integrations/supabase/types";
-import { Link } from "react-router-dom";
+import { Link } from "@tanstack/react-router";
 import { useUserPermissionsQuery } from "@/hooks/queries/auth/useUserPermissions";
 
 type Profile = Database["public"]["Tables"]["profiles"]["Row"];