style(settings): improve sidebar search input styling (#5459)

This commit is contained in:
Neil 2026-06-15 21:16:14 -07:00 committed by GitHub
parent 95af735062
commit 1b00e7cc79
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 14 additions and 6 deletions

View File

@ -4,7 +4,8 @@ import { ArrowLeft, Search, Server } from 'lucide-react'
import type { RepoIcon } from '../../../../shared/repo-icon'
import type { SettingsNavIcon, SettingsNavInstallStatus } from '@/lib/settings-navigation-types'
import type { GitHubRepositoryIdentity, GlobalSettings } from '../../../../shared/types'
import { useShortcutLabel } from '@/hooks/useShortcutLabel'
import { useShortcutKeyCombos } from '@/hooks/useShortcutLabel'
import { ShortcutKeyCombo } from '../ShortcutKeyCombo'
import { cn } from '@/lib/utils'
import { RepoIconGlyph } from '../repo/repo-icon'
import { RepoForkIndicator } from '../repo/repo-fork-indicator'
@ -137,7 +138,7 @@ export function SettingsSidebar({
// Settings should remain a stable place to reopen the checklist.
const showSetupGuideTopRow =
setupGuideProgress.ready && setupGuideProgress.doneCount < setupGuideProgress.total
const searchShortcutHint = useShortcutLabel('settings.search')
const searchShortcutCombos = useShortcutKeyCombos('settings.search')
const navItemClassName = (isActive: boolean): string =>
cn(
'flex w-full items-center gap-2 rounded-lg px-3 py-1.5 text-left text-[13px] outline-none transition-colors duration-150 focus-visible:ring-[3px] focus-visible:ring-worktree-sidebar-ring/50',
@ -196,12 +197,19 @@ export function SettingsSidebar({
'auto.components.settings.SettingsSidebar.dbceaa8840',
'Search settings'
)}
className="pl-9 pr-14 text-[13px]"
className="bg-background/60 pl-9 pr-14 text-[13px]"
/>
{searchQuery === '' ? (
<kbd className="pointer-events-none absolute right-2 top-1/2 inline-flex -translate-y-1/2 items-center rounded border border-border/60 bg-background/40 px-1.5 py-px font-mono text-[10px] font-medium text-muted-foreground">
{searchShortcutHint}
</kbd>
<span className="pointer-events-none absolute right-2 top-1/2 flex -translate-y-1/2 items-center">
{searchShortcutCombos.map((keys) => (
<ShortcutKeyCombo
key={keys.join('-')}
keys={keys}
className="inline-flex gap-0.5"
separatorClassName="text-[10px] text-muted-foreground"
/>
))}
</span>
) : null}
</div>
</div>