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>
This commit is contained in:
Ole-Morten Duesund 2026-03-29 15:55:22 +02:00
commit fc1f7259c5
52 changed files with 5459 additions and 0 deletions

162
web/static/css/style.css Normal file
View file

@ -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;
}
}