-
-
-
-
-
-
- file.path)}>
-
- {(file) => (
-
- )}
-
-
-
-
-
- {(() => {
- const activeFile = local.file.active()!
- const view = local.file.view(activeFile.path)
- return (
-
-
-
-
- navigateChange(-1)}>
-
-
-
-
- navigateChange(1)}>
-
-
-
-
-
-
- local.file.setView(activeFile.path, "raw")}
- >
-
-
-
-
- local.file.setView(activeFile.path, "diff-unified")}
- >
-
-
-
-
- local.file.setView(activeFile.path, "diff-split")}
- >
-
-
-
-
-
+
+
+
+
+
+
+ file.path)}>
+
+ {(file) => }
+
+
+
+
+
+ {(() => {
+ const activeFile = local.file.active()!
+ const view = local.file.view(activeFile.path)
+ return (
+
+
+
+
+ navigateChange(-1)}>
+
+
+
+
+ navigateChange(1)}>
+
+
+
+
+
+
+ local.file.setView(activeFile.path, "raw")}
+ >
+
+
+
+
+ local.file.setView(activeFile.path, "diff-unified")}
+ >
+
+
+
+
+ local.file.setView(activeFile.path, "diff-split")}
+ >
+
+
+
+
-
- {(file) => (
-
- {(() => {
- const view = local.file.view(file.path)
- const showRaw = view === "raw" || !file.content?.diff
- const code = showRaw ? (file.content?.content ?? "") : (file.content?.diff ?? "")
- return
-
-
- {(() => {
- const id = activeItem()
- if (!id) return null
- const draggedFile = local.file.node(id)
- if (!draggedFile) return null
- return (
-
-
-
- )
- })()}
-
-
-
+
+
+ )
+ })()}
+
+
)
}
diff --git a/packages/desktop/src/components/file-tree.tsx b/packages/desktop/src/components/file-tree.tsx
index d31255ced..348e25ad7 100644
--- a/packages/desktop/src/components/file-tree.tsx
+++ b/packages/desktop/src/components/file-tree.tsx
@@ -1,6 +1,7 @@
import { useLocal } from "@/context"
import type { LocalFile } from "@/context/local"
-import { Collapsible, FileIcon, Tooltip } from "@/ui"
+import { Tooltip } from "@opencode-ai/ui"
+import { Collapsible, FileIcon } from "@/ui"
import { For, Match, Switch, Show, type ComponentProps, type ParentProps } from "solid-js"
import { Dynamic } from "solid-js/web"
diff --git a/packages/desktop/src/components/prompt-form.tsx b/packages/desktop/src/components/prompt-form.tsx
index 5e6441596..06fbfbb03 100644
--- a/packages/desktop/src/components/prompt-form.tsx
+++ b/packages/desktop/src/components/prompt-form.tsx
@@ -1,8 +1,8 @@
import { For, Show, createMemo, onCleanup, type JSX } from "solid-js"
import { createStore } from "solid-js/store"
import { Popover } from "@kobalte/core/popover"
-import { Button, FileIcon, Icon, IconButton, Tooltip } from "@/ui"
-import { Select } from "@/components/select"
+import { Tooltip, Button, Icon, Select } from "@opencode-ai/ui"
+import { FileIcon, IconButton } from "@/ui"
import { useLocal } from "@/context"
import type { FileContext, LocalFile } from "@/context/local"
import { getDirectory, getFilename } from "@/utils"
diff --git a/packages/desktop/src/components/resizeable-pane.tsx b/packages/desktop/src/components/resizeable-pane.tsx
deleted file mode 100644
index 49ccc4e70..000000000
--- a/packages/desktop/src/components/resizeable-pane.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-import { batch, createContext, createMemo, createSignal, onCleanup, Show, useContext } from "solid-js"
-import type { ComponentProps, JSX } from "solid-js"
-import { createStore } from "solid-js/store"
-import { useLocal } from "@/context"
-
-type PaneDefault = number | { size: number; visible?: boolean }
-
-type LayoutContextValue = {
- id: string
- register: (pane: string, options: { min?: number | string; max?: number | string }) => void
- size: (pane: string) => number
- visible: (pane: string) => boolean
- percent: (pane: string) => number
- next: (pane: string) => string | undefined
- startDrag: (left: string, right: string | undefined, event: MouseEvent) => void
- dragging: () => string | undefined
-}
-
-const LayoutContext = createContext
(undefined)
-
-export interface ResizeableLayoutProps {
- id: string
- defaults: Record
- class?: ComponentProps<"div">["class"]
- classList?: ComponentProps<"div">["classList"]
- children: JSX.Element
-}
-
-export interface ResizeablePaneProps {
- id: string
- minSize?: number | string
- maxSize?: number | string
- class?: ComponentProps<"div">["class"]
- classList?: ComponentProps<"div">["classList"]
- children: JSX.Element
-}
-
-export function ResizeableLayout(props: ResizeableLayoutProps) {
- const local = useLocal()
- const [meta, setMeta] = createStore>({})
- const [dragging, setDragging] = createSignal()
- let container: HTMLDivElement | undefined
-
- local.layout.ensure(props.id, props.defaults)
-
- const order = createMemo(() => local.layout.order(props.id))
- const visibleOrder = createMemo(() => order().filter((pane) => local.layout.visible(props.id, pane)))
- const totalVisible = createMemo(() => {
- const panes = visibleOrder()
- if (!panes.length) return 0
- return panes.reduce((total, pane) => total + local.layout.size(props.id, pane), 0)
- })
-
- const percent = (pane: string) => {
- const panes = visibleOrder()
- if (!panes.length) return 0
- const total = totalVisible()
- if (!total) return 100 / panes.length
- return (local.layout.size(props.id, pane) / total) * 100
- }
-
- const nextPane = (pane: string) => {
- const panes = visibleOrder()
- const index = panes.indexOf(pane)
- if (index === -1) return undefined
- return panes[index + 1]
- }
-
- const minMax = (pane: string) => meta[pane] ?? { min: 5, max: 95 }
-
- const pxToPercent = (px: number, total: number) => (px / total) * 100
-
- const boundsForPair = (left: string, right: string, total: number) => {
- const leftMeta = minMax(left)
- const rightMeta = minMax(right)
- const containerWidth = container?.getBoundingClientRect().width ?? 0
-
- let minLeft = leftMeta.min
- let maxLeft = leftMeta.max
- let minRight = rightMeta.min
- let maxRight = rightMeta.max
-
- if (containerWidth && leftMeta.minPx !== undefined) minLeft = pxToPercent(leftMeta.minPx, containerWidth)
- if (containerWidth && leftMeta.maxPx !== undefined) maxLeft = pxToPercent(leftMeta.maxPx, containerWidth)
- if (containerWidth && rightMeta.minPx !== undefined) minRight = pxToPercent(rightMeta.minPx, containerWidth)
- if (containerWidth && rightMeta.maxPx !== undefined) maxRight = pxToPercent(rightMeta.maxPx, containerWidth)
-
- const finalMinLeft = Math.max(minLeft, total - maxRight)
- const finalMaxLeft = Math.min(maxLeft, total - minRight)
- return {
- min: Math.min(finalMinLeft, finalMaxLeft),
- max: Math.max(finalMinLeft, finalMaxLeft),
- }
- }
-
- const setPair = (left: string, right: string, leftSize: number, rightSize: number) => {
- batch(() => {
- local.layout.setSize(props.id, left, leftSize)
- local.layout.setSize(props.id, right, rightSize)
- })
- }
-
- const startDrag = (left: string, right: string | undefined, event: MouseEvent) => {
- if (!right) return
- if (!container) return
- const rect = container.getBoundingClientRect()
- if (!rect.width) return
- event.preventDefault()
- const startX = event.clientX
- const startLeft = local.layout.size(props.id, left)
- const startRight = local.layout.size(props.id, right)
- const total = startLeft + startRight
- const bounds = boundsForPair(left, right, total)
- const move = (moveEvent: MouseEvent) => {
- const delta = ((moveEvent.clientX - startX) / rect.width) * 100
- const nextLeft = Math.max(bounds.min, Math.min(bounds.max, startLeft + delta))
- const nextRight = total - nextLeft
- setPair(left, right, nextLeft, nextRight)
- }
- const stop = () => {
- setDragging()
- document.removeEventListener("mousemove", move)
- document.removeEventListener("mouseup", stop)
- }
- setDragging(left)
- document.addEventListener("mousemove", move)
- document.addEventListener("mouseup", stop)
- onCleanup(() => stop())
- }
-
- const register = (pane: string, options: { min?: number | string; max?: number | string }) => {
- let min = 5
- let max = 95
- let minPx: number | undefined
- let maxPx: number | undefined
-
- if (typeof options.min === "string" && options.min.endsWith("px")) {
- minPx = parseInt(options.min)
- min = 0
- } else if (typeof options.min === "number") {
- min = options.min
- }
-
- if (typeof options.max === "string" && options.max.endsWith("px")) {
- maxPx = parseInt(options.max)
- max = 100
- } else if (typeof options.max === "number") {
- max = options.max
- }
-
- setMeta(pane, () => ({ min, max, minPx, maxPx }))
- const fallback = props.defaults[pane]
- local.layout.ensurePane(props.id, pane, fallback ?? { size: min, visible: true })
- }
-
- const contextValue: LayoutContextValue = {
- id: props.id,
- register,
- size: (pane) => local.layout.size(props.id, pane),
- visible: (pane) => local.layout.visible(props.id, pane),
- percent,
- next: nextPane,
- startDrag,
- dragging,
- }
-
- return (
-
- {
- container = node ?? undefined
- }}
- class={props.class ? `relative flex h-full w-full ${props.class}` : "relative flex h-full w-full"}
- classList={props.classList}
- >
- {props.children}
-
-
- )
-}
-
-export function ResizeablePane(props: ResizeablePaneProps) {
- const context = useContext(LayoutContext)!
- context.register(props.id, { min: props.minSize, max: props.maxSize })
- const visible = () => context.visible(props.id)
- const width = () => context.percent(props.id)
- const next = () => context.next(props.id)
- const dragging = () => context.dragging() === props.id
-
- return (
-
-
- {props.children}
-
- context.startDrag(props.id, next(), event)}
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
),
root!,
)
diff --git a/packages/desktop/src/pages/index.tsx b/packages/desktop/src/pages/index.tsx
index 2e26eb0c2..1174f1e16 100644
--- a/packages/desktop/src/pages/index.tsx
+++ b/packages/desktop/src/pages/index.tsx
@@ -1,5 +1,5 @@
-import { FileIcon, Icon, IconButton, Tooltip } from "@/ui"
-import * as KobalteTabs from "@kobalte/core/tabs"
+import { Icon, Tooltip } from "@opencode-ai/ui"
+import { FileIcon, IconButton } from "@/ui"
import FileTree from "@/components/file-tree"
import EditorPane from "@/components/editor-pane"
import { For, Match, onCleanup, onMount, Show, Switch } from "solid-js"
@@ -11,9 +11,7 @@ import SessionTimeline from "@/components/session-timeline"
import PromptForm, { type PromptContentPart, type PromptSubmitValue } from "@/components/prompt-form"
import { createStore } from "solid-js/store"
import { getDirectory, getFilename } from "@/utils"
-import { Select } from "@/components/select"
-import { Tabs } from "@/ui/tabs"
-import { Code } from "@/components/code"
+import { PromptInput } from "@/components/prompt-input"
export default function Page() {
const local = useLocal()
@@ -52,7 +50,7 @@ export default function Page() {
const focused = document.activeElement === inputRef
if (focused) {
if (event.key === "Escape") {
- inputRef?.blur()
+ // inputRef?.blur()
}
return
}
@@ -79,7 +77,7 @@ export default function Page() {
}
if (event.key.length === 1 && event.key !== "Unidentified") {
- inputRef?.focus()
+ // inputRef?.focus()
}
}
@@ -106,6 +104,8 @@ export default function Page() {
}
}
+ const handlePromptSubmit2 = () => {}
+
const handlePromptSubmit = async (prompt: PromptSubmitValue) => {
const existingSession = local.session.active()
let session = existingSession
@@ -231,51 +231,54 @@ export default function Page() {
-
-
- {(activeSession) => }
-
-
-
-
-
-
- No changes
}
- >
-
-
- {(path) => (
- -
-
-
- )}
-
-
-
-