feat(launch): add capture-excluded notes window for recordings#43
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughAdds a notes window flow: Electron opens and manages a notes BrowserWindow, the renderer exposes an open action, and the app renders a notes UI when ChangesNotes Window Feature
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant Renderer
participant preload
participant ipcMain
participant main
participant NotesWindow
Renderer->>preload: openNotes()
preload->>ipcMain: invoke("open-notes")
ipcMain->>main: getNotesWindow()
alt window exists
main->>NotesWindow: focus()
else
main->>main: createNotesWindowWrapper()
main->>NotesWindow: createNotesWindow()
end
ipcMain-->>Renderer: { opened: true }
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
|
@EtienneLescot, I would love to get feedback on this PR so I know what to improve upon |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@electron/windows.ts`:
- Around line 324-346: The Notes window is still using the default OS window
chrome because the BrowserWindow created in createNotesWindow() does not disable
the frame. Update the BrowserWindow options in createNotesWindow() to make it
frameless by setting the appropriate frame/title bar option so the window
renders without OS controls.
In `@src/App.tsx`:
- Around line 23-24: App currently mounts NotesWindow through two separate
conditions, so when windowType=notes and showNotes=true are both set it renders
twice and competes for the same notes localStorage state. Update App’s render
logic so NotesWindow is created through a single mutually exclusive path, using
the existing windowType/showNotes checks to choose only one branch and prevent
duplicate mounts; adjust the related NotesWindow render sites in App
accordingly.
In `@src/components/launch/LaunchWindow.tsx`:
- Around line 1048-1055: The new Notes icon-only button in LaunchWindow needs an
accessible name because the Tooltip content does not label the trigger. Update
the button that calls window.electronAPI.openNotes() to expose a clear label for
assistive tech, using the existing t("tooltips.openNotes") text as the button’s
accessible name while keeping the Tooltip for hover behavior.
In `@src/components/launch/NotesWindow.tsx`:
- Around line 17-20: The NotesWindow textarea is using hardcoded user-facing
placeholder text, so it bypasses the app’s localization flow. Update the
placeholder in NotesWindow to use the existing i18n/translation mechanism used
elsewhere in the launch UI, and ensure the new key is added to the locale
resources instead of leaving "Take notes here..." inline.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 5a24189e-3595-4780-8f6b-fa7b7d89cd0e
📒 Files selected for processing (10)
electron/electron-env.d.tselectron/ipc/handlers.tselectron/main.tselectron/preload.tselectron/windows.tssrc/App.tsxsrc/components/launch/LaunchWindow.tsxsrc/components/launch/NotesWindow.tsxsrc/i18n/locales/en/launch.jsonsrc/main.tsx
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/App.tsx`:
- Around line 117-120: The notes render path in App.tsx is not exclusive, so
when showNotes is true the NotesWindow renders but content still falls through
to the default Openscreen panel. Update the render logic around TooltipProvider,
NotesWindow, and the content branch so the notes route short-circuits the
default panel and only one view is shown. Use the existing showNotes and
windowType checks to make the NotesWindow path mutually exclusive from the
fallback content.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
|
@Itzadetunji thank you for this PR, could you provide us with screenshots of the feature ? |
Here is a screenshot of the toolbar 
Screenshotting will not work as native screenshot on mac will not even be able to pick it up 
|
|
@Itzadetunji thanks for the screenshot. |
Thanks for the prompt reply, I have tested it on windows and Mac and both don’t show the notes window when screenshotting or sharing screen Attached below is a picture of a windows computer sharing screen and as you can see the notes don’t come up (it was the same when using the open screen recorder) I also did test with and without native capture and no issues came up 
|
Also, no linux support was considered |
|
Okay, when it is possible we always try to keep features cross-platform.
also please check #43 (comment) Thanks ! |
Changed the query parameter from "windowType=notes" to "showNotes=true" in both the Electron window creation and the React app. This enhances clarity and consistency in how the notes window is displayed based on URL parameters.
Modified the Electron notes window to enhance its appearance and functionality by adjusting dimensions, background color, and removing unnecessary properties. Updated the React NotesWindow component to ensure it occupies the full screen height and width, improving user experience for note-taking.
Updated the dimensions of the Electron notes window for better usability and added max width and height constraints. Enhanced the React NotesWindow component to store and retrieve notes from local storage, improving the user experience by preserving notes across sessions.
Rearranged the order of window creation to ensure the countdown overlay is displayed correctly. Updated the title of the NotesWindow to "OpenScreen - Notes" for better branding and clarity.
Updated the NotesWindow component to utilize useLayoutEffect instead of useEffect for setting initial notes from local storage, improving performance and ensuring the notes are rendered correctly before the browser paints the UI.
Eliminated the allowScripts configuration for specific dependencies in package.json, streamlining the file and removing unnecessary entries.
Removed the conditional rendering of NotesWindow from the main App component and integrated it directly within the return statement when showNotes is true. Added aria-label for the open notes button in LaunchWindow for better accessibility. Updated the placeholder text in NotesWindow to utilize localized strings for improved user experience.
Removed the conditional block for rendering NotesWindow and integrated it directly within the return statement, improving code clarity. This change ensures that NotesWindow is displayed when showNotes is true, streamlining the component structure.
There was a problem hiding this comment.
🧹 Nitpick comments (1)
electron/ipc/handlers.ts (1)
1484-1494: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueMisleading variable name
notesSelectorWin.This holds the notes
BrowserWindow, not a "selector" — looks like it was copy-pasted from theopen-source-selectorhandler above (Line 1475'ssourceSelectorWin). Rename for clarity.✏️ Proposed rename
ipcMain.handle("open-notes", async () => { - const notesSelectorWin = getNotesWindow(); - if (notesSelectorWin) { - notesSelectorWin.focus(); + const notesWin = getNotesWindow(); + if (notesWin) { + notesWin.focus(); return { opened: true }; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@electron/ipc/handlers.ts` around lines 1484 - 1494, The open-notes IPC handler uses a misleading copied variable name for the window returned by getNotesWindow(), so rename notesSelectorWin to a name that clearly reflects the notes BrowserWindow (for example, notesWin) and update the same identifier throughout the open-notes handler. Keep the behavior unchanged; this is just a clarity fix aligned with the nearby open-source-selector handler’s naming pattern.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@electron/ipc/handlers.ts`:
- Around line 1484-1494: The open-notes IPC handler uses a misleading copied
variable name for the window returned by getNotesWindow(), so rename
notesSelectorWin to a name that clearly reflects the notes BrowserWindow (for
example, notesWin) and update the same identifier throughout the open-notes
handler. Keep the behavior unchanged; this is just a clarity fix aligned with
the nearby open-source-selector handler’s naming pattern.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: d1e1dae0-63eb-4e46-81d9-9a15dd549fcb
📒 Files selected for processing (10)
electron/electron-env.d.tselectron/ipc/handlers.tselectron/main.tselectron/preload.tselectron/windows.tssrc/App.tsxsrc/components/launch/LaunchWindow.tsxsrc/components/launch/NotesWindow.tsxsrc/i18n/locales/en/launch.jsonsrc/main.tsx
🚧 Files skipped from review as they are similar to previous changes (9)
- electron/preload.ts
- src/main.tsx
- src/components/launch/NotesWindow.tsx
- src/App.tsx
- src/i18n/locales/en/launch.json
- electron/windows.ts
- electron/main.ts
- electron/electron-env.d.ts
- src/components/launch/LaunchWindow.tsx
|
@EtienneLescot Linux update: Notes window: works on Linux (open, type, persist, focus). Also fixed the comment from Coderabbit: Ps: I have updated the languages |
|
Hey @Itzadetunji — nice work, this is a solid feature and users actually want it (Loom ships 'Speaker Notes', plokhovd/cloak-note does the same content-protection trick as a standalone app). A few small things before I'd be comfortable merging:
And on a forward-looking note: an automatic teleprompter mode (scrolls at speaking pace, mirror-flip for glass teleprompters, optionally font-size tied to distance from camera) would be a great v2 on top of the markdown notes window. Worth opening a tracking issue for it so it doesn't get lost. Overall: cool feature, merge-worthy with the Linux gate + markdown + a real capture test. Nice work. 👍 |
Updated package versions to 1.6.0-rc.1 and integrated Tiptap for the NotesWindow component, replacing the previous textarea with a rich text editor. Improved local storage handling for notes and added styles for better UI. Enhanced CSS to hide scrollbars for a cleaner appearance.
Modified the minimum width of the Electron notes window for improved usability. Removed unused CSS styles from NotesWindow.module.css and updated the NotesWindow component to utilize Tailwind CSS for layout and styling, enhancing the overall user interface.
Updated the NotesToolbar component to include tooltips for each formatting button, improving user experience. Integrated localization for toolbar button labels using the useScopedT hook, ensuring accessibility for multiple languages. Added corresponding translations for toolbar actions in various locale files.
Simplified the notes content escaping logic in the NotesWindow component by formatting the code for better readability. This change enhances maintainability while ensuring that notes saved as plain text are correctly wrapped for Tiptap parsing.
|
Hi @EtienneLescot, I’ve reviewed all the points you raised.
PS: I added language support for the toolbar for the WYSIWYG editor Also, for the issue you raised that should be created, I will look into it however I will need a bit more clarity here |
|
Perfect, this is exactly what I had in mind — Tiptap is a great pick, the OBS footage proves the capture exclusion works in practice, and the platform note is now visible upfront. For the v2 issue, what I have in mind is something like:
Open it as a new issue and link it from this PR's 'Future work' section so it doesn't get lost. Approving on my side once the merge conflicts are resolved — nice work. |
Makes alot of sense, working on the issue now [Future work] will be the starting title |
|
Here is the link |
2 participants
Notes window
Recording-time plain-text notes in a separate Electron window, opened from the HUD. The window uses content protection so it is excluded from most screen capture pipelines.
Notes is Windows and macOS only
This is due to linux not supporting "setContentProtection" from electron
Pull request summary
Use the section below as the PR description (
gh pr create --body-file docs/features/notes-window.md— remove everything above this heading first, or copy from Summary onward).Summary
Adds a dedicated Notes window for taking plain-text notes while recording. Users open it from a new notepad button on the recording HUD. Notes live in a separate
BrowserWindow(not the HUD overlay) withsetContentProtection(true)so the window is excluded from most screen capture pipelines.Implementation follows the existing multi-window pattern: main-process factory in
electron/windows.ts, lifecycle wrapper inelectron/main.ts, IPC viaopen-notes/electronAPI.openNotes(), and renderer routing with the?showNotes=truequery param to renderNotesWindow. Re-opening notes focuses the existing window instead of creating duplicates. Note content is persisted locally vialocalStorage.Related issue
Fixes #
Type of change
Release impact
Desktop impact
Screenshots / video
Testing
Manual
npm run devlocalStorage).Commands
npm run lintnpx tsc --noEmitnpm run testnpm run i18n:checkPlatforms tested
Architecture
OpenScreen uses one Vite/React entry (
index.html) for every window. The notes window is a secondBrowserWindowthat loads the same app with?showNotes=true.App.tsxrenders<NotesWindow />when that param is present.electron/windows.tscreateNotesWindow()— size, title,setContentProtection, load URLelectron/main.tsnotesWindowref,createNotesWindowWrapper(),closedhandlerelectron/ipc/handlers.tsopen-notes— focus existing or createelectron/preload.tsopenNotes()electron/electron-env.d.tsopenNotesreturn typesrc/App.tsx,src/main.tsxshowNotesquery paramsrc/components/launch/NotesWindow.tsxlocalStoragesrc/components/launch/LaunchWindow.tsxsrc/i18n/locales/en/launch.jsontooltips.openNotesWindow options
The notes window is a standard framed, resizable window:
skipTaskbar: false)Persistence
Notes are stored in renderer
localStorageunder the key"notes". This is global to the app install, not tied to a specific recording or project.Known limitations (v1)
tooltips.openNotesadded to English locale only; other locales need updating beforenpm run i18n:checkpassesRelease note (changelog)
Summary by CodeRabbit
showNotes=true.