feat(navigation): add favorite entry and Menu tab

src/app/profile/components/profile-screen.module.css

@@ -3,13 +3,16 @@
   display: flex;
   flex-direction: column;
   gap: var(--page-section-gap, 14px);
-  overflow: hidden;
+  overflow: hidden auto;
   min-height: var(--app-viewport-height, 100dvh);
   box-sizing: border-box;
   padding:
     var(--app-safe-top, 0px)
     calc(var(--page-padding-x, 28px) + var(--app-safe-right, 0px))
-    calc(var(--page-padding-y, 20px) + var(--app-safe-bottom, 0px))
+    calc(
+      var(--page-padding-y, 20px) + var(--app-safe-bottom, 0px) +
+        var(--app-bottom-nav-height, 64px)
+    )
     calc(var(--page-padding-x, 28px) + var(--app-safe-left, 0px));
   background:
     radial-gradient(circle at 18% 6%, rgba(255, 206, 160, 0.22), transparent 28%),
@@ -52,9 +55,23 @@
 }
 
 .topBar {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
   margin: var(--page-padding-y, 18px) 0 -2px;
 }
 
+.pageTitle {
+  min-width: 0;
+  margin: 0;
+  color: #251a1f;
+  font-size: clamp(22px, 5.185vw, 28px);
+  font-weight: 900;
+  letter-spacing: -0.03em;
+  text-align: center;
+}
+
 .userSlot {
   padding: var(--responsive-card-padding, 18px);
   border: 1px solid rgba(25, 19, 22, 0.06);

src/app/profile/profile-screen.tsx

@@ -4,7 +4,12 @@ import { Download, LogOut, MessageCircleQuestion } from "lucide-react";
 import { signOut } from "next-auth/react";
 
 import { BackButton } from "@/app/_components";
-import { MobileShell } from "@/app/_components/core";
+import {
+  AppBottomNav,
+  FavoriteEntryButton,
+  MobileShell,
+} from "@/app/_components/core";
+import { getCharacterBySlug } from "@/data/constants/character";
 import {
   resolveGlobalRouteContext,
   type GlobalReturnToValue,
@@ -13,6 +18,7 @@ import { setPendingLogoutNavigation } from "@/router/logout-navigation";
 import { useGlobalAppNavigator } from "@/router/use-global-app-navigator";
 import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context";
 import { useUserDispatch, useUserState } from "@/stores/user/user-context";
+import { getCharacterRoutes } from "@/router/routes";
 
 import { ProfileWalletCard, UserHeader } from "./components";
 import { getProfileViewModel } from "./profile-view-model";
@@ -28,6 +34,8 @@ export interface ProfileScreenProps {
 export function ProfileScreen({ returnTo }: ProfileScreenProps) {
   const navigator = useGlobalAppNavigator();
   const navigation = resolveGlobalRouteContext(returnTo);
+  const character = getCharacterBySlug(navigation.characterSlug);
+  const characterRoutes = getCharacterRoutes(navigation.characterSlug);
   const user = useUserState();
   const userDispatch = useUserDispatch();
   const auth = useAuthState();
@@ -61,6 +69,11 @@ export function ProfileScreen({ returnTo }: ProfileScreenProps) {
             variant="soft"
             analyticsKey="profile.back_to_chat"
           />
+          <h1 className={styles.pageTitle}>Menu</h1>
+          <FavoriteEntryButton
+            characterSlug={navigation.characterSlug}
+            tone="light"
+          />
         </div>
 
         <section className={`${styles.userSlot} ${styles.revealOne}`}>
@@ -175,6 +188,20 @@ export function ProfileScreen({ returnTo }: ProfileScreenProps) {
             </div>
           </section>
         ) : null}
+
+        <AppBottomNav
+          activeItem="menu"
+          privateZoomLabel={
+            character?.copy.privateZoomTitle ?? "Private Zoom"
+          }
+          onChatClick={() =>
+            navigator.push(navigation.splashUrl, { scroll: false })
+          }
+          onPrivateZoomClick={() =>
+            navigator.push(characterRoutes.privateZoom, { scroll: false })
+          }
+          onMenuClick={() => undefined}
+        />
       </div>
     </MobileShell>
   );