ceos/opencode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(tui): fade full-width tab titles (#39409)

Browse source
This commit is contained in:
Kit Langton 2026-07-28 19:38:28 -04:00 • committed by GitHub
commit 38a3dbb4c4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 4 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

5
packages/tui/src/component/session-tabs.tsx
View file

@ -7,6 +7,7 @@ import { useTheme, useThemes } from "../context/theme"
import { adaptiveSessionTabLayout, sessionTabComplete, SESSION_TAB_OVERFLOW_WIDTH } from "../context/session-tabs-model" import { adaptiveSessionTabLayout, sessionTabComplete, SESSION_TAB_OVERFLOW_WIDTH } from "../context/session-tabs-model"
import { createAnimatable, spring } from "../ui/animation" import { createAnimatable, spring } from "../ui/animation"
import { Locale } from "../util/locale" import { Locale } from "../util/locale"
import { stringWidth } from "../util/string-width"
import { TabPulse } from "./tab-pulse" import { TabPulse } from "./tab-pulse"
import { tint } from "../theme/color" import { tint } from "../theme/color"
@ -138,7 +139,9 @@ export function SessionTabs() {
const visibleTitleParts = createMemo(() => Locale.graphemes(visibleTitle())) const visibleTitleParts = createMemo(() => Locale.graphemes(visibleTitle()))
const fadeWidth = () => (hovered() === tab.sessionID ? 6 : 4) const fadeWidth = () => (hovered() === tab.sessionID ? 6 : 4)
const fadedTitleParts = createMemo(() => visibleTitleParts().slice(-fadeWidth())) const fadedTitleParts = createMemo(() => visibleTitleParts().slice(-fadeWidth()))
const titleFades = createMemo(() => visibleTitle() !== title() && availableTitleWidth() > fadeWidth()) const titleFades = createMemo(
() => stringWidth(title()) >= availableTitleWidth() && availableTitleWidth() > fadeWidth(),
)
const foreground = () => { const foreground = () => {
if (hovered() === tab.sessionID) return theme.text.default if (hovered() === tab.sessionID) return theme.text.default
return tint(theme.text.subdued, theme.text.default, selection()) return tint(theme.text.subdued, theme.text.default, selection())