Command palette v1.5

[yangchristina]

• [ ] Avoid autoscroll on mouseover
• [x] Include margin in autoscroll
• [x] Search bar doesn't scale with font size
• [x] Unexecutable commands not differentiated
• [x] Intermediate frames rendered on edit
• [x] ~~Gesture Diagram is too thin~~ - Out of scope
• [x] No margin on narrow windows

Mobile

https://github.com/user-attachments/assets/ad3896c0-f047-46fa-b267-ebb76f97a403

Web

Additional changes

• Removed Popup component, using PopupBase directly
• Removed indexInToolbar

Note: After this PR, there will be 1 more small command palette PR to animate the lotties

[raineorshine]

Thanks @yangchristina! Screenshots look great.

I just wanted to ask about the mobile CommandPalette, since there appear to be some unintended functional changes. For example, it should only show commands with gestures, the segment of the gesture that has already been inputted is highlighted, the selected command is always first, etc. These are all built and working in main, and should be preserved in the redesign. I'm just expecting the appearance to change.

[yangchristina]

@raineorshine sorry those pictures aren't accurate, I've added a video now. I was actually testing on web, with some variables changed, because it was easier to test styling there compared to in an emulator. Looks like the styling is a bit off still on mobile.

[yangchristina]

@trevinhofmann could I please get a review? Thanks!

[yangchristina]

Flaky test? The only thing I did was remove a comment.

[yangchristina]

@trevinhofmann merge conflicts resolved, this is ready to review. Thanks!

[trevinhofmann]

Thank you for the updates, @yangchristina! Can you please confirm if this PR is ready for review again? I'll be happy to take another look right away.

[yangchristina]

Thank you for the updates, @yangchristina! Can you please confirm if this PR is ready for review again? I'll be happy to take another look right away.

@trevinhofmann this is ready for re-review thanks! A lot of what I left was questions though.

[yangchristina]

@trevinhofmann this is ready for re-review, thanks! Note that Customize Toolbar has defects, but since it's getting removed, we are ignoring those.

[raineorshine]

@trevinhofmann this is ready for re-review, thanks! Note that Customize Toolbar has defects, but since it's getting removed, we are ignoring those.

I can confirm: The Toolbar is going to be removed completely in the next design! Replaced by the new Command Menu which has an early version in main.

[yangchristina]

@trevinhofmann made one more change (375f483) to extract ternary into util function from discussion: https://github.com/cybersemics/em/pull/2928#discussion_r2088031998

[raineorshine]

Avoid autoscroll on mouseover

Desktop

Steps to Reproduce

Mouse over commands at the top or bottom of the Command Palette.

Current Behavior

The Command Palette autoscrolls to fit the newly selected command.

https://github.com/user-attachments/assets/c64471f1-10ea-4c25-a400-4309ffde7c50

Expected Behavior

The Command Palette should not autoscroll on mouseover, as it is slightly jarring. It also implies that the list will continue scrolling if the mouse is held at the edge of the panel, which is not true.

Instead, only autoscroll when the selection changes via the keyboard.

[raineorshine]

Include margin in autoscroll

Steps to Reproduce

Arrow Down until one of the commands below-the-fold is selected. Arrow Up until the first command is selected.

Current Behavior

There is no space between the bottom of the highlight and the bottom of the Command Palette:

Similarly when the top command is selected:

Expected Behavior

There should be a margin between the bottom of the highlight and the bottom of the Command Palette when the bottom command is selected:

There should be a margin between the top of the highlight and the edge of the Search Bar when the top command is selected.

---

You may need special cases for the first and last commands to ensure that the scroll position is at the very top and very bottom, respectively. We don't want to leave a few pixels of additional scroll available in those cases.

[raineorshine]

Holding the arrow keys does not smoothly iterate through the list

~~I'm not sure if this is just a performance issue, if there is active throttling, or if it is an implication of the select/autoscroll mechanism.~~ The performance improves as the list is filtered down, so it's likely a performance issue.

Consider using throttleAnimationFrame which is used by cursorUp/Down for the same purpose.

Steps to Reproduce

Hold ArrowDown to iterate down through the commands. Hold ArrowUp to iterate up through the commands.

Current Behavior

The selection change is slow and choppy.

https://github.com/user-attachments/assets/0ca81d23-4ac0-4768-b2b3-9d7e7987147e

Expected Behavior

As in main, the selection change should be fast as the arrow keys are held down. The selection should only move up/down by one command per animation frame.

https://github.com/user-attachments/assets/e17d1a5b-0a76-416c-91f4-7c956df5af73

[raineorshine]

Review in progress

[raineorshine]

Top edge moves down when height changes

Steps to Reproduce

Type "Thank you" in the Command Palette search bar.

Current Behavior

The Command Palette stays vertically centered in the screen as the height changes, causes the search bar to shift down jarringly.

https://github.com/user-attachments/assets/6213857e-b2f2-4e4a-af08-f8b3344ae6f3

Expected Behavior

The top edge of the Command Palette should not move, even if the height of the panel decreases.

I like the start position, so you'll have to think about how to preserve that while aligning top.

[raineorshine]

Search bar doesn't scale with font size

Update: I see this is actually broken on main. Might as well fix it while we're here! Thanks!

Steps to Reproduce

Increase Font Size.

Current Behavior

Search bar and placeholder does not scale with font size.

Expected Behavior

Search bar and placeholder should scale with font size.

[raineorshine]

Unexecutable commands not differentiated

Steps to Reproduce

1. Set the cursor to null.
2. Open the Command Palette and scroll down to where the disabled commands start ("Add to Favorites").

Current Behavior

Commands that cannot be executed from the current state are shown with the same style as enabled commands.

Expected Behavior

As in main, commands that cannot be executed from the current state should be grayed out so they are clearly distinguished.

Background

Each command has a canExecute method which determines if it can be executed from the current Redux state. The most common case of a command not being executable is if the cursor is null, but there are other conditions (e.g. swapParent requires that the cursor have a parent, etc.)

https://github.com/cybersemics/em/blob/2326b3ba1f32e2ad599748bc033113521751608d/src/%40types/Command.ts#L73-L74

[raineorshine]

Intermediate frames rendered on edit

Steps to Reproduce

1. Open the Command Palette.
2. Type 'e'.
3. Delete 'e'.

Current Behavior

When 'e' is deleted, two intermediate frames are rendered, creating a jarring flash.

✓ Start: Export is at the top of the list and selected:

✗ Intermediate frame 1 - Export is incorrectly still selected and Command Palette scrolls to it:

✗ Intermediate frame 2 - Export is deselected:

✓ End - Add to Favorites is selected:

This effect is compounded when typing quickly:

https://github.com/user-attachments/assets/c0eaca6d-d28d-4a93-8b8e-b9c565f3050f

Expected Behavior

When 'e' is deleted, it should go immediately from the Start frame to the End frame.

[raineorshine]

Gesture diagram is too thin

Mobile

Steps to Reproduce

Swipe →↓ and hold.

Current Behavior

Gesture diagram is rendered too thin, and arrow heads are hard to see:

Expected Behavior

This should be unchanged from main, where the GestureDiagram is rendered with a thicker stroke and arrow head:

[raineorshine]

No margin on narrow windows

Steps to Reproduce

Resize the window to be narrower than 826 pixels.

Current Behavior

No margin.

Expected Behavior

Command Palette should always have a margin of at least about 1em on desktop.

[yangchristina]

No margin on narrow windows

Steps to Reproduce

Resize the window to be narrower than 826 pixels.

Current Behavior

No margin.

## Expected Behavior Command Palette should always have a margin of at least about 1em on desktop.

Added margin back eaf8e23

[yangchristina]

Unexecutable commands not differentiated

Steps to Reproduce

1. Set the cursor to null.
2. Open the Command Palette and scroll down to where the disabled commands start ("Add to Favorites").

Current Behavior

Commands that cannot be executed from the current state are shown with the same style as enabled commands.

## Expected Behavior As in `main`, commands that cannot be executed from the current state should be grayed out so they are clearly distinguished. ## Background Each command has a `canExecute` method which determines if it can be executed from the current Redux state. The most common case of a command not being executable is if the cursor is null, but there are other conditions (e.g. `swapParent` requires that the cursor have a parent, etc.)

https://github.com/cybersemics/em/blob/2326b3ba1f32e2ad599748bc033113521751608d/src/%40types/Command.ts#L73-L74

@raineorshine I couldn't find any mocks for this. How should these look?

[raineorshine]

You can just dim the unexecutable commands enough to make them visually distinct.

[yangchristina]

Gesture diagram is too thin

Mobile

Steps to Reproduce

Swipe →↓ and hold.

Current Behavior

Gesture diagram is rendered too thin, and arrow heads are hard to see:

## Expected Behavior This should be unchanged from `main`, where the GestureDiagram is rendered with a thicker stroke and arrow head:

@raineorshine I've been trying a lot of things, but if the gesture is large and thick, the arrow disappears. The thinner it is, the larger the arrow. I cannot get both the arrow and the line to be large.

Can't really get better than this (although this might be worse than before I'm not sure)

[yangchristina]

You can just dim the unexecutable commands enough to make them visually distinct.

Thanks! Added

[yangchristina]

Search bar doesn't scale with font size

Update: I see this is actually broken on main. Might as well fix it while we're here! Thanks!

Steps to Reproduce

Increase Font Size.

Current Behavior

Search bar and placeholder does not scale with font size.

## Expected Behavior Search bar and placeholder should scale with font size.

Done: 615470c

[yangchristina]

Working on next:

• [x] Immediate frames: https://github.com/cybersemics/em/pull/2928#issuecomment-2934361496
• [x] Height move: https://github.com/cybersemics/em/pull/2928#issuecomment-2934196427
• [x] Holding arrow key: https://github.com/cybersemics/em/pull/2928#issuecomment-2927036525
• [x] Include margin in autoscroll: https://github.com/cybersemics/em/pull/2928#issuecomment-2927013886
• [ ] Avoid autoscroll on mouseover: https://github.com/cybersemics/em/pull/2928#issuecomment-2927006190

Open issue:

• Gesture diagram: https://github.com/cybersemics/em/pull/2928#issuecomment-2934430027 (https://github.com/cybersemics/em/pull/2928#issuecomment-2952958184)

[yangchristina]

Intermediate frames rendered on edit

Steps to Reproduce

1. Open the Command Palette.
2. Type 'e'.
3. Delete 'e'.

Current Behavior

When 'e' is deleted, two intermediate frames are rendered, creating a jarring flash.

✓ Start: Export is at the top of the list and selected:

✗ Intermediate frame 1 - Export is incorrectly still selected and Command Palette scrolls to it:

✗ Intermediate frame 2 - Export is deselected:

✓ End - Add to Favorites is selected:

This effect is compounded when typing quickly:

Screen.Recording.2025-06-03.at.10.33.39.AM.mov

Expected Behavior

When 'e' is deleted, it should go immediately from the Start frame to the End frame.

Fixed by updating selected command in onInputChange instead of useEffect bf73370

[yangchristina]

Top edge moves down when height changes

Steps to Reproduce

Type "Thank you" in the Command Palette search bar.

Current Behavior

The Command Palette stays vertically centered in the screen as the height changes, causes the search bar to shift down jarringly.

Screen.Recording.2025-06-03.at.9.42.24.AM.mov

Expected Behavior

The top edge of the Command Palette should not move, even if the height of the panel decreases.

I like the start position, so you'll have to think about how to preserve that while aligning top.

Done here: f47a21e

https://github.com/user-attachments/assets/83525123-9aa9-406d-a43d-57ea007d4077

[raineorshine]

@raineorshine I've been trying a lot of things, but if the gesture is large and thick, the arrow disappears. The thinner it is, the larger the arrow. I cannot get both the arrow and the line to be large.

https://github.com/cybersemics/em/pull/2928#issuecomment-2952958184

Yeah, the GestureDiagram is a bit finicky in that way! The proportions are right in main, so I'm wondering what changed?

Perhaps @trevinhofmann can help on this one if you're stuck.