website/src/lib/components/library/LibraryDetail.svelte

<script lang="ts">
	import Icon from '@iconify/svelte';
	import type { LibraryEntry } from '#lib/library/entries';
	import type { LibraryStatus } from '#lib/library/apps';
	import Tag from '#lib/components/ui/Tag.svelte';
	import { tagIcon } from '#lib/library/gameProfile';

	let {
		entry,
		status,
		fallbackIcon,
		onclose
	}: { entry: LibraryEntry; status: LibraryStatus; fallbackIcon: string; onclose: () => void } = $props();

	const dates = $derived(
		[
			['Added', entry.added],
			['Started', entry.started],
			['Finished', entry.finished]
		].filter((row): row is [string, string] => !!row[1])
	);
</script>

<aside class="detail" aria-label="{entry.title} details">
	<button class="close" aria-label="Close details" onclick={onclose}><Icon icon="mdi:close" width="16" /></button>

	<div class="head">
		<span class="cover">
			{#if entry.image}
				<img src={entry.image} alt="" />
			{:else}
				<Icon icon={fallbackIcon} width="36" />
			{/if}
		</span>
		<div class="head-text">
			<h3>{entry.title}</h3>
			{#if entry.subtitle}<span class="muted">{entry.subtitle}</span>{/if}
			<span class="status" style:color="var(--{status.color})">{status.label}</span>
			{#if entry.rating !== null}
				<span class="rating"><Icon icon="mdi:star" width="14" />{entry.rating}/10</span>
			{/if}
		</div>
	</div>

	{#if entry.group}
		<div class="row"><Icon icon="mdi:layers-outline" width="15" />{[entry.group, entry.groupPosition].filter(Boolean).join(' ')}</div>
	{/if}
	{#each entry.facts as fact (fact)}
		<div class="row muted">{fact}</div>
	{/each}

	{#if entry.note}
		<p class="note">{entry.note}</p>
	{/if}

	{#if entry.tags.length}
		<div class="genres">
			{#each entry.tags as tag (tag)}
				<span class="player-tag"><Icon icon={tagIcon(tag)} width="13" />{tag}</span>
			{/each}
		</div>
	{/if}

	{#if entry.genres.length}
		<div class="genres">
			{#each entry.genres as genre, index (genre)}
				<Tag label={genre} colorIndex={index} />
			{/each}
		</div>
	{/if}

	{#if dates.length}
		<dl class="dates">
			{#each dates as [label, value] (label)}
				<dt>{label}</dt>
				<dd>{value}</dd>
			{/each}
		</dl>
	{/if}

	{#if entry.description}
		<p class="description">{entry.description}</p>
	{/if}

	<a class="link" href={entry.url} target="_blank" rel="noopener noreferrer">
		<Icon icon="mdi:open-in-new" width="14" />{entry.url.includes('imdb') ? 'IMDb' : 'Goodreads'}
	</a>
</aside>

<style>
	.detail {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
		padding: 0.9rem;
		overflow-y: auto;
		background: var(--background);
		border-left: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
		font-size: 0.85rem;
	}

	.close {
		position: absolute;
		top: 0.4rem;
		right: 0.4rem;
		display: grid;
		place-items: center;
		padding: 0.2rem;
		background: none;
		border: none;
		color: var(--muted);
	}

	.close:hover {
		color: var(--red);
	}

	.head {
		display: flex;
		gap: 0.75rem;
	}

	.cover {
		display: grid;
		flex-shrink: 0;
		place-items: center;
		width: 96px;
		aspect-ratio: 2 / 3;
		overflow: hidden;
		background: var(--dark-background);
		color: var(--muted);
	}

	.cover img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.head-text {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
		min-width: 0;
		padding-right: 1.2rem;
	}

	h3 {
		margin: 0;
		color: var(--accent);
		font-size: 1rem;
	}

	.status {
		font-weight: 700;
	}

	.rating {
		display: inline-flex;
		align-items: center;
		gap: 0.2rem;
		color: var(--yellow);
	}

	.row {
		display: flex;
		align-items: center;
		gap: 0.4rem;
	}

	.genres {
		display: flex;
		flex-wrap: wrap;
		gap: 0.3rem;
	}

	.note {
		margin: 0;
		font-style: italic;
	}

	.player-tag {
		display: inline-flex;
		align-items: center;
		gap: 0.25rem;
		padding: 0.05rem 0.45rem;
		border: 1px solid color-mix(in srgb, var(--foreground) 25%, transparent);
		font-size: 0.75rem;
	}

	.dates {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 0.15rem 0.75rem;
		margin: 0;
	}

	dt {
		color: var(--blue);
		font-weight: 700;
	}

	dd {
		margin: 0;
	}

	.description {
		margin: 0;
		color: var(--muted);
		line-height: 1.5;
	}

	.link {
		display: inline-flex;
		align-items: center;
		gap: 0.3rem;
		color: var(--accent);
	}
</style>