Update the Web Interface (UI) and add some convenient functionality (UX)

[shadyan]

Describe the pull request

Updated the Web Interface design (UI) for Abbott's commands and added some convenient functionality (UX)

Why

To make the web interface look more roomy (kind of objective) and overall look better (strictly objective subjective)

Also added some convenient keyboard shortcuts

Update: Also added dark mode (default) and a button to change the mode

How

Please read the commit messages for additional details:

• Update Web Interface UI to be more roomy and uniform
• Add special UI for the case where the results are 0
• Add some breathing room near the bottom of the page
• Add number of found commands to the results
• Add global slash (/) keyboard shortcut to focus on the input
• Add ability to tab through command names
• Add dark mode styles
• Add dark mode toggle icon and preference saving

Screenshots Dark mode:

Light mode:

Default light view (before dark mode changes):

Limited results (before dark mode changes):

No results (before dark mode changes):

[shadyan]

Thanks for the feedback @HiDeoo.

I completely realize that many of these changes are a matter of subjective preference, so I don't mind if Adam decides not to use any of what's here for that or any other reason.

Here are some notes on your comments:

• Updated. I often use event.code for modifiers and named keys (like Enter), but I agree that event.key would be much better here. For example "?" would also previously match, because Shift + Slash would still be Slash. Good catch.
• I actually had a similar thought at the beginning but decided against it for 2 reasons:
  1. That shortcut often clashes with the default browser shortcut
  2. That shortcut is more commonly used for a Command Palette element, which typically is a separate modal/window with a list of searchable actions/commands. Perhaps Adam wants to add other shortcuts/actions to the page, and they would be displayed in such a command palette. Still, I'm not opposed to the idea, as a command palette does make sense when searching for commands, which is the entire purpose of this page Using slash for focusing on a search element is pretty common and I use it all the time.
• Great suggestion. Updated.
• Reasoning is composed of 2 points:
  1. I wanted a way to navigate up/down one command at a time using the keyboard
  2. I was considering adding a "Copy Link" button next to each command and putting a tab index on those buttons instead. This would allow people, particularly on mobile devices, to copy the direct link for each command with a single click, so without having to copy from the URL bar. I ended up scrapping this idea, though. I think it's hopefully alright to keep this as is, since the tab index is added to each command only once (and to the command name, specifically). Having said that, I'm open to removing if it's a major accessibility impediment.

[AdamLearns]

Thank you both very much for looking into this (and both of you without me even having to ask!). 🙏 I looked through it and made a small commit. The things I would still probably address are:

• Change the link styling to be more like GitHub (blue words with underlines rather than just underlines)
• Maybe get ctrl+K/⌘K to work? Not super important.
• What HiDeoo said here:

HiDeoo: Just quickly looked at the changes after my review, I think it would be nice if everything related to dark mode (markup and JS) would be outside of the index.astro file and be in a dedicated component (and the related JS needs to be in a is:inline script tag to avoid a FOUC)

I'm going to merge this for now though so that the PRs can stay small.

(also, I should probably standardize on the formatting used so that I don't keep modifying it with my changes 😳)