From 351832e1391f89c9a7990a5528781c6f8ec77306 Mon Sep 17 00:00:00 2001
From: Test <test@opencode.test>
Date: Thu, 25 Jun 2026 07:10:42 +0000
Subject: [PATCH] fix(app): integrate color with tab edge

---
 .../app/src/components/titlebar-tab-color.tsx     | 15 ---------------
 packages/app/src/components/titlebar-tab-nav.css  |  4 ++++
 packages/app/src/components/titlebar-tab-nav.tsx  |  8 +++++---
 3 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/packages/app/src/components/titlebar-tab-color.tsx b/packages/app/src/components/titlebar-tab-color.tsx
index 230090c998..2a44c1a97f 100644
--- a/packages/app/src/components/titlebar-tab-color.tsx
+++ b/packages/app/src/components/titlebar-tab-color.tsx
@@ -128,18 +128,3 @@ export function TabColorMenu(props: {
     </>
   )
 }
-
-export function TabColorPill(props: { color?: string }) {
-  return (
-    <Show when={normalizeTabColor(props.color)}>
-      {(color) => (
-        <span
-          data-slot="tab-color"
-          aria-hidden="true"
-          class="pointer-events-none absolute bottom-px left-1 right-1 h-1 rounded-b-[5px] border border-t-0"
-          style={{ "border-color": color() }}
-        />
-      )}
-    </Show>
-  )
-}
diff --git a/packages/app/src/components/titlebar-tab-nav.css b/packages/app/src/components/titlebar-tab-nav.css
index 1ba4893a4a..404f1f041d 100644
--- a/packages/app/src/components/titlebar-tab-nav.css
+++ b/packages/app/src/components/titlebar-tab-nav.css
@@ -9,6 +9,10 @@
   justify-content: center;
 }
 
+[data-titlebar-tab][data-tab-color] {
+  box-shadow: inset 0 -1px 0 var(--tab-color);
+}
+
 [data-slot="titlebar-tabs"] {
   container-type: inline-size;
 }
diff --git a/packages/app/src/components/titlebar-tab-nav.tsx b/packages/app/src/components/titlebar-tab-nav.tsx
index ecf3c34913..35cc92bd44 100644
--- a/packages/app/src/components/titlebar-tab-nav.tsx
+++ b/packages/app/src/components/titlebar-tab-nav.tsx
@@ -10,8 +10,8 @@ import { projectForSession } from "@/pages/layout/helpers"
 import { SessionTabAvatar } from "@/pages/layout/session-tab-avatar"
 import { showToast } from "@/utils/toast"
 import type { Session } from "@opencode-ai/sdk/v2"
+import { normalizeTabColor } from "@/context/tab-color"
 import { canOpenTabRename, forwardTabRef } from "./titlebar-tab-gesture"
-import { TabColorPill } from "./titlebar-tab-color"
 import "./titlebar-tab-nav.css"
 
 export function TabNavItem(props: {
@@ -180,7 +180,9 @@ export function TabNavItem(props: {
       data-slot="titlebar-tab-item"
       data-title-overflow={titleOverflowing()}
       data-editing={editing()}
+      data-tab-color={normalizeTabColor(props.color) ? "" : undefined}
       class="group relative flex h-7 w-full min-w-0 max-w-56 select-none flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [container-type:inline-size] [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] has-[>a:focus-visible]:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[dragging='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[pressed='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[editing='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
+      style={{ "--tab-color": normalizeTabColor(props.color) }}
       classList={{ invisible: props.hidden }}
       data-active={props.active}
       data-dragging={props.dragging}
@@ -272,7 +274,6 @@ export function TabNavItem(props: {
           icon={<IconV2 name="xmark-small" />}
         />
       </div>
-      <TabColorPill color={props.color} />
     </div>
   )
 }
@@ -303,7 +304,9 @@ export function DraftTabItem(props: {
       data-active={props.active}
       data-dragging={props.dragging}
       data-pressed={props.pressed}
+      data-tab-color={normalizeTabColor(props.color) ? "" : undefined}
       class="group relative flex h-7 w-full min-w-0 max-w-56 flex-row items-center gap-1.5 overflow-hidden rounded-[6px] bg-[var(--tab-bg)] pl-1.5 pr-8 [container-type:inline-size] whitespace-nowrap [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] has-[>a:focus-visible]:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:has-[>a:focus-visible]:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-overlay-simple-overlay-pressed)] data-[dragging='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[pressed='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true'][data-pressed='true']:[--tab-bg:var(--v2-overlay-simple-overlay-pressed)]"
+      style={{ "--tab-color": normalizeTabColor(props.color) }}
       classList={{ invisible: props.hidden }}
       onMouseDown={(event) => {
         if (event.button !== 1) return
@@ -350,7 +353,6 @@ export function DraftTabItem(props: {
           aria-label="Close tab"
         />
       </div>
-      <TabColorPill color={props.color} />
     </div>
   )
 }