av/jellybit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Перенос дизайна в server-rendered веб-UI (web-ui)

Browse Source 
Новая capability web-ui: презентационный перенос готового дизайна
(семантический HTML + единый jellybit.css, тёмная тема по настройке ОС)
в html/template без шага сборки.

- Встроенная (go:embed) отдача статики под /static с Cache-Control и
  cache-busting (?v=<hash> по содержимому css/js).
- Шрифты IBM Plex self-hosted (@font-face, cyrillic+latin), без CDN.
- Наколеночный менеджер зависимостей: вендор (htmx + шрифты) не хранится
  в репо (gitignore), идемпотентно добывается `task assets` по
  web/assets.manifest с проверкой sha256; task build/run зависят от assets.
- Общие партиалы: шапка, бейдж статуса (карта всех 14 состояний),
  виджет «файл источника → раскладка» (общий для review и download).
- Страницы: список с фильтром/поиском, ревью, новая страница просмотра
  загрузки (/download/{id}). deleted скрыт по умолчанию.
- Превью раскладки берётся из единой логики internal/layout
  (buildFileRows), без дублирования правил имён в шаблонах.
- Убраны meta-refresh и инлайн-стили; copyHash на vanilla с fallback
  на execCommand и честной индикацией (целевой деплой — HTTP LAN).

Вне scope (отдельный change): живые обновления прогресса и раздел
раздачи, клиентский режим ручной раскладки файл→серия (с Alpine.js).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
av
2026-06-30 19:59:19 +03:00
co-authored by Claude Opus 4.8
parent d190072647
commit 4e2593ac31
26 changed files with 1960 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+4
View File
@@ -2,6 +2,10 @@
/jellybit
/dist/
# Вендорные фронтенд-ассеты — не храним в репо, добываются `task assets`
# по web/assets.manifest (идемпотентно, с проверкой sha256).
/web/static/vendor/
# Реальный конфиг (секреты) и локальная БД
/config.toml
/.env
Taskfile.yml
+21
View File
@@ -20,11 +20,13 @@ tasks:
run:
desc: 'Локальный запуск (нужен ./config.toml с db_path -> ./jellybit.db)'
deps: [assets]
cmds:
- go run {{.PKG}} --config ./config.toml
build:
desc: Статический бинарь linux/amd64 для сервера (Intel N150)
deps: [assets]
cmds:
- CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -trimpath -ldflags='-s -w' -o {{.BINARY}} {{.PKG}}
@@ -43,6 +45,25 @@ tasks:
cmds:
- go mod tidy
assets:
desc: 'Идемпотентный фетч вендорных ассетов в web/static/vendor (по web/assets.manifest, проверка sha256; Node не нужен)'
cmds:
- |
set -e
while IFS= read -r line; do
case "$line" in ''|\#*) continue;; esac
set -- $line
dest=$1; url=$2; sum=$3
file="web/static/$dest"
if [ -f "$file" ] && echo "$sum $file" | sha256sum -c --status - 2>/dev/null; then
continue
fi
mkdir -p "$(dirname "$file")"
echo "↓ $dest"
curl -fsSL --retry 3 -o "$file" "$url"
echo "$sum $file" | sha256sum -c -
done < web/assets.manifest
image:
desc: Docker-образ из готового бинаря (см. docs/adr docker-deploy)
deps: [build]
internal/httpapi/download.go
+108
View File
@@ -0,0 +1,108 @@
package httpapi
import (
"errors"
"net/http"
"strconv"
"git.vakhrushev.me/av/jellybit/internal/store"
)
// --- Страница просмотра одной загрузки ---
type downloadDetailView struct {
ID int64
Title string
Source string
Infohash string
InfohashShort string
Context string
State string
Error string
Note string
CreatedAt string
UpdatedAt string
// Распознавание (если есть план).
HasPlan bool
MediaType string
IsSeries bool
RecTitle string
OriginalTitle string
Year int
Provider string
ProviderID string
NoBase bool
Confidence string
Files []fileRow
// Действия по состоянию (как на главной).
Terminal bool
Reviewable bool
Undoable bool
Relinkable bool
Retriable bool
}
func (s *server) handleDownload(w http.ResponseWriter, r *http.Request) {
id, err := pathID(r)
if err != nil {
http.Error(w, "некорректный id", http.StatusBadRequest)
return
}
rd, err := s.deps.Reviewer.ReviewData(r.Context(), id)
if err != nil {
if errors.Is(err, store.ErrNotFound) {
http.Error(w, "задача не найдена", http.StatusNotFound)
return
}
s.deps.Logger.Error("download detail data", "id", id, "error", err)
http.Error(w, "внутренняя ошибка", http.StatusInternalServerError)
return
}
d := rd.Download
view := downloadDetailView{
ID: id,
Title: d.SourceRef,
Source: shorten(d.SourceRef, 120),
Infohash: d.Infohash.String,
InfohashShort: shortenHash(d.Infohash.String),
Context: d.Context,
State: string(d.State),
Error: d.ErrorMsg.String,
Note: desyncNote(d.State),
CreatedAt: d.CreatedAt,
UpdatedAt: d.UpdatedAt,
Terminal: d.State.IsTerminal(),
Reviewable: d.State == store.StateReview || d.State == store.StateDeferred,
Undoable: d.State == store.StateDone,
Relinkable: d.State == store.StateReverted || d.State == store.StateCancelled ||
d.State == store.StateTargetMissing,
Retriable: d.State == store.StateFailed || d.State == store.StateStuck,
}
if rd.Recognition != nil {
view.HasPlan = len(rd.Plan.Files) > 0
view.MediaType = string(rd.Plan.Type)
view.IsSeries = rd.Plan.Type == "series"
view.RecTitle = rd.Plan.Title
view.OriginalTitle = rd.Plan.OriginalTitle
view.Year = rd.Plan.Year
switch rd.Provider {
case "", "none":
view.NoBase = rd.Provider == "none"
default:
view.Provider = rd.Provider
view.ProviderID = rd.ProviderID
}
if rd.Recognition.Confidence.Valid {
view.Confidence = strconv.FormatFloat(rd.Recognition.Confidence.Float64, 'f', 2, 64)
}
// Файл источника → целевой путь из превью (единая логика layout).
view.Files = buildFileRows(rd.Plan, rd.Preview)
}
s.render(w, "download.html", view)
}
internal/httpapi/files.go
+57
View File
@@ -0,0 +1,57 @@
package httpapi
import (
"git.vakhrushev.me/av/jellybit/internal/layout"
"git.vakhrushev.me/av/jellybit/internal/recognize"
)
// fileRow — строка виджета «файл источника → раскладка», общего для экранов
// ревью и просмотра загрузки. Целевой путь берётся из превью (единая логика
// internal/layout), а не вычисляется в шаблоне.
type fileRow struct {
Src string
Dst string // целевой путь; пусто — файл не раскладывается
RoleLabel string
Linked bool
Ignored bool
}
// buildFileRows сшивает файлы плана с целевыми путями из превью раскладки.
func buildFileRows(plan recognize.Plan, preview []layout.Link) []fileRow {
dstBySrc := make(map[string]string, len(preview))
for _, l := range preview {
dstBySrc[l.Src] = l.Dst
}
rows := make([]fileRow, 0, len(plan.Files))
for _, f := range plan.Files {
dst := dstBySrc[f.Src]
rows = append(rows, fileRow{
Src: f.Src,
Dst: dst,
RoleLabel: roleLabel(string(f.Role)),
Linked: dst != "",
Ignored: f.Role == "ignore",
})
}
return rows
}
// roleLabel — человекочитаемая роль файла раскладки.
func roleLabel(role string) string {
switch role {
case "episode":
return "эпизод"
case "main", "movie":
return "фильм"
case "subtitle":
return "субтитры"
case "extra":
return "допматериал"
case "sample":
return "семпл"
case "ignore":
return "игнор"
default:
return role
}
}
internal/httpapi/httpapi.go
+67 -38
View File
@@ -10,6 +10,7 @@ import (
"errors"
"fmt"
"html/template"
"io/fs"
"log/slog"
"net/http"
"net/url"
@@ -54,24 +55,32 @@ type Deps struct {
}
type server struct {
deps Deps
index *template.Template
review *template.Template
deps Deps
tmpl *template.Template
assetVer string
}
// NewRouter собирает HTTP-обработчик сервиса.
func NewRouter(d Deps) (http.Handler, error) {
index, err := template.ParseFS(web.FS, "templates/index.html")
assetVer, err := assetVersion()
if err != nil {
return nil, err
}
review, err := template.New("review.html").
Funcs(template.FuncMap{"add": func(a, b int) int { return a + b }}).
ParseFS(web.FS, "templates/review.html")
funcs := template.FuncMap{
"add": func(a, b int) int { return a + b },
"asset": func(p string) string { return "/static/" + p + "?v=" + assetVer },
"badgeLabel": badgeLabel,
}
tmpl, err := template.New("").Funcs(funcs).
ParseFS(web.FS, "templates/*.html", "templates/partials/*.html")
if err != nil {
return nil, err
}
s := &server{deps: d, index: index, review: review}
staticFS, err := fs.Sub(web.FS, "static")
if err != nil {
return nil, err
}
s := &server{deps: d, tmpl: tmpl, assetVer: assetVer}
r := chi.NewRouter()
r.Use(middleware.RequestID)
@@ -80,8 +89,12 @@ func NewRouter(d Deps) (http.Handler, error) {
r.Get("/healthz", handleHealthz)
// Статика (встроенная, с длинным кэшем; URL версионируются ?v=).
r.Handle("/static/*", http.StripPrefix("/static/", staticHandler(staticFS)))
// Веб-UI.
r.Get("/", s.handleIndex)
r.Get("/download/{id}", s.handleDownload)
r.Post("/ui/downloads", s.handleUIAdd)
r.Post("/ui/downloads/{id}/cancel", s.handleUICancel)
r.Post("/ui/downloads/{id}/retry", s.handleUIRetry)
@@ -124,18 +137,23 @@ type indexView struct {
}
type downloadView struct {
ID int64
Source string
Infohash string
Context string
State string
Error string
Terminal bool
Reviewable bool // review/deferred — есть экран ревью
Undoable bool // done — можно откатить раскладку
Relinkable bool // reverted/cancelled/target_missing — можно перепривязать заново
Retriable bool // failed/stuck — можно повторить попытку
Note string // пояснение рассинхрона (target_missing/orphaned/deleted)
ID int64
Title string // отображаемый заголовок карточки
Source string
Infohash string // полный (для копирования)
InfohashShort string // усечённый (для показа)
Context string
State string
Group string // группа фильтра (review/active/done/problem/other)
SearchText string // haystack для клиентского поиска (lowercase)
Error string
Terminal bool
Deleted bool // скрыт по умолчанию на главной
Reviewable bool // review/deferred — есть экран ревью
Undoable bool // done — можно откатить раскладку
Relinkable bool // reverted/cancelled/target_missing — можно перепривязать заново
Retriable bool // failed/stuck — можно повторить попытку
Note string // пояснение рассинхрона (target_missing/orphaned/deleted)
}
func (s *server) handleIndex(w http.ResponseWriter, r *http.Request) {
@@ -149,10 +167,7 @@ func (s *server) handleIndex(w http.ResponseWriter, r *http.Request) {
for _, d := range downloads {
view.Downloads = append(view.Downloads, toView(d))
}
w.Header().Set("Content-Type", "text/html; charset=utf-8")
if err := s.index.Execute(w, view); err != nil {
s.deps.Logger.Error("render index", "error", err)
}
s.render(w, "index.html", view)
}
func (s *server) handleUIAdd(w http.ResponseWriter, r *http.Request) {
@@ -323,16 +338,22 @@ func toDTO(d store.Download) downloadDTO {
}
func toView(d store.Download) downloadView {
state := string(d.State)
return downloadView{
ID: d.ID,
Source: shorten(d.SourceRef, 64),
Infohash: d.Infohash.String,
Context: d.Context,
State: string(d.State),
Error: d.ErrorMsg.String,
Terminal: d.State.IsTerminal(),
Reviewable: d.State == store.StateReview || d.State == store.StateDeferred,
Undoable: d.State == store.StateDone,
ID: d.ID,
Title: d.SourceRef,
Source: shorten(d.SourceRef, 64),
Infohash: d.Infohash.String,
InfohashShort: shortenHash(d.Infohash.String),
Context: d.Context,
State: state,
Group: stateGroup(state),
SearchText: strings.ToLower(d.SourceRef + " " + d.Infohash.String + " " + d.Context),
Error: d.ErrorMsg.String,
Terminal: d.State.IsTerminal(),
Deleted: d.State == store.StateDeleted,
Reviewable: d.State == store.StateReview || d.State == store.StateDeferred,
Undoable: d.State == store.StateDone,
Relinkable: d.State == store.StateReverted || d.State == store.StateCancelled ||
d.State == store.StateTargetMissing,
Retriable: d.State == store.StateFailed || d.State == store.StateStuck,
@@ -340,6 +361,14 @@ func toView(d store.Download) downloadView {
}
}
// shortenHash усекает infohash до вида "a1b2c3d4e5…f0" для компактного показа.
func shortenHash(h string) string {
if len(h) <= 12 {
return h
}
return h[:10] + "…" + h[len(h)-2:]
}
// desyncNote — пояснение состояния рассинхрона для UI (см. state-reconciliation).
func desyncNote(s store.State) string {
switch s {
@@ -429,9 +458,9 @@ func userErr(r *http.Request, err error, downloadID int64) string {
return fmt.Sprintf("%s (request_id=%s)", msg, middleware.GetReqID(r.Context()))
}
// requestLogger пишет структурированный лог по каждому запросу. Частые
// служебные запросы (healthcheck, GET-страницы веб-UI с авто-рефрешем) пишем
// на DEBUG, чтобы не зашумлять INFO; мутации и REST API остаются на INFO.
// requestLogger пишет структурированный лог по каждому запросу. Служебные и
// навигационные GET (healthcheck, страницы веб-UI, статика) пишем на DEBUG,
// чтобы не зашумлять INFO; мутации и REST API остаются на INFO.
func requestLogger(logger *slog.Logger) func(http.Handler) http.Handler {
return func(next http.Handler) http.Handler {
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
@@ -459,8 +488,8 @@ func requestLogger(logger *slog.Logger) func(http.Handler) http.Handler {
}
}
// requestLogLevel понижает уровень для частых служебных запросов: healthcheck
// и GET-страницы веб-UI (список авто-рефрешится каждые 5 с). Мутации и REST
// requestLogLevel понижает уровень для служебных и навигационных запросов:
// healthcheck и GET-страницы веб-UI (включая статику). Мутации и REST
// API (`/api/...`) остаются на INFO.
func requestLogLevel(r *http.Request) slog.Level {
switch {
internal/httpapi/httpapi_test.go
+1 -1
View File
@@ -353,7 +353,7 @@ func TestReviewRenders(t *testing.T) {
}
for _, want := range []string{"Фарго", "нет матча в базе", "Fargo/e1.mkv",
"Season 02", "Применить", "Уточнить",
"База метаданных", "269613", "выбрать", "Без базы"} {
"Источник совпадения", "269613", "выбрать", "Без базы"} {
if !strings.Contains(string(body), want) {
t.Errorf("страница ревью не содержит %q", want)
}
internal/httpapi/loglevel_internal_test.go
+1 -1
View File
@@ -12,7 +12,7 @@ func TestRequestLogLevel(t *testing.T) {
want slog.Level
}{
{"GET", "/healthz", slog.LevelDebug}, // healthcheck — тихо
{"GET", "/", slog.LevelDebug}, // список (авто-рефреш)
{"GET", "/", slog.LevelDebug}, // список загрузок
{"GET", "/review/1", slog.LevelDebug}, // страница ревью
{"GET", "/api/downloads", slog.LevelInfo}, // REST API — на INFO
{"POST", "/ui/downloads/1/apply", slog.LevelInfo}, // мутация — на INFO
internal/httpapi/render.go
+104
View File
@@ -0,0 +1,104 @@
package httpapi
import (
"bytes"
"crypto/sha256"
"encoding/hex"
"io/fs"
"net/http"
"git.vakhrushev.me/av/jellybit/web"
)
// assetVersion — короткий хеш изменяемых ассетов (css/js) для cache-busting.
// Шрифты и вендор адресуются по неизменному имени, их версионировать не нужно.
func assetVersion() (string, error) {
h := sha256.New()
for _, p := range []string{"static/css/jellybit.css", "static/js/app.js"} {
b, err := web.FS.ReadFile(p)
if err != nil {
return "", err
}
_, _ = h.Write(b)
}
return hex.EncodeToString(h.Sum(nil))[:12], nil
}
// staticHandler отдаёт встроенную статику с длинным иммутабельным кэшем —
// URL версионируются через ?v=<assetVersion> в шаблонах, поэтому свежий
// деплой не отдаёт устаревший файл.
func staticHandler(fsys fs.FS) http.Handler {
fileServer := http.FileServer(http.FS(fsys))
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Cache-Control", "public, max-age=31536000, immutable")
fileServer.ServeHTTP(w, r)
})
}
// badgeLabel — человекочитаемая подпись состояния для бейджа (см. handoff п.4).
// CSS-класс берётся отдельно как st-<state>; неизвестное состояние показываем
// как есть, чтобы не терять его в UI.
func badgeLabel(state string) string {
switch state {
case "downloading":
return "⬇ качается"
case "completed":
return "⬇ скачано"
case "recognizing":
return "🧠 распознаётся"
case "linking":
return "🔗 раскладка"
case "review":
return "🟡 на ревью"
case "deferred":
return "🕗 отложено"
case "done":
return "✅ готово"
case "stuck":
return "⏳ застряло"
case "target_missing":
return "⚠ нет цели"
case "failed":
return "⛔ ошибка"
case "orphaned":
return "⚠ потеряно"
case "cancelled":
return "✖ отменено"
case "reverted":
return "↩ откат"
case "deleted":
return "🗑 удалено"
default:
return state
}
}
// stateGroup — группа фильтра на главной (чипы): ждут меня / в работе / готово
// / проблемы / прочее. Завязано на смысл состояния, не на цвет.
func stateGroup(state string) string {
switch state {
case "review", "deferred":
return "review"
case "downloading", "completed", "recognizing", "linking":
return "active"
case "done":
return "done"
case "stuck", "failed", "target_missing", "orphaned":
return "problem"
default:
return "other"
}
}
// render отрисовывает именованный шаблон в буфер и только затем пишет ответ —
// при ошибке шаблона клиент не получит «полустраницу».
func (s *server) render(w http.ResponseWriter, name string, data any) {
var buf bytes.Buffer
if err := s.tmpl.ExecuteTemplate(&buf, name, data); err != nil {
s.deps.Logger.Error("render", "template", name, "error", err)
http.Error(w, "внутренняя ошибка", http.StatusInternalServerError)
return
}
w.Header().Set("Content-Type", "text/html; charset=utf-8")
_, _ = buf.WriteTo(w)
}
internal/httpapi/render_test.go
+111
View File
@@ -0,0 +1,111 @@
package httpapi
import (
"context"
"io"
"log/slog"
"net/http"
"net/http/httptest"
"strings"
"testing"
"git.vakhrushev.me/av/jellybit/internal/store"
"git.vakhrushev.me/av/jellybit/internal/worker"
)
// stubReader — минимальный Reader для проверки рендера списка.
type stubReader struct {
list []store.Download
one *store.Download
}
func (s stubReader) ListDownloads(context.Context) ([]store.Download, error) { return s.list, nil }
func (s stubReader) GetDownload(context.Context, int64) (*store.Download, error) {
if s.one == nil {
return nil, store.ErrNotFound
}
return s.one, nil
}
// stubReviewer — Reviewer-заглушка (нужна для /download/{id}).
type stubReviewer struct{ data *worker.ReviewData }
func (s stubReviewer) ReviewData(context.Context, int64) (*worker.ReviewData, error) {
if s.data == nil {
return nil, store.ErrNotFound
}
return s.data, nil
}
func (stubReviewer) Apply(context.Context, int64) error { return nil }
func (stubReviewer) Refine(context.Context, int64, string) error { return nil }
func (stubReviewer) SetType(context.Context, int64, string) error { return nil }
func (stubReviewer) IgnoreFile(context.Context, int64, string) error { return nil }
func (stubReviewer) Defer(context.Context, int64) error { return nil }
func (stubReviewer) Undo(context.Context, int64) error { return nil }
func (stubReviewer) Relink(context.Context, int64) error { return nil }
func (stubReviewer) Rerecognize(context.Context, int64) error { return nil }
func (stubReviewer) ChooseCandidate(context.Context, int64, int64) error { return nil }
func (stubReviewer) SetProviderID(context.Context, int64, string, string) error { return nil }
func (stubReviewer) ClearProvider(context.Context, int64) error { return nil }
func testRouter(t *testing.T, r stubReader, rv stubReviewer) http.Handler {
t.Helper()
h, err := NewRouter(Deps{
Logger: slog.New(slog.NewTextHandler(io.Discard, nil)),
Reader: r,
Reviewer: rv,
})
if err != nil {
t.Fatalf("NewRouter: %v", err)
}
return h
}
func get(t *testing.T, h http.Handler, path string) *httptest.ResponseRecorder {
t.Helper()
rr := httptest.NewRecorder()
h.ServeHTTP(rr, httptest.NewRequest(http.MethodGet, path, nil))
return rr
}
// TestRouterRendersPages проверяет, что шаблоны парсятся и страницы рендерятся.
func TestRouterRendersPages(t *testing.T) {
dl := store.Download{ID: 7, SourceRef: "Fargo.S02", Infohash: store.NullString("a1b2c3d4e5f6a7b8"), State: store.StateReview}
h := testRouter(t,
stubReader{list: []store.Download{dl}, one: &dl},
stubReviewer{data: &worker.ReviewData{Download: dl}},
)
if rr := get(t, h, "/"); rr.Code != http.StatusOK {
t.Fatalf("GET / = %d, want 200", rr.Code)
} else if !strings.Contains(rr.Body.String(), "st-review") {
t.Errorf("index не содержит бейдж статуса")
}
if rr := get(t, h, "/download/7"); rr.Code != http.StatusOK {
t.Fatalf("GET /download/7 = %d, want 200", rr.Code)
}
}
// TestStaticServed проверяет отдачу встроенной статики с кэш-заголовком.
func TestStaticServed(t *testing.T) {
h := testRouter(t, stubReader{}, stubReviewer{})
rr := get(t, h, "/static/css/jellybit.css")
if rr.Code != http.StatusOK {
t.Fatalf("GET css = %d, want 200", rr.Code)
}
if cc := rr.Header().Get("Cache-Control"); cc == "" {
t.Errorf("нет Cache-Control на статике")
}
if !strings.Contains(rr.Body.String(), "@font-face") {
t.Errorf("css без @font-face (шрифты не self-hosted?)")
}
}
// TestDownloadNotFound — несуществующая загрузка → 404.
func TestDownloadNotFound(t *testing.T) {
h := testRouter(t, stubReader{}, stubReviewer{})
if rr := get(t, h, "/download/999"); rr.Code != http.StatusNotFound {
t.Fatalf("GET /download/999 = %d, want 404", rr.Code)
}
}
internal/httpapi/review.go
+5 -33
View File
@@ -46,21 +46,13 @@ type reviewView struct {
Confidence string
Reasons []string
Hints []string
Files []reviewFileView
Preview []string
Files []fileRow
HasPlan bool
HasLinks bool // есть хотя бы один целевой путь → можно применять
NoBase bool // выбрано «без базы»
Candidates []candidateView
}
type reviewFileView struct {
Src string
Role string
Season string
Episode string
Ignored bool
}
type candidateView struct {
ID int64
Provider string
@@ -114,16 +106,9 @@ func (s *server) handleReview(w http.ResponseWriter, r *http.Request) {
if rec.Confidence.Valid {
view.Confidence = strconv.FormatFloat(rec.Confidence.Float64, 'f', 2, 64)
}
for _, f := range rd.Plan.Files {
view.Files = append(view.Files, reviewFileView{
Src: f.Src,
Role: string(f.Role),
Season: intPtrStr(f.Season),
Episode: intPtrStr(f.Episode),
Ignored: f.Role == "ignore",
})
}
view.Files = buildFileRows(rd.Plan, rd.Preview)
view.HasPlan = len(rd.Plan.Files) > 0
view.HasLinks = len(rd.Preview) > 0
for _, c := range rd.Candidates {
view.Candidates = append(view.Candidates, candidateView{
ID: c.ID,
@@ -136,14 +121,8 @@ func (s *server) handleReview(w http.ResponseWriter, r *http.Request) {
})
}
}
for _, l := range rd.Preview {
view.Preview = append(view.Preview, l.Dst)
}
w.Header().Set("Content-Type", "text/html; charset=utf-8")
if err := s.review.Execute(w, view); err != nil {
s.deps.Logger.Error("render review", "error", err)
}
s.render(w, "review.html", view)
}
// --- Действия ревью (POST → redirect) ---
@@ -281,10 +260,3 @@ func redirectReview(w http.ResponseWriter, r *http.Request, id int64, msg string
}
http.Redirect(w, r, u, http.StatusSeeOther)
}
func intPtrStr(p *int) string {
if p == nil {
return "—"
}
return strconv.Itoa(*p)
}
openspec/changes/archive/2026-06-30-web-ui-design-port/.openspec.yaml
+2
View File
@@ -0,0 +1,2 @@
schema: spec-driven
created: 2026-06-30
openspec/changes/archive/2026-06-30-web-ui-design-port/design.md
+155
View File
@@ -0,0 +1,155 @@
## Context
Веб-UI — тонкий транспорт над ядром (приём в `ingest`, команды в `worker`,
чтение в `store`). Рендер server-rendered через `html/template`, ассеты
встраиваются `go:embed` (`web/web.go`). Сейчас встроены только шаблоны;
статика (CSS/JS/шрифты) не отдаётся, «живость» сделана грубым
`<meta http-equiv="refresh" content="5">`, оформление — инлайн-`<style>` с
хардкодом цветов.
Готов дизайн (`tmp/design/`): семантический HTML + единый `jellybit.css`
(токены, тёмная тема по ОС), спроектированный под этот стек — без сборки,
npm, React. Превью целевых путей раскладки уже считается на сервере через
`internal/layout.BuildLinks` (поле `reviewView.Preview`) — это источник истины
имён, дублировать его нельзя (инвариант: превью = реальная раскладка).
Стек зафиксирован с заказчиком: htmx (через манифест с checksum, без Node),
шрифты self-hosted, статика через `go:embed`. Реактивных фреймворков нет:
клиентский режим ручной раскладки файл→серия отложен (операция редкая), вместе
с ним отложен и Alpine.js — его добавим, когда виджет понадобится. Живые
обновления прогресса — отдельный change (`web-live-updates`), здесь meta-refresh
просто убирается.
## Goals / Non-Goals
**Goals:**
- Перенести дизайн `tmp/design/` в прод-шаблоны без шага сборки.
- Встроить и отдавать статику (CSS, htmx, Alpine, шрифты) из одного бинаря.
- Единая дизайн-система: один CSS, токены, тёмная тема по ОС, бейджи статусов.
- Общие партиалы (шапка, бейдж, виджет «файл→раскладка») вместо дублей.
- Добавить страницу `download` (просмотр одной загрузки).
- Превью путей на ревью — показ из единого серверного расчёта `internal/layout`.
**Non-Goals:**
- Живые обновления прогресса/SSE (отдельный change).
- Клиентский режим ручной раскладки файл→серия (S·E, нумерация, live-превью) и
Alpine.js под него — отложены до реальной необходимости (операция редкая).
- Изменение доменного поведения (приём, распознавание, петля ревью, команды).
- Авторизация веб-UI (остаётся вне scope, доверенная LAN).
- npm/бандлер/CSS-постпроцессинг.
## Decisions
### D1. Статика через `go:embed` + `http.FileServer` под `/static/`
`web/web.go` встраивает `static/*` рядом с `templates/*`. Роут
`r.Handle("/static/*", http.StripPrefix("/static/", fileServer))` с
`Cache-Control` (длинный max-age для вендорных файлов и шрифтов; для CSS —
умеренный, либо cache-busting через `?v=<hash>`, посчитанный при старте).
*Альтернативы:* отдавать с диска — отвергнуто (ломает однобинарность);
CDN для htmx/Alpine — отвергнуто (внешняя сеть, инвариант self-host).
### D2. Шрифты self-hosted через `@font-face`
IBM Plex Sans/Mono кладём в `web/static/fonts/`, подключаем `@font-face` в
`jellybit.css`. Из шаблонов убираем `<link>` на Google Fonts.
*Почему:* umbar — домашний сервер, не зависим от внешней сети, не утекает
referrer. Handoff сам это рекомендует.
### D3. Зависимости фронта — наколеночный менеджер: gitignore + идемпотентный фетч
Вендорные ассеты (htmx + шрифты IBM Plex) **не храним в репозитории** —
`web/static/vendor/` в gitignore. Источник истины — манифест `web/assets.manifest`
(строки `<путь под web/static/> <url> <sha256>`). `task assets` идемпотентен:
для каждой записи — если файл есть и sha256 совпал, берём с диска; иначе качаем и
сверяем (несовпадение валит таргет). Node/бандлер не вводим. Alpine.js не вводим
— реактивных виджетов в этом change нет (см. Non-Goals).
**Граница вендора.** В vendor только фетчабельные третьесторонние пакеты (htmx,
woff2-шрифты). Авторские `jellybit.css` (с вшитым `@font-face` на `../vendor/
fonts/`) и `app.js` — наш исходник, коммитятся как обычно (качать неоткуда).
**Сборка.** `go:embed templates static` встраивает и vendor, поэтому файлы должны
быть на диске к моменту `go build`. `task build`/`task run` зависят от `task
assets`. Бинарь остаётся самодостаточным (всё встроено), репозиторий — без
вендора. Размен: канонична сборка через Task; голый `go build` без `task assets`
соберёт бинарь с неполной статикой (css есть, шрифтов/htmx нет) — это принято.
*Альтернативы:* (1) коммитить результат фетча — отвергнуто заказчиком (не хотим
вендор в репо). (2) npm + бандлер (Parcel/esbuild) через Docker — отвергнуто
сейчас: бандлить нечего (htmx — готовый `<script>`, своего JS ~ноль), целый
рантайм ради пары файлов. Дорастёт фронт до своих компонентов — отдельный change
и esbuild (проще Parcel; есть Go-биндинги, можно без Node).
### D4. Партиалы через `template.ParseFS` нескольких файлов
Выносим общие куски в `web/templates/partials/`: `header.html`,
`status_badge.html` (карта `state→class/подпись`), `layout_widget.html`
(виджет «файл источника → раскладка», общий для review и download). Бейдж
рендерится по `state` — карту держим в одном партиале (`{{define}}`), не
дублируем по страницам. Текущий `add`-FuncMap сохраняем; при нужде добавляем
маленькие чистые функции-хелперы.
*Почему:* handoff (п. 7) прямо просит вынести шапку, бейдж и виджет в общие
партиалы — сейчас они продублированы.
### D5. `download.html` — новая страница `/download/{id}`
Новый GET-хендлер + view-структура: распознавание, файлы→раскладка (тот же
партиал), раздача, история/таймлайн. Действия — по состоянию (как в index),
формы переиспользуют уже существующие `/ui/downloads/{id}/*` эндпоинты.
### D6. Ручная раскладка файл→серия — отложена
Клиентский режим ручного редактирования (S·E по файлам, нумерация,
live-превью) в этот change не входит — операция редкая, не оправдывает
реактивный виджет и Alpine.js сейчас. На ревью остаётся показ файлов и
серверного превью (read-only) + существующие действия через формы/htmx
(уточнить/перераспознать/выбрать кандидата/применить/позже/отклонить).
*Когда понадобится* — заведём отдельный change: тогда же выберем подход
(клиентская валидация + серверный dry-run превью переиспользует
`layout.BuildLinks`, чтобы не дублировать правила имён в JS) и добавим Alpine.
### D7. Убрать meta-refresh и инлайн-стили
`<meta http-equiv="refresh">` и `<style>` удаляются. До change живых
обновлений список статичен (обновление — перезагрузкой). Это осознанный
временный шаг, чтобы не смешивать презентацию с поведенческим изменением.
## Risks / Trade-offs
- **Устаревание/дрейф htmx** → версия и sha256 в манифесте; обновление
осознанное (правка манифеста + `task assets` с проверкой хеша).
- **URL-rot / офлайн-сборка** (vendor не в репо) → первая сборка требует сети,
дальше файлы кэшируются на диске (идемпотентно). Митигация: пиннинг версий +
два рабочих зеркала (unpkg/jsdelivr), URL правится в манифесте. Если понадобится
жёсткая офлайн-воспроизводимость — внутреннее зеркало или возврат к коммиту.
- **Регресс действий при переносе шаблонов** (поле без `name`, не та форма) →
опираемся на разметку `<!-- action: … -->` в прототипах и существующие
хендлеры; проверяем каждое действие по состоянию; ревью кода до archive.
- **Временная потеря авто-обновления** (D7) → приемлемо, закрывается
следующим change; список обновляется перезагрузкой.
- **Рассинхрон карты статусов** между бейджем и доменом → карта в одном
партиале + спека требует полноты покрытия всех состояний.
## Migration Plan
1. Манифест + идемпотентный `task assets` (фетч htmx и шрифтов в gitignored
`web/static/vendor/` с проверкой sha256); `task build`/`run` зависят от
`assets`; добавить авторские `web/static/{css,js}`, расширить `go:embed`.
2. Роут `/static/*` + `Cache-Control`.
3. Партиалы (header, status_badge, layout_widget); переключить index/review.
4. Добавить `download.html` + хендлер `/download/{id}`.
5. Убрать meta-refresh и инлайн-стили.
6. `task lint` + `task test`; ручная проверка действий по состояниям.
Откат — презентационный, без миграций БД и схемы: revert коммита
восстанавливает прежние шаблоны.
## Open Questions
- Cache-busting CSS: `?v=<hash>` при старте или фиксированный `Cache-Control`
с коротким max-age. Решим при реализации D1 (склонность — хеш при старте).
openspec/changes/archive/2026-06-30-web-ui-design-port/proposal.md
+63
View File
@@ -0,0 +1,63 @@
## Why
Текущий веб-UI — черновой: инлайн `<style>`, хардкод цветов, грубый
`<meta http-equiv="refresh" content="5">` для «живости». Готов полноценный
дизайн (`tmp/design/`) — семантический HTML + один CSS-файл, заточенный ровно
под нашу архитектуру (server-rendered Go, без сборки/npm/React). Пора перенести
его в прод, чтобы «единое окно» стало пригодным для ежедневного использования.
Это презентационный change: поведение ядра (приём, распознавание, раскладка,
петля ревью) не меняется — оформляем уже существующие действия и состояния.
## What Changes
- **Отдача статики:** роут `/static/*` через `http.FileServer` над `web.FS`,
`go:embed` для `web/static/{css,js,fonts,vendor}`, разумные `Cache-Control`.
- **Шрифты self-hosted:** IBM Plex Sans + IBM Plex Mono кладём локально и
подключаем через `@font-face` (без Google Fonts CDN — не зависим от внешней
сети, не светим referrer).
- **Дизайн-система:** `jellybit.css` (токены, тёмная тема по настройке ОС) как
единственный CSS; новые цвета не вводим — только из токенов.
- **Зависимости фронта:** вендорные ассеты (htmx + шрифты) **не храним в репо** —
`web/static/vendor/` в gitignore. `task assets` идемпотентно добывает их по
манифесту (имя/версия/URL/sha256): нет файла или хеш не сошёлся — качает, иначе
берёт с диска. Без Node и бандлера. Авторские css/js — обычный коммит.
- **Общие партиалы:** шапка `.app-header`, бейдж статуса (карта `state→class`),
виджет «файл источника → раскладка» (общий для review и download).
- **Шаблоны:** переносим `index` и `review`, добавляем `download` (просмотр одной
загрузки). Референсные `states.html`/`directions.html` в прод не идут.
- **Убираем meta-refresh** и инлайн-стили; до отдельного change живых
обновлений список остаётся статичным (без авто-обновления прогресса).
- **Клиентский JS по минимуму:** `copyHash` (vanilla), спойлер контекста
(нативный `<details>`). Реактивных виджетов нет — все действия идут через
формы/htmx.
- **Превью путей** на экране ревью отображается из серверного расчёта
(`internal/layout`), без дублирования правил в шаблоне.
- **Формы:** проставить `name` полей, совпадающие с Go-структурами обработчиков.
## Capabilities
### New Capabilities
- `web-ui`: презентационный слой веб-интерфейса — встроенная отдача статики и
шрифтов, единая дизайн-система, рендеринг страниц (список/ревью/просмотр),
бейджи статусов и клиентские взаимодействия без сборки (копирование infohash,
спойлер, режим ручной раскладки с live-превью).
### Modified Capabilities
<!-- Нет. Доменное поведение приёма/распознавания/ревью не меняется; правила
ревью-поверхности живут в docs/specs/review-ux.md (ещё не перенесены в
OpenSpec). Этот change оформляет уже существующие действия и состояния. -->
## Impact
- **Код:** `internal/httpapi` (роут статики, новые/обновлённые хендлеры рендера,
партиалы), `web/web.go` (`go:embed` статики), новые `web/static/**` и
`web/templates/{index,review,download}.html`. Превью зовёт `internal/naming`.
- **Зависимости:** вендор (htmx + шрифты) добывается `task assets` по манифесту с
checksum, не npm/не Go-модуль; Node не вводим. `web/static/vendor/` в gitignore.
`go:embed` требует ассеты на сборке, поэтому `task build`/`task run` зависят от
`task assets` (идемпотентного) — бинарь остаётся самодостаточным, но голый
`go build` без фетча неполноценен (осознанный размен).
- **Поведение:** без изменений в API/ядре. Вне scope: живые обновления прогресса
(отдельный change `web-live-updates`) и клиентский режим ручной раскладки
файл→серия (отложен до реальной необходимости — операция редкая).
openspec/changes/archive/2026-06-30-web-ui-design-port/specs/web-ui/spec.md
+147
View File
@@ -0,0 +1,147 @@
## ADDED Requirements
### Requirement: Встроенная отдача статики
Сервис SHALL отдавать статические ассеты (CSS, клиентский JS, вендорные
библиотеки, шрифты) из встроенной (`go:embed`) файловой системы под префиксом
`/static/`, без внешних зависимостей времени выполнения. Бинарь остаётся
единым и самодостаточным.
#### Scenario: Запрос встроенного ассета
- **WHEN** клиент запрашивает `GET /static/css/jellybit.css`
- **THEN** сервис отвечает `200` с телом из встроенной FS и корректным
`Content-Type`
#### Scenario: Кэширование статики
- **WHEN** сервис отдаёт ответ на запрос под `/static/`
- **THEN** ответ содержит заголовок `Cache-Control`, разрешающий кэширование
ассета браузером
#### Scenario: Несуществующий ассет
- **WHEN** клиент запрашивает несуществующий путь под `/static/`
- **THEN** сервис отвечает `404` и не раскрывает структуру файловой системы
### Requirement: Шрифты без внешних сетей
Веб-UI SHALL подключать шрифты (IBM Plex Sans, IBM Plex Mono) только из
локально встроенных файлов через `@font-face`. Страницы MUST NOT обращаться к
сторонним хостам (Google Fonts CDN и т. п.) для загрузки шрифтов или стилей.
#### Scenario: Нет внешних ссылок на шрифты
- **WHEN** браузер открывает любую страницу веб-UI
- **THEN** все используемые шрифты загружаются из-под `/static/` того же
origin, без обращений к внешним доменам
### Requirement: Единая дизайн-система
Все страницы веб-UI SHALL использовать единственный CSS-файл `jellybit.css` с
дизайн-токенами; страницы MUST NOT содержать инлайн-`<style>` или хардкод
цветов вне токенов. Тема (светлая/тёмная) SHALL определяться настройкой ОС
(`color-scheme` + `prefers-color-scheme`), без отдельного переключателя.
#### Scenario: Тёмная тема по настройке ОС
- **WHEN** в ОS пользователя выбрана тёмная тема и открывается страница
- **THEN** интерфейс отображается в тёмной палитре из токенов, без действий
пользователя
#### Scenario: Нет инлайн-стилей
- **WHEN** рендерится любая страница веб-UI
- **THEN** оформление берётся из подключённого `jellybit.css`, в разметке нет
блоков `<style>` с хардкодом цветов
### Requirement: Бейдж статуса загрузки
Веб-UI SHALL отображать состояние каждой загрузки бейджем
`<span class="badge st-{STATE}">` с человекочитаемой русской подписью; класс
определяет цвет группы. Маппинг SHALL покрывать все состояния домена
(`downloading`, `completed`, `recognizing`, `linking`, `review`, `deferred`,
`done`, `stuck`, `target_missing`, `failed`, `orphaned`, `cancelled`,
`reverted`, `deleted`).
#### Scenario: Состояние отрисовано бейджем
- **WHEN** загрузка находится в состоянии `review`
- **THEN** в списке у неё бейдж с классом `st-review` и подписью «на ревью»
#### Scenario: Полнота покрытия
- **WHEN** загрузка находится в любом из состояний домена
- **THEN** для него существует класс бейджа и русская подпись (неизвестных
состояний без оформления нет)
### Requirement: Страницы веб-UI
Веб-UI SHALL предоставлять страницы: список загрузок с единым окном
добавления и фильтром/поиском (`/`), экран ревью одной загрузки (`/review/{id}`)
и страницу просмотра одной загрузки (`/download/{id}`) с распознаванием,
файлами→раскладкой и историей. Состояние `deleted` SHALL
быть скрыто в списке по умолчанию (с переключателем «показать всё»).
(Раздел живой статистики раздачи на странице загрузки — вне scope этого change,
вводится вместе с живыми обновлениями.)
#### Scenario: Просмотр одной загрузки
- **WHEN** клиент открывает `GET /download/{id}` существующей загрузки
- **THEN** отрисовывается страница с её распознаванием, файлами, раскладкой и
историей
#### Scenario: Удалённые скрыты по умолчанию
- **WHEN** в списке есть загрузки в состоянии `deleted` и фильтр «показать
всё» не включён
- **THEN** они не отображаются, но доступны при включённом переключателе
### Requirement: Действия соответствуют состоянию
Каждая страница SHALL показывать только действия, допустимые в текущем
состоянии загрузки, и каждое действие-кнопка SHALL отправлять форму с полями,
имена которых совпадают с ожидаемыми обработчиком (`internal/httpapi`).
#### Scenario: Набор действий по состоянию
- **WHEN** загрузка в состоянии `done`
- **THEN** доступно действие отката (undo), но недоступны «применить»/«позже»
#### Scenario: Имена полей формы
- **WHEN** пользователь отправляет форму действия (например, «уточнить»)
- **THEN** поля формы имеют `name`, которые обработчик читает без
переименования, и действие исполняется
### Requirement: Превью раскладки через единую логику именования
Превью целевых путей раскладки в веб-UI SHALL вычисляться той же логикой
именования, что и реальная раскладка (`internal/naming`), а не дублировать
правила в шаблоне. Показанные пути MUST совпадать с теми, что создались бы при
применении.
#### Scenario: Превью совпадает с реальной раскладкой
- **WHEN** на экране ревью отображается превью целевых путей для текущей
догадки
- **THEN** эти пути идентичны тем, что создаст применение (те же правила имён,
спецвыпусков, мультифайла, запрещённых символов и коллизий)
### Requirement: Клиентские взаимодействия без сборки
Веб-UI SHALL реализовывать клиентскую логику без шага сборки и без реактивных
фреймворков: копирование infohash (vanilla JS) и раскрытие контекста нативным
`<details>`. Все действия над загрузкой SHALL выполняться через формы/htmx
(раундтрип на сервер), без клиентского пересчёта доменного состояния.
#### Scenario: Копирование infohash
- **WHEN** пользователь нажимает кнопку копирования рядом с infohash
- **THEN** значение infohash копируется в буфер обмена без перезагрузки
страницы
#### Scenario: Раскрытие контекста без JS
- **WHEN** пользователь раскрывает спойлер переданного контекста
- **THEN** контекст показывается нативным `<details>`, без скриптов
openspec/changes/archive/2026-06-30-web-ui-design-port/tasks.md
+46
View File
@@ -0,0 +1,46 @@
## 1. Статика и встраивание
- [x] 1.1 Создать структуру `web/static/{css,js,vendor}/`; `web/static/vendor/` в gitignore
- [x] 1.2 Шрифты IBM Plex Sans + IBM Plex Mono (cyrillic+latin, нужные начертания) — в манифест, фетч в `web/static/vendor/fonts/`
- [x] 1.3 Перенести `jellybit.css` из `tmp/design/` в `web/static/css/`, добавить `@font-face` на `../vendor/fonts/` (убрать ссылки на Google Fonts)
- [x] 1.4 Манифест `web/assets.manifest` (путь/URL/sha256) + идемпотентный `task assets` (нет файла или хеш не сошёлся → качаем, иначе с диска); `task build`/`run` зависят от `assets`
- [x] 1.5 Вынести `copyHash` в `web/static/js/app.js` (vanilla)
- [x] 1.6 Расширить `go:embed` в `web/web.go` на `static/*`
- [x] 1.7 Добавить роут `/static/*` (`http.FileServer` + `StripPrefix`) с `Cache-Control`; решить cache-busting CSS (хеш при старте)
## 2. Общие партиалы
- [x] 2.1 Партиал `web/templates/partials/header.html` (`.app-header`)
- [x] 2.2 Партиал `partials/status_badge.html` — карта `state→class/подпись` для всех 14 состояний (один источник)
- [x] 2.3 Партиал `partials/layout_widget.html` — виджет «файл источника → раскладка» (общий для review и download)
- [x] 2.4 Перенастроить `template.ParseFS` в `httpapi` на загрузку партиалов; сохранить/дополнить FuncMap
## 3. Страница списка (index)
- [x] 3.1 Перенести вёрстку `index.html` из `tmp/design/` в `web/templates/index.html` (карточки `range`, единое окно добавления, фильтр/поиск)
- [x] 3.2 Подключить `jellybit.css` и htmx; убрать `<meta http-equiv="refresh">` и инлайн-`<style>`
- [x] 3.3 Бейдж статуса через партиал; блок `.card-acts` — условия по `state` (соответствие `downloadView`)
- [x] 3.4 `deleted` скрыт по умолчанию + переключатель «показать всё»
- [x] 3.5 Проставить `name` полей форм действий под существующие хендлеры; сверить каждое действие по состоянию
## 4. Страница ревью (review)
- [x] 4.1 Перенести вёрстку `review.html` (догадка, кандидаты `range`, причины, уточнение, действия)
- [x] 4.2 Строка «нейронка» (`.nn-cand`) — обычный кандидат, не особый режим
- [x] 4.3 Превью путей через серверное поле `reviewView.Preview` (единая `internal/layout`)
- [x] 4.4 Сверить поля форм (`apply`/`refine`/`rerecognize`/`type`/`candidate`/`provider`/`nobase`/`defer`) с хендлерами
## 5. Страница просмотра (download)
- [x] 5.1 View-структура `downloadDetailView` (распознавание, файлы, раскладка, раздача, история)
- [x] 5.2 Хендлер `GET /download/{id}` + роут; 404 на отсутствующую загрузку
- [x] 5.3 Шаблон `web/templates/download.html` (переиспользует партиал виджета и бейдж)
- [x] 5.4 Таймлайн истории (`.timeline`) и действия по состоянию
## 6. Проверка и завершение
- [x] 6.1 `task lint` и `task test` зелёные
- [x] 6.2 Ручная проверка: все действия по каждому состоянию срабатывают, превью на ревью = реальная раскладка
- [x] 6.3 Проверить отсутствие внешних сетевых запросов (шрифты/стили только с `/static/`)
- [x] 6.4 `openspec validate --strict web-ui-design-port`
- [x] 6.5 Ревью кода (до archive) — пройдено; находки MEDIUM-1/2, LOW-2/3 исправлены
openspec/specs/web-ui/spec.md
+159
View File
@@ -0,0 +1,159 @@
# web-ui Specification
## Purpose
Презентационный слой веб-интерфейса: встроенная (`go:embed`) отдача статики и
self-hosted шрифтов, единая дизайн-система (`jellybit.css`, тёмная тема по
настройке ОС), рендеринг страниц (список загрузок, ревью, просмотр) с бейджами
состояний и клиентскими взаимодействиями без сборки (копирование infohash,
спойлер контекста). Превью раскладки берётся из единой логики `internal/layout`,
а не дублируется в шаблонах. Тонкий транспорт над ядром (приём — `ingest`,
команды — `worker`, чтение — `store`).
## Requirements
### Requirement: Встроенная отдача статики
Сервис SHALL отдавать статические ассеты (CSS, клиентский JS, вендорные
библиотеки, шрифты) из встроенной (`go:embed`) файловой системы под префиксом
`/static/`, без внешних зависимостей времени выполнения. Бинарь остаётся
единым и самодостаточным.
#### Scenario: Запрос встроенного ассета
- **WHEN** клиент запрашивает `GET /static/css/jellybit.css`
- **THEN** сервис отвечает `200` с телом из встроенной FS и корректным
`Content-Type`
#### Scenario: Кэширование статики
- **WHEN** сервис отдаёт ответ на запрос под `/static/`
- **THEN** ответ содержит заголовок `Cache-Control`, разрешающий кэширование
ассета браузером
#### Scenario: Несуществующий ассет
- **WHEN** клиент запрашивает несуществующий путь под `/static/`
- **THEN** сервис отвечает `404` и не раскрывает структуру файловой системы
### Requirement: Шрифты без внешних сетей
Веб-UI SHALL подключать шрифты (IBM Plex Sans, IBM Plex Mono) только из
локально встроенных файлов через `@font-face`. Страницы MUST NOT обращаться к
сторонним хостам (Google Fonts CDN и т. п.) для загрузки шрифтов или стилей.
#### Scenario: Нет внешних ссылок на шрифты
- **WHEN** браузер открывает любую страницу веб-UI
- **THEN** все используемые шрифты загружаются из-под `/static/` того же
origin, без обращений к внешним доменам
### Requirement: Единая дизайн-система
Все страницы веб-UI SHALL использовать единственный CSS-файл `jellybit.css` с
дизайн-токенами; страницы MUST NOT содержать инлайн-`<style>` или хардкод
цветов вне токенов. Тема (светлая/тёмная) SHALL определяться настройкой ОС
(`color-scheme` + `prefers-color-scheme`), без отдельного переключателя.
#### Scenario: Тёмная тема по настройке ОС
- **WHEN** в ОS пользователя выбрана тёмная тема и открывается страница
- **THEN** интерфейс отображается в тёмной палитре из токенов, без действий
пользователя
#### Scenario: Нет инлайн-стилей
- **WHEN** рендерится любая страница веб-UI
- **THEN** оформление берётся из подключённого `jellybit.css`, в разметке нет
блоков `<style>` с хардкодом цветов
### Requirement: Бейдж статуса загрузки
Веб-UI SHALL отображать состояние каждой загрузки бейджем
`<span class="badge st-{STATE}">` с человекочитаемой русской подписью; класс
определяет цвет группы. Маппинг SHALL покрывать все состояния домена
(`downloading`, `completed`, `recognizing`, `linking`, `review`, `deferred`,
`done`, `stuck`, `target_missing`, `failed`, `orphaned`, `cancelled`,
`reverted`, `deleted`).
#### Scenario: Состояние отрисовано бейджем
- **WHEN** загрузка находится в состоянии `review`
- **THEN** в списке у неё бейдж с классом `st-review` и подписью «на ревью»
#### Scenario: Полнота покрытия
- **WHEN** загрузка находится в любом из состояний домена
- **THEN** для него существует класс бейджа и русская подпись (неизвестных
состояний без оформления нет)
### Requirement: Страницы веб-UI
Веб-UI SHALL предоставлять страницы: список загрузок с единым окном
добавления и фильтром/поиском (`/`), экран ревью одной загрузки (`/review/{id}`)
и страницу просмотра одной загрузки (`/download/{id}`) с распознаванием,
файлами→раскладкой и историей. Состояние `deleted` SHALL
быть скрыто в списке по умолчанию (с переключателем «показать всё»).
(Раздел живой статистики раздачи на странице загрузки — вне scope этого change,
вводится вместе с живыми обновлениями.)
#### Scenario: Просмотр одной загрузки
- **WHEN** клиент открывает `GET /download/{id}` существующей загрузки
- **THEN** отрисовывается страница с её распознаванием, файлами, раскладкой и
историей
#### Scenario: Удалённые скрыты по умолчанию
- **WHEN** в списке есть загрузки в состоянии `deleted` и фильтр «показать
всё» не включён
- **THEN** они не отображаются, но доступны при включённом переключателе
### Requirement: Действия соответствуют состоянию
Каждая страница SHALL показывать только действия, допустимые в текущем
состоянии загрузки, и каждое действие-кнопка SHALL отправлять форму с полями,
имена которых совпадают с ожидаемыми обработчиком (`internal/httpapi`).
#### Scenario: Набор действий по состоянию
- **WHEN** загрузка в состоянии `done`
- **THEN** доступно действие отката (undo), но недоступны «применить»/«позже»
#### Scenario: Имена полей формы
- **WHEN** пользователь отправляет форму действия (например, «уточнить»)
- **THEN** поля формы имеют `name`, которые обработчик читает без
переименования, и действие исполняется
### Requirement: Превью раскладки через единую логику именования
Превью целевых путей раскладки в веб-UI SHALL вычисляться той же логикой
именования, что и реальная раскладка (`internal/naming`), а не дублировать
правила в шаблоне. Показанные пути MUST совпадать с теми, что создались бы при
применении.
#### Scenario: Превью совпадает с реальной раскладкой
- **WHEN** на экране ревью отображается превью целевых путей для текущей
догадки
- **THEN** эти пути идентичны тем, что создаст применение (те же правила имён,
спецвыпусков, мультифайла, запрещённых символов и коллизий)
### Requirement: Клиентские взаимодействия без сборки
Веб-UI SHALL реализовывать клиентскую логику без шага сборки и без реактивных
фреймворков: копирование infohash (vanilla JS) и раскрытие контекста нативным
`<details>`. Все действия над загрузкой SHALL выполняться через формы/htmx
(раундтрип на сервер), без клиентского пересчёта доменного состояния.
#### Scenario: Копирование infohash
- **WHEN** пользователь нажимает кнопку копирования рядом с infohash
- **THEN** значение infohash копируется в буфер обмена без перезагрузки
страницы
#### Scenario: Раскрытие контекста без JS
- **WHEN** пользователь раскрывает спойлер переданного контекста
- **THEN** контекст показывается нативным `<details>`, без скриптов
web/assets.manifest
+19
View File
@@ -0,0 +1,19 @@
# Манифест фронтенд-ассетов jellybit — источник истины зависимостей фронта.
# Формат строки: <путь под web/static/> <url> <sha256>
# Обновление: правим версию/URL → 'task assets' (качает и сверяет sha256).
# Вендор в репо не коммитим (gitignore); 'task assets' идемпотентно добывает его
# в web/static/vendor/ перед сборкой (нет файла или хеш не сошёлся → качаем).
# Версии: htmx 2.0.4, IBM Plex Sans 5.2.8, IBM Plex Mono 5.2.7.
vendor/htmx.min.js https://unpkg.com/htmx.org@2.0.4/dist/htmx.min.js e209dda5c8235479f3166defc7750e1dbcd5a5c1808b7792fc2e6733768fb447
vendor/fonts/ibm-plex-sans-cyrillic-400.woff2 https://unpkg.com/@fontsource/ibm-plex-sans@5.2.8/files/ibm-plex-sans-cyrillic-400-normal.woff2 69afad88a0740b6e5647f1104c9176a261f1ad9d60202f605456a983799752e9
vendor/fonts/ibm-plex-sans-latin-400.woff2 https://unpkg.com/@fontsource/ibm-plex-sans@5.2.8/files/ibm-plex-sans-latin-400-normal.woff2 3b646991d30055a93a4ecc499713d4347953a74a947ecab435ab72070cbdab0e
vendor/fonts/ibm-plex-sans-cyrillic-500.woff2 https://unpkg.com/@fontsource/ibm-plex-sans@5.2.8/files/ibm-plex-sans-cyrillic-500-normal.woff2 200be3a2a6b1789fb8824a4a74c7cccb7137e83fde6200ea78d8829f99d43546
vendor/fonts/ibm-plex-sans-latin-500.woff2 https://unpkg.com/@fontsource/ibm-plex-sans@5.2.8/files/ibm-plex-sans-latin-500-normal.woff2 0717336fb31fcdcde4b8deb3675bb4a0f7f6d484864afcd6751ac29975962203
vendor/fonts/ibm-plex-sans-cyrillic-600.woff2 https://unpkg.com/@fontsource/ibm-plex-sans@5.2.8/files/ibm-plex-sans-cyrillic-600-normal.woff2 730becc6f005c18c31440f14d34677f2704a85e6afffd4bee6a64d5c95f45a55
vendor/fonts/ibm-plex-sans-latin-600.woff2 https://unpkg.com/@fontsource/ibm-plex-sans@5.2.8/files/ibm-plex-sans-latin-600-normal.woff2 8960851d691c054ed38e259bdcf1a6190d157b4203ed5bb32c632a863fb8ec2f
vendor/fonts/ibm-plex-sans-cyrillic-700.woff2 https://unpkg.com/@fontsource/ibm-plex-sans@5.2.8/files/ibm-plex-sans-cyrillic-700-normal.woff2 40540598b4c9eb2cd2562f1017e71f2697adb43e76f49079030dfd7f00b4b786
vendor/fonts/ibm-plex-sans-latin-700.woff2 https://unpkg.com/@fontsource/ibm-plex-sans@5.2.8/files/ibm-plex-sans-latin-700-normal.woff2 42e7b0c143c19df9d99fd896e76b48f846edf0902d200bc29796b34d12c33aa7
vendor/fonts/ibm-plex-mono-cyrillic-400.woff2 https://unpkg.com/@fontsource/ibm-plex-mono@5.2.7/files/ibm-plex-mono-cyrillic-400-normal.woff2 7635422bd10ddbbcb0e0caa1154b928298f5c8319b8c00b30978d4395f4783ce
vendor/fonts/ibm-plex-mono-latin-400.woff2 https://unpkg.com/@fontsource/ibm-plex-mono@5.2.7/files/ibm-plex-mono-latin-400-normal.woff2 08949f728dc52d528e69b1667d15c89a5686a4ee9a296ff90983985f99c380f7
vendor/fonts/ibm-plex-mono-cyrillic-500.woff2 https://unpkg.com/@fontsource/ibm-plex-mono@5.2.7/files/ibm-plex-mono-cyrillic-500-normal.woff2 1d89462e86cb8e87e7e9d6f6635605bd7c3081baca6caaecee84916bf7b60edc
vendor/fonts/ibm-plex-mono-latin-500.woff2 https://unpkg.com/@fontsource/ibm-plex-mono@5.2.7/files/ibm-plex-mono-latin-500-normal.woff2 01d285447409c8a588692162439a038b8cbd7871309ee20267b0d2d91c6e8e22
web/static/css/jellybit.css
+472
View File
@@ -0,0 +1,472 @@
/* Шрифты IBM Plex — self-hosted (без внешних CDN). Файлы: web/static/fonts/,
добываются 'task assets' по web/assets.manifest. Субсеты cyrillic+latin. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../vendor/fonts/ibm-plex-sans-cyrillic-400.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../vendor/fonts/ibm-plex-sans-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../vendor/fonts/ibm-plex-sans-cyrillic-500.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../vendor/fonts/ibm-plex-sans-latin-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../vendor/fonts/ibm-plex-sans-cyrillic-600.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../vendor/fonts/ibm-plex-sans-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../vendor/fonts/ibm-plex-sans-cyrillic-700.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../vendor/fonts/ibm-plex-sans-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../vendor/fonts/ibm-plex-mono-cyrillic-400.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../vendor/fonts/ibm-plex-mono-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../vendor/fonts/ibm-plex-mono-cyrillic-500.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../vendor/fonts/ibm-plex-mono-latin-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ============================================================
jellybit — единый CSS. Переносится в Go html/template как один файл.
Тема: спокойный сине-голубой акцент, средняя плотность,
IBM Plex Sans + IBM Plex Mono, light/dark по настройке ОС.
============================================================ */
/* ---------- 1. Токены ---------- */
:root{
color-scheme: light dark;
--font: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
--mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
/* поверхности и текст (light) */
--bg:#f4f6f8;
--surface:#ffffff;
--surface-2:#eef1f5;
--surface-3:#e6eaf0;
--border:#e2e6ec;
--border-strong:#d2d8e0;
--text:#1a1f26;
--text-dim:#5d6772;
--text-faint:#8a939e;
/* акцент */
--accent:#2f6fed;
--accent-hover:#235fd8;
--accent-weak:#e7f0fe;
--accent-border:#bcd4fb;
--on-accent:#ffffff;
/* семантика статусов (5 групп) */
--st-prog:#2f6fed; --st-prog-bg:#e7f0fe; /* в работе: качается / скачано */
--st-recog:#7c5cdb; --st-recog-bg:#efeafc; /* распознаётся */
--st-link:#0d9488; --st-link-bg:#dcf5f1; /* раскладка */
--st-wait:#c98a04; --st-wait-bg:#fdf3d7; /* ждёт человека: ревью / отложено */
--st-ok:#1f9d57; --st-ok-bg:#dcf4e6; /* успех: готово */
--st-warn:#d97315; --st-warn-bg:#fdeede; /* проблема: застряло / нет цели */
--st-err:#d8443c; --st-err-bg:#fce4e2; /* ошибка: failed / потеряно */
--st-mute:#6b7280; --st-mute-bg:#eceef1; /* терминальное: отменено/откат/удалено */
/* радиусы и тени */
--r-sm:6px; --r-md:9px; --r-lg:14px; --r-pill:999px;
--shadow-sm:0 1px 2px rgba(20,30,50,.06);
--shadow-md:0 3px 12px rgba(20,30,50,.10);
--shadow-lg:0 8px 28px rgba(20,30,50,.16);
/* шкала отступов */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
/* типографика */
--fs-xs:12px; --fs-sm:13px; --fs-base:15px; --fs-md:16px; --fs-lg:20px; --fs-xl:24px;
}
@media (prefers-color-scheme: dark){
:root{
--bg:#121519;
--surface:#1a1e24;
--surface-2:#22272e;
--surface-3:#2a3038;
--border:#2b323a;
--border-strong:#3a424c;
--text:#e6e9ed;
--text-dim:#9aa4b0;
--text-faint:#6b7682;
--accent:#5b8def;
--accent-hover:#6f9cf3;
--accent-weak:#1a2a45;
--accent-border:#33507f;
--on-accent:#0e1420;
--st-prog:#6fa0f4; --st-prog-bg:#172843;
--st-recog:#a791ea; --st-recog-bg:#251f3c;
--st-link:#36c2b0; --st-link-bg:#0f2e2b;
--st-wait:#e0b13c; --st-wait-bg:#352a10;
--st-ok:#46c47e; --st-ok-bg:#13311f;
--st-warn:#ec9a4e; --st-warn-bg:#352213;
--st-err:#ef6a62; --st-err-bg:#37201e;
--st-mute:#8b95a1; --st-mute-bg:#262b31;
--shadow-sm:0 1px 2px rgba(0,0,0,.3);
--shadow-md:0 3px 12px rgba(0,0,0,.4);
--shadow-lg:0 8px 28px rgba(0,0,0,.5);
}
}
/* ---------- 2. База ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;background:var(--bg);color:var(--text);
font-family:var(--font);font-size:var(--fs-base);line-height:1.5;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:var(--mono)}
.muted{color:var(--text-dim)}
.faint{color:var(--text-faint)}
.nowrap{white-space:nowrap}
/* ---------- 3. Layout + шапка ---------- */
.app-header{
position:sticky;top:0;z-index:20;
background:color-mix(in srgb,var(--surface) 88%,transparent);
backdrop-filter:saturate(1.4) blur(10px);
border-bottom:1px solid var(--border);
}
.app-header .bar{
max-width:980px;margin:0 auto;padding:0 var(--sp-4);
display:flex;align-items:center;gap:var(--sp-4);height:56px;
}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:var(--fs-md);
letter-spacing:-.01em;color:var(--text)}
.brand:hover{text-decoration:none}
.brand .logo{width:22px;height:22px;border-radius:6px;background:var(--accent);
display:grid;place-items:center;color:var(--on-accent);font-size:13px;flex:none}
.nav{display:flex;gap:2px;margin-left:var(--sp-2)}
.nav a{padding:6px 11px;border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:500;
color:var(--text-dim)}
.nav a:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.nav a.active{background:var(--accent-weak);color:var(--accent)}
.header-spacer{flex:1}
.dep-badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:500;
padding:4px 10px;border-radius:var(--r-pill);background:var(--st-err-bg);color:var(--st-err);
border:1px solid color-mix(in srgb,var(--st-err) 30%,transparent)}
.dep-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.dep-badge.ok{background:var(--st-ok-bg);color:var(--st-ok);
border-color:color-mix(in srgb,var(--st-ok) 30%,transparent)}
.main{max-width:980px;margin:0 auto;padding:var(--sp-5) var(--sp-4) var(--sp-7)}
.page-title{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.02em;margin:0 0 var(--sp-1)}
.page-sub{color:var(--text-dim);margin:0 0 var(--sp-5)}
/* ---------- 4. Кнопки ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:6px;
font:inherit;font-weight:600;font-size:var(--fs-sm);line-height:1;
padding:9px 15px;border-radius:var(--r-md);
border:1px solid var(--border-strong);background:var(--surface);color:var(--text);
cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s,opacity .12s;
}
.btn:hover{background:var(--surface-2)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-weak);border-color:var(--accent)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-dim)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text)}
.btn-danger{color:var(--st-err);border-color:color-mix(in srgb,var(--st-err) 35%,transparent)}
.btn-danger:hover{background:var(--st-err-bg)}
.btn-sm{padding:6px 11px;font-size:var(--fs-xs);font-weight:500}
.btn-lg{padding:11px 20px;font-size:var(--fs-base)}
.btn-block{width:100%}
/* ---------- 5. Поля ввода ---------- */
.input,.textarea,.select{
font:inherit;width:100%;color:var(--text);background:var(--surface);
border:1px solid var(--border-strong);border-radius:var(--r-md);
padding:9px 12px;transition:border-color .12s,box-shadow .12s;
}
.textarea{resize:vertical;min-height:64px;line-height:1.5}
.input::placeholder,.textarea::placeholder{color:var(--text-faint)}
.input:focus,.textarea:focus,.select:focus{
outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak);
}
.input.mono,.field-mono{font-family:var(--mono);font-size:var(--fs-sm)}
.label{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--text-dim);
margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em}
.field{margin-bottom:var(--sp-3)}
/* единое окно добавления */
.add-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
padding:var(--sp-4);box-shadow:var(--shadow-sm);margin-bottom:var(--sp-5)}
.add-row{display:flex;gap:var(--sp-2)}
.add-row .input{flex:1}
.add-hint{margin:9px 2px 0;font-size:var(--fs-xs);color:var(--text-faint)}
/* ---------- 6. Карточка загрузки ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow-sm)}
.card + .card{margin-top:var(--sp-3)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3)}
.card-title{font-weight:600;font-size:var(--fs-md);line-height:1.3;letter-spacing:-.005em;
word-break:break-word}
.hash-row{display:flex;align-items:center;gap:8px;margin-top:7px;color:var(--text-dim);
font-size:var(--fs-sm);flex-wrap:wrap}
.hash{font-family:var(--mono);font-size:var(--fs-sm)}
.copy-btn{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);
background:var(--surface-2);border-radius:var(--r-sm);cursor:pointer;font:inherit;
font-size:var(--fs-xs);padding:2px 8px;color:var(--text-dim);transition:background .12s}
.copy-btn:hover{background:var(--surface-3);color:var(--text)}
.copy-btn.copied{color:var(--st-ok);border-color:color-mix(in srgb,var(--st-ok) 35%,transparent)}
.card-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);
margin-top:var(--sp-4);flex-wrap:wrap}
.card-meta{font-size:var(--fs-sm);color:var(--text-faint)}
.card-acts{display:flex;gap:var(--sp-2);flex-wrap:wrap}
/* прогресс */
.progress{height:5px;background:var(--surface-2);border-radius:3px;overflow:hidden;margin-top:10px}
.progress i{display:block;height:100%;background:var(--st-prog);border-radius:3px;transition:width .3s}
/* ---------- 7. Спойлер ---------- */
details.spoiler{margin-top:var(--sp-3)}
.spoiler summary{cursor:pointer;color:var(--accent);font-size:var(--fs-sm);
list-style:none;display:inline-flex;align-items:center;gap:5px;user-select:none}
.spoiler summary::-webkit-details-marker{display:none}
.spoiler summary::before{content:"▸";font-size:10px;transition:transform .12s}
.spoiler[open] summary::before{transform:rotate(90deg)}
.spoiler .spoiler-body{margin-top:9px;padding:11px 13px;background:var(--surface-2);
border:1px solid var(--border);border-radius:var(--r-sm);font-size:var(--fs-sm);
color:var(--text-dim);line-height:1.55}
/* ---------- 8. Бейдж состояния ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:500;
padding:3px 10px 3px 9px;border-radius:var(--r-pill);border:1px solid transparent;
white-space:nowrap;line-height:1.5}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--_c);flex:none}
.badge{color:var(--text);background:var(--_bg);border-color:color-mix(in srgb,var(--_c) 30%,transparent)}
.st-downloading,.st-completed{--_c:var(--st-prog);--_bg:var(--st-prog-bg)}
.st-recognizing{--_c:var(--st-recog);--_bg:var(--st-recog-bg)}
.st-linking{--_c:var(--st-link);--_bg:var(--st-link-bg)}
.st-review,.st-deferred{--_c:var(--st-wait);--_bg:var(--st-wait-bg)}
.st-done{--_c:var(--st-ok);--_bg:var(--st-ok-bg)}
.st-stuck,.st-target_missing{--_c:var(--st-warn);--_bg:var(--st-warn-bg)}
.st-failed,.st-orphaned{--_c:var(--st-err);--_bg:var(--st-err-bg)}
.st-cancelled,.st-reverted,.st-deleted{--_c:var(--st-mute);--_bg:var(--st-mute-bg)}
/* ---------- 9. Панель фильтров ---------- */
.toolbar{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-4);flex-wrap:wrap}
.search{position:relative;flex:1;min-width:180px}
.search .input{padding-left:34px}
.search .ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);
color:var(--text-faint);font-size:14px;pointer-events:none}
.filter-chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font:inherit;font-size:var(--fs-xs);font-weight:500;padding:6px 11px;border-radius:var(--r-pill);
border:1px solid var(--border-strong);background:var(--surface);color:var(--text-dim);
cursor:pointer;transition:all .12s}
.chip:hover{background:var(--surface-2);color:var(--text)}
.chip.active{background:var(--accent-weak);color:var(--accent);border-color:var(--accent-border)}
.chip .n{opacity:.7;margin-left:3px}
.toggle-line{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--text-dim);
margin-bottom:var(--sp-4)}
.toggle-line label{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
/* пагинация */
.pager{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
margin-top:var(--sp-5);font-size:var(--fs-sm);color:var(--text-dim)}
.pager .btn{min-width:36px}
/* ---------- 10. Секция ревью ---------- */
.section{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
padding:var(--sp-5);margin-bottom:var(--sp-4);box-shadow:var(--shadow-sm)}
.section-head{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.section-head h2{font-size:var(--fs-md);font-weight:600;margin:0;letter-spacing:-.005em}
.section-head .hint{font-size:var(--fs-xs);color:var(--text-faint);font-weight:400}
/* шапка ревью */
.review-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-4);
flex-wrap:wrap;margin-bottom:var(--sp-2)}
.review-title{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.01em;
font-family:var(--mono);word-break:break-word}
.reason-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-sm);
color:var(--text-dim);margin-top:var(--sp-1)}
.reason-tag{background:var(--st-wait-bg);color:var(--st-wait);padding:2px 9px;border-radius:var(--r-pill);
font-size:var(--fs-xs);font-weight:500;border:1px solid color-mix(in srgb,var(--st-wait) 30%,transparent)}
.conf{display:inline-flex;align-items:center;gap:7px}
.conf-bar{width:84px;height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.conf-bar i{display:block;height:100%;border-radius:3px;background:var(--st-wait)}
/* тип: фильм/сериал — сегменты */
.segment{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--r-md);
overflow:hidden;background:var(--surface)}
.segment label{padding:7px 16px;font-size:var(--fs-sm);font-weight:500;cursor:pointer;
color:var(--text-dim);border-right:1px solid var(--border)}
.segment label:last-child{border-right:none}
.segment input{position:absolute;opacity:0;pointer-events:none}
.segment input:checked + label,.segment label.on{background:var(--accent);color:var(--on-accent)}
/* сетка полей догадки */
.guess-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--sp-3)}
/* ---------- 11. Кандидаты метабаз ---------- */
.cand-list{display:flex;flex-direction:column;gap:var(--sp-2)}
.cand{display:flex;align-items:center;gap:var(--sp-3);padding:11px var(--sp-4);
border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface);
cursor:pointer;transition:border-color .12s,background .12s}
.cand:hover{background:var(--surface-2)}
.cand.selected{border-color:var(--accent);background:var(--accent-weak);
box-shadow:0 0 0 1px var(--accent) inset}
.cand .radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--border-strong);
flex:none;display:grid;place-items:center;transition:border-color .12s}
.cand.selected .radio{border-color:var(--accent)}
.cand.selected .radio::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent)}
.cand .body{flex:1;min-width:0}
.cand .name{font-weight:600;font-size:var(--fs-sm);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cand .sub{font-size:var(--fs-xs);color:var(--text-faint);margin-top:2px;font-family:var(--mono)}
.prov{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
padding:2px 7px;border-radius:var(--r-sm);background:var(--surface-3);color:var(--text-dim)}
.prov.tmdb{background:#0d253f;color:#5cc8a8}
.prov.tvdb{background:#1a4029;color:#7fd99f}
.prov.nn{background:var(--st-recog-bg);color:var(--st-recog)}
.cand.nn-cand{border-style:dashed}
.cand.nn-cand.selected{border-style:solid}
.ext-link{font-size:var(--fs-xs);color:var(--accent);white-space:nowrap}
/* ручной ввод / без базы */
.cand-extra{display:flex;gap:var(--sp-2);margin-top:var(--sp-3);flex-wrap:wrap;align-items:center}
.cand-extra .input{flex:1;min-width:120px}
/* ---------- 12. Таблицы ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-md)}
table.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:560px}
table.tbl th{text-align:left;font-weight:600;font-size:var(--fs-xs);text-transform:uppercase;
letter-spacing:.04em;color:var(--text-dim);padding:9px var(--sp-3);
border-bottom:1px solid var(--border);background:var(--surface-2);white-space:nowrap}
table.tbl td{padding:8px var(--sp-3);border-bottom:1px solid var(--border);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tr.ignored td{opacity:.45}
table.tbl tr.invalid{background:var(--st-err-bg)}
table.tbl .fname{font-family:var(--mono);font-size:var(--fs-xs);word-break:break-all}
table.tbl .link-to{display:flex;align-items:baseline;gap:6px;margin-top:5px;
font-family:var(--mono);font-size:var(--fs-xs);flex-wrap:wrap}
table.tbl .link-to .arr{color:var(--text-faint);flex:none}
table.tbl .link-to .dir{color:var(--text-faint)}
table.tbl .link-to .src{color:var(--st-ok)}
table.tbl .link-to .no-link{color:var(--text-faint);font-style:italic;font-family:var(--font)}
table.tbl .se-edit{display:inline-flex;align-items:center;gap:4px;margin-right:6px;
font-family:var(--font);color:var(--text-faint);font-size:var(--fs-xs)}
table.tbl .se-edit .se-input{width:42px}
table.tbl .size{font-family:var(--mono);color:var(--text-dim);white-space:nowrap;text-align:right}
.cell-num{width:30px;color:var(--text-faint);font-family:var(--mono);text-align:right}
.se-input{width:46px;font-family:var(--mono);text-align:center;padding:5px 6px;
border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface);
color:var(--text);font-size:var(--fs-sm)}
.se-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-weak)}
.role-select{font:inherit;font-size:var(--fs-xs);padding:4px 6px;border-radius:var(--r-sm);
border:1px solid var(--border-strong);background:var(--surface);color:var(--text)}
.tbl-actions{display:flex;gap:var(--sp-2);margin-top:var(--sp-3);flex-wrap:wrap;align-items:center}
.validation{font-size:var(--fs-xs);margin-top:var(--sp-2);display:flex;gap:var(--sp-3);flex-wrap:wrap}
.validation .ok{color:var(--st-ok)}
.validation .bad{color:var(--st-err)}
/* ---------- 13. Превью раскладки ---------- */
.preview-list{font-family:var(--mono);font-size:var(--fs-sm);line-height:1.9;
background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);
padding:var(--sp-3) var(--sp-4);overflow-x:auto}
.preview-list .pth{color:var(--text)}
.preview-list .pth .dir{color:var(--text-faint)}
.preview-list .pth .src{color:var(--st-ok)}
.preview-list .ref{color:var(--text-faint)}
.preview-empty{color:var(--text-faint);font-style:italic;font-family:var(--font)}
/* ---------- 14. Уточнение ---------- */
.hint-list{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.hint-item{display:flex;gap:9px;align-items:flex-start;font-size:var(--fs-sm);
padding:9px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm)}
.hint-item .idx{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-faint);flex:none}
.hint-item .txt{flex:1}
.hint-item time{font-size:var(--fs-xs);color:var(--text-faint);white-space:nowrap}
.refine-row{display:flex;gap:var(--sp-2);margin-top:var(--sp-3);flex-wrap:wrap}
/* ---------- 15. Нижняя панель действий ---------- */
.action-bar{position:sticky;bottom:0;z-index:10;margin-top:var(--sp-5);
background:color-mix(in srgb,var(--surface) 92%,transparent);
backdrop-filter:saturate(1.4) blur(10px);
border:1px solid var(--border);border-radius:var(--r-lg);
padding:var(--sp-3) var(--sp-4);box-shadow:var(--shadow-md);
display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.action-bar .grow{flex:1;font-size:var(--fs-sm);color:var(--text-dim);min-width:140px}
.action-bar .btn-lg{padding:11px 22px}
/* плашка результата после применения */
.result-banner{background:var(--st-ok-bg);border:1px solid color-mix(in srgb,var(--st-ok) 35%,transparent);
border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-4)}
.result-banner h2{margin:0 0 var(--sp-2);font-size:var(--fs-md);color:var(--st-ok);
display:flex;align-items:center;gap:8px}
.result-banner ul{margin:0;padding-left:18px;font-family:var(--mono);font-size:var(--fs-sm);
color:var(--text);line-height:1.9}
/* ---------- 16. Прочее ---------- */
.empty-state{text-align:center;padding:var(--sp-7) var(--sp-4);color:var(--text-faint)}
.empty-state .big{font-size:32px;margin-bottom:var(--sp-3)}
.divider{height:1px;background:var(--border);margin:var(--sp-4) 0;border:none}
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);
color:var(--text-dim);margin-bottom:var(--sp-3)}
.back-link:hover{color:var(--accent)}
/* ---------- 17. Страница загрузки ---------- */
.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--sp-4);align-items:start}
/* распознано как — карточка с постером */
.meta-card{display:flex;gap:var(--sp-4);align-items:flex-start}
.poster{flex:none;width:104px;height:156px;border-radius:var(--r-md);overflow:hidden;
border:1px solid var(--border);
background-image:repeating-linear-gradient(135deg,var(--surface-2) 0 9px,var(--surface-3) 9px 18px);
display:grid;place-items:center}
.poster span{font-family:var(--mono);font-size:10px;color:var(--text-faint);
background:var(--surface);padding:2px 6px;border-radius:4px}
.meta-body{flex:1;min-width:0}
.meta-body .h{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.01em;margin:0 0 2px;line-height:1.2}
.meta-body .o{font-family:var(--mono);font-size:var(--fs-sm);color:var(--text-faint);margin:0 0 var(--sp-3)}
/* key-value список */
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px var(--sp-4);font-size:var(--fs-sm);margin:0}
.kv dt{color:var(--text-faint);white-space:nowrap}
.kv dd{margin:0;color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
.kv dd.mono{font-family:var(--mono)}
/* плитки статов */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--sp-3)}
.stat{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);
padding:var(--sp-3) var(--sp-4)}
.stat .v{font-size:var(--fs-lg);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat .v.mono{font-family:var(--mono);font-size:var(--fs-md)}
.stat .k{font-size:var(--fs-xs);color:var(--text-faint);margin-top:2px}
.stat .v.good{color:var(--st-ok)}
/* таймлайн истории состояний */
.timeline{position:relative;margin:0;padding:0;list-style:none}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:8px;width:2px;background:var(--border)}
.tl-item{position:relative;padding:0 0 var(--sp-4) var(--sp-5);font-size:var(--fs-sm)}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:0;top:4px;width:14px;height:14px;border-radius:50%;
background:var(--surface);border:2px solid var(--border-strong)}
.tl-item.is-done::before{background:var(--st-ok);border-color:var(--st-ok)}
.tl-item.is-now::before{background:var(--accent);border-color:var(--accent);
box-shadow:0 0 0 4px var(--accent-weak)}
.tl-item .tl-t{font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tl-item time{color:var(--text-faint);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.tl-item .tl-note{color:var(--text-dim);margin-top:2px}
/* ---------- 18. Адаптив ---------- */
@media (max-width:640px){
.main{padding:var(--sp-4) var(--sp-3) var(--sp-6)}
.page-title{font-size:var(--fs-lg)}
.add-row{flex-direction:column}
.add-row .btn{width:100%}
.card{padding:var(--sp-4)}
.card-top{flex-direction:column}
.review-head{flex-direction:column}
.section{padding:var(--sp-4)}
.action-bar{flex-direction:column;align-items:stretch}
.action-bar .btn{width:100%}
.action-bar .grow{text-align:center;order:-1}
.nav a{padding:6px 9px}
.toolbar{flex-direction:column;align-items:stretch}
.detail-grid{grid-template-columns:1fr}
.meta-card{flex-direction:column}
.poster{width:88px;height:132px}
}
/* доступность фокуса */
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.copy-btn:focus-visible,.chip:focus-visible{outline-offset:2px}
web/static/js/app.js
+75
View File
@@ -0,0 +1,75 @@
// Клиентская мелочь без сборки и фреймворков.
// htmx тянет серверные фрагменты, здесь — только то, что серверу знать не нужно.
// Копирование infohash в буфер обмена. На целевом деплое (домашний LAN по HTTP)
// navigator.clipboard недоступен — secure context только на HTTPS/localhost,
// поэтому есть fallback на execCommand, а индикация честная: «✓» лишь при успехе.
function copyHash(btn, full) {
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(full).then(
() => flashCopy(btn, true),
() => flashCopy(btn, legacyCopy(full)),
);
} else {
flashCopy(btn, legacyCopy(full));
}
}
function legacyCopy(text) {
try {
const ta = document.createElement('textarea');
ta.value = text;
ta.style.position = 'fixed';
ta.style.opacity = '0';
document.body.appendChild(ta);
ta.focus();
ta.select();
const ok = document.execCommand('copy');
document.body.removeChild(ta);
return ok;
} catch (e) {
return false;
}
}
function flashCopy(btn, ok) {
const old = btn.dataset.label || btn.textContent;
btn.dataset.label = old;
btn.textContent = ok ? '✓ скопировано' : '✗ не вышло';
btn.classList.toggle('copied', ok);
setTimeout(() => { btn.textContent = old; btn.classList.remove('copied'); }, 1400);
}
// --- Фильтр/поиск по списку загрузок (по уже отрисованным карточкам) ---
let activeFilter = 'all';
function setFilter(el) {
document.querySelectorAll('#chips .chip').forEach((c) => c.classList.remove('active'));
el.classList.add('active');
activeFilter = el.dataset.f;
applyFilters();
}
function applyFilters() {
const searchEl = document.querySelector('#list-toolbar input[type=search]');
const q = (searchEl ? searchEl.value : '').toLowerCase().trim();
const showAllEl = document.getElementById('showAll');
const showAll = showAllEl ? showAllEl.checked : false;
let visible = 0;
document.querySelectorAll('#list .card').forEach((card) => {
const grp = card.dataset.group;
const isDeleted = card.dataset.deleted === '1';
let ok = true;
if (isDeleted && !showAll) ok = false;
if (ok && activeFilter !== 'all' && grp !== activeFilter) ok = false;
if (ok && q && !(card.dataset.text || '').includes(q)) ok = false;
card.style.display = ok ? '' : 'none';
if (ok) visible += 1;
});
const empty = document.getElementById('empty');
if (empty) empty.style.display = visible ? 'none' : '';
}
// Применить начальный фильтр (скрыть удалённые) после загрузки.
document.addEventListener('DOMContentLoaded', applyFilters);
web/templates/download.html
+90
View File
@@ -0,0 +1,90 @@
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jellybit — загрузка #{{.ID}}</title>
<link rel="stylesheet" href="{{asset "css/jellybit.css"}}">
<script src="{{asset "vendor/htmx.min.js"}}" defer></script>
<script src="{{asset "js/app.js"}}" defer></script>
</head>
<body>
{{template "header" ""}}
<main class="main">
<a class="back-link" href="/">← ко всем загрузкам</a>
{{if .Error}}<div class="result-banner" style="background:var(--st-err-bg);border-color:color-mix(in srgb,var(--st-err) 35%,transparent)"><h2 style="color:var(--st-err)">{{.Error}}</h2></div>{{end}}
<!-- Шапка -->
<div class="review-head" style="margin-bottom:var(--sp-4)">
<div>
<div class="review-title" style="font-size:var(--fs-xl)">{{.Title}}</div>
<div class="hash-row" style="margin-top:9px">
{{template "status_badge" .State}}
{{if .Infohash}}<span class="hash">{{.InfohashShort}}</span>
<button class="copy-btn" type="button" onclick="copyHash(this,'{{.Infohash}}')">⧉ копировать</button>{{end}}
</div>
{{if .Note}}<p class="muted" style="margin:var(--sp-2) 0 0">{{.Note}}</p>{{end}}
</div>
<div class="card-acts" style="align-items:center">
{{if .Reviewable}}<a class="btn btn-primary" href="/review/{{.ID}}">Ревью →</a>{{end}}
{{if .Undoable}}<form method="post" action="/ui/downloads/{{.ID}}/undo"><button class="btn btn-danger" type="submit">↩ Откатить</button></form>{{end}}
{{if .Relinkable}}<form method="post" action="/ui/downloads/{{.ID}}/relink"><button class="btn" type="submit">Привязать заново</button></form>{{end}}
{{if .Retriable}}<form method="post" action="/ui/downloads/{{.ID}}/retry"><button class="btn" type="submit">Повторить</button></form>{{end}}
{{if not .Terminal}}<form method="post" action="/ui/downloads/{{.ID}}/cancel"><button class="btn btn-ghost" type="submit">Отменить</button></form>{{end}}
</div>
</div>
<!-- Распознано как -->
<div class="section">
<div class="section-head"><h2>Распознано как</h2></div>
{{if .HasPlan}}
<div class="meta-card">
<div class="meta-body">
<p class="h">{{.RecTitle}}</p>
{{if .OriginalTitle}}<p class="o">{{.OriginalTitle}}</p>{{end}}
<dl class="kv" style="max-width:360px">
<dt>Тип</dt><dd>{{if .IsSeries}}сериал{{else if eq .MediaType "movie"}}фильм{{else}}{{.MediaType}}{{end}}</dd>
{{if .Year}}<dt>Год</dt><dd>{{.Year}}</dd>{{end}}
<dt>База</dt><dd>{{if .Provider}}{{.Provider}} · <span class="mono">{{.ProviderID}}</span>{{else if .NoBase}}без базы{{else}}—{{end}}</dd>
{{if .Confidence}}<dt>Уверенность</dt><dd class="mono">{{.Confidence}}</dd>{{end}}
</dl>
</div>
</div>
{{else}}
<p class="muted" style="margin:0">Ещё не распознано.</p>
{{end}}
</div>
<!-- Файлы и раскладка -->
{{if .HasPlan}}
<div class="section">
<div class="section-head"><h2>Файлы и раскладка</h2><span class="hint">файл источника → целевой хардлинк</span></div>
{{template "layout_widget" .Files}}
<p class="faint" style="font-size:var(--fs-xs);margin:var(--sp-3) 0 0">
Целевые файлы связаны хардлинками — место не дублируется, исходник остаётся на раздаче.
</p>
</div>
{{end}}
<!-- История -->
<div class="section">
<div class="section-head"><h2>История</h2></div>
<ul class="timeline">
{{if .CreatedAt}}<li class="tl-item is-done"><div class="tl-t">Добавлено</div><time>{{.CreatedAt}}</time></li>{{end}}
<li class="tl-item is-now"><div class="tl-t">{{badgeLabel .State}} <span class="badge st-{{.State}}">текущее</span></div>{{if .UpdatedAt}}<time>{{.UpdatedAt}}</time>{{end}}</li>
</ul>
</div>
<!-- Контекст -->
{{if .Context}}
<div class="section" style="margin-bottom:0">
<div class="section-head"><h2>Контекст</h2><span class="hint">сообщение при добавлении</span></div>
<p style="margin:0;color:var(--text-dim)">«{{.Context}}»</p>
</div>
{{end}}
</main>
</body>
</html>
web/templates/index.html
+86 -84
View File
@@ -3,98 +3,100 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="5">
<title>jellybit</title>
<style>
:root { color-scheme: light dark; }
body { font-family: system-ui, sans-serif; max-width: 60rem; margin: 2rem auto; padding: 0 1rem; }
h1 { margin-bottom: .25rem; }
form.add { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; }
form.add input[name=source] { flex: 1 1 24rem; }
input, button { padding: .4rem .6rem; font-size: 1rem; }
table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
th, td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid #8884; vertical-align: top; }
td.src { font-family: monospace; font-size: .85rem; word-break: break-all; }
.err { color: #c0392b; }
.state { font-size: .8rem; padding: .1rem .5rem; border-radius: 1rem; background: #8883; white-space: nowrap; }
.state-completed { background: #2ecc7155; }
.state-downloading { background: #3498db55; }
.state-recognizing { background: #9b59b655; }
.state-review { background: #f1c40f88; }
.state-deferred { background: #f39c1255; }
.state-linking { background: #1abc9c55; }
.state-done { background: #2ecc7188; }
.state-stuck { background: #f39c1255; }
.state-failed { background: #e74c3c55; }
.state-cancelled { background: #95a5a655; }
.state-reverted { background: #95a5a655; }
.state-target_missing { background: #e67e2255; }
.state-orphaned { background: #e74c3c88; }
.state-deleted { background: #95a5a655; }
.actions { display: flex; gap: .4rem; flex-wrap: wrap; }
a.button { display: inline-block; padding: .35rem .6rem; border: 1px solid #8886; border-radius: .3rem; text-decoration: none; }
small { color: #8888; }
</style>
<title>jellybit — загрузки</title>
<link rel="stylesheet" href="{{asset "css/jellybit.css"}}">
<script src="{{asset "vendor/htmx.min.js"}}" defer></script>
<script src="{{asset "js/app.js"}}" defer></script>
</head>
<body>
<h1>jellybit</h1>
<p><small>обновляется каждые 5 с</small></p>
<form class="add" method="post" action="/ui/downloads">
<input type="text" name="source" placeholder="magnet:?xt=urn:btih:…" required>
<input type="text" name="context" placeholder="контекст (опц.)">
<button type="submit">Добавить</button>
{{template "header" "downloads"}}
<main class="main">
<h1 class="page-title">Загрузки</h1>
<p class="page-sub">Кинь magnet, ссылку, .torrent или сообщение бота — остальное jellybit сделает сам.</p>
{{if .Error}}<div class="result-banner" style="background:var(--st-err-bg);border-color:color-mix(in srgb,var(--st-err) 35%,transparent)"><h2 style="color:var(--st-err)">{{.Error}}</h2></div>{{end}}
<!-- Единое окно добавления -->
<form class="add-box" method="post" action="/ui/downloads">
<div class="add-row">
<input class="input" type="text" name="source" autocomplete="off" required
placeholder="magnet:?xt=urn:btih:… · ссылка · .torrent · или вставь текст бота">
<button class="btn btn-primary btn-lg" type="submit">Добавить</button>
</div>
<p class="add-hint">Можно вставить целиком сообщение трекер-бота — magnet и контекст разберутся автоматически.</p>
</form>
{{if .Error}}<p class="err">{{.Error}}</p>{{end}}
{{if .Downloads}}
<!-- Панель фильтров -->
<div class="toolbar" id="list-toolbar">
<div class="search">
<span class="ico">⌕</span>
<input class="input" type="search" placeholder="Поиск по названию или infohash…" oninput="applyFilters()">
</div>
<div class="filter-chips" id="chips">
<button class="chip active" type="button" data-f="all" onclick="setFilter(this)">Все</button>
<button class="chip" type="button" data-f="review" onclick="setFilter(this)">Ждут меня</button>
<button class="chip" type="button" data-f="active" onclick="setFilter(this)">В работе</button>
<button class="chip" type="button" data-f="done" onclick="setFilter(this)">Готово</button>
<button class="chip" type="button" data-f="problem" onclick="setFilter(this)">Проблемы</button>
</div>
</div>
<table>
<thead>
<tr><th>#</th><th>Источник</th><th>Контекст</th><th>Состояние</th><th></th></tr>
</thead>
<tbody>
<div class="toggle-line">
<label><input type="checkbox" id="showAll" onchange="applyFilters()"> Показать всё, включая удалённые</label>
</div>
<!-- Список карточек -->
<div id="list">
{{range .Downloads}}
<tr>
<td>{{.ID}}</td>
<td class="src" title="{{.Infohash}}">{{.Source}}</td>
<td>{{.Context}}</td>
<td>
<span class="state state-{{.State}}">{{.State}}</span>
{{if .Note}}<br><small>{{.Note}}</small>{{end}}
{{if .Error}}<br><small>{{.Error}}</small>{{end}}
</td>
<td>
<div class="actions">
{{if .Reviewable}}
<a class="button" href="/review/{{.ID}}">Ревью →</a>
{{end}}
{{if .Undoable}}
<form method="post" action="/ui/downloads/{{.ID}}/undo">
<button type="submit">Откатить</button>
</form>
{{end}}
{{if .Relinkable}}
<form method="post" action="/ui/downloads/{{.ID}}/relink">
<button type="submit">Привязать заново</button>
</form>
{{end}}
{{if .Retriable}}
<form method="post" action="/ui/downloads/{{.ID}}/retry">
<button type="submit">Повторить</button>
</form>
{{end}}
{{if not .Terminal}}
<form method="post" action="/ui/downloads/{{.ID}}/cancel">
<button type="submit">Отклонить</button>
</form>
{{end}}
<article class="card" data-group="{{.Group}}" data-text="{{.SearchText}}"{{if .Deleted}} data-deleted="1"{{end}}>
<div class="card-top">
<div>
<div class="card-title"><a href="/download/{{.ID}}" style="color:inherit">{{.Title}}</a></div>
{{if .Infohash}}
<div class="hash-row">
<span class="hash">{{.InfohashShort}}</span>
<button class="copy-btn" type="button" onclick="copyHash(this,'{{.Infohash}}')">⧉ копировать</button>
</div>
</td>
</tr>
{{else}}
<tr><td colspan="5"><small>пока пусто</small></td></tr>
{{end}}
</div>
{{template "status_badge" .State}}
</div>
{{if .Context}}
<details class="spoiler">
<summary>контекст</summary>
<div class="spoiler-body">«{{.Context}}»</div>
</details>
{{end}}
<div class="card-foot">
<span class="card-meta">{{if .Note}}{{.Note}}{{else if .Error}}{{.Error}}{{end}}</span>
<div class="card-acts">
{{if .Reviewable}}<a class="btn btn-primary btn-sm" href="/review/{{.ID}}">Ревью →</a>{{end}}
{{if .Undoable}}<form method="post" action="/ui/downloads/{{.ID}}/undo"><button class="btn btn-sm btn-ghost" type="submit">Откатить</button></form>{{end}}
{{if .Relinkable}}<form method="post" action="/ui/downloads/{{.ID}}/relink"><button class="btn btn-sm" type="submit">Привязать заново</button></form>{{end}}
{{if .Retriable}}<form method="post" action="/ui/downloads/{{.ID}}/retry"><button class="btn btn-sm" type="submit">Повторить</button></form>{{end}}
{{if not .Terminal}}<form method="post" action="/ui/downloads/{{.ID}}/cancel"><button class="btn btn-sm btn-danger" type="submit">{{if .Reviewable}}Отклонить{{else}}Отменить{{end}}</button></form>{{end}}
</div>
</div>
</article>
{{end}}
</tbody>
</table>
</div>
<div class="empty-state" id="empty" style="display:none">
<div class="big">🍿</div>
Ничего не найдено. Поменяй фильтр или запрос.
</div>
{{else}}
<div class="empty-state">
<div class="big">🍿</div>
Пока пусто. Добавь первую загрузку выше.
</div>
{{end}}
</main>
</body>
</html>
web/templates/partials/header.html
+11
View File
@@ -0,0 +1,11 @@
{{define "header"}}
<header class="app-header">
<div class="bar">
<a class="brand" href="/"><span class="logo">jb</span>jellybit</a>
<nav class="nav">
<a href="/"{{if eq . "downloads"}} class="active"{{end}}>Загрузки</a>
</nav>
<span class="header-spacer"></span>
</div>
</header>
{{end}}
web/templates/partials/layout_widget.html
+22
View File
@@ -0,0 +1,22 @@
{{define "layout_widget"}}
<div class="table-wrap">
<table class="tbl">
<thead><tr><th class="cell-num">#</th><th>файл источника → раскладка</th><th>роль</th></tr></thead>
<tbody>
{{range $i, $f := .}}
<tr class="{{if $f.Ignored}}ignored{{end}}">
<td class="cell-num">{{add $i 1}}</td>
<td>
<div class="fname">{{$f.Src}}</div>
<div class="link-to">
<span class="arr">→</span>
{{if $f.Linked}}<span class="src">{{$f.Dst}}</span>{{else}}<span class="no-link">не разложен</span>{{end}}
</div>
</td>
<td><span class="badge {{if $f.Ignored}}st-cancelled{{else}}st-done{{end}}">{{$f.RoleLabel}}</span></td>
</tr>
{{end}}
</tbody>
</table>
</div>
{{end}}
web/templates/partials/status_badge.html
+1
View File
@@ -0,0 +1 @@
{{define "status_badge"}}<span class="badge st-{{.}}">{{badgeLabel .}}</span>{{end}}
web/templates/review.html
+125 -143
View File
@@ -3,169 +3,151 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jellybit · ревью #{{.ID}}</title>
<style>
:root { color-scheme: light dark; }
body { font-family: system-ui, sans-serif; max-width: 70rem; margin: 2rem auto; padding: 0 1rem; }
h1 { margin-bottom: .25rem; }
a { color: inherit; }
input, button, select, textarea { padding: .4rem .6rem; font-size: 1rem; font-family: inherit; }
table { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; }
th, td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid #8884; vertical-align: top; }
td.src, li.path { font-family: monospace; font-size: .85rem; word-break: break-all; }
.err { color: #c0392b; }
.state { font-size: .8rem; padding: .1rem .5rem; border-radius: 1rem; background: #8883; }
.state-review { background: #f1c40f88; }
.state-recognizing { background: #9b59b655; }
.state-deferred { background: #f39c1255; }
section { border: 1px solid #8883; border-radius: .5rem; padding: .75rem 1rem; margin: 1rem 0; }
.reasons li { color: #b9770e; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.actions form { display: inline; }
.ignored td { opacity: .5; text-decoration: line-through; }
ul.preview { margin: 0; padding-left: 1.2rem; }
small { color: #8888; }
textarea { width: 100%; box-sizing: border-box; }
</style>
<title>jellybit — ревью #{{.ID}}</title>
<link rel="stylesheet" href="{{asset "css/jellybit.css"}}">
<script src="{{asset "vendor/htmx.min.js"}}" defer></script>
<script src="{{asset "js/app.js"}}" defer></script>
</head>
<body>
<p><a href="/">← к списку</a></p>
<h1>Ревью #{{.ID}} <span class="state state-{{.State}}">{{.State}}</span></h1>
<p class="src"><small>{{.Source}}</small></p>
{{if .Context}}<p>Контекст: «{{.Context}}»</p>{{end}}
{{if .Error}}<p class="err">{{.Error}}</p>{{end}}
{{if .StateError}}<p class="err">{{.StateError}}</p>{{end}}
{{template "header" ""}}
<main class="main">
<a class="back-link" href="/">← ко всем загрузкам</a>
{{if .Error}}<div class="result-banner" style="background:var(--st-err-bg);border-color:color-mix(in srgb,var(--st-err) 35%,transparent)"><h2 style="color:var(--st-err)">{{.Error}}</h2></div>{{end}}
{{if .StateError}}<div class="result-banner" style="background:var(--st-err-bg);border-color:color-mix(in srgb,var(--st-err) 35%,transparent)"><h2 style="color:var(--st-err)">{{.StateError}}</h2></div>{{end}}
<!-- Шапка ревью -->
<div class="review-head">
<div>
<div class="review-title">{{.Source}}</div>
<div class="reason-line">
{{template "status_badge" .State}}
{{if .Reasons}}<span>Причины: {{range $i, $r := .Reasons}}{{if $i}} · {{end}}<b>{{$r}}</b>{{end}}</span>{{end}}
{{if .Confidence}}<span class="conf">уверенность {{.Confidence}}</span>{{end}}
</div>
</div>
</div>
{{if eq .State "recognizing"}}
<p>⏳ Идёт распознавание, обновите страницу через несколько секунд…</p>
<p><a href="/review/{{.ID}}">Обновить</a></p>
<div class="section">
<p style="margin:0">⏳ Идёт распознавание — обновите страницу через несколько секунд.</p>
<p style="margin:var(--sp-2) 0 0"><a href="/review/{{.ID}}">Обновить</a></p>
</div>
{{end}}
{{if .Reasons}}
<section>
<strong>Причины ревью</strong>{{if .Confidence}} · уверенность {{.Confidence}}{{end}}
<ul class="reasons">{{range .Reasons}}<li>{{.}}</li>{{end}}</ul>
</section>
<!-- Контекст -->
{{if .Context}}
<div class="section">
<div class="section-head"><h2>Контекст</h2><span class="hint">исходное сообщение при добавлении</span></div>
<p style="margin:0;color:var(--text-dim)">«{{.Context}}»</p>
</div>
{{end}}
{{if .HasPlan}}
<section>
<strong>Догадка</strong>
<p class="row">
Тип: <b>{{if .IsSeries}}сериал{{else if eq .MediaType "movie"}}фильм{{else}}{{.MediaType}}{{end}}</b>
· Название: <b>{{.Title}}</b>{{if .OriginalTitle}} <small>({{.OriginalTitle}})</small>{{end}}
{{if .Year}}· Год: <b>{{.Year}}</b>{{end}}
{{if .Provider}}· База: <b>{{.Provider}}</b> {{.ProviderID}}{{else if .NoBase}}· База: <b>без базы</b>{{end}}
</p>
<form class="row" method="post" action="/ui/downloads/{{.ID}}/type">
Переключить тип:
<button name="type" value="movie" {{if not .IsSeries}}disabled{{end}}>фильм</button>
<button name="type" value="series" {{if .IsSeries}}disabled{{end}}>сериал</button>
<small>(пересоберёт план)</small>
</form>
</section>
<!-- Догадка -->
<div class="section">
<div class="section-head"><h2>Догадка</h2></div>
<div style="margin-bottom:var(--sp-4)">
<span class="label">Тип</span>
<form class="row" method="post" action="/ui/downloads/{{.ID}}/type" style="display:flex;gap:var(--sp-2);align-items:center">
<button class="btn btn-sm{{if not .IsSeries}} btn-primary{{end}}" name="type" value="movie"{{if not .IsSeries}} disabled{{end}}>фильм</button>
<button class="btn btn-sm{{if .IsSeries}} btn-primary{{end}}" name="type" value="series"{{if .IsSeries}} disabled{{end}}>сериал</button>
<span class="hint">переключение пересоберёт план</span>
</form>
</div>
<div class="guess-grid">
<div class="field"><span class="label">Название</span><div>{{.Title}}</div></div>
{{if .OriginalTitle}}<div class="field"><span class="label">Ориг. название</span><div class="mono">{{.OriginalTitle}}</div></div>{{end}}
{{if .Year}}<div class="field"><span class="label">Год</span><div>{{.Year}}</div></div>{{end}}
</div>
</div>
<section>
<strong>База метаданных</strong>
{{if .Provider}}<p>Выбрано: <b>{{.Provider}}</b> {{.ProviderID}}</p>
{{else if .NoBase}}<p>Выбрано: <b>без базы</b> (тег папки не ставится)</p>
{{else}}<p><small>Матч не подтверждён — выберите кандидата, введите id или «без базы».</small></p>{{end}}
<!-- Источник совпадения -->
<div class="section">
<div class="section-head"><h2>Источник совпадения</h2><span class="hint">выбери базу или оставь распознавание нейронкой</span></div>
{{if .Provider}}<p style="margin:0 0 var(--sp-3)">Выбрано: <b>{{.Provider}}</b> <span class="mono">{{.ProviderID}}</span></p>
{{else if .NoBase}}<p style="margin:0 0 var(--sp-3)">Выбрано: <b>без базы</b> <span class="faint">(тег папки не ставится)</span></p>
{{else}}<p style="margin:0 0 var(--sp-3)"><span class="faint">Матч не подтверждён — выбери кандидата, введи id или «без базы».</span></p>{{end}}
{{if .Candidates}}
<table>
<thead><tr><th>провайдер</th><th>название</th><th>год</th><th>id</th><th>ссылка</th><th></th></tr></thead>
<tbody>
<div class="cand-list">
{{range .Candidates}}
<tr>
<td>{{.Provider}}</td>
<td>{{.Title}}</td>
<td>{{if .Year}}{{.Year}}{{end}}</td>
<td class="src">{{.ProviderID}}</td>
<td>{{if .URL}}<a href="{{.URL}}" target="_blank" rel="noopener">{{.Provider}}</a>{{end}}</td>
<td>
<form method="post" action="/ui/downloads/{{$.ID}}/candidate">
<input type="hidden" name="candidate_id" value="{{.ID}}">
<button type="submit" {{if .Chosen}}disabled{{end}}>{{if .Chosen}}выбрано{{else}}выбрать{{end}}</button>
</form>
</td>
</tr>
<div class="cand{{if .Chosen}} selected{{end}}">
<span class="radio"></span>
<div class="body">
<div class="name"><span class="prov {{.Provider}}">{{.Provider}}</span> {{.Title}}{{if .Year}} <span class="muted">· {{.Year}}</span>{{end}}</div>
<div class="sub">id {{.ProviderID}}</div>
</div>
{{if .URL}}<a class="ext-link" href="{{.URL}}" target="_blank" rel="noopener">ссылка ↗</a>{{end}}
<form method="post" action="/ui/downloads/{{$.ID}}/candidate">
<input type="hidden" name="candidate_id" value="{{.ID}}">
<button class="btn btn-sm{{if not .Chosen}} btn-primary{{end}}" type="submit"{{if .Chosen}} disabled{{end}}>{{if .Chosen}}выбрано{{else}}выбрать{{end}}</button>
</form>
</div>
{{end}}
</tbody>
</table>
</div>
{{end}}
<form class="row" method="post" action="/ui/downloads/{{.ID}}/provider">
Вручную:
<select name="provider">
<option value="tvdb">tvdb</option>
<option value="tmdb">tmdb</option>
<option value="imdb">imdb</option>
<form class="cand-extra" method="post" action="/ui/downloads/{{.ID}}/provider">
<select class="select" name="provider" style="max-width:120px">
<option value="tmdb">TMDB</option>
<option value="tvdb">TVDB</option>
<option value="imdb">IMDb</option>
</select>
<input type="text" name="provider_id" placeholder="id (напр. 269613)" required>
<button type="submit">задать id</button>
<input class="input mono" name="provider_id" placeholder="ввести id вручную, напр. 60622" required>
<button class="btn btn-sm" type="submit">Задать id</button>
</form>
<form method="post" action="/ui/downloads/{{.ID}}/nobase" style="margin-top:.4rem">
<button type="submit">Без базы</button>
<form method="post" action="/ui/downloads/{{.ID}}/nobase" style="margin-top:var(--sp-2)">
<button class="btn btn-sm btn-ghost" type="submit">Без базы</button>
</form>
</section>
<section>
<strong>Файлы → роль</strong>
<table>
<thead><tr><th>#</th><th>файл</th><th>роль</th><th>S</th><th>E</th><th></th></tr></thead>
<tbody>
{{range $i, $f := .Files}}
<tr {{if $f.Ignored}}class="ignored"{{end}}>
<td>{{add $i 1}}</td>
<td class="src">{{$f.Src}}</td>
<td>{{$f.Role}}</td>
<td>{{$f.Season}}</td>
<td>{{$f.Episode}}</td>
<td>
{{if not $f.Ignored}}
<form method="post" action="/ui/downloads/{{$.ID}}/ignore">
<input type="hidden" name="src" value="{{$f.Src}}">
<button type="submit">игнор</button>
</form>
{{end}}
</td>
</tr>
{{end}}
</tbody>
</table>
</section>
{{if .Preview}}
<section>
<strong>Превью раскладки</strong> <small>(будут созданы хардлинки)</small>
<ul class="preview">{{range .Preview}}<li class="path">{{.}}</li>{{end}}</ul>
</section>
{{end}}
{{end}}
<section>
<strong>Уточнить и перераспознать</strong>
<form method="post" action="/ui/downloads/{{.ID}}/refine">
<p><textarea name="hint" rows="2" placeholder="подсказка для распознавания, напр. «это второй сезон, рус+англ дорожки»"></textarea></p>
<button type="submit">🔁 Уточнить</button>
</form>
<form method="post" action="/ui/downloads/{{.ID}}/rerecognize" style="margin-top:.4rem">
<button type="submit">🔄 Распознать заново</button>
<small>(без новой подсказки — по уже накопленному контексту)</small>
</form>
{{if .Hints}}
<p><small>Подсказки: {{range $i, $h := .Hints}}{{if $i}} · {{end}}«{{$h}}»{{end}}</small></p>
{{end}}
</section>
<div class="actions">
{{if .Preview}}
<form method="post" action="/ui/downloads/{{.ID}}/apply"><button type="submit">✅ Применить</button></form>
{{end}}
<form method="post" action="/ui/downloads/{{.ID}}/defer"><button type="submit">🕗 Позже</button></form>
<form method="post" action="/ui/downloads/{{.ID}}/cancel"><button type="submit">❌ Отклонить</button></form>
</div>
<!-- Раскладка -->
<div class="section">
<div class="section-head">
<h2>Раскладка</h2>
<span class="hint">файл источника → целевой хардлинк</span>
</div>
{{template "layout_widget" .Files}}
<p class="faint" style="font-size:var(--fs-xs);margin:var(--sp-3) 0 0">
Буквальные целевые пути. Применяются как хардлинки — исходник остаётся на раздаче.
</p>
</div>
{{end}}
<!-- Уточнить и перераспознать -->
<div class="section">
<div class="section-head"><h2>Уточнить и перераспознать</h2></div>
{{if .Hints}}
<div class="hint-list">
{{range $i, $h := .Hints}}
<div class="hint-item"><span class="idx">#{{add $i 1}}</span><span class="txt">{{$h}}</span></div>
{{end}}
</div>
{{end}}
<form method="post" action="/ui/downloads/{{.ID}}/refine">
<textarea class="textarea" name="hint" placeholder="Например: «это Fargo, год сериала 2014, не 2015» или «sample.mkv не считать эпизодом»"></textarea>
<div class="refine-row">
<button class="btn btn-primary btn-sm" type="submit">🔁 Уточнить</button>
</div>
</form>
<form method="post" action="/ui/downloads/{{.ID}}/rerecognize" style="margin-top:var(--sp-2)">
<button class="btn btn-sm" type="submit">🔄 Распознать заново</button>
<span class="hint">без новой подсказки — по уже накопленному контексту</span>
</form>
</div>
<!-- Панель действий -->
<div class="action-bar">
<span class="grow">{{if .HasLinks}}Превью готово — можно применять.{{else}}Подтверди источник, чтобы получить превью раскладки.{{end}}</span>
<form method="post" action="/ui/downloads/{{.ID}}/defer"><button class="btn btn-lg" type="submit">🕗 Позже</button></form>
<form method="post" action="/ui/downloads/{{.ID}}/cancel"><button class="btn btn-lg btn-danger" type="submit">❌ Отклонить</button></form>
{{if .HasLinks}}<form method="post" action="/ui/downloads/{{.ID}}/apply"><button class="btn btn-lg btn-primary" type="submit">✅ Применить</button></form>{{end}}
</div>
</main>
</body>
</html>
web/web.go
+8 -3
View File
@@ -1,9 +1,14 @@
// Package web несёт встроенные (embed) ресурсы веб-UI: HTML-шаблоны.
// Package web несёт встроенные (embed) ресурсы веб-UI: HTML-шаблоны и статику
// (CSS, JS, шрифты, вендорные библиотеки). Бинарь самодостаточен — внешних
// ресурсов времени выполнения нет.
package web
import "embed"
// FS — встроенные шаблоны (templates/*.html).
// FS — встроенные ресурсы: templates/** (шаблоны и партиалы) и static/**
// (авторские css/js + вендор htmx/шрифты под static/vendor). Вендор в репо не
// хранится (gitignore); его добывает `task assets` по web/assets.manifest перед
// сборкой, поэтому `task build`/`run` зависят от `assets`.
//
//go:embed templates/*.html
//go:embed templates static
var FS embed.FS