make dragger register

electron/electron-env.d.ts

@@ -63,6 +63,7 @@ interface UpdateStatusSummary {
 interface Window {
 	electronAPI: {
 		hudOverlaySetIgnoreMouse: (ignore: boolean) => void;
+		hudOverlayDrag: (phase: "start" | "move" | "end", screenX: number, screenY: number) => void;
 		hudOverlayHide: () => void;
 		hudOverlayClose: () => void;
 		setHudOverlayExpanded: (expanded: boolean) => void;

electron/preload.ts

@@ -4,6 +4,9 @@ contextBridge.exposeInMainWorld("electronAPI", {
 	hudOverlaySetIgnoreMouse: (ignore: boolean) => {
 		ipcRenderer.send("hud-overlay-set-ignore-mouse", ignore);
 	},
+	hudOverlayDrag: (phase: "start" | "move" | "end", screenX: number, screenY: number) => {
+		ipcRenderer.send("hud-overlay-drag", phase, screenX, screenY);
+	},
 	hudOverlayHide: () => {
 		ipcRenderer.send("hud-overlay-hide");
 	},

electron/windows.ts

@@ -182,6 +182,24 @@ ipcMain.on("hud-overlay-set-ignore-mouse", (_event, ignore: boolean) => {
 	}
 });
 
+let hudDragOffset: { x: number; y: number } | null = null;
+
+ipcMain.on("hud-overlay-drag", (_event, phase: string, screenX: number, screenY: number) => {
+	if (!hudOverlayWindow || hudOverlayWindow.isDestroyed()) return;
+
+	if (phase === "start") {
+		const bounds = hudOverlayWindow.getBounds();
+		hudDragOffset = { x: screenX - bounds.x, y: screenY - bounds.y };
+	} else if (phase === "move" && hudDragOffset) {
+		hudOverlayWindow.setPosition(
+			Math.round(screenX - hudDragOffset.x),
+			Math.round(screenY - hudDragOffset.y),
+		);
+	} else if (phase === "end") {
+		hudDragOffset = null;
+	}
+});
+
 ipcMain.on("hud-overlay-hide", () => {
 	if (hudOverlayWindow && !hudOverlayWindow.isDestroyed()) {
 		hudOverlayWindow.minimize();

src/components/launch/LaunchWindow.tsx

@@ -169,6 +169,7 @@ export function LaunchWindow() {
 		setWebcamDeviceId,
 		countdownDelay,
 		setCountdownDelay,
+		preparePermissions,
 	} = useScreenRecorder();
 
 	const [recordingStart, setRecordingStart] = useState<number | null>(null);
@@ -204,6 +205,7 @@ export function LaunchWindow() {
 	const hudBarRef = useRef<HTMLDivElement>(null);
 	const moreButtonRef = useRef<HTMLButtonElement | null>(null);
 	const webcamPreviewRef = useRef<HTMLVideoElement | null>(null);
+	const isDraggingRef = useRef(false);
 
 	const micDropdownOpen = activeDropdown === "mic";
 	const webcamDropdownOpen = activeDropdown === "webcam";
@@ -386,6 +388,10 @@ export function LaunchWindow() {
 		};
 	}, []);
 
+	useEffect(() => {
+		void preparePermissions({ startup: true });
+	}, [preparePermissions]);
+
 	useEffect(() => {
 		let mounted = true;
 
@@ -877,7 +883,11 @@ export function LaunchWindow() {
 				ref={hudContentRef}
 				className="flex flex-col items-center overflow-visible"
 				onMouseEnter={() => window.electronAPI?.hudOverlaySetIgnoreMouse?.(false)}
-				onMouseLeave={() => window.electronAPI?.hudOverlaySetIgnoreMouse?.(true)}
+				onMouseLeave={() => {
+					if (!isDraggingRef.current) {
+						window.electronAPI?.hudOverlaySetIgnoreMouse?.(true);
+					}
+				}}
 			>
 				{/* Only the visible HUD content should become interactive. */}
 				<div className={styles.menuArea}>
@@ -1160,9 +1170,27 @@ export function LaunchWindow() {
 						ref={hudBarRef}
 						layout
 						transition={hudStateTransition}
-						className={`${styles.bar} ${styles.electronDrag} mb-2`}
+						className={`${styles.bar} mb-2`}
 					>
-						<div className={`flex items-center px-0.5 ${styles.electronDrag}`}>
+						<div
+							className="flex items-center px-0.5 cursor-grab active:cursor-grabbing"
+							onMouseDown={(e) => {
+								e.preventDefault();
+								isDraggingRef.current = true;
+								window.electronAPI?.hudOverlayDrag?.("start", e.screenX, e.screenY);
+								const handleMove = (ev: MouseEvent) => {
+									window.electronAPI?.hudOverlayDrag?.("move", ev.screenX, ev.screenY);
+								};
+								const handleUp = () => {
+									isDraggingRef.current = false;
+									window.electronAPI?.hudOverlayDrag?.("end", 0, 0);
+									document.removeEventListener("mousemove", handleMove);
+									document.removeEventListener("mouseup", handleUp);
+								};
+								document.addEventListener("mousemove", handleMove);
+								document.addEventListener("mouseup", handleUp);
+							}}
+						>
 							<RxDragHandleDots2 size={14} className="text-[#6b6b78]" />
 						</div>