feat(web-player): label each explore result with its kind

This commit is contained in:
2026-07-21 18:13:46 +02:00
parent 76eac308a6
commit 282a419bd0
3 changed files with 13 additions and 3 deletions
@@ -8,6 +8,7 @@
id: string | number;
title: string;
artist?: string | null;
typeLabel?: string;
coverSrc?: string | null;
coverSize?: 'small' | 'medium' | 'large';
hue: number;
@@ -24,6 +25,7 @@
id,
title,
artist,
typeLabel,
coverSrc,
coverSize = 'large',
hue,
@@ -35,6 +37,8 @@
onContextMenu,
badge
}: Props = $props();
const meta = $derived([typeLabel, artist].filter((part) => !!part).join(' · '));
</script>
<li
@@ -64,11 +68,11 @@
{/if}
<span class="truncate text-fg" {title}>{title}</span>
</div>
{#if badge || artist}
{#if badge || meta}
<div class="mt-0.5 flex min-w-0 items-center gap-1.5">
{@render badge?.()}
{#if artist}
<span class="truncate text-sm text-fg-3" title={artist}>{artist}</span>
{#if meta}
<span class="truncate text-sm text-fg-3" title={meta}>{meta}</span>
{/if}
</div>
{/if}
@@ -8,6 +8,7 @@
title: string;
href?: string;
subtitle?: string;
typeLabel?: string;
releaseYear?: number;
trackCount?: number;
trackIds?: (string | number)[];
@@ -20,6 +21,7 @@
title,
href,
subtitle,
typeLabel,
releaseYear,
trackCount,
trackIds = [],
@@ -29,6 +31,7 @@
const meta = $derived(
[
typeLabel,
subtitle,
releaseYear ? String(releaseYear) : undefined,
trackCount === undefined
@@ -275,6 +275,7 @@
<AlbumCard
id={album.id}
title={album.title}
typeLabel="Álbum"
releaseYear={album.releaseYear === null ? undefined : Number(album.releaseYear)}
trackCount={Number(album.trackCount)}
trackIds={album.coverTrackIds}
@@ -286,6 +287,7 @@
id={album.albumId}
href="/albums/youtube/{album.albumId}"
title={album.title}
typeLabel="Álbum"
subtitle={album.artist}
releaseYear={album.releaseYear === null ? undefined : Number(album.releaseYear)}
coverSrc={album.thumbnailUrl}
@@ -314,6 +316,7 @@
id={targetId(item)}
title={targetTitle(item)}
artist={targetArtist(item)}
typeLabel="Canción"
coverSrc={targetCoverSrc(item)}
hue={hueFor(targetId(item))}
explicit={targetExplicit(item)}