e420ed198b
Full-stack music production collaboration tool with: - SvelteKit frontend with Design System (CSS vars, 8 shared components) - Hono API with auth, projects, tracks, versions, comments - PostgreSQL + Drizzle ORM (8 tables, roles, permissions) - S3-compatible storage with presigned upload URLs - wavesurfer.js audio player with waveform visualization - A/B version comparison with synchronized playback - Timestamped comments with threading and resolve workflow - Magic Link authentication with Resend email integration - Background audio processing (ffmpeg transcode + waveform peaks) - Role-based access control (Owner, Engineers, Artist, Label, Management, Viewer) - Toast notifications, skeleton loading, responsive layout - Docker deployment setup (API + Web + Postgres) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
58 lines
935 B
Svelte
58 lines
935 B
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
|
|
let {
|
|
icon = '📁',
|
|
title,
|
|
description,
|
|
action,
|
|
}: {
|
|
icon?: string;
|
|
title: string;
|
|
description?: string;
|
|
action?: Snippet;
|
|
} = $props();
|
|
</script>
|
|
|
|
<div class="empty-state">
|
|
<span class="icon">{icon}</span>
|
|
<h3>{title}</h3>
|
|
{#if description}
|
|
<p>{description}</p>
|
|
{/if}
|
|
{#if action}
|
|
<div class="action">
|
|
{@render action()}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: var(--space-12) var(--space-4);
|
|
color: var(--color-text-tertiary);
|
|
}
|
|
|
|
.icon {
|
|
font-size: 2.5rem;
|
|
display: block;
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
h3 {
|
|
margin: 0 0 var(--space-2);
|
|
font-size: var(--text-base);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
.action {
|
|
margin-top: var(--space-4);
|
|
}
|
|
</style>
|