Adjust changeset file toolbar to be visible on hover

Author: charlesvien

apps/array/src/renderer/features/task-detail/components/ChangesPanel.tsx

@@ -186,10 +186,12 @@ function ChangedFileItem({
       >
         {file.originalPath ? `${file.originalPath} → ${file.path}` : file.path}
       </Text>
+
       {hasLineStats && (
         <Flex
           align="center"
           gap="1"
+          className="group-hover:hidden"
           style={{ flexShrink: 0, fontSize: "10px", fontFamily: "monospace" }}
         >
           {(file.linesAdded ?? 0) > 0 && (
@@ -200,25 +202,40 @@ function ChangedFileItem({
           )}
         </Flex>
       )}
+
+      <Flex
+        align="center"
+        gap="1"
+        className="hidden group-hover:flex"
+        style={{ flexShrink: 0 }}
+      >
+        <Tooltip content="Discard changes">
+          <IconButton
+            size="1"
+            variant="ghost"
+            color="gray"
+            onClick={handleDiscard}
+            style={{
+              flexShrink: 0,
+              width: "18px",
+              height: "18px",
+              padding: 0,
+              marginLeft: "2px",
+              marginRight: "2px",
+            }}
+          >
+            <ArrowCounterClockwiseIcon size={12} />
+          </IconButton>
+        </Tooltip>
+      </Flex>
+
       <Badge
         size="1"
         color={indicator.color}
         style={{ flexShrink: 0, fontSize: "10px", padding: "0 4px" }}
       >
         {indicator.label}
       </Badge>
-      <Tooltip content="Discard changes">
-        <IconButton
-          size="1"
-          variant="ghost"
-          color="gray"
-          onClick={handleDiscard}
-          className={isActive ? "" : "opacity-0 group-hover:opacity-100"}
-          style={{ flexShrink: 0, width: "20px", height: "20px" }}
-        >
-          <ArrowCounterClockwiseIcon size={12} />
-        </IconButton>
-      </Tooltip>
     </Flex>
   );
 }

apps/array/src/renderer/features/task-detail/components/ChangesTabBadge.tsx

@@ -31,7 +31,7 @@ export function ChangesTabBadge({ taskId, task }: ChangesTabBadgeProps) {
   const filesLabel = diffStats.filesChanged === 1 ? "file" : "files";
 
   return (
-    <Flex gap="2">
+    <Flex gap="2" mr="2">
       {diffStats.linesAdded > 0 && (
         <Text size="1">
           <Text size="1" color="green">