external url direct handler

dist-electron/main.js

@@ -1,4 +1,4 @@
-import { BrowserWindow, screen, ipcMain, desktopCapturer, app, nativeImage, Tray, Menu } from "electron";
+import { BrowserWindow, screen, ipcMain, desktopCapturer, shell, app, nativeImage, Tray, Menu } from "electron";
 import { fileURLToPath } from "node:url";
 import path from "node:path";
 import fs from "node:fs/promises";
@@ -318,6 +318,15 @@ function registerIpcHandlers(createEditorWindow2, createSourceSelectorWindow2, g
       onRecordingStateChange(recording, source.name);
     }
   });
+  ipcMain.handle("open-external-url", async (_, url) => {
+    try {
+      await shell.openExternal(url);
+      return { success: true };
+    } catch (error) {
+      console.error("Failed to open URL:", error);
+      return { success: false, error: String(error) };
+    }
+  });
 }
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const RECORDINGS_DIR = path.join(app.getPath("userData"), "recordings");

dist-electron/preload.mjs

@@ -38,5 +38,8 @@ electron.contextBridge.exposeInMainWorld("electronAPI", {
     const listener = () => callback();
     electron.ipcRenderer.on("stop-recording-from-tray", listener);
     return () => electron.ipcRenderer.removeListener("stop-recording-from-tray", listener);
+  },
+  openExternalUrl: (url) => {
+    return electron.ipcRenderer.invoke("open-external-url", url);
   }
 });

electron/electron-env.d.ts

@@ -36,6 +36,7 @@ interface Window {
     getRecordedVideoPath: () => Promise<{ success: boolean; path?: string; message?: string }>
     setRecordingState: (recording: boolean) => Promise<void>
     onStopRecordingFromTray: (callback: () => void) => () => void
+    openExternalUrl: (url: string) => Promise<{ success: boolean; error?: string }>
   }
 }
 

electron/ipc/handlers.ts

@@ -1,4 +1,4 @@
-import { ipcMain, desktopCapturer, BrowserWindow } from 'electron'
+import { ipcMain, desktopCapturer, BrowserWindow, shell } from 'electron'
 import { startMouseTracking, stopMouseTracking, getTrackingData } from './mouseTracking'
 import fs from 'node:fs/promises'
 import path from 'node:path'
@@ -134,4 +134,14 @@ export function registerIpcHandlers(
       onRecordingStateChange(recording, source.name)
     }
   })
+
+  ipcMain.handle('open-external-url', async (_, url: string) => {
+    try {
+      await shell.openExternal(url)
+      return { success: true }
+    } catch (error) {
+      console.error('Failed to open URL:', error)
+      return { success: false, error: String(error) }
+    }
+  })
 }

electron/preload.ts

@@ -38,5 +38,8 @@ contextBridge.exposeInMainWorld('electronAPI', {
     const listener = () => callback()
     ipcRenderer.on('stop-recording-from-tray', listener)
     return () => ipcRenderer.removeListener('stop-recording-from-tray', listener)
+  },
+  openExternalUrl: (url: string) => {
+    return ipcRenderer.invoke('open-external-url', url)
   }
 })

src/components/video-editor/SettingsPanel.tsx

@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button";
 import { useState } from "react";
 import Colorful from '@uiw/react-color-colorful';
 import { hsvaToHex } from '@uiw/color-convert';
-import { Trash2, Download, Crop, X } from "lucide-react";
+import { Trash2, Download, Crop, X, Bug } from "lucide-react";
 import type { ZoomDepth, CropRegion } from "./types";
 import { CropControl } from "./CropControl";
 
@@ -244,6 +244,16 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
             <Download className="w-6 h-6" />
             <span className="text-lg">Export Video</span>
           </Button>
+          <button
+            type="button"
+            onClick={() => {
+              window.electronAPI?.openExternalUrl('https://github.com/siddharthvaddem/pangolin/issues/new');
+            }}
+            className="w-full mt-3 flex items-center justify-center gap-1 text-[10px] text-muted-foreground/60 hover:text-muted-foreground/90 transition-colors py-1"
+          >
+            <Bug className="w-3 h-3 text-black" />
+            <span>Report Bug</span>
+          </button>
         </div>
     </div>
   );

src/vite-env.d.ts

@@ -38,5 +38,6 @@ interface Window {
     }>
     setRecordingState: (recording: boolean) => Promise<void>
     onStopRecordingFromTray: (callback: () => void) => () => void
+    openExternalUrl: (url: string) => Promise<{ success: boolean; error?: string }>
   }
 }