Перенос дизайна в server-rendered веб-UI (web-ui)
Новая 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:
Claude Opus 4.8
+125
-143
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user