-
[OPIK-6201] [FE] fix: navigation sidebar styling pass (#6495)
frostbyte_neo 发布于
2026-04-28 13:44:31 +00:00 - [OPIK-6201] [FE] fix: navigation sidebar styling pass
Rework the v2 sidebar to match Figma's IA redesign (file
MHqvEwnuCHBLVvN9ilmhw8 — primary nodes 551-16239, 551-16290,
570-1453, 570-1439, 570-1438, 583-3492).Project sidebar (expanded):
- 12px Project label, light-slate icons in body and muted-slate
icons + text in the bottom workspace nav items - Project trigger spacing matches the Figma trigger frame
(gap-1.5, px-1 py-0.5, items-stretch column, items-end label row) - 24px GH star button with restyled count tag
Project selector popover:
- 280px width, 32px row height for title / search / items / action
- Active item: removed checkmark, ellipsis always visible, hover-only
on others, and reserves pr-9 so a long active name truncates without
being covered - Light-slate action and pencil icons; project options menu rows
collapse to 32px (h-8 px-3 py-1.5)
Workspace sidebar:
- 32x32 gray-square thumbnail with the workspace initial,
trigger structure mirrors the project trigger (Workspace mini-label
inside the trigger, items-end "Workspace + chevron" row) - Hug-content "Back to project" button (24px, rounded-sm) using
the existing size=2xs Button - Collapsed Back uses size=icon-2xs (24x24) with rounded-sm
- Workspace selector hoisted out of the inner overflow wrapper so its
chevron overhang doesn't get clipped, matching the project sidebar
structure - Added a Separator between the workspace selector and the menu list
Collapsed sidebars:
- 48px width
- Inline collapse button on expanded; always-visible 14x14 expand
button anchored to the bottom-right of the logo when collapsed - Collapsed thumbnails get a 14x14 chevron overlay (project + workspace),
using a new icon-4xs Button size in the design system to share
consistent styling across the three micro-buttons - Plain PanelLeft icon for both expand and collapse buttons (no
directional chevron) per Figma 581-1580 / 583-3492 - Collapsed menu items render as 24x24 squares (size-6) with
light-slate icon for muted (Workspace, Configuration) items
and foreground for the rest - Body padding stays p-3; logo is anchored absolute at left:15
with vertical-center, so it doesn't jump on toggle, and the
collapse button fades in via animate-in fade-in (100ms) so it
doesn't flash inside the still-narrow sidebar
Shared / global:
- New icon-4xs Button size (14x14 / 10px icon / 4px radius) reused
for the three micro-buttons (expand-near-logo, project chevron,
workspace chevron); replaces the previous arbitrary size-[18px]- rounded inline classes
- Lighter SearchInput icon (text-light-slate)
- Repaired a long-standing typo in --muted-slate (mixed
comma/space syntax inside hsl() since #3133, 2025-09-02), which
caused every text-muted-slate site-wide to silently render as
text-foreground. Affects ~270 files; they now render in the
intended slate-500 tone.
Co-Authored-By: Claude Opus 4.7 (1M context) noreply@anthropic.com
- [OPIK-6165] [FE] fix: workspaces menu styling in breadcrumbs
Restyle the breadcrumb workspace switcher to match Figma:
- 280px popover, no inner separators
- 32px-tall title / list / Manage rows
- Active item uses primary-100 / primary tone
- Org-settings button removed from the title row
- "Manage workspaces" rendered as a ghost row with a leading
light-slate icon
Note: the same dropdown content also lives in
plugins/comet/SidebarWorkspaceSelector.tsx (used by the v2 sidebar)
and was updated as part of the OPIK-6201 sidebar pass; further
polish on this breadcrumb-side file is the goal of this ticket.Co-Authored-By: Claude Opus 4.7 (1M context) noreply@anthropic.com
-
chore: retrigger PR lint
-
[OPIK-6165] [FE] fix: workspace menu design QA polish
Iterates on Design team feedback for the workspaces popover.
- Align search icon/text with Manage workspaces icon/text. Tighten
the search row's wrapper from px-1 (4px) to px-0.5 (2px) so the
search icon lands at 12px and the placeholder text at 34px from
the popover content edge — matching the Manage workspaces row. - Manage workspaces hover now matches the "+ New project" row in
the project selector. Replace the ghost Button (no bg on hover)
with a plain styled usinghover:bg-primary-foreground. - Hover on a selected org/workspace row now shifts the bg from
primary-100 to secondary (a slightly darker blue) instead of
falling back to the gray focus:bg-primary-foreground from the
base DropdownMenuItem styles.
Co-Authored-By: Claude Opus 4.7 (1M context) noreply@anthropic.com
- [OPIK-6201] [FE] fix: sidebar design QA round 2
Adds variant/size CVA shape to DropdownMenu* and ListAction primitives
to standardize popover dimensions and selected-state styling. Applies
the new primitives across the sidebar, project selector, and workspace
menu, plus design feedback fixes: chevron alignment, divider insertions,
search/icon alignment, ellipsis hover, collapsed-mode tooltips, list
gap, and inset dividers.- chore(fe): tailwind class-order lint autofix
Co-authored-by: Claude Opus 4.7 (1M context) noreply@anthropic.com
下载附件