diff --git a/frontend/app.js b/frontend/app.js
index 82a86b2..25ff7d4 100755
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -8669,7 +8669,6 @@ function renderSidebar() {
// the fallback so a first-time visitor still gets the landing.
// Driven from renderSidebar() so every playlist mutation refreshes both.
function renderHomePlaylists() {
- if (window.BentoHub) BentoHub.playlists = () => data.playlists || [];
const wrap = document.getElementById('homePlaylists');
const hero = document.querySelector('#playerPlaceholder .hero');
const grid = document.getElementById('homePlGrid');
@@ -8819,8 +8818,6 @@ function resetListHeaderExtras() {
}
function renderList() {
- // Theme composition follows the real view without changing its controls.
- els.cards.dataset.view = view.type;
resetListHeaderExtras();
{ const ls = $('listSub'); if (ls) ls.textContent = ''; const ps = $('p2pStrip'); if (ps) ps.classList.add('hidden'); }
if (view.type !== 'search') { const sm = $('searchMeta'); if (sm) sm.classList.add('hidden'); }
diff --git a/frontend/glass-controls.js b/frontend/glass-controls.js
index 1de7b48..3d79954 100644
--- a/frontend/glass-controls.js
+++ b/frontend/glass-controls.js
@@ -1,4 +1,4 @@
-/* Draw legacy control glyphs in Glass and Bento; restore them on theme changes. */
+/* Draw legacy control glyphs only in Glass; restore them on theme changes. */
(function(root) {
'use strict';
const paths = {
@@ -45,11 +45,10 @@
}
function paint() {
scheduled=false;observer.disconnect();
- const bento=doc.documentElement.dataset.layout==='bento-hub';
- const active=bento || doc.documentElement.dataset.layout==='glass-stage';
+ const active=doc.documentElement.dataset.layout==='glass-stage';
for(const [parent,record] of tabLabels)if(!active || !parent.isConnected){restoreTab(parent,record);tabLabels.delete(parent);}
for(const record of decorations)if(!active || !record.svg.isConnected){restore(record);decorations.delete(record);}
- if(active) for(const parent of doc.querySelectorAll(selector+(bento?', .service-btn, .np-btn, .ctrl, .empty-icon, .dl-saved-cta, .brand-mark, .upnext-head button':''))) {
+ if(active) for(const parent of doc.querySelectorAll(selector)) {
// Existing SVGs already express the action; only legacy glyphs change.
if(parent.querySelector('svg:not(.glass-control-icon),.legacy-nav-icon'))continue;
for(const node of [...parent.childNodes]) {
diff --git a/frontend/index.html b/frontend/index.html
index 4449bc8..f75954a 100755
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -38,7 +38,6 @@
-
@@ -679,7 +678,6 @@
-
diff --git a/frontend/styles.css b/frontend/styles.css
index 613f9fa..fe1407b 100755
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -3345,6 +3345,84 @@ html[data-layout="contemplative"] .brand-mark {
box-shadow: 0 6px 18px -4px rgba(45, 212, 191, 0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}
+/* --- Bento Hub -------------------------------------------------------------
+ * GitHub-dark-ish with honey-gold accent. Tighter borders give a
+ * "dashboard card" feel throughout.
+ * ------------------------------------------------------------------------- */
+html[data-layout="bento-hub"] {
+ --bg: #0d1117;
+ --bg-1: #13181f;
+ --bg-2: #1c2333;
+ --bg-3: #252d3d;
+ --line: #30363d;
+ --line-soft: #21262d;
+ --text: #e6edf3;
+ --text-2: #8b949e;
+ --text-dim: #484f58;
+ --accent: #eab308;
+ --accent-bright: #fbbf24;
+ --accent-deep: #ca8a04;
+ --accent-glow: rgba(234, 179, 8, 0.4);
+ --radius: 10px;
+ --radius-sm: 6px;
+}
+html[data-layout="bento-hub"] body::before {
+ background:
+ radial-gradient(900px 600px at 18% -10%, rgba(234, 179, 8, 0.06), transparent 60%),
+ radial-gradient(700px 500px at 100% 110%, rgba(234, 179, 8, 0.03), transparent 55%);
+}
+html[data-layout="bento-hub"] .brand-mark {
+ background: linear-gradient(145deg, #fbbf24, #ca8a04);
+ box-shadow: 0 6px 18px -4px rgba(234, 179, 8, 0.45), inset 0 1px 0 rgba(255,255,255,0.25);
+}
+html[data-layout="bento-hub"] .sidebar {
+ background: #13181f;
+ border-right: 1px solid #30363d;
+}
+html[data-layout="bento-hub"] .brand {
+ border-bottom: 1px solid #21262d;
+ padding-bottom: 18px;
+}
+html[data-layout="bento-hub"] .nav-item {
+ border-radius: 6px;
+}
+html[data-layout="bento-hub"] .nav-item.active {
+ background: rgba(234, 179, 8, 0.08);
+ color: #fbbf24;
+}
+html[data-layout="bento-hub"] .nav-item.active::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 3px;
+ height: 60%;
+ background: #eab308;
+ border-radius: 0 3px 3px 0;
+}
+html[data-layout="bento-hub"] .playlist-item {
+ background: #0d1117;
+ border: 1px solid #21262d;
+ border-radius: 8px;
+ margin: 3px 0;
+ padding: 8px 12px;
+}
+html[data-layout="bento-hub"] .playlist-item.active {
+ border-color: #eab308;
+ background: rgba(234, 179, 8, 0.05);
+}
+html[data-layout="bento-hub"] .topbar {
+ background: #13181f;
+ border-bottom: 2px solid #21262d;
+ backdrop-filter: none;
+ -webkit-backdrop-filter: none;
+}
+html[data-layout="bento-hub"] .mini-bar-inner {
+ background: linear-gradient(180deg, #1c2333, #13181f);
+ border-top: 1px solid #30363d;
+}
+
/* Grid-column overrides only apply on screens wide enough for an inline sidebar
(≥861px). Below that the sidebar is position:fixed (out of grid flow) so
a two-column grid would leave .main stranded in the narrow first column. */
diff --git a/frontend/sw.js b/frontend/sw.js
index 2aada81..b1756e7 100644
--- a/frontend/sw.js
+++ b/frontend/sw.js
@@ -59,9 +59,6 @@ const SHELL = [
'/service-ui.css',
'/refresh.css',
'/theme-glass.css',
- '/theme-bento-hub.css',
- '/fonts/PlusJakartaSans-latin.woff2',
- '/fonts/PlusJakartaSans-latin-ext.woff2',
'/theme-glass-panel.css',
'/glass-panel-layout.js',
'/theme-classic.css',
@@ -108,7 +105,6 @@ const SHELL = [
'/saved-page.js',
'/server-backfill.js',
'/glass-controls.js',
- '/bento-hub.js',
'/theme-glass-controls.css',
'/saved-page.css',
'/party-dj.js',
diff --git a/frontend/theme-bento-hub.css b/frontend/theme-bento-hub.css
index 4cb314f..3051c45 100644
--- a/frontend/theme-bento-hub.css
+++ b/frontend/theme-bento-hub.css
@@ -128,3 +128,51 @@ html[data-layout="bento-hub"] .home-pl-thumb:has(.bento-collage) > img { visibil
html[data-layout="bento-hub"] .cards:is([data-view="search"],[data-view="channel"],[data-view="library"]) .card-menu { align-self:flex-end; }
@media(max-width:860px) { html[data-layout="bento-hub"] .bottom-nav { display:flex; } }
html[data-layout="bento-hub"] body.service-open .bottom-nav { display:none; }
+
+/* Library collections — compact rows, deliberate actions and truthful status. */
+html[data-layout="bento-hub"] .cards:not([data-view="search"]):not([data-view="channel"]):not([data-view="library"]) .card { padding:12px; gap:12px; align-items:center; }
+html[data-layout="bento-hub"] :is(.card-menu,.card-del,.card-note-btn,.card-act,.list-icon-btn,.saved-file-action) { position:static; flex:none; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; min-width:44px; margin:0; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--bg-2); color:var(--text-2); opacity:1; }
+html[data-layout="bento-hub"] :is(.card-menu,.list-icon-btn):hover { border-color:var(--accent); color:var(--accent); background:var(--bg-3); }
+html[data-layout="bento-hub"] :is(.saved-clear,.card-del,.saved-file-action.danger,.list-icon-btn.danger) { color:var(--danger-text); background:var(--danger-bg); border-color:transparent; }
+html[data-layout="bento-hub"] :is(.saved-clear,.card-del,.saved-file-action.danger):hover { border-color:var(--danger-text); color:var(--danger-text); }
+html[data-layout="bento-hub"] :is(.saved-storage-summary,.dl-summary) { padding:12px 0 16px; color:var(--text-2); font-size:13px; }
+html[data-layout="bento-hub"] .saved-clear { border-radius:10px; padding:10px 12px; font-size:13px; }
+html[data-layout="bento-hub"] .card.saved-card { grid-template-columns:72px minmax(0,1fr) 96px; min-height:96px; }
+html[data-layout="bento-hub"] .saved-file-actions { gap:8px; }
+html[data-layout="bento-hub"] :is(.card .dur,.upnext-count,.saved-storage-text,.set-stat) { font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums; }
+html[data-layout="bento-hub"] .card.playing::after { content:''; width:6px; height:6px; top:8px; right:8px; border-radius:50%; background:var(--accent-sec); }
+html[data-layout="bento-hub"] .saved-badge { color:var(--accent-sec); background:var(--bg-1); border:1px solid var(--line); }
+html[data-layout="bento-hub"] .pl-offline-badge { color:var(--accent-sec); font-size:11px; }
+html[data-layout="bento-hub"] .batch-bar { background:var(--bg-2); border:1px solid var(--accent); border-radius:10px; margin:0 16px 12px; padding:12px; gap:8px; color:var(--accent); box-shadow:var(--shadow-sm); }
+html[data-layout="bento-hub"] .batch-bar button { min-width:44px; background:var(--bg-1); color:var(--text); border:1px solid var(--line); border-radius:10px; font-size:13px; }
+html[data-layout="bento-hub"] .batch-bar .danger { color:var(--danger-text); background:var(--danger-bg); }
+html[data-layout="bento-hub"] .card.selected { border-color:var(--accent); background:var(--bg-2); }
+html[data-layout="bento-hub"] .batch-check { accent-color:var(--accent); }
+html[data-layout="bento-hub"] .dl-group { margin-bottom:24px; }
+html[data-layout="bento-hub"] .dl-group-title { font:700 16px var(--ui); margin:16px 0 10px; }
+html[data-layout="bento-hub"] .card.dl-row { grid-template-columns:72px minmax(0,1fr); padding:16px; border-radius:10px; gap:12px; }
+html[data-layout="bento-hub"] .card.dl-failed { border-color:color-mix(in srgb,var(--danger) 40%,var(--line)); }
+html[data-layout="bento-hub"] .dl-failed .card-channel { color:var(--danger-text); }
+html[data-layout="bento-hub"] .dl-progress { height:4px; border-radius:999px; overflow:hidden; background:var(--bg-3); }
+html[data-layout="bento-hub"] .dl-bar { background:var(--accent-sec); }
+html[data-layout="bento-hub"] :is(.dl-row,.download-job) .download-action { border-radius:10px; border-color:var(--line); background:var(--bg-2); color:var(--text); font-size:13px; }
+html[data-layout="bento-hub"] :is(.dl-row,.download-job) .download-action[aria-label^="Retry "] { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
+html[data-layout="bento-hub"] :is(.dl-row,.download-job) .download-action.danger { background:var(--danger-bg); color:var(--danger-text); border-color:transparent; }
+html[data-layout="bento-hub"] :is(.dl-row,.download-job) .download-action:hover { border-color:var(--line-bright); filter:brightness(1.08); }
+html[data-layout="bento-hub"] .download-error-details { font-size:12px; }
+html[data-layout="bento-hub"] .download-error-details summary { color:var(--text-2); }
+html[data-layout="bento-hub"] .download-storage { border-top:1px solid var(--line); padding-top:16px; }
+html[data-layout="bento-hub"] :is(.channel-header,.saved-search-item,.p2p-row,.notes-video,.stat-card) { border:1px solid var(--line); border-radius:16px; background:var(--bg-1); padding:16px; }
+html[data-layout="bento-hub"] :is(.channel-header h2,.notes-video-title) { color:var(--text); font:700 18px var(--ui); }
+@media (max-width:640px) {
+ html[data-layout="bento-hub"] .cards:not([data-view="search"]):not([data-view="channel"]):not([data-view="library"]) .card:not(.saved-card):not(.dl-row) { display:grid; grid-template-columns:72px minmax(0,1fr) 44px; gap:10px; }
+ html[data-layout="bento-hub"] .cards:not([data-view="search"]):not([data-view="channel"]):not([data-view="library"]) .card:not(.saved-card):not(.dl-row) .thumb { width:72px; grid-column:1; grid-row:1; }
+ html[data-layout="bento-hub"] .cards:not([data-view="search"]):not([data-view="channel"]):not([data-view="library"]) .card:not(.saved-card):not(.dl-row) .card-info { grid-column:2; grid-row:1; }
+ html[data-layout="bento-hub"] .card-menu { grid-column:3; grid-row:1; }
+ html[data-layout="bento-hub"] :is(.card-del,.card-note-btn) { grid-column:3; }
+ html[data-layout="bento-hub"] .card.saved-card { gap:8px; padding:10px; grid-template-columns:56px minmax(0,1fr) 96px; }
+ html[data-layout="bento-hub"] .saved-card .thumb { width:56px; }
+ html[data-layout="bento-hub"] .card.dl-row { padding:12px; grid-template-columns:56px minmax(0,1fr); }
+ html[data-layout="bento-hub"] .dl-row .thumb { width:56px; }
+ html[data-layout="bento-hub"] .batch-bar { margin-inline:12px; flex-wrap:wrap; }
+}