feat(characters): use local character catalog

src/app/chat/components/chat-header.tsx

@@ -9,7 +9,7 @@ import type { ReactNode } from "react";
 import { Lock, Menu } from "lucide-react";
 
 import { BackButton } from "@/app/_components";
-import { ROUTES } from "@/router/routes";
+import { useActiveCharacterRoutes } from "@/providers/character-provider";
 import { useAppNavigator } from "@/router/use-app-navigator";
 
 import { BrowserHintOverlay } from "./browser-hint-overlay";
@@ -26,6 +26,7 @@ export function ChatHeader({
   showBrowserHint = false,
 }: ChatHeaderProps) {
   const navigator = useAppNavigator();
+  const characterRoutes = useActiveCharacterRoutes();
 
   return (
     <header className="flex shrink-0 flex-col items-stretch bg-transparent p-0">
@@ -35,7 +36,7 @@ export function ChatHeader({
           data-analytics-key="chat.open_signup"
           data-analytics-label="Open sign up"
           className="flex w-full cursor-pointer items-center justify-center gap-(--spacing-sm,8px) border-0 bg-accent px-(--spacing-md,12px) py-(--spacing-sm,8px) text-center text-(length:--responsive-caption,var(--font-size-sm,12px)) font-medium text-white"
-          onClick={() => navigator.openAuth(ROUTES.chat)}
+          onClick={() => navigator.openAuth(characterRoutes.chat)}
           aria-label="Sign up to unlock more features"
         >
           <Lock
@@ -52,7 +53,7 @@ export function ChatHeader({
       {!isGuest ? (
         <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-(--spacing-sm,8px) px-(--spacing-md,12px) py-(--spacing-sm,8px)">
           <BackButton
-            href={ROUTES.splash}
+            href={characterRoutes.splash}
             variant="dark"
             ariaLabel="Back to home"
             analyticsKey="chat.back_to_home"
@@ -67,7 +68,7 @@ export function ChatHeader({
             data-analytics-key="chat.open_menu"
             data-analytics-label="Open chat menu"
             className="flex size-(--responsive-icon-button-size,42px) cursor-pointer items-center justify-center rounded-full border border-[rgba(255,255,255,0.12)] bg-[rgba(13,11,20,0.7)] text-(--color-text-primary,#fff) shadow-[0_10px_24px_rgba(0,0,0,0.2)] backdrop-blur-md transition-[background,transform] duration-150 hover:bg-[rgba(28,24,39,0.82)] active:scale-96 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#f657a0]"
-            onClick={() => navigator.push(ROUTES.sidebar)}
+            onClick={() => navigator.push(characterRoutes.sidebar)}
             aria-label="Menu"
           >
             <Menu size={24} aria-hidden="true" />