static tabs and tab badges

Author: jonathanlab

apps/array/src/renderer/features/panels/components/DraggableTab.tsx

@@ -1,6 +1,6 @@
 import { useSortable } from "@dnd-kit/react/sortable";
 import { Cross2Icon } from "@radix-ui/react-icons";
-import { Box, Button, Flex, IconButton, Text } from "@radix-ui/themes";
+import { Box, Flex, IconButton, Text } from "@radix-ui/themes";
 import type React from "react";
 
 interface DraggableTabProps {
@@ -9,10 +9,10 @@ interface DraggableTabProps {
   label: string;
   isActive: boolean;
   index: number;
-  draggable?: boolean;
   onSelect: () => void;
   onClose?: () => void;
   icon?: React.ReactNode;
+  badge?: React.ReactNode;
   hasUnsavedChanges?: boolean;
 }
 
@@ -22,10 +22,10 @@ export const DraggableTab: React.FC<DraggableTabProps> = ({
   label,
   isActive,
   index,
-  draggable = true,
   onSelect,
   onClose,
   icon,
+  badge,
   hasUnsavedChanges,
 }) => {
   const { ref, isDragging } = useSortable({
@@ -37,35 +37,8 @@ export const DraggableTab: React.FC<DraggableTabProps> = ({
       easing: "ease",
     },
     data: { tabId, panelId, type: "tab" },
-    disabled: !draggable,
   });
 
-  if (!draggable) {
-    return (
-      <Flex align="center" flexShrink="0" ml="2" mr="2" px="2" py="1">
-        <Button
-          variant="ghost"
-          color="gray"
-          size="1"
-          onClick={onSelect}
-          style={{
-            backgroundColor: isActive ? "var(--gray-a3)" : undefined,
-          }}
-        >
-          {icon && (
-            <Box style={{ display: "flex", alignItems: "center" }}>{icon}</Box>
-          )}
-          {label}
-          {hasUnsavedChanges && (
-            <Text size="1" style={{ color: "var(--amber-9)" }}>
-              •
-            </Text>
-          )}
-        </Button>
-      </Flex>
-    );
-  }
-
   return (
     <Flex
       ref={ref}
@@ -107,6 +80,7 @@ export const DraggableTab: React.FC<DraggableTabProps> = ({
       >
         {label}
       </Text>
+      {badge}
       {hasUnsavedChanges && (
         <Text size="1" style={{ color: "var(--amber-9)", marginLeft: "2px" }}>
           •

apps/array/src/renderer/features/panels/components/PanelTab.tsx

@@ -0,0 +1,59 @@
+import type React from "react";
+import { DraggableTab } from "./DraggableTab";
+import { StaticTab } from "./StaticTab";
+
+interface PanelTabProps {
+  tabId: string;
+  panelId: string;
+  label: string;
+  isActive: boolean;
+  index: number;
+  draggable?: boolean;
+  onSelect: () => void;
+  onClose?: () => void;
+  icon?: React.ReactNode;
+  badge?: React.ReactNode;
+  hasUnsavedChanges?: boolean;
+}
+
+export const PanelTab: React.FC<PanelTabProps> = ({
+  tabId,
+  panelId,
+  label,
+  isActive,
+  index,
+  draggable = true,
+  onSelect,
+  onClose,
+  icon,
+  badge,
+  hasUnsavedChanges,
+}) => {
+  if (!draggable) {
+    return (
+      <StaticTab
+        label={label}
+        isActive={isActive}
+        onSelect={onSelect}
+        icon={icon}
+        badge={badge}
+        hasUnsavedChanges={hasUnsavedChanges}
+      />
+    );
+  }
+
+  return (
+    <DraggableTab
+      tabId={tabId}
+      panelId={panelId}
+      label={label}
+      isActive={isActive}
+      index={index}
+      onSelect={onSelect}
+      onClose={onClose}
+      icon={icon}
+      badge={badge}
+      hasUnsavedChanges={hasUnsavedChanges}
+    />
+  );
+};

apps/array/src/renderer/features/panels/components/StaticTab.tsx

@@ -0,0 +1,45 @@
+import { Box, Button, Flex, Text } from "@radix-ui/themes";
+import type React from "react";
+
+interface StaticTabProps {
+  label: string;
+  isActive: boolean;
+  onSelect: () => void;
+  icon?: React.ReactNode;
+  badge?: React.ReactNode;
+  hasUnsavedChanges?: boolean;
+}
+
+export const StaticTab: React.FC<StaticTabProps> = ({
+  label,
+  isActive,
+  onSelect,
+  icon,
+  badge,
+  hasUnsavedChanges,
+}) => {
+  return (
+    <Flex align="center" flexShrink="0" ml="2" mr="2" px="2" py="1">
+      <Button
+        variant="ghost"
+        color="gray"
+        size="1"
+        onClick={onSelect}
+        style={{
+          backgroundColor: isActive ? "var(--gray-a3)" : undefined,
+        }}
+      >
+        {icon && (
+          <Box style={{ display: "flex", alignItems: "center" }}>{icon}</Box>
+        )}
+        {label}
+        {badge}
+        {hasUnsavedChanges && (
+          <Text size="1" style={{ color: "var(--amber-9)" }}>
+            •
+          </Text>
+        )}
+      </Button>
+    </Flex>
+  );
+};

apps/array/src/renderer/features/panels/components/TabbedPanel.tsx

@@ -2,8 +2,8 @@ import { useDroppable } from "@dnd-kit/react";
 import { Box, Flex } from "@radix-ui/themes";
 import type React from "react";
 import type { PanelContent } from "../store/panelStore";
-import { DraggableTab } from "./DraggableTab";
 import { PanelDropZones } from "./PanelDropZones";
+import { PanelTab } from "./PanelTab";
 
 interface TabbedPanelProps {
   panelId: string;
@@ -48,7 +48,7 @@ export const TabbedPanel: React.FC<TabbedPanelProps> = ({
           }}
         >
           {content.tabs.map((tab, index) => (
-            <DraggableTab
+            <PanelTab
               key={tab.id}
               tabId={tab.id}
               panelId={panelId}
@@ -67,6 +67,7 @@ export const TabbedPanel: React.FC<TabbedPanelProps> = ({
               }
               icon={tab.icon}
               hasUnsavedChanges={tab.hasUnsavedChanges}
+              badge={tab.badge}
             />
           ))}
           {/* Spacer to increas DND area */}

apps/array/src/renderer/features/panels/hooks/usePanelLayoutHooks.tsx

@@ -1,3 +1,4 @@
+import { ChangesTabBadge } from "@features/task-detail/components/ChangesTabBadge";
 import { TabContentRenderer } from "@features/task-detail/components/TabContentRenderer";
 import type { Task } from "@shared/types";
 import { useCallback, useEffect, useMemo, useRef } from "react";
@@ -65,6 +66,10 @@ export function useTabInjection(
               closeTab(taskId, panelId, tab.id);
             }
           : undefined,
+        badge:
+          tab.id === "changes" ? (
+            <ChangesTabBadge taskId={taskId} task={task} />
+          ) : undefined,
       })),
     [tabs, panelId, taskId, task, closeTab],
   );

apps/array/src/renderer/features/panels/store/panelTypes.ts

@@ -12,6 +12,7 @@ export type Tab = {
   onSelect?: () => void;
   icon?: React.ReactNode;
   hasUnsavedChanges?: boolean;
+  badge?: React.ReactNode;
 };
 
 export type PanelContent = {

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

@@ -0,0 +1,31 @@
+import { useTaskData } from "@features/task-detail/hooks/useTaskData";
+import { Text } from "@radix-ui/themes";
+import type { Task } from "@shared/types";
+import { useQuery } from "@tanstack/react-query";
+
+interface ChangesTabBadgeProps {
+  taskId: string;
+  task: Task;
+}
+
+export function ChangesTabBadge({ taskId, task }: ChangesTabBadgeProps) {
+  const taskData = useTaskData({ taskId, initialTask: task });
+  const repoPath = taskData.repoPath;
+
+  const { data: changedFiles = [] } = useQuery({
+    queryKey: ["changed-files-head", repoPath],
+    queryFn: () => window.electronAPI.getChangedFilesHead(repoPath as string),
+    enabled: !!repoPath,
+    staleTime: Infinity,
+  });
+
+  if (changedFiles.length === 0) {
+    return null;
+  }
+
+  return (
+    <Text size="1" color="orange" >
+      ({changedFiles.length})
+    </Text>
+  );
+}