feat(tab-bar): add colored top border to active tab (#1020)

src/renderer/src/components/tab-bar/BrowserTab.tsx

@@ -13,7 +13,11 @@ import type { BrowserTab as BrowserTabState } from '../../../../shared/types'
 import { CLOSE_ALL_CONTEXT_MENUS_EVENT } from './SortableTab'
 import { getLiveBrowserUrl } from '../browser-pane/browser-runtime'
 import type { TabDragItemData } from '../tab-group/useTabDragSplit'
-import { getDropIndicatorClasses, type DropIndicator } from './drop-indicator'
+import {
+  ACTIVE_TAB_INDICATOR_CLASSES,
+  getDropIndicatorClasses,
+  type DropIndicator
+} from './drop-indicator'
 
 function formatBrowserTabUrlLabel(url: string): string {
   if (url === ORCA_BROWSER_BLANK_URL || url === 'about:blank') {
@@ -132,6 +136,7 @@ export default function BrowserTab({
             }
           }}
         >
+          {isActive && <span className={ACTIVE_TAB_INDICATOR_CLASSES} aria-hidden />}
           <Globe
             className={`w-3.5 h-3.5 mr-1.5 shrink-0 ${isActive ? 'text-foreground' : 'text-muted-foreground'}`}
           />

src/renderer/src/components/tab-bar/EditorFileTab.tsx

@@ -26,7 +26,11 @@ import type { GitFileStatus } from '../../../../shared/types'
 import type { OpenFile } from '../../store/slices/editor'
 import { CLOSE_ALL_CONTEXT_MENUS_EVENT } from './SortableTab'
 import type { TabDragItemData } from '../tab-group/useTabDragSplit'
-import { getDropIndicatorClasses, type DropIndicator } from './drop-indicator'
+import {
+  ACTIVE_TAB_INDICATOR_CLASSES,
+  getDropIndicatorClasses,
+  type DropIndicator
+} from './drop-indicator'
 
 const isMac = navigator.userAgent.includes('Mac')
 const isLinux = navigator.userAgent.includes('Linux')
@@ -201,6 +205,7 @@ export default function EditorFileTab({
             }
           }}
         >
+          {isActive && <span className={ACTIVE_TAB_INDICATOR_CLASSES} aria-hidden />}
           {isConflictReview ? (
             <ShieldAlert
               className={`w-3.5 h-3.5 mr-1.5 shrink-0 ${isActive ? 'text-orange-400' : 'text-orange-400/70'}`}

src/renderer/src/components/tab-bar/SortableTab.tsx

@@ -11,7 +11,11 @@ import {
 import { Input } from '@/components/ui/input'
 import type { TerminalTab } from '../../../../shared/types'
 import type { TabDragItemData } from '../tab-group/useTabDragSplit'
-import { getDropIndicatorClasses, type DropIndicator } from './drop-indicator'
+import {
+  ACTIVE_TAB_INDICATOR_CLASSES,
+  getDropIndicatorClasses,
+  type DropIndicator
+} from './drop-indicator'
 
 type SortableTabProps = {
   tab: TerminalTab
@@ -193,6 +197,7 @@ export default function SortableTab({
             }
           }}
         >
+          {isActive && <span className={ACTIVE_TAB_INDICATOR_CLASSES} aria-hidden />}
           <TerminalIcon
             className={`w-3.5 h-3.5 mr-1.5 shrink-0 ${isActive ? 'text-foreground' : 'text-muted-foreground'}`}
           />

src/renderer/src/components/tab-bar/drop-indicator.ts

@@ -13,3 +13,12 @@ export function getDropIndicatorClasses(dropIndicator: DropIndicator): string {
   }
   return ''
 }
+
+// Why: the bg-accent vs. bg-card contrast alone is too subtle to tell which
+// tab is active at a glance, especially in light mode. VS Code solves this
+// with a 1–2px colored bar across the top of the active tab
+// (tab.activeBorderTop). We mirror that here with an absolutely-positioned
+// child span so it sits above the tab content without shifting layout and
+// without conflicting with drop-indicator pseudo-elements during a drag.
+export const ACTIVE_TAB_INDICATOR_CLASSES =
+  'pointer-events-none absolute inset-x-0 top-0 h-0.5 bg-[#1e3d9c] z-10'