Add tab to Settings dialog to view keyboard shortcuts (#2567)

* Add keyboard custom icon

* Refactor Settings to be more modular

* Add basic keybindings view to settings

* Add more shortcuts

* Add link to see keyboard shortcuts tab

* Little more bottom padding

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Add keybindings to settings search

* Add a playwright test for opening the the keyboard shortcuts

* fmt

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/components/Settings/KeybindingsSectionsList.tsx

@@ -0,0 +1,35 @@
+import {
+  interactionMap,
+  sortInteractionMapByCategory,
+} from 'lib/settings/initialKeybindings'
+
+interface KeybindingSectionsListProps {
+  scrollRef: React.RefObject<HTMLDivElement>
+}
+
+export function KeybindingsSectionsList({
+  scrollRef,
+}: KeybindingSectionsListProps) {
+  return (
+    <div className="flex w-32 flex-col gap-3 pr-2 py-1 border-0 border-r border-r-chalkboard-20 dark:border-r-chalkboard-90">
+      {Object.entries(interactionMap)
+        .sort(sortInteractionMapByCategory)
+        .map(([category]) => (
+          <button
+            key={category}
+            onClick={() =>
+              scrollRef.current
+                ?.querySelector(`#category-${category}`)
+                ?.scrollIntoView({
+                  block: 'center',
+                  behavior: 'smooth',
+                })
+            }
+            className="capitalize text-left border-none px-1"
+          >
+            {category}
+          </button>
+        ))}
+    </div>
+  )
+}