Improve ATV handling

This commit is contained in:
ponzischeme89
2026-05-27 07:21:24 +12:00
parent 9291a97df9
commit c3137a2bdf
14 changed files with 2206 additions and 391 deletions
+80 -67
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emby Collection Artwork</title>
<title>EmbyToolkit</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
@@ -13,13 +13,13 @@
--surface2: #1a2030;
--surface3: #222840;
--border: #252d3d;
--border-active: #4a6fff;
--border-active: #14b8a6;
--text: #e8ecf4;
--text-2: #8892a8;
--text-3: #4e5a70;
--accent: #4a6fff;
--accent-h: #6384ff;
--accent-glow: rgba(74,111,255,0.12);
--accent: #14b8a6;
--accent-h: #2dd4bf;
--accent-glow: rgba(20,184,166,0.12);
--green: #34d399;
--green-bg: rgba(52,211,153,0.08);
--red: #f87171;
@@ -31,88 +31,84 @@
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
min-height: 100vh;
min-height: 100svh;
background: var(--bg);
color: var(--text);
font-family: 'DM Sans', sans-serif;
display: flex;
flex-direction: column;
display: grid;
grid-template-columns: 220px 1fr;
height: 100vh;
height: 100svh;
overflow: hidden;
}
.header {
height: 56px;
padding: 0 24px;
/* ── App Nav Sidebar ── */
.app-nav {
display: flex;
flex-direction: column;
background: var(--surface);
border-right: 1px solid var(--border);
overflow: hidden;
}
.app-nav-brand {
padding: 18px 16px;
display: flex;
align-items: center;
gap: 14px;
gap: 10px;
border-bottom: 1px solid var(--border);
background: var(--surface);
flex-shrink: 0;
}
.header-logo {
width: 30px;
height: 30px;
border-radius: 7px;
display: grid;
place-items: center;
.app-nav-logo {
width: 32px; height: 32px;
background: var(--accent);
border-radius: 8px;
display: grid; place-items: center;
color: #fff;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
}
.header h1 {
.app-nav-name {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.02em;
font-weight: 700;
letter-spacing: -0.03em;
}
.header-nav {
.app-nav-items {
list-style: none;
padding: 8px;
flex: 1;
overflow-y: auto;
margin: 0;
}
.app-nav-item {
display: flex;
align-items: center;
gap: 8px;
margin-left: 10px;
}
.nav-link {
padding: 6px 10px;
border-radius: 999px;
border: 1px solid var(--border);
gap: 10px;
padding: 9px 12px;
border-radius: 8px;
color: var(--text-2);
text-decoration: none;
font-size: 12px;
font-weight: 600;
transition: background 0.12s, border-color 0.12s, color 0.12s;
font-size: 13px;
font-weight: 500;
transition: background 0.12s, color 0.12s;
margin-bottom: 1px;
}
.nav-link:hover {
background: var(--surface2);
color: var(--text);
}
.nav-link.active {
background: var(--accent-glow);
border-color: var(--accent);
color: var(--text);
}
.header-status {
margin-left: auto;
.app-nav-item:hover { background: var(--surface2); color: var(--text); }
.app-nav-item.active { background: var(--accent); color: #fff; }
.app-nav-footer {
padding: 14px 16px;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
gap: 7px;
font-size: 12px;
color: var(--text-2);
flex-shrink: 0;
}
.dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 6px var(--green);
}
.dot.off {
background: var(--red);
box-shadow: 0 0 6px var(--red);
width: 7px; height: 7px; border-radius: 50%;
background: var(--green); box-shadow: 0 0 6px var(--green);
}
.dot.off { background: var(--red); box-shadow: 0 0 6px var(--red); }
.body {
flex: 1;
min-height: 0;
display: grid;
grid-template-columns: 320px minmax(0, 1fr);
@@ -904,19 +900,36 @@
</head>
<body>
<header class="header">
<div class="header-logo">TG</div>
<h1>Emby Thumbnail Generator</h1>
<nav class="header-nav">
<a class="nav-link" href="/">Generator</a>
<a class="nav-link active" href="/collections">Collections</a>
<a class="nav-link" href="/airing">Airing</a>
</nav>
<div class="header-status">
<nav class="app-nav">
<div class="app-nav-brand">
<div class="app-nav-logo">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.29 7 12 12 20.71 7"/><line x1="12" y1="22" x2="12" y2="12"/></svg>
</div>
<span class="app-nav-name">EmbyToolkit</span>
</div>
<ul class="app-nav-items">
<li><a class="app-nav-item" href="/">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>
<span>Generator</span>
</a></li>
<li><a class="app-nav-item active" href="/collections">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
<span>Collections</span>
</a></li>
<li><a class="app-nav-item" href="/airing">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="15" rx="2"/><polyline points="17 2 12 7 7 2"/></svg>
<span>Airing</span>
</a></li>
<li><a class="app-nav-item" href="/bulk-assign">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></svg>
<span>Bulk Assign</span>
</a></li>
</ul>
<div class="app-nav-footer">
<span class="dot" id="statusDot"></span>
<span id="statusText">Checking…</span>
</div>
</header>
</nav>
<div class="body">
<aside class="sidebar">