Web UI: music channel, posted-to-Matrix glow, redesigned index, AVIF thumbnails

- Add music as a fourth channel (nav + theme color)
- Glowing themed border on cards that have been posted to Matrix
- Replace per-channel index sections with: "Pete just posted" strip,
  channel dashboard (last post, 24h count, totals), unified latest feed
- /img proxy: SSRF-guarded thumbnail re-encoder that resizes to 800px
  and runs avifenc -q 45, cached under data/img-cache

internal/web/templates/_card.html

@@ -1,17 +1,24 @@
 {{define "card"}}
 <a href="{{.Story.ArticleURL}}" target="_blank" rel="noopener noreferrer"
-   class="group block rounded-3xl bg-[color:var(--card)] border-2 border-[color:var(--ink)]/10 shadow-pete overflow-hidden hover:-translate-y-1 hover:shadow-pete-lg transition">
+   class="group block rounded-3xl bg-[color:var(--card)] border-2 {{if .Story.Posted}}border-theme-{{.Theme}} glow-theme-{{.Theme}}{{else}}border-[color:var(--ink)]/10{{end}} shadow-pete overflow-hidden hover:-translate-y-1 hover:shadow-pete-lg transition">
   {{if .Story.ImageURL}}
   <div class="aspect-[16/10] w-full overflow-hidden bg-[color:var(--ink)]/5">
-    <img src="{{.Story.ImageURL}}" alt="" loading="lazy"
+    <img src="{{thumb .Story.ImageURL}}" alt="" loading="lazy" decoding="async"
          class="h-full w-full object-cover group-hover:scale-105 transition duration-500">
   </div>
   {{end}}
   <div class="p-4 space-y-2">
-    <div class="flex items-center gap-2 text-xs">
+    <div class="flex items-center gap-2 text-xs flex-wrap">
+      {{if .ShowChannel}}{{$ch := channel .Story.Channel}}
+      <span class="inline-flex items-center rounded-full bg-theme-{{$ch.Theme}} text-white px-2.5 py-0.5 font-semibold uppercase tracking-wider">
+        <span aria-hidden="true" class="mr-1">{{$ch.Emoji}}</span>{{$ch.Title}}
+      </span>
+      <span class="text-[color:var(--ink)]/60 font-semibold">{{.Story.Source}}</span>
+      {{else}}
       <span class="inline-flex items-center rounded-full bg-theme-{{.Theme}} text-white px-2.5 py-0.5 font-semibold uppercase tracking-wider">
         {{.Story.Source}}
       </span>
+      {{end}}
       <span class="text-[color:var(--ink)]/50">{{timeAgo .Story.SeenAt}}</span>
     </div>
     <h3 class="font-display text-lg font-semibold leading-snug group-hover:underline underline-offset-2 decoration-theme-{{.Theme}}">

internal/web/templates/index.html

@@ -1,37 +1,81 @@
 {{define "title"}}{{.SiteTitle}} — your news feed{{end}}
 
 {{define "main"}}
-<section class="mt-2 mb-10 sm:mb-14 text-center">
+<section class="mt-2 mb-8 text-center">
   <h1 class="font-display text-4xl sm:text-6xl font-bold leading-tight">
     a friendlier news feed.
   </h1>
   <p class="mx-auto mt-3 max-w-xl text-base sm:text-lg text-[color:var(--ink)]/70">
     Pete reads RSS, sorts stories, and posts them to Matrix.
-    Here's what he's been reading lately.
+    Glowing cards are the ones he's posted.
   </p>
 </section>
 
-{{range .Sections}}
+{{if .JustPosted}}
+<section class="mb-10">
+  <div class="flex items-end justify-between gap-3 mb-4">
+    <h2 class="font-display text-xl sm:text-2xl font-bold">
+      <span aria-hidden="true">📡</span> Pete just posted
+    </h2>
+    <span class="text-xs text-[color:var(--ink)]/50">most recent posts to Matrix</span>
+  </div>
+  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+    {{range .JustPosted}}
+      {{template "card" dict "Story" . "Theme" .Channel "ShowChannel" true}}
+    {{end}}
+  </div>
+</section>
+{{end}}
+
+<section class="mb-10">
+  <div class="flex items-end justify-between gap-3 mb-4">
+    <h2 class="font-display text-xl sm:text-2xl font-bold">
+      <span aria-hidden="true">📊</span> Channels
+    </h2>
+    <span class="text-xs text-[color:var(--ink)]/50">last 24 hours</span>
+  </div>
+  <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
+    {{range .Stats}}
+    <a href="/{{.Channel.Slug}}"
+       class="block rounded-3xl bg-[color:var(--card)] border-2 border-[color:var(--ink)]/10 shadow-pete p-4 hover:-translate-y-1 hover:shadow-pete-lg transition">
+      <div class="flex items-center gap-2">
+        <span class="inline-flex items-center justify-center h-9 w-9 rounded-2xl bg-theme-{{.Channel.Theme}} text-white text-lg">
+          {{.Channel.Emoji}}
+        </span>
+        <span class="font-display text-lg font-semibold">{{.Channel.Title}}</span>
+      </div>
+      <dl class="mt-3 space-y-1 text-xs text-[color:var(--ink)]/70">
+        <div class="flex justify-between gap-2">
+          <dt>last post</dt>
+          <dd class="font-semibold text-[color:var(--ink)]">
+            {{if .HasLastPosted}}{{timeAgo .LastPostedAt}}{{else}}—{{end}}
+          </dd>
+        </div>
+        <div class="flex justify-between gap-2">
+          <dt>posted 24h</dt>
+          <dd class="font-semibold text-[color:var(--ink)]">{{.PostsToday}}</dd>
+        </div>
+        <div class="flex justify-between gap-2">
+          <dt>stories</dt>
+          <dd class="font-semibold text-[color:var(--ink)]">{{.Total}}</dd>
+        </div>
+      </dl>
+    </a>
+    {{end}}
+  </div>
+</section>
+
 <section class="mb-12">
   <div class="flex items-end justify-between gap-3 mb-4">
-    <div>
-      <h2 class="font-display text-2xl sm:text-3xl font-bold">
-        <span aria-hidden="true">{{.Channel.Emoji}}</span>
-        <a href="/{{.Channel.Slug}}" class="hover:underline underline-offset-4 decoration-theme-{{.Channel.Theme}} decoration-4">
-          {{.Channel.Title}}
-        </a>
-      </h2>
-      <p class="text-sm text-[color:var(--ink)]/60 mt-1">{{.Channel.Blurb}}</p>
-    </div>
-    <a href="/{{.Channel.Slug}}" class="hidden sm:inline-flex items-center gap-1 text-sm font-semibold rounded-full bg-theme-{{.Channel.Theme}} text-white px-4 py-2 shadow-pete hover:-translate-y-0.5 transition">
-      more →
-    </a>
+    <h2 class="font-display text-xl sm:text-2xl font-bold">
+      <span aria-hidden="true">🗞️</span> Latest across the feed
+    </h2>
+    <span class="text-xs text-[color:var(--ink)]/50">newest first, all channels</span>
   </div>
-
-  {{if .Stories}}
+  {{if .Latest}}
   <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-    {{range .Stories}}
-      {{template "card" dict "Story" . "Theme" $.Channel.Theme}}
+    {{range .Latest}}
+      {{template "card" dict "Story" . "Theme" .Channel "ShowChannel" true}}
     {{end}}
   </div>
   {{else}}
@@ -41,4 +85,3 @@
   {{end}}
 </section>
 {{end}}
-{{end}}