diff options
Diffstat (limited to 'packages/app/src/pages')
| -rw-r--r-- | packages/app/src/pages/index.tsx | 636 |
1 files changed, 103 insertions, 533 deletions
diff --git a/packages/app/src/pages/index.tsx b/packages/app/src/pages/index.tsx index 08c2a4a39..128c6adfd 100644 --- a/packages/app/src/pages/index.tsx +++ b/packages/app/src/pages/index.tsx @@ -1,21 +1,11 @@ -import { Button, FileIcon, Icon, IconButton, Logo, Tooltip } from "@/ui" +import { FileIcon, Icon, IconButton, Tooltip } from "@/ui" import { Tabs } from "@/ui/tabs" -import { Select } from "@/components/select" import FileTree from "@/components/file-tree" +import EditorPane from "@/components/editor-pane" import { For, Match, onCleanup, onMount, Show, Switch } from "solid-js" import { SelectDialog } from "@/components/select-dialog" -import { useLocal, useSDK } from "@/context" -import { Code } from "@/components/code" -import { - DragDropProvider, - DragDropSensors, - DragOverlay, - SortableProvider, - createSortable, - closestCenter, - useDragDropContext, -} from "@thisbeyond/solid-dnd" -import type { DragEvent, Transformer } from "@thisbeyond/solid-dnd" +import { useLocal } from "@/context" +import { ResizeableLayout, ResizeablePane } from "@/components/resizeable-pane" import type { LocalFile } from "@/context/local" import SessionList from "@/components/session-list" import SessionTimeline from "@/components/session-timeline" @@ -23,18 +13,17 @@ import { createStore } from "solid-js/store" import { getDirectory, getFilename } from "@/utils" export default function Page() { - const sdk = useSDK() const local = useLocal() const [store, setStore] = createStore({ clickTimer: undefined as number | undefined, - activeItem: undefined as string | undefined, - prompt: "", - dragging: undefined as "left" | "right" | undefined, modelSelectOpen: false, fileSelectOpen: false, }) - let inputRef: HTMLInputElement | undefined = undefined + const layoutKey = "workspace" + const timelinePane = "timeline" + + let inputRef: HTMLTextAreaElement | undefined = undefined const MOD = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform) ? "Meta" : "Control" @@ -46,54 +35,52 @@ export default function Page() { document.removeEventListener("keydown", handleKeyDown) }) - const handleKeyDown = (e: KeyboardEvent) => { - if (e.getModifierState(MOD) && e.shiftKey && e.key.toLowerCase() === "p") { - e.preventDefault() + const handleKeyDown = (event: KeyboardEvent) => { + if (event.getModifierState(MOD) && event.shiftKey && event.key.toLowerCase() === "p") { + event.preventDefault() // TODO: command palette return } - if (e.getModifierState(MOD) && e.key.toLowerCase() === "p") { - e.preventDefault() + if (event.getModifierState(MOD) && event.key.toLowerCase() === "p") { + event.preventDefault() setStore("fileSelectOpen", true) return } - const inputFocused = document.activeElement === inputRef - if (inputFocused) { - if (e.key === "Escape") { + const focused = document.activeElement === inputRef + if (focused) { + if (event.key === "Escape") { inputRef?.blur() } return } - if (document.activeElement?.id === "select-filter") { - return - } - if (local.file.active()) { - if (e.getModifierState(MOD)) { - if (e.key.toLowerCase() === "a") { + const active = local.file.active()! + if (event.key === "Enter" && active.selection) { + local.context.add({ + type: "file", + path: active.path, + selection: { ...active.selection }, + }) + return + } + + if (event.getModifierState(MOD)) { + if (event.key.toLowerCase() === "a") { return } - if (e.key.toLowerCase() === "c") { + if (event.key.toLowerCase() === "c") { return } } } - if (e.key.length === 1 && e.key !== "Unidentified") { + if (event.key.length === 1 && event.key !== "Unidentified") { inputRef?.focus() } } - const navigateChange = (dir: 1 | -1) => { - const active = local.file.active() - if (!active) return - const current = local.file.changeIndex(active.path) - const next = current == undefined ? (dir === 1 ? 0 : -1) : current + dir - local.file.setChangeIndex(active.path, next) - } - const resetClickTimer = () => { if (!store.clickTimer) return clearTimeout(store.clickTimer) @@ -117,190 +104,80 @@ export default function Page() { } } - const handleTabChange = (path: string) => { - local.file.open(path) - } - - const handleTabClose = (file: LocalFile) => { - local.file.close(file.path) - } - - const onDragStart = (event: any) => { - setStore("activeItem", event.draggable.id as string) - } - - const onDragOver = (event: DragEvent) => { - const { draggable, droppable } = event - if (draggable && droppable) { - const currentFiles = local.file.opened().map((f) => f.path) - const fromIndex = currentFiles.indexOf(draggable.id.toString()) - const toIndex = currentFiles.indexOf(droppable.id.toString()) - if (fromIndex !== toIndex) { - local.file.move(draggable.id.toString(), toIndex) - } - } - } - - const onDragEnd = () => { - setStore("activeItem", undefined) - } - - const handleLeftDragStart = (e: MouseEvent) => { - e.preventDefault() - setStore("dragging", "left") - const startX = e.clientX - const startWidth = local.layout.leftWidth() - - const handleMouseMove = (e: MouseEvent) => { - const deltaX = e.clientX - startX - const newWidth = startWidth + deltaX - local.layout.setLeftWidth(newWidth) - } - - const handleMouseUp = () => { - setStore("dragging", undefined) - document.removeEventListener("mousemove", handleMouseMove) - document.removeEventListener("mouseup", handleMouseUp) - } - - document.addEventListener("mousemove", handleMouseMove) - document.addEventListener("mouseup", handleMouseUp) - } - - const handleRightDragStart = (e: MouseEvent) => { - e.preventDefault() - setStore("dragging", "right") - const startX = e.clientX - const startWidth = local.layout.rightWidth() - - const handleMouseMove = (e: MouseEvent) => { - const deltaX = startX - e.clientX - const newWidth = startWidth + deltaX - local.layout.setRightWidth(newWidth) - } - - const handleMouseUp = () => { - setStore("dragging", undefined) - document.removeEventListener("mousemove", handleMouseMove) - document.removeEventListener("mouseup", handleMouseUp) - } - - document.addEventListener("mousemove", handleMouseMove) - document.addEventListener("mouseup", handleMouseUp) - } - - const handleSubmit = async (e: SubmitEvent) => { - e.preventDefault() - const prompt = store.prompt - setStore("prompt", "") - inputRef?.blur() - - const session = - (local.layout.rightPane() ? local.session.active() : undefined) ?? - (await sdk.session.create().then((x) => x.data!)) - local.session.setActive(session!.id) - local.layout.openRightPane() - - const response = await sdk.session.prompt({ - path: { id: session!.id }, - body: { - agent: local.agent.current()!.name, - model: { modelID: local.model.current()!.id, providerID: local.model.current()!.provider.id }, - parts: [ - { - type: "text", - text: prompt, - }, - ...local.file - .opened() - .filter((f) => f.selection || local.file.active()?.path === f.path) - .flatMap((f) => [ - { - type: "file" as const, - mime: "text/plain", - url: `file://${f.absolute}${f.selection ? `?start=${f.selection.startLine}&end=${f.selection.endLine}` : ""}`, - filename: f.name, - source: { - type: "file" as const, - text: { - value: "@" + f.name, - start: 0, // f.start, - end: 0, // f.end, - }, - path: f.absolute, - }, - }, - ]), - ], - }, - }) - - console.log("response", response) - } - return ( <div class="relative"> - <div - class="fixed top-0 left-0 h-full border-r border-border-subtle/30 flex flex-col overflow-hidden bg-background z-10" - style={`width: ${local.layout.leftWidth()}px`} - > - <Tabs class="relative flex flex-col h-full" defaultValue="files"> - <div class="sticky top-0 shrink-0 flex"> - <Tabs.List class="grow w-full after:hidden"> - <Tabs.Trigger value="files" class="flex-1 justify-center text-xs"> - Files - </Tabs.Trigger> - <Tabs.Trigger value="changes" class="flex-1 justify-center text-xs"> - Changes - </Tabs.Trigger> - </Tabs.List> - </div> - <Tabs.Content value="files" class="grow min-h-0 py-2 bg-background"> - <FileTree path="" onFileClick={handleFileClick} /> - </Tabs.Content> - <Tabs.Content value="changes" class="grow min-h-0 py-2 bg-background"> - <Show - when={local.file.changes().length} - fallback={<div class="px-2 text-xs text-text-muted">No changes</div>} - > - <ul class=""> - <For each={local.file.changes()}> - {(path) => ( - <li> - <button - onClick={() => local.file.open(path, { view: "diff-unified", pinned: true })} - class="w-full flex items-center px-2 py-0.5 gap-x-2 text-text-muted grow min-w-0 cursor-pointer hover:bg-background-element" - > - <FileIcon node={{ path, type: "file" }} class="shrink-0 size-3" /> - <span class="text-xs text-text whitespace-nowrap">{getFilename(path)}</span> - <span class="text-xs text-text-muted/60 whitespace-nowrap truncate min-w-0"> - {getDirectory(path)} - </span> - </button> - </li> - )} - </For> - </ul> - </Show> - </Tabs.Content> - </Tabs> - </div> - <div - class="fixed top-0 h-full w-1.5 bg-transparent cursor-col-resize z-50 group" - style={`left: ${local.layout.leftWidth()}px`} - onMouseDown={(e) => handleLeftDragStart(e)} + <ResizeableLayout + id={layoutKey} + defaults={{ + explorer: { size: 24, visible: true }, + editor: { size: 56, visible: true }, + timeline: { size: 20, visible: false }, + }} + class="h-screen" > - <div - classList={{ - "w-0.5 h-full bg-transparent group-hover:bg-border-active transition-colors": true, - "bg-border-active!": store.dragging === "left", - }} - /> - </div> - <Show when={local.layout.rightPane()}> - <div - class="fixed top-0 right-0 h-full border-l border-border-subtle/30 flex flex-col overflow-hidden bg-background z-10" - style={`width: ${local.layout.rightWidth()}px`} + <ResizeablePane + id="explorer" + minSize="150px" + maxSize="300px" + class="border-r border-border-subtle/30 bg-background z-10 overflow-hidden" + > + <Tabs class="relative flex flex-col h-full" defaultValue="files"> + <div class="sticky top-0 shrink-0 flex"> + <Tabs.List class="grow w-full after:hidden"> + <Tabs.Trigger value="files" class="flex-1 justify-center text-xs"> + Files + </Tabs.Trigger> + <Tabs.Trigger value="changes" class="flex-1 justify-center text-xs"> + Changes + </Tabs.Trigger> + </Tabs.List> + </div> + <Tabs.Content value="files" class="grow min-h-0 py-2 bg-background"> + <FileTree path="" onFileClick={handleFileClick} /> + </Tabs.Content> + <Tabs.Content value="changes" class="grow min-h-0 py-2 bg-background"> + <Show + when={local.file.changes().length} + fallback={<div class="px-2 text-xs text-text-muted">No changes</div>} + > + <ul class=""> + <For each={local.file.changes()}> + {(path) => ( + <li> + <button + onClick={() => local.file.open(path, { view: "diff-unified", pinned: true })} + class="w-full flex items-center px-2 py-0.5 gap-x-2 text-text-muted grow min-w-0 cursor-pointer hover:bg-background-element" + > + <FileIcon node={{ path, type: "file" }} class="shrink-0 size-3" /> + <span class="text-xs text-text whitespace-nowrap">{getFilename(path)}</span> + <span class="text-xs text-text-muted/60 whitespace-nowrap truncate min-w-0"> + {getDirectory(path)} + </span> + </button> + </li> + )} + </For> + </ul> + </Show> + </Tabs.Content> + </Tabs> + </ResizeablePane> + <ResizeablePane id="editor" minSize={30} maxSize={80} class="bg-background"> + <EditorPane + layoutKey={layoutKey} + timelinePane={timelinePane} + onFileClick={handleFileClick} + onOpenModelSelect={() => setStore("modelSelectOpen", true)} + onInputRefChange={(element: HTMLTextAreaElement | null) => { + inputRef = element ?? undefined + }} + /> + </ResizeablePane> + <ResizeablePane + id="timeline" + minSize={20} + maxSize={40} + class="border-l border-border-subtle/30 bg-background z-10 overflow-hidden" > <div class="relative flex-1 min-h-0 overflow-y-auto overflow-x-hidden"> <Show when={local.session.active()} fallback={<SessionList />}> @@ -326,216 +203,8 @@ export default function Page() { )} </Show> </div> - </div> - <div - class="fixed top-0 h-full w-1.5 bg-transparent cursor-col-resize z-50 group flex justify-end" - style={`right: ${local.layout.rightWidth()}px`} - onMouseDown={(e) => handleRightDragStart(e)} - > - <div - classList={{ - "w-0.5 h-full bg-transparent group-hover:bg-border-active transition-colors": true, - "bg-border-active!": store.dragging === "right", - }} - /> - </div> - </Show> - <div - class="relative" - style={`margin-left: ${local.layout.leftWidth()}px; margin-right: ${local.layout.rightPane() ? local.layout.rightWidth() : 0}px`} - > - <Logo - size={64} - variant="ornate" - class="absolute top-2/5 left-1/2 transform -translate-x-1/2 -translate-y-1/2" - /> - <DragDropProvider - onDragStart={onDragStart} - onDragEnd={onDragEnd} - onDragOver={onDragOver} - collisionDetector={closestCenter} - > - <DragDropSensors /> - <ConstrainDragYAxis /> - <Tabs - class="relative grow w-full flex flex-col h-screen" - value={local.file.active()?.path} - onChange={handleTabChange} - > - <div class="sticky top-0 shrink-0 flex"> - <Tabs.List class="grow"> - <SortableProvider ids={local.file.opened().map((f) => f.path)}> - <For each={local.file.opened()}> - {(file) => <SortableTab file={file} onTabClick={handleFileClick} onTabClose={handleTabClose} />} - </For> - </SortableProvider> - </Tabs.List> - <div class="shrink-0 h-full flex items-center gap-1 px-2 border-b border-border-subtle/40"> - <Show when={local.file.active() && local.file.active()!.content?.diff}> - {(() => { - const f = local.file.active()! - const view = local.file.view(f.path) - return ( - <div class="flex items-center gap-1"> - <Show when={view !== "raw"}> - <div class="mr-1 flex items-center gap-1"> - <Tooltip value="Previous change" placement="bottom"> - <IconButton size="xs" variant="ghost" onClick={() => navigateChange(-1)}> - <Icon name="arrow-up" size={14} /> - </IconButton> - </Tooltip> - <Tooltip value="Next change" placement="bottom"> - <IconButton size="xs" variant="ghost" onClick={() => navigateChange(1)}> - <Icon name="arrow-down" size={14} /> - </IconButton> - </Tooltip> - </div> - </Show> - <Tooltip value="Raw" placement="bottom"> - <IconButton - size="xs" - variant="ghost" - classList={{ - "text-text": view === "raw", - "text-text-muted/70": view !== "raw", - "bg-background-element": view === "raw", - }} - onClick={() => local.file.setView(f.path, "raw")} - > - <Icon name="file-text" size={14} /> - </IconButton> - </Tooltip> - <Tooltip value="Unified diff" placement="bottom"> - <IconButton - size="xs" - variant="ghost" - classList={{ - "text-text": view === "diff-unified", - "text-text-muted/70": view !== "diff-unified", - "bg-background-element": view === "diff-unified", - }} - onClick={() => local.file.setView(f.path, "diff-unified")} - > - <Icon name="checklist" size={14} /> - </IconButton> - </Tooltip> - <Tooltip value="Split diff" placement="bottom"> - <IconButton - size="xs" - variant="ghost" - classList={{ - "text-text": view === "diff-split", - "text-text-muted/70": view !== "diff-split", - "bg-background-element": view === "diff-split", - }} - onClick={() => local.file.setView(f.path, "diff-split")} - > - <Icon name="columns" size={14} /> - </IconButton> - </Tooltip> - </div> - ) - })()} - </Show> - <Tooltip value={local.layout.rightPane() ? "Close pane" : "Open pane"} placement="bottom"> - <IconButton size="xs" variant="ghost" onClick={() => local.layout.toggleRightPane()}> - <Icon name={local.layout.rightPane() ? "close-pane" : "open-pane"} size={14} /> - </IconButton> - </Tooltip> - </div> - </div> - <For each={local.file.opened()}> - {(file) => ( - <Tabs.Content value={file.path} class="grow h-full pt-1 select-text"> - {(() => { - const view = local.file.view(file.path) - const showRaw = view === "raw" || !file.content?.diff - const code = showRaw ? (file.content?.content ?? "") : (file.content?.diff ?? "") - return <Code path={file.path} code={code} /> - })()} - </Tabs.Content> - )} - </For> - </Tabs> - <DragOverlay> - {store.activeItem && - (() => { - const draggedFile = local.file.node(store.activeItem!) - return ( - <div - class="relative px-3 h-8 flex items-center - text-sm font-medium text-text whitespace-nowrap - shrink-0 bg-background-panel - border-x border-border-subtle/40 border-b border-b-transparent" - > - <TabVisual file={draggedFile} /> - </div> - ) - })()} - </DragOverlay> - </DragDropProvider> - <form - onSubmit={handleSubmit} - class="peer/editor absolute inset-x-4 z-50 flex items-center justify-center" - classList={{ - "bottom-8": !!local.file.active(), - "bottom-2/5": local.file.active() === undefined, - }} - > - <div - class="w-full max-w-xl min-w-0 p-2 mx-auto rounded-lg isolate backdrop-blur-xs - flex flex-col gap-1 - bg-gradient-to-b from-background-panel/90 to-background/90 - ring-1 ring-border-active/50 border border-transparent - shadow-[0_0_33px_rgba(0,0,0,0.8)] - focus-within:ring-2 focus-within:ring-primary/40 focus-within:border-primary" - > - <div class="flex flex-wrap gap-1"> - <Show when={local.file.active()}> - <FileTag - default - file={local.file.active()!} - onClose={() => local.file.close(local.file.active()?.path ?? "")} - /> - </Show> - <For each={local.file.opened().filter((x) => x.selection)}> - {(file) => <FileTag file={file} onClose={() => local.file.select(file.path, undefined)} />} - </For> - </div> - <input - ref={(el) => (inputRef = el)} - type="text" - value={store.prompt} - onInput={(e) => setStore("prompt", e.currentTarget.value)} - placeholder="Placeholder text..." - class="w-full p-1 pb-4 text-text font-light placeholder-text-muted/70 text-sm focus:outline-none" - /> - <div class="flex justify-between items-center text-xs text-text-muted"> - <div class="flex gap-2 items-center"> - <Select - options={local.agent.list().map((a) => a.name)} - current={local.agent.current().name} - onSelect={local.agent.set} - class="uppercase" - /> - <Button onClick={() => setStore("modelSelectOpen", true)}> - {local.model.current()?.name ?? "Select model"} - <Icon name="chevron-down" size={24} class="text-text-muted" /> - </Button> - <span class="text-text-muted/70 whitespace-nowrap">{local.model.current()?.provider.name}</span> - </div> - <div class="flex gap-1 items-center"> - <IconButton class="text-text-muted" size="xs" variant="ghost"> - <Icon name="photo" size={16} /> - </IconButton> - <IconButton class="text-background-panel! bg-primary rounded-full!" size="xs" variant="ghost"> - <Icon name="arrow-up" size={14} /> - </IconButton> - </div> - </div> - </div> - </form> - </div> + </ResizeablePane> + </ResizeableLayout> <Show when={store.modelSelectOpen}> <SelectDialog key={(x) => `${x.provider.id}:${x.id}`} @@ -607,102 +276,3 @@ export default function Page() { </div> ) } - -const TabVisual = (props: { file: LocalFile }) => { - return ( - <div class="flex items-center gap-x-1.5"> - <FileIcon node={props.file} class="" /> - <span classList={{ "text-xs": true, "text-primary": !!props.file.status?.status, italic: !props.file.pinned }}> - {props.file.name} - </span> - <span class="text-xs opacity-70"> - <Switch> - <Match when={props.file.status?.status === "modified"}> - <span class="text-primary">M</span> - </Match> - <Match when={props.file.status?.status === "added"}> - <span class="text-success">A</span> - </Match> - <Match when={props.file.status?.status === "deleted"}> - <span class="text-error">D</span> - </Match> - </Switch> - </span> - </div> - ) -} - -const SortableTab = (props: { - file: LocalFile - onTabClick: (file: LocalFile) => void - onTabClose: (file: LocalFile) => void -}) => { - const sortable = createSortable(props.file.path) - - return ( - // @ts-ignore - <div use:sortable classList={{ "opacity-0": sortable.isActiveDraggable }}> - <Tooltip value={props.file.path} placement="bottom"> - <div class="relative"> - <Tabs.Trigger value={props.file.path} class="peer/tab pr-7" onClick={() => props.onTabClick(props.file)}> - <TabVisual file={props.file} /> - </Tabs.Trigger> - <IconButton - class="absolute right-1 top-1.5 opacity-0 text-text-muted/60 - peer-data-[selected]/tab:opacity-100 peer-data-[selected]/tab:text-text - peer-data-[selected]/tab:hover:bg-border-subtle - hover:opacity-100 peer-hover/tab:opacity-100" - size="xs" - variant="ghost" - onClick={() => props.onTabClose(props.file)} - > - <Icon name="close" size={16} /> - </IconButton> - </div> - </Tooltip> - </div> - ) -} - -const FileTag = (props: { file: LocalFile; default?: boolean; onClose: () => void }) => ( - <div - class="flex items-center bg-background group/tag - border border-border-subtle/60 border-dashed - rounded-md text-xs text-text-muted" - > - <IconButton class="text-text-muted" size="xs" variant="ghost" onClick={props.onClose}> - <Switch fallback={<FileIcon node={props.file} class="group-hover/tag:hidden size-3!" />}> - <Match when={props.default}> - <Icon name="file" class="group-hover/tag:hidden" size={12} /> - </Match> - </Switch> - <Icon name="close" class="hidden group-hover/tag:block" size={12} /> - </IconButton> - <div class="pr-1 flex gap-1 items-center"> - <span>{props.file.name}</span> - <Show when={!props.default && props.file.selection}> - <span class=""> - ({props.file.selection!.startLine}-{props.file.selection!.endLine}) - </span> - </Show> - </div> - </div> -) - -const ConstrainDragYAxis = () => { - const context = useDragDropContext() - if (!context) return <></> - const [, { onDragStart, onDragEnd, addTransformer, removeTransformer }] = context - const transformer: Transformer = { - id: "constrain-y-axis", - order: 100, - callback: (transform) => ({ ...transform, y: 0 }), - } - onDragStart((event: any) => { - addTransformer("draggables", event.draggable.id, transformer) - }) - onDragEnd((event: any) => { - removeTransformer("draggables", event.draggable.id, transformer.id) - }) - return <></> -} |