yusiboyz/platform
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: Second Brain Platform

Browse Source 
Complete platform with unified design system and real API integration.

Apps: Dashboard, Fitness, Budget, Inventory, Trips, Reader, Media, Settings
Infrastructure: SvelteKit + Python gateway + Docker Compose
This commit is contained in:
Yusuf Suleman
2026-03-28 23:20:40 -05:00
commit d3e250e361
159 changed files with 44797 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
frontend-v2/src/routes/(app)/media/+page.svelte Normal file
View File

@@ -0,0 +1,75 @@
<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">MEDIA</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>