fix(ui): mute inactive file tab icons

Author: iamdavidhill

packages/app/src/components/session/session-sortable-tab.tsx

@@ -13,13 +13,15 @@ import { useCommand } from "@/context/command"
 export function FileVisual(props: { path: string; active?: boolean }): JSX.Element {
   return (
     <div class="flex items-center gap-x-1.5 min-w-0">
-      <FileIcon
-        node={{ path: props.path, type: "file" }}
-        classList={{
-          "grayscale-100 group-data-[selected]/tab:grayscale-0": !props.active,
-          "grayscale-0": props.active,
-        }}
-      />
+      <Show
+        when={!props.active}
+        fallback={<FileIcon node={{ path: props.path, type: "file" }} class="size-4 shrink-0" />}
+      >
+        <span class="relative inline-flex size-4 shrink-0">
+          <FileIcon node={{ path: props.path, type: "file" }} class="absolute inset-0 size-4 tab-fileicon-color" />
+          <FileIcon node={{ path: props.path, type: "file" }} mono class="absolute inset-0 size-4 tab-fileicon-mono" />
+        </span>
+      </Show>
       <span class="text-14-medium truncate">{getFilename(props.path)}</span>
     </div>
   )

packages/ui/src/components/tabs.css

@@ -229,20 +229,40 @@
         }
       }
 
-      [data-component="file-icon"] {
-        filter: grayscale(1) !important;
-        transition: filter 120ms ease;
+      &:hover:not(:disabled):not(:has([data-selected])) {
+        color: var(--text-base);
+        background-color: var(--surface-base-hover);
       }
 
-      &:has([data-selected]) {
-        [data-component="file-icon"] {
-          filter: grayscale(0) !important;
+      /*
+        File tabs: use monochrome icon by default.
+        Full-color icon is shown on hover/selected.
+      */
+      [data-slot="tabs-trigger"] {
+        .tab-fileicon-color,
+        .tab-fileicon-mono {
+          transition: opacity 120ms ease;
         }
-      }
 
-      &:hover:not(:disabled):not(:has([data-selected])) {
-        color: var(--text-base);
-        background-color: var(--surface-base-hover);
+        .tab-fileicon-color {
+          opacity: 0;
+        }
+
+        .tab-fileicon-mono {
+          opacity: 1;
+          color: currentColor;
+        }
+
+        &[data-selected],
+        &:hover {
+          .tab-fileicon-color {
+            opacity: 1;
+          }
+
+          .tab-fileicon-mono {
+            opacity: 0;
+          }
+        }
       }
     }
   }