source selection

dist-electron/main.js

@@ -1,4 +1,4 @@
-import { app, BrowserWindow, ipcMain, desktopCapturer } from "electron";
+import { app, BrowserWindow, ipcMain, desktopCapturer, screen } from "electron";
 import { createRequire } from "node:module";
 import { fileURLToPath } from "node:url";
 import path from "node:path";
@@ -10,6 +10,8 @@ const MAIN_DIST = path.join(process.env.APP_ROOT, "dist-electron");
 const RENDERER_DIST = path.join(process.env.APP_ROOT, "dist");
 process.env.VITE_PUBLIC = VITE_DEV_SERVER_URL ? path.join(process.env.APP_ROOT, "public") : RENDERER_DIST;
 let win;
+let sourceSelectorWindow = null;
+let selectedSource = null;
 function createHudOverlayWindow() {
   win = new BrowserWindow({
     width: 250,
@@ -71,6 +73,37 @@ function createEditorWindow() {
     });
   }
 }
+function createSourceSelectorWindow() {
+  const { width, height } = screen.getPrimaryDisplay().workAreaSize;
+  sourceSelectorWindow = new BrowserWindow({
+    width: 620,
+    height: 420,
+    minHeight: 350,
+    maxHeight: 500,
+    x: Math.round((width - 620) / 2),
+    y: Math.round((height - 420) / 2),
+    frame: false,
+    resizable: false,
+    alwaysOnTop: true,
+    backgroundColor: "#ffffff",
+    webPreferences: {
+      preload: path.join(__dirname, "preload.mjs"),
+      nodeIntegration: false,
+      contextIsolation: true
+    }
+  });
+  sourceSelectorWindow.on("closed", () => {
+    sourceSelectorWindow = null;
+  });
+  if (VITE_DEV_SERVER_URL) {
+    sourceSelectorWindow.loadURL(VITE_DEV_SERVER_URL + "?windowType=source-selector");
+  } else {
+    sourceSelectorWindow.loadFile(path.join(RENDERER_DIST, "index.html"), {
+      query: { windowType: "source-selector" }
+    });
+  }
+  return sourceSelectorWindow;
+}
 function createWindow() {
   createHudOverlayWindow();
 }
@@ -86,7 +119,33 @@ app.on("activate", () => {
   }
 });
 ipcMain.handle("get-sources", async (_, opts) => {
-  return await desktopCapturer.getSources(opts);
+  const sources = await desktopCapturer.getSources(opts);
+  const processedSources = sources.map((source) => ({
+    id: source.id,
+    name: source.name,
+    display_id: source.display_id,
+    thumbnail: source.thumbnail ? source.thumbnail.toDataURL() : null,
+    appIcon: source.appIcon ? source.appIcon.toDataURL() : null
+  }));
+  return processedSources;
+});
+ipcMain.handle("select-source", (_, source) => {
+  selectedSource = source;
+  if (sourceSelectorWindow) {
+    sourceSelectorWindow.close();
+    sourceSelectorWindow = null;
+  }
+  return selectedSource;
+});
+ipcMain.handle("get-selected-source", () => {
+  return selectedSource;
+});
+ipcMain.handle("open-source-selector", () => {
+  if (sourceSelectorWindow) {
+    sourceSelectorWindow.focus();
+    return;
+  }
+  createSourceSelectorWindow();
 });
 ipcMain.handle("switch-to-editor", () => {
   if (win) {

dist-electron/preload.mjs

@@ -6,5 +6,14 @@ electron.contextBridge.exposeInMainWorld("electronAPI", {
   },
   switchToEditor: () => {
     return electron.ipcRenderer.invoke("switch-to-editor");
+  },
+  openSourceSelector: () => {
+    return electron.ipcRenderer.invoke("open-source-selector");
+  },
+  selectSource: (source) => {
+    return electron.ipcRenderer.invoke("select-source", source);
+  },
+  getSelectedSource: () => {
+    return electron.ipcRenderer.invoke("get-selected-source");
   }
 });

electron/main.ts

@@ -1,4 +1,4 @@
-import { app, BrowserWindow, ipcMain, desktopCapturer } from 'electron'
+import { app, BrowserWindow, ipcMain, desktopCapturer, screen } from 'electron'
 import { createRequire } from 'node:module'
 import { fileURLToPath } from 'node:url'
 import path from 'node:path'
@@ -25,6 +25,8 @@ export const RENDERER_DIST = path.join(process.env.APP_ROOT, 'dist')
 process.env.VITE_PUBLIC = VITE_DEV_SERVER_URL ? path.join(process.env.APP_ROOT, 'public') : RENDERER_DIST
 
 let win: BrowserWindow | null
+let sourceSelectorWindow: BrowserWindow | null = null
+let selectedSource: any = null
 
 function createHudOverlayWindow() {
   win = new BrowserWindow({
@@ -95,6 +97,42 @@ function createEditorWindow() {
   }
 }
 
+function createSourceSelectorWindow() {
+  const { width, height } = screen.getPrimaryDisplay().workAreaSize;
+  
+  sourceSelectorWindow = new BrowserWindow({
+    width: 620,
+    height: 420,
+    minHeight: 350,
+    maxHeight: 500,
+    x: Math.round((width - 620) / 2),
+    y: Math.round((height - 420) / 2),
+    frame: false,
+    resizable: false,
+    alwaysOnTop: true,
+    backgroundColor: '#ffffff',
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.mjs'),
+      nodeIntegration: false,
+      contextIsolation: true,
+    },
+  });
+
+  sourceSelectorWindow.on('closed', () => {
+    sourceSelectorWindow = null;
+  });
+
+  if (VITE_DEV_SERVER_URL) {
+    sourceSelectorWindow.loadURL(VITE_DEV_SERVER_URL + '?windowType=source-selector');
+  } else {
+    sourceSelectorWindow.loadFile(path.join(RENDERER_DIST, 'index.html'), { 
+      query: { windowType: 'source-selector' } 
+    });
+  }
+
+  return sourceSelectorWindow;
+}
+
 function createWindow() {
   createHudOverlayWindow()
 }
@@ -118,7 +156,37 @@ app.on('activate', () => {
 })
 
 ipcMain.handle('get-sources', async (_, opts) => {
-  return await desktopCapturer.getSources(opts)
+  const sources = await desktopCapturer.getSources(opts)
+  const processedSources = sources.map(source => ({
+    id: source.id,
+    name: source.name,
+    display_id: source.display_id,
+    thumbnail: source.thumbnail ? source.thumbnail.toDataURL() : null,
+    appIcon: source.appIcon ? source.appIcon.toDataURL() : null
+  }))
+  
+  return processedSources
+})
+
+ipcMain.handle('select-source', (_, source) => {
+  selectedSource = source
+  if (sourceSelectorWindow) {
+    sourceSelectorWindow.close();
+    sourceSelectorWindow = null;
+  }
+  return selectedSource
+})
+
+ipcMain.handle('get-selected-source', () => {
+  return selectedSource
+})
+
+ipcMain.handle('open-source-selector', () => {
+  if (sourceSelectorWindow) {
+    sourceSelectorWindow.focus();
+    return;
+  }
+  createSourceSelectorWindow();
 })
 
 ipcMain.handle('switch-to-editor', () => {

electron/preload.ts

@@ -6,5 +6,14 @@ contextBridge.exposeInMainWorld('electronAPI', {
   },
   switchToEditor: () => {
     return ipcRenderer.invoke('switch-to-editor')
+  },
+  openSourceSelector: () => {
+    return ipcRenderer.invoke('open-source-selector')
+  },
+  selectSource: (source: any) => {
+    return ipcRenderer.invoke('select-source', source)
+  },
+  getSelectedSource: () => {
+    return ipcRenderer.invoke('get-selected-source')
   }
 })

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Pangolin</title>
   </head>
   <body>
     <div id="root"></div>

package-lock.json

@@ -9,11 +9,13 @@
       "version": "0.0.0",
       "dependencies": {
         "@radix-ui/react-slot": "^1.2.3",
+        "@radix-ui/react-tabs": "^1.1.13",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-react": "^0.545.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^5.5.0",
         "tailwind-merge": "^3.3.1",
         "tailwindcss-animate": "^1.0.7"
       },
@@ -1457,6 +1459,38 @@
         "node": ">=14"
       }
     },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
@@ -1472,6 +1506,132 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
+      "integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
@@ -1490,6 +1650,103 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz",
+      "integrity": "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.27",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
@@ -1994,7 +2251,7 @@
       "version": "18.3.7",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
       "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "^18.0.0"
@@ -6599,6 +6856,15 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",

package.json

@@ -11,11 +11,13 @@
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.13",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.545.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.5.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7"
   },

src/App.tsx

@@ -1,4 +1,5 @@
 import { LaunchWindow } from "./components/LaunchWindow";
+import { SourceSelector } from "./components/SourceSelector";
 import { useEffect, useState } from "react";
 
 export default function App() {
@@ -22,6 +23,10 @@ export default function App() {
     return <LaunchWindow />;
   }
 
+  if (windowType === 'source-selector') {
+    return <SourceSelector />;
+  }
+
   if (windowType === 'editor') {
     return (
       <div className="w-full h-full bg-background text-foreground p-6">
@@ -33,7 +38,7 @@ export default function App() {
 
   return (
     <div className="w-full h-full bg-background text-foreground">
-      <h1>Default Window</h1>
+      <h1>Pangolin</h1>
     </div>
   );
 }

src/components/LaunchWindow.tsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from "react";
 import { useScreenRecorder } from "../hooks/useScreenRecorder";
 import { Button } from "@/components/ui/button";
 import { BsRecordCircle } from "react-icons/bs";
@@ -6,43 +7,71 @@ import { MdMonitor } from "react-icons/md";
 
 export function LaunchWindow() {
   const { recording, toggleRecording } = useScreenRecorder();
+  const [selectedSource, setSelectedSource] = useState("Screen");
+  const [hasSelectedSource, setHasSelectedSource] = useState(false);
+
+  useEffect(() => {
+    const checkSelectedSource = async () => {
+      if (window.electronAPI) {
+        const source = await window.electronAPI.getSelectedSource();
+        if (source) {
+          setSelectedSource(source.name);
+          setHasSelectedSource(true);
+        } else {
+          setSelectedSource("Screen");
+          setHasSelectedSource(false);
+        }
+      }
+    };
+
+    checkSelectedSource();
+    
+    const interval = setInterval(checkSelectedSource, 500);
+    return () => clearInterval(interval);
+  }, []);
+
+  const truncateText = (text: string, maxLength: number = 6) => {
+    if (text.length <= maxLength) return text;
+    return text.substring(0, maxLength) + "...";
+  };
+
+  const openSourceSelector = () => {
+    if (window.electronAPI) {
+      window.electronAPI.openSourceSelector();
+    }
+  };
 
   return (
     <div className="w-full h-full flex items-center justify-center bg-transparent">
-      <div className="flex items-center gap-3 backdrop-blur-lg bg-white/10 rounded-full px-4 py-2 shadow-2xl border border-white/30">
+      <div className="flex items-center gap-6 backdrop-blur-lg bg-white/10 rounded-full px-6 py-3 shadow-2xl border border-white/30">
         <Button
           variant="link"
           size="sm"
-          className="gap-2 text-white bg-transparent hover:bg-transparent px-3"
-          onClick={() => {
-            console.log("Source button clicked - switching to editor");
-            // Simulate stopping recording and switching to editor
-            if (window.electronAPI) {
-              window.electronAPI.switchToEditor();
-            }
-          }}
+          className="gap-2 text-white bg-transparent hover:bg-transparent px-0"
+          onClick={openSourceSelector}
         >
           <MdMonitor size={16} className="text-white" />
-          Source
+          {truncateText(selectedSource)}
         </Button>
 
-        <div className="w-px h-5 bg-white/30" />
+        <div className="w-px h-6 bg-white/30" />
 
         <Button
           variant="link"
           size="sm"
-          onClick={toggleRecording}
-          className="gap-2 text-white bg-transparent hover:bg-transparent px-3"
+          onClick={hasSelectedSource ? toggleRecording : openSourceSelector}
+          disabled={!hasSelectedSource && !recording}
+          className="gap-2 bg-transparent hover:bg-transparent px-0"
         >
           {recording ? (
             <>
-              <FaRegStopCircle size={16} className="text-white" />
-              Stop
+              <FaRegStopCircle size={16} className="text-red-400" />
+              <span className="text-red-400">Stop</span>
             </>
           ) : (
             <>
-              <BsRecordCircle size={16} className="text-white" />
-              Record
+              <BsRecordCircle size={16} className={hasSelectedSource ? "text-white" : "text-white/50"} />
+              <span className={hasSelectedSource ? "text-white" : "text-white/50"}>Record</span>
             </>
           )}
         </Button>

src/components/SourceSelector.tsx

@@ -0,0 +1,202 @@
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Card } from "@/components/ui/card";
+
+interface DesktopSource {
+  id: string;
+  name: string;
+  thumbnail: string | null;
+  display_id: string;
+  appIcon: string | null;
+}
+
+export function SourceSelector() {
+  const [sources, setSources] = useState<DesktopSource[]>([]);
+  const [selectedSource, setSelectedSource] = useState<DesktopSource | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadSources();
+  }, []);
+
+  const loadSources = async () => {
+    try {
+      setLoading(true);
+      const rawSources = await window.electronAPI.getSources({
+        types: ['screen', 'window'],
+        thumbnailSize: { width: 320, height: 180 },
+        fetchWindowIcons: true
+      });
+
+      const formattedSources = rawSources.map(source => {
+        let displayName = source.name;
+        
+        if (source.id.startsWith('window:') && source.name.includes(' — ')) {
+          displayName = source.name.split(' — ')[1] || source.name;
+        }
+
+        return {
+          id: source.id,
+          name: displayName,
+          thumbnail: source.thumbnail,
+          display_id: source.display_id,
+          appIcon: source.appIcon 
+        };
+      });
+
+      setSources(formattedSources);
+    } catch (error) {
+      console.error('Error loading sources:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const screenSources = sources.filter(source => source.id.startsWith('screen:'));
+  const windowSources = sources.filter(source => source.id.startsWith('window:'));
+
+  const handleSourceSelect = (source: DesktopSource) => {
+    setSelectedSource(source);
+  };
+
+  const handleShare = async () => {
+    if (selectedSource) {
+      await window.electronAPI.selectSource(selectedSource);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="h-full bg-white flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-600 mx-auto mb-3"></div>
+          <p className="text-sm text-gray-600">Loading sources...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full bg-white flex flex-col">
+      <div className="p-4 bg-white">
+        <Tabs defaultValue="screens" className="flex flex-col">
+          <TabsList className="grid w-full grid-cols-2 mb-4 bg-gray-100">
+            <TabsTrigger value="screens" className="data-[state=active]:bg-gray-700 data-[state=active]:text-white text-gray-700">
+              Screens
+            </TabsTrigger>
+            <TabsTrigger value="windows" className="data-[state=active]:bg-gray-700 data-[state=active]:text-white text-gray-700">
+              Windows
+            </TabsTrigger>
+          </TabsList>
+          
+          <div className="h-64 overflow-hidden bg-white">
+            <TabsContent value="screens" className="h-full mt-0">
+              <div className="grid grid-cols-2 gap-3 h-full overflow-y-auto pr-2">
+                {screenSources.map((source) => (
+                  <Card
+                    key={source.id}
+                    className={`cursor-pointer transition-all hover:shadow-lg h-fit ${
+                      selectedSource?.id === source.id 
+                        ? 'ring-2 ring-gray-700 bg-gray-50' 
+                        : 'hover:ring-1 hover:ring-gray-300 bg-white border border-gray-200'
+                    }`}
+                    onClick={() => handleSourceSelect(source)}
+                  >
+                    <div className="p-3">
+                      <div className="relative mb-2">
+                        <img 
+                          src={source.thumbnail || ''} 
+                          alt={source.name}
+                          className="w-full aspect-video object-cover rounded border border-gray-300"
+                        />
+                        {selectedSource?.id === source.id && (
+                          <div className="absolute -top-1 -right-1">
+                            <div className="w-5 h-5 bg-gray-700 rounded-full flex items-center justify-center shadow-md">
+                              <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
+                                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                              </svg>
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                      <div className="text-xs font-medium text-gray-800 truncate">
+                        {source.name}
+                      </div>
+                    </div>
+                  </Card>
+                ))}
+              </div>
+            </TabsContent>
+
+            <TabsContent value="windows" className="h-full mt-0">
+              <div className="grid grid-cols-2 gap-3 h-full overflow-y-auto pr-2">
+                {windowSources.map((source) => (
+                  <Card
+                    key={source.id}
+                    className={`cursor-pointer transition-all hover:shadow-lg h-fit ${
+                      selectedSource?.id === source.id 
+                        ? 'ring-2 ring-gray-700 bg-gray-50' 
+                        : 'hover:ring-1 hover:ring-gray-300 bg-white border border-gray-200'
+                    }`}
+                    onClick={() => handleSourceSelect(source)}
+                  >
+                    <div className="p-3">
+                      <div className="relative mb-2">
+                        <img 
+                          src={source.thumbnail || ''} 
+                          alt={source.name}
+                          className="w-full aspect-video object-cover rounded border border-gray-300"
+                        />
+                        {selectedSource?.id === source.id && (
+                          <div className="absolute -top-1 -right-1">
+                            <div className="w-5 h-5 bg-gray-700 rounded-full flex items-center justify-center shadow-md">
+                              <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
+                                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                              </svg>
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                      <div className="flex items-center gap-2">
+                        {source.appIcon && (
+                          <img 
+                            src={source.appIcon} 
+                            alt="App icon"
+                            className="w-3 h-3 flex-shrink-0"
+                          />
+                        )}
+                        <div className="text-xs font-medium text-gray-800 truncate">
+                          {source.name}
+                        </div>
+                      </div>
+                    </div>
+                  </Card>
+                ))}
+              </div>
+            </TabsContent>
+          </div>
+        </Tabs>
+      </div>
+
+      <div className="bg-white border-t border-gray-200 p-3">
+        <div className="flex justify-center gap-3">
+          <Button 
+            variant="outline" 
+            onClick={() => window.close()}
+            className="px-6 py-1.5 text-sm bg-gray-600 border-gray-600 text-white hover:bg-gray-700"
+          >
+            Cancel
+          </Button>
+          <Button 
+            onClick={handleShare}
+            disabled={!selectedSource}
+            className="px-6 py-1.5 text-sm bg-gray-600 text-white hover:bg-gray-700 disabled:opacity-50 disabled:bg-gray-400"
+          >
+            Share
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/ui/card.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

src/components/ui/tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

src/hooks/useScreenRecorder.ts

@@ -28,26 +28,33 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 
   const startRecording = async () => {
     try {
-      const sources = await window.electronAPI.getSources({
-        types: ["screen", "window"],
-        thumbnailSize: { width: 1920, height: 1080 },
-      });
-      // change this later to a picker screen
-      const source = sources[1];
-      console.log(sources)
+      // Get the selected source from the main process
+      const selectedSource = await window.electronAPI.getSelectedSource();
+      
+      if (!selectedSource) {
+        alert("Please select a source to record");
+        return;
+      }
+
+      // Use the selected source
       const stream = await (navigator.mediaDevices as any).getUserMedia({
         audio: false,
         video: {
           mandatory: {
             chromeMediaSource: "desktop",
-            chromeMediaSourceId: source.id,
+            chromeMediaSourceId: selectedSource.id,
           },
         },
       });
       streamRef.current = stream;
+      
+      if (!streamRef.current) {
+        throw new Error("Failed to get media stream");
+      }
+      
       chunksRef.current = [];
       let mimeType = "video/webm;codecs=vp9";
-      const recorder = new MediaRecorder(stream, {
+      const recorder = new MediaRecorder(streamRef.current, {
         mimeType,
         videoBitsPerSecond: 8000000,
       });

src/vite-env.d.ts

@@ -1,7 +1,19 @@
 /// <reference types="vite/client" />
+
+interface ProcessedDesktopSource {
+  id: string;
+  name: string;
+  display_id: string;
+  thumbnail: string | null;
+  appIcon: string | null;
+}
+
 interface Window {
   electronAPI: {
-    getSources: (opts: Electron.SourcesOptions) => Promise<Electron.DesktopCapturerSource[]>
+    getSources: (opts: Electron.SourcesOptions) => Promise<ProcessedDesktopSource[]>
     switchToEditor: () => Promise<void>
+    openSourceSelector: () => Promise<void>
+    selectSource: (source: any) => Promise<any>
+    getSelectedSource: () => Promise<any>
   }
 }