feat(desktop): review pane toggle

Author: adamdotdevin

packages/desktop/src/components/header.tsx

@@ -109,6 +109,35 @@ export function Header(props: {
                   </Show>
                 </div>
                 <div class="flex items-center gap-4">
+                  <Tooltip
+                    class="hidden md:block shrink-0"
+                    value={
+                      <div class="flex items-center gap-2">
+                        <span>Toggle review</span>
+                        <span class="text-icon-base text-12-medium">{command.keybind("review.toggle")}</span>
+                      </div>
+                    }
+                  >
+                    <Button variant="ghost" class="group/review-toggle size-6 p-0" onClick={layout.review.toggle}>
+                      <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
+                        <Icon
+                          size="small"
+                          name={layout.review.opened() ? "layout-right-full" : "layout-right"}
+                          class="group-hover/review-toggle:hidden"
+                        />
+                        <Icon
+                          size="small"
+                          name="layout-right-partial"
+                          class="hidden group-hover/review-toggle:inline-block"
+                        />
+                        <Icon
+                          size="small"
+                          name={layout.review.opened() ? "layout-right" : "layout-right-full"}
+                          class="hidden group-active/review-toggle:inline-block"
+                        />
+                      </div>
+                    </Button>
+                  </Tooltip>
                   <Tooltip
                     class="hidden md:block shrink-0"
                     value={

packages/desktop/src/context/layout.tsx

@@ -46,6 +46,9 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
           opened: false,
           height: 280,
         },
+        review: {
+          opened: true,
+        },
         session: {
           width: 600,
         },
@@ -158,6 +161,18 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
           setStore("terminal", "height", height)
         },
       },
+      review: {
+        opened: createMemo(() => store.review?.opened ?? true),
+        open() {
+          setStore("review", "opened", true)
+        },
+        close() {
+          setStore("review", "opened", false)
+        },
+        toggle() {
+          setStore("review", "opened", (x) => !x)
+        },
+      },
       session: {
         width: createMemo(() => store.session?.width ?? 600),
         resize(width: number) {

packages/desktop/src/pages/session.tsx

@@ -221,6 +221,15 @@ export default function Page() {
       slash: "terminal",
       onSelect: () => layout.terminal.toggle(),
     },
+    {
+      id: "review.toggle",
+      title: "Toggle review",
+      description: "Show or hide the review panel",
+      category: "View",
+      keybind: "mod+b",
+      slash: "review",
+      onSelect: () => layout.review.toggle(),
+    },
     {
       id: "terminal.new",
       title: "New terminal",
@@ -533,7 +542,7 @@ export default function Page() {
     )
   }
 
-  const showTabs = createMemo(() => diffs().length > 0 || tabs().all().length > 0)
+  const showTabs = createMemo(() => layout.review.opened() && (diffs().length > 0 || tabs().all().length > 0))
 
   const mobileWorking = createMemo(() => status().type !== "idle")
   const mobileAutoScroll = createAutoScroll({