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

wip(app): file tree mode

Browse Source
This commit is contained in:
adamelmore
2026-01-25 21:57:30 -06:00
parent d9eed4c6ca
commit ebeed03115
5 changed files with 907 additions and 658 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,16 @@ import { useFile } from "@/context/file"
import { Collapsible } from "@opencode-ai/ui/collapsible"
import { FileIcon } from "@opencode-ai/ui/file-icon"
import { Tooltip } from "@opencode-ai/ui/tooltip"
import { createEffect, For, Match, splitProps, Switch, type ComponentProps, type ParentProps } from "solid-js"
import {
createEffect,
createMemo,
For,
Match,
splitProps,
Switch,
type ComponentProps,
type ParentProps,
} from "solid-js"
import { Dynamic } from "solid-js/web"
import type { FileNode } from "@opencode-ai/sdk/v2"
@@ -11,15 +20,45 @@ export default function FileTree(props: {
class?: string
nodeClass?: string
level?: number
allowed?: readonly string[]
onFileClick?: (file: FileNode) => void
}) {
const file = useFile()
const level = props.level ?? 0
const filter = createMemo(() => {
const allowed = props.allowed
if (!allowed) return
const files = new Set(allowed)
const dirs = new Set<string>()
for (const item of allowed) {
const parts = item.split("/")
const parents = parts.slice(0, -1)
for (const [idx] of parents.entries()) {
const dir = parents.slice(0, idx + 1).join("/")
if (dir) dirs.add(dir)
}
}
return { files, dirs }
})
createEffect(() => {
void file.tree.list(props.path)
})
const nodes = createMemo(() => {
const nodes = file.tree.children(props.path)
const current = filter()
if (!current) return nodes
return nodes.filter((node) => {
if (node.type === "file") return current.files.has(node.path)
return current.dirs.has(node.path)
})
})
const Node = (
p: ParentProps &
ComponentProps<"div"> &
@@ -81,7 +120,7 @@ export default function FileTree(props: {
return (
<div class={`flex flex-col ${props.class ?? ""}`}>
<For each={file.tree.children(props.path)}>
<For each={nodes()}>
{(node) => {
const expanded = () => file.tree.state(node.path)?.expanded ?? false
return (
@@ -102,7 +141,12 @@ export default function FileTree(props: {
</Node>
</Collapsible.Trigger>
<Collapsible.Content>
<FileTree path={node.path} level={level + 1} onFileClick={props.onFileClick} />
<FileTree
path={node.path}
level={level + 1}
allowed={props.allowed}
onFileClick={props.onFileClick}
/>
</Collapsible.Content>
</Collapsible>
</Match>

222
packages/app/src/pages/session.tsx
View File

@@ -77,6 +77,7 @@ interface SessionReviewTabProps {
comments?: LineComment[]
focusedComment?: { file: string; id: string } | null
onFocusedCommentChange?: (focus: { file: string; id: string } | null) => void
onScrollRef?: (el: HTMLDivElement) => void
classes?: {
root?: string
header?: string
@@ -146,6 +147,7 @@ function SessionReviewTab(props: SessionReviewTabProps) {
<SessionReview
scrollRef={(el) => {
scroll = el
props.onScrollRef?.(el)
restoreScroll()
}}
onScroll={handleScroll}
@@ -1015,8 +1017,71 @@ export default function Page() {
const showTabs = createMemo(() => view().reviewPanel.opened())
const [fileTreeTab, setFileTreeTab] = createSignal<"changes" | "all">("changes")
const [reviewScroll, setReviewScroll] = createSignal<HTMLDivElement | undefined>(undefined)
const [pendingDiff, setPendingDiff] = createSignal<string | undefined>(undefined)
createEffect(() => {
if (!layout.fileTree.opened()) return
setFileTreeTab("changes")
})
const setFileTreeTabValue = (value: string) => {
if (value !== "changes" && value !== "all") return
setFileTreeTab(value)
}
const reviewDiffId = (path: string) => {
const sum = checksum(path)
if (!sum) return
return `session-review-diff-${sum}`
}
const scrollToReviewDiff = (path: string, behavior: ScrollBehavior) => {
const root = reviewScroll()
if (!root) return
const id = reviewDiffId(path)
if (!id) return
const el = document.getElementById(id)
if (!(el instanceof HTMLElement)) return
if (!root.contains(el)) return
const a = el.getBoundingClientRect()
const b = root.getBoundingClientRect()
const top = a.top - b.top + root.scrollTop
root.scrollTo({ top, behavior })
}
const focusReviewDiff = (path: string) => {
const current = view().review.open() ?? []
if (!current.includes(path)) view().review.setOpen([...current, path])
setPendingDiff(path)
requestAnimationFrame(() => scrollToReviewDiff(path, "smooth"))
}
createEffect(() => {
const pending = pendingDiff()
if (!pending) return
if (!reviewScroll()) return
if (!diffsReady()) return
requestAnimationFrame(() => {
scrollToReviewDiff(pending, "smooth")
setPendingDiff(undefined)
})
})
const activeTab = createMemo(() => {
const active = tabs().active()
if (layout.fileTree.opened() && fileTreeTab() === "all") {
if (active && active !== "review" && active !== "context") return normalizeTab(active)
const first = openedTabs()[0]
if (first) return first
return "review"
}
if (active) return normalizeTab(active)
if (hasReview()) return "review"
@@ -1033,12 +1098,27 @@ export default function Page() {
tabs().setActive(activeTab())
})
createEffect(() => {
if (!layout.fileTree.opened()) return
if (fileTreeTab() !== "all") return
const first = openedTabs()[0]
if (!first) return
const active = tabs().active()
if (active && active !== "review" && active !== "context") return
tabs().setActive(first)
})
createEffect(() => {
const id = params.id
if (!id) return
if (!hasReview()) return
const wants = isDesktop() ? view().reviewPanel.opened() && activeTab() === "review" : store.mobileTab === "review"
const wants = isDesktop()
? view().reviewPanel.opened() &&
(layout.fileTree.opened() ? fileTreeTab() === "changes" : activeTab() === "review")
: store.mobileTab === "review"
if (!wants) return
if (diffsReady()) return
@@ -1814,27 +1894,48 @@ export default function Page() {
aria-label={language.t("session.panel.reviewAndFiles")}
class="relative flex-1 min-w-0 h-full border-l border-border-weak-base flex"
>
<Show when={layout.fileTree.opened()}>
<div class="relative shrink-0 h-full" style={{ width: `${layout.fileTree.width()}px` }}>
<div class="h-full bg-background-base border-r border-border-weak-base flex flex-col">
<div class="hidden h-12 shrink-0 flex items-center px-3 border-b border-border-weak-base text-12-medium text-text-weak">
Files
</div>
<div class="flex-1 min-h-0 overflow-y-auto no-scrollbar p-2">
<FileTree path="" onFileClick={(node) => openTab(file.tab(node.path))} />
</div>
</div>
<ResizeHandle
direction="horizontal"
size={layout.fileTree.width()}
min={200}
max={480}
collapseThreshold={160}
onResize={layout.fileTree.resize}
onCollapse={layout.fileTree.close}
<div class="flex-1 min-w-0 h-full">
<Show when={layout.fileTree.opened() && fileTreeTab() === "changes"}>
<div class="flex flex-col h-full overflow-hidden bg-background-stronger contain-strict">
<div class="relative pt-2 flex-1 min-h-0 overflow-hidden">
<Switch>
<Match when={hasReview()}>
<Show
when={diffsReady()}
fallback={
<div class="px-6 py-4 text-text-weak">{language.t("session.review.loadingChanges")}</div>
}
>
<SessionReviewTab
diffs={diffs}
view={view}
diffStyle={layout.review.diffStyle()}
onDiffStyleChange={layout.review.setDiffStyle}
onScrollRef={setReviewScroll}
onLineComment={(comment) => addCommentToContext({ ...comment, origin: "review" })}
comments={comments.all()}
focusedComment={comments.focus()}
onFocusedCommentChange={comments.setFocus}
onViewFile={(path) => {
const value = file.tab(path)
tabs().open(value)
file.load(path)
}}
/>
</Show>
</Match>
<Match when={true}>
<div class="h-full px-6 pb-30 flex flex-col items-center justify-center text-center gap-6">
<Mark class="w-14 opacity-10" />
<div class="text-13-regular text-text-weak max-w-56">No changes in this session yet</div>
</div>
</Match>
</Switch>
</div>
</div>
</Show>
<Show when={!layout.fileTree.opened() || fileTreeTab() === "all"}>
<DragDropProvider
onDragStart={handleDragStart}
onDragEnd={handleDragEnd}
@@ -1846,7 +1947,7 @@ export default function Page() {
<Tabs value={activeTab()} onChange={openTab}>
<div class="sticky top-0 shrink-0 flex">
<Tabs.List>
<Show when={true}>
<Show when={!layout.fileTree.opened()}>
<Tabs.Trigger value="review">
<div class="flex items-center gap-3">
<Show when={diffs()}>
@@ -1863,7 +1964,7 @@ export default function Page() {
</div>
</Tabs.Trigger>
</Show>
<Show when={contextOpen()}>
<Show when={!layout.fileTree.opened() && contextOpen()}>
<Tabs.Trigger
value="context"
closeButton={
@@ -1905,7 +2006,7 @@ export default function Page() {
</div>
</Tabs.List>
</div>
<Show when={true}>
<Show when={!layout.fileTree.opened()}>
<Tabs.Content value="review" class="flex flex-col h-full overflow-hidden contain-strict">
<Show when={activeTab() === "review"}>
<div class="relative pt-2 flex-1 min-h-0 overflow-hidden">
@@ -1924,6 +2025,7 @@ export default function Page() {
view={view}
diffStyle={layout.review.diffStyle()}
onDiffStyleChange={layout.review.setDiffStyle}
onScrollRef={setReviewScroll}
onLineComment={(comment) => addCommentToContext({ ...comment, origin: "review" })}
comments={comments.all()}
focusedComment={comments.focus()}
@@ -1939,7 +2041,9 @@ export default function Page() {
<Match when={true}>
<div class="h-full px-6 pb-30 flex flex-col items-center justify-center text-center gap-6">
<Mark class="w-14 opacity-10" />
<div class="text-13-regular text-text-weak max-w-56">No changes in this session yet</div>
<div class="text-13-regular text-text-weak max-w-56">
No changes in this session yet
</div>
</div>
</Match>
</Switch>
@@ -1947,7 +2051,17 @@ export default function Page() {
</Show>
</Tabs.Content>
</Show>
<Show when={contextOpen()}>
<Show when={layout.fileTree.opened() && fileTreeTab() === "all" && openedTabs().length === 0}>
<Tabs.Content value="review" class="flex flex-col h-full overflow-hidden contain-strict">
<div class="h-full px-6 pb-30 flex flex-col items-center justify-center text-center gap-6">
<Mark class="w-14 opacity-10" />
<div class="text-13-regular text-text-weak max-w-56">Select a file to open</div>
</div>
</Tabs.Content>
</Show>
<Show when={!layout.fileTree.opened() && contextOpen()}>
<Tabs.Content value="context" class="flex flex-col h-full overflow-hidden contain-strict">
<Show when={activeTab() === "context"}>
<div class="relative pt-2 flex-1 min-h-0 overflow-hidden">
@@ -1980,7 +2094,9 @@ export default function Page() {
const isImage = createMemo(() => {
const c = state()?.content
return (
c?.encoding === "base64" && c?.mimeType?.startsWith("image/") && c?.mimeType !== "image/svg+xml"
c?.encoding === "base64" &&
c?.mimeType?.startsWith("image/") &&
c?.mimeType !== "image/svg+xml"
)
})
const isSvg = createMemo(() => {
@@ -2279,7 +2395,10 @@ export default function Page() {
if (target && e.currentTarget.contains(target)) return
// Delay to allow click handlers to fire first
setTimeout(() => {
if (!document.activeElement || !e.currentTarget.contains(document.activeElement)) {
if (
!document.activeElement ||
!e.currentTarget.contains(document.activeElement)
) {
setCommenting(null)
}
}, 0)
@@ -2480,6 +2599,57 @@ export default function Page() {
</Show>
</DragOverlay>
</DragDropProvider>
</Show>
</div>
<Show when={layout.fileTree.opened()}>
<div class="relative shrink-0 h-full" style={{ width: `${layout.fileTree.width()}px` }}>
<div class="h-full border-l border-border-weak-base flex flex-col overflow-hidden">
<Tabs value={fileTreeTab()} onChange={setFileTreeTabValue} class="h-full">
<Tabs.List class="h-auto">
<Tabs.Trigger value="changes" class="w-1/2" classes={{ button: "w-full" }}>
Changes
</Tabs.Trigger>
<Tabs.Trigger value="all" class="w-1/2 !border-r-0" classes={{ button: "w-full" }}>
All files
</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="changes" class="bg-background-base p-2">
<Switch>
<Match when={hasReview()}>
<Show
when={diffsReady()}
fallback={<div class="px-2 py-2 text-12-regular text-text-weak">Loading...</div>}
>
<FileTree
path=""
allowed={diffs().map((d) => d.file)}
onFileClick={(node) => focusReviewDiff(node.path)}
/>
</Show>
</Match>
<Match when={true}>
<div class="px-2 py-2 text-12-regular text-text-weak">No changes</div>
</Match>
</Switch>
</Tabs.Content>
<Tabs.Content value="all" class="bg-background-base p-2">
<FileTree path="" onFileClick={(node) => openTab(file.tab(node.path))} />
</Tabs.Content>
</Tabs>
</div>
<ResizeHandle
direction="horizontal"
edge="start"
size={layout.fileTree.width()}
min={200}
max={480}
collapseThreshold={160}
onResize={layout.fileTree.resize}
onCollapse={layout.fileTree.close}
/>
</div>
</Show>
</aside>
</Show>
</div>

12
packages/ui/src/components/resize-handle.css
View File

@@ -21,6 +21,12 @@
transform: translateX(50%);
cursor: col-resize;
&[data-edge="start"] {
inset-inline-start: 0;
inset-inline-end: auto;
transform: translateX(-50%);
}
&::after {
width: 3px;
inset-block: 0;
@@ -36,6 +42,12 @@
transform: translateY(-50%);
cursor: row-resize;
&[data-edge="end"] {
inset-block-start: auto;
inset-block-end: 0;
transform: translateY(50%);
}
&::after {
height: 3px;
inset-inline: 0;

13
packages/ui/src/components/resize-handle.tsx
View File

@@ -2,6 +2,7 @@ import { splitProps, type JSX } from "solid-js"
export interface ResizeHandleProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onResize"> {
direction: "horizontal" | "vertical"
edge?: "start" | "end"
size: number
min: number
max: number
@@ -13,6 +14,7 @@ export interface ResizeHandleProps extends Omit<JSX.HTMLAttributes<HTMLDivElemen
export function ResizeHandle(props: ResizeHandleProps) {
const [local, rest] = splitProps(props, [
"direction",
"edge",
"size",
"min",
"max",
@@ -25,6 +27,7 @@ export function ResizeHandle(props: ResizeHandleProps) {
const handleMouseDown = (e: MouseEvent) => {
e.preventDefault()
const edge = local.edge ?? (local.direction === "vertical" ? "start" : "end")
const start = local.direction === "horizontal" ? e.clientX : e.clientY
const startSize = local.size
let current = startSize
@@ -34,7 +37,14 @@ export function ResizeHandle(props: ResizeHandleProps) {
const onMouseMove = (moveEvent: MouseEvent) => {
const pos = local.direction === "horizontal" ? moveEvent.clientX : moveEvent.clientY
const delta = local.direction === "vertical" ? start - pos : pos - start
const delta =
local.direction === "vertical"
? edge === "end"
? pos - start
: start - pos
: edge === "start"
? start - pos
: pos - start
current = startSize + delta
const clamped = Math.min(local.max, Math.max(local.min, current))
local.onResize(clamped)
@@ -61,6 +71,7 @@ export function ResizeHandle(props: ResizeHandleProps) {
{...rest}
data-component="resize-handle"
data-direction={local.direction}
data-edge={local.edge ?? (local.direction === "vertical" ? "start" : "end")}
classList={{
...(local.classList ?? {}),
[local.class ?? ""]: !!local.class,

14
packages/ui/src/components/session-review.tsx
View File

@@ -9,6 +9,7 @@ import { StickyAccordionHeader } from "./sticky-accordion-header"
import { useDiffComponent } from "../context/diff"
import { useI18n } from "../context/i18n"
import { getDirectory, getFilename } from "@opencode-ai/util/path"
import { checksum } from "@opencode-ai/util/encode"
import { createEffect, createMemo, createSignal, For, Match, Show, Switch, type JSX } from "solid-js"
import { createStore } from "solid-js/store"
import { type FileContent, type FileDiff } from "@opencode-ai/sdk/v2"
@@ -118,6 +119,12 @@ function dataUrlFromValue(value: unknown): string | undefined {
return `data:${mime};base64,${content}`
}
function diffId(file: string): string | undefined {
const sum = checksum(file)
if (!sum) return
return `session-review-diff-${sum}`
}
type SessionReviewSelection = {
file: string
range: SelectedLineRange
@@ -489,7 +496,12 @@ export const SessionReview = (props: SessionReviewProps) => {
}
return (
<Accordion.Item value={diff.file} data-slot="session-review-accordion-item">
<Accordion.Item
value={diff.file}
id={diffId(diff.file)}
data-file={diff.file}
data-slot="session-review-accordion-item"
>
<StickyAccordionHeader>
<Accordion.Trigger>
<div data-slot="session-review-trigger-content">