admin/pinkudex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
admin
2026-05-26 22:46:00 +02:00
commit 7e2c2ff89c
256 changed files with 51523 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mockups/settings-consolidation-mockup.html
+497
View File
@@ -0,0 +1,497 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Settings Consolidation — 9 → 5 Sections</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
:root {
--color-bg-0: oklch(0.13 0.025 280);
--color-bg-1: oklch(0.17 0.04 285);
--color-fg: oklch(0.97 0.01 280);
--color-fg-dim: oklch(0.72 0.025 280);
--color-fg-muted: oklch(0.55 0.02 280);
--color-glass: color-mix(in oklch, white 6%, transparent);
--color-glass-strong: color-mix(in oklch, white 10%, transparent);
--color-glass-border: color-mix(in oklch, white 14%, transparent);
--color-glass-border-strong: color-mix(in oklch, white 22%, transparent);
--color-cyan: oklch(0.82 0.16 200);
--color-violet: oklch(0.72 0.22 305);
--color-mint: oklch(0.80 0.16 155);
--color-coral: oklch(0.72 0.20 25);
--spacing-card: 15px;
--spacing-card-gap: 9px;
--spacing-section: 15px;
--spacing-label: 7px;
--spacing-chip: 7px;
}
body {
background: var(--color-bg-0);
color: var(--color-fg);
font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
}
.glass { background: var(--color-glass); border: 1px solid var(--color-glass-border); }
.why { font-size: 12px; color: var(--color-fg-muted); }
.label-mono { font-family: ui-monospace, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-fg-muted); }
.pg {
background: oklch(0.10 0.025 280);
border: 1px solid var(--color-glass-border);
border-radius: 12px;
overflow: hidden;
}
.pg-h {
padding: 12px 16px;
background: oklch(0.20 0.04 285);
border-bottom: 1px solid var(--color-glass-border);
font-family: ui-monospace, monospace;
font-size: 12px;
color: var(--color-fg-dim);
display: flex; justify-content: space-between; align-items: center;
}
.pg-h .tag { color: var(--color-cyan); font-weight: 600; }
.pg-body { padding: 18px; }
/* Mini modal frame */
.modal-frame {
background: color-mix(in oklch, var(--color-bg-0) 96%, transparent);
border: 1px solid var(--color-glass-border-strong);
border-radius: 14px;
overflow: hidden;
display: flex; flex-direction: column;
height: 540px;
}
.modal-header {
padding: 14px 20px;
border-bottom: 1px solid var(--color-glass-border);
display: flex; justify-content: space-between; align-items: center;
flex-shrink: 0;
}
.nav-btn {
width: 100%;
display: flex; align-items: center; gap: 10px;
padding: 8px 12px;
border-radius: 8px;
font-size: 13px;
color: var(--color-fg-dim);
background: transparent;
margin-bottom: 2px;
text-align: left;
cursor: pointer;
}
.nav-btn.active {
background: oklch(0.82 0.16 200 / 0.15);
color: var(--color-cyan);
}
.card {
background: var(--color-glass);
border: 1px solid var(--color-glass-border);
border-radius: 16px;
padding: var(--spacing-card);
}
.card h3 {
font-family: ui-monospace, monospace; font-size: 13px;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--color-fg-muted);
margin-bottom: var(--spacing-label);
}
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 0; font-size: 13px; }
.row dt { color: var(--color-fg-dim); }
.row dd { font-family: ui-monospace, monospace; color: var(--color-fg); font-size: 12px; }
.pill {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 0 10px; height: 28px;
border-radius: 6px; font-size: 12px;
border: 1px solid var(--color-glass-border); color: var(--color-fg-dim);
background: var(--color-glass);
}
.pill.active { background: var(--color-cyan); color: black; border-color: transparent; font-weight: 600; }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: 30px; padding: 0 12px; min-width: 100px;
border-radius: 8px; font-size: 12px;
border: 1px solid var(--color-glass-border); background: var(--color-glass);
color: var(--color-fg-dim);
}
.btn-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 8px 0; }
.btn-row + .btn-row { border-top: 1px solid var(--color-glass-border); }
.btn-row .meta { min-width: 0; }
.btn-row .meta .ttl { font-size: 13px; font-weight: 500; }
.btn-row .meta .desc { font-size: 11px; color: var(--color-fg-muted); margin-top: 2px; line-height: 1.4; }
.divider-soft {
border: 0; border-top: 1px solid var(--color-glass-border);
margin: 14px 0 12px;
}
.sub-h { font-family: ui-monospace, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-cyan); margin-bottom: 6px; }
.arrow { color: var(--color-mint); font-family: monospace; }
.nav-side {
width: 200px; padding: 12px;
border-right: 1px solid var(--color-glass-border);
background: oklch(0.13 0.025 280 / 0.5);
overflow-y: auto;
}
.body-pane { padding: var(--spacing-card); overflow-y: auto; flex: 1; }
</style>
</head>
<body class="space-y-6 max-w-[1500px] mx-auto p-6">
<header class="space-y-1">
<h1 class="text-2xl font-semibold tracking-tight">Settings Consolidation · 9 → 5 sections</h1>
<p class="why max-w-[820px]">No feature removed (except optional 3-column layout toggle). Sections merged by purpose: Appearance, Library, Video, Tools, Info.</p>
</header>
<!-- ====================================================================
Side-by-side nav comparison
==================================================================== -->
<div class="grid grid-cols-2 gap-4">
<div class="pg">
<div class="pg-h"><span><span class="tag">BEFORE</span> · 9 sections</span></div>
<div class="pg-body">
<ol class="space-y-1 text-sm">
<li class="nav-btn active">⊟ General <span class="why ml-auto">2 controls</span></li>
<li class="nav-btn">🎨 Theme <span class="why ml-auto">1 control</span></li>
<li class="nav-btn">▦ Display <span class="why ml-auto">3 controls</span></li>
<li class="nav-btn">🗑 Trash <span class="why ml-auto">4 controls</span></li>
<li class="nav-btn">▶ Video Library <span class="why ml-auto">3 sub-blocks</span></li>
<li class="nav-btn">⚒ Maintenance <span class="why ml-auto">7 buttons</span></li>
<li class="nav-btn">💾 Backup <span class="why ml-auto">2 buttons</span></li>
<li class="nav-btn">📊 Library stats <span class="why ml-auto">read-only</span></li>
<li class="nav-btn">🗂 Storage paths <span class="why ml-auto">2 paths · read-only</span></li>
</ol>
</div>
</div>
<div class="pg">
<div class="pg-h"><span><span class="tag" style="color: var(--color-mint);">AFTER</span> · 5 sections</span></div>
<div class="pg-body">
<ol class="space-y-1 text-sm">
<li class="nav-btn active">🎨 Appearance <span class="why ml-auto">colors · grid · fade · sort</span></li>
<li class="nav-btn">🗑 Library <span class="why ml-auto">recycle bin · retention</span></li>
<li class="nav-btn">▶ Video <span class="why ml-auto">paths · transcode · parts</span></li>
<li class="nav-btn">⚒ Tools <span class="why ml-auto">maintenance + backup</span></li>
<li class="nav-btn">📊 Info <span class="why ml-auto">stats + paths</span></li>
</ol>
<p class="why" style="margin-top: 14px;">
Drop the sidebar/3-column layout toggle. Sidebar only — saves ~80 LOC + 1 setting.
</p>
</div>
</div>
</div>
<!-- ====================================================================
Appearance
==================================================================== -->
<div class="pg">
<div class="pg-h"><span><span class="tag" style="color: var(--color-mint);">1 · APPEARANCE</span> · Theme + Display + General's "Default sort"</span></div>
<div class="pg-body">
<div class="modal-frame">
<div class="modal-header">
<div style="display:flex; align-items:center; gap: 8px;">
<span style="color: var(--color-cyan); font-size: 16px;">⚙</span>
<h2 class="text-lg font-semibold">Settings</h2>
</div>
<span style="color: var(--color-fg-muted);">✕</span>
</div>
<div style="display: grid; grid-template-columns: 200px 1fr; flex: 1; min-height: 0;">
<nav class="nav-side">
<button class="nav-btn active">🎨 Appearance</button>
<button class="nav-btn">🗑 Library</button>
<button class="nav-btn">▶ Video</button>
<button class="nav-btn">⚒ Tools</button>
<button class="nav-btn">📊 Info</button>
</nav>
<div class="body-pane">
<section class="card">
<h3>Appearance</h3>
<div class="sub-h">Colors</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px;">
<div>
<div class="label-mono" style="margin-bottom: 4px;">Accent · primary</div>
<div style="display: flex; gap: 6px; align-items: center;">
<span style="width: 28px; height: 28px; border-radius: 6px; background: var(--color-cyan);"></span>
<span class="pill">#8edcff</span>
</div>
</div>
<div>
<div class="label-mono" style="margin-bottom: 4px;">Accent · secondary</div>
<div style="display: flex; gap: 6px; align-items: center;">
<span style="width: 28px; height: 28px; border-radius: 6px; background: var(--color-violet);"></span>
<span class="pill">#bd8eff</span>
</div>
</div>
</div>
<hr class="divider-soft">
<div class="sub-h">Grid</div>
<div class="row"><dt>Grid columns (Landscape)</dt><dd>3</dd></div>
<div class="row"><dt>Grid columns (Portrait)</dt><dd>6</dd></div>
<hr class="divider-soft">
<div class="sub-h">Behavior</div>
<div class="row"><dt>Fade transitions</dt><dd><span class="pill active">On</span></dd></div>
<div class="row"><dt>Fade duration</dt><dd>400 ms</dd></div>
<div class="row"><dt>Default library sort</dt><dd><span class="pill active">Newest</span></dd></div>
</section>
</div>
</div>
</div>
</div>
</div>
<!-- ====================================================================
Library
==================================================================== -->
<div class="pg">
<div class="pg-h"><span><span class="tag" style="color: var(--color-mint);">2 · LIBRARY</span> · Trash & deletion (renamed)</span></div>
<div class="pg-body">
<div class="modal-frame">
<div class="modal-header">
<div style="display:flex; align-items:center; gap: 8px;">
<span style="color: var(--color-cyan); font-size: 16px;">⚙</span>
<h2 class="text-lg font-semibold">Settings</h2>
</div>
<span style="color: var(--color-fg-muted);">✕</span>
</div>
<div style="display: grid; grid-template-columns: 200px 1fr; flex: 1; min-height: 0;">
<nav class="nav-side">
<button class="nav-btn">🎨 Appearance</button>
<button class="nav-btn active">🗑 Library</button>
<button class="nav-btn">▶ Video</button>
<button class="nav-btn">⚒ Tools</button>
<button class="nav-btn">📊 Info</button>
</nav>
<div class="body-pane">
<section class="card">
<h3>Library · file handling</h3>
<div class="sub-h">Trash</div>
<div class="row"><dt>Use recycle bin</dt><dd><span class="pill active">On</span></dd></div>
<div class="row"><dt>Trash retention</dt><dd>30 days</dd></div>
<hr class="divider-soft">
<div class="sub-h">Disk</div>
<div class="row"><dt>Delete files from disk on empty</dt><dd><span class="pill active">On</span></dd></div>
<div class="row"><dt>Superseded retention</dt><dd>30 days</dd></div>
</section>
</div>
</div>
</div>
</div>
</div>
<!-- ====================================================================
Video — unchanged in shape, just renamed
==================================================================== -->
<div class="pg">
<div class="pg-h"><span><span class="tag" style="color: var(--color-mint);">3 · VIDEO</span> · unchanged · paths · transcode · part patterns</span></div>
<div class="pg-body">
<div class="modal-frame">
<div class="modal-header">
<div style="display:flex; align-items:center; gap: 8px;">
<span style="color: var(--color-cyan); font-size: 16px;">⚙</span>
<h2 class="text-lg font-semibold">Settings</h2>
</div>
<span style="color: var(--color-fg-muted);">✕</span>
</div>
<div style="display: grid; grid-template-columns: 200px 1fr; flex: 1; min-height: 0;">
<nav class="nav-side">
<button class="nav-btn">🎨 Appearance</button>
<button class="nav-btn">🗑 Library</button>
<button class="nav-btn active">▶ Video</button>
<button class="nav-btn">⚒ Tools</button>
<button class="nav-btn">📊 Info</button>
</nav>
<div class="body-pane">
<section class="card">
<h3>Video</h3>
<div class="sub-h">Library paths</div>
<div class="glass rounded-lg" style="padding: 8px 10px; font-family: monospace; font-size: 12px; color: var(--color-fg-dim); margin-bottom: 6px;">D:\JAV</div>
<div class="glass rounded-lg" style="padding: 8px 10px; font-family: monospace; font-size: 12px; color: var(--color-fg-dim); margin-bottom: 6px;">E:\JAV-extras</div>
<hr class="divider-soft">
<div class="sub-h">Transcode mode</div>
<div style="display: flex; gap: 6px; flex-wrap: wrap;">
<span class="pill">Off</span><span class="pill active">Always</span><span class="pill">Auto · predicate</span><span class="pill">Auto · runtime</span>
</div>
<hr class="divider-soft">
<div class="sub-h">Part suffix patterns</div>
<ol style="display: flex; flex-direction: column; gap: 6px;">
<li class="glass rounded-lg" style="padding: 6px 10px; font-family: monospace; font-size: 12px; color: var(--color-fg-dim);">-cd{N}</li>
<li class="glass rounded-lg" style="padding: 6px 10px; font-family: monospace; font-size: 12px; color: var(--color-fg-dim);">.part{N}</li>
</ol>
</section>
</div>
</div>
</div>
</div>
</div>
<!-- ====================================================================
Tools — Maintenance + Backup merged
==================================================================== -->
<div class="pg">
<div class="pg-h"><span><span class="tag" style="color: var(--color-mint);">4 · TOOLS</span> · Maintenance + Backup merged · 2 sub-groups</span></div>
<div class="pg-body">
<div class="modal-frame">
<div class="modal-header">
<div style="display:flex; align-items:center; gap: 8px;">
<span style="color: var(--color-cyan); font-size: 16px;">⚙</span>
<h2 class="text-lg font-semibold">Settings</h2>
</div>
<span style="color: var(--color-fg-muted);">✕</span>
</div>
<div style="display: grid; grid-template-columns: 200px 1fr; flex: 1; min-height: 0;">
<nav class="nav-side">
<button class="nav-btn">🎨 Appearance</button>
<button class="nav-btn">🗑 Library</button>
<button class="nav-btn">▶ Video</button>
<button class="nav-btn active">⚒ Tools</button>
<button class="nav-btn">📊 Info</button>
</nav>
<div class="body-pane">
<section class="card">
<h3>Tools</h3>
<div class="sub-h">Maintenance</div>
<div>
<div class="btn-row">
<div class="meta"><div class="ttl">Purge Orphan Files</div><div class="desc">Delete files in library/thumbs that no record references.</div></div>
<button class="btn">Scan</button>
</div>
<div class="btn-row">
<div class="meta"><div class="ttl">Re-parse Codes</div><div class="desc">Re-run JAV-code parser on every cover's stored filename.</div></div>
<button class="btn"># Scan</button>
</div>
<div class="btn-row">
<div class="meta"><div class="ttl">Re-organize Files</div><div class="desc">Move covers into letter buckets on disk.</div></div>
<button class="btn">Scan</button>
</div>
<div class="btn-row">
<div class="meta"><div class="ttl">Regenerate Thumbnails</div><div class="desc">Rebuild grid-preview WebP files from originals.</div></div>
<button class="btn">Scan</button>
</div>
<div class="btn-row">
<div class="meta"><div class="ttl">Find Undersized Covers</div><div class="desc">Scan covers smaller than standard JAV size.</div></div>
<button class="btn">⚲ Scan</button>
</div>
<div class="btn-row">
<div class="meta"><div class="ttl">Find Near-Duplicates</div><div class="desc">Compare perceptual hashes for visual matches.</div></div>
<button class="btn">⧉ Scan</button>
</div>
<div class="btn-row">
<div class="meta"><div class="ttl">Clear Cache</div><div class="desc">Drop the in-memory settings cache.</div></div>
<button class="btn">↻ Clear</button>
</div>
</div>
<hr class="divider-soft">
<div class="sub-h">Backup</div>
<div>
<div class="btn-row" style="border-top: 0;">
<div class="meta"><div class="ttl">Export Database</div><div class="desc">Download a snapshot of library.db.</div></div>
<button class="btn">⬇ Export</button>
</div>
<div class="btn-row">
<div class="meta"><div class="ttl">Import Database</div><div class="desc">Restore from a previous export.</div></div>
<button class="btn">⬆ Import</button>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
<!-- ====================================================================
Info — stats + paths
==================================================================== -->
<div class="pg">
<div class="pg-h"><span><span class="tag" style="color: var(--color-mint);">5 · INFO</span> · Library stats + Storage paths · read-only · 2-col stat layout</span></div>
<div class="pg-body">
<div class="modal-frame">
<div class="modal-header">
<div style="display:flex; align-items:center; gap: 8px;">
<span style="color: var(--color-cyan); font-size: 16px;">⚙</span>
<h2 class="text-lg font-semibold">Settings</h2>
</div>
<span style="color: var(--color-fg-muted);">✕</span>
</div>
<div style="display: grid; grid-template-columns: 200px 1fr; flex: 1; min-height: 0;">
<nav class="nav-side">
<button class="nav-btn">🎨 Appearance</button>
<button class="nav-btn">🗑 Library</button>
<button class="nav-btn">▶ Video</button>
<button class="nav-btn">⚒ Tools</button>
<button class="nav-btn active">📊 Info</button>
</nav>
<div class="body-pane">
<section class="card">
<h3>Info</h3>
<!-- stats in 2-col grid (was vertical stack of 5) -->
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
<div>
<div class="sub-h">Covers</div>
<div style="border-top: 1px solid var(--color-glass-border); padding-top: 6px;">
<div class="row"><dt>Top-level</dt><dd>1,247</dd></div>
<div class="row"><dt>Attached</dt><dd>328</dd></div>
<div class="row"><dt>In trash</dt><dd>12</dd></div>
</div>
</div>
<div>
<div class="sub-h">Entities</div>
<div style="border-top: 1px solid var(--color-glass-border); padding-top: 6px;">
<div class="row"><dt>Actresses</dt><dd>324</dd></div>
<div class="row"><dt>Studios</dt><dd>52</dd></div>
<div class="row"><dt>Series</dt><dd>18</dd></div>
<div class="row"><dt>Genres</dt><dd>14</dd></div>
</div>
</div>
<div>
<div class="sub-h">Tagging</div>
<div style="border-top: 1px solid var(--color-glass-border); padding-top: 6px;">
<div class="row"><dt>Tags</dt><dd>186</dd></div>
<div class="row"><dt>Tag categories</dt><dd>7</dd></div>
<div class="row"><dt>Collections</dt><dd>14</dd></div>
</div>
</div>
<div>
<div class="sub-h">State</div>
<div style="border-top: 1px solid var(--color-glass-border); padding-top: 6px;">
<div class="row"><dt>Watched</dt><dd>432 (35%)</dd></div>
<div class="row"><dt>VIP</dt><dd>89</dd></div>
<div class="row"><dt>Favorite</dt><dd>156</dd></div>
<div class="row"><dt>Owned</dt><dd>42</dd></div>
</div>
</div>
</div>
<hr class="divider-soft">
<div class="sub-h">Disk</div>
<div class="row"><dt>Total cover bytes</dt><dd>14.2 GB</dd></div>
<div class="row"><dt>Imports</dt><dd>2024-09-12 → 2026-04-30</dd></div>
<hr class="divider-soft">
<div class="sub-h">Paths</div>
<div class="row"><dt>Library folder</dt><dd>D:\Pinkudex\library</dd></div>
<div class="row"><dt>Database</dt><dd>D:\Pinkudex\data\library.db</dd></div>
</section>
</div>
</div>
</div>
</div>
</div>
<footer class="text-[11px] text-[var(--color-fg-muted)] mt-6">
Tell me <strong>go</strong> to consolidate, or call out which sections to merge differently.
</footer>
</body>
</html>