0e9702d494
- /podcasts — new page with PodcastPlayer (headphones icon) - /downloads — old media page renamed (download icon) - /media — kept for backward compat (same as downloads) - Nav: Reader → Podcasts → Downloads → Brain Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
76 lines
2.8 KiB
Svelte
76 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/state';
|
|
import BookSearch from '$lib/components/media/BookSearch.svelte';
|
|
import MusicSearch from '$lib/components/media/MusicSearch.svelte';
|
|
import BookLibrary from '$lib/components/media/BookLibrary.svelte';
|
|
|
|
type MediaTab = 'books' | 'music' | 'library';
|
|
|
|
const urlMode = page.url.searchParams.get('mode');
|
|
let activeTab = $state<MediaTab>(urlMode === 'music' ? 'music' : urlMode === 'library' ? 'library' : 'books');
|
|
</script>
|
|
|
|
<div class="page">
|
|
<div class="app-surface">
|
|
<div class="page-header">
|
|
<div class="page-title">DOWNLOADS</div>
|
|
<div class="page-subtitle">
|
|
{#if activeTab === 'books'}Book Downloads
|
|
{:else if activeTab === 'music'}Music Downloads
|
|
{:else}Book Library{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="media-tabs">
|
|
<button class="tab" class:active={activeTab === 'books'} onclick={() => activeTab = 'books'}>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
|
|
Books
|
|
</button>
|
|
<button class="tab" class:active={activeTab === 'music'} onclick={() => activeTab = 'music'}>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
|
|
Music
|
|
</button>
|
|
<button class="tab" class:active={activeTab === 'library'} onclick={() => activeTab = 'library'}>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
|
|
Library
|
|
</button>
|
|
</div>
|
|
|
|
{#if activeTab === 'books'}
|
|
<BookSearch />
|
|
{:else if activeTab === 'music'}
|
|
<MusicSearch />
|
|
{:else}
|
|
<BookLibrary />
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.page-subtitle {
|
|
font-size: var(--text-2xl);
|
|
font-weight: 300;
|
|
color: var(--text-1);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.media-tabs {
|
|
display: flex; gap: var(--sp-1); margin-bottom: var(--sp-5);
|
|
border-bottom: 1px solid var(--border); padding-bottom: 0;
|
|
}
|
|
.tab {
|
|
display: flex; align-items: center; gap: var(--sp-2);
|
|
flex: 1; padding: 10px var(--sp-2) 12px; font-size: var(--text-base); font-weight: 500;
|
|
color: var(--text-3); background: none; border: none; border-bottom: 2px solid transparent;
|
|
cursor: pointer; font-family: var(--font); transition: all var(--transition);
|
|
text-align: center; justify-content: center; margin-bottom: -1px;
|
|
}
|
|
.tab:hover { color: var(--text-2); }
|
|
.tab.active { color: var(--text-1); border-bottom-color: var(--accent); font-weight: 600; }
|
|
.tab svg { width: 16px; height: 16px; flex-shrink: 0; }
|
|
|
|
@media (max-width: 768px) {
|
|
.page-subtitle { font-size: var(--text-xl); }
|
|
}
|
|
</style>
|