From 855d698486d5ca4f2c595bc085044dfc45625393 Mon Sep 17 00:00:00 2001 From: librelad Date: Sat, 4 Jul 2026 22:50:05 +0100 Subject: [PATCH] feat(marketplace/site): Featured sidebar row + match App Center font/size/icon/bg MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add a Featured sidebar row (gold star, publisher-curated meta.featured), filters to featured apps; only shown when the catalog has any. - Exact App Center font stack + 16px category text (was system-ui/14px). - 'All' (and Featured) render as inline currentColor glyphs so the All icon is white like the WebUI — all.svg uses currentColor and rendered dark as an ; the fixed-blue category icons stay . - Apply --sidebar-bg to the sidebar itself too (double layer, matching the App Center) so the sidebar tint matches instead of showing more aurora through. Co-Authored-By: Claude Fable 5 Signed-off-by: librelad --- .../marketplace/resources/site/index.html | 35 ++++++++++++------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/containers/marketplace/resources/site/index.html b/containers/marketplace/resources/site/index.html index 7efbf69..370d008 100644 --- a/containers/marketplace/resources/site/index.html +++ b/containers/marketplace/resources/site/index.html @@ -59,7 +59,8 @@ background-size: 200px 200px; } body { - font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; + /* Exact App Center font stack (core/theme/css/base.css). */ + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: var(--text-primary); min-height: 100vh; background: transparent; } @@ -84,7 +85,7 @@ border-right: 1px solid var(--sidebar-border); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); } - .sidebar { position: sticky; top: 60px; display: flex; flex-direction: column; } + .sidebar { position: sticky; top: 60px; display: flex; flex-direction: column; background: var(--sidebar-bg); color: var(--sidebar-text); } .apps-search { position: relative; padding: 14px 20px; border-bottom: 1px solid var(--sidebar-border); } .apps-search-icon { position: absolute; left: 32px; top: 50%; transform: translateY(-50%); color: rgba(var(--text-rgb),0.55); pointer-events: none; } .apps-search input { @@ -97,11 +98,11 @@ .cat-list { display: flex; flex-direction: column; } .category { display: flex; align-items: center; gap: 10px; padding: 15px 20px; - cursor: pointer; color: var(--text-secondary); font-size: 14px; text-transform: capitalize; + cursor: pointer; color: var(--text-secondary); font-size: 16px; text-transform: capitalize; border-bottom: 1px solid var(--sidebar-border); transition: background 0.2s, color 0.2s; } .category:hover, .category.active { background: var(--surface-hover); color: var(--text-primary); } - .category img { width: 20px; height: 20px; flex-shrink: 0; } + .category img, .category svg { width: 20px; height: 20px; flex-shrink: 0; } .main-content { flex: 1; min-width: 0; } .status-strip { @@ -234,17 +235,24 @@ return by; } - function catRow(id, label) { - // Real App Center category glyphs (bundled into the site by the install - // hook); misc.svg is the fallback for an unknown category. + // Inline glyphs for the special rows (currentColor, so they follow the row's + // text colour — the App Center renders All/Recommended inline for this reason; + // the category .svg files carry their own fixed blue, so those stay as ). + var GRID_SVG = ''; + var STAR_SVG = ''; + + function catRow(id, label, glyph) { return '
' + - '' + - '' + esc(label) + '
'; + glyph + '' + esc(label) + ''; + } + function catImg(id) { + return ''; } function renderCats() { var list = Object.keys(counts()).sort(); - var rows = [catRow('all', 'All')]; - list.forEach(function (c) { rows.push(catRow(c, c)); }); + var rows = [catRow('all', 'All', GRID_SVG)]; + if (state.apps.some(function (a) { return a.featured; })) rows.push(catRow('__featured__', 'Featured', STAR_SVG)); + list.forEach(function (c) { rows.push(catRow(c, c, catImg(c))); }); cats.innerHTML = rows.join(''); } @@ -284,7 +292,8 @@ var focus = state.focus; // # deep-link → show just that app var shown = state.apps.filter(function (a) { if (focus) return a.slug === focus; - if (state.cat !== 'all' && a.category !== state.cat) return false; + if (state.cat === '__featured__') { if (!a.featured) return false; } + else if (state.cat !== 'all' && a.category !== state.cat) return false; if (q && (a.title + ' ' + a.description + ' ' + a.long_description + ' ' + a.slug).toLowerCase().indexOf(q) < 0) return false; return true; }); @@ -337,7 +346,7 @@ slug: a.applies_when.app, title: a.title || a.applies_when.app, description: m.description || a.why || '', long_description: m.long_description || '', category: (m.category || '').toLowerCase(), trust: a.trust || 'official', - version: a.version || 1, installed: false, + version: a.version || 1, installed: false, featured: !!m.featured, icon: m.icon ? ch + '/payloads/icons/' + a.applies_when.app + '.' + m.icon.split('.').pop() : null }; });