diff options
Diffstat (limited to 'packages/app/src')
| -rw-r--r-- | packages/app/src/components/file-tree.tsx | 28 |
1 files changed, 26 insertions, 2 deletions
diff --git a/packages/app/src/components/file-tree.tsx b/packages/app/src/components/file-tree.tsx index 758f5a83f..1f09642ac 100644 --- a/packages/app/src/components/file-tree.tsx +++ b/packages/app/src/components/file-tree.tsx @@ -447,12 +447,13 @@ export default function FileTree(props: { }) return ( - <div class={`flex flex-col gap-0.5 ${props.class ?? ""}`}> + <div data-component="filetree" class={`flex flex-col gap-0.5 ${props.class ?? ""}`}> <For each={nodes()}> {(node) => { const expanded = () => file.tree.state(node.path)?.expanded ?? false const deep = () => deeps().get(node.path) ?? -1 const kind = () => visibleKind(node, kinds(), marks()) + const active = () => !!kind() && !node.ignored return ( <Switch> @@ -530,7 +531,30 @@ export default function FileTree(props: { onClick={() => props.onFileClick?.(node)} > <div class="w-4 shrink-0" /> - <FileIcon node={node} class="text-icon-weak size-4" /> + <Switch> + <Match when={node.ignored}> + <FileIcon + node={node} + class="size-4 filetree-icon filetree-icon--mono" + style="color: var(--icon-weak-base)" + mono + /> + </Match> + <Match when={active()}> + <FileIcon + node={node} + class="size-4 filetree-icon filetree-icon--mono" + style={kindTextColor(kind()!)} + mono + /> + </Match> + <Match when={!node.ignored}> + <span class="filetree-iconpair size-4"> + <FileIcon node={node} class="size-4 filetree-icon filetree-icon--color" /> + <FileIcon node={node} class="size-4 filetree-icon filetree-icon--mono" mono /> + </span> + </Match> + </Switch> </FileTreeNode> </FileTreeNodeTooltip> </Match> |