From ba4e37813d90a0a9ffc2dc970084babecd74c495 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Thu, 12 Feb 2026 12:41:12 +0000
Subject: [PATCH] Gate My List behind auth modal instead of in-page prompt

- Clicking My List when not logged in now opens the auth modal
  directly instead of navigating to a page with a sign-in button
- After successful login, auto-redirects to /library (My List)
- Works on both desktop header and mobile tab bar
- App.vue tracks a pending redirect path so the post-login
  navigation happens seamlessly
- Direct URL navigation to /library when not logged in also
  triggers the modal and redirects back to Films

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/App.vue                  | 35 ++++++++++++++++++++++++++++++-----
 src/components/AppHeader.vue | 20 +++++++++++++++-----
 src/components/MobileNav.vue | 16 +++++++++++++++-
 src/views/Browse.vue         | 26 ++++++++++++--------------
 4 files changed, 72 insertions(+), 25 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 88d13bd..c29073d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,19 +1,19 @@
 <template>
   <div id="app" class="min-h-screen">
     <!-- Shared Header -->
-    <AppHeader @openAuth="showAuthModal = true" />
+    <AppHeader @openAuth="handleOpenAuth" />
 
     <!-- Route Content -->
-    <RouterView @openAuth="showAuthModal = true" />
+    <RouterView @openAuth="handleOpenAuth" />
     
     <!-- Mobile Navigation (hidden on desktop) -->
-    <MobileNav />
+    <MobileNav @openAuth="handleOpenAuth" />
 
     <!-- Auth Modal (shared across all views) -->
     <AuthModal
       :isOpen="showAuthModal"
-      @close="showAuthModal = false"
-      @success="showAuthModal = false"
+      @close="handleAuthClose"
+      @success="handleAuthSuccess"
     />
     
     <!-- Toast Notifications -->
@@ -23,14 +23,39 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
 import { useAuthStore } from './stores/auth'
 import AppHeader from './components/AppHeader.vue'
 import AuthModal from './components/AuthModal.vue'
 import MobileNav from './components/MobileNav.vue'
 import ToastContainer from './components/ToastContainer.vue'
 
+const router = useRouter()
 const authStore = useAuthStore()
 const showAuthModal = ref(false)
+const pendingRedirect = ref<string | null>(null)
+
+/**
+ * Open the auth modal, optionally storing a redirect path
+ * to navigate to after successful login.
+ */
+function handleOpenAuth(redirect?: string) {
+  pendingRedirect.value = redirect || null
+  showAuthModal.value = true
+}
+
+function handleAuthClose() {
+  showAuthModal.value = false
+  pendingRedirect.value = null
+}
+
+function handleAuthSuccess() {
+  showAuthModal.value = false
+  if (pendingRedirect.value) {
+    router.push(pendingRedirect.value)
+    pendingRedirect.value = null
+  }
+}
 
 onMounted(async () => {
   // Initialize authentication on app mount
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 462a351..3c7d996 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -11,7 +11,7 @@
           <!-- Navigation - Desktop -->
           <nav v-if="showNav" class="hidden md:flex items-center gap-3">
             <button @click="handleFilmsClick" :class="isRoute('/') && !activeAlgorithm ? 'nav-button-active' : 'nav-button'">Films</button>
-            <router-link to="/library" :class="isRoute('/library') && !activeAlgorithm ? 'nav-button-active' : 'nav-button'" @click="clearFilter">My List</router-link>
+            <button @click="handleMyListClick" :class="isRoute('/library') && !activeAlgorithm ? 'nav-button-active' : 'nav-button'">My List</button>
 
             <!-- Inline Algorithm Buttons (xl+ screens where they fit) -->
             <button
@@ -223,7 +223,7 @@ interface Props {
 }
 
 interface Emits {
-  (e: 'openAuth'): void
+  (e: 'openAuth', redirect?: string): void
 }
 
 withDefaults(defineProps<Props>(), {
@@ -232,7 +232,7 @@ withDefaults(defineProps<Props>(), {
   showAuth: true,
 })
 
-defineEmits<Emits>()
+const emit = defineEmits<Emits>()
 
 const router = useRouter()
 const route = useRoute()
@@ -310,11 +310,21 @@ function handleFilmsClick() {
   }
 }
 
-/** Clear active filter (used when navigating to My List) */
-function clearFilter() {
+/**
+ * Navigate to My List if logged in, otherwise open the auth modal
+ * with a redirect so the user lands on My List after login.
+ */
+function handleMyListClick() {
   if (activeAlgorithm.value) {
     _setAlgorithm(activeAlgorithm.value as any) // toggle off
   }
+  if (!isAuthenticated.value && !nostrLoggedIn.value) {
+    emit('openAuth', '/library')
+    return
+  }
+  if (route.path !== '/library') {
+    router.push('/library')
+  }
 }
 
 function toggleDropdown() {
diff --git a/src/components/MobileNav.vue b/src/components/MobileNav.vue
index 0852cd2..1992054 100644
--- a/src/components/MobileNav.vue
+++ b/src/components/MobileNav.vue
@@ -93,9 +93,15 @@
 import { ref, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useContentDiscovery, type AlgorithmId } from '../composables/useContentDiscovery'
+import { useAuth } from '../composables/useAuth'
+import { useAccounts } from '../composables/useAccounts'
+
+const emit = defineEmits<{ (e: 'openAuth', redirect?: string): void }>()
 
 const router = useRouter()
 const route = useRoute()
+const { isAuthenticated } = useAuth()
+const { isLoggedIn: isNostrLoggedIn } = useAccounts()
 
 const {
   activeAlgorithm,
@@ -107,6 +113,7 @@ const {
 const showFilterSheet = ref(false)
 
 const isOnFilmsPage = computed(() => route.path === '/')
+const isLoggedInAnywhere = computed(() => isAuthenticated.value || isNostrLoggedIn.value)
 
 const navigate = (path: string) => {
   router.push(path)
@@ -126,11 +133,18 @@ function handleFilmsClick() {
   navigate('/')
 }
 
-/** Navigate to My List and clear any active filter */
+/**
+ * Navigate to My List if logged in, otherwise open the auth modal
+ * with a redirect so the user lands on My List after login.
+ */
 function handleMyListClick() {
   if (isFilterActive.value) {
     setAlgorithm(activeAlgorithm.value!) // toggle off
   }
+  if (!isLoggedInAnywhere.value) {
+    emit('openAuth', '/library')
+    return
+  }
   navigate('/library')
 }
 
diff --git a/src/views/Browse.vue b/src/views/Browse.vue
index 00b15a5..f3d5ff8 100644
--- a/src/views/Browse.vue
+++ b/src/views/Browse.vue
@@ -78,16 +78,8 @@
     <section class="relative pt-8 pb-20 px-4">
       <div class="mx-auto space-y-12">
 
-        <!-- ===== MY LIST TAB ===== -->
-        <template v-if="isMyListTab">
-          <!-- Not logged in -->
-          <div v-if="!isLoggedInAnywhere" class="text-center py-16">
-            <div class="text-white/50 text-lg mb-6">Sign in to save films to your list</div>
-            <button @click="$emit('openAuth')" class="hero-play-button inline-block">Sign In</button>
-          </div>
-
-          <!-- Logged in: library content -->
-          <template v-else>
+        <!-- ===== MY LIST TAB (only rendered when logged in) ===== -->
+        <template v-if="isMyListTab && isLoggedInAnywhere">
             <!-- Continue Watching -->
             <div v-if="continueWatching.length > 0" class="content-row">
               <h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-6 px-4 uppercase">Continue Watching</h2>
@@ -175,7 +167,6 @@
               <div class="text-white/50 text-lg mb-6">Your list is empty</div>
               <router-link to="/" class="hero-play-button inline-block text-decoration-none">Browse Films</router-link>
             </div>
-          </template>
         </template>
 
         <!-- ===== FILMS TAB: Filtered Grid ===== -->
@@ -274,7 +265,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted, computed, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import ContentRow from '../components/ContentRow.vue'
 import SplashIntro from '../components/SplashIntro.vue'
 import ContentDetailModal from '../components/ContentDetailModal.vue'
@@ -287,9 +278,10 @@ import { useContentDiscovery } from '../composables/useContentDiscovery'
 import { indeeHubFilms, bitcoinFilms, documentaries } from '../data/indeeHubFilms'
 import type { Content } from '../types/content'
 
-const emit = defineEmits<{ (e: 'openAuth'): void }>()
+const emit = defineEmits<{ (e: 'openAuth', redirect?: string): void }>()
 
 const route = useRoute()
+const router = useRouter()
 const contentStore = useContentStore()
 const { isAuthenticated, hasActiveSubscription } = useAuth()
 const { isLoggedIn: isNostrLoggedIn } = useAccounts()
@@ -369,8 +361,14 @@ function loadDummyLibrary() {
   rentedContent.value = documentaries.slice(0, 2)
 }
 
-// Load library data when the tab becomes active and user is logged in
+// If someone navigates directly to /library without being logged in,
+// open the auth modal and redirect back to Films.
 watch([isMyListTab, isLoggedInAnywhere], ([onListTab, loggedIn]) => {
+  if (onListTab && !loggedIn) {
+    emit('openAuth', '/library')
+    router.replace('/')
+    return
+  }
   if (onListTab && loggedIn) {
     loadDummyLibrary()
   }