refactor(router): introduce app navigation manager

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

@@ -7,9 +7,9 @@
  */
 import type { ReactNode } from "react";
 import { Lock, Menu } from "lucide-react";
-import { useRouter } from "next/navigation";
 
 import { ROUTES } from "@/router/routes";
+import { useAppNavigator } from "@/router/use-app-navigator";
 
 import styles from "./chat-header.module.css";
 
@@ -19,7 +19,7 @@ export interface ChatHeaderProps {
 }
 
 export function ChatHeader({ isGuest, offerBanner }: ChatHeaderProps) {
-  const router = useRouter();
+  const navigator = useAppNavigator();
 
   if (isGuest) {
     return (
@@ -27,7 +27,7 @@ export function ChatHeader({ isGuest, offerBanner }: ChatHeaderProps) {
         <button
           type="button"
           className={styles.guestBanner}
-          onClick={() => router.push(ROUTES.auth)}
+          onClick={() => navigator.openAuth(ROUTES.chat)}
           aria-label="Sign up to unlock more features"
         >
           <Lock className={styles.guestBannerIcon} size={16} aria-hidden="true" />
@@ -46,7 +46,7 @@ export function ChatHeader({ isGuest, offerBanner }: ChatHeaderProps) {
         <button
           type="button"
           className={styles.menuButton}
-          onClick={() => router.push(ROUTES.sidebar)}
+          onClick={() => navigator.push(ROUTES.sidebar)}
           aria-label="Menu"
         >
           <Menu className={styles.menuIcon} size={24} aria-hidden="true" />