Explore more obvious section headers in quick pick

[daviddossett]

The right-aligned label text has always been slightly confusing to me as a pattern to separate sections in quick pick lists. I think it's worth exploring how we might make these more obvious while still using vertical space efficiently.

Current

Examples

GitHub

Raycast

cc @lychung7 @misolori

[jaeyonglee8687]

Sharing another example

Runner Pro https://docs.sketchrunner.com/search-commands/run

[daviddossett]

A couple of possible solutions within the current quick pick design:

[daviddossett]

This could also be extended into an idea I had for a "comfortable" density mode for the quick pick/command palette.

[daviddossett]

Extending these explorations to include ideas for actions in the section header rows. Some early ideas:

With Inline Icon Actions

With Icon Action Labels

We could also use labels here since the inline icons alone would be a downgrade in terms of understanding what the command is—today we use the plain text as a quick pick entry so this could retain some of that clarity.

cc @misolori @TylerLeonhardt

[TylerLeonhardt]

I like that the separator buttons could have text to them though I'm sure the first feature request once that lands is to allow buttons in the normal quick pick items to have text :) not a bad idea but I am concerned about space in the quickpick...

[miguelsolorio]

I think starting with icons (no labels) is a good start to match most of our inline actions. I also wonder if we can have the section header actions/toolbar appear when you are on a section, just like views?

[daviddossett]

Agreed.

I also wonder if we can have the section header actions/toolbar appear when you are on a section, just like views?

By that do you mean like if you're navigating via keyboard we should up the parent actions? 👍 if so!

[miguelsolorio]

Right now we show the toolbar whenever you are hovering in a view and then it hides when you are off, as opposed to only showing it when you are hovering over the section title.

[daviddossett]

Oh ok even better. Great idea.

[jaeyonglee8687]

Love the iterations. The blue color title seems to have a function or embedded link it it at the first glance. It worked when it was on the same line with a quickPick item, but it becomes a little confusing with the separation between section title and pickPick items.

[daviddossett]

The blue color title seems to have a function or embedded link it it at the first glance

That's a fair point. Darker or lighter greys can in some ways make it harder to distinguish between sections. Maybe some spacing above each section and retaining the border would help here:

[daviddossett]

Incoroporated a few bits of feedback and fixes:

• Added dedicated divder rows to help distinguish between sections
• Added @misolori's suggestion to show the actions on hover/focus of children

[TylerLeonhardt]

@daviddossett two questions:

• Do you think we should keep the existing look if no separators have buttons?
• If so... If only a single separator has buttons, should they the UI of separators be aligned to all take up an entire row even if they don't have buttons?

[daviddossett]

Do you think we should keep the existing look if no separators have buttons?

My gut feeling is that it should be a global change. There are a bunch of differences in font, spacing, etc. that makes me think it would be confusing for users to see different formats across different lists. Here's how it would look on a regular grouped quick pick list:

Some inspiration from Safari for those worried about keyboard interactions. Feels super natural to arrow up/down across sections:

[eamodio]

I like the latest iteration. Although I think the section headers are too bold -- the blue stands out and draws the eye much more than the actual choices. I would prefer a style closer to the safari example where the headers are more muted, so the focus stays on the choices themselves.

[daviddossett]

I like the grey headers too, at least in this particular default theme. I've landed on that for now. We're also looking at how to better integrate section-specific actions. Today they're often placed at the bottom of a long quick pick list and can be easily missed.

Header w/ Toolbar

Shows up on hover anywhere in that section. Advantages here are the similarities to a view toolbar and reduced noise in the list. Possible makes it difficult to have a natural-feeling keyboard navigation. We also lose the descriptive list item labels + search capability we have today.

Header with Pinned Action List Items

We could have section-specific actions rendered at the top of the relevant section as normal list items. This could be achieved today but it would obviously need to be done manually. Maybe there's a way to pin items per section?

[usernamehw]

Any chance of keeping headers even after typing? For example, Theme Picker with empty input shows:

──────────────────────────────────────────────────────────── light themes
...
GitHub Light
GitHub Light Colorblind
Light (Visual Studio)
Light+ (default light)
...
──────────────────────────────────────────────────────────── dark themes
...
Dark (Visual Studio)
Dark+ (default dark)
GitHub Dark
GitHub Dark Colorblind
...

After filtering they are no longer grouped (input content - github):

GitHub Dark
GitHub Light
GitHub Dark Colorblind
GitHub Light Colorblind
...

Ideally, groups should persist (input content - github):

──────────────────────────────────────────────────────────── light themes
GitHub Light
GitHub Light Colorblind
──────────────────────────────────────────────────────────── dark themes
GitHub Dark
GitHub Dark Colorblind

[daviddossett]

@usernamehw I think that's a reasonable proposal but I'd need to see how to approach quick picks that show something different after typing. There are some examples of presenting other content instead of the filtered list.

[TylerLeonhardt]

@usernamehw that sounds like a bug to me because I get that rough experience:

Can you open a new issue and we can get that looked at?

[daviddossett]

It does look like there is some strangeness going on here.

[TylerLeonhardt]

@aeschli is this feedback for you? ^

[aeschli]

Agree that this looks strange. Filtering & sorting doesn't go with the separator header. It's probably a bug with quick fix dialog to still show the separator labels when filtering (and sorting) Only when sortByLabel: false is set the separators can be shown while filtering. That what is done in the remote indicator menu:

[usernamehw]

Is sortByLabel available to extension api?