website/src/lib/components/about/books/BooksSection.svelte

<script lang="ts">
	import Icon from '@iconify/svelte';
	import type { Book } from '#lib/content';
	import Panel from '#lib/components/ui/Panel.svelte';
	import BookShelfGrid from './BookShelfGrid.svelte';

	let { books }: { books: Book[] } = $props();

	const shelfColors = { read: 'green', reading: 'blue', 'want-to-read': 'magenta' };

	const byRating = (first: Book, second: Book) => (second.rating ?? -1) - (first.rating ?? -1);

	const read = $derived(books.filter((book) => book.shelf === 'read').sort(byRating));
	const reading = $derived(books.filter((book) => book.shelf === 'reading'));
	const wantToRead = $derived(books.filter((book) => book.shelf === 'want-to-read'));

	const shelfCounts = $derived([
		{ label: 'Read', count: read.length, color: shelfColors.read },
		{ label: 'Reading', count: reading.length, color: shelfColors.reading },
		{ label: 'Want to read', count: wantToRead.length, color: shelfColors['want-to-read'] }
	]);
	const shownCounts = $derived(shelfCounts.filter((shelf) => shelf.count > 0));
	const pagesRead = $derived(read.reduce((total, book) => total + (book.pages ?? 0), 0));
	const authorCount = $derived(new Set(read.flatMap((book) => book.authors)).size);
	const topGenres = $derived.by(() => {
		const counts = new Map<string, number>();
		read.flatMap((book) => book.genres).forEach((genre) => counts.set(genre, (counts.get(genre) ?? 0) + 1));
		return [...counts.entries()].sort((first, second) => second[1] - first[1]).slice(0, 3).map(([genre]) => genre);
	});
	const rows = $derived([
		['Pages read', pagesRead.toLocaleString('en-US')],
		['Authors', `${authorCount}`],
		...(topGenres.length ? [['Top genres', topGenres.join(', ')]] : [])
	]);
</script>

<div class="overview" class:single={!reading.length}>
	<Panel title="bookshelf" icon="mdi:bookshelf">
		<div class="fetch">
			{#each shelfCounts as shelf (shelf.label)}
				<div><span class="label">{shelf.label}</span>: <span style:color="var(--{shelf.color})">{shelf.count}</span></div>
			{/each}
			{#each rows as [label, value] (label)}
				<div><span class="label">{label}</span>: {value}</div>
			{/each}

			{#if shownCounts.length}
				<div class="breakdown" role="img" aria-label="Books by shelf">
					{#each shownCounts as shelf (shelf.label)}
						<span class="block" style:flex-grow={shelf.count} style:background="var(--{shelf.color})" title="{shelf.label}: {shelf.count}"></span>
					{/each}
				</div>
			{/if}
		</div>
	</Panel>

	{#if reading.length}
		<Panel title="Currently reading" icon="mdi:book-open-variant">
			<div class="reading">
				{#each reading as book (book.goodreadsId)}
					<a class="reading-row" href={book.url} target="_blank" rel="noopener noreferrer">
						{#if book.cover}
							<img src={book.cover} alt={book.title} loading="lazy" />
						{:else}
							<span class="cover-fallback"><Icon icon="mdi:book-outline" width="22" /></span>
						{/if}
						<span class="reading-text">
							<span class="title">{book.title}</span>
							<span class="muted detail">{book.authors.join(', ')}</span>
							<span class="muted detail">
								{[book.pages ? `${book.pages} pages` : '', book.published?.slice(0, 4) ?? ''].filter(Boolean).join(' · ')}
							</span>
						</span>
					</a>
				{/each}
			</div>
		</Panel>
	{/if}
</div>

{#if read.length}
	<BookShelfGrid title="Read" icon="mdi:check-circle-outline" books={read} />
{/if}

{#if wantToRead.length}
	<BookShelfGrid title="Want to read" icon="mdi:bookmark-outline" books={wantToRead} />
{/if}

<style>
	.overview {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0.75rem;
	}

	.overview.single {
		grid-template-columns: minmax(0, 1fr);
	}

	.fetch {
		line-height: 1.5;
	}

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

	.breakdown {
		display: flex;
		margin-top: 0.75rem;
	}

	.block {
		flex-basis: 0;
		min-width: 0.5rem;
		height: 1rem;
	}

	.reading {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.reading-row {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.4rem;
		border: 1px solid transparent;
	}

	.reading-row:hover {
		border-color: var(--accent);
	}

	.reading-row img,
	.cover-fallback {
		flex-shrink: 0;
		width: 52px;
		height: 78px;
		object-fit: cover;
	}

	.cover-fallback {
		display: grid;
		place-items: center;
		background: color-mix(in srgb, var(--foreground) 8%, transparent);
		color: var(--muted);
	}

	.reading-text {
		display: flex;
		flex-direction: column;
		gap: 0.2rem;
		min-width: 0;
	}

	.title,
	.detail {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.title {
		font-size: 0.9rem;
	}

	.detail {
		font-size: 0.75rem;
	}

	@container (max-width: 800px) {
		.overview {
			grid-template-columns: minmax(0, 1fr);
		}
	}
</style>