| 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,7 +2673,7 @@ function LocalSecondaryStatus() { |
| 2673 | } | 2673 | } |
| 2674 | 2674 | ||
| 2675 | return ( | 2675 | return ( |
| 2676 | <SidebarGroup className="px-2 pt-2 pb-0"> | 2676 | <SidebarGroup> |
| 2677 | {connecting.length > 0 ? ( | 2677 | {connecting.length > 0 ? ( |
| 2678 | <Alert | 2678 | <Alert |
| 2679 | variant="default" | 2679 | variant="default" |
| ... | @@ -2966,11 +2966,10 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent( | ... | @@ -2966,11 +2966,10 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent( |
| 2966 | 2966 | ||
| 2967 | return ( | 2967 | return ( |
| 2968 | <SidebarContent | 2968 | <SidebarContent |
| 2969 | className="gap-0" | ||
| 2970 | fixedHeader={ | 2969 | fixedHeader={ |
| 2971 | // Lifted above the stage backdrop, whose fade bleeds below the | 2970 | // Lifted above the stage backdrop, whose fade bleeds below the |
| 2972 | // header and would otherwise paint across the search row's outline. | 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 | <SidebarMenu> | 2973 | <SidebarMenu> |
| 2975 | <SidebarMenuItem> | 2974 | <SidebarMenuItem> |
| 2976 | <CommandDialogTrigger | 2975 | <CommandDialogTrigger |
| ... | @@ -2995,7 +2994,7 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent( | ... | @@ -2995,7 +2994,7 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent( |
| 2995 | } | 2994 | } |
| 2996 | > | 2995 | > |
| 2997 | {showArm64IntelBuildWarning && arm64IntelBuildWarningDescription ? ( | 2996 | {showArm64IntelBuildWarning && arm64IntelBuildWarningDescription ? ( |
| 2998 | <SidebarGroup className="px-2 pt-2 pb-0"> | 2997 | <SidebarGroup> |
| 2999 | <Alert variant="warning" className="rounded-2xl border-warning/40 bg-warning/8"> | 2998 | <Alert variant="warning" className="rounded-2xl border-warning/40 bg-warning/8"> |
| 3000 | <TriangleAlertIcon /> | 2999 | <TriangleAlertIcon /> |
| 3001 | <AlertTitle>Intel build on Apple Silicon</AlertTitle> | 3000 | <AlertTitle>Intel build on Apple Silicon</AlertTitle> |
| ... | @@ -3018,7 +3017,7 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent( | ... | @@ -3018,7 +3017,7 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent( |
| 3018 | </SidebarGroup> | 3017 | </SidebarGroup> |
| 3019 | ) : null} | 3018 | ) : null} |
| 3020 | <LocalSecondaryStatus /> | 3019 | <LocalSecondaryStatus /> |
| 3021 | <SidebarGroup className="px-2 py-2"> | 3020 | <SidebarGroup> |
| 3022 | <div className="mb-1 flex items-center justify-between pl-2 pr-1.5"> | 3021 | <div className="mb-1 flex items-center justify-between pl-2 pr-1.5"> |
| 3023 | <span className="text-xs font-medium text-sidebar-muted-foreground/80">Projects</span> | 3022 | <span className="text-xs font-medium text-sidebar-muted-foreground/80">Projects</span> |
| 3024 | <div className="flex items-center gap-1"> | 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,11 +4391,11 @@ export default function Sidebar() { |
| 4391 | <> | 4391 | <> |
| 4392 | <SidebarChromeHeader isElectron={isElectron} /> | 4392 | <SidebarChromeHeader isElectron={isElectron} /> |
| 4393 | <SidebarContent | 4393 | <SidebarContent |
| 4394 | className="gap-0 min-h-full" | 4394 | className="min-h-full" |
| 4395 | fixedHeader={ | 4395 | fixedHeader={ |
| 4396 | // Lifted above the stage backdrop, whose fade bleeds below the | 4396 | // Lifted above the stage backdrop, whose fade bleeds below the |
| 4397 | // header and would otherwise paint across the search row's outline. | 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 | <SidebarThreadHeader | 4399 | <SidebarThreadHeader |
| 4400 | searchFieldRef={headerSearchRef} | 4400 | searchFieldRef={headerSearchRef} |
| 4401 | hasProjects={projectGroups.length > 0} | 4401 | hasProjects={projectGroups.length > 0} |
| ... | @@ -4554,7 +4554,7 @@ export default function Sidebar() { | ... | @@ -4554,7 +4554,7 @@ export default function Sidebar() { |
| 4554 | </SidebarGroup> | 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 | {isSearchingThreads ? ( | 4558 | {isSearchingThreads ? ( |
| 4559 | threadSearchResults.length > 0 ? ( | 4559 | threadSearchResults.length > 0 ? ( |
| 4560 | <TooltipProvider | 4560 | <TooltipProvider |
apps/web/src/components/settings/SettingsSidebarNav.tsx+1-1
| ... | @@ -234,7 +234,7 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) { | ... | @@ -234,7 +234,7 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) { |
| 234 | return ( | 234 | return ( |
| 235 | <> | 235 | <> |
| 236 | <SidebarContent className="overflow-x-hidden"> | 236 | <SidebarContent className="overflow-x-hidden"> |
| 237 | <SidebarGroup className="gap-2 p-[var(--sidebar-content-inset)]"> | 237 | <SidebarGroup className="gap-2"> |
| 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"> | 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 | <SearchIcon className="size-4 shrink-0 text-sidebar-muted-foreground/80" /> | 239 | <SearchIcon className="size-4 shrink-0 text-sidebar-muted-foreground/80" /> |
| 240 | <SidebarInput | 240 | <SidebarInput |
apps/web/src/components/ui/sidebar.tsx+4-1
| ... | @@ -602,7 +602,10 @@ function SidebarContent({ | ... | @@ -602,7 +602,10 @@ function SidebarContent({ |
| 602 | <div | 602 | <div |
| 603 | // Reordered rows must not pull the viewport to their new position. | 603 | // Reordered rows must not pull the viewport to their new position. |
| 604 | className={cn( | 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 | className, | 609 | className, |
| 607 | )} | 610 | )} |
| 608 | data-sidebar="content" | 611 | data-sidebar="content" |
scripts/lint-restyle-ceiling.ts+1-1
| ... | @@ -8,7 +8,7 @@ import * as NodeURL from "node:url"; | ... | @@ -8,7 +8,7 @@ import * as NodeURL from "node:url"; |
| 8 | // components/ui exports are migrated to variants (see vite.config.ts). This gate keeps the | 8 | // components/ui exports are migrated to variants (see vite.config.ts). This gate keeps the |
| 9 | // count from growing: CI fails when findings exceed the ceiling. Lower the ceiling when you | 9 | // count from growing: CI fails when findings exceed the ceiling. Lower the ceiling when you |
| 10 | // migrate a file, and delete this script when the rule becomes an error. | 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 | const RULE = "shadcn(no-restyle)"; | 13 | const RULE = "shadcn(no-restyle)"; |
| 14 | 14 |