feat(app): hide separators around active tabs (#34591)

packages/app/src/components/titlebar-tab-nav.css

@@ -21,7 +21,7 @@
   position: relative;
 }
 
-[data-titlebar-tab-slot]:not(:first-child)::before {
+[data-titlebar-tab-slot]:not(:first-child):not([data-active="true"])::before {
   content: "";
   position: absolute;
   top: 8px;
@@ -32,6 +32,10 @@
   background: var(--v2-background-bg-layer-02);
 }
 
+[data-titlebar-tab-slot][data-active="true"] + [data-titlebar-tab-slot]::before {
+  display: none;
+}
+
 [data-titlebar-tab] [data-slot="tab-close"]::before {
   content: "";
   position: absolute;

packages/app/src/components/titlebar-tab-strip.tsx

@@ -85,6 +85,7 @@ function SessionTabSlot(props: {
       ref={sortable.ref}
       data-titlebar-tab-slot
       data-tab-key={props.id}
+      data-active={props.active()}
       class="relative flex w-56 min-w-7 max-w-56 flex-shrink"
       classList={{ hidden: !session() }}
     >
@@ -140,6 +141,7 @@ function DraftTabSlot(props: {
       ref={sortable.ref}
       data-titlebar-tab-slot
       data-tab-key={props.id}
+      data-active={props.active()}
       class="relative flex w-56 min-w-7 max-w-56 flex-shrink"
     >
       <DraftTabItem