feat(backend): password login, session gate, and list page

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

backend/templates/app.html

@@ -0,0 +1,53 @@
+{{define "app"}}
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="color-scheme" content="dark light">
+  <title>mangaBookmark</title>
+  <link rel="stylesheet" href="/static/style.css">
+  <script src="/static/htmx.min.js" defer></script>
+  <script src="/static/filter.js" defer></script>
+</head>
+<body>
+  <header class="topbar">
+    <h1>mangaBookmark</h1>
+    <form method="post" action="/logout">
+      <button type="submit" class="ghost">Log out</button>
+    </form>
+  </header>
+
+  <input id="search" class="search" type="search" placeholder="Search titles…"
+         autocomplete="off" aria-label="Search titles">
+
+  <nav class="tabs" role="tablist">
+    <a role="tab" href="/?tab=all" class="{{if eq .Tab "all"}}active{{end}}"
+       hx-get="/ui/list?tab=all" hx-target="#list" hx-swap="innerHTML"
+       hx-push-url="/?tab=all" hx-on::after-request="setActiveTab(this)">All</a>
+    <a role="tab" href="/?tab=fav" class="{{if eq .Tab "fav"}}active{{end}}"
+       hx-get="/ui/list?tab=fav" hx-target="#list" hx-swap="innerHTML"
+       hx-push-url="/?tab=fav" hx-on::after-request="setActiveTab(this)">Favourites</a>
+  </nav>
+
+  {{if .Recent}}
+  <section class="recent">
+    <h2>Continue reading</h2>
+    <div class="recent-strip">
+      {{range .Recent}}
+      <a class="recent-card" href="{{.ContinueURL}}" target="_blank" rel="noopener noreferrer">
+        {{if .Cover}}<img src="{{.Cover}}" alt="" loading="lazy">{{end}}
+        <span class="recent-title">{{.Title}}</span>
+        <span class="recent-chapter">Ch {{.LastChapter}}</span>
+      </a>
+      {{end}}
+    </div>
+  </section>
+  {{end}}
+
+  <main id="list" class="list">
+    {{template "list" .}}
+  </main>
+</body>
+</html>
+{{end}}

backend/templates/card.html

@@ -0,0 +1,18 @@
+{{define "card"}}
+<article class="card" id="card-{{.Key}}" data-title="{{.Title}}">
+  <a class="cover" href="{{.ContinueURL}}" target="_blank" rel="noopener noreferrer">
+    {{if .Cover}}<img src="{{.Cover}}" alt="" loading="lazy">{{end}}
+  </a>
+  <div class="body">
+    <h3 class="title">{{.Title}}</h3>
+    <p class="meta">
+      <span class="site site-{{.Site}}">{{.Site}}</span>
+      <span class="chapter">Ch {{.LastChapter}}</span>
+      {{if .HasNewChapter}}<span class="new">NEW {{.LatestChapter}}</span>{{end}}
+    </p>
+    <div class="actions">
+      <a class="primary" href="{{.ContinueURL}}" target="_blank" rel="noopener noreferrer">Continue</a>
+    </div>
+  </div>
+</article>
+{{end}}

backend/templates/list.html

@@ -0,0 +1,9 @@
+{{define "list"}}
+{{if .Items}}
+  {{range .Items}}{{template "card" .}}{{end}}
+{{else}}
+  <p class="empty">
+    Nothing here yet. Bookmarks appear once the userscript records a chapter.
+  </p>
+{{end}}
+{{end}}

backend/templates/login.html

@@ -0,0 +1,24 @@
+{{define "login"}}
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="color-scheme" content="dark light">
+  <title>mangaBookmark</title>
+  <link rel="stylesheet" href="/static/style.css">
+</head>
+<body class="login-body">
+  <main class="login-card">
+    <h1>mangaBookmark</h1>
+    <form method="post" action="/login">
+      <label for="password">Password</label>
+      <input id="password" name="password" type="password"
+             autocomplete="current-password" autofocus required>
+      {{if .Error}}<p class="error">{{.Error}}</p>{{end}}
+      <button type="submit">Sign in</button>
+    </form>
+  </main>
+</body>
+</html>
+{{end}}