fix: unified message input, dropdowns, comboboxes and more

apps/code/package.json

@@ -130,7 +130,7 @@
     "@posthog/electron-trpc": "workspace:*",
     "@posthog/git": "workspace:*",
     "@posthog/hedgehog-mode": "^0.0.48",
-    "@posthog/quill": "0.1.0-alpha.6",
+    "@posthog/quill": "0.1.0-alpha.7",
     "@posthog/shared": "workspace:*",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-icons": "^1.3.2",

apps/code/src/renderer/components/HeaderRow.tsx

@@ -1,4 +1,5 @@
 import { DiffStatsBadge } from "@features/code-review/components/DiffStatsBadge";
+import { BranchSelector } from "@features/git-interaction/components/BranchSelector";
 import { CloudGitInteractionHeader } from "@features/git-interaction/components/CloudGitInteractionHeader";
 import { GitInteractionHeader } from "@features/git-interaction/components/GitInteractionHeader";
 import { SidebarTrigger } from "@features/sidebar/components/SidebarTrigger";
@@ -26,6 +27,7 @@ export function HeaderRow() {
   const activeTaskId = view.type === "task-detail" ? view.data?.id : undefined;
   const activeWorkspace = useWorkspace(activeTaskId);
   const isCloudTask = activeWorkspace?.mode === "cloud";
+  const showTaskSection = view.type === "task-detail";
 
   const handleLeftSidebarMouseDown = (e: React.MouseEvent) => {
     e.preventDefault();
@@ -94,24 +96,46 @@ export function HeaderRow() {
         </Flex>
       )}
 
-      {view.type === "task-detail" && view.data && (
+      {showTaskSection && view.type === "task-detail" && view.data && (
         <Flex
           align="center"
-          gap="3"
-          pr="3"
+          justify="end"
+          gap="2"
+          pr="1"
+          pl="2"
           style={{
             height: "100%",
+            borderLeft: "1px solid var(--gray-6)",
             flexShrink: 0,
+            maxWidth: "50%",
+            overflow: "hidden",
           }}
         >
-          <div className="no-drag">
-            {isCloudTask ? (
-              <CloudGitInteractionHeader taskId={view.data.id} />
-            ) : (
-              <GitInteractionHeader taskId={view.data.id} />
+          {activeWorkspace &&
+            (activeWorkspace.branchName || activeWorkspace.baseBranch) && (
+              <div className="no-drag flex h-full min-w-0 items-center">
+                <BranchSelector
+                  repoPath={
+                    activeWorkspace.worktreePath ??
+                    activeWorkspace.folderPath ??
+                    null
+                  }
+                  currentBranch={
+                    activeWorkspace.branchName ??
+                    activeWorkspace.baseBranch ??
+                    null
+                  }
+                  taskId={view.data.id}
+                />
+              </div>
             )}
-          </div>
           <DiffStatsBadge task={view.data} />
+
+          {isCloudTask ? (
+            <CloudGitInteractionHeader taskId={view.data.id} />
+          ) : (
+            <GitInteractionHeader taskId={view.data.id} />
+          )}
         </Flex>
       )}
     </Flex>

apps/code/src/renderer/features/code-review/components/DiffSettingsMenu.tsx

@@ -1,5 +1,12 @@
 import { DotsThree } from "@phosphor-icons/react";
-import { DropdownMenu, IconButton, Text } from "@radix-ui/themes";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@posthog/quill";
 import { useDiffViewerStore } from "@renderer/features/code-editor/stores/diffViewerStore";
 
 export function DiffSettingsMenu() {
@@ -19,42 +26,38 @@ export function DiffSettingsMenu() {
   );
 
   return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger>
-        <IconButton
-          size="1"
-          variant="ghost"
-          color="gray"
-          style={{ cursor: "pointer" }}
-        >
-          <DotsThree size={16} weight="bold" />
-        </IconButton>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content size="1" align="end">
-        <DropdownMenu.Item onSelect={toggleWordWrap}>
-          <Text size="1">
-            {wordWrap ? "Disable word wrap" : "Enable word wrap"}
-          </Text>
-        </DropdownMenu.Item>
-        <DropdownMenu.Item onSelect={toggleWordDiffs}>
-          <Text size="1">
-            {wordDiffs ? "Disable word diffs" : "Enable word diffs"}
-          </Text>
-        </DropdownMenu.Item>
-        <DropdownMenu.Item onSelect={toggleHideWhitespaceChanges}>
-          <Text size="1">
-            {hideWhitespaceChanges ? "Show whitespace" : "Hide whitespace"}
-          </Text>
-        </DropdownMenu.Item>
-        <DropdownMenu.Separator />
-        <DropdownMenu.Item onSelect={toggleShowReviewComments}>
-          <Text size="1">
-            {showReviewComments
-              ? "Hide review comments"
-              : "Show review comments"}
-          </Text>
-        </DropdownMenu.Item>
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            size="icon-sm"
+            aria-label="Diff settings"
+            className="rounded-xs"
+          >
+            <DotsThree size={16} weight="bold" />
+          </Button>
+        }
+      />
+      <DropdownMenuContent
+        align="end"
+        side="bottom"
+        sideOffset={6}
+        className="min-w-[180px]"
+      >
+        <DropdownMenuItem onClick={toggleWordWrap}>
+          {wordWrap ? "Disable word wrap" : "Enable word wrap"}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={toggleWordDiffs}>
+          {wordDiffs ? "Disable word diffs" : "Enable word diffs"}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={toggleHideWhitespaceChanges}>
+          {hideWhitespaceChanges ? "Show whitespace" : "Hide whitespace"}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={toggleShowReviewComments}>
+          {showReviewComments ? "Hide review comments" : "Show review comments"}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 }

apps/code/src/renderer/features/code-review/components/ReviewShell.tsx

@@ -434,7 +434,7 @@ export function ReviewShell({
         theme: { dark: "github-dark", light: "github-light" },
       }}
     >
-      <Flex direction="column" height="100%">
+      <Flex direction="column" height="100%" id="review-shell">
         <ReviewToolbar
           taskId={taskId}
           fileCount={fileCount}
@@ -449,6 +449,7 @@ export function ReviewShell({
           <div
             ref={scrollContainerRef}
             className="scrollbar-hide flex-1 space-y-2 overflow-auto"
+            id="review-shell-diff-container"
             style={{ minWidth: 0 }}
           >
             {children}
@@ -491,7 +492,7 @@ function FileHeaderRow({
         fontFamily: "var(--code-font-family)",
         fontSize: "12px",
         cursor: "pointer",
-        userSelect: "none",
+        // userSelect: "none",
         width: "100%",
         background: "none",
         border: "none",

apps/code/src/renderer/features/code-review/components/ReviewToolbar.tsx

@@ -1,20 +1,14 @@
 import { Tooltip } from "@components/ui/Tooltip";
 import { useDiffViewerStore } from "@features/code-editor/stores/diffViewerStore";
-import {
-  ArrowsClockwise,
-  ArrowsIn,
-  ArrowsOut,
-  Columns,
-  CornersIn,
-  CornersOut,
-  Rows,
-} from "@phosphor-icons/react";
-import { Flex, IconButton, Separator, Text } from "@radix-ui/themes";
+import { ArrowsClockwise, Columns, Rows, X } from "@phosphor-icons/react";
+import { Button } from "@posthog/quill";
+import { Flex, Separator, Text } from "@radix-ui/themes";
 import { DiffSettingsMenu } from "@renderer/features/code-review/components/DiffSettingsMenu";
 import {
   type ReviewMode,
   useReviewNavigationStore,
 } from "@renderer/features/code-review/stores/reviewNavigationStore";
+import { FoldVertical, Maximize, Minimize, UnfoldVertical } from "lucide-react";
 import { memo } from "react";
 
 interface ReviewToolbarProps {
@@ -31,8 +25,6 @@ interface ReviewToolbarProps {
 export const ReviewToolbar = memo(function ReviewToolbar({
   taskId,
   fileCount,
-  linesAdded,
-  linesRemoved,
   allExpanded,
   onExpandAll,
   onCollapseAll,
@@ -50,16 +42,21 @@ export const ReviewToolbar = memo(function ReviewToolbar({
     setReviewMode(taskId, next);
   };
 
+  const handleClose = () => {
+    setReviewMode(taskId, "closed");
+  };
+
   return (
     <Flex
-      px="3"
-      py="2"
+      id="review-toolbar"
+      px="1"
       align="center"
       gap="3"
       style={{
         borderBottom: "1px solid var(--gray-6)",
         background: "var(--color-background)",
         position: "sticky",
+        height: "32px",
         top: 0,
         zIndex: 2,
         flexShrink: 0,
@@ -68,76 +65,67 @@ export const ReviewToolbar = memo(function ReviewToolbar({
       <Text size="1" weight="medium">
         {fileCount} file{fileCount !== 1 ? "s" : ""} changed
       </Text>
-      <Flex
-        align="center"
-        gap="1"
-        style={{ fontSize: "11px", fontFamily: "monospace" }}
-      >
-        {linesAdded > 0 && (
-          <Text style={{ color: "var(--green-9)" }}>+{linesAdded}</Text>
-        )}
-        {linesRemoved > 0 && (
-          <Text style={{ color: "var(--red-9)" }}>-{linesRemoved}</Text>
-        )}
-      </Flex>
 
-      <Flex align="center" gap="2" ml="auto">
+      <Flex align="center" gap="1" ml="auto">
         {onRefresh && (
           <Tooltip content="Refresh diff">
-            <IconButton
-              size="1"
-              variant="ghost"
-              color="gray"
-              onClick={onRefresh}
-              style={{ cursor: "pointer" }}
-            >
+            <Button size="icon-sm" onClick={onRefresh} className="rounded-xs">
               <ArrowsClockwise size={14} />
-            </IconButton>
+            </Button>
           </Tooltip>
         )}
 
-        <IconButton
-          size="1"
-          variant="ghost"
-          color="gray"
-          onClick={toggleViewMode}
-          style={{ cursor: "pointer" }}
-        >
-          {viewMode === "split" ? <Rows size={14} /> : <Columns size={14} />}
-        </IconButton>
-
-        <IconButton
-          size="1"
-          variant="ghost"
-          color="gray"
-          onClick={allExpanded ? onCollapseAll : onExpandAll}
-          style={{ cursor: "pointer" }}
-        >
-          {allExpanded ? <ArrowsIn size={14} /> : <ArrowsOut size={14} />}
-        </IconButton>
-
-        <DiffSettingsMenu />
+        <Tooltip content={viewMode === "split" ? "Split view" : "Columns view"}>
+          <Button
+            size="icon-sm"
+            onClick={toggleViewMode}
+            className="rounded-xs"
+          >
+            {viewMode === "split" ? <Rows size={14} /> : <Columns size={14} />}
+          </Button>
+        </Tooltip>
 
-        <Separator orientation="vertical" size="1" />
+        <Tooltip content={allExpanded ? "Collapse all" : "Expand all"}>
+          <Button
+            size="icon-sm"
+            onClick={allExpanded ? onCollapseAll : onExpandAll}
+            className="rounded-xs"
+          >
+            {allExpanded ? (
+              <FoldVertical size={12} />
+            ) : (
+              <UnfoldVertical size={12} />
+            )}
+          </Button>
+        </Tooltip>
 
         <Tooltip
           content={
             reviewMode === "expanded" ? "Collapse review" : "Expand review"
           }
         >
-          <IconButton
-            size="1"
-            variant="ghost"
-            color="gray"
+          <Button
+            size="icon-sm"
             onClick={handleToggleExpand}
-            style={{ cursor: "pointer" }}
+            aria-selected={reviewMode === "expanded"}
+            className="rounded-xs"
           >
             {reviewMode === "expanded" ? (
-              <CornersIn size={14} />
+              <Minimize size={12} />
             ) : (
-              <CornersOut size={14} />
+              <Maximize size={12} />
             )}
-          </IconButton>
+          </Button>
+        </Tooltip>
+
+        <Separator orientation="vertical" size="1" />
+
+        <DiffSettingsMenu />
+
+        <Tooltip content="Close review">
+          <Button size="icon-sm" onClick={handleClose} className="rounded-xs">
+            <X size={14} />
+          </Button>
         </Tooltip>
       </Flex>
     </Flex>