ToothFairyAI_Public/tf_code
1
0
Fork 0
mirror of https://gitea.toothfairyai.com/ToothFairyAI/tf_code.git synced 2026-03-30 05:43:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(app): file icon stability

Browse Source
This commit is contained in:
Adam 2026-03-05 07:07:50 -06:00
parent 07348d14a2
commit 8cbe7b4a01
No known key found for this signature in database
GPG Key ID: 9CB48779AF150E75
2 changed files with 8 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/ui/src/components/file-icon.css
View File

@ -1,4 +1,5 @@
[data-component="file-icon"] {
display: block;
flex-shrink: 0;
width: 16px;
height: 16px;

17
packages/ui/src/components/file-icon.tsx
View File

@ -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>
)
}