From 04d80f545e577b1b4270598acd636c0aff19ab1d Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Thu, 12 Feb 2026 12:37:20 +0000
Subject: [PATCH] Fix Nostr icon and make algo filters responsive
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace broken shield SVG in auth modal Nostr login button
  with a proper key icon (matches Nostr's key-based identity)
- Show algorithm filter buttons inline on xl+ screens (1280px+)
  where there's room for all of them
- Collapse into "Algos" dropdown on md–xl screens to prevent
  overflow when the header is too narrow

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/components/AppHeader.vue | 17 ++++++++++++++---
 src/components/AuthModal.vue |  4 ++--
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 2af6566..462a351 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -13,8 +13,19 @@
             <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>
 
-            <!-- Algos Dropdown -->
-            <div class="relative algos-dropdown">
+            <!-- Inline Algorithm Buttons (xl+ screens where they fit) -->
+            <button
+              v-for="algo in algorithms"
+              :key="'inline-' + algo.id"
+              @click="handleAlgoSelect(algo.id)"
+              :class="activeAlgorithm === algo.id ? 'nav-button-active' : 'nav-button'"
+              class="hidden xl:inline-block"
+            >
+              {{ algo.label }}
+            </button>
+
+            <!-- Algos Dropdown (md–xl screens where inline buttons would overflow) -->
+            <div class="relative algos-dropdown xl:hidden">
               <button
                 @click="toggleAlgosMenu"
                 :class="activeAlgorithm ? 'nav-button-active' : 'nav-button'"
@@ -29,7 +40,7 @@
                   <div class="px-3 py-1 text-xs text-white/40 uppercase tracking-wider">Discovery Algorithms</div>
                   <button
                     v-for="algo in algorithms"
-                    :key="algo.id"
+                    :key="'dropdown-' + algo.id"
                     @click="handleAlgoSelect(algo.id)"
                     class="profile-menu-item flex items-center justify-between px-4 py-2.5 w-full text-left"
                   >
diff --git a/src/components/AuthModal.vue b/src/components/AuthModal.vue
index 07fb870..32379d9 100644
--- a/src/components/AuthModal.vue
+++ b/src/components/AuthModal.vue
@@ -97,8 +97,8 @@
             :disabled="isLoading"
             class="hero-info-button w-full flex items-center justify-center gap-2"
           >
-            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-              <path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/>
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
             </svg>
             Sign in with Nostr
           </button>