diff --git a/src/web-ui/src/app/scenes/shell/ShellNav.scss b/src/web-ui/src/app/scenes/shell/ShellNav.scss index bcffa2658..9271dac63 100644 --- a/src/web-ui/src/app/scenes/shell/ShellNav.scss +++ b/src/web-ui/src/app/scenes/shell/ShellNav.scss @@ -327,12 +327,19 @@ min-width: 0; } - &__terminal-item { + &__terminal-item-row { display: flex; align-items: center; gap: 6px; width: 100%; - height: 32px; + } + + &__terminal-item { + display: flex; + flex-direction: column; + gap: 0; + width: 100%; + min-height: 32px; padding: 0 $size-gap-2; border: none; border-radius: $size-radius-base; @@ -343,10 +350,17 @@ font-size: var(--font-size-sm); font-weight: 400; position: relative; + justify-content: center; transition: color $motion-fast $easing-standard, background $motion-fast $easing-standard; + &.has-cwd { + padding-top: 4px; + padding-bottom: 4px; + justify-content: center; + } + &:hover { color: var(--color-text-primary); background: var(--element-bg-medium, var(--element-bg-soft)); @@ -447,6 +461,17 @@ } } + &__terminal-cwd { + display: block; + padding-left: 20px; + font-size: var(--font-size-xxs); + line-height: 1.3; + color: var(--color-text-muted); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + &__cmd-indicator { flex-shrink: 0; padding: 2px 5px; diff --git a/src/web-ui/src/app/scenes/shell/components/ShellNavEntryItem.tsx b/src/web-ui/src/app/scenes/shell/components/ShellNavEntryItem.tsx index db180a449..abff6446d 100644 --- a/src/web-ui/src/app/scenes/shell/components/ShellNavEntryItem.tsx +++ b/src/web-ui/src/app/scenes/shell/components/ShellNavEntryItem.tsx @@ -26,6 +26,14 @@ interface ShellNavEntryItemProps { ) => void; } +function getDisplayCwd(entry: ShellEntry): string | null { + const cwd = entry.workingDirectory ?? entry.cwd; + if (!cwd || cwd.trim().length === 0) { + return null; + } + return cwd; +} + const ShellNavEntryItem: React.FC = ({ entry, isActive, @@ -37,6 +45,8 @@ const ShellNavEntryItem: React.FC = ({ onOpen, onOpenContextMenu, }) => { + const displayCwd = getDisplayCwd(entry); + return (
= ({ className={[ 'bitfun-shell-nav__terminal-item', isActive && 'is-active', + displayCwd && 'has-cwd', ].filter(Boolean).join(' ')} onClick={() => { void onOpen(entry); }} onKeyDown={(event) => { @@ -60,40 +71,48 @@ const ShellNavEntryItem: React.FC = ({ onOpenContextMenu(event, menuItems, { entry }); }} > - - - {showSavedBadge ? ( - - ) : ( - - )} +
+ + + {showSavedBadge ? ( + + ) : ( + + )} - {entry.name} + {entry.name} - {showSavedBadge ? ( - {savedBadgeLabel} - ) : null} + {showSavedBadge ? ( + {savedBadgeLabel} + ) : null} - {entry.startupCommand ? ( - {startupCommandBadgeLabel} - ) : null} + {entry.startupCommand ? ( + {startupCommandBadgeLabel} + ) : null} - - - + + + + + + + +
- - - + {displayCwd ? ( + + {displayCwd} + + ) : null}
); };