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:
1 parent
7f4acd0fb7
commit
68f2725918
1 file changed
+2
-7
@@ -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>
|
||||
)}
|
||||
|
||||
Reference in new issue
Block a user