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

fix(app): tighten filetree row spacing

Browse Source
This commit is contained in:
David Hill
2026-01-26 18:16:08 +00:00
parent 0e08c6c9fd
commit f4392e023a
2 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -96,7 +96,7 @@ export default function FileTree(props: {
<Dynamic <Dynamic
component={local.as ?? "div"} component={local.as ?? "div"}
classList={{ classList={{
"w-full min-w-0 flex items-center justify-start gap-x-2 rounded-md px-2 py-1 text-left hover:bg-surface-raised-base-hover active:bg-surface-base-active transition-colors cursor-pointer": true, "w-full min-w-0 h-6 flex items-center justify-start gap-x-2 rounded-md px-2 py-0 text-left hover:bg-surface-raised-base-hover active:bg-surface-base-active transition-colors cursor-pointer": true,
...(local.classList ?? {}), ...(local.classList ?? {}),
[local.class ?? ""]: !!local.class, [local.class ?? ""]: !!local.class,
[props.nodeClass ?? ""]: !!props.nodeClass, [props.nodeClass ?? ""]: !!props.nodeClass,
@@ -147,7 +147,7 @@ export default function FileTree(props: {
} }
return ( return (
<div class={`flex flex-col ${props.class ?? ""}`}> <div class={`flex flex-col gap-0.5 ${props.class ?? ""}`}>
<For each={nodes()}> <For each={nodes()}>
{(node) => { {(node) => {
const expanded = () => file.tree.state(node.path)?.expanded ?? false const expanded = () => file.tree.state(node.path)?.expanded ?? false
@@ -166,6 +166,7 @@ export default function FileTree(props: {
<Collapsible <Collapsible
variant="ghost" variant="ghost"
class="w-full" class="w-full"
data-scope="filetree"
forceMount={false} forceMount={false}
open={expanded()} open={expanded()}
onOpenChange={(open) => (open ? file.tree.expand(node.path) : file.tree.collapse(node.path))} onOpenChange={(open) => (open ? file.tree.expand(node.path) : file.tree.collapse(node.path))}
@@ -178,7 +179,7 @@ export default function FileTree(props: {
</Node> </Node>
</Wrapper> </Wrapper>
</Collapsible.Trigger> </Collapsible.Trigger>
<Collapsible.Content> <Collapsible.Content class="mt-0.5">
<FileTree <FileTree
path={node.path} path={node.path}
level={level + 1} level={level + 1}

6
packages/ui/src/components/collapsible.css
View File

@@ -76,6 +76,12 @@
} }
} }
} }
&[data-variant="ghost"][data-scope="filetree"] {
> [data-slot="collapsible-trigger"] {
height: 24px;
}
}
} }
@keyframes slideDown { @keyframes slideDown {