system tray and package config

audio-service/.gitignore

@@ -1 +1,2 @@
-recordings/
+recordings/
+__pycache__/

audio-service/metadata.json

@@ -20,6 +20,18 @@
                 "name": "Clip 20260228_165646",
                 "playbackType": "playStop",
                 "volume": 1.0
+            },
+            {
+                "filename": "C:\\Users\\mickl\\Desktop\\cliptrim-ui\\ClipTrimApp\\audio-service\\recordings\\audio_capture_20260228_190355.wav",
+                "name": "Clip 20260228_190355",
+                "playbackType": "playStop",
+                "volume": 1.0
+            },
+            {
+                "filename": "C:\\Users\\mickl\\Desktop\\cliptrim-ui\\ClipTrimApp\\audio-service\\recordings\\audio_capture_20260228_190357.wav",
+                "name": "Clip 20260228_190357",
+                "playbackType": "playStop",
+                "volume": 1.0
             }
         ]
     },

electron-ui/.erb/configs/postcss.config.js

@@ -1,4 +1,4 @@
-const tailwindcss = require('@tailwindcss/postcss');
+const tailwindcss = require('tailwindcss');
 const autoprefixer = require('autoprefixer');
 
 module.exports = {

electron-ui/package-lock.json

@@ -1,10 +1,12 @@
 {
-  "name": "electron-react-boilerplate",
+  "name": "cliptrim-ui",
+  "version": "2.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "electron-react-boilerplate",
+      "name": "cliptrim-ui",
+      "version": "2.0.0",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -18,7 +20,6 @@
         "@mui/icons-material": "^7.3.7",
         "@mui/material": "^7.3.7",
         "@reduxjs/toolkit": "^2.11.2",
-        "@tailwindcss/cli": "^4.1.18",
         "@tailwindcss/postcss": "^4.1.18",
         "@wavesurfer/react": "^1.0.12",
         "electron-debug": "^4.1.0",
@@ -4627,8 +4628,10 @@
       "version": "2.5.6",
       "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz",
       "integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==",
+      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
+      "optional": true,
       "dependencies": {
         "detect-libc": "^2.0.3",
         "is-glob": "^4.0.3",
@@ -4665,6 +4668,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4685,6 +4689,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4705,6 +4710,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4725,6 +4731,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4745,6 +4752,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4765,6 +4773,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4785,6 +4794,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4805,6 +4815,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4825,6 +4836,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4845,6 +4857,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4865,6 +4878,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4885,6 +4899,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4905,6 +4920,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4922,13 +4938,17 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
       "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
-      "license": "MIT"
+      "dev": true,
+      "license": "MIT",
+      "optional": true
     },
     "node_modules/@parcel/watcher/node_modules/picomatch": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
       "license": "MIT",
+      "optional": true,
       "engines": {
         "node": ">=12"
       },
@@ -5560,37 +5580,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/@tailwindcss/cli": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/cli/-/cli-4.1.18.tgz",
-      "integrity": "sha512-sMZ+lZbDyxwjD2E0L7oRUjJ01Ffjtme5OtjvvnC+cV4CEDcbqzbp25TCpxHj6kWLU9+DlqJOiNgSOgctC2aZmg==",
-      "license": "MIT",
-      "dependencies": {
-        "@parcel/watcher": "^2.5.1",
-        "@tailwindcss/node": "4.1.18",
-        "@tailwindcss/oxide": "4.1.18",
-        "enhanced-resolve": "^5.18.3",
-        "mri": "^1.2.0",
-        "picocolors": "^1.1.1",
-        "tailwindcss": "4.1.18"
-      },
-      "bin": {
-        "tailwindcss": "dist/index.mjs"
-      }
-    },
-    "node_modules/@tailwindcss/cli/node_modules/enhanced-resolve": {
-      "version": "5.19.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.19.0.tgz",
-      "integrity": "sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==",
-      "license": "MIT",
-      "dependencies": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.3.0"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/@tailwindcss/node": {
       "version": "4.1.18",
       "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.18.tgz",
@@ -15402,6 +15391,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -15467,6 +15457,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
@@ -18552,15 +18543,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/mri": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
-      "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/mrmime": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",

electron-ui/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "electron-react-boilerplate",
+  "name": "cliptrim-ui",
   "description": "A foundation for scalable desktop apps",
   "keywords": [
     "electron",
@@ -12,27 +12,7 @@
     "hot",
     "reload"
   ],
-  "homepage": "https://github.com/electron-react-boilerplate/electron-react-boilerplate#readme",
-  "bugs": {
-    "url": "https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/electron-react-boilerplate/electron-react-boilerplate.git"
-  },
   "license": "MIT",
-  "author": {
-    "name": "Electron React Boilerplate Maintainers",
-    "email": "electronreactboilerplate@gmail.com",
-    "url": "https://electron-react-boilerplate.js.org"
-  },
-  "contributors": [
-    {
-      "name": "Amila Welihinda",
-      "email": "amilajack@gmail.com",
-      "url": "https://github.com/amilajack"
-    }
-  ],
   "main": "./.erb/dll/main.bundle.dev.js",
   "scripts": {
     "build": "concurrently \"npm run build:main\" \"npm run build:renderer\"",
@@ -42,14 +22,15 @@
     "postinstall": "ts-node .erb/scripts/check-native-dep.js && electron-builder install-app-deps && npm run build:dll",
     "lint": "cross-env NODE_ENV=development eslint . --ext .js,.jsx,.ts,.tsx",
     "lint:fix": "cross-env NODE_ENV=development eslint . --ext .js,.jsx,.ts,.tsx --fix",
-    "package": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never && npm run build:dll",
+    "package": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder --win",
     "rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir release/app",
     "prestart": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true NODE_OPTIONS=\"-r ts-node/register --no-warnings\" webpack --config ./.erb/configs/webpack.config.main.dev.ts",
     "start": "ts-node ./.erb/scripts/check-port-in-use.js && npm run prestart && npm run start:renderer",
     "start:main": "concurrently -k -P \"cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --watch --config ./.erb/configs/webpack.config.main.dev.ts\" \"electronmon . -- {@}\" --",
     "start:preload": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true NODE_OPTIONS=\"-r ts-node/register --no-warnings\" webpack --config ./.erb/configs/webpack.config.preload.dev.ts",
     "start:renderer": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true NODE_OPTIONS=\"-r ts-node/register --no-warnings\" webpack serve --config ./.erb/configs/webpack.config.renderer.dev.ts",
-    "test": "jest"
+    "test": "jest",
+    "build:win": "electron-builder --win"
   },
   "browserslist": [
     "extends browserslist-config-erb"
@@ -111,7 +92,6 @@
     "@mui/icons-material": "^7.3.7",
     "@mui/material": "^7.3.7",
     "@reduxjs/toolkit": "^2.11.2",
-    "@tailwindcss/cli": "^4.1.18",
     "@tailwindcss/postcss": "^4.1.18",
     "@wavesurfer/react": "^1.0.12",
     "electron-debug": "^4.1.0",
@@ -195,9 +175,10 @@
     "webpack-dev-server": "^5.2.0",
     "webpack-merge": "^6.0.1"
   },
+  "version": "2.0.0",
   "build": {
-    "productName": "ElectronReact",
+    "productName": "ClipTrim",
-    "appId": "org.erb.ElectronReact",
+    "appId": "com.michalcourson.cliptrimserivce",
     "asar": true,
     "afterSign": ".erb/scripts/notarize.js",
     "asarUnpack": "**\\*.{node,dll}",
@@ -238,7 +219,8 @@
     "win": {
       "target": [
         "nsis"
-      ]
+      ],
+      "icon": "build/icon.ico"
     },
     "linux": {
       "target": [
@@ -252,13 +234,15 @@
       "output": "release/build"
     },
     "extraResources": [
+      {
+        "from": "../audio-service",
+        "to": "audio-service",
+        "filter": [
+          "**/*"
+        ]
+      },
       "./assets/**"
-    ],
+    ]
-    "publish": {
-      "provider": "github",
-      "owner": "electron-react-boilerplate",
-      "repo": "electron-react-boilerplate"
-    }
   },
   "collective": {
     "url": "https://opencollective.com/electron-react-boilerplate-594"

electron-ui/release/app/package-lock.json

@@ -1,12 +1,12 @@
 {
-  "name": "electron-react-boilerplate",
+  "name": "cliptrim",
-  "version": "4.6.0",
+  "version": "2.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "electron-react-boilerplate",
+      "name": "cliptrim",
-      "version": "4.6.0",
+      "version": "2.0.0",
       "hasInstallScript": true,
       "license": "MIT"
     }

electron-ui/release/app/package.json

@@ -1,13 +1,8 @@
 {
-  "name": "electron-react-boilerplate",
+  "name": "cliptrim",
-  "version": "4.6.0",
+  "version": "2.0.0",
-  "description": "A foundation for scalable desktop apps",
+  "description": "Clip and trim",
   "license": "MIT",
-  "author": {
-    "name": "Electron React Boilerplate Maintainers",
-    "email": "electronreactboilerplate@gmail.com",
-    "url": "https://github.com/electron-react-boilerplate"
-  },
   "main": "./dist/main/main.js",
   "scripts": {
     "rebuild": "node -r ts-node/register ../../.erb/scripts/electron-rebuild.js",

electron-ui/src/main/main.ts

@@ -10,7 +10,7 @@
  */
 import fs from 'fs';
 import path from 'path';
-import { app, BrowserWindow, shell, ipcMain } from 'electron';
+import { app, BrowserWindow, shell, ipcMain, Tray, Menu } from 'electron';
 import { autoUpdater } from 'electron-updater';
 import log from 'electron-log';
 import MenuBuilder from './menu';
@@ -28,7 +28,8 @@ class AppUpdater {
   }
 }
 
-let mainWindow: BrowserWindow | null = null;
+let mainWindow: BrowserWindow;
+let tray: Tray | null = null;
 
 ipcMain.on('ipc-example', async (event, arg) => {
   const msgTemplate = (pingPong: string) => `IPC test: ${pingPong}`;
@@ -78,7 +79,7 @@ const createWindow = async () => {
     show: false,
     width: 1024,
     height: 728,
-    icon: getAssetPath('icon.png'),
+    icon: getAssetPath('icon.png'), // Set app icon
     webPreferences: {
       preload: app.isPackaged
         ? path.join(__dirname, 'preload.js')
@@ -99,12 +100,15 @@ const createWindow = async () => {
     }
   });
 
-  mainWindow.on('closed', () => {
+  mainWindow.on('close', (event) => {
-    mainWindow = null;
+    console.log('close event triggered');
+    event.preventDefault();
+    mainWindow.hide();
   });
 
   const menuBuilder = new MenuBuilder(mainWindow);
   menuBuilder.buildMenu();
+  registerFileIpcHandlers();
 
   // Open urls in the user's browser
   mainWindow.webContents.setWindowOpenHandler((edata) => {
@@ -112,11 +116,31 @@ const createWindow = async () => {
     return { action: 'deny' };
   });
 
-  registerFileIpcHandlers();
-
   // Remove this if your app does not use auto updates
   // eslint-disable-next-line
   new AppUpdater();
+  console.log('asset path: ', getAssetPath('tray_icon.png'));
+  tray = new Tray(getAssetPath('tray_icon.png'));
+  const contextMenu = Menu.buildFromTemplate([
+    {
+      label: 'Show',
+      click: () => {
+        mainWindow?.show();
+      },
+    },
+    {
+      label: 'Quit',
+      click: () => {
+        pythonManager.stop();
+        app.quit();
+      },
+    },
+  ]);
+  tray.setToolTip('ClipTrim');
+  tray.setContextMenu(contextMenu);
+  tray.on('double-click', () => {
+    mainWindow?.show();
+  });
 };
 
 /**
@@ -126,16 +150,17 @@ const createWindow = async () => {
 app.on('window-all-closed', () => {
   // Respect the OSX convention of having the application in memory even
   // after all windows have been closed
-  pythonManager.stop();
+  // pythonManager.stop();
-  if (process.platform !== 'darwin') {
+  // Do not quit app, keep tray active
-    app.quit();
+  // if (process.platform !== 'darwin') {
-  }
+  //   app.quit();
+  // }
 });
 
 app
   .whenReady()
   .then(() => {
-    // pythonManager.start();
+    pythonManager.start();
     createWindow();
     app.on('activate', () => {
       // On macOS it's common to re-create a window in the app when the

electron-ui/src/renderer/App.css

@@ -2,6 +2,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities; 
+/* @import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities'; */
 /*
  * @NOTE: Prepend a `~` to css file paths that are in your node_modules
  *        See https://github.com/webpack-contrib/sass-loader#imports

electron-ui/src/renderer/components/AudioTrimer.tsx

@@ -44,6 +44,8 @@ export default function AudioTrimmer({
     useSortable({ id: metadata.filename });
 
   // Dialog state for editing name
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const [isVisible, setIsVisible] = useState(false);
   const [editDialogOpen, setEditDialogOpen] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [dropdownOpen, setDropdownOpen] = useState(false);
@@ -202,25 +204,42 @@ export default function AudioTrimmer({
   }, [onRegionCreated, onRegionUpdated, plugins]);
 
   useEffect(() => {
-    let url: string | null = null;
+    const node = rootRef.current;
+    if (!node) return;
+    const observer = new window.IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+        }
+      },
+      { threshold: 0.1 },
+    );
+    observer.observe(node);
+    // eslint-disable-next-line consistent-return
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!isVisible) return;
+    let cancelled = false;
     async function fetchAudio() {
-      //   console.log('Loading audio buffer for file:', filename);
       const buffer = await window.audio.loadAudioBuffer(metadata.filename);
-      // console.log('Received buffer:', buffer.buffer);
+      if (cancelled) return;
       if (buffer.buffer && !buffer.error) {
         const audioData = buffer.buffer
           ? new Uint8Array(buffer.buffer)
           : buffer;
-        url = URL.createObjectURL(new Blob([audioData]));
+        wavesurfer?.loadBlob(new Blob([audioData]));
-        // console.log('Created blob URL:', url);
-        setBlobUrl(url);
       }
     }
     fetchAudio();
+    // eslint-disable-next-line consistent-return
     return () => {
-      if (url) URL.revokeObjectURL(url);
+      cancelled = true;
     };
-  }, [metadata.filename]);
+  }, [isVisible, metadata.filename, wavesurfer]);
 
   const onPlayPause = () => {
     if (wavesurfer === null) return;
@@ -245,7 +264,10 @@ export default function AudioTrimmer({
 
   return (
     <div
-      ref={setNodeRef}
+      ref={(el) => {
+        setNodeRef(el);
+        rootRef.current = el;
+      }}
       style={{
         transform: CSS.Transform.toString(transform),
         transition,

electron-ui/src/renderer/index.ejs

@@ -6,7 +6,7 @@
       http-equiv="Content-Security-Policy"
       content="script-src 'self' 'unsafe-inline'"
     />
-    <title>Hello Electron React!</title>
+    <title>ClipTrim</title>
   </head>
   <body>
     <div id="root"></div>