ToothFairyAI_Public/tf_code
1
0
Fork 0
mirror of https://gitea.toothfairyai.com/ToothFairyAI/tf_code.git synced 2026-04-22 16:44:36 +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
2 changed files with 8 additions and 10 deletions
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"] { [data-component="file-icon"] {
display: block;
flex-shrink: 0; flex-shrink: 0;
width: 16px; width: 16px;
height: 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 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 sprite from "./file-icons/sprite.svg"
import type { IconName } from "./file-icons/types" import type { IconName } from "./file-icons/types"
let filter = 0
export type FileIconProps = JSX.GSVGAttributes<SVGSVGElement> & { export type FileIconProps = JSX.GSVGAttributes<SVGSVGElement> & {
node: { path: string; type: "file" | "directory" } node: { path: string; type: "file" | "directory" }
expanded?: boolean expanded?: boolean
@@ -14,7 +12,7 @@ export type FileIconProps = JSX.GSVGAttributes<SVGSVGElement> & {
export const FileIcon: Component<FileIconProps> = (props) => { export const FileIcon: Component<FileIconProps> = (props) => {
const [local, rest] = splitProps(props, ["node", "class", "classList", "expanded", "mono"]) const [local, rest] = splitProps(props, ["node", "class", "classList", "expanded", "mono"])
const name = createMemo(() => chooseIconName(local.node.path, local.node.type, local.expanded || false)) 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 ( return (
<svg <svg
data-component="file-icon" data-component="file-icon"
@@ -24,15 +22,14 @@ export const FileIcon: Component<FileIconProps> = (props) => {
[local.class ?? ""]: !!local.class, [local.class ?? ""]: !!local.class,
}} }}
> >
<Show when={local.mono}> <Show when={local.mono} fallback={<use href={`${sprite}#${name()}`} />}>
<defs> <defs>
<filter id={id} color-interpolation-filters="sRGB"> <mask id={id} mask-type="alpha">
<feFlood flood-color="currentColor" result="flood" /> <use href={`${sprite}#${name()}`} />
<feComposite in="flood" in2="SourceAlpha" operator="in" /> </mask>
</filter>
</defs> </defs>
<rect width="100%" height="100%" fill="currentColor" mask={`url(#${id})`} />
</Show> </Show>
<use href={`${sprite}#${name()}`} filter={local.mono ? `url(#${id})` : undefined} />
</svg> </svg>
) )
} }