fix(app): file icon stability

2 files changed, 8 insertions, 10 deletions

diff --git a/packages/ui/src/components/file-icon.css b/packages/ui/src/components/file-icon.css
index a49674a90..5776425de 100644
--- a/packages/ui/src/components/file-icon.css
+++ b/packages/ui/src/components/file-icon.css
@@ -1,4 +1,5 @@
 [data-component="file-icon"] {
+  display: block;
   flex-shrink: 0;
   width: 16px;
   height: 16px;
diff --git a/packages/ui/src/components/file-icon.tsx b/packages/ui/src/components/file-icon.tsx
index 405cbe163..133cb169c 100644
--- a/packages/ui/src/components/file-icon.tsx
+++ b/packages/ui/src/components/file-icon.tsx
@@ -1,10 +1,8 @@
 import type { Component, JSX } from "solid-js"
-import { createMemo, splitProps, Show } from "solid-js"
+import { createMemo, createUniqueId, splitProps, Show } from "solid-js"
 import sprite from "./file-icons/sprite.svg"
 import type { IconName } from "./file-icons/types"
 
-let filter = 0
-
 export type FileIconProps = JSX.GSVGAttributes<SVGSVGElement> & {
   node: { path: string; type: "file" | "directory" }
   expanded?: boolean
@@ -14,7 +12,7 @@ export type FileIconProps = JSX.GSVGAttributes<SVGSVGElement> & {
 export const FileIcon: Component<FileIconProps> = (props) => {
   const [local, rest] = splitProps(props, ["node", "class", "classList", "expanded", "mono"])
   const name = createMemo(() => chooseIconName(local.node.path, local.node.type, local.expanded || false))
-  const id = `file-icon-mono-${filter++}`
+  const id = `file-icon-mono-${createUniqueId()}`
   return (
     <svg
       data-component="file-icon"
@@ -24,15 +22,14 @@ export const FileIcon: Component<FileIconProps> = (props) => {
         [local.class ?? ""]: !!local.class,
       }}
     >
-      <Show when={local.mono}>
+      <Show when={local.mono} fallback={<use href={`${sprite}#${name()}`} />}>
         <defs>
-          <filter id={id} color-interpolation-filters="sRGB">
-            <feFlood flood-color="currentColor" result="flood" />
-            <feComposite in="flood" in2="SourceAlpha" operator="in" />
-          </filter>
+          <mask id={id} mask-type="alpha">
+            <use href={`${sprite}#${name()}`} />
+          </mask>
         </defs>
+        <rect width="100%" height="100%" fill="currentColor" mask={`url(#${id})`} />
       </Show>
-      <use href={`${sprite}#${name()}`} filter={local.mono ? `url(#${id})` : undefined} />
     </svg>
   )
 }