add workspace directory feature

Allows setting a default directory for workspaces. New shells opened
in the workspace will start in this directory. Includes validation,
error handling, and debounced updates in the workspace editor.

Author: rnunley-nmg

emain/emain-ipc.ts

@@ -258,6 +258,21 @@ export function initIpcHandlers() {
         event.returnValue = getWaveVersion() as AboutModalDetails;
     });
 
+    electron.ipcMain.handle("show-open-folder-dialog", async () => {
+        const ww = focusedWaveWindow;
+        if (ww == null) {
+            return null;
+        }
+        const result = await electron.dialog.showOpenDialog(ww, {
+            title: "Select Workspace Directory",
+            properties: ["openDirectory", "createDirectory"],
+        });
+        if (result.canceled || result.filePaths.length === 0) {
+            return null;
+        }
+        return result.filePaths[0];
+    });
+
     electron.ipcMain.on("get-zoom-factor", (event) => {
         event.returnValue = event.sender.getZoomFactor();
     });

emain/preload.ts

@@ -68,6 +68,7 @@ contextBridge.exposeInMainWorld("api", {
     openBuilder: (appId?: string) => ipcRenderer.send("open-builder", appId),
     setBuilderWindowAppId: (appId: string) => ipcRenderer.send("set-builder-window-appid", appId),
     doRefresh: () => ipcRenderer.send("do-refresh"),
+    showOpenFolderDialog: () => ipcRenderer.invoke("show-open-folder-dialog"),
 });
 
 // Custom event for "new-window"

frontend/app/store/services.ts

@@ -182,7 +182,7 @@ class WorkspaceServiceType {
     }
 
     // @returns object updates
-    UpdateWorkspace(workspaceId: string, name: string, icon: string, color: string, applyDefaults: boolean): Promise<void> {
+    UpdateWorkspace(workspaceId: string, name: string, icon: string, color: string, directory: string, applyDefaults: boolean): Promise<void> {
         return WOS.callBackendService("workspace", "UpdateWorkspace", Array.from(arguments))
     }
 }

frontend/app/tab/workspaceeditor.scss

@@ -61,6 +61,33 @@
         }
     }
 
+    .directory-selector {
+        margin-top: 15px;
+        padding-top: 15px;
+        border-top: 1px solid var(--modal-border-color);
+
+        .directory-label {
+            display: block;
+            font-size: 12px;
+            color: var(--secondary-text-color);
+            margin-bottom: 5px;
+        }
+
+        .directory-input-row {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+
+            .directory-input {
+                flex: 1;
+            }
+
+            .browse-btn {
+                flex-shrink: 0;
+            }
+        }
+    }
+
     .delete-ws-btn-wrapper {
         display: flex;
         align-items: center;

frontend/app/tab/workspaceeditor.tsx

@@ -1,3 +1,4 @@
+import { getApi } from "@/app/store/global";
 import { fireAndForget, makeIconClass } from "@/util/util";
 import clsx from "clsx";
 import { memo, useEffect, useRef, useState } from "react";
@@ -13,19 +14,20 @@ interface ColorSelectorProps {
     className?: string;
 }
 
-const ColorSelector = memo(({ colors, selectedColor, onSelect, className }: ColorSelectorProps) => {
-    const handleColorClick = (color: string) => {
-        onSelect(color);
-    };
-
+const ColorSelector = memo(function ColorSelector({
+    colors,
+    selectedColor,
+    onSelect,
+    className,
+}: ColorSelectorProps) {
     return (
         <div className={clsx("color-selector", className)}>
             {colors.map((color) => (
                 <div
                     key={color}
                     className={clsx("color-circle", { selected: selectedColor === color })}
                     style={{ backgroundColor: color }}
-                    onClick={() => handleColorClick(color)}
+                    onClick={() => onSelect(color)}
                 />
             ))}
         </div>
@@ -39,11 +41,12 @@ interface IconSelectorProps {
     className?: string;
 }
 
-const IconSelector = memo(({ icons, selectedIcon, onSelect, className }: IconSelectorProps) => {
-    const handleIconClick = (icon: string) => {
-        onSelect(icon);
-    };
-
+const IconSelector = memo(function IconSelector({
+    icons,
+    selectedIcon,
+    onSelect,
+    className,
+}: IconSelectorProps) {
     return (
         <div className={clsx("icon-selector", className)}>
             {icons.map((icon) => {
@@ -52,7 +55,7 @@ const IconSelector = memo(({ icons, selectedIcon, onSelect, className }: IconSel
                     <i
                         key={icon}
                         className={clsx(iconClass, "icon-item", { selected: selectedIcon === icon })}
-                        onClick={() => handleIconClick(icon)}
+                        onClick={() => onSelect(icon)}
                     />
                 );
             })}
@@ -64,33 +67,37 @@ interface WorkspaceEditorProps {
     title: string;
     icon: string;
     color: string;
+    directory: string;
     focusInput: boolean;
     onTitleChange: (newTitle: string) => void;
     onColorChange: (newColor: string) => void;
     onIconChange: (newIcon: string) => void;
+    onDirectoryChange: (newDirectory: string) => void;
     onDeleteWorkspace: () => void;
 }
-const WorkspaceEditorComponent = ({
+export const WorkspaceEditor = memo(function WorkspaceEditor({
     title,
     icon,
     color,
+    directory,
     focusInput,
     onTitleChange,
     onColorChange,
     onIconChange,
+    onDirectoryChange,
     onDeleteWorkspace,
-}: WorkspaceEditorProps) => {
+}: WorkspaceEditorProps) {
     const inputRef = useRef<HTMLInputElement>(null);
 
     const [colors, setColors] = useState<string[]>([]);
     const [icons, setIcons] = useState<string[]>([]);
 
     useEffect(() => {
         fireAndForget(async () => {
-            const colors = await WorkspaceService.GetColors();
-            const icons = await WorkspaceService.GetIcons();
-            setColors(colors);
-            setIcons(icons);
+            const fetchedColors = await WorkspaceService.GetColors();
+            const fetchedIcons = await WorkspaceService.GetIcons();
+            setColors(fetchedColors);
+            setIcons(fetchedIcons);
         });
     }, []);
 
@@ -113,13 +120,37 @@ const WorkspaceEditorComponent = ({
             />
             <ColorSelector selectedColor={color} colors={colors} onSelect={onColorChange} />
             <IconSelector selectedIcon={icon} icons={icons} onSelect={onIconChange} />
+            <div className="directory-selector">
+                <label className="directory-label">Directory</label>
+                <div className="directory-input-row">
+                    <Input
+                        value={directory}
+                        onChange={onDirectoryChange}
+                        placeholder="~/projects/myworkspace"
+                        className="directory-input"
+                    />
+                    <Button
+                        className="ghost browse-btn"
+                        onClick={async () => {
+                            try {
+                                const path = await getApi().showOpenFolderDialog();
+                                if (path) {
+                                    onDirectoryChange(path);
+                                }
+                            } catch (e) {
+                                console.error("error opening folder dialog:", e);
+                            }
+                        }}
+                    >
+                        Browse
+                    </Button>
+                </div>
+            </div>
             <div className="delete-ws-btn-wrapper">
                 <Button className="ghost red text-[12px] bold" onClick={onDeleteWorkspace}>
                     Delete workspace
                 </Button>
             </div>
         </div>
     );
-};
-
-export const WorkspaceEditor = memo(WorkspaceEditorComponent) as typeof WorkspaceEditorComponent;
+});