feat: folder button

Author: maximka76667

electron-app/preload.js

@@ -36,6 +36,8 @@ contextBridge.exposeInMainWorld("electronAPI", {
   importConfig: () => ipcRenderer.invoke("import-config"),
   // Open folder selection dialog
   selectFolder: () => ipcRenderer.invoke("select-folder"),
+  // Open a folder path in the OS file explorer
+  openFolder: (path) => ipcRenderer.invoke("open-folder", path),
   // Receive log message from backend
   onLog: (callback) => {
     const listener = (_event, value) => callback(value);

electron-app/src/ipc/handlers.js

@@ -7,13 +7,15 @@
  * - Folder selection dialogs
  */
 
-import { dialog, ipcMain } from "electron";
+import { dialog, ipcMain, shell } from "electron";
+import fs from "fs";
+import { isAbsolute, join } from "path";
 import {
   importConfig,
   readConfig,
   writeConfig,
 } from "../config/configInstance.js";
-import { restartBackend } from "../processes/backend.js";
+import { getBackendWorkingDir, restartBackend } from "../processes/backend.js";
 import { logger } from "../utils/logger.js";
 import {
   getCurrentView,
@@ -136,6 +138,28 @@ function setupIpcHandlers() {
       throw error;
     }
   });
+
+  /**
+   * @event open-folder
+   * @async
+   * @description Opens the specified folder path in the OS file explorer.
+   * @param {import("electron").IpcMainInvokeEvent} event - The IPC event object.
+   * @param {string} folderPath - The folder path to open.
+   * @returns {Promise<void>}
+   * @throws {Error} If opening the folder fails.
+   */
+  ipcMain.handle("open-folder", async (event, folderPath) => {
+    try {
+      const resolvedPath = isAbsolute(folderPath)
+        ? folderPath
+        : join(getBackendWorkingDir(), folderPath);
+      const loggerPath = join(resolvedPath, "logger");
+      await shell.openPath(fs.existsSync(loggerPath) ? loggerPath : resolvedPath);
+    } catch (error) {
+      logger.electron.error("Error opening folder:", error);
+      throw error;
+    }
+  });
 }
 
 export { setupIpcHandlers };

electron-app/src/processes/backend.js

@@ -212,4 +212,10 @@ async function restartBackend() {
   }
 }
 
-export { restartBackend, startBackend, stopBackend };
+function getBackendWorkingDir() {
+  return !app.isPackaged
+    ? path.join(appPath, "..", "backend", "cmd")
+    : path.dirname(getUserConfigPath());
+}
+
+export { getBackendWorkingDir, restartBackend, startBackend, stopBackend };

frontend/frontend-kit/ui/src/icons/files.ts

@@ -1 +1,5 @@
-export { Folder, Trash2 } from "lucide-react";
+export {
+  Folder,
+  FolderOpen,
+  Trash2,
+} from "lucide-react";

frontend/testing-view/src/components/settings/PathField.tsx

@@ -1,10 +1,18 @@
 import { Button, Input, Label } from "@workspace/ui";
+import { FolderOpen } from "@workspace/ui/icons";
+import { logger } from "@workspace/core";
+import { useOpenFolder } from "../../hooks/useOpenFolder";
 import type { FieldProps } from "../../types/common/settings";
 
 export const PathField = ({ field, value, onChange }: FieldProps<string>) => {
+  const { openFolder } = useOpenFolder();
+
   const handleBrowse = async () => {
-    // Accessing the Electron API exposed via preload script
-    const path = await window.electronAPI?.selectFolder();
+    if (!window.electronAPI) {
+      logger.testingView.warn("electronAPI is not available");
+      return;
+    }
+    const path = await window.electronAPI.selectFolder();
     if (path) {
       onChange(path);
     }
@@ -20,6 +28,9 @@ export const PathField = ({ field, value, onChange }: FieldProps<string>) => {
           placeholder={field.placeholder || "No path selected"}
           className="bg-muted/50"
         />
+        <Button variant="outline" size="icon" type="button" onClick={() => openFolder(value?.toString())} title="Open folder">
+          <FolderOpen size={16} />
+        </Button>
         <Button variant="outline" type="button" onClick={handleBrowse}>
           Browse
         </Button>

frontend/testing-view/src/components/settings/SettingsDialog.tsx

@@ -13,6 +13,7 @@ export const SettingsDialog = () => {
   const isSettingsOpen = useStore((s) => s.isSettingsOpen);
   const setSettingsOpen = useStore((s) => s.setSettingsOpen);
   const setRestarting = useStore((s) => s.setRestarting);
+  const setConfig = useStore((s) => s.setConfig);
   const [localConfig, setLocalConfig] = useState<ConfigData | null>(null);
   const [isSynced, setIsSynced] = useState(false);
   const [isSaving, startSaving] = useTransition();
@@ -24,6 +25,7 @@ export const SettingsDialog = () => {
       try {
         const config = await window.electronAPI.getConfig();
         setLocalConfig(config);
+        setConfig(config);
         setIsSynced(true);
       } catch (error) {
         console.error("Error loading config:", error);

frontend/testing-view/src/features/workspace/components/LoggerControl.tsx

@@ -1,8 +1,9 @@
 import { Button, Separator } from "@workspace/ui";
-import { Settings2 } from "@workspace/ui/icons";
+import { FolderOpen, Settings2 } from "@workspace/ui/icons";
 import { cn } from "@workspace/ui/lib";
 import { LOGGER_CONTROL_CONFIG } from "../../../constants/loggerControlConfig";
 import { useLogger } from "../../../hooks/useLogger";
+import { useOpenFolder } from "../../../hooks/useOpenFolder";
 import { useStore } from "../../../store/store";
 
 interface LoggerControlProps {
@@ -11,8 +12,10 @@ interface LoggerControlProps {
 
 export const LoggerControl = ({ disabled }: LoggerControlProps) => {
   const { status, startLogging, stopLogging } = useLogger();
+  const { openFolder } = useOpenFolder();
   const openFilterDialog = useStore((s) => s.openFilterDialog);
   const filteredCount = useStore((state) => state.getFilteredCount("logs"));
+  const loggingPath = useStore((s) => s.config?.logging?.logging_path as string | undefined);
 
   const handleToggle = () => {
     if (status === "loading") return;
@@ -66,6 +69,17 @@ export const LoggerControl = ({ disabled }: LoggerControlProps) => {
           {config.icon}
         </Button>
 
+        <Button
+          variant="ghost"
+          size="icon"
+          className="text-muted-foreground hover:text-foreground h-8 w-8"
+          onClick={() => openFolder(loggingPath)}
+          title="Open logs folder"
+          disabled={disabled}
+        >
+          <FolderOpen size={14} />
+        </Button>
+
         <Button
           variant="ghost"
           size="icon"

frontend/testing-view/src/hooks/useAppConfigs.ts

@@ -1,10 +1,16 @@
 import { useFetchConfig } from "@workspace/ui/hooks";
 import { useEffect } from "react";
+import { useStore } from "../store/store";
 import type { OrdersData, PacketsData } from "../types/data/board";
 
 const useAppConfigs = (isConnected: boolean) => {
   const backendUrl =
     import.meta.env.VITE_BACKEND_URL ?? "http://127.0.0.1:4000/backend";
+  const setConfig = useStore((s) => s.setConfig);
+
+  useEffect(() => {
+    window.electronAPI?.getConfig().then(setConfig);
+  }, [setConfig]);
 
   const {
     data: packets,

frontend/testing-view/src/hooks/useOpenFolder.ts

@@ -0,0 +1,13 @@
+import { logger } from "@workspace/core";
+
+export const useOpenFolder = () => {
+  const openFolder = (path?: string) => {
+    if (!window.electronAPI) {
+      logger.testingView.warn("electronAPI is not available");
+      return;
+    }
+    window.electronAPI.openFolder(path ?? ".");
+  };
+
+  return { openFolder };
+};

frontend/testing-view/src/vite-end.d.ts

@@ -7,6 +7,7 @@ interface ElectronAPI {
   getConfig: () => Promise<ConfigData>;
   importConfig: () => Promise<void>;
   selectFolder: () => Promise<string>;
+  openFolder: (path: string) => Promise<void>;
 }
 
 declare global {