feat(code): migrate header row items to Quill

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

@@ -84,7 +84,7 @@ export function HeaderRow() {
         <Flex
           align="center"
           justify="between"
-          px="3"
+          pl="3"
           style={{
             height: "100%",
             overflow: "hidden",
@@ -100,12 +100,11 @@ export function HeaderRow() {
         <Flex
           align="center"
           justify="end"
-          gap="2"
-          pr="3"
-          pl="2"
+          gap="1"
+          pr="1"
+          pl="1"
           style={{
             height: "100%",
-            borderLeft: "1px solid var(--gray-6)",
             flexShrink: 0,
             maxWidth: "50%",
             overflow: "hidden",

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

@@ -5,6 +5,7 @@ import { useCwd } from "@features/sidebar/hooks/useCwd";
 import { useCloudChangedFiles } from "@features/task-detail/hooks/useCloudChangedFiles";
 import { useWorkspace } from "@features/workspace/hooks/useWorkspace";
 import { GitDiff } from "@phosphor-icons/react";
+import { Button } from "@posthog/quill";
 import { Flex, Text } from "@radix-ui/themes";
 import {
   formatHotkey,
@@ -70,10 +71,11 @@ export function DiffStatsBadge({ task }: DiffStatsBadgeProps) {
       shortcut={formatHotkey(SHORTCUTS.TOGGLE_REVIEW_PANEL)}
       side="bottom"
     >
-      <button
-        type="button"
+      <Button
         onClick={handleClick}
-        className={`no-drag inline-flex h-6 cursor-pointer items-center gap-1 rounded-[var(--radius-1)] border-none px-1.5 font-mono text-[11px] text-[var(--gray-11)] transition-colors duration-100 hover:bg-[var(--gray-a3)] ${isOpen ? "bg-[var(--gray-a3)]" : "bg-transparent"}`}
+        variant="outline"
+        size="sm"
+        className={`no-drag font-mono text-(--gray-11) text-[11px] transition-colors duration-100 hover:bg-(--gray-a3) ${isOpen ? "bg-(--gray-a3)" : "bg-transparent"}`}
       >
         <GitDiff size={14} style={{ flexShrink: 0 }} />
         {hasChanges ? (
@@ -92,7 +94,7 @@ export function DiffStatsBadge({ task }: DiffStatsBadgeProps) {
         ) : (
           <Text style={{ color: "var(--gray-9)", fontSize: "11px" }}>0</Text>
         )}
-      </button>
+      </Button>
     </Tooltip>
   );
 }

apps/code/src/renderer/features/git-interaction/components/GitInteractionMenu.tsx

@@ -12,8 +12,16 @@ import {
   GitFork,
   GitPullRequest,
 } from "@phosphor-icons/react";
-import { ChevronDownIcon } from "@radix-ui/react-icons";
-import { Button, DropdownMenu, Flex, Spinner, Text } from "@radix-ui/themes";
+import {
+  Button,
+  ButtonGroup,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@posthog/quill";
+import { Spinner } from "@radix-ui/themes";
+import { ChevronDown } from "lucide-react";
 
 interface GitInteractionMenuProps {
   primaryAction: GitMenuAction;
@@ -23,51 +31,6 @@ interface GitInteractionMenuProps {
   onSelect: (actionId: GitMenuActionId) => void;
 }
 
-function ActionButton({
-  action,
-  isPrimary,
-  isBusy,
-  allDisabled,
-  onClick,
-}: {
-  action: GitMenuAction;
-  isPrimary: boolean;
-  isBusy?: boolean;
-  allDisabled?: boolean;
-  onClick: () => void;
-}) {
-  const icon = getActionIcon(action.id);
-  const isDisabled = !action.enabled || isBusy;
-  const button = (
-    <Button
-      size="1"
-      variant={allDisabled ? "soft" : "solid"}
-      color={allDisabled ? "gray" : undefined}
-      disabled={isDisabled}
-      onClick={onClick}
-      style={{
-        borderTopRightRadius: isPrimary ? 0 : undefined,
-        borderBottomRightRadius: isPrimary ? 0 : undefined,
-      }}
-    >
-      <Flex align="center" gap="2">
-        {isBusy ? <Spinner size="1" /> : icon}
-        <Text size="1">{action.label}</Text>
-      </Flex>
-    </Button>
-  );
-
-  if (!action.enabled && action.disabledReason) {
-    return (
-      <Tooltip content={action.disabledReason} side="bottom">
-        <span style={{ display: "inline-flex" }}>{button}</span>
-      </Tooltip>
-    );
-  }
-
-  return button;
-}
-
 function getActionIcon(actionId: GitMenuActionId) {
   switch (actionId) {
     case "commit":
@@ -98,69 +61,81 @@ export function GitInteractionMenu({
 }: GitInteractionMenuProps) {
   const allDisabled = actions.every((a) => !a.enabled);
   const showDropdown = actions.length > 1;
+  const variant = allDisabled ? "default" : "primary";
+  const isPrimaryDisabled = !primaryAction.enabled || isBusy;
+
+  const primaryButton = (
+    <Button
+      variant={variant}
+      disabled={isPrimaryDisabled}
+      onClick={() => onPrimary(primaryAction.id)}
+      className="bg-primary text-primary-foreground not-disabled:hover:bg-primary/80 hover:text-primary-foreground/80"
+    >
+      {isBusy ? <Spinner size="1" /> : getActionIcon(primaryAction.id)}
+      {primaryAction.label}
+    </Button>
+  );
+
+  const wrappedPrimaryButton =
+    !primaryAction.enabled && primaryAction.disabledReason ? (
+      <Tooltip content={primaryAction.disabledReason} side="bottom">
+        <span style={{ display: "inline-flex" }}>{primaryButton}</span>
+      </Tooltip>
+    ) : (
+      primaryButton
+    );
+
+  if (!showDropdown || allDisabled) {
+    return wrappedPrimaryButton;
+  }
 
   return (
-    <Flex align="center" gap="0">
-      <ActionButton
-        action={primaryAction}
-        isPrimary={showDropdown}
-        isBusy={isBusy}
-        allDisabled={allDisabled}
-        onClick={() => onPrimary(primaryAction.id)}
-      />
-      {showDropdown && (
-        <DropdownMenu.Root>
-          <DropdownMenu.Trigger>
+    <ButtonGroup>
+      {wrappedPrimaryButton}
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={
             <Button
-              size="1"
-              variant={allDisabled ? "soft" : "solid"}
-              color={allDisabled ? "gray" : undefined}
+              className="bg-primary not-disabled:hover:bg-primary/80"
+              variant={variant}
               disabled={isBusy}
-              style={{
-                borderTopLeftRadius: 0,
-                borderBottomLeftRadius: 0,
-                borderLeft: allDisabled
-                  ? undefined
-                  : "1px solid var(--accent-8)",
-                paddingLeft: "6px",
-                paddingRight: "6px",
-              }}
-            >
-              <ChevronDownIcon />
-            </Button>
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Content size="1" align="end">
-            {actions.map((action) => {
-              const icon = getActionIcon(action.id);
-              const itemContent = (
-                <Flex align="center" gap="2">
-                  {icon}
-                  <Text size="1">{action.label}</Text>
-                </Flex>
-              );
-
-              if (!action.enabled && action.disabledReason) {
-                return (
-                  <Tooltip key={action.id} content={action.disabledReason}>
-                    <DropdownMenu.Item disabled>
-                      {itemContent}
-                    </DropdownMenu.Item>
-                  </Tooltip>
-                );
-              }
+            />
+          }
+        >
+          <ChevronDown size={12} />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          {actions.map((action) => {
+            const icon = getActionIcon(action.id);
+            const itemContent = (
+              <>
+                {icon} {action.label}
+              </>
+            );
 
+            if (!action.enabled && action.disabledReason) {
               return (
-                <DropdownMenu.Item
+                <Tooltip
                   key={action.id}
-                  onSelect={() => onSelect(action.id)}
+                  content={action.disabledReason}
+                  side="left"
                 >
-                  {itemContent}
-                </DropdownMenu.Item>
+                  <DropdownMenuItem disabled>{itemContent}</DropdownMenuItem>
+                </Tooltip>
               );
-            })}
-          </DropdownMenu.Content>
-        </DropdownMenu.Root>
-      )}
-    </Flex>
+            }
+
+            return (
+              <DropdownMenuItem
+                key={action.id}
+                onSelect={() => onSelect(action.id)}
+              >
+                {itemContent}
+              </DropdownMenuItem>
+            );
+          })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </ButtonGroup>
   );
 }