diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx index 9f038b6e8..d46ce095a 100644 --- a/packages/app/src/components/prompt-input.tsx +++ b/packages/app/src/components/prompt-input.tsx @@ -190,6 +190,7 @@ export const PromptInput: Component = (props) => { const wantsReview = item.commentOrigin === "review" || (item.commentOrigin !== "file" && commentInReview(item.path)) if (wantsReview) { layout.fileTree.setTab("changes") + if (!layout.fileTree.opened()) tabs().open("review") requestAnimationFrame(() => comments.setFocus(focus)) return } diff --git a/packages/app/src/context/layout.tsx b/packages/app/src/context/layout.tsx index d30fd11cf..2ea5f0435 100644 --- a/packages/app/src/context/layout.tsx +++ b/packages/app/src/context/layout.tsx @@ -624,11 +624,10 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext( const tabs = createMemo(() => store.sessionTabs[key()] ?? { all: [] }) return { tabs, - active: createMemo(() => (tabs().active === "review" ? undefined : tabs().active)), + active: createMemo(() => tabs().active), all: createMemo(() => tabs().all.filter((tab) => tab !== "review")), setActive(tab: string | undefined) { const session = key() - if (tab === "review") return if (!store.sessionTabs[session]) { setStore("sessionTabs", session, { all: [], active: tab }) } else { @@ -645,10 +644,18 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext( } }, async open(tab: string) { - if (tab === "review") return const session = key() const current = store.sessionTabs[session] ?? { all: [] } + if (tab === "review") { + if (!store.sessionTabs[session]) { + setStore("sessionTabs", session, { all: current.all, active: tab }) + return + } + setStore("sessionTabs", session, "active", tab) + return + } + if (tab === "context") { const all = [tab, ...current.all.filter((x) => x !== tab)] if (!store.sessionTabs[session]) { diff --git a/packages/app/src/pages/session.tsx b/packages/app/src/pages/session.tsx index a845d3a65..7b4f31c50 100644 --- a/packages/app/src/pages/session.tsx +++ b/packages/app/src/pages/session.tsx @@ -23,6 +23,7 @@ import { IconButton } from "@opencode-ai/ui/icon-button" import { Button } from "@opencode-ai/ui/button" import { Icon } from "@opencode-ai/ui/icon" import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip" +import { DiffChanges } from "@opencode-ai/ui/diff-changes" import { ResizeHandle } from "@opencode-ai/ui/resize-handle" import { Tabs } from "@opencode-ai/ui/tabs" import { useCodeComponent } from "@opencode-ai/ui/context/code" @@ -1096,11 +1097,12 @@ export default function Page() { }, 0) } + const reviewTab = createMemo(() => isDesktop() && !layout.fileTree.opened()) const contextOpen = createMemo(() => tabs().active() === "context" || tabs().all().includes("context")) const openedTabs = createMemo(() => tabs() .all() - .filter((tab) => tab !== "context"), + .filter((tab) => tab !== "context" && tab !== "review"), ) const mobileChanges = createMemo(() => !isDesktop() && store.mobileTab === "changes") @@ -1126,6 +1128,46 @@ export default function Page() { setFileTreeTab("all") } + const reviewPanel = () => ( +
+
+ + + {language.t("session.review.loadingChanges")}
} + > + addCommentToContext({ ...comment, origin: "review" })} + comments={comments.all()} + focusedComment={comments.focus()} + onFocusedCommentChange={comments.setFocus} + onViewFile={(path) => { + showAllFiles() + const value = file.tab(path) + tabs().open(value) + file.load(path) + }} + /> + + + +
+ +
{language.t("session.review.empty")}
+
+
+ +
+ + ) + createEffect( on( () => tabs().active(), @@ -1229,29 +1271,56 @@ export default function Page() { const activeTab = createMemo(() => { const active = tabs().active() if (active === "context") return "context" + if (active === "review" && reviewTab()) return "review" if (active && file.pathFromTab(active)) return normalizeTab(active) const first = openedTabs()[0] if (first) return first if (contextOpen()) return "context" + if (reviewTab() && hasReview()) return "review" return "empty" }) createEffect(() => { if (!layout.ready()) return if (tabs().active()) return - if (openedTabs().length === 0 && !contextOpen()) return + if (openedTabs().length === 0 && !contextOpen() && !(reviewTab() && hasReview())) return const next = activeTab() if (next === "empty") return tabs().setActive(next) }) + createEffect( + on( + () => layout.fileTree.opened(), + (opened, prev) => { + if (prev === undefined) return + if (!isDesktop()) return + + if (opened) { + const active = tabs().active() + const tab = active === "review" || (!active && hasReview()) ? "changes" : "all" + layout.fileTree.setTab(tab) + return + } + + if (fileTreeTab() !== "changes") return + tabs().setActive("review") + }, + { defer: true }, + ), + ) + createEffect(() => { const id = params.id if (!id) return - const wants = isDesktop() ? fileTreeTab() === "changes" : store.mobileTab === "changes" + const wants = isDesktop() + ? layout.fileTree.opened() + ? fileTreeTab() === "changes" + : activeTab() === "review" + : store.mobileTab === "changes" if (!wants) return if (sync.data.session_diff[id] !== undefined) return if (sync.status === "loading") return @@ -2114,7 +2183,7 @@ export default function Page() { >
+ + +
+ + + +
+
{language.t("session.tab.review")}
+ +
+ {reviewCount()} +
+
+
+
+
+
+ + + {reviewPanel()} + + +
@@ -2710,47 +2802,7 @@ export default function Page() { } > -
-
- - - {language.t("session.review.loadingChanges")}
- } - > - addCommentToContext({ ...comment, origin: "review" })} - comments={comments.all()} - focusedComment={comments.focus()} - onFocusedCommentChange={comments.setFocus} - onViewFile={(path) => { - showAllFiles() - const value = file.tab(path) - tabs().open(value) - file.load(path) - }} - /> - - - -
- -
- {language.t("session.review.empty")} -
-
-
- -
-
+ {reviewPanel()}