fix(tab-bar): render tab close shortcut as text, not key caps (#10248)

Co-authored-by: Orca <help@stably.ai>
This commit is contained in:
Neil
2026-07-23 18:40:27 -07:00
committed by GitHub
co-authored by Orca
parent aab112933e
commit 52cef48fd7
2 changed files with 13 additions and 18 deletions
@@ -1,7 +1,6 @@
import { X } from 'lucide-react'
import { ShortcutKeyCombo } from '@/components/ShortcutKeyCombo'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { useShortcutKeyDetails } from '@/hooks/useShortcutLabel'
import { useOptionalShortcutLabel } from '@/hooks/useShortcutLabel'
import { translate } from '@/i18n/i18n'
export function EditorFileTabCloseButton({
@@ -13,7 +12,11 @@ export function EditorFileTabCloseButton({
showsSelectionChrome: boolean
onClose: () => void
}): React.JSX.Element {
const closeShortcut = useShortcutKeyDetails('tab.close')
const closeShortcut = useOptionalShortcutLabel('tab.close')
const closeLabel = translate(
'auto.components.tab.bar.EditorFileTabCloseButton.a768f428f1',
'Close tab'
)
return (
<Tooltip>
@@ -43,13 +46,8 @@ export function EditorFileTabCloseButton({
<X className="w-3 h-3" />
</button>
</TooltipTrigger>
<TooltipContent side="bottom" sideOffset={6} className="flex items-center gap-2">
<span>
{translate('auto.components.tab.bar.EditorFileTabCloseButton.a768f428f1', 'Close tab')}
</span>
{closeShortcut.keys.length > 0 && (
<ShortcutKeyCombo keys={closeShortcut.keys} doubleTap={closeShortcut.doubleTap} />
)}
<TooltipContent side="bottom" sideOffset={6}>
{closeShortcut ? `${closeLabel} (${closeShortcut})` : closeLabel}
</TooltipContent>
</Tooltip>
)
@@ -6,7 +6,6 @@ import { useTabAgent } from '@/lib/use-tab-agent'
import { isImeCompositionKeyDown } from '@/lib/ime-composition-keyboard-event'
import { Input } from '@/components/ui/input'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { ShortcutKeyCombo } from '@/components/ShortcutKeyCombo'
import type { TerminalTab } from '../../../../shared/types'
import type { TabDragItemData } from '../tab-group/useTabDragSplit'
import { useAppStore } from '../../store'
@@ -21,7 +20,7 @@ import { preventMiddleButtonDefault } from './middle-button-default-guard'
import { SortableTabContextMenu } from './SortableTabContextMenu'
import { translate } from '@/i18n/i18n'
import { TAB_CONTAINER_WIDTH_CLASSES, TAB_LABEL_WIDTH_CLASSES } from './tab-width-rules'
import { useShortcutKeyDetails } from '@/hooks/useShortcutLabel'
import { useOptionalShortcutLabel } from '@/hooks/useShortcutLabel'
import { useTabStripPointerActivation } from './tab-strip-pointer-activation'
import { TerminalTabLeadingIcon } from './TerminalTabLeadingIcon'
import {
@@ -205,7 +204,8 @@ export default function SortableTab({
onActivate: handleActivate,
disabled: isEditing
})
const closeShortcut = useShortcutKeyDetails('tab.close')
const closeShortcut = useOptionalShortcutLabel('tab.close')
const closeLabel = translate('auto.components.tab.bar.SortableTab.95db5f2f7d', 'Close tab')
const tabTitle = tab.customTitle ?? tab.title
const tabRoot = (
<div
@@ -387,11 +387,8 @@ export default function SortableTab({
<X className="w-3 h-3" />
</button>
</TooltipTrigger>
<TooltipContent side="bottom" sideOffset={6} className="flex items-center gap-2">
<span>{translate('auto.components.tab.bar.SortableTab.95db5f2f7d', 'Close tab')}</span>
{closeShortcut.keys.length > 0 && (
<ShortcutKeyCombo keys={closeShortcut.keys} doubleTap={closeShortcut.doubleTap} />
)}
<TooltipContent side="bottom" sideOffset={6}>
{closeShortcut ? `${closeLabel} (${closeShortcut})` : closeLabel}
</TooltipContent>
</Tooltip>
)}