|
|
@@ -223,237 +223,237 @@ export function SessionSidePanel(props: {
|
|
|
>
|
|
|
<Show when={open()}>
|
|
|
<div class="size-full flex border-l border-border-weaker-base">
|
|
|
- <div
|
|
|
- aria-hidden={!reviewOpen()}
|
|
|
- inert={!reviewOpen()}
|
|
|
- class="relative min-w-0 h-full flex-1 overflow-hidden bg-background-base"
|
|
|
- classList={{
|
|
|
- "pointer-events-none": !reviewOpen(),
|
|
|
- }}
|
|
|
- >
|
|
|
- <div class="size-full min-w-0 h-full bg-background-base">
|
|
|
- <DragDropProvider
|
|
|
- onDragStart={handleDragStart}
|
|
|
- onDragEnd={handleDragEnd}
|
|
|
- onDragOver={handleDragOver}
|
|
|
- collisionDetector={closestCenter}
|
|
|
- >
|
|
|
- <DragDropSensors />
|
|
|
- <ConstrainDragYAxis />
|
|
|
- <Tabs value={activeTab()} onChange={openTab}>
|
|
|
- <div class="sticky top-0 shrink-0 flex">
|
|
|
- <Tabs.List
|
|
|
- ref={(el: HTMLDivElement) => {
|
|
|
- const stop = createFileTabListSync({ el, contextOpen })
|
|
|
- onCleanup(stop)
|
|
|
- }}
|
|
|
- >
|
|
|
- <Show when={reviewTab() && props.canReview()}>
|
|
|
- <Tabs.Trigger value="review">
|
|
|
- <div class="flex items-center gap-1.5">
|
|
|
- <div>{language.t("session.tab.review")}</div>
|
|
|
- <Show when={props.hasReview()}>
|
|
|
- <div>{props.reviewCount()}</div>
|
|
|
- </Show>
|
|
|
- </div>
|
|
|
- </Tabs.Trigger>
|
|
|
- </Show>
|
|
|
- <Show when={contextOpen()}>
|
|
|
- <Tabs.Trigger
|
|
|
- value="context"
|
|
|
- closeButton={
|
|
|
- <TooltipKeybind
|
|
|
- title={language.t("common.closeTab")}
|
|
|
- keybind={command.keybind("tab.close")}
|
|
|
- placement="bottom"
|
|
|
- gutter={10}
|
|
|
- >
|
|
|
- <IconButton
|
|
|
- icon="close-small"
|
|
|
- variant="ghost"
|
|
|
- class="h-5 w-5"
|
|
|
- onClick={() => tabs().close("context")}
|
|
|
- aria-label={language.t("common.closeTab")}
|
|
|
- />
|
|
|
- </TooltipKeybind>
|
|
|
- }
|
|
|
- hideCloseButton
|
|
|
- onMiddleClick={() => tabs().close("context")}
|
|
|
- >
|
|
|
- <div class="flex items-center gap-2">
|
|
|
- <SessionContextUsage variant="indicator" />
|
|
|
- <div>{language.t("session.tab.context")}</div>
|
|
|
- </div>
|
|
|
- </Tabs.Trigger>
|
|
|
- </Show>
|
|
|
- <SortableProvider ids={openedTabs()}>
|
|
|
- <For each={openedTabs()}>{(tab) => <SortableTab tab={tab} onTabClose={tabs().close} />}</For>
|
|
|
- </SortableProvider>
|
|
|
- <div class="bg-background-stronger h-full shrink-0 sticky right-0 z-10 flex items-center justify-center pr-3">
|
|
|
- <TooltipKeybind
|
|
|
- title={language.t("command.file.open")}
|
|
|
- keybind={command.keybind("file.open")}
|
|
|
- class="flex items-center"
|
|
|
- >
|
|
|
- <IconButton
|
|
|
- icon="plus-small"
|
|
|
- variant="ghost"
|
|
|
- iconSize="large"
|
|
|
- class="!rounded-md"
|
|
|
- onClick={() => {
|
|
|
- void import("@/components/dialog-select-file").then((x) => {
|
|
|
- dialog.show(() => <x.DialogSelectFile mode="files" onOpenFile={showAllFiles} />)
|
|
|
- })
|
|
|
- }}
|
|
|
- aria-label={language.t("command.file.open")}
|
|
|
- />
|
|
|
- </TooltipKeybind>
|
|
|
- </div>
|
|
|
- </Tabs.List>
|
|
|
- </div>
|
|
|
-
|
|
|
- <Show when={reviewTab() && props.canReview()}>
|
|
|
- <Tabs.Content value="review" class="flex flex-col h-full overflow-hidden contain-strict">
|
|
|
- <Show when={reviewOpen() && activeTab() === "review"}>{props.reviewPanel()}</Show>
|
|
|
- </Tabs.Content>
|
|
|
- </Show>
|
|
|
-
|
|
|
- <Tabs.Content value="empty" class="flex flex-col h-full overflow-hidden contain-strict">
|
|
|
- <Show when={activeTab() === "empty"}>
|
|
|
- <div class="relative pt-2 flex-1 min-h-0 overflow-hidden">
|
|
|
- <div class="h-full px-6 pb-42 -mt-4 flex flex-col items-center justify-center text-center gap-6">
|
|
|
- <Mark class="w-14 opacity-10" />
|
|
|
- <div class="text-14-regular text-text-weak max-w-56">
|
|
|
- {language.t("session.files.selectToOpen")}
|
|
|
- </div>
|
|
|
+ <div
|
|
|
+ aria-hidden={!reviewOpen()}
|
|
|
+ inert={!reviewOpen()}
|
|
|
+ class="relative min-w-0 h-full flex-1 overflow-hidden bg-background-base"
|
|
|
+ classList={{
|
|
|
+ "pointer-events-none": !reviewOpen(),
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <div class="size-full min-w-0 h-full bg-background-base">
|
|
|
+ <DragDropProvider
|
|
|
+ onDragStart={handleDragStart}
|
|
|
+ onDragEnd={handleDragEnd}
|
|
|
+ onDragOver={handleDragOver}
|
|
|
+ collisionDetector={closestCenter}
|
|
|
+ >
|
|
|
+ <DragDropSensors />
|
|
|
+ <ConstrainDragYAxis />
|
|
|
+ <Tabs value={activeTab()} onChange={openTab}>
|
|
|
+ <div class="sticky top-0 shrink-0 flex">
|
|
|
+ <Tabs.List
|
|
|
+ ref={(el: HTMLDivElement) => {
|
|
|
+ const stop = createFileTabListSync({ el, contextOpen })
|
|
|
+ onCleanup(stop)
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Show when={reviewTab() && props.canReview()}>
|
|
|
+ <Tabs.Trigger value="review">
|
|
|
+ <div class="flex items-center gap-1.5">
|
|
|
+ <div>{language.t("session.tab.review")}</div>
|
|
|
+ <Show when={props.hasReview()}>
|
|
|
+ <div>{props.reviewCount()}</div>
|
|
|
+ </Show>
|
|
|
+ </div>
|
|
|
+ </Tabs.Trigger>
|
|
|
+ </Show>
|
|
|
+ <Show when={contextOpen()}>
|
|
|
+ <Tabs.Trigger
|
|
|
+ value="context"
|
|
|
+ closeButton={
|
|
|
+ <TooltipKeybind
|
|
|
+ title={language.t("common.closeTab")}
|
|
|
+ keybind={command.keybind("tab.close")}
|
|
|
+ placement="bottom"
|
|
|
+ gutter={10}
|
|
|
+ >
|
|
|
+ <IconButton
|
|
|
+ icon="close-small"
|
|
|
+ variant="ghost"
|
|
|
+ class="h-5 w-5"
|
|
|
+ onClick={() => tabs().close("context")}
|
|
|
+ aria-label={language.t("common.closeTab")}
|
|
|
+ />
|
|
|
+ </TooltipKeybind>
|
|
|
+ }
|
|
|
+ hideCloseButton
|
|
|
+ onMiddleClick={() => tabs().close("context")}
|
|
|
+ >
|
|
|
+ <div class="flex items-center gap-2">
|
|
|
+ <SessionContextUsage variant="indicator" />
|
|
|
+ <div>{language.t("session.tab.context")}</div>
|
|
|
+ </div>
|
|
|
+ </Tabs.Trigger>
|
|
|
+ </Show>
|
|
|
+ <SortableProvider ids={openedTabs()}>
|
|
|
+ <For each={openedTabs()}>{(tab) => <SortableTab tab={tab} onTabClose={tabs().close} />}</For>
|
|
|
+ </SortableProvider>
|
|
|
+ <div class="bg-background-stronger h-full shrink-0 sticky right-0 z-10 flex items-center justify-center pr-3">
|
|
|
+ <TooltipKeybind
|
|
|
+ title={language.t("command.file.open")}
|
|
|
+ keybind={command.keybind("file.open")}
|
|
|
+ class="flex items-center"
|
|
|
+ >
|
|
|
+ <IconButton
|
|
|
+ icon="plus-small"
|
|
|
+ variant="ghost"
|
|
|
+ iconSize="large"
|
|
|
+ class="!rounded-md"
|
|
|
+ onClick={() => {
|
|
|
+ void import("@/components/dialog-select-file").then((x) => {
|
|
|
+ dialog.show(() => <x.DialogSelectFile mode="files" onOpenFile={showAllFiles} />)
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ aria-label={language.t("command.file.open")}
|
|
|
+ />
|
|
|
+ </TooltipKeybind>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </Tabs.List>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Show when={reviewTab() && props.canReview()}>
|
|
|
+ <Tabs.Content value="review" class="flex flex-col h-full overflow-hidden contain-strict">
|
|
|
+ <Show when={reviewOpen() && activeTab() === "review"}>{props.reviewPanel()}</Show>
|
|
|
+ </Tabs.Content>
|
|
|
</Show>
|
|
|
- </Tabs.Content>
|
|
|
|
|
|
- <Show when={contextOpen()}>
|
|
|
- <Tabs.Content value="context" class="flex flex-col h-full overflow-hidden contain-strict">
|
|
|
- <Show when={activeTab() === "context"}>
|
|
|
+ <Tabs.Content value="empty" class="flex flex-col h-full overflow-hidden contain-strict">
|
|
|
+ <Show when={activeTab() === "empty"}>
|
|
|
<div class="relative pt-2 flex-1 min-h-0 overflow-hidden">
|
|
|
- <SessionContextTab />
|
|
|
+ <div class="h-full px-6 pb-42 -mt-4 flex flex-col items-center justify-center text-center gap-6">
|
|
|
+ <Mark class="w-14 opacity-10" />
|
|
|
+ <div class="text-14-regular text-text-weak max-w-56">
|
|
|
+ {language.t("session.files.selectToOpen")}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</Show>
|
|
|
</Tabs.Content>
|
|
|
- </Show>
|
|
|
-
|
|
|
- <Show when={activeFileTab()} keyed>
|
|
|
- {(tab) => <FileTabContent tab={tab} />}
|
|
|
- </Show>
|
|
|
- </Tabs>
|
|
|
- <DragOverlay>
|
|
|
- <Show when={store.activeDraggable} keyed>
|
|
|
- {(tab) => {
|
|
|
- const path = file.pathFromTab(tab)
|
|
|
- return (
|
|
|
- <div data-component="tabs-drag-preview">
|
|
|
- <Show when={path}>{(p) => <FileVisual active path={p()} />}</Show>
|
|
|
- </div>
|
|
|
- )
|
|
|
- }}
|
|
|
- </Show>
|
|
|
- </DragOverlay>
|
|
|
- </DragDropProvider>
|
|
|
+
|
|
|
+ <Show when={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">
|
|
|
+ <SessionContextTab />
|
|
|
+ </div>
|
|
|
+ </Show>
|
|
|
+ </Tabs.Content>
|
|
|
+ </Show>
|
|
|
+
|
|
|
+ <Show when={activeFileTab()} keyed>
|
|
|
+ {(tab) => <FileTabContent tab={tab} />}
|
|
|
+ </Show>
|
|
|
+ </Tabs>
|
|
|
+ <DragOverlay>
|
|
|
+ <Show when={store.activeDraggable} keyed>
|
|
|
+ {(tab) => {
|
|
|
+ const path = file.pathFromTab(tab)
|
|
|
+ return (
|
|
|
+ <div data-component="tabs-drag-preview">
|
|
|
+ <Show when={path}>{(p) => <FileVisual active path={p()} />}</Show>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Show>
|
|
|
+ </DragOverlay>
|
|
|
+ </DragDropProvider>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <Show when={shown()}>
|
|
|
- <div
|
|
|
- id="file-tree-panel"
|
|
|
- aria-hidden={!fileOpen()}
|
|
|
- inert={!fileOpen()}
|
|
|
- class="relative min-w-0 h-full shrink-0 overflow-hidden"
|
|
|
- classList={{
|
|
|
- "pointer-events-none": !fileOpen(),
|
|
|
- "transition-[width] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
|
|
|
- !props.size.active(),
|
|
|
- }}
|
|
|
- style={{ width: treeWidth() }}
|
|
|
- >
|
|
|
+ <Show when={shown()}>
|
|
|
<div
|
|
|
- class="h-full flex flex-col overflow-hidden group/filetree"
|
|
|
- classList={{ "border-l border-border-weaker-base": reviewOpen() }}
|
|
|
+ id="file-tree-panel"
|
|
|
+ aria-hidden={!fileOpen()}
|
|
|
+ inert={!fileOpen()}
|
|
|
+ class="relative min-w-0 h-full shrink-0 overflow-hidden"
|
|
|
+ classList={{
|
|
|
+ "pointer-events-none": !fileOpen(),
|
|
|
+ "transition-[width] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
|
|
|
+ !props.size.active(),
|
|
|
+ }}
|
|
|
+ style={{ width: treeWidth() }}
|
|
|
>
|
|
|
- <Tabs
|
|
|
- variant="pill"
|
|
|
- value={fileTreeTab()}
|
|
|
- onChange={setFileTreeTabValue}
|
|
|
- class="h-full"
|
|
|
- data-scope="filetree"
|
|
|
+ <div
|
|
|
+ class="h-full flex flex-col overflow-hidden group/filetree"
|
|
|
+ classList={{ "border-l border-border-weaker-base": reviewOpen() }}
|
|
|
>
|
|
|
- <Tabs.List>
|
|
|
- <Tabs.Trigger value="changes" class="flex-1" classes={{ button: "w-full" }}>
|
|
|
- {props.reviewCount()}{" "}
|
|
|
- {language.t(
|
|
|
- props.reviewCount() === 1 ? "session.review.change.one" : "session.review.change.other",
|
|
|
- )}
|
|
|
- </Tabs.Trigger>
|
|
|
- <Tabs.Trigger value="all" class="flex-1" classes={{ button: "w-full" }}>
|
|
|
- {language.t("session.files.all")}
|
|
|
- </Tabs.Trigger>
|
|
|
- </Tabs.List>
|
|
|
- <Tabs.Content value="changes" class="bg-background-stronger px-3 py-0">
|
|
|
- <Switch>
|
|
|
- <Match when={props.hasReview() || !props.diffsReady()}>
|
|
|
- <Show
|
|
|
- when={props.diffsReady()}
|
|
|
- fallback={
|
|
|
- <div class="px-2 py-2 text-12-regular text-text-weak">
|
|
|
- {language.t("common.loading")}
|
|
|
- {language.t("common.loading.ellipsis")}
|
|
|
- </div>
|
|
|
- }
|
|
|
- >
|
|
|
+ <Tabs
|
|
|
+ variant="pill"
|
|
|
+ value={fileTreeTab()}
|
|
|
+ onChange={setFileTreeTabValue}
|
|
|
+ class="h-full"
|
|
|
+ data-scope="filetree"
|
|
|
+ >
|
|
|
+ <Tabs.List>
|
|
|
+ <Tabs.Trigger value="changes" class="flex-1" classes={{ button: "w-full" }}>
|
|
|
+ {props.reviewCount()}{" "}
|
|
|
+ {language.t(
|
|
|
+ props.reviewCount() === 1 ? "session.review.change.one" : "session.review.change.other",
|
|
|
+ )}
|
|
|
+ </Tabs.Trigger>
|
|
|
+ <Tabs.Trigger value="all" class="flex-1" classes={{ button: "w-full" }}>
|
|
|
+ {language.t("session.files.all")}
|
|
|
+ </Tabs.Trigger>
|
|
|
+ </Tabs.List>
|
|
|
+ <Tabs.Content value="changes" class="bg-background-stronger px-3 py-0">
|
|
|
+ <Switch>
|
|
|
+ <Match when={props.hasReview() || !props.diffsReady()}>
|
|
|
+ <Show
|
|
|
+ when={props.diffsReady()}
|
|
|
+ fallback={
|
|
|
+ <div class="px-2 py-2 text-12-regular text-text-weak">
|
|
|
+ {language.t("common.loading")}
|
|
|
+ {language.t("common.loading.ellipsis")}
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ >
|
|
|
+ <FileTree
|
|
|
+ path=""
|
|
|
+ class="pt-3"
|
|
|
+ allowed={diffFiles()}
|
|
|
+ kinds={kinds()}
|
|
|
+ draggable={false}
|
|
|
+ active={props.activeDiff}
|
|
|
+ onFileClick={(node) => props.focusReviewDiff(node.path)}
|
|
|
+ />
|
|
|
+ </Show>
|
|
|
+ </Match>
|
|
|
+ </Switch>
|
|
|
+ </Tabs.Content>
|
|
|
+ <Tabs.Content value="all" class="bg-background-stronger px-3 py-0">
|
|
|
+ <Switch>
|
|
|
+ <Match when={nofiles()}>{empty(language.t("session.files.empty"))}</Match>
|
|
|
+ <Match when={true}>
|
|
|
<FileTree
|
|
|
path=""
|
|
|
class="pt-3"
|
|
|
- allowed={diffFiles()}
|
|
|
+ modified={diffFiles()}
|
|
|
kinds={kinds()}
|
|
|
- draggable={false}
|
|
|
- active={props.activeDiff}
|
|
|
- onFileClick={(node) => props.focusReviewDiff(node.path)}
|
|
|
+ onFileClick={(node) => openTab(file.tab(node.path))}
|
|
|
/>
|
|
|
- </Show>
|
|
|
- </Match>
|
|
|
- </Switch>
|
|
|
- </Tabs.Content>
|
|
|
- <Tabs.Content value="all" class="bg-background-stronger px-3 py-0">
|
|
|
- <Switch>
|
|
|
- <Match when={nofiles()}>{empty(language.t("session.files.empty"))}</Match>
|
|
|
- <Match when={true}>
|
|
|
- <FileTree
|
|
|
- path=""
|
|
|
- class="pt-3"
|
|
|
- modified={diffFiles()}
|
|
|
- kinds={kinds()}
|
|
|
- onFileClick={(node) => openTab(file.tab(node.path))}
|
|
|
- />
|
|
|
- </Match>
|
|
|
- </Switch>
|
|
|
- </Tabs.Content>
|
|
|
- </Tabs>
|
|
|
- </div>
|
|
|
- <Show when={fileOpen()}>
|
|
|
- <div onPointerDown={() => props.size.start()}>
|
|
|
- <ResizeHandle
|
|
|
- direction="horizontal"
|
|
|
- edge="start"
|
|
|
- size={layout.fileTree.width()}
|
|
|
- min={200}
|
|
|
- max={480}
|
|
|
- onResize={(width) => {
|
|
|
- props.size.touch()
|
|
|
- layout.fileTree.resize(width)
|
|
|
- }}
|
|
|
- />
|
|
|
+ </Match>
|
|
|
+ </Switch>
|
|
|
+ </Tabs.Content>
|
|
|
+ </Tabs>
|
|
|
</div>
|
|
|
- </Show>
|
|
|
- </div>
|
|
|
- </Show>
|
|
|
+ <Show when={fileOpen()}>
|
|
|
+ <div onPointerDown={() => props.size.start()}>
|
|
|
+ <ResizeHandle
|
|
|
+ direction="horizontal"
|
|
|
+ edge="start"
|
|
|
+ size={layout.fileTree.width()}
|
|
|
+ min={200}
|
|
|
+ max={480}
|
|
|
+ onResize={(width) => {
|
|
|
+ props.size.touch()
|
|
|
+ layout.fileTree.resize(width)
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </Show>
|
|
|
+ </div>
|
|
|
+ </Show>
|
|
|
</div>
|
|
|
</Show>
|
|
|
</aside>
|
opencode-agent[bot]