New/Re-do Flyout window: Win 11 Start style, hotkeys, on/off

[Jay-o-Way]

Description of the new feature / enhancement

Looking at the flyout, there are a few thing I would like to improve.

• It has the same size, position and style as Windows 11 Start menu
• It can be opened via a click on the tray icon, and with a keyboard shortcut (think of combining with Shortcut Guide)
• It displays all modules
• All modules that can be activated directly, can be clicked on to open
• It shows the hotkeys next to the module names
  to provide a solution for countless requests as in PowerToys Shortcuts in Shortcut Guide #15405
• For e.g. Keyboard Manager, we can show the remaps in a drop-down area, just like Win 11 Start menu has
• It has buttons for:
  • Download Update (when available)
  • Open Settings window
  • Go to online documentation
  • Create a zip file / bug report
  • Open GitHub repo
  • Close (not quit)

Quick concept

[Jay-o-Way]

@yuyoyuppe @stefansjfw @niels9001 I noticed this directory structure is inconsistent:

Should we use ... ?

📁 settings-ui \ 📁 Settings.UI

• Flyout
  • Viewmodel(s)
  • Views
• OOBE
  • Viemodel(s)
  • Views

or

📁 settings-ui \ 📁 Settings.UI

• Viewmodel(s)
  • Flyout
  • OOBE
• Views

[stefansjfw]

Both are OK, imho. Personally, I'd go with the first one

[niels9001]

@Jay-o-Way As mentioned before in the PR, the current UI has been implemented according to a design specification so it feels native to Windows (11). You are introducing major changes to layouts, spacing and overall look and feel without a specific reason?

- Using CommandBar: if icons are blurry, we need to check why this is. I expect it's because the FontIcons are using 14px, and would render sharp(er) with 16px. The Quick Actions flyout is using the same fontsizes, and I don't see any blurryness for that flyout or the PowerToys flyout (both 100% and 150% DPI). Could this be a WASDK-on-Windows-10 bug? I can circle back with the design folks to see what the best approach.
Using CommandBar introduces a bunch of additional XAML in the visual tree, which might impact performance. So using that to fix blurry icons is overkill.

- Using spacing: that's fine, as long as it doesn't introduce any visual differences.

- Deprecated icon: good catch 🚀.

- Hotkey under the title: the UI becomes very cluttered now. We already have the hotkey listed in Settings and in the tooltip of the buttons. Maybe a better, and more scalable approach, would be to show the hotkey in the under the title in the app list (see orange line below)?

- Quit button: my worry with "close" is that users might think that it closes the flyout vs. shutting down PowerToys? "Quit PowerToys" as the tooltip is maybe better? But, we already have the right-click context menu to quit it.. so maybe we don't need this?

- Actions: we might want to update the labels in the right-click context menu as well? So they are the same as in the Flyout?

[Jay-o-Way]

• Icons: whatever the control(s) we end up with, I would recommend in general to not change properties (like font size and others) unless we absolutely need to. This specific case might be related to Win 10, or font hinting, or scaling (14/16px) or who knows what else. Fact is that I see something and I want to fix it :)

• Hotkeys: I've actually seen many comments from people who can't or don't want to remember all of the PowerToys shortcuts. Most of those (50+ and counting) request for Shortcut Guide. But this is also a simple solution. Honestly, "the UI becomes very cluttered now" sounds like a personal opinion. The more I look at it, the better it looks to me :) I would not place them in the AppList, because I find that ugly and it would mean double the distance to scroll.

• Quit: I do not share your concern. The Guidelines are pretty clear. Even if Microsoft itself is known for not always following their own...

• right-click context menu: If we have duplicate controls, we could consider dropping the "old" menu in the future. Like OneDrive has. Would solve issues like [Runner] Update tray menu to WinUI 2.6 style #12646

[niels9001]

• Icons: whatever the control(s) we end up with, I would recommend in general to not change properties (like font size and others) unless we absolutely need to. This specific case might be related to Win 10, or font hinting, or scaling (14/16px) or who knows what else. Fact is that I see something and I want to fix it :)

Could you try to change the fontsize to 16 (or remove it completely) on the main branch to see if that resolves the issue?

• Hotkeys: I've actually seen many comments from people who can't or don't want to remember all of the PowerToys shortcuts. Most of those (50+ and counting) request for Shortcut Guide. But this is also a simple solution. Honestly, "the UI becomes very cluttered now" sounds like a personal opinion. The more I look at it, the better it looks to me :)

I think the additional rows of text breaks visual hierarchy, and not something you want in a flyout that is there to quickly launch things (you want to literally scan and click). Showing shortcuts is a secondary functionality within this UI, that's why it ended up in the tooltip.
So the question is.. is this the best place to educate users what shortcuts they can use (i.e. having it always visible)? I'm not sure.. There are maybe better ways to do this across settings or the app list?

I would not place them in the AppList, because I find that ugly and it would mean double the distance to scroll.

For inspiration, the Bluetooth flyout menu does this as well.. (i.e. the "Not connected" text would be our shortcut). And we could limit the amount of additional scrolling needed.

Looking at your GIF, extending the height can cause weird side effects (see the wide vertical gap). Again, this is the reason why we followed the Start menu design here and only allow showing 2 lines of text (see Windows 11 Start). These are not opiniated or self-invented decisions but following (existing) design specifications :).

• Quit: I do not share your concern. The Guidelines are pretty clear. Even if Microsoft itself is known for not always following their own...

• right-click context menu: If we have duplicate controls, we could consider dropping the "old" menu in the future. Like OneDrive has. Would solve issues like [Runner] Update tray menu to WinUI 2.6 style #12646

The reason why the right-click context menu was kept was two-fold: it's pretty common to quit apps this way (see Teams, Discord, Outlook - and yes, this is not always consistent across apps) and it's a fallback whenever the flyout would misbehave and wouldn't launch, see #22408 (comment).