| author |  Julius Marminge <julius0216@outlook.com> 2026-09-22 12:22:17-07:00 |
| committer |  GitHub <noreply@github.com> 2026-09-22 12:22:17-07:00 |
| log | 016cdb9622359967afe80a27c538056ef1e7b857 |
| tree | 64f034f4220057fe0548556890bb04f5360f62ac |
| parent | da89e102f80b7ef6c8166d41cc202035f6ad75a4 |
| signature | Signed by PGP key B5690EEEBB952194 |
refactor(web): stacked sidebar groups share one inset (#13037)
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>5 files changed, 13 insertions(+), 11 deletions(-)
apps
web
src
components
scripts
apps/web/src/components/LegacySidebar.tsx+4-5
| ... | ... | @@ -2673,7 +2673,7 @@ function LocalSecondaryStatus() { |
| 2673 | 2673 | } |
| 2674 | 2674 | |
| 2675 | 2675 | return ( |
| 2676 | <SidebarGroup className="px-2 pt-2 pb-0"> | |
| 2676 | <SidebarGroup> | |
| 2677 | 2677 | {connecting.length > 0 ? ( |
| 2678 | 2678 | <Alert |
| 2679 | 2679 | variant="default" |
| ... | ... | @@ -2966,11 +2966,10 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent( |
| 2966 | 2966 | |
| 2967 | 2967 | return ( |
| 2968 | 2968 | <SidebarContent |
| 2969 | className="gap-0" | |
| 2970 | 2969 | fixedHeader={ |
| 2971 | 2970 | // Lifted above the stage backdrop, whose fade bleeds below the |
| 2972 | 2971 | // header and would otherwise paint across the search row's outline. |
| 2973 | <SidebarGroup className="relative z-[1] px-2 pt-2 pb-1"> | |
| 2972 | <SidebarGroup className="z-[1]"> | |
| 2974 | 2973 | <SidebarMenu> |
| 2975 | 2974 | <SidebarMenuItem> |
| 2976 | 2975 | <CommandDialogTrigger |
| ... | ... | @@ -2995,7 +2994,7 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent( |
| 2995 | 2994 | } |
| 2996 | 2995 | > |
| 2997 | 2996 | {showArm64IntelBuildWarning && arm64IntelBuildWarningDescription ? ( |
| 2998 | <SidebarGroup className="px-2 pt-2 pb-0"> | |
| 2997 | <SidebarGroup> | |
| 2999 | 2998 | <Alert variant="warning" className="rounded-2xl border-warning/40 bg-warning/8"> |
| 3000 | 2999 | <TriangleAlertIcon /> |
| 3001 | 3000 | <AlertTitle>Intel build on Apple Silicon</AlertTitle> |
| ... | ... | @@ -3018,7 +3017,7 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent( |
| 3018 | 3017 | </SidebarGroup> |
| 3019 | 3018 | ) : null} |
| 3020 | 3019 | <LocalSecondaryStatus /> |
| 3021 | <SidebarGroup className="px-2 py-2"> | |
| 3020 | <SidebarGroup> | |
| 3022 | 3021 | <div className="mb-1 flex items-center justify-between pl-2 pr-1.5"> |
| 3023 | 3022 | <span className="text-xs font-medium text-sidebar-muted-foreground/80">Projects</span> |
| 3024 | 3023 | <div className="flex items-center gap-1"> |
apps/web/src/components/Sidebar.tsx+3-3
| ... | ... | @@ -4391,11 +4391,11 @@ export default function Sidebar() { |
| 4391 | 4391 | <> |
| 4392 | 4392 | <SidebarChromeHeader isElectron={isElectron} /> |
| 4393 | 4393 | <SidebarContent |
| 4394 | className="gap-0 min-h-full" | |
| 4394 | className="min-h-full" | |
| 4395 | 4395 | fixedHeader={ |
| 4396 | 4396 | // Lifted above the stage backdrop, whose fade bleeds below the |
| 4397 | 4397 | // header and would otherwise paint across the search row's outline. |
| 4398 | <SidebarGroup className="relative z-[1] p-[var(--sidebar-content-inset)] pt-1"> | |
| 4398 | <SidebarGroup className="z-[1]"> | |
| 4399 | 4399 | <SidebarThreadHeader |
| 4400 | 4400 | searchFieldRef={headerSearchRef} |
| 4401 | 4401 | hasProjects={projectGroups.length > 0} |
| ... | ... | @@ -4554,7 +4554,7 @@ export default function Sidebar() { |
| 4554 | 4554 | </SidebarGroup> |
| 4555 | 4555 | } |
| 4556 | 4556 | > |
| 4557 | <SidebarGroup className="ps-[calc(var(--sidebar-content-inset)+1px)] pe-[var(--sidebar-content-inset)] pb-1 pt-0 flex-1"> | |
| 4557 | <SidebarGroup className="flex-1 ps-[calc(var(--sidebar-content-inset)+1px)]"> | |
| 4558 | 4558 | {isSearchingThreads ? ( |
| 4559 | 4559 | threadSearchResults.length > 0 ? ( |
| 4560 | 4560 | <TooltipProvider |
apps/web/src/components/settings/SettingsSidebarNav.tsx+1-1
| ... | ... | @@ -234,7 +234,7 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) { |
| 234 | 234 | return ( |
| 235 | 235 | <> |
| 236 | 236 | <SidebarContent className="overflow-x-hidden"> |
| 237 | <SidebarGroup className="gap-2 p-[var(--sidebar-content-inset)]"> | |
| 237 | <SidebarGroup className="gap-2"> | |
| 238 | 238 | <div className="flex h-8 items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium text-sidebar-muted-foreground hover:bg-sidebar-row-hover hover:text-sidebar-foreground"> |
| 239 | 239 | <SearchIcon className="size-4 shrink-0 text-sidebar-muted-foreground/80" /> |
| 240 | 240 | <SidebarInput |
apps/web/src/components/ui/sidebar.tsx+4-1
| ... | ... | @@ -602,7 +602,10 @@ function SidebarContent({ |
| 602 | 602 | <div |
| 603 | 603 | // Reordered rows must not pull the viewport to their new position. |
| 604 | 604 | className={cn( |
| 605 | "flex w-full min-w-0 flex-col gap-2 [overflow-anchor:none] group-data-[collapsible=icon]:overflow-hidden", | |
| 605 | // Stacked groups share one inset between them instead of doubling | |
| 606 | // it, including across the fixed header's boundary. | |
| 607 | "flex w-full min-w-0 flex-col [overflow-anchor:none] group-data-[collapsible=icon]:overflow-hidden [&>[data-sidebar=group]+[data-sidebar=group]]:pt-0", | |
| 608 | fixedHeader && "[&>[data-sidebar=group]:first-child]:pt-0", | |
| 606 | 609 | className, |
| 607 | 610 | )} |
| 608 | 611 | data-sidebar="content" |
scripts/lint-restyle-ceiling.ts+1-1
| ... | ... | @@ -8,7 +8,7 @@ import * as NodeURL from "node:url"; |
| 8 | 8 | // components/ui exports are migrated to variants (see vite.config.ts). This gate keeps the |
| 9 | 9 | // count from growing: CI fails when findings exceed the ceiling. Lower the ceiling when you |
| 10 | 10 | // migrate a file, and delete this script when the rule becomes an error. |
| 11 | export const RESTYLE_CEILING = 812; | |
| 11 | export const RESTYLE_CEILING = 793; | |
| 12 | 12 | |
| 13 | 13 | const RULE = "shadcn(no-restyle)"; |
| 14 | 14 |