fix(ui): mute inactive file tab icons

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
+      <Show
-        node={{ path: props.path, type: "file" }}
+        when={!props.active}
-        classList={{
+        fallback={<FileIcon node={{ path: props.path, type: "file" }} class="size-4 shrink-0" />}
-          "grayscale-100 group-data-[selected]/tab:grayscale-0": !props.active,
+      >
-          "grayscale-0": props.active,
+        <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,21 +229,41 @@
         }
       }
 
-      [data-component="file-icon"] {
-        filter: grayscale(1) !important;
-        transition: filter 120ms ease;
-      }
-
-      &:has([data-selected]) {
-        [data-component="file-icon"] {
-          filter: grayscale(0) !important;
-        }
-      }
-
       &:hover:not(:disabled):not(:has([data-selected])) {
         color: var(--text-base);
         background-color: var(--surface-base-hover);
       }
+
+      /*
+        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;
+        }
+
+        .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;
+          }
+        }
+      }
     }
   }