Skip to content

fix: sidebar layout polish and settings tab separators #74

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
TerrifiedBug merged 1 commit into from
Mar 8, 2026
Merged

fix: sidebar layout polish and settings tab separators #74

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
6 changes: 3 additions & 3 deletions src/app/(dashboard)/settings/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3400,12 +3400,12 @@ export default function SettingsPage() {
)}
{isSuperAdmin && (
<>
{isTeamAdmin && <Separator orientation="vertical" className="h-5" />}
{isTeamAdmin && <Separator orientation="vertical" className="h-5 bg-muted-foreground/25" />}
<TabsTrigger value="auth">
<Shield className="mr-2 h-4 w-4" />
Auth
</TabsTrigger>
<Separator orientation="vertical" className="h-5" />
<Separator orientation="vertical" className="h-5 bg-muted-foreground/25" />
<TabsTrigger value="users">
<Users className="mr-2 h-4 w-4" />
Users
Expand All @@ -3414,7 +3414,7 @@ export default function SettingsPage() {
<Layers className="mr-2 h-4 w-4" />
Teams
</TabsTrigger>
<Separator orientation="vertical" className="h-5" />
<Separator orientation="vertical" className="h-5 bg-muted-foreground/25" />
<TabsTrigger value="fleet">
<Server className="mr-2 h-4 w-4" />
Fleet
Expand Down
25 changes: 14 additions & 11 deletions src/components/app-sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,20 +85,23 @@ export function AppSidebar() {

return (
<Sidebar collapsible="icon">
<SidebarHeader className="px-4 pt-3 pb-0 group-data-[collapsible=icon]:px-2">
<Link href="/" className="flex items-center gap-2 py-1">
<span className="text-xl tracking-tight group-data-[collapsible=icon]:hidden">
<span className="font-bold">Vector</span>
<span className="font-light">Flow</span>
</span>
<span className="hidden text-xl font-bold group-data-[collapsible=icon]:block">V</span>
</Link>
<Separator className="my-2 group-data-[collapsible=icon]:hidden" />
<div className="px-3 pb-3 space-y-2 group-data-[collapsible=icon]:hidden">
<SidebarHeader className="p-0 group-data-[collapsible=icon]:p-0">
{/* Logo row — matches the h-14 main content header for border alignment */}
<div className="flex h-14 items-center px-4 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-2">
<Link href="/" className="flex items-center gap-2">
<span className="text-xl tracking-tight group-data-[collapsible=icon]:hidden">
<span className="font-bold">Vector</span>
<span className="font-light">Flow</span>
</span>
<span className="hidden text-xl group-data-[collapsible=icon]:block"><span className="font-bold">V</span><span className="font-light">f</span></span>
</Link>
</div>
<Separator />
{/* Context selectors */}
<div className="space-y-1.5 p-3 group-data-[collapsible=icon]:hidden">
<TeamSelector />
<EnvironmentSelector />
</div>
<Separator className="group-data-[collapsible=icon]:hidden" />
{/* Collapsed mode: icon buttons with popovers */}
<div className="hidden group-data-[collapsible=icon]:flex flex-col items-center gap-1 py-2">
<Popover>
Expand Down
4 changes: 2 additions & 2 deletions src/components/environment-selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export function EnvironmentSelector() {
}, [selectedEnvironmentId, systemEnvironment, setIsSystemEnvironment]);

if (envsQuery.isLoading) {
return <Skeleton className="h-9 w-[180px]" />;
return <Skeleton className="h-8 w-full" />;
}

if (environments.length === 0 && !systemEnvironment) {
Expand All @@ -94,7 +94,7 @@ export function EnvironmentSelector() {
value={selectedEnvironmentId ?? ""}
onValueChange={handleEnvironmentChange}
>
<SelectTrigger className="h-8 w-[180px] text-xs">
<SelectTrigger className="h-8 w-full text-xs">
<Layers className="mr-1.5 h-3.5 w-3.5 text-muted-foreground" />
<SelectValue placeholder="Select environment" />
</SelectTrigger>
Expand Down
18 changes: 6 additions & 12 deletions src/components/team-selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,24 +40,18 @@ export function TeamSelector() {
// Single team — show name only, no dropdown
if (teams.length === 1) {
return (
<div className="flex items-center gap-2 rounded-md border bg-card px-3 py-2">
<div className="flex h-6 w-6 items-center justify-center rounded bg-primary/10 text-primary">
<Users className="h-3.5 w-3.5" />
</div>
<span className="text-sm font-medium truncate">{teams[0].name}</span>
<div className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm">
<Users className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
<span className="font-medium truncate">{teams[0].name}</span>
</div>
);
}

return (
<Select value={selectedTeamId ?? undefined} onValueChange={setSelectedTeamId}>
<SelectTrigger className="w-full h-auto border-sidebar-border bg-sidebar px-3 py-2 text-sm">
<div className="flex items-center gap-2">
<div className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-primary/10 text-primary">
<Users className="h-3.5 w-3.5" />
</div>
<SelectValue placeholder="Select team" />
</div>
<SelectTrigger className="w-full h-8 text-xs">
<Users className="mr-1.5 h-3.5 w-3.5 text-muted-foreground" />
<SelectValue placeholder="Select team" />
</SelectTrigger>
<SelectContent>
{teams.map((team) => (
Expand Down
Loading