Skip to content

Add floating live preview panel#2

Open
chuntwdev wants to merge 9 commits intoCyronlee:mainfrom
chuntwdev:feature/floating-preview-panel
Open

Add floating live preview panel#2
chuntwdev wants to merge 9 commits intoCyronlee:mainfrom
chuntwdev:feature/floating-preview-panel

Conversation

@chuntwdev
Copy link
Collaborator

@chuntwdev chuntwdev commented Feb 26, 2026

Summary

  • Add a detachable floating window that displays live transcription (and translation) over other apps, modeled after Apple's Live Captions panel
  • Uses Liquid Glass (glassEffect) for the panel surface with glass-styled pin/close controls that appear on hover
  • Panel supports drag-to-move, resize, pin-on-top across all Spaces, and persists its frame position between sessions

Details

New files:

  • FloatingPreviewView.swift — SwiftUI caption view with roll-up scrolling, source + subordinated translation lines, hover-gated controls
  • FloatingPreviewPanelManager.swiftNSPanel lifecycle manager (show/close/pin, non-activating borderless panel)
  • LivePreviewContentView.swift — Reusable live preview card shared by the main window's bottom panel

The floating preview reads from the same shared TransFlowViewModel, so it stays in sync with the main window. Opened via a "Pop Up" button in the control bar.

Test plan

  • Click "Pop Up" button in control bar — floating panel appears
  • Start transcription — text streams live into the panel, matching the main window
  • Enable translation — translation lines appear below source text in smaller secondary style
  • Pin button keeps panel above all windows; unpin restores normal z-order
  • Close button dismisses the panel
  • Resize the panel — caption area expands/shrinks to fill available space
  • Panel does not steal focus from the active app
  • No grey titlebar strip visible on light backgrounds

chuntwdev and others added 9 commits February 13, 2026 17:29
Introduce a pop-up preview window with pin and close controls so users can keep live transcription visible above other apps while keeping the existing bottom preview workflow.

Co-authored-by: Cursor <cursoragent@cursor.com>
Document the implemented floating preview architecture, behavior, file map, and acceptance criteria so future agents can iterate safely from a shared baseline.

Co-authored-by: Cursor <cursoragent@cursor.com>
Hide native titlebar traffic lights to avoid duplicate close affordances and make long live/last transcripts readable with capped scrollable cards.

Co-authored-by: Cursor <cursoragent@cursor.com>
Replace the multi-section floating preview with a compact auto-scrolling bilingual caption card and hover-reveal controls, and fix pinned window behavior by applying mutually exclusive collection behaviors.

Co-authored-by: Cursor <cursoragent@cursor.com>
Updated the FloatingPreviewPanelManager to increase the height and minimum size of the panel for better usability. Modified FloatingPreviewView to reduce the maximum finalized sentence count and adjusted the layout for improved readability and aesthetics, including changes to padding and frame settings.
…bility

Modified the font size for caption lines in the FloatingPreviewView to enhance clarity, particularly for non-source text. Removed unnecessary padding adjustments to streamline the layout.
…ating panel

The NSPanel's .titled style mask rendered a built-in titlebar material
that appeared as a grey strip on light backgrounds. Switched to a
borderless panel (.resizable + .nonactivatingPanel) since the titlebar
was fully hidden anyway. Also changed to orderFront to avoid stealing
focus from the active app.

Made-with: Cursor
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant