update interaction states for the prev/next source arrows in prompt area

[lansingthomas]

Howdy partners 🤠🐴

Purpose of request:

1. improve discoverability of previous-source and next-source
2. prevent the small error of clicking an element that does nothing.

Describe your proposed change:
Two proposals:

1. Mute the color of the arrows when next-source or previous-source is not available.
2. add the keybindings for each to the hover text for each

Why do you believe this to be an improvement?
as users navigate the prompt area with any method, they will observe the arrows changing color to match system state.

This leads to valuable questions with easy answers;

• sees arrow change color | what does that do?
• clicks arrow | oh, seems like I can save myself some time by skipping around the subheadings here
• ponders life | let's hover over them...
• hovers | Nice! keybindings!

Additional context/User story:

Screenshots/Mock ups:

---

Pre-Build Checklist:

• Discussion has occurred.
• One or more developers have signed off on this change.
• One or more user researchers have signed off on this change.

[aadcg]

Good proposal! I'd suggest that the hovering effect on the prompt buffer source bar (where the arrow buttons are located) should match the behavior of the status buffer.

Maybe the icons should match the styling too - what about rotated versions of the arrows on the status buffer?

[lansingthomas]

@aadcg good ideas

experimentation required.
Here are my thoughts up front. Ill try to post some mockups in a while.

...hovering effect on the prompt buffer source bar (where the arrow buttons are located) should match the behavior of the status buffer.

Hhmm, yeah principally I think this is a good idea. The difference is that the prompt source bar arrows should be infrequently used compared to the buttons in the status-buffer-bar. Maybe it is better if they are not grouped together, to show that they are not precisely related to the same tasks.

I want the arrows to flicker a tiny amount as people use the keyboard controls to paginate sources (to show what they do, and communicate position in the stack of suggestions).

Sooo.... for the arrows; matching the background highlighting behavior from the status-buffer-bar on a hover state, seems sensible. But when users are just paginating around the sources, we don't want the arrow backgrounds lighting up like a rave.

Maybe the icons should match the styling too - what about rotated versions of the arrows on the status buffer?

I'll try it and report back.

[lansingthomas]

Seems fine:

[lansingthomas]

svgs

[lansingthomas]

#555555 for when arrows are grey

[aadcg]

@lansingthomas what if we used rotated versions of ^ (the SVG you propose in your post above) everywhere: status buffer for history-backwards/forwards, quick-start and in the context of this issue?

[lansingthomas]

Here are some images for that @aadcg

closeup:

Then the Quick start would look like:

The closed prompt buffer:

[lansingthomas]

generally
I do NOT think they need to match in all three places

specifically
I like the open triangle for:

• quick-start
• source pagination

I like the closed triangle for status bar history-forwards/backwards

I also notice that there is a color issue with the background of the quick-start panel #eeeeee → #ededed

@aadcg lets talk 1-1 man! I haven't caught you in a while, and we can make this easy decision about the icons together. (moving to email for scheduling)

[aadcg]

I do NOT think they need to match in all three places

Sure, can't argue with that!

[aartaka]

De-assigning myself: I moved back to libs.

[aadcg]

I'm not working on this and won't do it in the future. My comment above was simply a wild suggestion.

[lansingthomas]

I'm not working on this and won't do it in the future. #3139 (comment) was simply a wild suggestion.

Yee haw 🐎 🌵 🤠

This Issue is really about matching style changes with state changes.

Lets not make status buffer / quick-start changes at the moment

@hgluka Let's see if Luka can get it done.

[lansingthomas]

Describe your proposed change:
Three things:

• change the arrows to the ones above
• Mute the color of the arrows when next-source or previous-source is not available. (top of list, bottom of list,...)
• Update the hover text for each → Next source (Shift-down) Previous source (Shift-up)