bryan/yoink-go
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases 3 Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
Bryan Bailey
2026-03-08 23:06:50 -04:00
parent 25eee6f76a
commit 9d1ca16704
4 changed files with 557 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Dockerfile
View File

@@ -18,7 +18,7 @@ FROM gcr.io/distroless/base-debian12:nonroot
LABEL org.opencontainers.image.title="yoink" \ LABEL org.opencontainers.image.title="yoink" \
org.opencontainers.image.description="Comic downloader web UI" \ org.opencontainers.image.description="Comic downloader web UI" \
org.opencontainers.image.source="https://github.com/bryanlundberg/yoink-go" org.opencontainers.image.source="https://git.brizzle.dev/bryan/yoink-go"
WORKDIR /app WORKDIR /app

14
Makefile
View File

@@ -1,7 +1,9 @@
BIN := yoink BIN := yoink
BUILD_DIR := build 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 all: windows linux darwin
@@ -16,5 +18,15 @@ darwin:
GOOS=darwin GOARCH=amd64 go build -o $(BUILD_DIR)/$(BIN)-darwin-amd64 GOOS=darwin GOARCH=amd64 go build -o $(BUILD_DIR)/$(BIN)-darwin-amd64
GOOS=darwin GOARCH=arm64 go build -o $(BUILD_DIR)/$(BIN)-darwin-arm64 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: clean:
rm -rf $(BUILD_DIR) rm -rf $(BUILD_DIR)

87
README.md
View File

@@ -1,6 +1,6 @@
# yoink # 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 ## 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 3. Packages the images into a `.cbz` (Comic Book Zip) archive
4. Cleans up downloaded images, keeping only the cover (`001`) 4. Cleans up downloaded images, keeping only the cover (`001`)
---
## Installation ## Installation
Build from source (requires Go 1.22.3+): ### From source
Requires Go 1.22.3+:
```shell ```shell
go build -o yoink 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). 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 ```shell
yoink <url> 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 <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 ## Configuration
| Variable | Default | Description | | Variable | Default | Description |
|-----------------|--------------|--------------------------------------| |-----------------|------------|-----------------------------------|
| `YOINK_LIBRARY` | `~/.yoink` | Directory where comics are stored | | `YOINK_LIBRARY` | `~/.yoink` | Directory where comics are stored |
```shell ```shell
YOINK_LIBRARY=/mnt/media/comics yoink https://readallcomics.com/some-comic-001/ YOINK_LIBRARY=/mnt/media/comics yoink https://readallcomics.com/some-comic-001/
``` ```
---
## Dependencies ## Dependencies
- [goquery](https://github.com/PuerkitoBio/goquery) — HTML parsing - [goquery](https://github.com/PuerkitoBio/goquery) — HTML parsing

645
web/static/index.html
View File

@@ -4,106 +4,162 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Yoink</title> <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> <style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { :root {
--bg: #0d0f14; --bg: #0c0e15;
--surface: #13151e; --surface: #12151f;
--card: #1a1d2e; --surface2: #181c2a;
--border: #252840; --card: #1a1e2e;
--accent: #4f8ef7; --border: #21273d;
--accent-hv: #6aa3ff; --border2: #2c3350;
--text: #e2e8f0; --accent: #5b8cf5;
--muted: #6b7280; --accent-hv: #7aa3ff;
--success: #22c55e; --accent-dim: rgba(91,140,245,0.12);
--error: #ef4444; --text: #dde3f0;
--warn: #f59e0b; --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 { body {
background: var(--bg); background: var(--bg);
color: var(--text); color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 14px;
min-height: 100vh; min-height: 100vh;
} }
/* ── Header ─────────────────────────────────────────────── */ /* 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 { header {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 100;
background: var(--surface); height: 68px;
border-bottom: 1px solid var(--border); padding: 0 28px;
padding: 0 24px;
height: 64px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 24px; 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 { .logo {
font-size: 1.4rem; display: flex;
font-weight: 800; align-items: center;
letter-spacing: 0.12em; gap: 8px;
color: var(--accent); text-decoration: none;
white-space: nowrap;
flex-shrink: 0; flex-shrink: 0;
} }
.logo span { .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); color: var(--text);
} }
.logo-text span { color: var(--accent); }
/* ── URL form ────────────────────────────────────────────────────────── */
.url-form { .url-form {
flex: 1; flex: 1;
display: flex; display: flex;
gap: 0; max-width: 680px;
max-width: 760px; 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 { .url-input {
flex: 1; flex: 1;
height: 40px; background: transparent;
padding: 0 16px; border: none;
background: var(--bg);
border: 1px solid var(--border);
border-right: none;
border-radius: 6px 0 0 6px;
color: var(--text); color: var(--text);
font-size: 0.9rem; font-family: inherit;
font-size: 0.875rem;
outline: none; outline: none;
transition: border-color 0.15s; min-width: 0;
} }
.url-input::placeholder { color: var(--muted); } .url-input::placeholder { color: var(--muted); }
.url-input:focus { border-color: var(--accent); }
.url-btn { .url-btn {
height: 40px; height: 36px;
padding: 0 20px; padding: 0 20px;
background: var(--accent); background: var(--accent);
color: #fff; color: #fff;
border: none; border: none;
border-radius: 0 6px 6px 0; border-radius: 999px;
font-size: 0.875rem; font-family: inherit;
font-weight: 600; font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
transition: background 0.15s; flex-shrink: 0;
transition: background 0.15s, transform 0.1s;
} }
.url-btn:hover { background: var(--accent-hv); } .url-btn:hover { background: var(--accent-hv); }
.url-btn:disabled { opacity: 0.5; cursor: not-allowed; } .url-btn:active { transform: scale(0.97); }
.url-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
/* ── Queue strip ─────────────────────────────────────────── */ /* ── Queue strip ─────────────────────────────────────────────────────── */
#queue { #queue {
background: var(--surface); background: var(--surface);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
padding: 0 24px;
display: none; display: none;
flex-direction: column; flex-direction: column;
gap: 1px;
} }
#queue.visible { display: flex; } #queue.visible { display: flex; }
@@ -111,16 +167,32 @@
.queue-item { .queue-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 14px;
padding: 10px 0; padding: 11px 28px;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
font-size: 0.85rem; transition: background 0.15s;
} }
.queue-item:last-child { border-bottom: none; } .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 { .queue-title {
flex: 1; font-size: 0.85rem;
font-weight: 600;
color: var(--text); color: var(--text);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -128,12 +200,12 @@
} }
.queue-url { .queue-url {
font-size: 0.72rem;
color: var(--muted); color: var(--muted);
font-size: 0.75rem;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
max-width: 320px; margin-top: 2px;
} }
.status-pill { .status-pill {
@@ -142,18 +214,19 @@
gap: 6px; gap: 6px;
padding: 3px 10px; padding: 3px 10px;
border-radius: 999px; border-radius: 999px;
font-size: 0.75rem; font-size: 0.72rem;
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
flex-shrink: 0;
} }
.status-pill.pending { background: rgba(107,114,128,0.2); color: var(--muted); } .status-pill.pending { background: rgba(80,88,112,0.25); color: var(--text2); }
.status-pill.running { background: rgba(79,142,247,0.15); color: var(--accent); } .status-pill.running { background: var(--accent-dim); color: var(--accent); }
.status-pill.complete { background: rgba(34,197,94,0.15); color: var(--success); } .status-pill.complete { background: rgba(52,211,153,0.12); color: var(--success); }
.status-pill.error { background: rgba(239,68,68,0.15); color: var(--error); } .status-pill.error { background: rgba(248,113,113,0.12); color: var(--error); }
.spinner { .spinner {
width: 12px; height: 12px; width: 11px; height: 11px;
border: 2px solid currentColor; border: 2px solid currentColor;
border-top-color: transparent; border-top-color: transparent;
border-radius: 50%; border-radius: 50%;
@@ -168,134 +241,262 @@
border: none; border: none;
color: var(--muted); color: var(--muted);
cursor: pointer; cursor: pointer;
font-size: 1rem; font-size: 1.1rem;
line-height: 1; line-height: 1;
padding: 2px 4px; width: 26px;
border-radius: 4px; 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); } .dismiss-btn:hover { color: var(--text); background: var(--border); }
/* ── Main grid ───────────────────────────────────────────── */ /* ── Main ────────────────────────────────────────────────────────────── */
main { main { padding: 32px 28px; }
padding: 28px 24px;
/* ── Library toolbar ─────────────────────────────────────────────────── */
.library-toolbar {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
flex-wrap: wrap;
} }
.section-heading { .section-heading {
font-size: 0.7rem; font-size: 0.68rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.12em; letter-spacing: 0.14em;
text-transform: uppercase; text-transform: uppercase;
color: var(--muted); color: var(--muted);
margin-bottom: 20px; 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 { #comics-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, 150px); grid-template-columns: repeat(auto-fill, 150px);
gap: 20px; gap: 20px;
} }
/* ── Comic card ──────────────────────────────────────────── */ /* ── Comic card — full-bleed poster style ────────────────────────────── */
.comic-card { .comic-card {
width: 150px; width: 150px;
height: 300px; height: 300px;
border-radius: 6px; border-radius: var(--radius);
overflow: hidden; overflow: hidden;
background: var(--card); display: block;
border: 1px solid var(--border); position: relative;
display: flex;
flex-direction: column;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
color: inherit; border: 1px solid var(--border);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; background: var(--card);
position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
} }
.comic-card:hover { .comic-card:hover {
transform: translateY(-3px) scale(1.02); transform: translateY(-4px) scale(1.03);
box-shadow: 0 8px 32px rgba(79, 142, 247, 0.25); box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(91,140,245,0.3);
border-color: rgba(79, 142, 247, 0.45); border-color: rgba(91,140,245,0.4);
} }
.comic-cover { .comic-cover {
width: 150px; width: 100%;
height: 230px; height: 100%;
object-fit: cover; object-fit: cover;
object-position: top center; object-position: top center;
display: block; display: block;
flex-shrink: 0;
} }
/* 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 { .comic-cover-placeholder {
width: 150px; width: 100%;
height: 230px; height: 100%;
flex-shrink: 0; background: linear-gradient(145deg, #1a2040 0%, #0d1020 100%);
background: linear-gradient(135deg, #1e2240 0%, #0d1025 100%);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.comic-cover-placeholder svg { .comic-cover-placeholder svg { opacity: 0.2; }
opacity: 0.25;
}
.comic-info { .comic-info {
flex: 1; position: absolute;
padding: 8px 10px; bottom: 0; left: 0; right: 0;
display: flex; padding: 10px 10px 10px;
align-items: center; z-index: 2;
background: var(--card);
border-top: 1px solid var(--border);
} }
.comic-title { .comic-title {
font-size: 0.72rem; font-size: 0.72rem;
font-weight: 500; font-weight: 600;
line-height: 1.35; line-height: 1.35;
color: var(--text); color: #fff;
overflow: hidden; overflow: hidden;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
text-shadow: 0 1px 4px rgba(0,0,0,0.8);
} }
/* Download badge on hover */ /* ── Skeleton loading cards ──────────────────────────────────────────── */
.comic-card::after { .skeleton-card {
content: "↓ Download"; width: 150px;
position: absolute; height: 300px;
bottom: 70px; border-radius: var(--radius);
left: 0; right: 0; border: 1px solid var(--border);
background: rgba(79, 142, 247, 0.85); background: linear-gradient(90deg, var(--card) 25%, var(--surface2) 50%, var(--card) 75%);
color: #fff; background-size: 400% 100%;
font-size: 0.75rem; animation: shimmer 1.6s ease infinite;
font-weight: 700;
text-align: center;
padding: 6px 0;
opacity: 0;
transition: opacity 0.18s;
pointer-events: none;
} }
.comic-card:hover::after { opacity: 1; } @keyframes shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* ── Empty state ─────────────────────────────────────────── */ /* ── Empty state ─────────────────────────────────────────────────────── */
#empty-state { #empty-state {
display: none; display: none;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 12px; gap: 16px;
margin-top: 80px; margin-top: 80px;
color: var(--muted); color: var(--muted);
text-align: center; text-align: center;
} }
#empty-state svg { opacity: 0.3; } .empty-box {
#empty-state p { font-size: 0.9rem; } width: 100px;
height: 100px;
border: 2px dashed var(--border2);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
}
/* ── Toast ───────────────────────────────────────────────── */ .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 { #toast {
position: fixed; position: fixed;
bottom: 24px; bottom: 24px;
@@ -305,92 +506,114 @@
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
pointer-events: none; pointer-events: none;
max-width: 340px;
} }
.toast-msg { .toast-msg {
background: var(--surface); background: var(--surface2);
border: 1px solid var(--border); border: 1px solid var(--border2);
border-left: 3px solid var(--accent);
color: var(--text); color: var(--text);
padding: 10px 16px; padding: 11px 16px;
border-radius: 6px; border-radius: var(--radius);
font-size: 0.82rem; font-size: 0.8rem;
box-shadow: 0 4px 24px rgba(0,0,0,0.5); line-height: 1.4;
animation: slideIn 0.2s ease; box-shadow: 0 8px 32px rgba(0,0,0,0.5);
animation: slideIn 0.22s ease;
opacity: 1; opacity: 1;
transition: opacity 0.3s; transition: opacity 0.3s;
} }
.toast-msg.is-error { border-left-color: var(--error); }
.toast-msg.fade { opacity: 0; } .toast-msg.fade { opacity: 0; }
@keyframes slideIn { @keyframes slideIn {
from { transform: translateX(40px); opacity: 0; } from { transform: translateX(32px); opacity: 0; }
to { transform: translateX(0); opacity: 1; } to { transform: translateX(0); opacity: 1; }
} }
/* ── Library toolbar ─────────────────────────────────────────────────── */ /* ── Responsive — tablet ─────────────────────────────────────────────── */
.library-toolbar { @media (max-width: 860px) {
display: flex; .url-form { max-width: 100%; }
align-items: center;
gap: 12px; .filter-input { width: 160px; }
margin-bottom: 20px;
.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; flex-wrap: wrap;
padding: 12px 16px;
gap: 10px;
} }
.library-toolbar .section-heading { .url-form {
margin-bottom: 0; flex: 0 0 100%;
flex-shrink: 0; max-width: 100%;
} }
.filter-input { /* Queue */
height: 32px; .queue-item { padding: 10px 16px; }
padding: 0 12px;
background: var(--surface); /* Main */
border: 1px solid var(--border); main { padding: 20px 16px; }
border-radius: 6px;
color: var(--text); /* Toolbar: heading row then controls row */
font-size: 0.8rem; .library-toolbar { flex-wrap: wrap; row-gap: 10px; }
outline: none;
width: 200px; .filter-wrap {
transition: border-color 0.15s; flex: 1 1 auto;
min-width: 0;
} }
.filter-input::placeholder { color: var(--muted); } .filter-input { width: 100%; }
.filter-input:focus { border-color: var(--accent); }
.sort-group { .sort-group {
display: flex; flex: 0 0 100%;
gap: 4px; order: 4;
margin-left: auto; margin-left: 0;
overflow-x: auto;
/* hide scrollbar visually but keep scrollable */
scrollbar-width: none;
} }
.sort-btn { .sort-group::-webkit-scrollbar { display: none; }
height: 32px;
padding: 0 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--muted);
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
white-space: nowrap;
}
.sort-btn:hover { color: var(--text); border-color: var(--accent); } /* Center single-column grid on very small screens */
.sort-btn.active { color: var(--accent); border-color: var(--accent); background: rgba(79,142,247,0.08); } #comics-grid { justify-content: center; gap: 14px; }
/* Toasts go edge-to-edge */
#toast {
left: 12px;
right: 12px;
bottom: 12px;
max-width: none;
}
}
</style> </style>
</head> </head>
<body> <body>
<header> <header>
<div class="logo">YOINK<span>.</span></div> <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"> <form class="url-form" id="url-form">
<input <input
class="url-input" class="url-input"
id="url-input" id="url-input"
type="url" type="url"
placeholder="Paste a comic URL to download..." placeholder="Paste a comic URL to download…"
required required
autocomplete="off" autocomplete="off"
spellcheck="false" spellcheck="false"
@@ -403,8 +626,16 @@
<main> <main>
<div class="library-toolbar"> <div class="library-toolbar">
<div class="section-heading">Library</div> <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…" /> <input class="filter-input" id="filter-input" type="search" placeholder="Filter by title…" />
</div>
<div class="sort-group"> <div class="sort-group">
<button class="sort-btn active" data-sort="newest">Newest</button> <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="oldest">Oldest</button>
@@ -412,15 +643,19 @@
<button class="sort-btn" data-sort="za">Z–A</button> <button class="sort-btn" data-sort="za">Z–A</button>
</div> </div>
</div> </div>
<div id="comics-grid"></div> <div id="comics-grid"></div>
<div id="empty-state"> <div id="empty-state">
<svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2"> <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"/> <rect x="3" y="3" width="18" height="18" rx="2"/>
<path d="M3 9h18M9 21V9"/> <path d="M3 9h18M9 21V9"/>
</svg> </svg>
<p>No comics yet — paste a URL above to get started.</p>
</div> </div>
<p>No comics yet — paste a URL above to start building your library.</p>
</div> </div>
</main>
<div id="toast"></div> <div id="toast"></div>
@@ -428,7 +663,7 @@
// ── State ────────────────────────────────────────────────────────────── // ── State ──────────────────────────────────────────────────────────────
let knownJobs = {}; let knownJobs = {};
let dismissedJobs = JSON.parse(localStorage.getItem('dismissedJobs') || '{}'); let dismissedJobs = JSON.parse(localStorage.getItem('dismissedJobs') || '{}');
let allComics = []; // raw list from server (newest-first) let allComics = [];
let currentSort = localStorage.getItem('comicSort') || 'newest'; let currentSort = localStorage.getItem('comicSort') || 'newest';
// ── DOM refs ─────────────────────────────────────────────────────────── // ── DOM refs ───────────────────────────────────────────────────────────
@@ -441,6 +676,7 @@
const toastEl = document.getElementById('toast'); const toastEl = document.getElementById('toast');
const filterInput = document.getElementById('filter-input'); const filterInput = document.getElementById('filter-input');
const sortBtns = document.querySelectorAll('.sort-btn'); const sortBtns = document.querySelectorAll('.sort-btn');
const countEl = document.getElementById('comic-count');
// ── Submit handler ───────────────────────────────────────────────────── // ── Submit handler ─────────────────────────────────────────────────────
form.addEventListener('submit', async (e) => { form.addEventListener('submit', async (e) => {
@@ -484,18 +720,18 @@
} }
queue.classList.add('visible'); queue.classList.add('visible');
active.sort((a, b) => new Date(a.created_at) - new Date(b.created_at)); active.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
active.forEach(job => { active.forEach(job => {
const row = document.createElement('div'); const row = document.createElement('div');
row.className = 'queue-item'; row.className = 'queue-item';
row.dataset.status = job.status;
const statusPill = makeStatusPill(job); const bar = document.createElement('div');
bar.className = 'queue-status-bar';
const meta = document.createElement('div'); const meta = document.createElement('div');
meta.style.flex = '1'; meta.className = 'queue-meta';
meta.style.minWidth = '0';
const title = document.createElement('div'); const title = document.createElement('div');
title.className = 'queue-title'; title.className = 'queue-title';
@@ -507,17 +743,19 @@
meta.append(title, urlEl); meta.append(title, urlEl);
const pill = makeStatusPill(job);
const dismiss = document.createElement('button'); const dismiss = document.createElement('button');
dismiss.className = 'dismiss-btn'; dismiss.className = 'dismiss-btn';
dismiss.title = 'Dismiss'; dismiss.title = 'Dismiss';
dismiss.textContent = '×'; dismiss.innerHTML = '&times;';
dismiss.addEventListener('click', () => { dismiss.addEventListener('click', () => {
dismissedJobs[job.id] = true; dismissedJobs[job.id] = true;
localStorage.setItem('dismissedJobs', JSON.stringify(dismissedJobs)); localStorage.setItem('dismissedJobs', JSON.stringify(dismissedJobs));
renderQueue(); renderQueue();
}); });
row.append(statusPill, meta, dismiss); row.append(bar, meta, pill, dismiss);
queue.append(row); queue.append(row);
}); });
} }
@@ -540,15 +778,12 @@
}[job.status] || job.status; }[job.status] || job.status;
pill.append(document.createTextNode(label)); pill.append(document.createTextNode(label));
if (job.error) pill.title = job.error;
if (job.error) {
pill.title = job.error;
}
return pill; return pill;
} }
// ── Render comics grid ───────────────────────────────────────────────── // ── Filter & sort ──────────────────────────────────────────────────────
function applyFilterAndSort() { function applyFilterAndSort() {
const query = filterInput.value.trim().toLowerCase(); const query = filterInput.value.trim().toLowerCase();
@@ -556,7 +791,6 @@
? allComics.filter(c => c.title.toLowerCase().includes(query)) ? allComics.filter(c => c.title.toLowerCase().includes(query))
: allComics.slice(); : allComics.slice();
// Server already sends newest-first; re-sort only when needed
if (currentSort === 'oldest') { if (currentSort === 'oldest') {
comics = comics.slice().reverse(); comics = comics.slice().reverse();
} else if (currentSort === 'az') { } else if (currentSort === 'az') {
@@ -568,15 +802,19 @@
renderComics(comics); renderComics(comics);
} }
// ── Render comics ──────────────────────────────────────────────────────
function renderComics(comics) { function renderComics(comics) {
grid.innerHTML = ''; grid.innerHTML = '';
if (!comics || comics.length === 0) { if (!comics || comics.length === 0) {
emptyEl.style.display = 'flex'; emptyEl.style.display = 'flex';
countEl.style.display = 'none';
return; return;
} }
emptyEl.style.display = 'none'; emptyEl.style.display = 'none';
countEl.textContent = allComics.length;
countEl.style.display = '';
comics.forEach(comic => { comics.forEach(comic => {
const a = document.createElement('a'); const a = document.createElement('a');
@@ -620,14 +858,22 @@
return div; 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 ────────────────────────────────────────────────────────────── // ── Toast ──────────────────────────────────────────────────────────────
function toast(msg, isError = false) { function toast(msg, isError = false) {
const el = document.createElement('div'); const el = document.createElement('div');
el.className = 'toast-msg'; el.className = 'toast-msg' + (isError ? ' is-error' : '');
el.textContent = msg; el.textContent = msg;
if (isError) el.style.borderColor = 'var(--error)';
toastEl.append(el); toastEl.append(el);
setTimeout(() => { setTimeout(() => {
el.classList.add('fade'); el.classList.add('fade');
setTimeout(() => el.remove(), 350); setTimeout(() => el.remove(), 350);
@@ -639,27 +885,23 @@
try { try {
const res = await fetch('/api/jobs'); const res = await fetch('/api/jobs');
const jobs = await res.json(); const jobs = await res.json();
let needComicRefresh = false; let needComicRefresh = false;
jobs.forEach(job => { jobs.forEach(job => {
const prev = knownJobs[job.id]; const prev = knownJobs[job.id];
if (prev && prev.status !== 'complete' && job.status === 'complete') { if (prev && prev.status !== 'complete' && job.status === 'complete') {
needComicRefresh = true; needComicRefresh = true;
toast(`"${job.title}" downloaded successfully`); toast(`"${job.title}" downloaded`);
} }
if (prev && prev.status !== 'error' && job.status === 'error') { if (prev && prev.status !== 'error' && job.status === 'error') {
toast(`Error downloading "${job.title || job.url}": ${job.error}`, true); toast(`Failed: ${job.title || job.url}${job.error ? ' — ' + job.error : ''}`, true);
} }
knownJobs[job.id] = job; knownJobs[job.id] = job;
}); });
renderQueue(); renderQueue();
if (needComicRefresh) await fetchComics();
if (needComicRefresh) { } catch (_) {}
await fetchComics();
}
} catch (_) { /* network hiccup — ignore */ }
} }
async function fetchComics() { async function fetchComics() {
@@ -671,22 +913,21 @@
} }
// ── Init ─────────────────────────────────────────────────────────────── // ── Init ───────────────────────────────────────────────────────────────
sortBtns.forEach(b => {
if (b.dataset.sort === currentSort) b.classList.add('active');
else b.classList.remove('active');
// Restore saved sort b.addEventListener('click', () => {
sortBtns.forEach(btn => { currentSort = b.dataset.sort;
if (btn.dataset.sort === currentSort) btn.classList.add('active');
else btn.classList.remove('active');
btn.addEventListener('click', () => {
currentSort = btn.dataset.sort;
localStorage.setItem('comicSort', currentSort); localStorage.setItem('comicSort', currentSort);
sortBtns.forEach(b => b.classList.toggle('active', b === btn)); sortBtns.forEach(x => x.classList.toggle('active', x === b));
applyFilterAndSort(); applyFilterAndSort();
}); });
}); });
filterInput.addEventListener('input', applyFilterAndSort); filterInput.addEventListener('input', applyFilterAndSort);
showSkeletons();
fetchComics(); fetchComics();
setInterval(pollJobs, 2000); setInterval(pollJobs, 2000);
setInterval(fetchComics, 10000); setInterval(fetchComics, 10000);