chore: generate
This commit is contained in:
opencode-agent[bot]
@@ -223,237 +223,237 @@ export function SessionSidePanel(props: {
|
|||||||
>
|
>
|
||||||
<Show when={open()}>
|
<Show when={open()}>
|
||||||
<div class="size-full flex border-l border-border-weaker-base">
|
<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>
|
|
||||||
</div>
|
|
||||||
</Show>
|
|
||||||
</Tabs.Content>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<Show when={shown()}>
|
|
||||||
<div
|
<div
|
||||||
id="file-tree-panel"
|
aria-hidden={!reviewOpen()}
|
||||||
aria-hidden={!fileOpen()}
|
inert={!reviewOpen()}
|
||||||
inert={!fileOpen()}
|
class="relative min-w-0 h-full flex-1 overflow-hidden bg-background-base"
|
||||||
class="relative min-w-0 h-full shrink-0 overflow-hidden"
|
|
||||||
classList={{
|
classList={{
|
||||||
"pointer-events-none": !fileOpen(),
|
"pointer-events-none": !reviewOpen(),
|
||||||
"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() }}
|
|
||||||
>
|
>
|
||||||
<div
|
<div class="size-full min-w-0 h-full bg-background-base">
|
||||||
class="h-full flex flex-col overflow-hidden group/filetree"
|
<DragDropProvider
|
||||||
classList={{ "border-l border-border-weaker-base": reviewOpen() }}
|
onDragStart={handleDragStart}
|
||||||
>
|
onDragEnd={handleDragEnd}
|
||||||
<Tabs
|
onDragOver={handleDragOver}
|
||||||
variant="pill"
|
collisionDetector={closestCenter}
|
||||||
value={fileTreeTab()}
|
|
||||||
onChange={setFileTreeTabValue}
|
|
||||||
class="h-full"
|
|
||||||
data-scope="filetree"
|
|
||||||
>
|
>
|
||||||
<Tabs.List>
|
<DragDropSensors />
|
||||||
<Tabs.Trigger value="changes" class="flex-1" classes={{ button: "w-full" }}>
|
<ConstrainDragYAxis />
|
||||||
{props.reviewCount()}{" "}
|
<Tabs value={activeTab()} onChange={openTab}>
|
||||||
{language.t(
|
<div class="sticky top-0 shrink-0 flex">
|
||||||
props.reviewCount() === 1 ? "session.review.change.one" : "session.review.change.other",
|
<Tabs.List
|
||||||
)}
|
ref={(el: HTMLDivElement) => {
|
||||||
</Tabs.Trigger>
|
const stop = createFileTabListSync({ el, contextOpen })
|
||||||
<Tabs.Trigger value="all" class="flex-1" classes={{ button: "w-full" }}>
|
onCleanup(stop)
|
||||||
{language.t("session.files.all")}
|
}}
|
||||||
</Tabs.Trigger>
|
>
|
||||||
</Tabs.List>
|
<Show when={reviewTab() && props.canReview()}>
|
||||||
<Tabs.Content value="changes" class="bg-background-stronger px-3 py-0">
|
<Tabs.Trigger value="review">
|
||||||
<Switch>
|
<div class="flex items-center gap-1.5">
|
||||||
<Match when={props.hasReview() || !props.diffsReady()}>
|
<div>{language.t("session.tab.review")}</div>
|
||||||
<Show
|
<Show when={props.hasReview()}>
|
||||||
when={props.diffsReady()}
|
<div>{props.reviewCount()}</div>
|
||||||
fallback={
|
</Show>
|
||||||
<div class="px-2 py-2 text-12-regular text-text-weak">
|
|
||||||
{language.t("common.loading")}
|
|
||||||
{language.t("common.loading.ellipsis")}
|
|
||||||
</div>
|
</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>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
</Tabs.Content>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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() }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="h-full flex flex-col overflow-hidden group/filetree"
|
||||||
|
classList={{ "border-l border-border-weaker-base": reviewOpen() }}
|
||||||
|
>
|
||||||
|
<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
|
<FileTree
|
||||||
path=""
|
path=""
|
||||||
class="pt-3"
|
class="pt-3"
|
||||||
allowed={diffFiles()}
|
modified={diffFiles()}
|
||||||
kinds={kinds()}
|
kinds={kinds()}
|
||||||
draggable={false}
|
onFileClick={(node) => openTab(file.tab(node.path))}
|
||||||
active={props.activeDiff}
|
|
||||||
onFileClick={(node) => props.focusReviewDiff(node.path)}
|
|
||||||
/>
|
/>
|
||||||
</Show>
|
</Match>
|
||||||
</Match>
|
</Switch>
|
||||||
</Switch>
|
</Tabs.Content>
|
||||||
</Tabs.Content>
|
</Tabs>
|
||||||
<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)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</Show>
|
<Show when={fileOpen()}>
|
||||||
</div>
|
<div onPointerDown={() => props.size.start()}>
|
||||||
</Show>
|
<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>
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
</aside>
|
</aside>
|
||||||
|
|||||||
Reference in New Issue
Block a user