feat(launch): add capture-excluded notes window for recordings

electron/electron-env.d.ts

@@ -41,6 +41,10 @@ interface Window {
 				error?: string;
 			};
 		}>;
+		openNotes: () => Promise<{
+			opened: boolean;
+			reason?: string;
+		}>;
 		selectSource: (source: ProcessedDesktopSource) => Promise<ProcessedDesktopSource | null>;
 		getSelectedSource: () => Promise<ProcessedDesktopSource | null>;
 		onSelectedSourceChanged: (callback: (source: ProcessedDesktopSource) => void) => () => void;

electron/ipc/handlers.ts

@@ -1280,8 +1280,10 @@ export function registerIpcHandlers(
 	createEditorWindow: () => void,
 	createSourceSelectorWindow: () => BrowserWindow,
 	createCountdownOverlayWindow: () => BrowserWindow,
+	createNotesWindowWrapper: () => BrowserWindow,
 	getMainWindow: () => BrowserWindow | null,
 	getSourceSelectorWindow: () => BrowserWindow | null,
+	getNotesWindow: () => BrowserWindow | null,
 	getCountdownOverlayWindow?: () => BrowserWindow | null,
 	onRecordingStateChange?: (recording: boolean, sourceName: string) => void,
 	_switchToHud?: () => void,
@@ -1479,6 +1481,17 @@ export function registerIpcHandlers(
 		return { opened: true };
 	});
 
+	ipcMain.handle("open-notes", async () => {
+		const notesSelectorWin = getNotesWindow();
+		if (notesSelectorWin) {
+			notesSelectorWin.focus();
+			return { opened: true };
+		}
+
+		createNotesWindowWrapper();
+		return { opened: true };
+	});
+
 	ipcMain.handle("switch-to-editor", () => {
 		// createEditorWindow already closes the current mainWindow (the HUD) before
 		// opening the editor. Closing it here too double-closes, leaving ghost

electron/main.ts

@@ -25,6 +25,7 @@ import {
 	createCountdownOverlayWindow,
 	createEditorWindow,
 	createHudOverlayWindow,
+	createNotesWindow,
 	createSourceSelectorWindow,
 } from "./windows";
 
@@ -84,6 +85,7 @@ process.env.VITE_PUBLIC = VITE_DEV_SERVER_URL
 let mainWindow: BrowserWindow | null = null;
 let sourceSelectorWindow: BrowserWindow | null = null;
 let countdownOverlayWindow: BrowserWindow | null = null;
+let notesWindow: BrowserWindow | null = null;
 let tray: Tray | null = null;
 let selectedSourceName = "";
 const isMac = process.platform === "darwin";
@@ -437,6 +439,19 @@ function createSourceSelectorWindowWrapper() {
 	return sourceSelectorWindow;
 }
 
+function createNotesWindowWrapper() {
+	{
+		notesWindow = createNotesWindow();
+		notesWindow.on("closed", () => {
+			notesWindow = null;
+			if (mainWindow && !mainWindow.isDestroyed()) {
+				mainWindow.webContents.send("notes-window-closed");
+			}
+		});
+		return notesWindow;
+	}
+}
+
 function createCountdownOverlayWindowWrapper() {
 	if (countdownOverlayWindow && !countdownOverlayWindow.isDestroyed()) {
 		return countdownOverlayWindow;
@@ -575,8 +590,10 @@ appReady?.then(async () => {
 		createEditorWindowWrapper,
 		createSourceSelectorWindowWrapper,
 		createCountdownOverlayWindowWrapper,
+		createNotesWindowWrapper,
 		() => mainWindow,
 		() => sourceSelectorWindow,
+		() => notesWindow,
 		() => countdownOverlayWindow,
 		(recording: boolean, sourceName: string) => {
 			selectedSourceName = sourceName;

electron/preload.ts

@@ -47,6 +47,9 @@ contextBridge.exposeInMainWorld("electronAPI", {
 	openSourceSelector: () => {
 		return ipcRenderer.invoke("open-source-selector");
 	},
+	openNotes: () => {
+		return ipcRenderer.invoke("open-notes");
+	},
 	selectSource: (source: ProcessedDesktopSource) => {
 		return ipcRenderer.invoke("select-source", source);
 	},

electron/windows.ts

@@ -320,3 +320,44 @@ export function createCountdownOverlayWindow(): BrowserWindow {
 
 	return win;
 }
+
+// Frameless Notes Window for taking notes during a recording.
+export function createNotesWindow(): BrowserWindow {
+	const win = new BrowserWindow({
+		width: 400,
+		height: 540,
+		minWidth: 320,
+		minHeight: 400,
+		maxWidth: 640,
+		maxHeight: 720,
+		title: "OpenScreen - Notes",
+		backgroundColor: "#09090b",
+		resizable: true,
+		alwaysOnTop: true,
+		skipTaskbar: false,
+		show: false,
+		webPreferences: {
+			preload: path.join(__dirname, "preload.mjs"),
+			additionalArguments: [ASSET_BASE_URL_ARG],
+			nodeIntegration: false,
+			contextIsolation: true,
+			backgroundThrottling: false,
+		},
+	});
+
+	win.setContentProtection(true);
+	win.once("ready-to-show", () => {
+		win.setContentProtection(true);
+		win.show();
+	});
+
+	if (VITE_DEV_SERVER_URL) {
+		win.loadURL(VITE_DEV_SERVER_URL + "?showNotes=true");
+	} else {
+		win.loadFile(path.join(RENDERER_DIST, "index.html"), {
+			query: { showNotes: "true" },
+		});
+	}
+
+	return win;
+}

src/App.tsx

@@ -1,6 +1,7 @@
 import { lazy, Suspense, useEffect, useState } from "react";
 import { CountdownOverlay } from "./components/launch/CountdownOverlay.tsx";
 import { LaunchWindow } from "./components/launch/LaunchWindow";
+import { NotesWindow } from "./components/launch/NotesWindow.tsx";
 import { SourceSelector } from "./components/launch/SourceSelector";
 import { Toaster } from "./components/ui/sonner";
 import { TooltipProvider } from "./components/ui/tooltip";
@@ -19,6 +20,8 @@ export default function App() {
 	const [windowType, setWindowType] = useState(
 		() => new URLSearchParams(window.location.search).get("windowType") || "",
 	);
+	const showNotes = new URLSearchParams(window.location.search).get("showNotes") === "true";
+
 	const tEditor = useScopedT("editor");
 
 	useEffect(() => {
@@ -102,15 +105,18 @@ export default function App() {
 				);
 			default:
 				return (
-					<div className="w-full h-full bg-background text-foreground">
-						<h1>Openscreen</h1>
+					<div>
+						<div className="w-full h-full bg-background text-foreground">
+							<h1>Openscreen</h1>
+						</div>
 					</div>
 				);
 		}
 	})();
 
 	return (
 		<TooltipProvider>
+			{showNotes && <NotesWindow />}
 			{content}
 			<Toaster theme="dark" />
 		</TooltipProvider>

src/components/launch/LaunchWindow.tsx

@@ -1,4 +1,12 @@
-import { Check, ChevronDown, Clapperboard, Columns3, Languages, Rows3 } from "lucide-react";
+import {
+	Check,
+	ChevronDown,
+	Clapperboard,
+	Columns3,
+	Languages,
+	NotepadText,
+	Rows3,
+} from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { BsPauseCircle, BsPlayCircle, BsRecordCircle } from "react-icons/bs";
@@ -697,7 +705,10 @@ export function LaunchWindow() {
 							onMouseLeave={() => setIsMicHovered(false)}
 							onFocus={() => setIsMicFocused(true)}
 							onBlur={() => setIsMicFocused(false)}
-							style={{ width: micExpanded ? "240px" : "140px", transition: "width 300ms ease" }}
+							style={{
+								width: micExpanded ? "240px" : "140px",
+								transition: "width 300ms ease",
+							}}
 						>
 							<div className="relative flex-1 min-w-0">
 								{!micExpanded && (
@@ -743,7 +754,10 @@ export function LaunchWindow() {
 							onMouseLeave={() => setIsWebcamHovered(false)}
 							onFocus={() => setIsWebcamFocused(true)}
 							onBlur={() => setIsWebcamFocused(false)}
-							style={{ width: webcamExpanded ? "240px" : "140px", transition: "width 300ms ease" }}
+							style={{
+								width: webcamExpanded ? "240px" : "140px",
+								transition: "width 300ms ease",
+							}}
 						>
 							<div className="relative flex-1 min-w-0">
 								{!webcamExpanded && (
@@ -1031,6 +1045,17 @@ export function LaunchWindow() {
 					</div>
 				)}
 
+				<Tooltip content={t("tooltips.openNotes")}>
+					<button
+						type="button"
+						aria-label={t("tooltips.openNotes")}
+						className={`${hudIconBtnClasses} ${styles.electronNoDrag}`}
+						onClick={() => window.electronAPI.openNotes()}
+					>
+						<NotepadText size={ICON_SIZE} className="text-white/60" />
+					</button>
+				</Tooltip>
+
 				{!recording && (
 					<Tooltip content={t("tooltips.openStudio")}>
 						<button

src/components/launch/NotesWindow.tsx

@@ -0,0 +1,27 @@
+import React, { useLayoutEffect, useState } from "react";
+import { useScopedT } from "@/contexts/I18nContext";
+
+export function NotesWindow() {
+	const t = useScopedT("launch");
+	const [notes, setNotes] = useState("");
+
+	const handleNotesChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+		localStorage.setItem("notes", e.target.value);
+		setNotes(e.target.value);
+	};
+
+	useLayoutEffect(() => {
+		setNotes(localStorage.getItem("notes") ?? "");
+	}, []);
+
+	return (
+		<div className="bg-white h-screen w-screen px-6 py-4">
+			<textarea
+				className="w-full h-full bg-transparent outline-none resize-none caret-black text-black"
+				placeholder={t("tooltips.openNotesPlaceholder")}
+				value={notes}
+				onChange={handleNotesChange}
+			/>
+		</div>
+	);
+}

src/i18n/locales/en/launch.json

@@ -10,7 +10,9 @@
 		"openProject": "Open project",
 		"useVerticalTray": "Use vertical tray",
 		"useHorizontalTray": "Use horizontal tray",
-		"openStudio": "Open Studio"
+		"openStudio": "Open Studio",
+		"openNotes": "Open Notes",
+		"openNotesPlaceholder": "Take notes here..."
 	},
 	"audio": {
 		"enableSystemAudio": "Enable system audio",

src/main.tsx

@@ -5,7 +5,9 @@ import { I18nProvider } from "./contexts/I18nContext";
 import "./index.css";
 
 const windowType = new URLSearchParams(window.location.search).get("windowType") || "";
+const showNotes = new URLSearchParams(window.location.search).get("showNotes") === "true";
 if (
+	showNotes ||
 	windowType === "hud-overlay" ||
 	windowType === "source-selector" ||
 	windowType === "countdown-overlay"