monadical/opencode
14
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

tui: show monochrome file icons by default in tree view, revealing colors on hover to reduce visual clutter and help users focus on code content

Browse Source
This commit is contained in:
David Hill
2026-02-17 18:23:04 +00:00
parent ce7484b4f5
commit a685e7a805
3 changed files with 73 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/app/src/components/file-tree.tsx
View File

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