refactor(sidebar): delete switcher caret + palette kbd label + dropdown check column

Three subtractions on the 220px-wide sidebar top bar, where the
company name was being truncated to "OrbitOps ..." inside the button
AND to "Orbit..." inside the open dropdown. Fixing the truncation by
widening the sidebar would be adding space; Jony+Jobs read this as a
signal that too many things were competing for the same width.

Removed:

1. `CaretUpDown` icon at the right edge of the switcher button
   (14px + 8px gap = ~22px). A clickable company name is obviously a
   picker — the same pattern the Mac menu bar and Slack workspace
   switcher use without a perpetual caret attached. The button's
   hover state + the dropdown itself carry the affordance.

2. `<kbd>⌘K</kbd>` label inside the command-palette button beside
   the switcher (~30px). The palette already opens from the global
   ⌘K shortcut, which persists unchanged; the button's `title`
   attribute keeps the shortcut discoverable on hover. Collapsed-
   sidebar mode already rendered the palette button icon-only —
   expanded mode now matches that baseline instead of duplicating
   the accelerator hint.

3. The 16px `w-4` check column inside each dropdown row. The active
   company is already marked by `font-semibold text-foreground`
   against the other rows' `text-muted-foreground` — double-marking
   "this is current" with a ✓ AND bold + colour was the same
   information twice, and it stole width from names that were
   themselves being truncated.

Net effect: switcher button gains ~52px of text width; dropdown rows
gain ~22px. Companies with names like "OrbitOps Solutions" that
previously truncated now render in full at the default sidebar width.

Typecheck + lint pass. Unused `CaretUpDown` / `Check` icon imports
dropped.
This commit is contained in:
ZacharyZhang-NY committed 2026-04-17 21:27:17 -04:00
1 parent 7f4acd0fb7
commit 68f2725918
1 file changed
+2 -7
+2 -7
View File
@@ -1,6 +1,4 @@
import {
CaretUpDown,
Check,
Command,
Gear,
Plus,
@@ -76,7 +74,6 @@ export function SidebarView({
onClick={() => setCompanySwitcherOpen(!companySwitcherOpen)}
>
<span className="min-w-0 flex-1 truncate">{currentCompany?.name ?? t("app.selectCompany")}</span>
<CaretUpDown size={14} className="shrink-0 text-muted-foreground" />
</button>
{companySwitcherOpen && (
<>
@@ -107,12 +104,11 @@ export function SidebarView({
<>
<button
type="button"
className={`flex min-w-0 flex-1 items-center gap-2.5 px-3 py-2 text-left text-[13px] transition hover:bg-muted ${
className={`flex min-w-0 flex-1 items-center px-3 py-2 text-left text-[13px] transition hover:bg-muted ${
company.id === currentCompany?.id ? "font-semibold text-foreground" : "text-muted-foreground"
}`}
onClick={() => { void setCompany(company.id); setCompanySwitcherOpen(false); }}
>
<span className="w-4 shrink-0">{company.id === currentCompany?.id ? <Check size={14} weight="bold" className="text-primary" /> : null}</span>
<span className="min-w-0 flex-1 truncate">{company.name}</span>
</button>
<button
@@ -145,11 +141,10 @@ export function SidebarView({
<button
aria-label={`Open command palette (${isMac ? "⌘" : "Ctrl+"}K)`}
title={`Command palette (${isMac ? "⌘" : "Ctrl+"}K)`}
className="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 flex h-[30px] shrink-0 items-center justify-center gap-1 rounded-lg border border-border px-2 text-muted-foreground transition hover:bg-muted hover:text-foreground"
className="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-lg border border-border text-muted-foreground transition hover:bg-muted hover:text-foreground"
onClick={() => setCommandPaletteOpen(true)}
>
<Command size={14} />
<kbd className="text-[10px] font-medium text-muted-foreground">{isMac ? "⌘K" : "^K"}</kbd>
</button>
</div>
)}