Skip to content

- Redesign HUD overlay bar with dark glassmorphism aesthetic and inline source dropdown#56

Merged
webadderall merged 7 commits intowebadderall:mainfrom
gurpreetkaits:feature/ui-improvements
Mar 18, 2026
Merged

- Redesign HUD overlay bar with dark glassmorphism aesthetic and inline source dropdown#56
webadderall merged 7 commits intowebadderall:mainfrom
gurpreetkaits:feature/ui-improvements

Conversation

@gurpreetkaits
Copy link
Contributor

Description

  • Add pause, resume, and cancel recording controls with elapsed timer
  • Move folder, language, and system audio into three-dots overflow menu with source highlight wave

Motivation

Open Source shouldn't mean boring UIs , it has to have a spirit that premium touch.

Type of Change

  • New Feature
  • Bug Fix
  • Refactor / Code Cleanup
  • Documentation Update
  • Other (please specify)

Related Issue(s)

UI/UX Improvements

Screenshots / Video

Video Recording

Screenshot (if applicable):

![Screenshot Description](path/to/screenshot.png)

Video (wherever possible):

<video src="path/to/video.mp4" controls width="600"></video>

Testing Guide

Checklist

  • I have performed a self-review of my code.
  • I have added any necessary screenshots or videos.
  • I have linked related issue(s) and updated the changelog if applicable.

Thank you for contributing!

…ne source dropdown

  - Add pause, resume, and cancel recording controls with elapsed timer
  - Move folder, language, and system audio into three-dots overflow menu with source highlight
  wave
@coderabbitai
Copy link

coderabbitai bot commented Mar 17, 2026

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f59a2410-c77c-467e-bdfd-a7410b7c6d64

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
📝 Coding Plan
  • Generate coding plan for human review comments

Comment @coderabbitai help to get the list of available commands and usage tips.

@gurpreetkaits
Copy link
Contributor Author

Check the added video, I've tried to keep it minimal but maybe do not merge yet

I also mentioned in a part where I thought it could be improved. So, let's discuss whether we should do. that.

  - Fix stopRecording to handle MediaRecorder 'paused' state by resuming
    before stopping, ensuring final data chunk is flushed
  - Guard pauseRecording as no-op for native recordings (macOS SCK /
    Windows WGC) that lack pause IPC support
  - Add 14 unit tests for pause/stop state machine
@webadderall
Copy link
Owner

This looks nice! But there is a problem where opening the dropdown pushes the menu HUD down.
Screenshot 2026-03-17 at 10 17 41 pm
Screenshot 2026-03-17 at 10 18 12 pm

Also, I couldn't find where the improvement comments were

@gurpreetkaits
Copy link
Contributor Author

Yeah, I noticed taht.

  • I just created this PR in the next commit, will cover that.

@gurpreetkaits gurpreetkaits force-pushed the feature/ui-improvements branch from 8648115 to 080b782 Compare March 17, 2026 12:01
@gurpreetkaits
Copy link
Contributor Author

Check This

…iner

    with flex layout that reserves space above the bar for menu cards
  - Increase HUD window size to 620x520 for menu card headroom
  - Replace mic on/off toggle with mic selector card showing all available
    microphones with live audio level meters per device
  - Remove old separate mic controls panel
  - Increase bar size with larger buttons, padding, and separators
  - Fix TS null safety in stopRecording MediaRecorder accessfix
@webadderall
Copy link
Owner

Can you update to fit the new camera icon please and then fix merge conflicts? I really like this UI change

@gurpreetkaits
Copy link
Contributor Author

Cool merging main in this branch and I'll resolve the conflicts

@webadderall
Copy link
Owner

-The new Cancel control does not actually cancel native recordings; it stops and keeps the captured file.

  • Pause/resume will desync webcam recordings, you should pause the webcam recording too.
  • The HUD redesign regresses localization by hardcoding a large amount of new English copy directly into the component, bypassing the existing i18n layer.

@gurpreetkaits
Copy link
Contributor Author

I see, let me recheck the merge

- language support
- webcame pause/resume sync
- native recording pause
- cancel (clears chunks and stops both recoders and webcame discarded on native cancel
- full lifecycle with webcame - pause - resume - stop keeps webcame in sync throughout
@webadderall webadderall merged commit d5f14f9 into webadderall:main Mar 18, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants