diff options
| author | David Hill <[email protected]> | 2026-02-17 18:23:04 +0000 |
|---|---|---|
| committer | David Hill <[email protected]> | 2026-02-17 18:23:04 +0000 |
| commit | a685e7a805454110d92ed4da5a3799a15ea1bcb9 (patch) | |
| tree | 2de6f2118ae06d5de65390109e5c5c29a538cb50 /packages/app/src | |
| parent | ce7484b4f5c3de1b83db4223052bdf9ce4c0cfb9 (diff) | |
| download | opencode-a685e7a805454110d92ed4da5a3799a15ea1bcb9.tar.gz opencode-a685e7a805454110d92ed4da5a3799a15ea1bcb9.zip | |
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
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> |