feat: split admin surface into bookmarkable pages (#138)

backend/internal/web/templates/admin.html

@@ -1,7 +1,5 @@
-{{/* The owner's administrative page: everything that reaches past one Reader,
-     at its own address so it can be bookmarked rather than hunted for inside
-     the reading page. Owner-only at route registration (requireOwner), which
-     is why nothing in here re-tests who is asking. */}}
+{{/* Every owner-only address shares this shell; page content stays behind its
+     bookmarkable route so the active tab survives a reload. */}}
 {{define "admin"}}
 <!doctype html>
 <html lang="en">
@@ -12,27 +10,40 @@
   <title>BookmarkManager — Admin</title>
   <link rel="icon" href="/static/logo.svg" type="image/svg+xml">
   <link rel="stylesheet" href="/static/style.css">
+  <link rel="stylesheet" href="/static/admin.css">
   <link rel="preload" href="/static/fonts/instrument-serif-400-latin.woff2" as="font" type="font/woff2" crossorigin>
   <script src="/static/htmx.min.js" defer></script>
 </head>
 <body>
-<div class="sheet">
+<div class="sheet admin-sheet">
   <header class="topbar">
     <h1 class="brand">{{template "mark" .}}<span>Bookmark<em>Manager</em></span></h1>
-    {{/* Back to the library, no switch: this page belongs to neither library,
-         and the ember-lit switch says which library you are reading. */}}
-    <a class="ghost back" href="/">Library</a>
-    <form method="post" action="/logout">
-      <button type="submit" class="ghost">Log out</button>
-    </form>
+    <span class="topbar-actions">
+      <a class="ghost" href="/">Library</a>
+      <form method="post" action="/logout">
+        <button type="submit" class="ghost">Log out</button>
+      </form>
+    </span>
   </header>
 
-  {{/* The live region wraps the swapped block rather than being it: the
-       refresh replaces the section wholesale, and a region recreated on every
-       update is never announced. */}}
-  <div aria-live="polite">{{template "lanes" .Lanes}}</div>
+  <nav class="navrow" aria-label="Admin pages">
+    <a href="/admin" class="{{if eq .Page "overview"}}active{{end}}" {{if eq .Page "overview"}}aria-current="page"{{end}}>Overview</a>
+    <a href="/admin/lanes" class="{{if eq .Page "lanes"}}active{{end}}" {{if eq .Page "lanes"}}aria-current="page"{{end}}>Lanes</a>
+    <a href="/admin/readers" class="{{if eq .Page "readers"}}active{{end}}" {{if eq .Page "readers"}}aria-current="page"{{end}}>Readers</a>
+    <a href="/admin/series" class="{{if eq .Page "series"}}active{{end}}" {{if eq .Page "series"}}aria-current="page"{{end}}>Series</a>
+  </nav>
 
-  {{template "readers" .}}
+  <main class="page admin-page">
+    {{if eq .Page "lanes"}}
+    <div aria-live="polite">{{template "lanes" .Lanes}}</div>
+    {{else if eq .Page "readers"}}
+    {{template "readers" .}}
+    {{else if eq .Page "series"}}
+    <h2 class="sec">Series</h2>
+    {{else}}
+    <h2 class="sec">Overview</h2>
+    {{end}}
+  </main>
 </div>
 </body>
 </html>