[Benin7070]

Description: Closes #1820

This PR introduces a complete aesthetic overhaul of the Power Menu popup to resolve the issue of the menu being overly intrusive and taking up the entire screen. It redesigns it into a smaller, elegant, and centralized popup with smooth micro-interactions.

Key Changes:

• Compact & Elegant Layout: Replaced the intrusive full-screen grid with a flex-direction: column structure. Grouped the user profile/text into a top header, added a subtle divider line, and organized the buttons into a 3x2 grid below.

• Dynamic Theme Variables: Removed hardcoded colors and hooked directly into Seelen UI's theme variables (--slu-std-fg-muted-color, --slu-std-ui-hover-overlay) so the menu seamlessly adapts to Light/Dark modes.

• Premium Micro-interactions: Added a glassmorphism effect to the buttons. On hover, buttons gently lift (translateY(-4px)), drop a soft shadow, scale up, and apply a frosted glass backdrop-filter: blur(16px) with a subtle light-catching border.

• Escape Key & Animation Fixes:

  • Attached a global svelte:window listener so hitting the Escape key reliably dismisses the menu regardless of focus.
  • Replaced the jarring OS window "zoom" animation with a smooth Svelte fade transition on the overlay.
  • Fixed a Svelte 5 $state compilation collision to ensure stable rendering.

To Test:

1. Open the Power Menu.
2. Verify the localized popup design and that the background blur dims the screen beautifully without zooming.
3. Hover over the buttons to test the new tactile lift and frosted glass effect.
4. Press Escape while focused anywhere to verify the menu dismisses smoothly.

[greptile-apps]

Confidence Score: 4/5

The PR should not merge until the delayed-hide race that can close a newly reopened power menu is resolved.

Summary

The PR replaces the full-screen power menu presentation with a compact centered popup, theme-driven styling, hover interactions, a global Escape handler, and a fade-based dismissal flow.

• Reorganizes user information and power actions into a header and 3×2 action grid.
• Introduces local transition state and delayed widget hiding.
• Contains a reopening race in the delayed hide flow and an icon selector that does not match the rendered component class.

_{Reviews (1) · Last reviewed commit: "feat(ui): redesign power menu layout and..."}

[eythaann]

@Benin7070 send a picture or video of how your design proposal will looks.

[Benin7070]

Screen.Recording.2026-09-18.111043.mp4

Here is the screen recording showing the new layout and animations in action!

I made sure not to overdo the animations—I kept them subtle (a smooth Svelte fade transition and a gentle hover lift with glassmorphism) so that they perfectly match the sleek, aesthetic of the rest of the Seelen UI application.

While testing this, I also discovered and patched a caching bug in the core application logic:

Profile Picture Bug: Previously, if a user changed their Windows profile picture, the Power Menu would not update. The Rust backend was caching the old file path on startup. Because Windows deletes the old image file when a new one is set, the Tauri backend was throwing a File does not exist error. I have written a fix for this by adding a refresh() method to the UserManager in the Rust backend, and setting the Svelte frontend to actively request fresh user data whenever the Power Menu window regains focus.

Windows Display Name Note: On a related note, if a user changes their Display Name in Windows settings, it won't instantly update in the UI. This is actually default Windows OS behavior—the GetUserNameExW API caches the display name for the active local session, so the user has to sign out and sign back in for the new name to propagate to third-party apps.

Question: Would you like me to include the backend Profile Picture refresh fix in this PR? If you'd like it included, I have the code ready and can commit and push it to this branch right away today!

[eythaann]

@Benin7070 sure add the fix in this PR I think I liked the new style. and yeah makes more sense with rest of the app style.

[Benin7070]

@eythaann I've synced the branch with the latest upstream master and ensured all commits are signed. The PR is updated and ready for review! Let me know if you need any further changes, I'd be happy to work on them.

[eythaann]

this commit (ef01999) introduces support for custom animations on show/hide of widgets, so remove the code related to svelte transitions.

[eythaann]

we don't use transitions via JS remove it

[eythaann]

remove this, is unnecessary now, since ef01999 all widgets can be animated via CSS on show/hide.

[Benin7070]

I have removed the custom Svelte JS isVisible state, fade transitions, and the setTimeout delay from app.svelte as requested! The Power Menu now defers completely to the framework's native Widget.self.hide() and the global :root CSS animation system.

However, during testing, I noticed that the fade animation is no longer visible—the window just appears and disappears instantly. I verified my Windows Animation Effects are turned on and Seelen is not in Extreme Performance mode. Is it possible the global :root[data-widget-hidden] CSS opacity transition is being overridden somewhere, or that the dark transparent overlay makes the uniform fade imperceptible? Let me know if I missed anything!