Implement custom glassmorphic context menu and redesign R…

[YashKrTripathi]

Pull Request: macOS-Style Custom Glassmorphic Context Menu Integration

Overview

This PR replaces Electron's native, system-style tray menu with a custom, premium HTML/CSS-based context menu styled like a macOS panel (backdrop-blur-3xl, dark translucent background, checkmarks for radio state, nested submenus with right chevrons).

By integrating setting state bindings and actions directly into the Electron IPC boundary, the visualizer's click-through canvas window is now dynamically made interactive when the menu is open, reverting back to full click-through mode immediately upon menu dismissal or outside-click interaction.

---

Key Features & Enhancements

1. macOS Aesthetic & Glassmorphism:

   • Translucent dark overlay using backdrop-filter: blur(32px) saturate(200%) and subtle border highlights.
   • Clean, premium typography utilizing Google Fonts' Inter.
   • Left-aligned checkmark column (✓) indicating selected modes, states, and settings.
   • Flying submenu chevrons (›) denoting further options.

2. Responsive Flip Positioning:

   • Coordinates sent from the System Tray are bounds-checked in real-time.
   • If the menu or its submenus are triggered close to the screen boundaries (edges), the menu automatically offsets or flips the submenu display to the left (.submenu-left) to guarantee options never clip off-screen.

3. Dynamic Theme-Specific Submenus:

   • Instead of presenting a cluttered, nested list of settings for all nine themes, the menu dynamically queries the active visualizer theme and renders only the customization options (Tones, Sensitivity, Density, Speeds, Segment Lengths, etc.) that apply to that specific theme.

4. Self-Managing Click-Through Engine:

   • Electron's setIgnoreMouseEvents is dynamically set to false when the context menu is opened.
   • A full-screen invisible backdrop (#menu-shield) intercepts clicks outside the menu, dismissing it instantly.
   • Upon dismissal or press of the Escape key, setIgnoreMouseEvents resets to true, { forward: true } to restore full click-through capability so the visualizer does not block underlying desktop apps.

---

Detailed Changes

1. preload.js preload.js

Exposed secure context-isolated API methods for:

• IPC channels for loading and updating visualizer settings.
• Toggling click-through bounds via setIgnoreMouseEvents.
• Receiving the tray click event and position coordinates via onShowMenu.

2. main.js main.js

• Commented out the default native tray menu context attachment.
• Registered tray click and right-click triggers to retrieve the absolute cursor coordinates using screen.getCursorScreenPoint().
• Emits the position payload to the overlay window through the show-context-menu IPC channel.
• Handles settings save operations and toggles window transparency mouse ignoring synchronously.

3. index.html index.html

• Added preconnect links and loaded the premium Inter font family from Google Fonts.
• Inserted two empty DOM hooks: #menu-shield (outside-click interceptor) and #context-menu (macOS context menu container).

4. styles.css styles.css

• Defined macOS context menu layouts with keyframe scaling animations (menuFadeIn, submenuFadeIn).
• Standardized heights, margins, border highlights, checkmark spacings, and arrow alignments.
• Implemented the .submenu-left rule to float submenus to the left when screen space is constrained on the right.

5. renderer.js renderer.js

• Created THEME_INFOS dictionary storing the structure of all 9 visualizer themes, settings keys, and value mappings.
• Implemented getContextMenuStructure() which builds the menu tree (Visualizer Mode selection, Active Theme properties, pause/resume, reload, reset, and quit actions).
• Implemented buildMenuDOM() recursively generating DOM node layouts and registering actions.
• Implemented showMenu() and closeMenu() containing edge-offset corrections and mouse interaction toggles.

6. README.md README.md

• Redesigned and formatted headers, feature bullets, and theme tables to match the updated macOS aesthetics and layout.

---

Verification & Testing

• Stopped all existing instances of Electron.
• Started the application locally via npm run dev.
• Verified tray clicks and right-clicks: Custom menu is rendered near the tray icon seamlessly.
• Hovered over settings items: Submenus open correctly. Hovering near the screen boundary automatically flips submenus to the left.
• Selected different theme configurations: Visuals adjust instantaneously and settings are successfully saved and loaded.
• Clicked outside or pressed Escape: Menu closes, returning the window to click-through mode.

before:

after:

[vercel]

@YashKrTripathi is attempting to deploy a commit to the Dot_NotSam's projects Team on Vercel.

A member of the Team first needs to authorize it.

[SamXop123]

The implementation is good. But still needs some changes

Like if you see when I am opening the paraline settings from the tray. the settings are getting hidden behind it instead being coming on top just like how it did previously.

and also it misses certain things which the previous settings window had:

and btw we agreed on image1 which looked like this, but the edited tray window looks a little different

Please look through all these issues and properly address them. Create the tray settings menu like the image we agreed upon.

[YashKrTripathi]

@SamXop123 OKAY PLEASE GIVE ME SOME TIME I HAVE STARTED WORKING ON IT HOPE YOU DONT ASSIGN SOMEONE ELSE I WILL BE BACK WITH MY BEST WORK!!

[YashKrTripathi]

HI @SamXop123 ,
Here is the update addressing all feedback points:

1. Context Menu Z-Order & Position Fix (Hidden behind tray/overflow)

• Z-Order/Hiding Fix: Added explicit window z-order refresh commands (setAlwaysOnTop toggles and moveTop) upon tray activation to guarantee that the context menu always sits cleanly on top of the taskbar, overflow panel, and other windows.
• Positioning Fix: Fixed the bug where clicking the icon inside the Windows overflow panel misplaced the menu at the far left of the screen (x=10). We replaced the fragile bounds-tracking with a robust screen-quadrant-based positioning algorithm. The menu now calculates which quadrant of the display the cursor is in and automatically opens away from the nearest screen edge (e.g. opens up-and-left when clicked at the bottom-right).

2. Matching Settings Names & Options Layout

• Aligned all menu header labels and options exactly with the visualizer mockups. For example:
  • Side Bars Settings header.
  • Submenu settings: Color Style, Bar Thickness, Sensitivity, and Bar Count (with choices Less, Medium, More).
  • Reset options: Reset Side Bars Settings and Reset All Settings.
• Changed the default starting theme in settingsStore.js to Side Bars so the app loads the correct settings options list automatically on first start.

3. Tray Menu Styling & Layout Match

• Cleaned up the menu items to remove checkmark indentation space and icons for main-level options.
• The layout is now a pixel-perfect match with the agreed-upon mockup design (glassmorphic dark theme, high contrast text, standard dropdown indicator arrows, and custom margins).

All of these fixes have been successfully committed and pushed to the YAshCommits branch. Ready for review!

[YashKrTripathi]

@SamXop123 please review the pr!

[YashKrTripathi]

@SamXop123 Done with the readme changes , i have done all the fresh changes implementation in the readme please merge and refer this points system and provide me the best tags possible :

[YashKrTripathi]

@SamXop123 i did what you asked for readme files

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
paraline	Ready	Preview, Comment	May 23, 2026 7:11am

[SamXop123]

Thank you for the contribution!!