') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); refactor(ui): unify sidebar nav/list-row rhythm — shared tokens, 13px muted group headers (#546 PR7) by Astro-Han · Pull Request #652 · apache/maka · GitHub
Skip to content

refactor(ui): unify sidebar nav/list-row rhythm — shared tokens, 13px muted group headers (#546 PR7)#652

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Astro-Han merged 2 commits into from
Jul 8, 2026
Merged

refactor(ui): unify sidebar nav/list-row rhythm — shared tokens, 13px muted group headers (#546 PR7) #652

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8e6d774
refactor(ui): unify sidebar nav/list-row rhythm — shared tokens, 13px…
Astro-Han Jul 8, 2026
b1b8c4a
fix(ui): restore project-heading min-height for click target (#652 Co…
Astro-Han Jul 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 13 additions & 10 deletions apps/desktop/src/renderer/styles/sidebar.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -34,7 +34,8 @@
min-height: 34px;
margin-left: calc(
var(--maka-sidebar-topbar-offset-x) + var(--maka-sidebar-topbar-button-size) +
var(--maka-sidebar-topbar-button-size) + var(--maka-sidebar-topbar-gap) + 8px
var(--maka-sidebar-topbar-button-size) + var(--maka-sidebar-topbar-gap) +
var(--maka-sidebar-topbar-gap)
);
box-sizing: border-box;
-webkit-app-region: drag;
Expand DownExpand Up@@ -120,12 +121,13 @@
align-content: start;
display: grid;
gap: 1px;
padding: var(--space-1) var(--space-1-5);
/* #546 PR7: left/right padding aligned with .maka-list-stackContent
(var(--space-2)) so nav rows and session rows share the same inset. */
padding: var(--space-1) var(--space-2);
}

.maka-nav-row {
width: calc(100% - 12px);
margin-inline: var(--space-1-5);
width: 100%;
display: grid;
grid-template-columns: var(--icon-size) minmax(0, 1fr) auto;
align-items: center;
Expand DownExpand Up@@ -212,17 +214,18 @@
border-top: 0;
}

/* Group label — section header for session groups. Weight-based
hierarchy (not uppercase/letter-spacing) so Chinese labels read
cleanly without artificial tracking. */
/* Group label — section header for session groups. #546 PR7: unified with
project-heading on font-size-ui + muted-foreground + medium so all three
group-header variants (plain label / collapsible toggle / project heading)
share one visual rhythm, distinguished from session rows by color not size. */
.maka-list-group-label {
display: flex;
align-items: baseline;
gap: var(--space-0-5);
padding: 0 var(--space-1-5) var(--space-0-5);
color: var(--muted-foreground);
font-size: var(--font-size-caption);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-ui);
font-weight: var(--font-weight-medium);
font-variant-numeric: tabular-nums;
}

Expand All@@ -237,7 +240,7 @@
border: 0;
border-radius: var(--radius-control);
background: transparent;
color: var(--foreground-secondary);
color: var(--muted-foreground);
font-size: var(--font-size-ui);
font-weight: var(--font-weight-medium);
text-align: left;
Expand Down
12 changes: 6 additions & 6 deletions packages/ui/src/session-sidebar-nav.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,14 +6,14 @@ import { cva } from 'class-variance-authority';

const navRowVariants = cva(
[
'min-h-8 gap-2 rounded-sm border-0 bg-transparent px-1.5 py-0.5',
'min-h-[var(--h-control-lg)] gap-2 rounded-sm border-0 bg-transparent px-1.5 py-0.5',
'text-left text-sm text-[var(--foreground-secondary)]',
'transition-[background-color,color] duration-[var(--duration-base)] ease-[var(--ease-out-strong)]',
'hover:bg-foreground/6 hover:text-foreground',
'data-[active=true]:bg-foreground/9 data-[active=true]:font-semibold data-[active=true]:text-foreground data-[active=true]:shadow-none',
'hover:bg-[var(--state-hover-bg)] hover:text-foreground',
'data-[active=true]:bg-[var(--state-selected-bg)] data-[active=true]:font-semibold data-[active=true]:text-foreground data-[active=true]:shadow-none',
'data-[active=true]:[&_.maka-nav-icon]:text-foreground',
'[&_.maka-nav-count]:bg-foreground/6 [&_.maka-nav-count]:text-[var(--muted-foreground)]',
'data-[active=true]:[&_.maka-nav-count]:bg-foreground/8 data-[active=true]:[&_.maka-nav-count]:text-foreground',
'[&_.maka-nav-count]:bg-[var(--state-hover-bg)] [&_.maka-nav-count]:text-[var(--muted-foreground)]',
'data-[active=true]:[&_.maka-nav-count]:bg-[var(--state-selected-bg)] data-[active=true]:[&_.maka-nav-count]:text-foreground',
'aria-disabled:cursor-not-allowed aria-disabled:opacity-55 aria-disabled:hover:bg-transparent',
'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-55 data-[disabled=true]:hover:bg-transparent',
],
Expand All@@ -36,7 +36,7 @@ const settingsButtonClass =
'w-full min-w-0 gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 ' +
'text-left text-sm font-medium text-[var(--foreground-secondary)] ' +
'transition-[background-color,color] duration-[var(--duration-base)] ease-[var(--ease-out-strong)] ' +
'hover:bg-foreground/6 hover:text-foreground';
'hover:bg-[var(--state-hover-bg)] hover:text-foreground';

const MODULE_NAV_LABEL: Record<ModuleNavId, string> = {
automations: '定时任务',
Expand Down
Loading