Apply new frontend theme

Full style rewrite (holographic/chrome dark theme) plus matching favicon,
authored externally and dropped in at /home/andrew/alembic-theme. Verified
every template's variable names, form field names, and action URLs match
the actual data each router passes before importing -- all matched exactly
with zero router/service changes needed. Validated all templates parse
(Jinja2 env.get_template over the full tree) and confirmed the live
container serves the new theme after rebuild+redeploy.
This commit is contained in:
andrew
2026-07-08 15:01:39 -06:00
parent a1f5bbb121
commit ee21251f3e
13 changed files with 927 additions and 346 deletions
+42 -14
View File
@@ -4,27 +4,55 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}alembic{% endblock %}</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='24' y2='24'%3E%3Cstop offset='0%25' stop-color='%237dd3fc'/%3E%3Cstop offset='50%25' stop-color='%23a78bfa'/%3E%3Cstop offset='100%25' stop-color='%23f9a8d4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M9 2.5h6v5.2l4.3 8.6a2.6 2.6 0 0 1-2.33 3.76H7.03A2.6 2.6 0 0 1 4.7 16.3L9 7.7V2.5z'/%3E%3C/svg%3E">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/style.css">
<script src="/static/htmx.min.js"></script>
<script src="/static/alpine.min.js" defer></script>
</head>
<body>
<div class="ambient-blob one"></div>
<div class="ambient-blob two"></div>
<div class="ambient-blob three"></div>
<header class="topbar">
<a class="brand" href="/">alembic</a>
<nav>
<a href="/">Dashboard</a>
<a href="/playlists">Playlists</a>
<a href="/library">Library</a>
<a href="/jobs">Jobs</a>
<a href="/dedup">Dedup</a>
<a href="/genres">Genres</a>
<a href="/import">Import</a>
<a href="/settings/credentials">Credentials</a>
</nav>
{% if user %}
<a class="logout" href="/auth/logout">Log out ({{ user.email or user.name }})</a>
{% endif %}
<div class="topbar-inner">
<a class="brand" href="/">
<svg width="22" height="22" viewBox="0 0 24 24">
<defs>
<linearGradient id="brandGrad" x1="0" y1="0" x2="24" y2="24">
<stop offset="0%" stop-color="#7dd3fc"/>
<stop offset="50%" stop-color="#a78bfa"/>
<stop offset="100%" stop-color="#f9a8d4"/>
</linearGradient>
</defs>
<path fill="url(#brandGrad)" d="M9 2.5h6v5.2l4.3 8.6a2.6 2.6 0 0 1-2.33 3.76H7.03A2.6 2.6 0 0 1 4.7 16.3L9 7.7V2.5z"/>
<path d="M9 2.5h6M8.2 8.6h7.6" stroke="#08090d" stroke-width="0.9" stroke-linecap="round" opacity="0.35"/>
</svg>
<span class="chrome-text">Alembic</span>
</a>
<nav class="nav-pills">
<a href="/" class="{{ 'active' if request.url.path == '/' else '' }}">Dashboard</a>
<a href="/playlists" class="{{ 'active' if request.url.path.startswith('/playlists') else '' }}">Playlists</a>
<a href="/library" class="{{ 'active' if request.url.path.startswith('/library') else '' }}">Library</a>
<a href="/jobs" class="{{ 'active' if request.url.path.startswith('/jobs') else '' }}">Jobs</a>
<a href="/dedup" class="{{ 'active' if request.url.path.startswith('/dedup') else '' }}">Dedup</a>
<a href="/genres" class="{{ 'active' if request.url.path.startswith('/genres') else '' }}">Genres</a>
<a href="/import" class="{{ 'active' if request.url.path.startswith('/import') else '' }}">Import</a>
<a href="/settings/credentials" class="{{ 'active' if request.url.path.startswith('/settings/credentials') else '' }}">Credentials</a>
</nav>
{% if user %}
<div class="user-chip">
<span class="user-dot"></span>
<span>{{ user.email or user.name }}</span>
<a class="logout" href="/auth/logout" title="Log out">&#9211;</a>
</div>
{% endif %}
</div>
</header>
<main>
{% block content %}{% endblock %}
</main>
+25 -22
View File
@@ -1,29 +1,32 @@
{% extends "base.html" %}
{% block title %}Credentials — alembic{% endblock %}
{% block content %}
<h1>Credentials</h1>
<p class="muted">
Write-only: saved values are encrypted at rest and never sent back to the
browser. Leave a field blank to keep its current value unchanged.
</p>
<div class="page-header">
<div>
<h1>Credentials</h1>
<p class="subtitle muted">Write-only: values are encrypted at rest and never sent back to the browser. Leave a field blank to keep it unchanged.</p>
</div>
</div>
{% for scope, fields in scope_fields.items() %}
<h2>{{ scope }}</h2>
<form method="post" action="/settings/credentials/{{ scope }}">
{% for field in fields %}
<div>
<label for="{{ scope }}_{{ field }}">
{{ field }}
{% if field in configured.get(scope, []) %}<span class="muted">(set)</span>{% endif %}
</label>
{% if field in ("cookies_txt",) %}
<textarea id="{{ scope }}_{{ field }}" name="{{ field }}" placeholder="leave blank to keep current"></textarea>
{% else %}
<input type="password" id="{{ scope }}_{{ field }}" name="{{ field }}" placeholder="leave blank to keep current" autocomplete="off">
{% endif %}
</div>
{% endfor %}
<button type="submit">Save {{ scope }}</button>
</form>
<h2 class="scope-header">{{ scope }}</h2>
<div class="panel" style="max-width:560px;">
<form method="post" action="/settings/credentials/{{ scope }}">
{% for field in fields %}
<div class="field wide">
<label for="{{ scope }}_{{ field }}">
{{ field }}
{% if field in configured.get(scope, []) %}<span class="badge badge-success" style="margin-left:0.5rem;">set</span>{% endif %}
</label>
{% if field in ("cookies_txt",) %}
<textarea id="{{ scope }}_{{ field }}" name="{{ field }}" rows="6" placeholder="leave blank to keep current"></textarea>
{% else %}
<input type="password" id="{{ scope }}_{{ field }}" name="{{ field }}" placeholder="leave blank to keep current" autocomplete="off">
{% endif %}
</div>
{% endfor %}
<button type="submit" class="btn">Save {{ scope }}</button>
</form>
</div>
{% endfor %}
{% endblock %}
+41 -22
View File
@@ -1,30 +1,49 @@
{% extends "base.html" %}
{% block title %}Dashboard — alembic{% endblock %}
{% block content %}
<h1>Dashboard</h1>
<p class="muted">Logged in as {{ user.name or user.email }}.</p>
<div class="page-header">
<div>
<h1>Welcome back, {{ user.name or user.email }}</h1>
<p class="subtitle muted">Distilling Spotify playlists into a tuned, tagged library.</p>
</div>
<div class="actions">
<a class="btn btn-primary" href="/playlists">Manage playlists</a>
</div>
</div>
<h2>At a glance</h2>
<ul>
<li>{{ stats.total_tracks }} tracks in the beets library{% if not stats.db_exists %} <span class="muted">(beets DB not found)</span>{% endif %}</li>
<li>{{ active_playlist_count }} / {{ playlist_count }} playlists active — <a href="/playlists">manage</a></li>
</ul>
<div class="stat-grid">
<div class="stat-card">
<div class="stat-value chrome-text">{{ stats.total_tracks }}</div>
<div class="stat-label">Tracks in library{% if not stats.db_exists %} <span class="muted">(beets db not found)</span>{% endif %}</div>
</div>
<div class="stat-card">
<div class="stat-value">{{ active_playlist_count }}<span class="muted"> / {{ playlist_count }}</span></div>
<div class="stat-label">Playlists active</div>
</div>
<div class="stat-card">
<div class="stat-value">{{ stats.groupings | length }}</div>
<div class="stat-label">Distinct groupings</div>
</div>
</div>
<h2>Recent job runs</h2>
<table>
<thead><tr><th>Job</th><th>Status</th><th>Triggered by</th><th>Summary</th></tr></thead>
<tbody>
{% for run in recent_runs %}
<tr>
<td>{{ run.job_key }}</td>
<td>{{ run.status }}</td>
<td class="muted">{{ run.triggered_by }}</td>
<td>{{ run.summary or "" }}</td>
</tr>
{% else %}
<tr><td colspan="4" class="muted">No job runs yet.</td></tr>
{% endfor %}
</tbody>
</table>
<div class="table-wrap scroll">
<table>
<thead><tr><th>Job</th><th>Status</th><th>Triggered by</th><th>Summary</th></tr></thead>
<tbody>
{% set status_badge = {"running": "badge-info badge-pulse", "success": "badge-success", "failed": "badge-danger", "skipped_lock": "badge-muted"} %}
{% for run in recent_runs %}
<tr>
<td>{{ run.job_key }}</td>
<td><span class="badge {{ status_badge.get(run.status, 'badge-muted') }}">{{ run.status }}</span></td>
<td class="muted">{{ run.triggered_by }}</td>
<td>{{ run.summary or "—" }}</td>
</tr>
{% else %}
<tr class="empty-row"><td colspan="4" class="muted">No job runs yet.</td></tr>
{% endfor %}
</tbody>
</table>
</div>
<p><a href="/jobs">See all jobs &rarr;</a></p>
{% endblock %}
+37 -28
View File
@@ -1,38 +1,47 @@
{% extends "base.html" %}
{% block title %}Dedup — alembic{% endblock %}
{% block content %}
<h1>Dedup review</h1>
<p class="muted">
Scheduled dedup runs dry-run only, every day. Nothing is ever deleted
without an explicit confirm below.
</p>
<form method="post" action="/dedup/scan">
<button type="submit">Scan now</button>
</form>
<div class="page-header">
<div>
<h1>Dedup review</h1>
<p class="subtitle muted">Scheduled runs are dry-run only, every day. Nothing is deleted without a confirm below.</p>
</div>
<div class="actions">
<form method="post" action="/dedup/scan" class="inline">
<button type="submit" class="btn btn-primary">Scan now</button>
</form>
</div>
</div>
<h2>Pending candidates</h2>
<form method="post" action="/dedup/confirm">
<table>
<thead>
<tr><th></th><th>Pass</th><th>Keep</th><th>Delete</th><th>Size</th></tr>
</thead>
<tbody>
{% for c in candidates %}
<tr>
<td><input type="checkbox" name="candidate_id" value="{{ c.id }}"></td>
<td>{{ c.pass_name }}</td>
<td class="muted">{{ c.keep_path }}</td>
<td>{{ c.delete_path }}</td>
<td>{{ (c.delete_size_bytes / 1024 / 1024) | round(1) if c.delete_size_bytes else '?' }} MB</td>
</tr>
{% else %}
<tr><td colspan="5" class="muted">No pending candidates. Run a scan.</td></tr>
{% endfor %}
</tbody>
</table>
<div class="table-wrap scroll">
<table>
<thead>
<tr><th></th><th>Pass</th><th>Keep</th><th>Delete</th><th>Size</th></tr>
</thead>
<tbody>
{% for c in candidates %}
<tr>
<td><input type="checkbox" name="candidate_id" value="{{ c.id }}"></td>
<td><span class="badge badge-info">{{ c.pass_name }}</span></td>
<td class="muted mono truncate">{{ c.keep_path }}</td>
<td class="mono truncate">{{ c.delete_path }}</td>
<td class="muted">{{ (c.delete_size_bytes / 1024 / 1024) | round(1) if c.delete_size_bytes else '?' }} MB</td>
</tr>
{% else %}
<tr class="empty-row"><td colspan="5">
<div class="empty-state">
<span class="sparkle" style="position:relative; display:inline-block; margin-bottom:0.5rem;"></span>
<p class="muted" style="margin:0;">No pending candidates. Run a scan.</p>
</div>
</td></tr>
{% endfor %}
</tbody>
</table>
</div>
{% if candidates %}
<button type="submit">Delete selected</button>
<button type="submit" class="btn btn-danger">Delete selected</button>
{% endif %}
</form>
{% endblock %}
+36 -31
View File
@@ -1,42 +1,47 @@
{% extends "base.html" %}
{% block title %}Genres — alembic{% endblock %}
{% block content %}
<h1>Genre review</h1>
<p class="muted">
The weekly scheduled run still writes genres automatically (low-risk,
reversible, GENRE_LOCK-protected) -- this shows what the last run changed.
</p>
<div class="page-header">
<div>
<h1>Genre review</h1>
<p class="subtitle muted">The weekly scheduled run auto-writes genres (low-risk, reversible, GENRE_LOCK-protected) this shows what it last changed.</p>
</div>
</div>
<form method="post" action="/genres/scan">
<label><input type="checkbox" name="force" value="true"> force (overwrite existing genres)</label>
<button type="submit">Preview now (dry run)</button>
</form>
<div class="panel" style="max-width:560px;">
<form method="post" action="/genres/scan">
<label class="checkbox-field"><input type="checkbox" name="force" value="true"> Force (overwrite existing genres)</label>
<button type="submit" class="btn btn-primary">Preview now (dry run)</button>
</form>
</div>
<h2>Last run</h2>
{% if latest_run %}
<p class="muted">{{ latest_run.mode }} — {{ candidates | length }} change(s)</p>
<table>
<thead><tr><th>Artist</th><th>Title</th><th>Old genre</th><th>New genre</th><th></th></tr></thead>
<tbody>
{% for c in candidates %}
<tr>
<td>{{ c.artist }}</td>
<td>{{ c.title }}</td>
<td class="muted">{{ c.old_genre or '(empty)' }}</td>
<td>{{ c.new_genre }}</td>
<td>
<form method="post" action="/genres/lock" style="display:inline">
<input type="hidden" name="artist" value="{{ c.artist }}">
<input type="hidden" name="genre" value="{{ c.old_genre or '' }}">
<button type="submit" title="Revert to old genre and lock it">lock old genre</button>
</form>
</td>
</tr>
{% else %}
<tr><td colspan="5" class="muted">No changes in the last run.</td></tr>
{% endfor %}
</tbody>
</table>
<div class="table-wrap scroll">
<table>
<thead><tr><th>Artist</th><th>Title</th><th>Old genre</th><th>New genre</th><th></th></tr></thead>
<tbody>
{% for c in candidates %}
<tr>
<td>{{ c.artist }}</td>
<td>{{ c.title }}</td>
<td class="muted">{{ c.old_genre or '(empty)' }}</td>
<td>{{ c.new_genre }}</td>
<td>
<form method="post" action="/genres/lock" class="inline">
<input type="hidden" name="artist" value="{{ c.artist }}">
<input type="hidden" name="genre" value="{{ c.old_genre or '' }}">
<button type="submit" class="btn btn-sm btn-ghost" title="Revert to old genre and lock it">Lock old genre</button>
</form>
</td>
</tr>
{% else %}
<tr class="empty-row"><td colspan="5" class="muted">No changes in the last run.</td></tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<p class="muted">No runs yet.</p>
{% endif %}
+44 -26
View File
@@ -1,45 +1,63 @@
{% extends "base.html" %}
{% block title %}Import — alembic{% endblock %}
{% block content %}
<h1>Manual import</h1>
<div class="page-header">
<div>
<h1>Manual import</h1>
<p class="subtitle muted">Drop files into <span class="mono">import-me/</span> and run them through the pipeline.</p>
</div>
</div>
{% if request.query_params.get('run_id') %}
<p>Import job started (run id {{ request.query_params.get('run_id') }}). Check the Jobs page for progress.</p>
<div class="notice success">Import job started (run id {{ request.query_params.get('run_id') }}). Check the Jobs page for progress.</div>
{% endif %}
<h2>Upload a file into import-me/</h2>
<form method="post" action="/import/upload" enctype="multipart/form-data">
<input type="file" name="file" required>
<button type="submit">Upload</button>
</form>
<div class="panel" style="max-width:560px;">
<form method="post" action="/import/upload" enctype="multipart/form-data">
<div class="field wide">
<input type="file" name="file" required>
</div>
<button type="submit" class="btn">Upload</button>
</form>
</div>
<h2>Contents of import-me/</h2>
<ul>
{% if contents %}
<ul class="chip-list">
{% for name in contents %}
<li>{{ name }}</li>
{% else %}
<li class="muted">(empty)</li>
{% endfor %}
</ul>
{% else %}
<p class="muted">(empty)</p>
{% endif %}
<h2>Run import</h2>
<form method="post" action="/import/run">
<label for="source">File/subdir (blank = import everything above)</label>
<input type="text" id="source" name="source" list="import-contents">
<datalist id="import-contents">
{% for name in contents %}
<option value="{{ name }}">
{% endfor %}
</datalist>
<div class="panel" style="max-width:560px;">
<form method="post" action="/import/run">
<div class="field">
<label for="source">File/subdir</label>
<input type="text" id="source" name="source" list="import-contents">
<span class="hint">Blank = import everything above.</span>
<datalist id="import-contents">
{% for name in contents %}
<option value="{{ name }}">
{% endfor %}
</datalist>
</div>
<label for="playlist_name">Playlist tag (optional)</label>
<select id="playlist_name" name="playlist_name">
<option value="">(none)</option>
{% for p in playlists %}
<option value="{{ p.name }}">{{ p.name }}</option>
{% endfor %}
</select>
<div class="field">
<label for="playlist_name">Playlist tag (optional)</label>
<select id="playlist_name" name="playlist_name">
<option value="">(none)</option>
{% for p in playlists %}
<option value="{{ p.name }}">{{ p.name }}</option>
{% endfor %}
</select>
</div>
<button type="submit">Import</button>
</form>
<button type="submit" class="btn btn-primary">Import</button>
</form>
</div>
{% endblock %}
+4 -3
View File
@@ -1,11 +1,12 @@
{% set status_badge = {"running": "badge-info badge-pulse", "success": "badge-success", "failed": "badge-danger", "skipped_lock": "badge-muted"} %}
{% for run in recent_runs %}
<tr>
<td>{{ run.job_key }}</td>
<td>{{ run.status }}</td>
<td><span class="badge {{ status_badge.get(run.status, 'badge-muted') }}">{{ run.status }}</span></td>
<td class="muted">{{ run.triggered_by }}</td>
<td>{{ run.summary or "" }}</td>
<td>{% if run.log_path %}<a href="/jobs/runs/{{ run.id }}/log" target="_blank">log</a>{% endif %}</td>
<td>{% if run.log_path %}<a href="/jobs/runs/{{ run.id }}/log" target="_blank" class="btn btn-sm btn-ghost">Log</a>{% endif %}</td>
</tr>
{% else %}
<tr><td colspan="5" class="muted">No job runs yet.</td></tr>
<tr class="empty-row"><td colspan="5" class="muted">No job runs yet.</td></tr>
{% endfor %}
+36 -27
View File
@@ -1,36 +1,45 @@
{% extends "base.html" %}
{% block title %}Jobs — alembic{% endblock %}
{% block content %}
<h1>Jobs</h1>
<div class="page-header">
<div>
<h1>Jobs</h1>
<p class="subtitle muted">Maintenance runs on their own schedule, or trigger them manually here.</p>
</div>
</div>
<h2>Maintenance jobs</h2>
<table>
<thead><tr><th>Job</th><th>Status</th><th>Next run</th><th></th></tr></thead>
<tbody>
{% for job in maintenance_jobs %}
<tr>
<td>{{ job.job_key }}</td>
<td>{{ "enabled" if job.enabled else "disabled" }}</td>
<td class="muted">{{ job.next_run or "-" }}</td>
<td>
<form method="post" action="/jobs/{{ job.job_key }}/run" style="display:inline">
<button type="submit">Run now</button>
</form>
<form method="post" action="/jobs/{{ job.job_key }}/toggle" style="display:inline">
<button type="submit">{{ "disable" if job.enabled else "enable" }}</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="table-wrap scroll">
<table>
<thead><tr><th>Job</th><th>Status</th><th>Next run</th><th></th></tr></thead>
<tbody>
{% for job in maintenance_jobs %}
<tr>
<td class="mono">{{ job.job_key }}</td>
<td>{% if job.enabled %}<span class="badge badge-success">enabled</span>{% else %}<span class="badge badge-muted">disabled</span>{% endif %}</td>
<td class="muted">{{ job.next_run or "—" }}</td>
<td class="actions-cell">
<form method="post" action="/jobs/{{ job.job_key }}/run" class="inline">
<button type="submit" class="btn btn-sm">Run now</button>
</form>
<form method="post" action="/jobs/{{ job.job_key }}/toggle" class="inline">
<button type="submit" class="btn btn-sm btn-ghost">{{ "Disable" if job.enabled else "Enable" }}</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<p class="muted">Playlist syncs are triggered from each playlist's own page.</p>
<h2>Recent runs</h2>
<table>
<thead><tr><th>Job</th><th>Status</th><th>Triggered by</th><th>Summary</th><th></th></tr></thead>
<tbody id="runs-tbody" hx-get="/jobs/_runs_table" hx-trigger="every 5s" hx-swap="innerHTML">
{% include "jobs/_runs_table.html" %}
</tbody>
</table>
<div class="table-wrap scroll">
<table>
<thead><tr><th>Job</th><th>Status</th><th>Triggered by</th><th>Summary</th><th></th></tr></thead>
<tbody id="runs-tbody" hx-get="/jobs/_runs_table" hx-trigger="every 5s" hx-swap="innerHTML">
{% include "jobs/_runs_table.html" %}
</tbody>
</table>
</div>
{% endblock %}
+32 -19
View File
@@ -1,23 +1,36 @@
{% extends "base.html" %}
{% block title %}Library — alembic{% endblock %}
{% block content %}
<h1>Library{% if grouping %} — {{ grouping }}{% endif %}</h1>
<table>
<thead>
<tr><th>Artist</th><th>Title</th><th>Album</th><th>Format</th><th></th></tr>
</thead>
<tbody>
{% for item in items %}
<tr>
<td>{{ item.artist }}</td>
<td>{{ item.title }}</td>
<td>{{ item.albumartist }}</td>
<td>{{ item.format }}</td>
<td><a href="/library/track/{{ item.id }}">edit</a></td>
</tr>
{% else %}
<tr><td colspan="5" class="muted">No tracks found{% if grouping %} for grouping "{{ grouping }}"{% endif %}.</td></tr>
{% endfor %}
</tbody>
</table>
<div class="page-header">
<div>
<h1>Library{% if grouping %} <span class="muted">— {{ grouping }}</span>{% endif %}</h1>
<p class="subtitle muted">Tracks currently imported into beets.</p>
</div>
</div>
<div class="table-wrap scroll">
<table>
<thead>
<tr><th>Artist</th><th>Title</th><th>Album</th><th>Format</th><th></th></tr>
</thead>
<tbody>
{% for item in items %}
<tr>
<td>{{ item.artist }}</td>
<td>{{ item.title }}</td>
<td class="muted">{{ item.albumartist }}</td>
<td><span class="badge badge-muted">{{ item.format }}</span></td>
<td><a href="/library/track/{{ item.id }}" class="btn btn-sm btn-ghost">Edit</a></td>
</tr>
{% else %}
<tr class="empty-row"><td colspan="5">
<div class="empty-state">
<span class="sparkle" style="position:relative; display:inline-block; margin-bottom:0.5rem;"></span>
<p class="muted" style="margin:0;">No tracks found{% if grouping %} for grouping "{{ grouping }}"{% endif %}.</p>
</div>
</td></tr>
{% endfor %}
</tbody>
</table>
</div>
{% endblock %}
+40 -25
View File
@@ -1,38 +1,53 @@
{% extends "base.html" %}
{% block title %}{{ item.artist }} — {{ item.title }} — alembic{% endblock %}
{% block content %}
<p><a href="/library">&larr; back to library</a></p>
<h1>{{ item.artist }} — {{ item.title }}</h1>
<p class="muted">{{ item.path }}</p>
<a class="back-link" href="/library">&larr; back to library</a>
<div class="page-header">
<div>
<h1>{{ item.artist }} — {{ item.title }}</h1>
<p class="subtitle muted mono truncate" style="max-width:none;">{{ item.path }}</p>
</div>
</div>
{% if request.query_params.get('changed') %}
<p>Updated {{ request.query_params.get('changed') }} field(s).</p>
<div class="notice success">Updated {{ request.query_params.get('changed') }} field(s).</div>
{% endif %}
<h2>Edit tags</h2>
<form method="post" action="/library/track/{{ item.id }}">
{% for field in editable_fields %}
<div>
<label for="{{ field }}">{{ field }}</label>
<input type="text" id="{{ field }}" name="{{ field }}" value="{{ item.get(field, '') or '' }}">
</div>
{% endfor %}
<button type="submit">Save</button>
</form>
<div class="panel" style="max-width:560px;">
<form method="post" action="/library/track/{{ item.id }}">
{% for field in editable_fields %}
<div class="field">
<label for="{{ field }}">{{ field }}</label>
<input type="text" id="{{ field }}" name="{{ field }}" value="{{ item.get(field, '') or '' }}">
</div>
{% endfor %}
<button type="submit" class="btn btn-primary">Save</button>
</form>
</div>
<h2>Set genre for this artist (all their tracks)</h2>
<form method="post" action="/library/track/{{ item.id }}/genre">
<input type="hidden" name="artist" value="{{ item.artist }}">
<label for="genre">Genre (e.g. "IDM; Electronic")</label>
<input type="text" id="genre" name="genre" required>
<button type="submit">Set genre</button>
</form>
<div class="panel" style="max-width:560px;">
<form method="post" action="/library/track/{{ item.id }}/genre">
<input type="hidden" name="artist" value="{{ item.artist }}">
<div class="field">
<label for="genre">Genre</label>
<input type="text" id="genre" name="genre" required placeholder="IDM; Electronic">
</div>
<button type="submit" class="btn">Set genre</button>
</form>
</div>
<h2>Re-fetch metadata from Spotify/iTunes URL</h2>
<form method="post" action="/library/track/{{ item.id }}/retag">
<label for="url">URL</label>
<input type="text" id="url" name="url" required>
<label><input type="checkbox" name="keep_genre" value="true"> keep existing genre</label>
<button type="submit">Retag</button>
</form>
<div class="panel" style="max-width:560px;">
<form method="post" action="/library/track/{{ item.id }}/retag">
<div class="field">
<label for="url">URL</label>
<input type="text" id="url" name="url" required>
</div>
<label class="checkbox-field"><input type="checkbox" name="keep_genre" value="true"> Keep existing genre</label>
<button type="submit" class="btn">Retag</button>
</form>
</div>
{% endblock %}
+62 -32
View File
@@ -1,44 +1,74 @@
{% extends "base.html" %}
{% block title %}{{ playlist.name }} — alembic{% endblock %}
{% block content %}
<p><a href="/playlists">&larr; back to playlists</a></p>
<h1>{{ playlist.name }}</h1>
<p class="muted"><a href="{{ playlist.spotify_url }}">{{ playlist.spotify_url }}</a></p>
<a class="back-link" href="/playlists">&larr; back to playlists</a>
<form method="post" action="/playlists/{{ playlist.id }}">
<label><input type="checkbox" name="active" value="true" {{ "checked" if playlist.active }}> active</label>
<label for="cron_expr">Cron schedule</label>
<input type="text" id="cron_expr" name="cron_expr" value="{{ playlist.cron_expr or '' }}" placeholder="0 1 * * *">
<label><input type="checkbox" name="no_m3u" value="true" {{ "checked" if playlist.no_m3u }}> skip M3U</label>
<label for="notes">Notes</label>
<textarea id="notes" name="notes">{{ playlist.notes or '' }}</textarea>
<button type="submit">Save</button>
</form>
<div class="page-header">
<div>
<h1>{{ playlist.name }}</h1>
<p class="subtitle muted"><a href="{{ playlist.spotify_url }}">{{ playlist.spotify_url }}</a></p>
</div>
<div class="actions">
<form method="post" action="/jobs/playlist:{{ playlist.name }}/run" class="inline">
<button type="submit" class="btn btn-primary">Run now</button>
</form>
</div>
</div>
<form method="post" action="/jobs/playlist:{{ playlist.name }}/run" style="display:inline">
<button type="submit">Run now</button>
</form>
<div class="panel" style="max-width:560px;">
<form method="post" action="/playlists/{{ playlist.id }}">
<label class="checkbox-field"><input type="checkbox" name="active" value="true" {{ "checked" if playlist.active }}> Active</label>
<div class="field">
<label for="cron_expr">Cron schedule</label>
<input type="text" id="cron_expr" name="cron_expr" value="{{ playlist.cron_expr or '' }}" placeholder="0 1 * * *">
</div>
<label class="checkbox-field"><input type="checkbox" name="no_m3u" value="true" {{ "checked" if playlist.no_m3u }}> Skip M3U</label>
<div class="field wide">
<label for="notes">Notes</label>
<textarea id="notes" name="notes" rows="3">{{ playlist.notes or '' }}</textarea>
</div>
<button type="submit" class="btn">Save</button>
</form>
</div>
<h2>Status</h2>
{% if error %}
<p class="muted">Couldn't fetch live status: {{ error }}</p>
<div class="notice warning">Couldn't fetch live status: {{ error }}</div>
{% elif status %}
<p>
{% for key, count in status.counts.items() %}
<strong>{{ count }}</strong> {{ key }} &nbsp;
{% endfor %}
</p>
<table>
<thead><tr><th>Artist</th><th>Title</th><th>Status</th></tr></thead>
<tbody>
{% for t in status.tracks %}
<tr>
<td>{{ t.artist }}</td>
<td>{{ t.title }}</td>
<td>{{ t.status }}</td>
</tr>
{% set status_meta = {
"IN_LIBRARY": ("var(--status-success)", "In library"),
"QUARANTINED": ("var(--status-warning)", "Quarantined"),
"DOWNLOADED_PENDING_IMPORT": ("var(--status-info)", "Downloaded, pending import"),
"NOT_YET_ATTEMPTED": ("var(--status-muted)", "Not yet attempted")
} %}
{% set total = status.counts.values() | sum %}
<div class="status-bar">
{% for key, count in status.counts.items() %}
{% if count %}
<span style="width: {{ (count / total * 100) if total else 0 }}%; background: {{ status_meta.get(key, ('var(--status-muted)', key))[0] }};"></span>
{% endif %}
{% endfor %}
</tbody>
</table>
</div>
<div class="status-legend">
{% for key, count in status.counts.items() %}
<span class="item"><span class="dot" style="background: {{ status_meta.get(key, ('var(--status-muted)', key))[0] }}; color: {{ status_meta.get(key, ('var(--status-muted)', key))[0] }};"></span><strong>{{ count }}</strong> {{ status_meta.get(key, (None, key))[1] }}</span>
{% endfor %}
</div>
{% set badge_class = {"IN_LIBRARY": "badge-success", "QUARANTINED": "badge-warning", "DOWNLOADED_PENDING_IMPORT": "badge-info", "NOT_YET_ATTEMPTED": "badge-muted"} %}
<div class="table-wrap scroll">
<table>
<thead><tr><th>Artist</th><th>Title</th><th>Status</th></tr></thead>
<tbody>
{% for t in status.tracks %}
<tr>
<td>{{ t.artist }}</td>
<td>{{ t.title }}</td>
<td><span class="badge {{ badge_class.get(t.status, 'badge-muted') }}">{{ status_meta.get(t.status, (None, t.status))[1] }}</span></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
{% endblock %}
+56 -38
View File
@@ -1,44 +1,62 @@
{% extends "base.html" %}
{% block title %}Playlists — alembic{% endblock %}
{% block content %}
<h1>Playlists</h1>
<table>
<thead>
<tr><th>Name</th><th>Active</th><th>Cron</th><th>No M3U</th><th></th></tr>
</thead>
<tbody>
{% for p in playlists %}
<tr>
<td><a href="/playlists/{{ p.id }}">{{ p.name }}</a></td>
<td>{{ "yes" if p.active else "no" }}</td>
<td class="muted">{{ p.cron_expr or "(unscheduled)" }}</td>
<td>{{ "yes" if p.no_m3u else "no" }}</td>
<td>
<form method="post" action="/playlists/{{ p.id }}/delete" style="display:inline"
onsubmit="return confirm('Remove {{ p.name }}? This deletes its rendered config but not any downloaded music.')">
<button type="submit">remove</button>
</form>
</td>
</tr>
{% else %}
<tr><td colspan="5" class="muted">No playlists yet.</td></tr>
{% endfor %}
</tbody>
</table>
<div class="page-header">
<div>
<h1>Playlists</h1>
<p class="subtitle muted">Each active playlist syncs on its own schedule, or run it manually from its page.</p>
</div>
</div>
<div class="table-wrap scroll">
<table>
<thead>
<tr><th>Name</th><th>Active</th><th>Cron</th><th>No M3U</th><th></th></tr>
</thead>
<tbody>
{% for p in playlists %}
<tr>
<td><a href="/playlists/{{ p.id }}">{{ p.name }}</a></td>
<td>{% if p.active %}<span class="badge badge-success">active</span>{% else %}<span class="badge badge-muted">paused</span>{% endif %}</td>
<td class="muted mono">{{ p.cron_expr or "unscheduled" }}</td>
<td class="muted">{{ "yes" if p.no_m3u else "no" }}</td>
<td class="actions-cell">
<form method="post" action="/playlists/{{ p.id }}/delete" class="inline"
onsubmit="return confirm('Remove {{ p.name }}? This deletes its rendered config but not any downloaded music.')">
<button type="submit" class="btn btn-sm btn-danger">Remove</button>
</form>
</td>
</tr>
{% else %}
<tr class="empty-row"><td colspan="5">
<div class="empty-state">
<div class="sparkle-inline"><span class="sparkle" style="position:relative;top:0;left:0;"></span></div>
<p class="muted" style="margin:0;">No playlists yet — add your first one below.</p>
</div>
</td></tr>
{% endfor %}
</tbody>
</table>
</div>
<h2>Add a playlist</h2>
<form method="post" action="/playlists">
<label for="name">Name (used as the beets grouping tag)</label>
<input type="text" id="name" name="name" required pattern="[a-z0-9_-]+">
<label for="spotify_url">Spotify playlist URL</label>
<input type="text" id="spotify_url" name="spotify_url" required>
<label for="cron_expr">Cron schedule (5-field, blank = unscheduled/manual-only)</label>
<input type="text" id="cron_expr" name="cron_expr" placeholder="0 1 * * *">
<label><input type="checkbox" name="no_m3u" value="true"> skip M3U generation (e.g. "liked songs")</label>
<button type="submit">Add playlist</button>
</form>
<div class="panel" style="max-width:560px;">
<form method="post" action="/playlists">
<div class="field">
<label for="name">Name (used as the beets grouping tag)</label>
<input type="text" id="name" name="name" required pattern="[a-z0-9_-]+" placeholder="late-night-drive">
</div>
<div class="field">
<label for="spotify_url">Spotify playlist URL</label>
<input type="text" id="spotify_url" name="spotify_url" required placeholder="https://open.spotify.com/playlist/...">
</div>
<div class="field">
<label for="cron_expr">Cron schedule</label>
<input type="text" id="cron_expr" name="cron_expr" placeholder="0 1 * * *">
<span class="hint">5-field cron. Leave blank for unscheduled/manual-only.</span>
</div>
<label class="checkbox-field"><input type="checkbox" name="no_m3u" value="true"> Skip M3U generation (e.g. "liked songs")</label>
<button type="submit" class="btn btn-primary">Add playlist</button>
</form>
</div>
{% endblock %}