From 086628ad8a194cf94b016e4ec56b6c8193e00add Mon Sep 17 00:00:00 2001
From: teknium1 <127238744+teknium1@users.noreply.github.com>
Date: Fri, 18 Sep 2026 23:50:35 -0700
Subject: [PATCH] Revert "feat(ui): support icon-only segmented controls"
This reverts commit 2e05fcf52405a6b558ab8f5a814192706206e473.
---
apps/desktop/DESIGN.md | 3 +-
.../components/ui/segmented-control.test.tsx | 51 -------------------
.../src/components/ui/segmented-control.tsx | 14 ++---
3 files changed, 4 insertions(+), 64 deletions(-)
delete mode 100644 apps/desktop/src/components/ui/segmented-control.test.tsx
diff --git a/apps/desktop/DESIGN.md b/apps/desktop/DESIGN.md
index ed32a81e88..45c4da7cd6 100644
--- a/apps/desktop/DESIGN.md
+++ b/apps/desktop/DESIGN.md
@@ -231,8 +231,7 @@ blurred backdrop.
Empty lists hide their search field.
- **`SegmentedControl`** — the choice control for small mutually-exclusive sets
(color mode, tool-call display, usage period). Replaces radio piles and
- pill rows. `iconOnly` renders compact icon buttons with label tooltips and
- accessible names; use `codiconIcon()` for Codicon options.
+ pill rows.
- **`Switch`** (`size="xs"`) — bare, with `aria-label`. No bordered text wrapper.
- **`FanMenu`** (`src/components/ui/fan-menu.tsx`) — one hub control that
fans sibling toggles out on hover: `direction` `vertical` | `horizontal`
diff --git a/apps/desktop/src/components/ui/segmented-control.test.tsx b/apps/desktop/src/components/ui/segmented-control.test.tsx
deleted file mode 100644
index 110acbe9fa..0000000000
--- a/apps/desktop/src/components/ui/segmented-control.test.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { cleanup, fireEvent, render, screen } from '@testing-library/react'
-import { afterEach, describe, expect, it, vi } from 'vitest'
-
-import { codiconIcon } from './codicon'
-import { SegmentedControl } from './segmented-control'
-
-const options = [
- { id: 'list', label: 'List view', icon: codiconIcon('list-unordered') },
- { id: 'cards', label: 'Card view', icon: codiconIcon('extensions') }
-]
-
-afterEach(cleanup)
-
-describe('SegmentedControl', () => {
- it('preserves visible labels by default', () => {
- render()
-
- expect(screen.getByRole('button', { name: 'Card view', pressed: true }).textContent).toBe('Card view')
- expect(screen.getByRole('button', { name: 'List view', pressed: false }).textContent).toBe('List view')
- })
-
- it('keeps accessible labels and selection behavior for icon-only controls', () => {
- const onChange = vi.fn()
- render()
- const list = screen.getByRole('button', { name: 'List view', pressed: false })
- const cards = screen.getByRole('button', { name: 'Card view', pressed: true })
-
- expect(list.textContent).toBe('')
- expect(cards.textContent).toBe('')
- expect(list.querySelector('.codicon-list-unordered')).not.toBeNull()
- expect(cards.querySelector('.codicon-extensions')).not.toBeNull()
- fireEvent.click(list)
- expect(onChange).toHaveBeenCalledExactlyOnceWith('list')
- })
-
- it('retains a visible label when an icon-only option has no icon', () => {
- render()
-
- expect(screen.getByRole('button', { name: 'List view' }).textContent).toBe('List view')
- })
-
- it('does not change a disabled icon-only control', () => {
- const onChange = vi.fn()
- render()
- const list = screen.getByRole('button', { name: 'List view' })
-
- expect(list.disabled).toBe(true)
- fireEvent.click(list)
- expect(onChange).not.toHaveBeenCalled()
- })
-})
diff --git a/apps/desktop/src/components/ui/segmented-control.tsx b/apps/desktop/src/components/ui/segmented-control.tsx
index 4e5a9e625a..45c854ecf2 100644
--- a/apps/desktop/src/components/ui/segmented-control.tsx
+++ b/apps/desktop/src/components/ui/segmented-control.tsx
@@ -1,4 +1,3 @@
-import { Tip } from '@/components/ui/tooltip'
import type { IconComponent } from '@/lib/icons'
import { cn } from '@/lib/utils'
@@ -13,8 +12,6 @@ interface SegmentedControlProps {
value: T
onChange: (id: T) => void
className?: string
- /** Icon buttons retain localized labels for tooltips and screen readers. */
- iconOnly?: boolean
/** Dims the whole track and blocks selection (e.g. gated behind a prerequisite). */
disabled?: boolean
}
@@ -27,7 +24,6 @@ interface SegmentedControlProps {
export function SegmentedControl({
className,
disabled = false,
- iconOnly = false,
onChange,
options,
value
@@ -43,14 +39,12 @@ export function SegmentedControl({
{options.map(({ id, label, icon: Icon }) => {
const active = value === id
- const button = (
+ return (
)
-
- return iconOnly && Icon ? {button} : button
})}
)