reading: hide book-only stats on the papers/articles tabs, site letter on articles without an image

src/routes/trackers/books/+page.svelte

@@ -277,7 +277,8 @@
 		{/if}
 	{/if}
 
-	<dl class={['stats mb-10', kind !== 'book' && 'hidden']}>
+	{#if kind === 'book'}
+		<dl class="stats mb-10">
 			<div>
 				<dt>finished in {data.stats.year}</dt>
 				<dd>{numberFormat.format(data.stats.finishedThisYear)}</dd>
@@ -300,6 +301,7 @@
 				</dd>
 			</div>
 		</dl>
+	{/if}
 
 	{#if reading.length && !filtering}
 		<section class="mb-12" aria-labelledby="now-reading">

src/routes/trackers/books/[id=integer]/+page.svelte

@@ -126,7 +126,9 @@
 		<aside class="side">
 			{#if isArticle}
 				<div class="article-image" style:--hue={coverHue(book.site ?? book.title)}>
-					{#if book.cover}<img src={book.cover} alt="" referrerpolicy="no-referrer" />{/if}
+					{#if book.cover}<img src={book.cover} alt="" referrerpolicy="no-referrer" />{:else}<span
+							class="article-letter">{(book.site ?? book.title).charAt(0).toUpperCase()}</span
+						>{/if}
 				</div>
 			{:else}
 				<div class="cover-box">
@@ -591,6 +593,15 @@
 		);
 		box-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.5);
 	}
+	.article-letter {
+		position: absolute;
+		inset: 0;
+		display: grid;
+		place-items: center;
+		font-size: 3.5rem;
+		font-weight: 700;
+		color: rgb(255 255 255 / 0.9);
+	}
 	.article-image img {
 		width: 100%;
 		height: 100%;