Fix Nostr icon and make algo filters responsive

- 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>
This commit is contained in:
Dorian
2026-02-12 12:37:20 +00:00
parent 7c995edcc2
commit 04d80f545e
2 changed files with 16 additions and 5 deletions

View File

@@ -13,8 +13,19 @@
<button @click="handleFilmsClick" :class="isRoute('/') && !activeAlgorithm ? 'nav-button-active' : 'nav-button'">Films</button> <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> <router-link to="/library" :class="isRoute('/library') && !activeAlgorithm ? 'nav-button-active' : 'nav-button'" @click="clearFilter">My List</router-link>
<!-- Algos Dropdown --> <!-- Inline Algorithm Buttons (xl+ screens where they fit) -->
<div class="relative algos-dropdown"> <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 (mdxl screens where inline buttons would overflow) -->
<div class="relative algos-dropdown xl:hidden">
<button <button
@click="toggleAlgosMenu" @click="toggleAlgosMenu"
:class="activeAlgorithm ? 'nav-button-active' : 'nav-button'" :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> <div class="px-3 py-1 text-xs text-white/40 uppercase tracking-wider">Discovery Algorithms</div>
<button <button
v-for="algo in algorithms" v-for="algo in algorithms"
:key="algo.id" :key="'dropdown-' + algo.id"
@click="handleAlgoSelect(algo.id)" @click="handleAlgoSelect(algo.id)"
class="profile-menu-item flex items-center justify-between px-4 py-2.5 w-full text-left" class="profile-menu-item flex items-center justify-between px-4 py-2.5 w-full text-left"
> >

View File

@@ -97,8 +97,8 @@
:disabled="isLoading" :disabled="isLoading"
class="hero-info-button w-full flex items-center justify-center gap-2" 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"> <svg class="w-5 h-5" fill="none" stroke="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"/> <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> </svg>
Sign in with Nostr Sign in with Nostr
</button> </button>