feat(web): improve UI responsiveness, polish, and update docs

- Add mobile/tablet responsive breakpoints to web UI
- Redesign cards as full-bleed poster layout with gradient overlay
- Add skeleton loading state, comic count badge, and search icon
- Switch to Docker image format for registry compatibility
- Add docker-build and docker-push Makefile targets with versioned tags
- Update README to document web UI, Docker deployment, and serve command

.dockerignore

@@ -0,0 +1,5 @@
+.git
+.github
+*.md
+library/
+*_test.go

.gitignore

@@ -20,3 +20,14 @@ go.work.sum
 
 # env file
 .env
+
+# Built binary
+yoink
+yoink.exe
+
+# Comic library (downloaded content)
+library/
+
+# IDE
+.vscode/
+.idea/

Dockerfile

@@ -0,0 +1,37 @@
+# ── Build stage ────────────────────────────────────────────────────────────
+FROM mcr.microsoft.com/oss/go/microsoft/golang:1.22-bullseye AS builder
+
+WORKDIR /app
+
+# Restore modules in a separate layer so it's cached until go.mod/go.sum change
+COPY go.mod go.sum ./
+RUN go mod download && go mod verify
+
+# Copy source and build a fully static binary
+COPY . .
+RUN CGO_ENABLED=0 GOOS=linux GOARCH=amd64 \
+    go build -ldflags="-s -w" -trimpath -o yoink .
+
+# ── Runtime stage ──────────────────────────────────────────────────────────
+# distroless/base-debian12:nonroot — minimal attack surface, non-root by default
+FROM gcr.io/distroless/base-debian12:nonroot
+
+LABEL org.opencontainers.image.title="yoink" \
+      org.opencontainers.image.description="Comic downloader web UI" \
+      org.opencontainers.image.source="https://git.brizzle.dev/bryan/yoink-go"
+
+WORKDIR /app
+
+COPY --from=builder --chown=nonroot:nonroot /app/yoink .
+
+ENV YOINK_LIBRARY=/library
+
+VOLUME ["/library"]
+EXPOSE 8080
+
+HEALTHCHECK --interval=30s --timeout=5s --start-period=5s --retries=3 \
+    CMD ["/app/yoink", "healthcheck"]
+
+USER nonroot
+
+CMD ["/app/yoink", "serve"]

Makefile

@@ -1,7 +1,9 @@
 BIN := yoink
 BUILD_DIR := build
+REGISTRY := git.brizzle.dev/bryan/yoink-go
+VERSION := $(shell git describe --tags --always --dirty)
 
-.PHONY: all windows linux darwin clean
+.PHONY: all windows linux darwin clean docker-build docker-push
 
 all: windows linux darwin
 
@@ -16,5 +18,15 @@ darwin:
 	GOOS=darwin GOARCH=amd64 go build -o $(BUILD_DIR)/$(BIN)-darwin-amd64
 	GOOS=darwin GOARCH=arm64 go build -o $(BUILD_DIR)/$(BIN)-darwin-arm64
 
+docker-build:
+	podman build --format docker \
+		-t $(REGISTRY):$(VERSION) \
+		-t $(REGISTRY):latest \
+		.
+
+docker-push: docker-build
+	podman push $(REGISTRY):$(VERSION)
+	podman push $(REGISTRY):latest
+
 clean:
 	rm -rf $(BUILD_DIR)

README.md

@@ -1,6 +1,6 @@
 # yoink
 
-A CLI tool for downloading comics from readallcomics.com and packaging them as `.cbz` archives.
+A tool for downloading comics from readallcomics.com and packaging them as `.cbz` archives. Available as a CLI command or a self-hosted web application.
 
 ## How it works
 
@@ -9,17 +9,33 @@ A CLI tool for downloading comics from readallcomics.com and packaging them as `
 3. Packages the images into a `.cbz` (Comic Book Zip) archive
 4. Cleans up downloaded images, keeping only the cover (`001`)
 
+---
+
 ## Installation
 
-Build from source (requires Go 1.22.3+):
+### From source
+
+Requires Go 1.22.3+:
 
 ```shell
 go build -o yoink
 ```
 
+### Pre-built binaries
+
 Pre-built binaries for Linux (arm64) and Windows are available on the [releases page](https://git.brizzle.dev/bryan/yoink-go/releases).
 
-## Usage
+### Docker
+
+```shell
+docker pull git.brizzle.dev/bryan/yoink-go:latest
+```
+
+---
+
+## CLI
+
+Download a single comic issue:
 
 ```shell
 yoink <url>
@@ -37,16 +53,79 @@ The comic title is extracted from the page and used to name the archive. Output
 <library>/<Title>/<Title>.cbz
 ```
 
+---
+
+## Web UI
+
+Yoink includes a self-hosted web interface for browsing and downloading comics from your browser.
+
+### Running directly
+
+```shell
+yoink serve
+```
+
+By default the server listens on port `8080`. Use the `-p` flag to change it:
+
+```shell
+yoink serve -p 3000
+```
+
+### Running with Docker
+
+A `docker-compose.yml` is included for quick deployment:
+
+```shell
+docker compose up -d
+```
+
+Or with Podman:
+
+```shell
+podman compose up -d
+```
+
+The web UI is then available at `http://localhost:8080`.
+
+### Features
+
+- **Download queue** — paste a comic URL into the input bar and track download progress in real time
+- **Library grid** — browse your downloaded comics as a 150×300 cover grid
+- **Filter & sort** — filter by title and sort by newest, oldest, A–Z, or Z–A
+- **One-click download** — click any cover to download the `.cbz` archive directly
+
+### Library volume
+
+Downloaded comics are stored at the path set by `YOINK_LIBRARY`. When using Docker, mount this as a volume to persist your library across container restarts:
+
+```yaml
+# docker-compose.yml
+services:
+  yoink:
+    image: git.brizzle.dev/bryan/yoink-go:latest
+    ports:
+      - "8080:8080"
+    volumes:
+      - ./library:/library
+    environment:
+      - YOINK_LIBRARY=/library
+    restart: unless-stopped
+```
+
+---
+
 ## Configuration
 
 | Variable        | Default    | Description                       |
-|-----------------|--------------|--------------------------------------|
+|-----------------|------------|-----------------------------------|
 | `YOINK_LIBRARY` | `~/.yoink` | Directory where comics are stored |
 
 ```shell
 YOINK_LIBRARY=/mnt/media/comics yoink https://readallcomics.com/some-comic-001/
 ```
 
+---
+
 ## Dependencies
 
 - [goquery](https://github.com/PuerkitoBio/goquery) — HTML parsing

cli/healthcheck.go

@@ -0,0 +1,28 @@
+package cli
+
+import (
+	"fmt"
+	"net/http"
+	"os"
+
+	"github.com/spf13/cobra"
+)
+
+var healthcheckCmd = &cobra.Command{
+	Use:    "healthcheck",
+	Short:  "Check if the web server is running (used by Docker HEALTHCHECK)",
+	Args:   cobra.NoArgs,
+	Hidden: true,
+	Run: func(cmd *cobra.Command, args []string) {
+		port, _ := cmd.Flags().GetString("port")
+		resp, err := http.Get(fmt.Sprintf("http://localhost:%s/health", port))
+		if err != nil || resp.StatusCode != http.StatusOK {
+			os.Exit(1)
+		}
+	},
+}
+
+func init() {
+	healthcheckCmd.Flags().StringP("port", "p", "8080", "Port the server is listening on")
+	cli.AddCommand(healthcheckCmd)
+}

cli/serve.go

@@ -0,0 +1,36 @@
+package cli
+
+import (
+	"fmt"
+	"log"
+	"os"
+	"path/filepath"
+
+	"github.com/spf13/cobra"
+	"yoink/web"
+)
+
+var serveCmd = &cobra.Command{
+	Use:   "serve",
+	Short: "Start the Yoink web UI",
+	Args:  cobra.NoArgs,
+	Run: func(cmd *cobra.Command, args []string) {
+		library, ok := os.LookupEnv("YOINK_LIBRARY")
+		if !ok {
+			userHome, _ := os.UserHomeDir()
+			library = filepath.Join(userHome, ".yoink")
+		}
+
+		port, _ := cmd.Flags().GetString("port")
+		addr := fmt.Sprintf(":%s", port)
+
+		if err := web.Listen(addr, library); err != nil {
+			log.Fatal(err)
+		}
+	},
+}
+
+func init() {
+	serveCmd.Flags().StringP("port", "p", "8080", "Port to listen on")
+	cli.AddCommand(serveCmd)
+}

docker-compose.yml

@@ -0,0 +1,10 @@
+services:
+  yoink:
+    build: .
+    ports:
+      - "8080:8080"
+    volumes:
+      - ./library:/library
+    environment:
+      - YOINK_LIBRARY=/library
+    restart: unless-stopped

web/server.go

@@ -0,0 +1,247 @@
+package web
+
+import (
+	"embed"
+	"encoding/json"
+	"fmt"
+	"io/fs"
+	"net/http"
+	"net/url"
+	"os"
+	"path/filepath"
+	"sort"
+	"strings"
+	"sync"
+	"time"
+
+	"github.com/PuerkitoBio/goquery"
+	"yoink/comic"
+)
+
+//go:embed static
+var staticFiles embed.FS
+
+type JobStatus string
+
+const (
+	StatusPending  JobStatus = "pending"
+	StatusRunning  JobStatus = "running"
+	StatusComplete JobStatus = "complete"
+	StatusError    JobStatus = "error"
+)
+
+type Job struct {
+	ID        string    `json:"id"`
+	URL       string    `json:"url"`
+	Title     string    `json:"title"`
+	Status    JobStatus `json:"status"`
+	Error     string    `json:"error,omitempty"`
+	CreatedAt time.Time `json:"created_at"`
+}
+
+type ComicEntry struct {
+	Title        string    `json:"title"`
+	CoverURL     string    `json:"cover_url"`
+	FileURL      string    `json:"file_url"`
+	DownloadedAt time.Time `json:"downloaded_at"`
+}
+
+type Server struct {
+	libraryPath string
+	jobs        map[string]*Job
+	mu          sync.RWMutex
+}
+
+func NewServer(libraryPath string) *Server {
+	return &Server{
+		libraryPath: libraryPath,
+		jobs:        make(map[string]*Job),
+	}
+}
+
+func (s *Server) Handler() http.Handler {
+	mux := http.NewServeMux()
+
+	// Embedded static assets
+	staticFS, _ := fs.Sub(staticFiles, "static")
+	mux.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.FS(staticFS))))
+
+	// Library files: covers (inline) and cbz downloads (attachment)
+	mux.Handle("/covers/", http.StripPrefix("/covers/", http.FileServer(http.Dir(s.libraryPath))))
+	mux.Handle("/files/", http.StripPrefix("/files/", s.downloadHandler()))
+
+	// API
+	mux.HandleFunc("/api/download", s.handleDownload)
+	mux.HandleFunc("/api/comics", s.handleComics)
+	mux.HandleFunc("/api/jobs", s.handleJobs)
+	mux.HandleFunc("/health", func(w http.ResponseWriter, r *http.Request) {
+		w.WriteHeader(http.StatusOK)
+	})
+
+	// SPA root
+	mux.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+		if r.URL.Path != "/" {
+			http.NotFound(w, r)
+			return
+		}
+		data, _ := staticFiles.ReadFile("static/index.html")
+		w.Header().Set("Content-Type", "text/html; charset=utf-8")
+		w.Write(data)
+	})
+
+	return mux
+}
+
+// downloadHandler wraps the library file server to force Content-Disposition: attachment.
+func (s *Server) downloadHandler() http.Handler {
+	fs := http.FileServer(http.Dir(s.libraryPath))
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		w.Header().Set("Content-Disposition", "attachment")
+		fs.ServeHTTP(w, r)
+	})
+}
+
+func (s *Server) handleDownload(w http.ResponseWriter, r *http.Request) {
+	if r.Method != http.MethodPost {
+		http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+
+	var req struct {
+		URL string `json:"url"`
+	}
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil || strings.TrimSpace(req.URL) == "" {
+		http.Error(w, "invalid request", http.StatusBadRequest)
+		return
+	}
+
+	job := &Job{
+		ID:        fmt.Sprintf("%d", time.Now().UnixNano()),
+		URL:       req.URL,
+		Status:    StatusPending,
+		CreatedAt: time.Now(),
+	}
+
+	s.mu.Lock()
+	s.jobs[job.ID] = job
+	s.mu.Unlock()
+
+	go s.runJob(job)
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(job)
+}
+
+func (s *Server) runJob(job *Job) {
+	s.mu.Lock()
+	job.Status = StatusRunning
+	s.mu.Unlock()
+
+	markupCh := make(chan *goquery.Document)
+	imageCh := make(chan []string)
+
+	c := comic.NewComic(job.URL, s.libraryPath, imageCh, markupCh)
+
+	s.mu.Lock()
+	job.Title = c.Title
+	s.mu.Unlock()
+
+	errs := c.Download(len(c.Filelist))
+	if len(errs) > 0 {
+		s.mu.Lock()
+		job.Status = StatusError
+		job.Error = errs[0].Error()
+		s.mu.Unlock()
+		return
+	}
+
+	if err := c.Archive(); err != nil {
+		s.mu.Lock()
+		job.Status = StatusError
+		job.Error = err.Error()
+		s.mu.Unlock()
+		return
+	}
+
+	c.Cleanup()
+
+	s.mu.Lock()
+	job.Status = StatusComplete
+	s.mu.Unlock()
+}
+
+func (s *Server) handleComics(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "application/json")
+
+	entries := []ComicEntry{}
+
+	dirs, err := os.ReadDir(s.libraryPath)
+	if err != nil {
+		json.NewEncoder(w).Encode(entries)
+		return
+	}
+
+	for _, dir := range dirs {
+		if !dir.IsDir() {
+			continue
+		}
+
+		title := dir.Name()
+		dirPath := filepath.Join(s.libraryPath, title)
+
+		var coverURL, fileURL string
+		var downloadedAt time.Time
+
+		files, _ := os.ReadDir(dirPath)
+		for _, f := range files {
+			name := f.Name()
+
+			if strings.HasSuffix(name, ".cbz") {
+				fileURL = "/files/" + url.PathEscape(title) + "/" + url.PathEscape(name)
+				if info, err := f.Info(); err == nil {
+					downloadedAt = info.ModTime()
+				}
+			}
+
+			// Cover kept by Cleanup: "<Title> 001.jpg"
+			stripped := strings.TrimSpace(strings.TrimPrefix(name, title))
+			if strings.HasPrefix(strings.ToLower(stripped), "001") {
+				coverURL = "/covers/" + url.PathEscape(title) + "/" + url.PathEscape(name)
+			}
+		}
+
+		if fileURL != "" {
+			entries = append(entries, ComicEntry{
+				Title:        title,
+				CoverURL:     coverURL,
+				FileURL:      fileURL,
+				DownloadedAt: downloadedAt,
+			})
+		}
+	}
+
+	// Default: newest first
+	sort.Slice(entries, func(i, j int) bool {
+		return entries[i].DownloadedAt.After(entries[j].DownloadedAt)
+	})
+
+	json.NewEncoder(w).Encode(entries)
+}
+
+func (s *Server) handleJobs(w http.ResponseWriter, r *http.Request) {
+	s.mu.RLock()
+	jobs := make([]*Job, 0, len(s.jobs))
+	for _, j := range s.jobs {
+		jobs = append(jobs, j)
+	}
+	s.mu.RUnlock()
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(jobs)
+}
+
+func Listen(addr string, libraryPath string) error {
+	srv := NewServer(libraryPath)
+	fmt.Printf("Yoink web server listening on %s\n", addr)
+	return http.ListenAndServe(addr, srv.Handler())
+}

web/static/index.html

@@ -0,0 +1,936 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Yoink</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    :root {
+      --bg:        #0c0e15;
+      --surface:   #12151f;
+      --surface2:  #181c2a;
+      --card:      #1a1e2e;
+      --border:    #21273d;
+      --border2:   #2c3350;
+      --accent:    #5b8cf5;
+      --accent-hv: #7aa3ff;
+      --accent-dim: rgba(91,140,245,0.12);
+      --text:      #dde3f0;
+      --text2:     #a8b3cc;
+      --muted:     #505870;
+      --success:   #34d399;
+      --error:     #f87171;
+      --warn:      #fbbf24;
+
+      --radius:    8px;
+      --radius-sm: 5px;
+    }
+
+    html { scrollbar-color: var(--border2) var(--bg); scrollbar-width: thin; }
+
+    body {
+      background: var(--bg);
+      color: var(--text);
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      font-size: 14px;
+      min-height: 100vh;
+    }
+
+    /* Subtle dot grid background */
+    body::before {
+      content: '';
+      position: fixed;
+      inset: 0;
+      background-image: radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px);
+      background-size: 28px 28px;
+      pointer-events: none;
+      z-index: 0;
+    }
+
+    /* Everything above the background */
+    header, #queue, main, #toast { position: relative; z-index: 1; }
+
+    /* ── Header ──────────────────────────────────────────────────────────── */
+    header {
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      height: 68px;
+      padding: 0 28px;
+      display: flex;
+      align-items: center;
+      gap: 20px;
+      background: rgba(18, 21, 31, 0.88);
+      backdrop-filter: blur(14px);
+      -webkit-backdrop-filter: blur(14px);
+      border-bottom: 1px solid var(--border);
+      box-shadow: 0 4px 24px rgba(0,0,0,0.3);
+    }
+
+    /* ── Logo ──────────────────────────────────────────────────────────── */
+    .logo {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      text-decoration: none;
+      flex-shrink: 0;
+    }
+
+    .logo-icon {
+      width: 30px;
+      height: 30px;
+      background: var(--accent);
+      border-radius: 7px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 0 12px rgba(91,140,245,0.4);
+    }
+
+    .logo-icon svg { display: block; }
+
+    .logo-text {
+      font-size: 1.1rem;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+      color: var(--text);
+    }
+
+    .logo-text span { color: var(--accent); }
+
+    /* ── URL form ────────────────────────────────────────────────────────── */
+    .url-form {
+      flex: 1;
+      display: flex;
+      max-width: 680px;
+      background: var(--surface2);
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      padding: 4px 4px 4px 20px;
+      transition: border-color 0.15s, box-shadow 0.15s;
+    }
+
+    .url-form:focus-within {
+      border-color: var(--accent);
+      box-shadow: 0 0 0 3px rgba(91,140,245,0.15);
+    }
+
+    .url-input {
+      flex: 1;
+      background: transparent;
+      border: none;
+      color: var(--text);
+      font-family: inherit;
+      font-size: 0.875rem;
+      outline: none;
+      min-width: 0;
+    }
+
+    .url-input::placeholder { color: var(--muted); }
+
+    .url-btn {
+      height: 36px;
+      padding: 0 20px;
+      background: var(--accent);
+      color: #fff;
+      border: none;
+      border-radius: 999px;
+      font-family: inherit;
+      font-size: 0.8rem;
+      font-weight: 700;
+      letter-spacing: 0.02em;
+      cursor: pointer;
+      white-space: nowrap;
+      flex-shrink: 0;
+      transition: background 0.15s, transform 0.1s;
+    }
+
+    .url-btn:hover  { background: var(--accent-hv); }
+    .url-btn:active { transform: scale(0.97); }
+    .url-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
+
+    /* ── Queue strip ─────────────────────────────────────────────────────── */
+    #queue {
+      background: var(--surface);
+      border-bottom: 1px solid var(--border);
+      display: none;
+      flex-direction: column;
+    }
+
+    #queue.visible { display: flex; }
+
+    .queue-item {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      padding: 11px 28px;
+      border-bottom: 1px solid var(--border);
+      transition: background 0.15s;
+    }
+
+    .queue-item:last-child { border-bottom: none; }
+    .queue-item:hover { background: rgba(255,255,255,0.02); }
+
+    .queue-status-bar {
+      width: 3px;
+      height: 36px;
+      border-radius: 999px;
+      flex-shrink: 0;
+    }
+
+    .queue-item[data-status="pending"]  .queue-status-bar { background: var(--muted); }
+    .queue-item[data-status="running"]  .queue-status-bar { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
+    .queue-item[data-status="complete"] .queue-status-bar { background: var(--success); }
+    .queue-item[data-status="error"]    .queue-status-bar { background: var(--error); }
+
+    .queue-meta { flex: 1; min-width: 0; }
+
+    .queue-title {
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: var(--text);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .queue-url {
+      font-size: 0.72rem;
+      color: var(--muted);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-top: 2px;
+    }
+
+    .status-pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 3px 10px;
+      border-radius: 999px;
+      font-size: 0.72rem;
+      font-weight: 600;
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+
+    .status-pill.pending  { background: rgba(80,88,112,0.25);  color: var(--text2); }
+    .status-pill.running  { background: var(--accent-dim);      color: var(--accent); }
+    .status-pill.complete { background: rgba(52,211,153,0.12);  color: var(--success); }
+    .status-pill.error    { background: rgba(248,113,113,0.12); color: var(--error); }
+
+    .spinner {
+      width: 11px; height: 11px;
+      border: 2px solid currentColor;
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: spin 0.7s linear infinite;
+      flex-shrink: 0;
+    }
+
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    .dismiss-btn {
+      background: none;
+      border: none;
+      color: var(--muted);
+      cursor: pointer;
+      font-size: 1.1rem;
+      line-height: 1;
+      width: 26px;
+      height: 26px;
+      border-radius: var(--radius-sm);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      transition: color 0.12s, background 0.12s;
+    }
+
+    .dismiss-btn:hover { color: var(--text); background: var(--border); }
+
+    /* ── Main ────────────────────────────────────────────────────────────── */
+    main { padding: 32px 28px; }
+
+    /* ── Library toolbar ─────────────────────────────────────────────────── */
+    .library-toolbar {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 24px;
+      flex-wrap: wrap;
+    }
+
+    .section-heading {
+      font-size: 0.68rem;
+      font-weight: 700;
+      letter-spacing: 0.14em;
+      text-transform: uppercase;
+      color: var(--muted);
+      flex-shrink: 0;
+    }
+
+    .comic-count {
+      font-size: 0.72rem;
+      font-weight: 600;
+      color: var(--accent);
+      background: var(--accent-dim);
+      padding: 2px 8px;
+      border-radius: 999px;
+    }
+
+    .filter-wrap {
+      position: relative;
+      flex-shrink: 0;
+    }
+
+    .filter-icon {
+      position: absolute;
+      left: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--muted);
+      pointer-events: none;
+      display: flex;
+    }
+
+    .filter-input {
+      height: 32px;
+      padding: 0 12px 0 32px;
+      background: var(--surface2);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-sm);
+      color: var(--text);
+      font-family: inherit;
+      font-size: 0.8rem;
+      outline: none;
+      width: 200px;
+      transition: border-color 0.15s, box-shadow 0.15s;
+    }
+
+    .filter-input::placeholder { color: var(--muted); }
+
+    .filter-input:focus {
+      border-color: var(--accent);
+      box-shadow: 0 0 0 3px rgba(91,140,245,0.12);
+    }
+
+    /* Clear button inside filter */
+    .filter-input::-webkit-search-cancel-button { display: none; }
+
+    .sort-group {
+      display: flex;
+      gap: 3px;
+      margin-left: auto;
+      background: var(--surface2);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-sm);
+      padding: 3px;
+    }
+
+    .sort-btn {
+      height: 26px;
+      padding: 0 10px;
+      background: transparent;
+      border: none;
+      border-radius: 4px;
+      color: var(--muted);
+      font-family: inherit;
+      font-size: 0.72rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: color 0.12s, background 0.12s;
+      white-space: nowrap;
+    }
+
+    .sort-btn:hover  { color: var(--text2); }
+    .sort-btn.active { background: var(--border2); color: var(--text); }
+
+    /* ── Comics grid ─────────────────────────────────────────────────────── */
+    #comics-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, 150px);
+      gap: 20px;
+    }
+
+    /* ── Comic card — full-bleed poster style ────────────────────────────── */
+    .comic-card {
+      width: 150px;
+      height: 300px;
+      border-radius: var(--radius);
+      overflow: hidden;
+      display: block;
+      position: relative;
+      cursor: pointer;
+      text-decoration: none;
+      border: 1px solid var(--border);
+      background: var(--card);
+      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+    }
+
+    .comic-card:hover {
+      transform: translateY(-4px) scale(1.03);
+      box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(91,140,245,0.3);
+      border-color: rgba(91,140,245,0.4);
+    }
+
+    .comic-cover {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: top center;
+      display: block;
+    }
+
+    /* Persistent gradient for title legibility */
+    .comic-card::before {
+      content: '';
+      position: absolute;
+      bottom: 0; left: 0; right: 0;
+      height: 55%;
+      background: linear-gradient(to top, rgba(8,10,18,0.95) 0%, rgba(8,10,18,0.5) 50%, transparent 100%);
+      z-index: 1;
+      transition: opacity 0.2s;
+    }
+
+    /* Download overlay on hover */
+    .comic-card::after {
+      content: '↓';
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 2.2rem;
+      font-weight: 700;
+      color: #fff;
+      background: rgba(91, 140, 245, 0.72);
+      backdrop-filter: blur(3px);
+      -webkit-backdrop-filter: blur(3px);
+      opacity: 0;
+      transition: opacity 0.2s;
+      z-index: 3;
+    }
+
+    .comic-card:hover::after { opacity: 1; }
+
+    .comic-cover-placeholder {
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(145deg, #1a2040 0%, #0d1020 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .comic-cover-placeholder svg { opacity: 0.2; }
+
+    .comic-info {
+      position: absolute;
+      bottom: 0; left: 0; right: 0;
+      padding: 10px 10px 10px;
+      z-index: 2;
+    }
+
+    .comic-title {
+      font-size: 0.72rem;
+      font-weight: 600;
+      line-height: 1.35;
+      color: #fff;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      text-shadow: 0 1px 4px rgba(0,0,0,0.8);
+    }
+
+    /* ── Skeleton loading cards ──────────────────────────────────────────── */
+    .skeleton-card {
+      width: 150px;
+      height: 300px;
+      border-radius: var(--radius);
+      border: 1px solid var(--border);
+      background: linear-gradient(90deg, var(--card) 25%, var(--surface2) 50%, var(--card) 75%);
+      background-size: 400% 100%;
+      animation: shimmer 1.6s ease infinite;
+    }
+
+    @keyframes shimmer {
+      0%   { background-position: 100% 0; }
+      100% { background-position: -100% 0; }
+    }
+
+    /* ── Empty state ─────────────────────────────────────────────────────── */
+    #empty-state {
+      display: none;
+      flex-direction: column;
+      align-items: center;
+      gap: 16px;
+      margin-top: 80px;
+      color: var(--muted);
+      text-align: center;
+    }
+
+    .empty-box {
+      width: 100px;
+      height: 100px;
+      border: 2px dashed var(--border2);
+      border-radius: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .empty-box svg { opacity: 0.3; }
+
+    #empty-state p {
+      font-size: 0.85rem;
+      color: var(--text2);
+      max-width: 260px;
+      line-height: 1.5;
+    }
+
+    /* ── Toasts ──────────────────────────────────────────────────────────── */
+    #toast {
+      position: fixed;
+      bottom: 24px;
+      right: 24px;
+      z-index: 999;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      pointer-events: none;
+      max-width: 340px;
+    }
+
+    .toast-msg {
+      background: var(--surface2);
+      border: 1px solid var(--border2);
+      border-left: 3px solid var(--accent);
+      color: var(--text);
+      padding: 11px 16px;
+      border-radius: var(--radius);
+      font-size: 0.8rem;
+      line-height: 1.4;
+      box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+      animation: slideIn 0.22s ease;
+      opacity: 1;
+      transition: opacity 0.3s;
+    }
+
+    .toast-msg.is-error { border-left-color: var(--error); }
+    .toast-msg.fade { opacity: 0; }
+
+    @keyframes slideIn {
+      from { transform: translateX(32px); opacity: 0; }
+      to   { transform: translateX(0);   opacity: 1; }
+    }
+
+    /* ── Responsive — tablet ─────────────────────────────────────────────── */
+    @media (max-width: 860px) {
+      .url-form { max-width: 100%; }
+
+      .filter-input { width: 160px; }
+
+      .queue-url { display: none; }
+    }
+
+    /* ── Responsive — mobile ─────────────────────────────────────────────── */
+    @media (max-width: 600px) {
+      /* Header wraps to two rows: logo row + form row */
+      header {
+        height: auto;
+        flex-wrap: wrap;
+        padding: 12px 16px;
+        gap: 10px;
+      }
+
+      .url-form {
+        flex: 0 0 100%;
+        max-width: 100%;
+      }
+
+      /* Queue */
+      .queue-item { padding: 10px 16px; }
+
+      /* Main */
+      main { padding: 20px 16px; }
+
+      /* Toolbar: heading row then controls row */
+      .library-toolbar { flex-wrap: wrap; row-gap: 10px; }
+
+      .filter-wrap {
+        flex: 1 1 auto;
+        min-width: 0;
+      }
+
+      .filter-input { width: 100%; }
+
+      .sort-group {
+        flex: 0 0 100%;
+        order: 4;
+        margin-left: 0;
+        overflow-x: auto;
+        /* hide scrollbar visually but keep scrollable */
+        scrollbar-width: none;
+      }
+
+      .sort-group::-webkit-scrollbar { display: none; }
+
+      /* Center single-column grid on very small screens */
+      #comics-grid { justify-content: center; gap: 14px; }
+
+      /* Toasts go edge-to-edge */
+      #toast {
+        left: 12px;
+        right: 12px;
+        bottom: 12px;
+        max-width: none;
+      }
+    }
+  </style>
+</head>
+<body>
+
+  <header>
+    <a class="logo" href="/">
+      <div class="logo-icon">
+        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M12 5v14M5 12l7 7 7-7"/>
+        </svg>
+      </div>
+      <span class="logo-text">YOINK<span>.</span></span>
+    </a>
+
+    <form class="url-form" id="url-form">
+      <input
+        class="url-input"
+        id="url-input"
+        type="url"
+        placeholder="Paste a comic URL to download…"
+        required
+        autocomplete="off"
+        spellcheck="false"
+      />
+      <button class="url-btn" id="url-btn" type="submit">Download</button>
+    </form>
+  </header>
+
+  <div id="queue"></div>
+
+  <main>
+    <div class="library-toolbar">
+      <span class="section-heading">Library</span>
+      <span class="comic-count" id="comic-count" style="display:none"></span>
+      <div class="filter-wrap">
+        <span class="filter-icon">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
+            <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
+          </svg>
+        </span>
+        <input class="filter-input" id="filter-input" type="search" placeholder="Filter by title…" />
+      </div>
+      <div class="sort-group">
+        <button class="sort-btn active" data-sort="newest">Newest</button>
+        <button class="sort-btn" data-sort="oldest">Oldest</button>
+        <button class="sort-btn" data-sort="az">A–Z</button>
+        <button class="sort-btn" data-sort="za">Z–A</button>
+      </div>
+    </div>
+
+    <div id="comics-grid"></div>
+
+    <div id="empty-state">
+      <div class="empty-box">
+        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4">
+          <rect x="3" y="3" width="18" height="18" rx="2"/>
+          <path d="M3 9h18M9 21V9"/>
+        </svg>
+      </div>
+      <p>No comics yet — paste a URL above to start building your library.</p>
+    </div>
+  </main>
+
+  <div id="toast"></div>
+
+  <script>
+    // ── State ──────────────────────────────────────────────────────────────
+    let knownJobs     = {};
+    let dismissedJobs = JSON.parse(localStorage.getItem('dismissedJobs') || '{}');
+    let allComics     = [];
+    let currentSort   = localStorage.getItem('comicSort') || 'newest';
+
+    // ── DOM refs ───────────────────────────────────────────────────────────
+    const form        = document.getElementById('url-form');
+    const input       = document.getElementById('url-input');
+    const btn         = document.getElementById('url-btn');
+    const queue       = document.getElementById('queue');
+    const grid        = document.getElementById('comics-grid');
+    const emptyEl     = document.getElementById('empty-state');
+    const toastEl     = document.getElementById('toast');
+    const filterInput = document.getElementById('filter-input');
+    const sortBtns    = document.querySelectorAll('.sort-btn');
+    const countEl     = document.getElementById('comic-count');
+
+    // ── Submit handler ─────────────────────────────────────────────────────
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const url = input.value.trim();
+      if (!url) return;
+
+      btn.disabled = true;
+      btn.textContent = 'Queuing…';
+
+      try {
+        const res = await fetch('/api/download', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ url }),
+        });
+
+        if (!res.ok) throw new Error(await res.text());
+
+        const job = await res.json();
+        knownJobs[job.id] = job;
+        input.value = '';
+        toast('Download queued');
+        renderQueue();
+      } catch (err) {
+        toast('Error: ' + err.message, true);
+      } finally {
+        btn.disabled = false;
+        btn.textContent = 'Download';
+      }
+    });
+
+    // ── Render queue ───────────────────────────────────────────────────────
+    function renderQueue() {
+      const active = Object.values(knownJobs).filter(j => !dismissedJobs[j.id]);
+      queue.innerHTML = '';
+
+      if (active.length === 0) {
+        queue.classList.remove('visible');
+        return;
+      }
+
+      queue.classList.add('visible');
+      active.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
+
+      active.forEach(job => {
+        const row = document.createElement('div');
+        row.className = 'queue-item';
+        row.dataset.status = job.status;
+
+        const bar = document.createElement('div');
+        bar.className = 'queue-status-bar';
+
+        const meta = document.createElement('div');
+        meta.className = 'queue-meta';
+
+        const title = document.createElement('div');
+        title.className = 'queue-title';
+        title.textContent = job.title || 'Fetching…';
+
+        const urlEl = document.createElement('div');
+        urlEl.className = 'queue-url';
+        urlEl.textContent = job.url;
+
+        meta.append(title, urlEl);
+
+        const pill = makeStatusPill(job);
+
+        const dismiss = document.createElement('button');
+        dismiss.className = 'dismiss-btn';
+        dismiss.title = 'Dismiss';
+        dismiss.innerHTML = '&times;';
+        dismiss.addEventListener('click', () => {
+          dismissedJobs[job.id] = true;
+          localStorage.setItem('dismissedJobs', JSON.stringify(dismissedJobs));
+          renderQueue();
+        });
+
+        row.append(bar, meta, pill, dismiss);
+        queue.append(row);
+      });
+    }
+
+    function makeStatusPill(job) {
+      const pill = document.createElement('span');
+      pill.className = 'status-pill ' + job.status;
+
+      if (job.status === 'pending' || job.status === 'running') {
+        const spin = document.createElement('span');
+        spin.className = 'spinner';
+        pill.append(spin);
+      }
+
+      const label = {
+        pending:  'Pending',
+        running:  'Downloading',
+        complete: '✓ Done',
+        error:    '✕ Error',
+      }[job.status] || job.status;
+
+      pill.append(document.createTextNode(label));
+      if (job.error) pill.title = job.error;
+
+      return pill;
+    }
+
+    // ── Filter & sort ──────────────────────────────────────────────────────
+    function applyFilterAndSort() {
+      const query = filterInput.value.trim().toLowerCase();
+
+      let comics = query
+        ? allComics.filter(c => c.title.toLowerCase().includes(query))
+        : allComics.slice();
+
+      if (currentSort === 'oldest') {
+        comics = comics.slice().reverse();
+      } else if (currentSort === 'az') {
+        comics = comics.slice().sort((a, b) => a.title.localeCompare(b.title));
+      } else if (currentSort === 'za') {
+        comics = comics.slice().sort((a, b) => b.title.localeCompare(a.title));
+      }
+
+      renderComics(comics);
+    }
+
+    // ── Render comics ──────────────────────────────────────────────────────
+    function renderComics(comics) {
+      grid.innerHTML = '';
+
+      if (!comics || comics.length === 0) {
+        emptyEl.style.display = 'flex';
+        countEl.style.display = 'none';
+        return;
+      }
+
+      emptyEl.style.display = 'none';
+      countEl.textContent = allComics.length;
+      countEl.style.display = '';
+
+      comics.forEach(comic => {
+        const a = document.createElement('a');
+        a.className = 'comic-card';
+        a.href = comic.file_url;
+
+        if (comic.cover_url) {
+          const img = document.createElement('img');
+          img.className = 'comic-cover';
+          img.src = comic.cover_url;
+          img.alt = comic.title;
+          img.loading = 'lazy';
+          img.onerror = () => img.replaceWith(makePlaceholder());
+          a.append(img);
+        } else {
+          a.append(makePlaceholder());
+        }
+
+        const info = document.createElement('div');
+        info.className = 'comic-info';
+
+        const title = document.createElement('div');
+        title.className = 'comic-title';
+        title.textContent = comic.title;
+
+        info.append(title);
+        a.append(info);
+        grid.append(a);
+      });
+    }
+
+    function makePlaceholder() {
+      const div = document.createElement('div');
+      div.className = 'comic-cover-placeholder';
+      div.innerHTML = `
+        <svg width="40" height="40" viewBox="0 0 24 24" fill="none"
+             stroke="currentColor" stroke-width="1.2">
+          <rect x="3" y="3" width="18" height="18" rx="2"/>
+          <path d="M3 9h18M9 21V9"/>
+        </svg>`;
+      return div;
+    }
+
+    function showSkeletons() {
+      grid.innerHTML = '';
+      emptyEl.style.display = 'none';
+      for (let i = 0; i < 10; i++) {
+        const sk = document.createElement('div');
+        sk.className = 'skeleton-card';
+        grid.append(sk);
+      }
+    }
+
+    // ── Toast ──────────────────────────────────────────────────────────────
+    function toast(msg, isError = false) {
+      const el = document.createElement('div');
+      el.className = 'toast-msg' + (isError ? ' is-error' : '');
+      el.textContent = msg;
+      toastEl.append(el);
+      setTimeout(() => {
+        el.classList.add('fade');
+        setTimeout(() => el.remove(), 350);
+      }, 3500);
+    }
+
+    // ── Polling ────────────────────────────────────────────────────────────
+    async function pollJobs() {
+      try {
+        const res = await fetch('/api/jobs');
+        const jobs = await res.json();
+        let needComicRefresh = false;
+
+        jobs.forEach(job => {
+          const prev = knownJobs[job.id];
+          if (prev && prev.status !== 'complete' && job.status === 'complete') {
+            needComicRefresh = true;
+            toast(`"${job.title}" downloaded`);
+          }
+          if (prev && prev.status !== 'error' && job.status === 'error') {
+            toast(`Failed: ${job.title || job.url}${job.error ? ' — ' + job.error : ''}`, true);
+          }
+          knownJobs[job.id] = job;
+        });
+
+        renderQueue();
+        if (needComicRefresh) await fetchComics();
+      } catch (_) {}
+    }
+
+    async function fetchComics() {
+      try {
+        const res = await fetch('/api/comics');
+        allComics = await res.json();
+        applyFilterAndSort();
+      } catch (_) {}
+    }
+
+    // ── Init ───────────────────────────────────────────────────────────────
+    sortBtns.forEach(b => {
+      if (b.dataset.sort === currentSort) b.classList.add('active');
+      else b.classList.remove('active');
+
+      b.addEventListener('click', () => {
+        currentSort = b.dataset.sort;
+        localStorage.setItem('comicSort', currentSort);
+        sortBtns.forEach(x => x.classList.toggle('active', x === b));
+        applyFilterAndSort();
+      });
+    });
+
+    filterInput.addEventListener('input', applyFilterAndSort);
+
+    showSkeletons();
+    fetchComics();
+    setInterval(pollJobs, 2000);
+    setInterval(fetchComics, 10000);
+  </script>
+</body>
+</html>