UI: tab-bar redesign — distinct inactive tabs + Chrome-style active flange

- Active tab bg switched to `--color-bg-secondary` (matches the path bar / col header row below, so the active tab visually merges with the chrome)
- Inactive tabs get their own `--color-bg-tab-inactive` bg: slightly darker than `bg-secondary` in light mode, slightly lighter in dark mode — reads as "recessed". `.tab-bar` bg also uses this same token so the empty area around tabs (and any gaps between adjacent tabs) blend with the inactive tabs
- New `--color-tab-separator` token + `::before` hairline between adjacent inactive tabs (~70% of tab height, 2 px margin on each side; tab-list gap bumped to 5 px to leave room)
- Chrome-style "shoulders": two `<span class="tab-shoulder">` elements rendered inside the active tab. Each is an 8 × 8 box sticking out past the tab's bottom corners, `bg-secondary`-filled, masked with a `radial-gradient` so the visible shape is a concave curve flaring outward from the tab. `.tab-bar` + `.tab-list` switched to `overflow: visible` so the shoulders can leave the tab box
- `--color-bg-secondary` opacity bumped 0.5 → 0.78 (light) / 0.7 → 0.86 (dark) so the chrome row reads at the same translucency density as the file pane — strip-vs-pane distinction is now in tint, not in opacity

Author: vdavid

apps/desktop/src/app.css

@@ -19,13 +19,22 @@
      contrast against the underlying material still clears WCAG AA in both
      light and dark wallpapers; verified by `a11y-contrast`. */
   --color-bg-primary: rgba(255, 255, 255, 0.85);
-  --color-bg-secondary: rgba(245, 245, 245, 0.5);
+  --color-bg-secondary: rgba(245, 245, 245, 0.78);
   --color-bg-tertiary: #e8e8e8;
   /* Status-bar surface that contrasts gently with `--color-bg-secondary`.
      Light: a touch darker than secondary. Dark: a touch lighter. Used by
      `SelectionInfo` so the status band reads as distinct from the
      function-key bar below (which keeps `--color-bg-secondary`). */
-  --color-bg-info-bar: rgba(236, 236, 236, 0.5);
+  --color-bg-info-bar: rgba(236, 236, 236, 0.78);
+  /* Inactive tab surface. Reads as "inactive" — slightly darker than
+     `--color-bg-secondary` (which the active tab now adopts) in light
+     mode, slightly lighter in dark mode. The contrast against
+     `--color-bg-secondary` is what conveys "this tab isn't selected"
+     without needing a hard border. */
+  --color-bg-tab-inactive: rgba(225, 225, 225, 0.78);
+  /* Faint vertical hairline between adjacent inactive tabs. Light enough
+     to read as "subdivider" rather than "this is its own thing". */
+  --color-tab-separator: rgba(0, 0, 0, 0.12);
   /* Settings-window sidebar (the "section selector"). In light mode the
      sidebar reads as a near-white "card" that's slightly **lighter** than
      the rest of the translucent window (`--color-bg-primary` ≈ 0.85α). A
@@ -416,6 +425,7 @@
   --color-bg-sidebar-to: #ffffff;
   --color-sidebar-border: #ffffff;
   --color-bg-settings-primary: #ffffff;
+  --color-bg-tab-inactive: #e1e1e1;
 }
 
 /* selection-fg fallback: dark mode + pane tint + focused cursor on a selected
@@ -523,11 +533,18 @@
        Slightly heavier alpha than light mode because dark backgrounds need
        more body to keep text contrast against bright wallpapers. */
     --color-bg-primary: rgba(30, 30, 30, 0.93);
-    --color-bg-secondary: rgba(42, 42, 42, 0.7);
+    --color-bg-secondary: rgba(42, 42, 42, 0.86);
     --color-bg-tertiary: #333333;
     /* Dark mode: lighter than secondary (opposite of light mode) so the
        status band lifts away from the function-key bar below. */
-    --color-bg-info-bar: rgba(50, 50, 50, 0.7);
+    --color-bg-info-bar: rgba(50, 50, 50, 0.86);
+    /* Inactive tab surface (dark): slightly lighter than the active-tab
+       bg (`--color-bg-secondary`) so unselected tabs read as recessed.
+       Light mode flips the relationship (darker than secondary). */
+    --color-bg-tab-inactive: rgba(30, 30, 30, 0.86);
+    /* Tab separator (dark): light hairline visible against the tab
+       surfaces around it. */
+    --color-tab-separator: rgba(255, 255, 255, 0.12);
     /* Settings-window sidebar (dark). Same logic as light mode but flipped:
        both stops sit **darker** than `--color-bg-primary`, with a slight
        diagonal brightening so the card reads as one panel. */
@@ -677,6 +694,7 @@
     --color-bg-sidebar-to: #262626;
     --color-sidebar-border: var(--color-border);
     --color-bg-settings-primary: #1e1e1e;
+    --color-bg-tab-inactive: #1e1e1e;
   }
 
   /* Old-WebKit fallback (dark mode). See the light-mode counterpart above for

apps/desktop/src/lib/file-explorer/tabs/TabBar.svelte

@@ -106,6 +106,16 @@
                     handleContextMenu(e, tab.id)
                 }}
             >
+                {#if isActive}
+                    <!-- Chrome-style "shoulders": small concave quarter-
+                         circle wedges that stick out past the active tab's
+                         bottom corners, carving a smooth rounded notch into
+                         the adjacent inactive tabs. They share the active
+                         tab's bg color so the tab reads as "flowing into"
+                         the path bar surface below. -->
+                    <span class="tab-shoulder tab-shoulder-left" aria-hidden="true"></span>
+                    <span class="tab-shoulder tab-shoulder-right" aria-hidden="true"></span>
+                {/if}
                 {#if tab.unreachable}
                     <span class="warning-icon" use:tooltip={'Unreachable'} aria-label="Unreachable">
                         <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
@@ -161,19 +171,34 @@
         height: var(--spacing-tab-bar-height);
         min-height: var(--spacing-tab-bar-height);
         max-height: var(--spacing-tab-bar-height);
-        background-color: var(--color-bg-secondary);
+        /* Bar bg matches the inactive tabs so adjacent inactive tabs blend
+           into the bar around them. The active tab (`bg-secondary`, same
+           as the col header / path bar below) is the only contrasting
+           surface in the strip. Side-effect: the active tab's
+           `bg-secondary` no longer stacks on a second `bg-secondary` layer
+           from the bar, so its effective opacity now matches the path bar
+           and col header exactly. */
+        background-color: var(--color-bg-tab-inactive);
         padding: 0 var(--spacing-xxs);
-        overflow: hidden;
+        /* Need `overflow: visible` so the active-tab shoulders can extend
+           outside the tab into the surrounding gap + inactive-tab area. */
+        overflow: visible;
     }
 
     .tab-list {
         display: flex;
         flex: 1;
         min-width: 0;
         align-items: end;
-        overflow: hidden;
+        /* `overflow: visible` so the active-tab shoulders can extend
+           outside the list into the surrounding (gap + inactive-tab)
+           area without being clipped. */
+        overflow: visible;
+        /* 5 px gap = 2 px margin + 1 px separator + 2 px margin between
+           adjacent tabs. The `.tab::before` separator (above) sits inside
+           this gap at `left: -3px`. */
         /* stylelint-disable-next-line declaration-property-value-disallowed-list */
-        gap: 1px;
+        gap: 5px;
     }
 
     .tab {
@@ -192,7 +217,11 @@
         padding: 0 var(--spacing-sm);
         border: none;
         border-radius: var(--radius-sm) var(--radius-sm) 0 0;
-        background-color: transparent;
+        /* Inactive tabs get a distinct "recessed" bg: slightly darker than
+           `--color-bg-secondary` in light mode, slightly lighter in dark
+           mode. `.tab.active` below overrides this with `bg-secondary` so
+           the selected tab merges with the path bar. */
+        background-color: var(--color-bg-tab-inactive);
         color: var(--color-text-secondary);
         font-size: var(--font-size-sm);
         font-family: var(--font-system);
@@ -205,28 +234,39 @@
             color var(--transition-fast);
     }
 
-    /* Subtle separator between inactive tabs, hidden next to the active tab */
+    /* Faint hairline separator between adjacent inactive tabs (skipped
+       next to the active tab and at the leftmost edge of the list).
+       Sits at the tab's left edge, ~70 % of tab height, with ~2 px of
+       breathing room above and below thanks to top/bottom 15 %. The
+       `tab-list { gap: 5px }` rule below leaves enough room around the
+       separator (1 px wide line + 2 px margin on each side). */
     .tab:not(.active, .before-active, .after-active, :first-child)::before {
         content: '';
         position: absolute;
-        left: -1px;
-        top: 5px;
-        bottom: 5px;
+        left: -3px;
+        top: 15%;
+        bottom: 15%;
         width: 1px;
-        background-color: var(--color-border-subtle);
+        background-color: var(--color-tab-separator);
     }
 
     .tab.active {
-        background-color: color-mix(in oklch, var(--color-bg-primary), var(--color-accent) 4%);
+        /* Same bg as the path bar below (`--color-bg-secondary`), so the
+           active tab visually merges with the chrome row underneath. The
+           accent line at the top + the rounded "shoulder" elements at the
+           bottom are what make it read as "tab, not gap". */
+        background-color: var(--color-bg-secondary);
         color: var(--color-text-primary);
         font-weight: 500;
-        /* Bar height + 1px so the active tab covers the tab-bar bottom border;
-         * the extra px hangs below via `margin-bottom: -1px`. */
+        /* Bar height + 1px so the active tab covers any seam with the
+           path bar; the extra px hangs below via `margin-bottom: -1px`. */
         height: calc(var(--spacing-tab-bar-height) + 1px);
         /* stylelint-disable-next-line declaration-property-value-disallowed-list */
         margin-bottom: -1px;
         z-index: 1;
-        box-shadow: 0 0 4px color-mix(in srgb, black, transparent 96%);
+        /* Let the Chrome-style shoulders extend past the tab's left/right
+           edges into the surrounding inactive-tab area. */
+        overflow: visible;
     }
 
     /* Accent top border on active tab */
@@ -242,18 +282,66 @@
         border-radius: 1px 1px 0 0;
     }
 
-    @media (prefers-color-scheme: dark) {
-        .tab.active {
-            background-color: color-mix(in oklch, var(--color-bg-primary), var(--color-accent) 7%);
-            box-shadow: 0 0 4px color-mix(in srgb, black, transparent 85%);
-        }
+    /* Chrome-style "shoulders": pseudo-elements that stick out past the
+       active tab's bottom-left and bottom-right corners with the same bg
+       as the tab, then mask out a quarter-circle so the visible shape is
+       a concave curve. This carves a smooth rounded notch out of the
+       adjacent inactive tab's surface — the active tab reads as "flowing
+       into" the path bar below while the inactive tabs around it bend
+       away. Won't be visible when there's no adjacent inactive tab
+       (`:first-child` / `:last-child` ends of the tab list), which is
+       fine — the bar's own bg matches the active tab anyway. */
+    .tab-shoulder {
+        position: absolute;
+        /* Explicit `top: auto` so `bottom: 0` is the only vertical anchor —
+           inherited cascade (or a future stacking-context tweak) can't shove
+           these to the top accidentally. */
+        top: auto;
+        bottom: 0;
+        width: 8px;
+        height: 8px;
+        background-color: var(--color-bg-secondary);
+        pointer-events: none;
+    }
+
+    /* Left shoulder: 8 × 8 box that sticks out 8 px to the left of the
+       active tab's bottom-left corner. The mask keeps only the
+       *bottom-right* curved triangle of the box visible (= the area
+       closest to the tab); the rest is transparent. That visible chunk
+       forms a smooth convex bulge extending the active tab's
+       bottom-left corner outward into the adjacent inactive tab's
+       surface. */
+    .tab-shoulder-left {
+        left: -8px;
+        /* `transparent` inside the top-left quarter-disc (away from tab),
+           `black` outside (= near tab → opaque, visible). */
+        /* stylelint-disable-next-line declaration-property-value-disallowed-list -- mask uses raw px in radial-gradient args */
+        mask-image: radial-gradient(circle at top left, transparent 8px, black 8px);
+        /* stylelint-disable-next-line declaration-property-value-disallowed-list -- vendor-prefixed mask, WKWebView fallback */
+        -webkit-mask-image: radial-gradient(circle at top left, transparent 8px, black 8px);
+    }
+
+    /* Right shoulder: mirror image of the left — visible bottom-left
+       curved triangle near the tab's bottom-right corner. */
+    .tab-shoulder-right {
+        right: -8px;
+        /* stylelint-disable-next-line declaration-property-value-disallowed-list -- mask uses raw px in radial-gradient args */
+        mask-image: radial-gradient(circle at top right, transparent 8px, black 8px);
+        /* stylelint-disable-next-line declaration-property-value-disallowed-list -- vendor-prefixed mask, WKWebView fallback */
+        -webkit-mask-image: radial-gradient(circle at top right, transparent 8px, black 8px);
     }
 
     .tab:hover:not(.active) {
-        background-color: color-mix(in srgb, var(--color-bg-tertiary), transparent 40%);
+        background-color: color-mix(in srgb, var(--color-bg-secondary), white 8%);
         color: var(--color-text-secondary);
     }
 
+    @media (prefers-color-scheme: dark) {
+        .tab:hover:not(.active) {
+            background-color: color-mix(in srgb, var(--color-bg-tab-inactive), white 6%);
+        }
+    }
+
     /* Hide separator when hovering an inactive tab */
     .tab:hover:not(.active)::before {
         background-color: transparent;