Baseline: full tree snapshot after git repository loss
The previous .git directory was found gutted (only info/ remained), so history is unrecoverable locally. This commit restores version control with the tree exactly as it stands: the working app, the preview-tracks launcher on the artist hero, the scrollable-track-previews design bundle (docs + approved mockups), and the Phase 0 validation artifacts.
This commit is contained in:
KeelrLeek committed
commit
a667b4b28e
161 files changed
+53170
No files matched your search
@@ -0,0 +1,234 @@
|
||||
<script>
|
||||
import { ui, playlistStore, refreshPlaylists, playAlbum, player } from "../lib/state.svelte.js";
|
||||
import * as api from "../lib/api.js";
|
||||
import Icon from "../components/Icon.svelte";
|
||||
|
||||
let tracks = $state([]);
|
||||
let renaming = $state(false);
|
||||
let nameInput = $state("");
|
||||
|
||||
const playlist = $derived(
|
||||
playlistStore.playlists.find((p) => p.id === ui.playlistId) ?? null,
|
||||
);
|
||||
|
||||
$effect(() => {
|
||||
if (ui.playlistId == null) return;
|
||||
api.playlistTracks(ui.playlistId).then((t) => (tracks = t));
|
||||
});
|
||||
|
||||
function fmtDuration(s) {
|
||||
if (s == null) return "";
|
||||
return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
function play(start = 0) {
|
||||
playAlbum(
|
||||
tracks.map((t) => ({ ...t, duration_secs: t.duration_secs })),
|
||||
playlist?.name ?? "Playlist",
|
||||
start,
|
||||
);
|
||||
}
|
||||
|
||||
async function removeTrack(position) {
|
||||
await api.removeFromPlaylist(ui.playlistId, position);
|
||||
tracks = await api.playlistTracks(ui.playlistId);
|
||||
await refreshPlaylists();
|
||||
}
|
||||
|
||||
async function del() {
|
||||
await api.deletePlaylist(ui.playlistId);
|
||||
await refreshPlaylists();
|
||||
ui.view = "library";
|
||||
ui.playlistId = null;
|
||||
}
|
||||
|
||||
const nowPlayingPath = $derived(
|
||||
player.queueIndex >= 0 ? player.queue[player.queueIndex]?.path : null,
|
||||
);
|
||||
</script>
|
||||
|
||||
{#if playlist}
|
||||
<div class="playlist-page">
|
||||
<header>
|
||||
<div class="cover"><Icon name="music" size={64} /></div>
|
||||
<div class="head-meta">
|
||||
<p class="kind">Playlist</p>
|
||||
<h1>{playlist.name}</h1>
|
||||
<p class="line">{tracks.length} tracks</p>
|
||||
<div class="actions">
|
||||
<button class="play-all" onclick={() => play()} disabled={tracks.length === 0}>
|
||||
<Icon name="play" size={15} /> Play
|
||||
</button>
|
||||
<button class="del" onclick={del}>Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{#if tracks.length === 0}
|
||||
<p class="empty-note">
|
||||
This playlist is empty. Open an album in your Library and use “Add to playlist”.
|
||||
</p>
|
||||
{:else}
|
||||
<div class="tracklist">
|
||||
{#each tracks as t (t.position)}
|
||||
<div class="trow" class:playing={nowPlayingPath === t.path}>
|
||||
<button class="ttitle-wrap" onclick={() => play(tracks.indexOf(t))}>
|
||||
<span class="ttitle">{t.title}</span>
|
||||
<span class="tartist">{t.artist}</span>
|
||||
</button>
|
||||
<span class="tdur">{fmtDuration(t.duration_secs)}</span>
|
||||
<button class="trm" title="Remove" onclick={() => removeTrack(t.position)}>
|
||||
<Icon name="x" size={15} />
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<p class="empty-note">Playlist not found.</p>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
header {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 64px;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.kind {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-secondary);
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 6px 0 10px;
|
||||
font-size: 40px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.line {
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.play-all {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 10px 26px;
|
||||
border-radius: 24px;
|
||||
background: var(--accent);
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.play-all:hover:not(:disabled) {
|
||||
background: var(--accent-hover);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.play-all:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.del {
|
||||
padding: 9px 16px;
|
||||
border-radius: 24px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.del:hover {
|
||||
color: #f15e6c;
|
||||
border-color: #f15e6c;
|
||||
}
|
||||
|
||||
.empty-note {
|
||||
color: var(--text-secondary);
|
||||
padding-top: 10vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tracklist {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.trow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.trow:hover {
|
||||
background: var(--bg-highlight);
|
||||
}
|
||||
|
||||
.trow.playing .ttitle {
|
||||
color: var(--accent-hover);
|
||||
}
|
||||
|
||||
.ttitle-wrap {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ttitle {
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tartist {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.tdur {
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.trm {
|
||||
color: var(--text-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.trm:hover {
|
||||
color: #f15e6c;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user