Skip to content

Refine sidebar spacing, alignment, and transitions in the agentic UI #3823

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

Open
shaunandrews wants to merge 1 commit into
base: trunk
Choose a base branch
from
Open

Refine sidebar spacing, alignment, and transitions in the agentic UI #3823

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
21 changes: 12 additions & 9 deletions apps/ui/src/components/sidebar-header/style.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,11 @@
gap: var(--wpds-dimension-padding-sm);
/* Leave room for macOS traffic lights at {20, 20} plus a visible gap.
min-height is tuned so the flex-centered content lines up with the
vertical center of the traffic lights. */
padding: var(--wpds-dimension-padding-sm) var(--wpds-dimension-padding-2xl)
vertical center of the traffic lights. The right padding mirrors the
site rows' trailing inset (list `md` + row `sm`) so the header icon
buttons line up with the rows' status/actions column. */
padding: var(--wpds-dimension-padding-sm)
calc(var(--wpds-dimension-padding-md) + var(--wpds-dimension-padding-sm))
var(--wpds-dimension-padding-sm) 94px;
min-height: 46px;
-webkit-app-region: drag;
Expand All @@ -19,14 +22,12 @@

/* In macOS fullscreen the traffic lights are hidden, so reclaim the
padding that was reserved for them and align the title with the
site list entries below — the site list outer padding is `2xl`, each
site list entries below — the site list outer padding is `md`, each
row carries `xs` of padding-inline, and the site label sits inside a
button with another `sm`, so its text starts at `2xl + xs + sm`
(= `xl + 2*sm`) from the sidebar edge. */
button with another `sm`, so its text starts at `md + xs + sm`
(= `2xl`) from the sidebar edge. */
.fullscreen {
padding-left: calc(
var(--wpds-dimension-padding-xl) + 2 * var(--wpds-dimension-padding-sm)
);
padding-left: var(--wpds-dimension-padding-2xl);
}

.title {
Expand All @@ -43,7 +44,9 @@
.actions {
display: flex;
align-items: center;
gap: var(--wpds-dimension-padding-xs);
/* No gap, matching the site rows' action cluster, so the new-site button
also lands on the same column as the rows' new-chat button. */
gap: 0;
opacity: 0.65;
}

Expand Down
6 changes: 5 additions & 1 deletion apps/ui/src/components/sidebar-layout/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,11 @@ export function SidebarLayout( { children }: { children: ReactNode } ) {
<SidebarCollapsedContext.Provider value={ collapsed }>
<div className={ styles.root }>
<aside
className={ clsx( styles.sidebar, collapsed && styles.sidebarCollapsed ) }
className={ clsx(
styles.sidebar,
collapsed && styles.sidebarCollapsed,
sidebarResize.isResizing && styles.sidebarResizing
) }
style={ sidebarStyle }
>
<SidebarHeader onToggleSidebar={ () => setCollapsed( true ) } />
Expand Down
6 changes: 6 additions & 0 deletions apps/ui/src/components/sidebar-layout/style.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,12 @@
background-color: var(--wpds-color-bg-surface-neutral-weak);
}

/* The width transition is for collapse/expand only — during a drag-resize it
would lag the panel behind the cursor, so it's switched off. */
.sidebarResizing {
transition: none;
}

.sidebarCollapsed {
width: 0;
min-width: 0;
Expand Down
6 changes: 5 additions & 1 deletion apps/ui/src/components/site-list/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -563,12 +563,14 @@ function SiteSection( {
group,
isUnassigned,
isActive,
isSelected,
isOpen,
onToggle,
}: {
group: SiteGroup;
isUnassigned: boolean;
isActive: boolean;
isSelected: boolean;
isOpen: boolean;
onToggle: () => void;
} ) {
Expand All @@ -580,7 +582,8 @@ function SiteSection( {
className={ clsx(
styles.site,
isUnassigned && styles.unassigned,
isActive && styles.siteActive
isActive && styles.siteActive,
isSelected && styles.siteSelected
) }
>
<header className={ styles.siteHeader }>
Expand Down Expand Up @@ -708,6 +711,7 @@ export function SiteList() {
group={ group }
isUnassigned={ group.key === UNASSIGNED_KEY }
isActive={ group.key === activeSiteKey }
isSelected={ !! group.site && group.site.id === activeSiteId }
isOpen={ isOpen( group.key ) }
onToggle={ () => toggleSite( group.key ) }
/>
Expand Down
59 changes: 23 additions & 36 deletions apps/ui/src/components/site-list/style.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,11 @@
--site-list-row-background-hover: rgb(0 0 0 / 4%);
--site-list-row-background-active: rgb(0 0 0 / 7%);

/* Left padding matches the sidebar footer (user-menu) so
the row highlight boxes share the same left edge as the rest of the
sidebar chrome. The right side is smaller: rows carry `sm` of their
own right padding, and `xl + sm` keeps the row icons (site status,
actions) visually aligned with the header's drawer icon. */
padding: var(--wpds-dimension-padding-3xl) var(--wpds-dimension-padding-xl)
var(--wpds-dimension-padding-xl) var(--wpds-dimension-padding-2xl);
/* Tight inline inset so the row highlight boxes stretch close to the
sidebar edges; rows carry `sm` of their own right padding on top of
this. */
padding: var(--wpds-dimension-padding-lg) var(--wpds-dimension-padding-md)
var(--wpds-dimension-padding-xl) var(--wpds-dimension-padding-md);
display: flex;
flex-direction: column;
gap: var(--wpds-dimension-padding-sm);
Expand Down Expand Up @@ -47,12 +45,9 @@
transition: background-color 100ms ease;
}

.siteHeader:hover,
.siteHeader:focus-within {
background-color: var(--site-list-row-background-hover);
}

.siteActive .siteHeader {
/* Only a directly selected site (its settings/overview route) highlights the
row — a selected chat highlights its own row instead. */
.siteSelected .siteHeader {
background-color: var(--site-list-row-background-active);
}

Expand All @@ -74,27 +69,10 @@
display: inline-grid;
place-items: center;
flex-shrink: 0;
inline-size: 0;
margin-inline-end: 0;
opacity: 0;
transform: translateX(-4px) scale(0.75);
transform-origin: left center;
overflow: hidden;
transition: inline-size 150ms ease, margin-inline-end 150ms ease, opacity 150ms ease,
transform 150ms ease;
}

.siteActive .siteIconSlot {
inline-size: 16px;
margin-inline-end: var(--wpds-dimension-padding-xs);
opacity: 1;
transform: translateX(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
.siteIconSlot {
transition: none;
}
/* The app's compact density halves the smaller padding steps (`sm` = 4px),
so `md` (8px) is what actually reads as a gap next to the 16px icon. */
margin-inline-end: var(--wpds-dimension-padding-md);
}

.siteName {
Expand Down Expand Up @@ -347,8 +325,8 @@
margin-bottom: 0;
opacity: 0;
pointer-events: none;
transition: grid-template-rows 160ms ease, margin-top 160ms ease, margin-bottom 160ms ease,
opacity 120ms ease;
transition: grid-template-rows 100ms ease, margin-top 100ms ease, margin-bottom 100ms ease,
opacity 80ms ease;
}

.sessionListFrameOpen {
Expand Down Expand Up @@ -387,13 +365,22 @@
width: 100%;
box-sizing: border-box;
height: var(--site-list-row-height);
/* Indent the chat label to the site title's text column: the title sits
behind the header's `xs` padding, the toggle button's `sm` padding, the
16px icon, and the icon's `md` gap. */
padding: var(--wpds-dimension-padding-xs) var(--wpds-dimension-padding-sm)
var(--wpds-dimension-padding-xs) calc(var(--wpds-dimension-padding-sm) + 24px);
var(--wpds-dimension-padding-xs)
calc(
var(--wpds-dimension-padding-xs) + var(--wpds-dimension-padding-sm) + 16px +
var(--wpds-dimension-padding-md)
);
border-radius: 6px;
background-color: var(--session-link-background);
color: var(--wpds-color-fg-content-neutral-weak);
font-size: var(--wpds-typography-font-size-sm);
font-weight: var(--wpds-typography-font-weight-regular);
/* Snappier than the Button primitive's 100ms color ease-out. */
transition: color 50ms ease;
}

.sessionLinkRunning {
Expand Down
15 changes: 13 additions & 2 deletions apps/ui/src/components/user-menu/style.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,16 @@
/* Pinning to the sidebar bottom is handled by the layout's
`sidebarFooter` wrapper. */
.root {
padding: var(--wpds-dimension-padding-sm) var(--wpds-dimension-padding-2xl)
var(--wpds-dimension-padding-xl) var(--wpds-dimension-padding-2xl);
/* Inline padding tracks the site rows' columns: on the right, list `md` +
row `sm` puts the theme toggle on the rows' status/actions column; on
the left, list `md` + row `xs` minus 2px — half the size difference
between the 20px gravatar and the 16px site icon — centers the gravatar
on the site icon column (the trigger button contributes the same `sm`
as the site toggle, so it cancels out). */
padding: var(--wpds-dimension-padding-sm)
calc(var(--wpds-dimension-padding-md) + var(--wpds-dimension-padding-sm))
var(--wpds-dimension-padding-xl)
calc(var(--wpds-dimension-padding-md) + var(--wpds-dimension-padding-xs) - 2px);
}

.row {
Expand All @@ -29,6 +37,9 @@
.userTrigger {
flex: 1;
font-weight: var(--wpds-typography-font-weight-regular);
/* The site icon's `md` gap minus the gravatar's 2px overhang, so the
user name starts on the same text column as site titles and chats. */
gap: calc(var(--wpds-dimension-padding-md) - 2px);
}

.userName {
Expand Down