feat: Add repository button + move settings to left sidebar (#289)

Author: charlesvien

apps/array/src/main/services/dock-badge/service.ts

@@ -19,7 +19,7 @@ export class DockBadgeService {
 
     this.hasBadge = true;
     if (process.platform === "darwin" || process.platform === "linux") {
-      app.setBadgeCount(1);
+      app.dock.setBadge("•");
     }
     log.info("Dock badge shown");
   }
@@ -29,7 +29,7 @@ export class DockBadgeService {
 
     this.hasBadge = false;
     if (process.platform === "darwin" || process.platform === "linux") {
-      app.setBadgeCount(0);
+      app.dock.setBadge("");
     }
     log.info("Dock badge cleared");
   }

apps/array/src/main/services/folders/schemas.ts

@@ -11,7 +11,7 @@ export const registeredFolderSchema = z.object({
 export const getFoldersOutput = z.array(registeredFolderSchema);
 
 export const addFolderInput = z.object({
-  folderPath: z.string(),
+  folderPath: z.string().min(2, "Folder path must be a valid directory path"),
 });
 
 export const addFolderOutput = registeredFolderSchema;

apps/array/src/main/services/folders/service.ts

@@ -21,10 +21,20 @@ const log = logger.scope("folders-service");
 @injectable()
 export class FoldersService {
   async getFolders(): Promise<RegisteredFolder[]> {
-    return foldersStore.get("folders", []);
+    const folders = foldersStore.get("folders", []);
+    // Filter out any folders with empty names (from invalid paths like "/")
+    return folders.filter((f) => f.name && f.path);
   }
 
   async addFolder(folderPath: string): Promise<RegisteredFolder> {
+    // Validate the path before proceeding
+    const folderName = path.basename(folderPath);
+    if (!folderPath || !folderName) {
+      throw new Error(
+        `Invalid folder path: "${folderPath}" - path must have a valid directory name`,
+      );
+    }
+
     const isRepo = await isGitRepository(folderPath);
 
     if (!isRepo) {
@@ -65,7 +75,7 @@ export class FoldersService {
     const newFolder: RegisteredFolder = {
       id: generateId("folder", 7),
       path: folderPath,
-      name: path.basename(folderPath),
+      name: folderName,
       lastAccessed: new Date().toISOString(),
       createdAt: new Date().toISOString(),
     };

apps/array/src/main/services/workspace/schemas.ts

@@ -51,9 +51,11 @@ export const scriptExecutionResultSchema = z.object({
 // Input schemas
 export const createWorkspaceInput = z.object({
   taskId: z.string(),
-  mainRepoPath: z.string(),
+  mainRepoPath: z
+    .string()
+    .min(2, "Repository path must be a valid directory path"),
   folderId: z.string(),
-  folderPath: z.string(),
+  folderPath: z.string().min(2, "Folder path must be a valid directory path"),
   mode: workspaceModeSchema,
   branch: z.string().optional(),
 });

apps/array/src/renderer/components/StatusBar.tsx

@@ -1,7 +1,5 @@
 import { StatusBarMenu } from "@components/StatusBarMenu";
-import { GearIcon } from "@radix-ui/react-icons";
-import { Badge, Box, Code, Flex, IconButton, Kbd } from "@radix-ui/themes";
-import { useNavigationStore } from "@stores/navigationStore";
+import { Badge, Box, Code, Flex, Kbd } from "@radix-ui/themes";
 import { useStatusBarStore } from "@stores/statusBarStore";
 
 import { IS_DEV } from "@/constants/environment";
@@ -12,7 +10,6 @@ interface StatusBarProps {
 
 export function StatusBar({ showKeyHints = true }: StatusBarProps) {
   const { statusText, keyHints } = useStatusBarStore();
-  const { toggleSettings } = useNavigationStore();
 
   return (
     <Box className="flex flex-row items-center justify-between border-gray-6 border-t bg-gray-2 px-4 py-2">
@@ -46,15 +43,6 @@ export function StatusBar({ showKeyHints = true }: StatusBarProps) {
       )}
 
       <Flex align="center" gap="2">
-        <IconButton
-          size="1"
-          variant="ghost"
-          color="gray"
-          onClick={toggleSettings}
-          title="Settings"
-        >
-          <GearIcon />
-        </IconButton>
         {IS_DEV && (
           <Badge size="1">
             <Code size="1" variant="ghost">

apps/array/src/renderer/features/code-editor/components/DiffEditorPanel.tsx

@@ -2,12 +2,13 @@ import { PanelMessage } from "@components/ui/PanelMessage";
 import { CodeMirrorDiffEditor } from "@features/code-editor/components/CodeMirrorDiffEditor";
 import { CodeMirrorEditor } from "@features/code-editor/components/CodeMirrorEditor";
 import { getRelativePath } from "@features/code-editor/utils/pathUtils";
+import { usePanelLayoutStore } from "@features/panels/store/panelLayoutStore";
 import { useTaskData } from "@features/task-detail/hooks/useTaskData";
 import { Box } from "@radix-ui/themes";
 import { trpcVanilla } from "@renderer/trpc/client";
 import type { Task } from "@shared/types";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
 import {
   selectWorktreePath,
   useWorkspaceStore,
@@ -29,6 +30,9 @@ export function DiffEditorPanel({
   const repoPath = worktreePath ?? taskData.repoPath;
   const filePath = getRelativePath(absolutePath, repoPath);
   const queryClient = useQueryClient();
+  const closeDiffTabsForFile = usePanelLayoutStore(
+    (s) => s.closeDiffTabsForFile,
+  );
 
   const { data: changedFiles = [] } = useQuery({
     queryKey: ["changed-files-head", repoPath],
@@ -41,6 +45,7 @@ export function DiffEditorPanel({
   });
 
   const fileInfo = changedFiles.find((f) => f.path === filePath);
+  const isFileStillChanged = !!fileInfo;
   const status = fileInfo?.status ?? "modified";
   const originalPath = fileInfo?.originalPath ?? filePath;
   const isDeleted = status === "deleted";
@@ -90,16 +95,33 @@ export function DiffEditorPanel({
     [repoPath, filePath, queryClient],
   );
 
+  const isLoading =
+    (!isDeleted && loadingModified) || (!isNew && loadingOriginal);
+
+  const hasNoChanges =
+    !!repoPath &&
+    !isLoading &&
+    (!isFileStillChanged ||
+      (!isDeleted && !isNew && originalContent === modifiedContent));
+
+  useEffect(() => {
+    if (hasNoChanges) {
+      closeDiffTabsForFile(taskId, filePath);
+    }
+  }, [hasNoChanges, closeDiffTabsForFile, taskId, filePath]);
+
   if (!repoPath) {
     return <PanelMessage>No repository path available</PanelMessage>;
   }
 
-  const isLoading =
-    (!isDeleted && loadingModified) || (!isNew && loadingOriginal);
   if (isLoading) {
     return <PanelMessage>Loading diff...</PanelMessage>;
   }
 
+  if (hasNoChanges) {
+    return null;
+  }
+
   const showDiff = !isDeleted && !isNew;
   const content = isDeleted ? originalContent : modifiedContent;
 

apps/array/src/renderer/features/sidebar/components/SidebarFooter.tsx

@@ -0,0 +1,55 @@
+import { Plus } from "@phosphor-icons/react";
+import { GearIcon } from "@radix-ui/react-icons";
+import { Box, Button, Flex, IconButton } from "@radix-ui/themes";
+import { useRegisteredFoldersStore } from "@renderer/stores/registeredFoldersStore";
+import { trpcVanilla } from "@renderer/trpc";
+import { useNavigationStore } from "@stores/navigationStore";
+import { useCallback } from "react";
+
+export function SidebarFooter() {
+  const addFolder = useRegisteredFoldersStore((state) => state.addFolder);
+  const { toggleSettings } = useNavigationStore();
+
+  const handleAddRepository = useCallback(async () => {
+    const selectedPath = await trpcVanilla.os.selectDirectory.query();
+    if (selectedPath) {
+      await addFolder(selectedPath);
+    }
+  }, [addFolder]);
+
+  return (
+    <Box
+      style={{
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        borderTop: "1px solid var(--gray-6)",
+        background: "var(--color-background)",
+        padding: "12px",
+      }}
+    >
+      <Flex align="center" gap="2" justify="between">
+        <Button
+          size="1"
+          variant="ghost"
+          color="gray"
+          onClick={handleAddRepository}
+        >
+          <Plus size={14} weight="bold" />
+          Add repository
+        </Button>
+
+        <IconButton
+          size="1"
+          variant="ghost"
+          color="gray"
+          onClick={toggleSettings}
+          title="Settings"
+        >
+          <GearIcon />
+        </IconButton>
+      </Flex>
+    </Box>
+  );
+}