right-sidebar: Add shortcut to keyboard instructions in the bottom.

[shubham-padia]

Fixes #8605.
Adds a link to the keyboard shortcuts popup at the bottom of the right
sidebar.

Current Version:

Alternative versions:

1.) Keyboard-shortcuts in black colour instead of the gray color of sidebar-title class.

2.) only keyboard icon

3.) All user help links:

Testing Plan:
Manual testing

[zulipbot]

Hello @zulip/server-sidebars members, this pull request was labeled with the "area: right-sidebar" label, so you may want to check it out!

[timabbott]

I think I'd prefer that this sit always in the bottom-right corner, rather than right after "Group PMs". And I think just having the icon in the corner is probably right (no need for the label).

[showell]

I'll second the idea that a small icon (ideally looking like "?") is probably sufficient, with hover text to explain what it is.

[timabbott]

I think an icon that's a keyboard is the right call; Dropbox Paper does that and it looks pretty nice.

[shubham-padia]

@timabbott I've made the required changes, the failing tests are due to some other commits I think.

Following are some screenshots of the complete browser window for diff. manual testing cases which've been tried out:
720p: link
Full user list 1080p: link
Incomplete user list 1080p: link

[timabbott]

@shubham-padia this looks great, but we should do a few tweaks:

• The label should be "Keyboard shortcuts (?)" to show the keyboard shortcut for it; the (?) should be in a slightly lighter font. See the CSS for the actions menu popover for an example of how we do this.
• We should have it be vertically centered within that bottom row
• It should be 25-50% bigger so that it feels sizable within that row.

[timabbott]

@shubham-padia it looks like you pushed a new version after my last comment, but then didn't post a comment on GitHub. It turns out, GitHub doesn't send a notification to anyone else when you do that. So please always comment when you update a PR and are ready for another review.

[shubham-padia]

@timabbott I don't remember pushing a new version after your last comment. The changes requested are yet to be made. The conflicts are due to the commits made into the zulip master branch I think.

[shubham-padia]

@timabbott I've made the requested changes. I (unsuccessfully) tried to put the keyboard shortcut in the compose-container div for better vertical alignment, but it didn't work out, so got back to the current approach again.

[timabbott]

This looks great, visually. Do we really need to do set its height using logic in resize.js? I would have thought we could just do something with pure CSS for positioning this.

(The main downside of the current approach is that the thing jumps a bit every time I reload the page)

@synicalsyntax do you have any ideas?

[shubham-padia]

@timabbott I've pushed some new changes removing the white space logic.

[shubham-padia]

@timabbott FYI this is open for review.

[timabbott]

Nice. Merged, thanks @shubham-padia!