feat: implement Phase 1 (auth) and Phase 2 (faves CRUD) foundation

Go backend with server-rendered HTML/HTMX frontend, SQLite database,
and filesystem image storage. Self-hostable single-binary architecture.

Phase 1 — Authentication & project foundation:
- Argon2id password hashing with timing-attack prevention
- Session management with cookie-based auth and periodic cleanup
- Login, signup (open/requests/closed modes), logout, forced password reset
- CSRF double-submit cookie pattern with HTMX auto-inclusion
- Proxy-aware real IP extraction (WireGuard/Tailscale support)
- Configurable base path for subdomain and subpath deployment
- Rate limiting on auth endpoints with background cleanup
- Security headers (CSP, X-Frame-Options, Referrer-Policy)
- Structured logging with slog, graceful shutdown
- Pico CSS + HTMX vendored and embedded via go:embed

Phase 2 — Faves CRUD with tags and images:
- Full CRUD for favorites with ownership checks
- Image upload with EXIF stripping, resize to 1920px, UUID filenames
- Tag system with HTMX autocomplete (prefix search, popularity-sorted)
- Privacy controls (public/private per fave, user-configurable default)
- Tag browsing, pagination, batch tag loading (avoids N+1)
- OpenGraph meta tags on public fave detail pages

Includes code quality pass: extracted shared helpers, fixed signup
request persistence bug, plugged rate limiter memory leak, removed
dead code, and logged previously-swallowed errors.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

web/static/css/style.css

@@ -0,0 +1,162 @@
+/* Favoritter — custom styles on top of Pico CSS */
+
+/* Skip navigation link for accessibility */
+.skip-link {
+    position: absolute;
+    top: -100%;
+    left: 0;
+    padding: 0.5rem 1rem;
+    background: var(--pico-primary-background);
+    color: var(--pico-primary-inverse);
+    z-index: 1000;
+    text-decoration: none;
+}
+
+.skip-link:focus {
+    top: 0;
+}
+
+/* Inline forms (e.g. logout button in nav) */
+.inline-form {
+    display: inline;
+    margin: 0;
+    padding: 0;
+}
+
+.nav-button {
+    margin: 0;
+    padding: 0.25rem 0.75rem;
+    font-size: 0.875rem;
+}
+
+/* Flash messages */
+.flash {
+    padding: 1rem;
+    border-radius: var(--pico-border-radius);
+    margin-bottom: 1rem;
+}
+
+.flash-success {
+    background: color-mix(in srgb, var(--pico-ins-color) 15%, transparent);
+    border: 1px solid var(--pico-ins-color);
+}
+
+.flash-error {
+    background: color-mix(in srgb, var(--pico-del-color) 15%, transparent);
+    border: 1px solid var(--pico-del-color);
+}
+
+.flash-info {
+    background: color-mix(in srgb, var(--pico-primary) 10%, transparent);
+    border: 1px solid var(--pico-primary);
+}
+
+/* Fave card grid */
+.fave-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 1rem;
+    list-style: none;
+    padding: 0;
+}
+
+.fave-card {
+    margin: 0;
+}
+
+.fave-card img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+    border-radius: var(--pico-border-radius) var(--pico-border-radius) 0 0;
+}
+
+.fave-card header {
+    padding: 0.5rem 1rem 0;
+}
+
+.fave-card footer {
+    padding: 0 1rem 0.5rem;
+}
+
+/* Privacy badge */
+.badge-private {
+    background: var(--pico-muted-border-color);
+    padding: 0.1rem 0.4rem;
+    border-radius: var(--pico-border-radius);
+    font-size: 0.75rem;
+    vertical-align: middle;
+}
+
+/* Tag chips */
+.tag-chip {
+    display: inline-block;
+    background: var(--pico-primary-focus);
+    color: var(--pico-primary);
+    padding: 0.15rem 0.5rem;
+    border-radius: 1rem;
+    font-size: 0.8rem;
+    text-decoration: none;
+    margin: 0.1rem;
+}
+
+.tag-chip:hover {
+    background: var(--pico-primary);
+    color: var(--pico-primary-inverse);
+}
+
+/* Tag autocomplete suggestions */
+.tag-suggestions {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border: 1px solid var(--pico-muted-border-color);
+    border-radius: var(--pico-border-radius);
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.tag-suggestions:empty {
+    display: none;
+}
+
+.tag-suggestion {
+    padding: 0.5rem 0.75rem;
+    cursor: pointer;
+}
+
+.tag-suggestion:hover,
+.tag-suggestion:focus {
+    background: var(--pico-primary-focus);
+    outline: none;
+}
+
+/* Fave detail actions */
+.fave-actions {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+}
+
+.fave-actions a,
+.fave-actions button {
+    margin: 0;
+}
+
+/* Current image preview in edit form */
+.current-image {
+    margin-bottom: 1rem;
+}
+
+.current-image img {
+    border-radius: var(--pico-border-radius);
+}
+
+/* Respect reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}

web/static/js/app.js

@@ -0,0 +1,71 @@
+// Favoritter — minimal JavaScript for HTMX configuration and form helpers.
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+(function () {
+    "use strict";
+
+    // Auto-include the CSRF token in all HTMX requests.
+    document.body.addEventListener("htmx:configRequest", function (event) {
+        var csrfCookie = getCookie("csrf_token");
+        if (csrfCookie) {
+            event.detail.headers["X-CSRF-Token"] = csrfCookie;
+        }
+
+        // For the tag search input, send the current value of the last
+        // comma-separated segment as the 'q' parameter.
+        var elt = event.detail.elt;
+        if (elt && elt.id === "tags") {
+            var val = elt.value;
+            var parts = val.split(",");
+            var lastPart = parts[parts.length - 1].trim();
+            event.detail.parameters["q"] = lastPart;
+        }
+    });
+
+    // Focus management after HTMX content swaps for accessibility.
+    document.body.addEventListener("htmx:afterSwap", function (event) {
+        var target = event.detail.target;
+        if (target) {
+            var autoFocus = target.querySelector("[autofocus]");
+            if (autoFocus) {
+                autoFocus.focus();
+            }
+        }
+    });
+
+    // After a successful HTMX DELETE, redirect if the element has a data-redirect attribute.
+    document.body.addEventListener("htmx:afterRequest", function (event) {
+        if (event.detail.successful && event.detail.verb === "delete") {
+            var redirect = event.detail.elt.getAttribute("data-redirect");
+            if (redirect) {
+                window.location.href = redirect;
+            }
+        }
+    });
+
+    // Tag autocomplete: add a selected tag to the tag input.
+    window.addTag = function (element, tagName) {
+        var input = document.getElementById("tags");
+        if (!input) return;
+
+        var parts = input.value.split(",").map(function (s) { return s.trim(); });
+        // Replace the last (incomplete) segment with the selected tag.
+        parts[parts.length - 1] = tagName;
+        // Add a trailing separator so the user can keep typing.
+        input.value = parts.join(", ") + ", ";
+        input.focus();
+
+        // Clear suggestions by removing all child elements.
+        var suggestions = document.getElementById("tag-suggestions");
+        if (suggestions) {
+            while (suggestions.firstChild) {
+                suggestions.removeChild(suggestions.firstChild);
+            }
+        }
+    };
+
+    function getCookie(name) {
+        var match = document.cookie.match(new RegExp("(^| )" + name + "=([^;]+)"));
+        return match ? match[2] : null;
+    }
+})();