ui feedback (#34)

jonathanlab · web-flow · commit 46a63da6c218 · 2025-10-17T14:03:00.000+02:00
diff --git a/src/main/index.ts b/src/main/index.ts
@@ -80,7 +80,19 @@ function createWindow(): void {
   const template: MenuItemConstructorOptions[] = [
     {
       label: "Array",
-      submenu: [{ role: "about" }, { type: "separator" }, { role: "quit" }],
+      submenu: [
+        { role: "about" },
+        { type: "separator" },
+        {
+          label: "Settings...",
+          accelerator: "CmdOrCtrl+,",
+          click: () => {
+            mainWindow?.webContents.send("open-settings");
+          },
+        },
+        { type: "separator" },
+        { role: "quit" },
+      ],
     },
     {
       label: "Edit",
diff --git a/src/main/preload.ts b/src/main/preload.ts
@@ -66,4 +66,9 @@ contextBridge.exposeInMainWorld("electronAPI", {
     ipcRenderer.on(channel, wrapped);
     return () => ipcRenderer.removeListener(channel, wrapped);
   },
+  onOpenSettings: (listener: () => void): (() => void) => {
+    const wrapped = () => listener();
+    ipcRenderer.on("open-settings", wrapped);
+    return () => ipcRenderer.removeListener("open-settings", wrapped);
+  },
 });
diff --git a/src/renderer/components/FolderPicker.tsx b/src/renderer/components/FolderPicker.tsx
@@ -1,6 +1,14 @@
-import { Folder } from "@phosphor-icons/react";
+import { Folder, FolderIcon } from "@phosphor-icons/react";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
-import { Box, Button, Flex, Popover, Text, TextField } from "@radix-ui/themes";
+import {
+  Box,
+  Button,
+  Flex,
+  IconButton,
+  Popover,
+  Text,
+  TextField,
+} from "@radix-ui/themes";
 import { useEffect, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useFolderPickerStore } from "../stores/folderPickerStore";
@@ -143,6 +151,13 @@ export function FolderPicker({
     }
   };
 
+  const handleOpenNativeFileFinder = async () => {
+    const selectedPath = await window.electronAPI.selectDirectory();
+    if (selectedPath) {
+      handleSelect(selectedPath);
+    }
+  };
+
   const renderItem = (path: string, itemIndex: number) => (
     <Command.Item
       key={path}
@@ -207,8 +222,15 @@ export function FolderPicker({
               onChange={handleSearchChange}
               size={size}
             >
-              <TextField.Slot>
-                <Folder size={16} weight="regular" />
+              <TextField.Slot side="right" style={{ paddingRight: 0 }}>
+                <IconButton
+                  size="1"
+                  onClick={handleOpenNativeFileFinder}
+                  type="button"
+                  style={{ cursor: "pointer" }}
+                >
+                  <FolderIcon size={12} weight="fill" />
+                </IconButton>
               </TextField.Slot>
             </TextField.Root>
           </Box>
diff --git a/src/renderer/components/MainLayout.tsx b/src/renderer/components/MainLayout.tsx
@@ -1,6 +1,6 @@
 import { Box, Flex } from "@radix-ui/themes";
 import type { Task } from "@shared/types";
-import { useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useIntegrations } from "../hooks/useIntegrations";
 import { useTabStore } from "../stores/tabStore";
@@ -15,12 +15,30 @@ import { WorkflowForm } from "./WorkflowForm";
 import { WorkflowView } from "./WorkflowView";
 
 export function MainLayout() {
-  const { activeTabId, tabs, createTab, setActiveTab } = useTabStore();
+  const { activeTabId, tabs, createTab, setActiveTab, closeTab } =
+    useTabStore();
   useIntegrations();
   const [commandMenuOpen, setCommandMenuOpen] = useState(false);
   const [taskCreateOpen, setTaskCreateOpen] = useState(false);
   const [workflowCreateOpen, setWorkflowCreateOpen] = useState(false);
 
+  const handleOpenSettings = useCallback(() => {
+    const existingTab = tabs.find((tab) => tab.type === "settings");
+
+    if (existingTab) {
+      if (activeTabId === existingTab.id) {
+        closeTab(existingTab.id);
+      } else {
+        setActiveTab(existingTab.id);
+      }
+    } else {
+      createTab({
+        type: "settings",
+        title: "Settings",
+      });
+    }
+  }, [tabs, activeTabId, setActiveTab, createTab, closeTab]);
+
   useHotkeys("mod+k", () => setCommandMenuOpen((prev) => !prev), {
     enabled: !commandMenuOpen,
   });
@@ -32,6 +50,17 @@ export function MainLayout() {
   });
   useHotkeys("mod+n", () => setTaskCreateOpen(true));
   useHotkeys("mod+shift+n", () => setWorkflowCreateOpen(true));
+  useHotkeys("mod+,", () => handleOpenSettings());
+
+  useEffect(() => {
+    const unsubscribe = window.electronAPI?.onOpenSettings(() => {
+      handleOpenSettings();
+    });
+
+    return () => {
+      unsubscribe?.();
+    };
+  }, [handleOpenSettings]);
 
   const handleSelectTask = (task: Task) => {
     const existingTab = tabs.find(
@@ -54,19 +83,6 @@ export function MainLayout() {
     }
   };
 
-  const handleOpenSettings = () => {
-    const existingTab = tabs.find((tab) => tab.type === "settings");
-
-    if (existingTab) {
-      setActiveTab(existingTab.id);
-    } else {
-      createTab({
-        type: "settings",
-        title: "Settings",
-      });
-    }
-  };
-
   const activeTab = tabs.find((tab) => tab.id === activeTabId);
 
   return (
diff --git a/src/renderer/components/TaskCreate.tsx b/src/renderer/components/TaskCreate.tsx
@@ -7,6 +7,7 @@ import {
 import {
   Button,
   Callout,
+  Code,
   DataList,
   Dialog,
   Flex,
@@ -65,7 +66,15 @@ export function TaskCreate({ open, onOpenChange }: TaskCreateProps) {
     [workflows],
   );
 
-  const { register, handleSubmit, reset, control, setValue, watch } = useForm({
+  const {
+    register,
+    handleSubmit,
+    reset,
+    control,
+    setValue,
+    watch,
+    formState: { errors, isSubmitted },
+  } = useForm({
     defaultValues: {
       title: "",
       description: "",
@@ -94,9 +103,7 @@ export function TaskCreate({ open, onOpenChange }: TaskCreateProps) {
           setValue("repository", repoKey);
 
           if (!isRepoInIntegration(repoKey)) {
-            setRepoWarning(
-              `Repository ${repoKey} ${REPO_NOT_IN_INTEGRATION_WARNING}`,
-            );
+            setRepoWarning(repoKey);
           } else {
             setRepoWarning(null);
           }
@@ -161,6 +168,7 @@ export function TaskCreate({ open, onOpenChange }: TaskCreateProps) {
             data: newTask,
           });
           reset();
+          setRepoWarning(null);
           if (!createMore) {
             onOpenChange(false);
           }
@@ -184,8 +192,15 @@ export function TaskCreate({ open, onOpenChange }: TaskCreateProps) {
     },
   );
 
+  const handleOpenChange = (newOpen: boolean) => {
+    if (!newOpen) {
+      setRepoWarning(null);
+    }
+    onOpenChange(newOpen);
+  };
+
   return (
-    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+    <Dialog.Root open={open} onOpenChange={handleOpenChange}>
       <Dialog.Content
         maxHeight={isExpanded ? "90vh" : "600px"}
         height={isExpanded ? "90vh" : "auto"}
@@ -272,6 +287,10 @@ export function TaskCreate({ open, onOpenChange }: TaskCreateProps) {
                     <Controller
                       name="folderPath"
                       control={control}
+                      rules={{
+                        required: true,
+                        validate: (v) => v.trim().length > 0,
+                      }}
                       render={({ field }) => (
                         <FolderPicker
                           value={field.value}
@@ -348,11 +367,29 @@ export function TaskCreate({ open, onOpenChange }: TaskCreateProps) {
               </DataList.Root>
 
               {repoWarning && (
-                <Callout.Root color="orange" size="1">
-                  <Callout.Text>{repoWarning}</Callout.Text>
+                <Callout.Root color="blue" size="1">
+                  <Callout.Text>
+                    <Code size="2">{repoWarning}</Code>{" "}
+                    {REPO_NOT_IN_INTEGRATION_WARNING}
+                  </Callout.Text>
                 </Callout.Root>
               )}
 
+              {isSubmitted &&
+                (errors.title ||
+                  errors.description ||
+                  errors.workflow ||
+                  errors.folderPath) && (
+                  <Callout.Root color="red" size="1">
+                    <Callout.Text>
+                      {errors.title && "Title is required. "}
+                      {errors.description && "Description is required. "}
+                      {errors.workflow && "Workflow is required. "}
+                      {errors.folderPath && "Working directory is required."}
+                    </Callout.Text>
+                  </Callout.Root>
+                )}
+
               {error && (
                 <Callout.Root color="red" size="1">
                   <Callout.Text>
diff --git a/src/renderer/components/TaskDetail.tsx b/src/renderer/components/TaskDetail.tsx
@@ -1,14 +1,9 @@
-import {
-  DiamondIcon,
-  FilesIcon,
-  GitBranchIcon,
-  GithubLogoIcon,
-  WarningCircleIcon,
-} from "@phosphor-icons/react";
+import { DiamondIcon, WarningCircleIcon } from "@phosphor-icons/react";
 import { GearIcon, GlobeIcon } from "@radix-ui/react-icons";
 import {
   Box,
   Button,
+  Code,
   DataList,
   Flex,
   Heading,
@@ -332,10 +327,15 @@ export function TaskDetail({ task: initialTask }: TaskDetailProps) {
                   <DataList.Label>Repository</DataList.Label>
                   <DataList.Value>
                     <Flex align="center" gap="2">
-                      <Button size="1" variant="outline" color="gray">
-                        <GithubLogoIcon />
-                        {repositoryValue || "No repository connected"}
-                      </Button>
+                      {repositoryValue ? (
+                        <Code size="2" color="gray">
+                          {repositoryValue}
+                        </Code>
+                      ) : (
+                        <Text size="2" color="gray">
+                          No repository connected
+                        </Text>
+                      )}
                       {showRepoWarning && (
                         <Tooltip content={REPO_NOT_IN_INTEGRATION_WARNING}>
                           <WarningCircleIcon
@@ -353,10 +353,9 @@ export function TaskDetail({ task: initialTask }: TaskDetailProps) {
                   <DataList.Label>Working Directory</DataList.Label>
                   <DataList.Value>
                     {repoPath ? (
-                      <Button size="1" variant="outline" color="gray">
-                        <FilesIcon />
+                      <Code size="2" color="gray">
                         {displayRepoPath}
-                      </Button>
+                      </Code>
                     ) : (
                       <Text size="2" color="gray">
                         Not set
@@ -369,10 +368,9 @@ export function TaskDetail({ task: initialTask }: TaskDetailProps) {
                   <DataList.Item>
                     <DataList.Label>Branch</DataList.Label>
                     <DataList.Value>
-                      <Button size="1" variant="outline" color="gray">
-                        <GitBranchIcon />
+                      <Code size="2" color="gray">
                         {task.github_branch}
-                      </Button>
+                      </Code>
                     </DataList.Value>
                   </DataList.Item>
                 )}
diff --git a/src/renderer/types/electron.d.ts b/src/renderer/types/electron.d.ts
@@ -42,6 +42,7 @@ export interface IElectronAPI {
     channel: string,
     listener: (event: AgentEvent) => void,
   ) => () => void;
+  onOpenSettings: (listener: () => void) => () => void;
 }
 
 declare global {
diff --git a/src/renderer/utils/repository.ts b/src/renderer/utils/repository.ts
@@ -19,4 +19,4 @@ export const repoConfigToKey = (config?: RepositoryConfig): string => {
 };
 
 export const REPO_NOT_IN_INTEGRATION_WARNING =
-  "This repository is not available in your GitHub integration. We won't be able to create PRs when running tasks in the cloud.";
+  "This repository is not connected to your GitHub integration. Tasks which run in the cloud won't be able to create PRs.";

Original file line number	Diff line number	Diff line change
`@@ -42,6 +42,7 @@ export interface IElectronAPI {`
`42`	`42`	`channel: string,`
`43`	`43`	`listener: (event: AgentEvent) => void,`
`44`	`44`	`) => () => void;`
	`45`	`+ onOpenSettings: (listener: () => void) => () => void;`
`45`	`46`	`}`
`46`	`47`
`47`	`48`	`declare global {`