Add personalization, outbound feeds, and PWA/push to the web UI

A multi-session build turning Pete's read-only web UI into something people
return to. Five phases, signed-in features keyed off the OIDC subject; anonymous
visitors keep the reverse-chron feed and localStorage-only state.

Phase 1 — per-user read + bookmark state: user_story_state table +
storage/userstate.go; auth-gated /api/read, /api/bookmark, /api/state and a
/bookmarks page; reader.js syncs state server-side for signed-in users. Also
hides the Matrix-posting UI when posting.enabled=false (web-only mode).

Phase 2 — outbound feeds: storage.ListForFeed + web/feed.go hand-build RSS 2.0
(content:encoded) and JSON Feed 1.1 (no new dep); /feed.xml, /feed.json and
per-channel variants; <link rel=alternate> discovery tags.

Phase 3 — "For you" + related: storage/rank.go scores recent unread candidates
by channel/source affinity + recency decay; RelatedStories via FTS5. ForYou rail
+ /for-you page; public /api/related feeds the reader's "You might also like".

Phase 4 — source-health dashboard: source_health table + storage/sourcehealth.go
(RecordPollResult, ListSourceHealth, SourceContentStats), written by the poller;
admin-gated /status page behind web.admin_subs.

Phase 5 — PWA + offline reader + Web Push: root-scoped manifest.webmanifest and
sw.js (app-shell precache, /api/article runtime cache for offline reading,
offline fallback, push/notificationclick handlers); PNG icons from pete.avif;
pwa.js registers the SW and drives a notifications toggle. Web Push adds
webpush-go, a [web.push] config block (pete -genvapid mints VAPID keys), a
push_subscriptions table, auth-gated subscribe/unsubscribe endpoints, and a
digest sender that pings each subscriber "N new stories" past their watermark,
honoring disabled-sources and pruning gone endpoints.

Tests added beside each new storage/web file; go test ./... and go vet clean.

internal/web/templates/layout.html

@@ -9,6 +9,17 @@
   <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="/static/css/output.css">
   <link rel="icon" href="/static/img/pete.avif" type="image/avif">
+  <link rel="manifest" href="/manifest.webmanifest">
+  <meta name="theme-color" content="#fbf3e3">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="default">
+  <meta name="apple-mobile-web-app-title" content="Pete">
+  <link rel="apple-touch-icon" href="/static/img/apple-touch-icon.png">
+  <link rel="alternate" type="application/rss+xml" title="{{.SiteTitle}} — all stories" href="/feed.xml">
+  <link rel="alternate" type="application/feed+json" title="{{.SiteTitle}} — all stories" href="/feed.json">
+  {{if .Active}}{{if ne .Active "bookmarks"}}
+  <link rel="alternate" type="application/rss+xml" title="{{.SiteTitle}} — {{.Active}}" href="/{{.Active}}/feed.xml">
+  {{end}}{{end}}
   <script>
     // Pick a palette phase from the browser clock and update it each minute.
     (function () {
@@ -79,6 +90,26 @@
             class="hidden shrink-0 items-center gap-1.5 rounded-full bg-[color:var(--card)] px-3 py-2 text-sm font-semibold shadow-pete border-2 border-[color:var(--ink)]/10 tabular-nums"></span>
       {{if .AuthEnabled}}
         {{if .User}}
+        <a href="/bookmarks" data-bookmarks-link
+           title="Your bookmarks"
+           class="inline-flex shrink-0 items-center justify-center rounded-full bg-[color:var(--card)] p-2 shadow-pete border-2 border-[color:var(--ink)]/10 hover:bg-[color:var(--ink)]/5 transition{{if eq .Active "bookmarks"}} bg-[color:var(--accent)]/20{{end}}">
+          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+               stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
+            <path d="M6 2h12a1 1 0 0 1 1 1v18l-7-4-7 4V3a1 1 0 0 1 1-1z"></path>
+          </svg>
+          <span class="sr-only">Bookmarks</span>
+        </a>
+        {{if .IsAdmin}}
+        <a href="/status" data-status-link
+           title="Source health"
+           class="inline-flex shrink-0 items-center justify-center rounded-full bg-[color:var(--card)] p-2 shadow-pete border-2 border-[color:var(--ink)]/10 hover:bg-[color:var(--ink)]/5 transition{{if eq .Active "status"}} bg-[color:var(--accent)]/20{{end}}">
+          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+               stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
+            <path d="M3 12h4l2 6 4-14 2 8h6"></path>
+          </svg>
+          <span class="sr-only">Source health</span>
+        </a>
+        {{end}}
         <a href="/auth/logout" data-account
            title="Signed in as {{.User.Display}}{{if .User.Email}} · {{.User.Email}}{{end}} — sign out"
            class="inline-flex shrink-0 items-center gap-2 rounded-full bg-[color:var(--card)] px-2.5 py-1.5 text-sm font-semibold shadow-pete border-2 border-[color:var(--ink)]/10 hover:bg-[color:var(--ink)]/5 transition">
@@ -112,6 +143,14 @@
         </button>
         <nav class="pete-channel-nav flex min-w-0 items-center gap-1 sm:gap-2 overflow-x-auto rounded-full bg-[color:var(--card)] p-1 shadow-pete border-2 border-[color:var(--ink)]/10">
           {{$active := .Active}}
+          {{if .User}}
+          <a href="/for-you"
+             title="Your personalized feed"
+             class="shrink-0 rounded-full px-3 py-2 text-sm font-semibold transition
+                    {{if eq $active "for-you"}}bg-[color:var(--accent)] text-[#1c1305] shadow-sm{{else}}hover:bg-[color:var(--ink)]/5{{end}}">
+            <span aria-hidden="true" class="mr-1">✨</span><span class="hidden sm:inline">For you</span>
+          </a>
+          {{end}}
           {{range .Channels}}
           <a href="/{{.Slug}}"
              class="shrink-0 rounded-full px-3 py-2 text-sm font-semibold transition
@@ -146,6 +185,20 @@
         <h2 class="font-display text-lg font-bold">Feed settings</h2>
         <button type="button" data-settings-close class="rounded-full px-2 py-1 text-sm text-[color:var(--ink)]/60 hover:bg-[color:var(--ink)]/5">esc</button>
       </div>
+      {{if .PushEnabled}}{{if .User}}
+      <div data-push-section hidden class="px-5 pt-4 pb-1">
+        <div class="flex items-center justify-between gap-3 rounded-2xl bg-[color:var(--ink)]/5 px-4 py-3">
+          <div class="min-w-0">
+            <div class="text-sm font-bold">🔔 Notifications</div>
+            <div data-push-note class="text-xs text-[color:var(--ink)]/60">Get a nudge when new stories land.</div>
+          </div>
+          <button type="button" data-push-toggle aria-pressed="false"
+                  class="shrink-0 rounded-full bg-[color:var(--accent)] px-3 py-2 text-sm font-semibold text-[#1c1305] shadow-sm hover:brightness-105 transition disabled:opacity-50 disabled:cursor-not-allowed">
+            Turn on notifications
+          </button>
+        </div>
+      </div>
+      {{end}}{{end}}
       <p class="px-5 pt-3 text-xs text-[color:var(--ink)]/60">Uncheck a feed to hide its stories. <span data-storage-note>Saved in this browser.</span></p>
       <div data-settings-list class="max-h-[55vh] overflow-y-auto p-3 space-y-1"></div>
       <div class="px-5 py-3 border-t border-[color:var(--ink)]/10 flex items-center justify-between text-xs">
@@ -163,12 +216,14 @@
         <div class="pete-reader-nav">
           <button type="button" data-reader-prev class="pete-reader-btn" title="Previous (←)" aria-label="Previous article">←</button>
           <button type="button" data-reader-next class="pete-reader-btn" title="Next (→)" aria-label="Next article">→</button>
+          <button type="button" data-reader-bookmark class="pete-reader-btn" style="display:none" title="Bookmark (b)" aria-label="Bookmark this story" aria-pressed="false">🔖 Save</button>
           <a data-reader-link target="_blank" rel="noopener noreferrer" class="pete-reader-btn pete-reader-btn-open" title="Open original (o)">Open&nbsp;↗</a>
           <button type="button" data-reader-close class="pete-reader-btn" title="Close (esc)" aria-label="Close reader">esc</button>
         </div>
       </div>
       <div class="pete-reader-scroll" data-reader-scroll>
         <article class="pete-reader-article" data-reader-article></article>
+        <div class="pete-reader-related" data-reader-related hidden></div>
       </div>
       <div class="pete-reader-hint">
         <span><kbd>←</kbd> <kbd>→</kbd> navigate · <kbd>o</kbd> open · <kbd>u</kbd> mark unread · <kbd>esc</kbd> close</span>
@@ -207,6 +262,7 @@
     window.PETE_SOURCES = {{.AllSources}};
     window.PETE_USER = {{if .User}}{ name: {{.User.Display}}, email: {{.User.Email}} }{{else}}null{{end}};
     window.PETE_PREFS = {{.UserPrefs}};
+    window.PETE_PUSH = {{if .PushEnabled}}{ enabled: true, publicKey: {{.PushPublicKey}} }{{else}}null{{end}};
   </script>
   <script src="/static/js/prefs.js" defer></script>
   <script src="/static/js/weather.js" defer></script>
@@ -214,5 +270,6 @@
   <script src="/static/js/search.js" defer></script>
   <script src="/static/js/settings.js" defer></script>
   <script src="/static/js/reader.js" defer></script>
+  <script src="/static/js/pwa.js" defer></script>
 </body>
 </html>{{end}}