refactor(router): introduce app navigation manager

src/app/sidebar/sidebar-screen.tsx

@@ -3,12 +3,11 @@
 import { useEffect } from "react";
 import { LogOut } from "lucide-react";
 import { signOut } from "next-auth/react";
-import { useRouter } from "next/navigation";
 
 import { BackButton } from "@/app/_components";
 import { MobileShell } from "@/app/_components/core";
-import { getDefaultPayChannelForCountryCode } from "@/lib/payment/default_pay_channel";
-import { ROUTE_BUILDERS, ROUTES } from "@/router/routes";
+import { ROUTES } from "@/router/routes";
+import { useAppNavigator } from "@/router/use-app-navigator";
 import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context";
 import { useUserDispatch, useUserState } from "@/stores/user/user-context";
 
@@ -23,7 +22,7 @@ import styles from "./components/sidebar-screen.module.css";
 const FALLBACK_USERNAME = "User name";
 
 export function SidebarScreen() {
-  const router = useRouter();
+  const navigator = useAppNavigator();
   const user = useUserState();
   const userDispatch = useUserDispatch();
   const auth = useAuthState();
@@ -60,16 +59,6 @@ export function SidebarScreen() {
 
   const name = user.currentUser?.username ?? FALLBACK_USERNAME;
   const avatarUrl = user.avatarUrl ?? user.currentUser?.avatarUrl ?? null;
-  const defaultPayChannel = getDefaultPayChannelForCountryCode(
-    user.currentUser?.countryCode,
-  );
-  const vipSubscriptionUrl = ROUTE_BUILDERS.subscription("vip", {
-    payChannel: defaultPayChannel,
-  });
-  const topUpSubscriptionUrl = ROUTE_BUILDERS.subscription("topup", {
-    payChannel: defaultPayChannel,
-  });
-
   return (
     <MobileShell background="#fcf3f4">
       <div className={styles.shell}>
@@ -86,7 +75,7 @@ export function SidebarScreen() {
             name={name}
             avatarUrl={avatarUrl}
             isLoading={isInitializingUser}
-            onLoginClick={() => router.push(ROUTES.auth)}
+            onLoginClick={() => navigator.openAuth(ROUTES.sidebar)}
           />
         </section>
 
@@ -96,10 +85,10 @@ export function SidebarScreen() {
             onActivateVip={
               sidebarState === "vip"
                 ? undefined
-                : () => router.push(vipSubscriptionUrl)
+                : () => navigator.openSubscription({ type: "vip" })
             }
-            onTopUp={() => router.push(topUpSubscriptionUrl)}
-            onRulesClick={() => router.push(ROUTES.coinsRules)}
+            onTopUp={() => navigator.openSubscription({ type: "topup" })}
+            onRulesClick={() => navigator.push(ROUTES.coinsRules)}
           />
         </section>