improved song entry layout

This commit is contained in:
2026-02-06 07:40:35 -08:00
parent 565429ecc6
commit 138b11f73b

View File

@@ -1,7 +1,8 @@
<script lang="ts">
import {
ExternalLink,
ListPlus,
Play as PlayIcon,
PlayIcon,
SkipForward,
Trash2,
} from "@lucide/svelte";
@@ -67,20 +68,43 @@
}
</script>
<div class="rounded border flex-row px-3 py-2">
<div class="flex flex-wrap w-fit items-baseline gap-x-2 gap-y-1">
<span class="rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground"
>{displayTypeNumber}</span
>
{animeName}
<div class="rounded border flex flex-wrap items-center gap-2 px-3 py-2">
<a
type="button"
target="_blank"
rel="noopener noreferrer"
class="btn-icon"
href={`https://nawdist.animemusicquiz.com/${fileName}`}
>
<ExternalLink class="icon-btn" />
</a>
<div class="flex flex-col">
<div class="flex flex-wrap w-fit items-baseline gap-x-2 gap-y-1">
{animeName}
<span class="rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground"
>{displayTypeNumber}</span
>
</div>
<div class="mt-1 w-fit text-foreground/80">
{songName}
<span class="text-sm text-muted-foreground">{artistDisplay}</span>
</div>
</div>
<div class="mt-1 w-fit text-foreground/80">
{songName}
<span class="text-sm text-muted-foreground">{artistDisplay}</span>
</div>
<div class="mt-2 w-fitflex flex-wrap items-center gap-2">
<div class="mt-2 flex items-center ml-auto gap-2">
{#if isQueued}
<span class="text-xs text-muted-foreground">Queued</span>
<button
type="button"
class="btn-icon"
title="Remove from queue"
aria-label="Remove from queue"
onclick={() => removeTrack(annSongId)}
>
<Trash2 class="icon-btn" />
</button>
{/if}
<button
type="button"
class="btn-icon"
@@ -125,20 +149,6 @@
<ListPlus class="icon-btn" />
</button>
{#if isQueued}
<button
type="button"
class="btn-icon"
title="Remove from queue"
aria-label="Remove from queue"
onclick={() => removeTrack(annSongId)}
>
<Trash2 class="icon-btn" />
</button>
<span class="text-xs text-muted-foreground">Queued</span>
{/if}
{#if !track}
<span class="text-xs text-muted-foreground">No audio file</span>
{/if}