[codex] Fix issue 3 app launch and UI bugs

electron/main.ts

@@ -92,6 +92,10 @@ const defaultTrayIcon = getTrayIcon("openscreen.png", trayIconSize);
 const recordingTrayIcon = getTrayIcon("rec-button.png", trayIconSize);
 
 function createWindow() {
+	if (mainWindow && !mainWindow.isDestroyed()) {
+		return;
+	}
+
 	mainWindow = createHudOverlayWindow();
 }
 
@@ -108,6 +112,16 @@ function showMainWindow() {
 	createWindow();
 }
 
+const hasSingleInstanceLock = app.requestSingleInstanceLock();
+
+if (hasSingleInstanceLock) {
+	app.on("second-instance", () => {
+		showMainWindow();
+	});
+} else {
+	app.quit();
+}
+
 function isEditorWindow(window: BrowserWindow) {
 	return window.webContents.getURL().includes("windowType=editor");
 }
@@ -456,7 +470,9 @@ app.on("will-quit", () => {
 	unregisterAllGlobalShortcuts();
 });
 
-app.whenReady().then(async () => {
+const appReady = hasSingleInstanceLock ? app.whenReady() : null;
+
+appReady?.then(async () => {
 	// Force "regular" activation policy so the Dock icon appears. The HUD overlay
 	// (transparent, frameless, skipTaskbar) is the first window, and AppKit would
 	// otherwise classify us as an accessory app.

src/components/launch/LaunchWindow.tsx

@@ -522,6 +522,45 @@ export function LaunchWindow() {
 		}
 	};
 	const dragLastPositionRef = useRef<{ x: number; y: number } | null>(null);
+	const dragAnimationFrameRef = useRef<number | null>(null);
+	const pendingDragDeltaRef = useRef({ x: 0, y: 0 });
+	const flushHudDragMove = useCallback(() => {
+		dragAnimationFrameRef.current = null;
+		const { x, y } = pendingDragDeltaRef.current;
+		pendingDragDeltaRef.current = { x: 0, y: 0 };
+		if (x === 0 && y === 0) return;
+		window.electronAPI?.moveHudOverlayBy?.(x, y);
+	}, []);
+	const scheduleHudDragMove = useCallback(
+		(deltaX: number, deltaY: number) => {
+			pendingDragDeltaRef.current = {
+				x: pendingDragDeltaRef.current.x + deltaX,
+				y: pendingDragDeltaRef.current.y + deltaY,
+			};
+
+			if (dragAnimationFrameRef.current === null) {
+				dragAnimationFrameRef.current = window.requestAnimationFrame(flushHudDragMove);
+			}
+		},
+		[flushHudDragMove],
+	);
+	const flushPendingHudDragMove = useCallback(() => {
+		if (dragAnimationFrameRef.current !== null) {
+			window.cancelAnimationFrame(dragAnimationFrameRef.current);
+			dragAnimationFrameRef.current = null;
+		}
+		const { x, y } = pendingDragDeltaRef.current;
+		pendingDragDeltaRef.current = { x: 0, y: 0 };
+		if (x === 0 && y === 0) return;
+		window.electronAPI?.moveHudOverlayBy?.(x, y);
+	}, []);
+	useEffect(() => {
+		return () => {
+			if (dragAnimationFrameRef.current !== null) {
+				window.cancelAnimationFrame(dragAnimationFrameRef.current);
+			}
+		};
+	}, []);
 	const handleHudDragPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
 		event.preventDefault();
 		event.stopPropagation();
@@ -535,10 +574,11 @@ export function LaunchWindow() {
 		const deltaX = event.screenX - lastPosition.x;
 		const deltaY = event.screenY - lastPosition.y;
 		dragLastPositionRef.current = { x: event.screenX, y: event.screenY };
-		window.electronAPI?.moveHudOverlayBy?.(deltaX, deltaY);
+		scheduleHudDragMove(deltaX, deltaY);
 	};
 	const handleHudDragPointerEnd = (event: React.PointerEvent<HTMLDivElement>) => {
 		dragLastPositionRef.current = null;
+		flushPendingHudDragMove();
 		if (event.currentTarget.hasPointerCapture(event.pointerId)) {
 			event.currentTarget.releasePointerCapture(event.pointerId);
 		}

src/components/video-editor/SettingsPanel.tsx

@@ -1705,22 +1705,22 @@ export function SettingsPanel({
 									</AccordionTrigger>
 									<AccordionContent className="pb-3">
 										<Tabs defaultValue="image" className="w-full">
-											<TabsList className="mb-2 bg-white/5 border border-white/5 p-0.5 w-full grid grid-cols-3 h-7 rounded-lg">
+											<TabsList className="mb-2 grid h-7 w-full grid-cols-3 rounded-lg border border-white/5 bg-white/5 p-0.5">
 												<TabsTrigger
 													value="image"
-													className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 text-[10px] py-1 rounded-md transition-all"
+													className="h-full min-w-0 rounded-md px-1 py-0 text-[10px] leading-none text-slate-400 transition-colors data-[state=active]:bg-[#34B27B] data-[state=active]:text-white data-[state=active]:shadow-none"
 												>
 													{t("background.image")}
 												</TabsTrigger>
 												<TabsTrigger
 													value="color"
-													className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 text-[10px] py-1 rounded-md transition-all"
+													className="h-full min-w-0 rounded-md px-1 py-0 text-[10px] leading-none text-slate-400 transition-colors data-[state=active]:bg-[#34B27B] data-[state=active]:text-white data-[state=active]:shadow-none"
 												>
 													{t("background.color")}
 												</TabsTrigger>
 												<TabsTrigger
 													value="gradient"
-													className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 text-[10px] py-1 rounded-md transition-all"
+													className="h-full min-w-0 rounded-md px-1 py-0 text-[10px] leading-none text-slate-400 transition-colors data-[state=active]:bg-[#34B27B] data-[state=active]:text-white data-[state=active]:shadow-none"
 												>
 													{t("background.gradient")}
 												</TabsTrigger>