From 4e5b1584c64d36d7183235bb5088a8ac7e569a75 Mon Sep 17 00:00:00 2001 From: Jonathan Sykes Date: Sun, 4 Oct 2026 22:47:33 +0800 Subject: [PATCH] Restore Bento theme integration lost during recovery --- frontend/app.js | 3 ++ frontend/glass-controls.js | 7 ++-- frontend/index.html | 2 + frontend/styles.css | 78 -------------------------------------- frontend/sw.js | 4 ++ 5 files changed, 13 insertions(+), 81 deletions(-) diff --git a/frontend/app.js b/frontend/app.js index 25ff7d4..82a86b2 100755 --- a/frontend/app.js +++ b/frontend/app.js @@ -8669,6 +8669,7 @@ 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'); @@ -8818,6 +8819,8 @@ 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 3d79954..1de7b48 100644 --- a/frontend/glass-controls.js +++ b/frontend/glass-controls.js @@ -1,4 +1,4 @@ -/* Draw legacy control glyphs only in Glass; restore them on theme changes. */ +/* Draw legacy control glyphs in Glass and Bento; restore them on theme changes. */ (function(root) { 'use strict'; const paths = { @@ -45,10 +45,11 @@ } function paint() { scheduled=false;observer.disconnect(); - const active=doc.documentElement.dataset.layout==='glass-stage'; + const bento=doc.documentElement.dataset.layout==='bento-hub'; + const active=bento || 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)) { + 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':''))) { // 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 f75954a..4449bc8 100755 --- a/frontend/index.html +++ b/frontend/index.html @@ -38,6 +38,7 @@ +
@@ -678,6 +679,7 @@ + diff --git a/frontend/styles.css b/frontend/styles.css index fe1407b..613f9fa 100755 --- a/frontend/styles.css +++ b/frontend/styles.css @@ -3345,84 +3345,6 @@ 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 b1756e7..2aada81 100644 --- a/frontend/sw.js +++ b/frontend/sw.js @@ -59,6 +59,9 @@ 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', @@ -105,6 +108,7 @@ const SHELL = [ '/saved-page.js', '/server-backfill.js', '/glass-controls.js', + '/bento-hub.js', '/theme-glass-controls.css', '/saved-page.css', '/party-dj.js',