From 1b024c5f525c6749121cc3a63596d9b8e9cfa1e5 Mon Sep 17 00:00:00 2001
From: TerrifiedBug <admin@terrifiedbug.com>
Date: Sun, 8 Mar 2026 17:57:35 +0000
Subject: [PATCH] fix: move team and environment selectors from sidebar to
 header bar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two stacked dropdowns in the sidebar looked cluttered and wasted
vertical space. Move both selectors into the main content header bar
where they sit side-by-side with a separator between them. The sidebar
now contains only the logo, separator, and navigation — clean and
aligned with the h-14 header.
---
 src/app/(dashboard)/layout.tsx          |  8 ++++-
 src/components/app-sidebar.tsx          | 48 +------------------------
 src/components/environment-selector.tsx |  4 +--
 src/components/team-selector.tsx        |  2 +-
 4 files changed, 11 insertions(+), 51 deletions(-)

diff --git a/src/app/(dashboard)/layout.tsx b/src/app/(dashboard)/layout.tsx
index cd6f0f22..7962424e 100644
--- a/src/app/(dashboard)/layout.tsx
+++ b/src/app/(dashboard)/layout.tsx
@@ -9,9 +9,12 @@ import { LogOut, ShieldAlert, User } from "lucide-react";
 
 import { useTRPC } from "@/trpc/client";
 import { AppSidebar } from "@/components/app-sidebar";
+import { TeamSelector } from "@/components/team-selector";
+import { EnvironmentSelector } from "@/components/environment-selector";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { ChangePasswordDialog } from "@/components/change-password-dialog";
 import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar";
+import { Separator } from "@/components/ui/separator";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -133,7 +136,10 @@ export default function DashboardLayout({
     <SidebarProvider>
       <AppSidebar />
       <SidebarInset>
-        <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4">
+        <header className="flex h-14 shrink-0 items-center gap-3 border-b px-4">
+          <TeamSelector />
+          <Separator orientation="vertical" className="!h-5" />
+          <EnvironmentSelector />
           <div className="ml-auto flex items-center gap-4">
             <ThemeToggle />
             <DropdownMenu>
diff --git a/src/components/app-sidebar.tsx b/src/components/app-sidebar.tsx
index 0be61261..830fc753 100644
--- a/src/components/app-sidebar.tsx
+++ b/src/components/app-sidebar.tsx
@@ -15,14 +15,9 @@ import {
   Settings,
   ChevronsLeft,
   ChevronsRight,
-  Users,
 } from "lucide-react";
 import { useTRPC } from "@/trpc/client";
-import { TeamSelector } from "@/components/team-selector";
-import { EnvironmentSelector } from "@/components/environment-selector";
 import { Separator } from "@/components/ui/separator";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useTeamStore } from "@/stores/team-store";
 import { useEnvironmentStore } from "@/stores/environment-store";
 
@@ -85,8 +80,7 @@ export function AppSidebar() {
 
   return (
     <Sidebar collapsible="icon">
-      <SidebarHeader className="p-0 group-data-[collapsible=icon]:p-0">
-        {/* Logo row — matches the h-14 main content header for border alignment */}
+      <SidebarHeader className="p-0">
         <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">
@@ -97,46 +91,6 @@ export function AppSidebar() {
           </Link>
         </div>
         <Separator />
-        {/* Context selectors */}
-        <div className="space-y-1.5 p-3 group-data-[collapsible=icon]:hidden">
-          <TeamSelector />
-          <EnvironmentSelector />
-        </div>
-        {/* Collapsed mode: icon buttons with popovers */}
-        <div className="hidden group-data-[collapsible=icon]:flex flex-col items-center gap-1 py-2">
-          <Popover>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <PopoverTrigger asChild>
-                  <button className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground" aria-label="Select team">
-                    <Users className="h-4 w-4" />
-                  </button>
-                </PopoverTrigger>
-              </TooltipTrigger>
-              <TooltipContent side="right">Team</TooltipContent>
-            </Tooltip>
-            <PopoverContent side="right" align="start" className="w-56 p-3">
-              <p className="mb-2 text-xs font-medium text-muted-foreground">Team</p>
-              <TeamSelector />
-            </PopoverContent>
-          </Popover>
-          <Popover>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <PopoverTrigger asChild>
-                  <button className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground" aria-label="Select environment">
-                    <Layers className="h-4 w-4" />
-                  </button>
-                </PopoverTrigger>
-              </TooltipTrigger>
-              <TooltipContent side="right">Environment</TooltipContent>
-            </Tooltip>
-            <PopoverContent side="right" align="start" className="w-56 p-3">
-              <p className="mb-2 text-xs font-medium text-muted-foreground">Environment</p>
-              <EnvironmentSelector />
-            </PopoverContent>
-          </Popover>
-        </div>
       </SidebarHeader>
       <SidebarContent>
         <SidebarGroup>
diff --git a/src/components/environment-selector.tsx b/src/components/environment-selector.tsx
index cac0d4e3..52ee2b29 100644
--- a/src/components/environment-selector.tsx
+++ b/src/components/environment-selector.tsx
@@ -75,7 +75,7 @@ export function EnvironmentSelector() {
   }, [selectedEnvironmentId, systemEnvironment, setIsSystemEnvironment]);
 
   if (envsQuery.isLoading) {
-    return <Skeleton className="h-8 w-full" />;
+    return <Skeleton className="h-8 w-[160px]" />;
   }
 
   if (environments.length === 0 && !systemEnvironment) {
@@ -94,7 +94,7 @@ export function EnvironmentSelector() {
       value={selectedEnvironmentId ?? ""}
       onValueChange={handleEnvironmentChange}
     >
-      <SelectTrigger className="h-8 w-full text-xs">
+      <SelectTrigger className="h-8 w-[160px] text-xs">
         <Layers className="mr-1.5 h-3.5 w-3.5 text-muted-foreground" />
         <SelectValue placeholder="Select environment" />
       </SelectTrigger>
diff --git a/src/components/team-selector.tsx b/src/components/team-selector.tsx
index 497d4832..0a9da3b0 100644
--- a/src/components/team-selector.tsx
+++ b/src/components/team-selector.tsx
@@ -49,7 +49,7 @@ export function TeamSelector() {
 
   return (
     <Select value={selectedTeamId ?? undefined} onValueChange={setSelectedTeamId}>
-      <SelectTrigger className="w-full h-8 text-xs">
+      <SelectTrigger className="h-8 w-[160px] text-xs">
         <Users className="mr-1.5 h-3.5 w-3.5 text-muted-foreground" />
         <SelectValue placeholder="Select team" />
       </SelectTrigger>