Big content update

src/components/media/CategoryList.astro

@@ -0,0 +1,74 @@
+---
+/**
+ * CategoryList.astro
+ * ---------------------------------------------------------------------------
+ * Renders a media kind's full library grouped by category: for each group a
+ * small subheader (the category name + item count), then a wrapping row of
+ * pills (title + optional status). Reuses the existing `.pill` + `<Icon>`
+ * pattern already established on the old reading page.
+ *
+ * Pass the output of `getGrouped(kind)` directly. When the list is empty the
+ * caller should fall back to `<Placeholder>` (see the pages); this component
+ * assumes at least one group.
+ */
+import Icon from '@components/Icon.astro';
+import type { MediaGroup } from '@lib/media';
+
+interface Props {
+  groups: MediaGroup[];
+  /** mdi icon shown before each pill. */
+  pillIcon?: string;
+}
+
+const { groups, pillIcon = 'play-circle' } = Astro.props;
+---
+
+<div class="flex flex-col gap-8">
+  {
+    groups.map((group) => (
+      <div class="flex flex-col gap-3">
+        <div class="flex items-baseline gap-2.5">
+          <h3
+            class="font-sans text-lg"
+            style="color: var(--color-text);"
+          >
+            {group.category}
+          </h3>
+          <span
+            class="font-mono text-[0.65rem] uppercase tracking-[0.18em]"
+            style="color: var(--color-text-muted);"
+          >
+            {group.items.length}
+          </span>
+        </div>
+        <ul class="flex flex-wrap gap-2.5">
+          {group.items.map((item) => (
+            <li
+              class="pill inline-flex items-center gap-1.5 text-sm"
+              title={item.note ?? ''}
+            >
+              <Icon name={pillIcon} class="h-3.5 w-3.5" />
+              <span>{item.title}</span>
+              {item.status && (
+                <span
+                  class="font-mono text-[0.6rem] uppercase tracking-[0.14em]"
+                  style="color: var(--color-accent);"
+                >
+                  {item.status}
+                </span>
+              )}
+              {item.year && (
+                <span
+                  class="font-mono text-[0.6rem] tracking-[0.04em]"
+                  style="color: var(--color-text-muted);"
+                >
+                  {item.year}
+                </span>
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+    ))
+  }
+</div>