fix: move team/environment selectors from sidebar to header bar

[TerrifiedBug]

Summary

• Move team and environment selectors from the sidebar into the main content header bar
• Selectors now sit side-by-side with a vertical separator between them — cleaner than two stacked dropdowns
• Sidebar is now just: logo → separator → nav items (much cleaner)
• Sidebar separator aligns perfectly with the header's border-b (both at the bottom of h-14)
• Removes ~40 lines of collapsed-mode popover code that's no longer needed

Test plan

• Team and environment selectors visible in the header bar
• Sidebar shows only logo + nav items, no selectors
• Sidebar separator aligns with main content header border
• Collapsed sidebar logo shows "Vf"
• Selector dropdowns work correctly in the header
• Single-team users see team name (no dropdown)

[greptile-apps]

Greptile Summary

This PR relocates the team and environment selectors from the sidebar into the main content header bar, placing them side-by-side with a vertical separator. The sidebar is simplified to logo → separator → nav items, and ~40 lines of collapsed-mode popover/tooltip code are removed.

Key changes:

• layout.tsx: TeamSelector, a vertical Separator, and EnvironmentSelector added to the left side of the dashboard header
• app-sidebar.tsx: All selector UI removed from SidebarHeader (both expanded stacked-dropdown and collapsed popover variants)
• environment-selector.tsx / team-selector.tsx: Widths updated from w-full to w-[160px] to fit the fixed header slot

Findings:

• Minor transient visual glitch: During initial page load, TeamSelector renders null while teams data loads, causing the separator to appear to float (with EnvironmentSelector skeleton on its right). A loading skeleton in TeamSelector or conditional rendering of the separator would address this.

Confidence Score: 4/5

• Safe to merge — purely a UI layout refactor with no backend or security implications.
• The PR is a clean, safe UI-only refactor that relocates UI components without changing any business logic, tRPC procedures, authorization, or data flow. The single issue identified is a minor transient visual glitch during initial page load (separator appearing to float momentarily) that doesn't affect functionality or correctness, and can be addressed with a straightforward UX improvement.
• No critical files require special attention. Minor consideration: src/app/(dashboard)/layout.tsx has a transient visual issue during load that the author may wish to address.

Important Files Changed

Filename	Overview
src/app/(dashboard)/layout.tsx	Adds TeamSelector, a vertical Separator, and EnvironmentSelector to the main content header. The layout is straightforward. Minor visual issue: TeamSelector returns null during initial load (before teams data arrives), causing the separator to appear with nothing on its left. This is a transient UX glitch, not a functional bug.
src/components/app-sidebar.tsx	Cleanly removes the selector UI (both expanded stacked dropdowns and collapsed popover/tooltip code) from the sidebar header. Resulting sidebar is logo → separator → nav items. No issues found.
src/components/environment-selector.tsx	Width changed from w-full to w-[160px] on both the skeleton and select trigger to fit the fixed-width header slot. No logic changes; loading skeleton correctly reflects the fixed width.
src/components/team-selector.tsx	Width changed from w-full to w-[160px] on the select trigger to match the header layout. No loading skeleton was added (unlike EnvironmentSelector), which contributes to the transient visual issue noted in layout.tsx.

_{Last reviewed commit: 1b024c5}

[greptile-apps]

TeamSelector returns null when teams.length === 0 (which occurs during the initial load, before teamsQuery.data arrives). During that window, the header renders [null] | Separator | [EnvironmentSelector skeleton] — the separator appears to float with nothing on its left side.

The isTeamless guard only activates after teamsQuery.isSuccess && teams.length === 0, so the full sidebar layout (including this header) is visible while teams are still loading.

Consider one of these fixes:

Option 1: Conditionally render the separator only when TeamSelector produces content

<TeamSelector />
{teams.length > 0 ? (
  <Separator orientation="vertical" className="!h-5" />
) : null}
<EnvironmentSelector />

Option 2: Add a loading skeleton to TeamSelector (mirroring EnvironmentSelector) so it occupies space during load, making the transition smoother.

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/app/(dashboard)/layout.tsx
Line: 139-142

Comment:
`TeamSelector` returns `null` when `teams.length === 0` (which occurs during the initial load, before `teamsQuery.data` arrives). During that window, the header renders `[null] | Separator | [EnvironmentSelector skeleton]` — the separator appears to float with nothing on its left side.

The `isTeamless` guard only activates after `teamsQuery.isSuccess && teams.length === 0`, so the full sidebar layout (including this header) is visible while teams are still loading.

Consider one of these fixes:

**Option 1: Conditionally render the separator only when TeamSelector produces content**
```tsx
<TeamSelector />
{teams.length > 0 ? (
  <Separator orientation="vertical" className="!h-5" />
) : null}
<EnvironmentSelector />
```

**Option 2: Add a loading skeleton to TeamSelector** (mirroring `EnvironmentSelector`) so it occupies space during load, making the transition smoother.

How can I resolve this? If you propose a fix, please make it concise.