closes #6

electron-ui/src/ipc/main.ts

@@ -1,8 +1,8 @@
-import { ipcMain } from 'electron';
+import { dialog, ipcMain } from 'electron';
 import fs from 'fs';
 import AudioChannels from './channels';
 import { LoadAudioBufferArgs, LoadAudioBufferResult } from './types';
-import PythonSubprocessManager from '../../main/service';
+import PythonSubprocessManager from '../main/service';
 
 export default function registerAudioIpcHandlers() {
   ipcMain.handle(

electron-ui/src/ipc/settings/channels.ts

@@ -1,8 +0,0 @@
-const SettingsChannels = {
-  GET_DEFAULTS: 'settings:get-defaults',
-  GET_SETTINGS: 'settings:get-settings',
-  SET_SETTINGS: 'settings:set-settings',
-  GET_INPUT_DEVICES: 'settings:get-input-devices',
-} as const;
-
-export default SettingsChannels;

electron-ui/src/main/main.ts

@@ -10,12 +10,20 @@
  */
 import fs from 'fs';
 import path from 'path';
-import { app, BrowserWindow, shell, ipcMain, Tray, Menu } from 'electron';
+import {
+  app,
+  BrowserWindow,
+  shell,
+  ipcMain,
+  Tray,
+  Menu,
+  dialog,
+} from 'electron';
 import { autoUpdater } from 'electron-updater';
 import log from 'electron-log';
 import MenuBuilder from './menu';
 import { resolveHtmlPath } from './util';
-import registerFileIpcHandlers from '../ipc/audio/main';
+import registerFileIpcHandlers from '../ipc/main';
 import PythonSubprocessManager from './service';
 
 const pythonManager = new PythonSubprocessManager('src/main.py');
@@ -110,6 +118,21 @@ const createWindow = async () => {
   menuBuilder.buildMenu();
   registerFileIpcHandlers();
 
+  ipcMain.handle('select-directory', async () => {
+    try {
+      const result = await dialog.showOpenDialog(mainWindow, {
+        properties: ['openDirectory'], // Key property to select a folder
+      });
+      if (!result.canceled && result.filePaths.length > 0) {
+        // Send the selected directory path back to the renderer process
+        return result.filePaths[0];
+      }
+      return null;
+    } catch (err: any) {
+      return { error: err.message };
+    }
+  });
+
   // Open urls in the user's browser
   mainWindow.webContents.setWindowOpenHandler((edata) => {
     shell.openExternal(edata.url);
@@ -164,7 +187,7 @@ app
   .whenReady()
   .then(() => {
     // if (app.isPackaged) {
-    // pythonManager.start();
+    pythonManager.start();
     // }
     createWindow();
     app.on('activate', () => {

electron-ui/src/main/preload.ts

@@ -1,8 +1,8 @@
 // Disable no-unused-vars, broken for spread args
 /* eslint no-unused-vars: off */
 import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron';
-import { LoadAudioBufferArgs } from '../ipc/audio/types';
+import { LoadAudioBufferArgs } from '../ipc/types';
-import AudioChannels from '../ipc/audio/channels';
+import AudioChannels from '../ipc/channels';
 // import '../ipc/file/preload'; // Import file API preload to ensure it runs and exposes the API
 
 export type Channels = 'ipc-example';

electron-ui/src/renderer/Settings.tsx

@@ -1,10 +1,13 @@
 import React, { useEffect, useState } from 'react';
+// import { ipcRenderer } from 'electron';
 import { useNavigate } from 'react-router-dom';
 
 import './App.css';
 import TextField from '@mui/material/TextField';
 import Select from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
+import { IconButton } from '@mui/material';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import { apiFetch } from './api';
 
 type AudioDevice = {
@@ -123,18 +126,22 @@ export default function SettingsPage() {
   };
 
   const handleFolderChange = async () => {
-    // Replace with actual folder picker
+    await window.electron.ipcRenderer
-    // Example: const folder = await window.api.selectFolder();
+      .invoke('select-directory')
-    // const folder = window.prompt(
+      .then((result) => {
-    //   'Enter output folder path:',
+        if (result) {
-    //   settings.outputFolder,
+          setSettings((prev) => ({
-    // );
+            ...prev,
-    // if (folder !== null) {
+            save_path: result,
-    //   setSettings((prev) => ({
+          }));
-    //     ...prev,
+          sendSettingsToBackend({
-    //     outputFolder: folder,
+            ...settings,
-    //   }));
+            save_path: result,
-    // }
+          });
+        }
+        return null;
+      });
+    return null;
   };
 
   return (
@@ -259,13 +266,22 @@ export default function SettingsPage() {
               value={settings.save_path}
               className="ml-2 w-[300px]"
             />
-            <button
+            <IconButton
+              component="label"
+              size="small"
+              tabIndex={-1}
+              onClick={handleFolderChange}
+            >
+              <MoreHorizIcon />
+            </IconButton>
+            {/* <button
               type="button"
               onClick={handleFolderChange}
               className="ml-2 px-3 py-1 rounded bg-plumDark text-offwhite hover:bg-plum"
             >
+              <VisuallyHiddenInput type="file" />
               ...
-            </button>
+            </button> */}
           </div>
         </div>
       </div>

electron-ui/src/renderer/components/Trimmer/dialogs/DeleteClipDialog.tsx

@@ -35,6 +35,7 @@ export default function DeleteClipDialog({
         <button
           type="button"
           onClick={onDelete}
+          autoFocus
           className="bg-plum hover:bg-plumDark text-white font-bold h-10 px-4 rounded-md"
         >
           Delete

electron-ui/src/renderer/components/Trimmer/dialogs/NameEditDialog.tsx

@@ -4,6 +4,7 @@ import {
   DialogTitle,
   DialogContent,
   DialogActions,
+  TextField,
 } from '@mui/material';
 
 export default function NameEditDialog({
@@ -35,17 +36,17 @@ export default function NameEditDialog({
     >
       <DialogTitle>Edit Clip Name</DialogTitle>
       <DialogContent>
-        <textarea
+        <TextField
           autoFocus
+          multiline
+          variant="standard"
           className="font-bold text-lg bg-transparent outline-none border-b border-plum focus:border-plumDark text-white mb-1 w-full text-center resize-y"
           value={input}
           onChange={(e) => {
             setInput(e.target.value);
           }}
-          rows={3}
           onFocus={(event) => event.target.select()}
           aria-label="Edit clip name"
-          style={{ minHeight: '3em' }}
         />
       </DialogContent>
       <DialogActions>