From 523d02055e195ff27fe6485a80570785608d2f4b Mon Sep 17 00:00:00 2001
From: Vasyl Vdovychenko <mrviduus@gmail.com>
Date: Tue, 28 Apr 2026 14:42:28 -0400
Subject: [PATCH] =?UTF-8?q?my-books=20v3:=20slice=2001=20=E2=80=94=20heade?=
 =?UTF-8?q?r=20reframe=20+=20mobile=20bottom-tabs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Restructure primary nav around personal surfaces (Home/Library) with
public catalog (Discover) demoted to secondary. Behind
myBooksV3.headerReframe — default OFF in prod (flip after slice 04
ships /home content).

Web:
- features.ts re-introduced with myBooksV3.headerReframe
- telemetry/myBooksV3.ts (header.click / home.landed)
- Header: Home/Library/Discover/Vocabulary for auth, Discover/About/
  Sign-in for unauth. Logo → /library when auth (until slice 03
  introduces /home), /  otherwise.
- UserMenu: drops My Library/Highlights/Vocabulary/My language
  (now in primary nav). Keeps Edit profile + Sign out.
- DiscoverMenu: label Books → Discover under flag.
- Header.test.tsx (5) + UserMenu.test.tsx (3) cover ON/OFF + auth.

Mobile:
- features.ts: myBooksV3HeaderReframe (default OFF)
- (tabs)/_layout.tsx: flag-gated reorder Home/Discover/+/Library/Vocab
  with Profile hidden via href: null.
- New UploadTabButton (raised center +) → /my-books/upload.
- New (tabs)/upload.tsx placeholder.

Prod env (DoD #0):
- deploy.yml: VITE_FEATURE_MYBOOKSV3_HEADER_REFRAME=false
---
 .github/workflows/deploy.yml                  |   4 +-
 apps/mobile/app/(tabs)/_layout.tsx            |  26 +++-
 apps/mobile/app/(tabs)/upload.tsx             |   6 +
 .../mobile/src/components/UploadTabButton.tsx |  57 +++++++++
 apps/mobile/src/lib/features.ts               |   3 +
 apps/web/src/components/DiscoverMenu.tsx      |   3 +-
 apps/web/src/components/Header.tsx            |  74 ++++++++++--
 .../src/components/__tests__/Header.test.tsx  | 113 ++++++++++++++++++
 apps/web/src/components/auth/UserMenu.tsx     |  96 ++++++++-------
 .../auth/__tests__/UserMenu.test.tsx          |  80 +++++++++++++
 apps/web/src/lib/features.ts                  |  12 ++
 apps/web/src/lib/telemetry/myBooksV3.ts       |  29 +++++
 apps/web/src/locales/en.json                  |   3 +
 packages/shared/src/i18n/en.json              |   3 +-
 14 files changed, 450 insertions(+), 59 deletions(-)
 create mode 100644 apps/mobile/app/(tabs)/upload.tsx
 create mode 100644 apps/mobile/src/components/UploadTabButton.tsx
 create mode 100644 apps/web/src/components/__tests__/Header.test.tsx
 create mode 100644 apps/web/src/components/auth/__tests__/UserMenu.test.tsx
 create mode 100644 apps/web/src/lib/features.ts
 create mode 100644 apps/web/src/lib/telemetry/myBooksV3.ts

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 7ac663e0..2034163a 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -49,7 +49,9 @@ jobs:
         run: |
           cd $PROJECT_DIR/apps/web
           pnpm install
-          VITE_API_URL=/api VITE_STORAGE_URL=https://textstack.app VITE_CANONICAL_URL=https://textstack.app pnpm build
+          VITE_API_URL=/api VITE_STORAGE_URL=https://textstack.app VITE_CANONICAL_URL=https://textstack.app \
+            VITE_FEATURE_MYBOOKSV3_HEADER_REFRAME=false \
+            pnpm build
 
       - name: Deploy containers
         run: |
diff --git a/apps/mobile/app/(tabs)/_layout.tsx b/apps/mobile/app/(tabs)/_layout.tsx
index ea15d537..538bfd49 100644
--- a/apps/mobile/app/(tabs)/_layout.tsx
+++ b/apps/mobile/app/(tabs)/_layout.tsx
@@ -5,7 +5,10 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Ionicons } from '@expo/vector-icons'
 import { useTheme } from '../../src/context/ThemeContext'
 import { useLanguage } from '../../src/context/LanguageContext'
+import { useAuth } from '../../src/context/AuthContext'
 import { typography } from '../../src/theme/typography'
+import { FEATURES } from '../../src/lib/features'
+import { UploadTabButton } from '../../src/components/UploadTabButton'
 
 function AnimatedTabIcon({ name, size, color, focused }: {
   name: keyof typeof Ionicons.glyphMap; size: number; color: string; focused: boolean
@@ -28,6 +31,7 @@ function AnimatedTabIcon({ name, size, color, focused }: {
 
 const TAB_ICONS: Record<string, { active: keyof typeof Ionicons.glyphMap; inactive: keyof typeof Ionicons.glyphMap }> = {
   Read:       { active: 'book', inactive: 'book-outline' },
+  Home:       { active: 'home', inactive: 'home-outline' },
   Discover:   { active: 'compass', inactive: 'compass-outline' },
   Library:    { active: 'library', inactive: 'library-outline' },
   Vocabulary: { active: 'school', inactive: 'school-outline' },
@@ -37,7 +41,9 @@ const TAB_ICONS: Record<string, { active: keyof typeof Ionicons.glyphMap; inacti
 export default function TabLayout() {
   const { colors } = useTheme()
   const { t } = useLanguage()
+  const { isAuthenticated } = useAuth()
   const insets = useSafeAreaInsets()
+  const v3 = FEATURES.myBooksV3HeaderReframe
 
   // On iOS the old hardcoded 88 already approximated the home-indicator
   // safe area. On Android the 60 didn't account for 3-button nav bars or
@@ -69,11 +75,12 @@ export default function TabLayout() {
       <Tabs.Screen
         name="index"
         options={{
-          title: t('nav.read'),
+          title: v3 ? t('nav.home') : t('nav.read'),
           headerShown: false,
-          tabBarIcon: ({ focused, color }) => (
-            <AnimatedTabIcon name={focused ? TAB_ICONS.Read.active : TAB_ICONS.Read.inactive} size={22} color={color} focused={focused} />
-          ),
+          tabBarIcon: ({ focused, color }) => {
+            const icon = v3 ? TAB_ICONS.Home : TAB_ICONS.Read
+            return <AnimatedTabIcon name={focused ? icon.active : icon.inactive} size={22} color={color} focused={focused} />
+          },
         }}
       />
       <Tabs.Screen
@@ -85,6 +92,15 @@ export default function TabLayout() {
           ),
         }}
       />
+      <Tabs.Screen
+        name="upload"
+        options={{
+          title: '',
+          // v3 only: render raised + button. Otherwise hide tab entirely.
+          href: v3 && isAuthenticated ? '/my-books/upload' : null,
+          tabBarButton: v3 && isAuthenticated ? () => <UploadTabButton /> : undefined,
+        }}
+      />
       <Tabs.Screen
         name="library"
         options={{
@@ -107,6 +123,8 @@ export default function TabLayout() {
         name="profile"
         options={{
           title: t('nav.profile'),
+          // v3 hides Profile from bottom tabs (accessible via header avatar).
+          href: v3 ? null : undefined,
           tabBarIcon: ({ focused, color }) => (
             <AnimatedTabIcon name={focused ? TAB_ICONS.Profile.active : TAB_ICONS.Profile.inactive} size={22} color={color} focused={focused} />
           ),
diff --git a/apps/mobile/app/(tabs)/upload.tsx b/apps/mobile/app/(tabs)/upload.tsx
new file mode 100644
index 00000000..f73f01c2
--- /dev/null
+++ b/apps/mobile/app/(tabs)/upload.tsx
@@ -0,0 +1,6 @@
+// Placeholder route — actual screen lives at /my-books/upload.
+// The center "+" tab uses a custom tabBarButton that navigates there
+// directly; this component never renders.
+export default function UploadTabPlaceholder() {
+  return null
+}
diff --git a/apps/mobile/src/components/UploadTabButton.tsx b/apps/mobile/src/components/UploadTabButton.tsx
new file mode 100644
index 00000000..6d8b3cdd
--- /dev/null
+++ b/apps/mobile/src/components/UploadTabButton.tsx
@@ -0,0 +1,57 @@
+import { TouchableOpacity, View, StyleSheet, Platform } from 'react-native'
+import { Ionicons } from '@expo/vector-icons'
+import { useRouter } from 'expo-router'
+import { useTheme } from '../context/ThemeContext'
+import { useAuth } from '../context/AuthContext'
+
+export function UploadTabButton() {
+  const { colors } = useTheme()
+  const { isAuthenticated } = useAuth()
+  const router = useRouter()
+
+  const onPress = () => {
+    if (!isAuthenticated) {
+      router.push('/auth/login')
+      return
+    }
+    router.push('/my-books/upload')
+  }
+
+  return (
+    <TouchableOpacity
+      accessibilityRole="button"
+      accessibilityLabel="Upload"
+      onPress={onPress}
+      activeOpacity={0.85}
+      style={styles.wrapper}
+    >
+      <View style={[styles.button, { backgroundColor: colors.primary, shadowColor: colors.text }]}>
+        <Ionicons name="add" size={28} color="#fff" />
+      </View>
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    top: -18,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1,
+  },
+  button: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    justifyContent: 'center',
+    alignItems: 'center',
+    ...Platform.select({
+      ios: {
+        shadowOffset: { width: 0, height: 3 },
+        shadowOpacity: 0.25,
+        shadowRadius: 6,
+      },
+      android: { elevation: 6 },
+    }),
+  },
+})
diff --git a/apps/mobile/src/lib/features.ts b/apps/mobile/src/lib/features.ts
index 07b0d94d..0e41a019 100644
--- a/apps/mobile/src/lib/features.ts
+++ b/apps/mobile/src/lib/features.ts
@@ -18,6 +18,9 @@ export const FEATURES = {
   readerOverlayV2: readBool(process.env.EXPO_PUBLIC_READER_OVERLAY_V2, true),
   // My Books v2 — Continue Reading shelf at top of Library (Phase 2 / slice 05).
   myBooksV2ContinueReading: readBool(process.env.EXPO_PUBLIC_MYBOOKS_V2_CONTINUE_READING, true),
+  // My Books v3 — header/tab reframe (Home/Discover/+/Library/Vocab on mobile).
+  // Default OFF in prod; enable AFTER slice 04 ships smart shelves on /home.
+  myBooksV3HeaderReframe: readBool(process.env.EXPO_PUBLIC_MYBOOKSV3_HEADER_REFRAME, false),
 } as const
 
 export type FeatureKey = keyof typeof FEATURES
diff --git a/apps/web/src/components/DiscoverMenu.tsx b/apps/web/src/components/DiscoverMenu.tsx
index 9f15e9e2..0214fcb5 100644
--- a/apps/web/src/components/DiscoverMenu.tsx
+++ b/apps/web/src/components/DiscoverMenu.tsx
@@ -3,6 +3,7 @@ import { LocalizedLink } from './LocalizedLink'
 import { useApi } from '../hooks/useApi'
 import { useTranslation } from '../hooks/useTranslation'
 import { getStorageUrl } from '../api/client'
+import { features } from '../lib/features'
 
 interface Genre {
   id: string
@@ -103,7 +104,7 @@ export function DiscoverMenu() {
         aria-expanded={open}
         aria-haspopup="true"
       >
-        {t('nav.books')}
+        {t(features.myBooksV3.headerReframe ? 'nav.discover' : 'nav.books')}
         <span className="discover-menu__chevron" aria-hidden="true">
           <svg width="10" height="6" viewBox="0 0 10 6" fill="none">
             <path d="M1 1L5 5L9 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
diff --git a/apps/web/src/components/Header.tsx b/apps/web/src/components/Header.tsx
index 5e86d1cc..cd4d108c 100644
--- a/apps/web/src/components/Header.tsx
+++ b/apps/web/src/components/Header.tsx
@@ -11,6 +11,8 @@ import { useQuickStats } from '../hooks/useQuickStats'
 import { StreakBadge } from './StreakBadge'
 import { VocabBadgePopup } from './VocabBadgePopup'
 import { UploadButton } from './library/UploadButton'
+import { features } from '../lib/features'
+import { emit } from '../lib/telemetry/myBooksV3'
 
 export function Header() {
   const [badgePopup, setBadgePopup] = useState(false)
@@ -21,20 +23,76 @@ export function Header() {
   const { t } = useTranslation()
   const quickStats = useQuickStats()
 
+  const v3 = features.myBooksV3.headerReframe
+  // /home doesn't exist until slice 03 — fall back to /library.
+  const homeTarget = '/library'
+
   return (
     <header className={`site-header ${isScrolled ? 'site-header--scrolled' : ''}`}>
       <div className="site-header__left">
-        <LocalizedLink to="/" className="site-header__brand" title={t('nav.brandTitle')}>
+        <LocalizedLink
+          to={v3 && isAuthenticated ? homeTarget : '/'}
+          className="site-header__brand"
+          title={t('nav.brandTitle')}
+          onClick={() => v3 && emit('header.click', { item: 'logo', auth: isAuthenticated })}
+        >
           <span className="site-header__wordmark">TextStack</span>
         </LocalizedLink>
         <nav className="site-header__nav-links">
-          <DiscoverMenu />
-          <LocalizedLink to="/vocabulary" className="site-header__nav-link" title={t('nav.vocabulary')}>
-            {t('nav.vocabulary')}
-          </LocalizedLink>
-          <LocalizedLink to="/about" className="site-header__nav-link site-header__nav-link--secondary" title={t('nav.aboutTextStack')}>
-            {t('nav.about')}
-          </LocalizedLink>
+          {v3 ? (
+            <>
+              {isAuthenticated && (
+                <LocalizedLink
+                  to={homeTarget}
+                  className="site-header__nav-link"
+                  title={t('nav.home')}
+                  onClick={() => emit('header.click', { item: 'home' })}
+                >
+                  {t('nav.home')}
+                </LocalizedLink>
+              )}
+              {isAuthenticated && (
+                <LocalizedLink
+                  to="/library"
+                  className="site-header__nav-link"
+                  title={t('nav.library')}
+                  onClick={() => emit('header.click', { item: 'library' })}
+                >
+                  {t('nav.library')}
+                </LocalizedLink>
+              )}
+              <DiscoverMenu />
+              {isAuthenticated && (
+                <LocalizedLink
+                  to="/vocabulary"
+                  className="site-header__nav-link"
+                  title={t('nav.vocabulary')}
+                  onClick={() => emit('header.click', { item: 'vocabulary' })}
+                >
+                  {t('nav.vocabulary')}
+                </LocalizedLink>
+              )}
+              {!isAuthenticated && (
+                <LocalizedLink
+                  to="/about"
+                  className="site-header__nav-link site-header__nav-link--secondary"
+                  title={t('nav.aboutTextStack')}
+                >
+                  {t('nav.about')}
+                </LocalizedLink>
+              )}
+            </>
+          ) : (
+            <>
+              <DiscoverMenu />
+              <LocalizedLink to="/vocabulary" className="site-header__nav-link" title={t('nav.vocabulary')}>
+                {t('nav.vocabulary')}
+              </LocalizedLink>
+              <LocalizedLink to="/about" className="site-header__nav-link site-header__nav-link--secondary" title={t('nav.aboutTextStack')}>
+                {t('nav.about')}
+              </LocalizedLink>
+            </>
+          )}
         </nav>
       </div>
       <div className="site-header__right">
diff --git a/apps/web/src/components/__tests__/Header.test.tsx b/apps/web/src/components/__tests__/Header.test.tsx
new file mode 100644
index 00000000..5e49feff
--- /dev/null
+++ b/apps/web/src/components/__tests__/Header.test.tsx
@@ -0,0 +1,113 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
+import { Header } from '../Header'
+
+const authState = { isAuthenticated: false, isLoading: false }
+
+vi.mock('../../context/AuthContext', () => ({
+  useAuth: () => authState,
+}))
+vi.mock('../../context/LanguageContext', () => ({
+  useLanguage: () => ({
+    language: 'en',
+    getLocalizedPath: (p: string) => `/en${p === '/' ? '' : p}`,
+    switchLanguage: () => {},
+  }),
+}))
+vi.mock('../../hooks/useScrolled', () => ({ useScrolled: () => false }))
+vi.mock('../../hooks/useDarkMode', () => ({ useDarkMode: () => ({ isDark: false, toggleTheme: () => {} }) }))
+vi.mock('../../hooks/useTranslation', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const map: Record<string, string> = {
+        'nav.home': 'Home',
+        'nav.library': 'Library',
+        'nav.discover': 'Discover',
+        'nav.vocabulary': 'Vocabulary',
+        'nav.about': 'About',
+        'nav.aboutTextStack': 'About TextStack',
+        'nav.brandTitle': 'TextStack',
+      }
+      return map[key] ?? key
+    },
+  }),
+}))
+vi.mock('../../hooks/useQuickStats', () => ({ useQuickStats: () => null }))
+vi.mock('../DiscoverMenu', () => ({ DiscoverMenu: () => <div data-testid="discover-menu">Discover</div> }))
+vi.mock('../auth/LoginButton', () => ({ LoginButton: () => <button>Sign in</button> }))
+vi.mock('../auth/UserMenu', () => ({ UserMenu: () => <div data-testid="user-menu" /> }))
+vi.mock('../library/UploadButton', () => ({ UploadButton: () => <button>Upload</button> }))
+vi.mock('../StreakBadge', () => ({ StreakBadge: () => null }))
+vi.mock('../VocabBadgePopup', () => ({ VocabBadgePopup: () => null }))
+
+const flagState = { v3: true }
+vi.mock('../../lib/features', () => ({
+  features: {
+    get myBooksV3() { return { headerReframe: flagState.v3 } },
+  },
+}))
+
+function renderHeader() {
+  return render(
+    <MemoryRouter>
+      <Header />
+    </MemoryRouter>
+  )
+}
+
+describe('Header (myBooksV3 reframe)', () => {
+  beforeEach(() => {
+    flagState.v3 = true
+    authState.isAuthenticated = false
+    authState.isLoading = false
+  })
+
+  it('flag ON + authenticated: shows Home / Library / Discover / Vocabulary, hides About', () => {
+    flagState.v3 = true
+    authState.isAuthenticated = true
+    renderHeader()
+    expect(screen.getByTitle('Home')).toBeInTheDocument()
+    expect(screen.getByTitle('Library')).toBeInTheDocument()
+    expect(screen.getByTestId('discover-menu')).toBeInTheDocument()
+    expect(screen.getByTitle('Vocabulary')).toBeInTheDocument()
+    expect(screen.queryByTitle('About TextStack')).not.toBeInTheDocument()
+  })
+
+  it('flag ON + unauthenticated: hides Home/Library/Vocabulary, keeps Discover + About', () => {
+    flagState.v3 = true
+    authState.isAuthenticated = false
+    renderHeader()
+    expect(screen.queryByTitle('Home')).not.toBeInTheDocument()
+    expect(screen.queryByTitle('Library')).not.toBeInTheDocument()
+    expect(screen.getByTestId('discover-menu')).toBeInTheDocument()
+    expect(screen.getByTitle('About TextStack')).toBeInTheDocument()
+  })
+
+  it('flag OFF: legacy structure (Discover + Vocabulary + About, no Home / Library)', () => {
+    flagState.v3 = false
+    authState.isAuthenticated = true
+    renderHeader()
+    expect(screen.queryByTitle('Home')).not.toBeInTheDocument()
+    expect(screen.queryByTitle('Library')).not.toBeInTheDocument()
+    expect(screen.getByTestId('discover-menu')).toBeInTheDocument()
+    expect(screen.getByTitle('Vocabulary')).toBeInTheDocument()
+    expect(screen.getByTitle('About TextStack')).toBeInTheDocument()
+  })
+
+  it('flag ON + authenticated: logo links to /en/library (home fallback until slice 03)', () => {
+    flagState.v3 = true
+    authState.isAuthenticated = true
+    renderHeader()
+    const brand = screen.getByTitle('TextStack')
+    expect(brand).toHaveAttribute('href', '/en/library')
+  })
+
+  it('flag ON + unauthenticated: logo links to /en (marketing root)', () => {
+    flagState.v3 = true
+    authState.isAuthenticated = false
+    renderHeader()
+    const brand = screen.getByTitle('TextStack')
+    expect(brand).toHaveAttribute('href', '/en')
+  })
+})
diff --git a/apps/web/src/components/auth/UserMenu.tsx b/apps/web/src/components/auth/UserMenu.tsx
index 4501123e..acf6936c 100644
--- a/apps/web/src/components/auth/UserMenu.tsx
+++ b/apps/web/src/components/auth/UserMenu.tsx
@@ -7,6 +7,7 @@ import { useTranslation } from '../../hooks/useTranslation'
 import { useOnline } from '../../hooks/useOnline'
 import { getAnonymousReader } from '@textstack/shared'
 import { getUserInitials } from '../../lib/userInitials'
+import { features } from '../../lib/features'
 
 export function UserMenu() {
   const { user, logout } = useAuth()
@@ -48,6 +49,7 @@ export function UserMenu() {
 
   const showAnimal = !avatarSrc && !!anon?.avatarPath && !anonImgFailed
   const nativeLang = user.nativeLanguage ? getLanguage(user.nativeLanguage) : null
+  const v3 = features.myBooksV3.headerReframe
 
   return (
     <>
@@ -87,56 +89,62 @@ export function UserMenu() {
               <span className="user-menu__email">{displaySubtitle}</span>
             </div>
             <hr className="user-menu__divider" />
-            <button
-              className="user-menu__item user-menu__item--lang"
-              onClick={() => { setOpen(false); setShowProfile(true) }}
-              title="Change your native language — used for translations in the reader"
-            >
-              <span className="user-menu__item-label">My language</span>
-              <span className="user-menu__item-value">
-                {nativeLang ? (
-                  <>
-                    <img
-                      src={getFlagUrl(nativeLang.code)}
-                      alt=""
-                      width="16"
-                      height="12"
-                      className="user-menu__flag"
-                    />
-                    {nativeLang.englishName}
-                  </>
-                ) : (
-                  <span className="user-menu__item-placeholder">Set language</span>
-                )}
-              </span>
-            </button>
+            {!v3 && (
+              <button
+                className="user-menu__item user-menu__item--lang"
+                onClick={() => { setOpen(false); setShowProfile(true) }}
+                title="Change your native language — used for translations in the reader"
+              >
+                <span className="user-menu__item-label">My language</span>
+                <span className="user-menu__item-value">
+                  {nativeLang ? (
+                    <>
+                      <img
+                        src={getFlagUrl(nativeLang.code)}
+                        alt=""
+                        width="16"
+                        height="12"
+                        className="user-menu__flag"
+                      />
+                      {nativeLang.englishName}
+                    </>
+                  ) : (
+                    <span className="user-menu__item-placeholder">Set language</span>
+                  )}
+                </span>
+              </button>
+            )}
             <button
               className="user-menu__item"
               onClick={() => { setOpen(false); setShowProfile(true) }}
             >
               Edit profile
             </button>
-            <LocalizedLink
-              to="/library"
-              className="user-menu__item"
-              onClick={() => setOpen(false)}
-            >
-              My Library
-            </LocalizedLink>
-            <LocalizedLink
-              to="/highlights"
-              className="user-menu__item"
-              onClick={() => setOpen(false)}
-            >
-              Highlights
-            </LocalizedLink>
-            <LocalizedLink
-              to="/vocabulary"
-              className="user-menu__item"
-              onClick={() => setOpen(false)}
-            >
-              Vocabulary
-            </LocalizedLink>
+            {!v3 && (
+              <>
+                <LocalizedLink
+                  to="/library"
+                  className="user-menu__item"
+                  onClick={() => setOpen(false)}
+                >
+                  My Library
+                </LocalizedLink>
+                <LocalizedLink
+                  to="/highlights"
+                  className="user-menu__item"
+                  onClick={() => setOpen(false)}
+                >
+                  Highlights
+                </LocalizedLink>
+                <LocalizedLink
+                  to="/vocabulary"
+                  className="user-menu__item"
+                  onClick={() => setOpen(false)}
+                >
+                  Vocabulary
+                </LocalizedLink>
+              </>
+            )}
             <hr className="user-menu__divider" />
             <button
               className="user-menu__item user-menu__item--danger"
diff --git a/apps/web/src/components/auth/__tests__/UserMenu.test.tsx b/apps/web/src/components/auth/__tests__/UserMenu.test.tsx
new file mode 100644
index 00000000..f1166974
--- /dev/null
+++ b/apps/web/src/components/auth/__tests__/UserMenu.test.tsx
@@ -0,0 +1,80 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
+import { UserMenu } from '../UserMenu'
+
+const authUser = {
+  id: 'u1',
+  email: 'a@b.com',
+  name: 'Test User',
+  picture: null,
+  isGuest: false,
+  nativeLanguage: 'en',
+}
+
+vi.mock('../../../context/AuthContext', () => ({
+  useAuth: () => ({ user: authUser, logout: () => {} }),
+}))
+vi.mock('../../../context/LanguageContext', () => ({
+  useLanguage: () => ({
+    language: 'en',
+    getLocalizedPath: (p: string) => `/en${p}`,
+    switchLanguage: () => {},
+  }),
+}))
+vi.mock('../../../hooks/useTranslation', () => ({
+  useTranslation: () => ({ t: (k: string) => k }),
+}))
+vi.mock('../../../hooks/useOnline', () => ({ useOnline: () => true }))
+vi.mock('@textstack/shared', () => ({ getAnonymousReader: () => null }))
+vi.mock('../../../lib/userInitials', () => ({ getUserInitials: () => 'TU' }))
+vi.mock('../../../data/languages', () => ({
+  getLanguage: () => ({ code: 'en', englishName: 'English' }),
+  getFlagUrl: () => '/flag-en.svg',
+}))
+vi.mock('../ProfileModal', () => ({ ProfileModal: () => null }))
+
+const flagState = { v3: true }
+vi.mock('../../../lib/features', () => ({
+  features: {
+    get myBooksV3() { return { headerReframe: flagState.v3 } },
+  },
+}))
+
+function open() {
+  render(
+    <MemoryRouter>
+      <UserMenu />
+    </MemoryRouter>
+  )
+  fireEvent.click(screen.getByRole('button', { name: /Test User/i }))
+}
+
+describe('UserMenu (myBooksV3)', () => {
+  beforeEach(() => { flagState.v3 = true })
+
+  it('flag ON: dropdown drops My Library / Highlights / Vocabulary / My language', () => {
+    flagState.v3 = true
+    open()
+    expect(screen.queryByText('My Library')).not.toBeInTheDocument()
+    expect(screen.queryByText('Highlights')).not.toBeInTheDocument()
+    expect(screen.queryByText('Vocabulary')).not.toBeInTheDocument()
+    expect(screen.queryByText('My language')).not.toBeInTheDocument()
+  })
+
+  it('flag ON: keeps Edit profile + Sign out', () => {
+    flagState.v3 = true
+    open()
+    expect(screen.getByText('Edit profile')).toBeInTheDocument()
+    expect(screen.getByText('Sign out')).toBeInTheDocument()
+  })
+
+  it('flag OFF: legacy items still present', () => {
+    flagState.v3 = false
+    open()
+    expect(screen.getByText('My Library')).toBeInTheDocument()
+    expect(screen.getByText('Highlights')).toBeInTheDocument()
+    expect(screen.getByText('Vocabulary')).toBeInTheDocument()
+    expect(screen.getByText('My language')).toBeInTheDocument()
+  })
+})
diff --git a/apps/web/src/lib/features.ts b/apps/web/src/lib/features.ts
new file mode 100644
index 00000000..ba940da7
--- /dev/null
+++ b/apps/web/src/lib/features.ts
@@ -0,0 +1,12 @@
+const isDev = import.meta.env.DEV
+const env = (key: string): boolean | undefined => {
+  const v = (import.meta.env as Record<string, string | undefined>)[key]
+  if (v === undefined) return undefined
+  return v === 'true' || v === '1'
+}
+
+export const features = {
+  myBooksV3: {
+    headerReframe: env('VITE_FEATURE_MYBOOKSV3_HEADER_REFRAME') ?? isDev,
+  },
+} as const
diff --git a/apps/web/src/lib/telemetry/myBooksV3.ts b/apps/web/src/lib/telemetry/myBooksV3.ts
new file mode 100644
index 00000000..824b1fe7
--- /dev/null
+++ b/apps/web/src/lib/telemetry/myBooksV3.ts
@@ -0,0 +1,29 @@
+type Params = Record<string, string | number | boolean | undefined | null>
+
+const isBrowser = typeof window !== 'undefined'
+const isDev =
+  typeof import.meta !== 'undefined' &&
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (import.meta as any).env?.DEV === true
+
+export type MyBooksV3Event =
+  | 'header.click'
+  | 'header.search.opened'
+  | 'home.landed'
+
+export function emit(event: MyBooksV3Event, params?: Params): void {
+  try {
+    const payload = { ...(params ?? {}), ts: Date.now() }
+    if (isDev) {
+      // eslint-disable-next-line no-console
+      console.debug('[myBooksV3]', event, payload)
+    }
+    if (!isBrowser) return
+    const gtag = (window as unknown as { gtag?: (...args: unknown[]) => void }).gtag
+    if (typeof gtag === 'function') {
+      gtag('event', event.replace('.', '_'), payload)
+    }
+  } catch {
+    // never break app for telemetry
+  }
+}
diff --git a/apps/web/src/locales/en.json b/apps/web/src/locales/en.json
index 7defe680..f945882c 100644
--- a/apps/web/src/locales/en.json
+++ b/apps/web/src/locales/en.json
@@ -271,6 +271,9 @@
   "nav": {
     "catalog": "Catalog",
     "books": "Books",
+    "home": "Home",
+    "library": "Library",
+    "discover": "Discover",
     "vocabulary": "Vocabulary",
     "highlights": "Highlights",
     "about": "About",
diff --git a/packages/shared/src/i18n/en.json b/packages/shared/src/i18n/en.json
index 5793e84f..daa49cd5 100644
--- a/packages/shared/src/i18n/en.json
+++ b/packages/shared/src/i18n/en.json
@@ -89,7 +89,7 @@
   },
   "nav": {
     "catalog": "Catalog",
-    "library": "My Library",
+    "library": "Library",
     "stats": "Stats",
     "vocabulary": "Vocabulary",
     "about": "About",
@@ -97,6 +97,7 @@
     "browseBooks": "Browse all books",
     "aboutTextStack": "About TextStack",
     "read": "Read",
+    "home": "Home",
     "discover": "Discover",
     "profile": "Profile"
   },