Implement MediaShelf v1
The application the design describes: Flask + SQLite, Plex for library data, Tautulli for watch history, report-only. Structure follows the design's seams. providers/ splits MediaProvider from HistoryProvider, because on this network library data and watch data live on different machines and Jellyfin later will have no Tautulli equivalent. scoring.py implements the reclaim score twice - as a SQL expression for the live grid (weights change on every slider drag, so storing it would mean rewriting thousands of rows per drag) and in Python for CSV export and tests, with a property test over 500 generated rows asserting the two agree. rules.py compiles saved views to parameterized SQL through a field/operator whitelist; nothing user-supplied is ever interpolated. Three properties are enforced by test rather than asserted in prose: - Ingest is idempotent. Three consecutive full scans leave every count and every byte total unchanged. A scanner that double-counts produces a report that looks plausible and is wrong. - Keep marks survive Plex reassigning every rating key in the library. They are keyed on content GUID, scoped per library so the Movies and 4K Movies copies of the same film mark independently. - Every config variable the app reads is declared in docker-compose.yml, so a variable set in Portainer can never silently do nothing. Also found and fixed while verifying against a fake Plex+Tautulli pair: executescript() commits the pending transaction, so migrations needed their BEGIN/COMMIT inside the script; replaceChildren() renders null as the literal text "null"; a hash-only URL change does not reload the document, so deep links needed a hashchange listener; and SQLite ROUND rounds half away from zero where Python rounds half to even. 73 tests, no live server required. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01GVbG48GAXfCZatcmX123Ra
This commit is contained in:
parent
58c2883492
commit
6a557bcdd9
37 changed files with 6486 additions and 85 deletions
194
mediashelf/static/app.css
Normal file
194
mediashelf/static/app.css
Normal file
|
|
@ -0,0 +1,194 @@
|
|||
:root {
|
||||
--bg: #14161a;
|
||||
--panel: #1b1e24;
|
||||
--panel-2: #22262e;
|
||||
--line: #2e333c;
|
||||
--text: #e6e9ef;
|
||||
--dim: #99a1b0;
|
||||
--faint: #6b7280;
|
||||
--accent: #6ea8fe;
|
||||
--warm: #f0b357;
|
||||
--hot: #e8705f;
|
||||
--good: #5dc98a;
|
||||
--kept: #b48ce8;
|
||||
--radius: 8px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--bg: #f6f7f9; --panel: #ffffff; --panel-2: #f0f2f5; --line: #dfe3e9;
|
||||
--text: #1a1d23; --dim: #5b6472; --faint: #8b93a1; --accent: #2f6fd0;
|
||||
}
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg); color: var(--text);
|
||||
font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
h2, h3 { margin: 0 0 .5rem; font-weight: 600; }
|
||||
h3 { font-size: .95rem; }
|
||||
a { color: var(--accent); }
|
||||
|
||||
/* ── topbar ─────────────────────────────────────────────────────── */
|
||||
.topbar {
|
||||
display: flex; align-items: center; gap: 1.5rem;
|
||||
padding: .6rem 1rem; background: var(--panel);
|
||||
border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20;
|
||||
}
|
||||
.brand { display: flex; align-items: center; gap: .5rem; font-weight: 650; }
|
||||
.logo { color: var(--accent); font-size: 1.2rem; }
|
||||
.readonly-badge {
|
||||
font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
|
||||
color: var(--warm); border: 1px solid var(--warm); border-radius: 999px;
|
||||
padding: .1rem .5rem; opacity: .9;
|
||||
}
|
||||
.tabs { display: flex; gap: .15rem; flex: 1; }
|
||||
.tab {
|
||||
background: none; border: 0; color: var(--dim); padding: .4rem .75rem;
|
||||
border-radius: var(--radius); cursor: pointer; font: inherit;
|
||||
}
|
||||
.tab:hover { background: var(--panel-2); color: var(--text); }
|
||||
.tab.active { background: var(--panel-2); color: var(--text); font-weight: 600; }
|
||||
.topbar-right { display: flex; align-items: center; gap: .6rem; }
|
||||
.source-badge { font-size: .78rem; color: var(--dim); }
|
||||
|
||||
/* ── buttons ────────────────────────────────────────────────────── */
|
||||
.btn {
|
||||
background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
|
||||
border-radius: var(--radius); padding: .38rem .75rem; cursor: pointer; font: inherit;
|
||||
}
|
||||
.btn:hover:not(:disabled) { border-color: var(--accent); }
|
||||
.btn:disabled { opacity: .4; cursor: not-allowed; }
|
||||
.btn.small { padding: .22rem .5rem; font-size: .82rem; }
|
||||
.btn.ghost { background: none; }
|
||||
.btn.danger:not(:disabled) { color: var(--hot); border-color: var(--hot); }
|
||||
|
||||
/* ── layout ─────────────────────────────────────────────────────── */
|
||||
main { padding: 1rem; max-width: 1800px; margin: 0 auto; }
|
||||
.view { display: none; }
|
||||
.view.active { display: block; }
|
||||
.card {
|
||||
background: var(--panel); border: 1px solid var(--line);
|
||||
border-radius: var(--radius); padding: .9rem; margin-bottom: 1rem;
|
||||
}
|
||||
.hint { color: var(--dim); font-size: .82rem; margin: .1rem 0 .7rem; }
|
||||
|
||||
/* ── dashboard ──────────────────────────────────────────────────── */
|
||||
.split-hero {
|
||||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
|
||||
background: var(--line); border: 1px solid var(--line);
|
||||
border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem;
|
||||
}
|
||||
.split-cell { background: var(--panel); padding: 1rem 1.1rem; }
|
||||
.split-cell .label {
|
||||
font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--faint);
|
||||
}
|
||||
.split-cell .value { font-size: 1.9rem; font-weight: 650; margin-top: .2rem; }
|
||||
.split-cell .sub { font-size: .78rem; color: var(--dim); }
|
||||
.split-cell.kept .value { color: var(--kept); }
|
||||
.split-cell.available .value { color: var(--good); }
|
||||
|
||||
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
|
||||
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .8rem; }
|
||||
.tile .label { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
|
||||
.tile .value { font-size: 1.2rem; font-weight: 600; margin-top: .15rem; }
|
||||
.tile .sub { font-size: .75rem; color: var(--dim); }
|
||||
|
||||
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
|
||||
.card.wide { grid-column: 1 / -1; }
|
||||
.chart { min-height: 40px; }
|
||||
|
||||
.bar-row { display: grid; grid-template-columns: 150px 1fr 90px; gap: .5rem; align-items: center; margin-bottom: .3rem; font-size: .82rem; }
|
||||
.bar-track { background: var(--panel-2); border-radius: 3px; height: 15px; overflow: hidden; display: flex; }
|
||||
.bar-fill { height: 100%; background: var(--accent); }
|
||||
.bar-fill.never { background: var(--warm); }
|
||||
.bar-fill.kept { background: var(--kept); }
|
||||
.bar-num { text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; }
|
||||
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.stack { display: flex; height: 30px; border-radius: 4px; overflow: hidden; margin-bottom: .5rem; }
|
||||
.stack > div { display: flex; align-items: center; justify-content: center; font-size: .72rem; color: #10131a; font-weight: 600; }
|
||||
.legend { display: flex; gap: 1rem; font-size: .8rem; color: var(--dim); flex-wrap: wrap; }
|
||||
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .3rem; }
|
||||
|
||||
/* ── grid ───────────────────────────────────────────────────────── */
|
||||
.grid-layout { display: grid; grid-template-columns: 250px 1fr; gap: 1rem; align-items: start; }
|
||||
.filter-rail {
|
||||
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
|
||||
padding: .8rem; position: sticky; top: 60px; max-height: calc(100vh - 76px); overflow: auto;
|
||||
}
|
||||
.rail-section { margin-bottom: .9rem; }
|
||||
.rail-label { display: block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: .3rem; }
|
||||
.filter-rail input[type=search], .filter-rail select {
|
||||
width: 100%; background: var(--panel-2); color: var(--text);
|
||||
border: 1px solid var(--line); border-radius: 6px; padding: .32rem .45rem; font: inherit;
|
||||
}
|
||||
.checklist { max-height: 190px; overflow: auto; font-size: .84rem; }
|
||||
.checklist label, .switch { display: flex; align-items: center; gap: .4rem; padding: .1rem 0; cursor: pointer; }
|
||||
.weights label { display: block; font-size: .78rem; color: var(--dim); margin-top: .35rem; }
|
||||
.weights input[type=range] { width: 100%; }
|
||||
|
||||
.grid-main { min-width: 0; }
|
||||
.grid-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; gap: 1rem; flex-wrap: wrap; }
|
||||
.grid-summary { font-size: .85rem; color: var(--dim); }
|
||||
.grid-summary b { color: var(--text); }
|
||||
.grid-actions { display: flex; gap: .4rem; }
|
||||
|
||||
.table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
|
||||
table { border-collapse: collapse; width: 100%; font-size: .84rem; }
|
||||
th, td { padding: .38rem .55rem; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
|
||||
th { position: sticky; top: 0; background: var(--panel-2); font-weight: 600; font-size: .76rem; letter-spacing: .03em; text-transform: uppercase; color: var(--dim); cursor: pointer; user-select: none; z-index: 1; }
|
||||
th.sorted { color: var(--accent); }
|
||||
tbody tr:hover { background: var(--panel-2); }
|
||||
tbody tr.kept-row { opacity: .72; }
|
||||
td.num { text-align: right; font-variant-numeric: tabular-nums; }
|
||||
td.title-cell { max-width: 380px; overflow: hidden; text-overflow: ellipsis; }
|
||||
.title-link { cursor: pointer; }
|
||||
.title-link:hover { text-decoration: underline; }
|
||||
.sub-title { color: var(--faint); font-size: .78rem; }
|
||||
|
||||
.score-pill { display: inline-block; min-width: 44px; text-align: center; padding: .08rem .35rem; border-radius: 4px; font-variant-numeric: tabular-nums; font-weight: 600; }
|
||||
.flag { font-size: .66rem; padding: .04rem .28rem; border-radius: 3px; margin-left: .25rem; border: 1px solid; }
|
||||
.flag.pre_history { color: var(--warm); border-color: var(--warm); }
|
||||
.flag.rejected { color: var(--hot); border-color: var(--hot); }
|
||||
.flag.duplicate { color: var(--accent); border-color: var(--accent); }
|
||||
.flag.kept { color: var(--kept); border-color: var(--kept); }
|
||||
.flag.multi_part, .flag.history_gap { color: var(--faint); border-color: var(--faint); }
|
||||
|
||||
.pager { display: flex; gap: .6rem; align-items: center; justify-content: center; padding: .7rem; color: var(--dim); font-size: .85rem; }
|
||||
|
||||
/* ── drawer ─────────────────────────────────────────────────────── */
|
||||
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 40; }
|
||||
.drawer {
|
||||
position: fixed; top: 0; right: 0; bottom: 0; width: min(680px, 92vw);
|
||||
background: var(--panel); border-left: 1px solid var(--line);
|
||||
z-index: 50; overflow: auto; padding: 1rem;
|
||||
}
|
||||
.drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .8rem; }
|
||||
.kv { display: grid; grid-template-columns: 190px 1fr; gap: .2rem .8rem; font-size: .85rem; margin-bottom: 1rem; }
|
||||
.kv dt { color: var(--dim); }
|
||||
.kv dd { margin: 0; word-break: break-all; }
|
||||
.comp-row { display: grid; grid-template-columns: 110px 1fr 46px; gap: .5rem; align-items: center; font-size: .8rem; margin-bottom: .2rem; }
|
||||
.comp-track { background: var(--panel-2); height: 8px; border-radius: 3px; overflow: hidden; }
|
||||
.comp-fill { height: 100%; background: var(--accent); }
|
||||
|
||||
/* ── misc ───────────────────────────────────────────────────────── */
|
||||
.banner { padding: .55rem 1rem; font-size: .85rem; border-bottom: 1px solid; }
|
||||
.banner.warn { background: rgba(240,179,87,.12); border-color: var(--warm); color: var(--warm); }
|
||||
.banner.info { background: rgba(110,168,254,.1); border-color: var(--accent); color: var(--accent); }
|
||||
.lib-rules label { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; font-size: .87rem; }
|
||||
.mark { display: grid; grid-template-columns: 1fr auto; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--line); align-items: center; }
|
||||
.mark .meta { font-size: .78rem; color: var(--dim); }
|
||||
.empty { color: var(--faint); font-size: .87rem; padding: .6rem 0; }
|
||||
.dupe-group { border-bottom: 1px solid var(--line); padding: .55rem 0; }
|
||||
.dupe-copies { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .82rem; color: var(--dim); margin-top: .2rem; }
|
||||
.scatter { width: 100%; height: 260px; }
|
||||
.scatter circle { cursor: pointer; }
|
||||
@media (max-width: 1000px) {
|
||||
.chart-grid { grid-template-columns: 1fr; }
|
||||
.grid-layout { grid-template-columns: 1fr; }
|
||||
.filter-rail { position: static; max-height: none; }
|
||||
.split-hero { grid-template-columns: 1fr; }
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue