From bb359cde476d7201eabf5b619110f3056d4eca6f Mon Sep 17 00:00:00 2001
From: Camden Cheek <camden@ccheek.com>
Date: Fri, 14 Jun 2024 00:12:48 -0600
Subject: [PATCH] Svelte: implement keyboard shortcut design (#63253)

---
 .../src/lib/KeyboardShortcut.svelte           | 41 +++++++++++++------
 .../web-sveltekit/src/lib/TabsHeader.svelte   | 11 +----
 .../src/lib/codemirror/SearchPanelView.svelte |  2 +-
 .../lib/search/dynamicFilters/Sidebar.svelte  | 37 ++++-------------
 .../src/lib/search/input/ActionInfo.svelte    | 34 ++++-----------
 .../src/lib/search/input/Suggestions.svelte   |  8 +++-
 .../(validrev)/(code)/+layout.svelte          |  2 +-
 .../(code)/RepositoryRevPickerItem.svelte     |  2 +-
 client/web-sveltekit/src/routes/styles.scss   | 18 --------
 9 files changed, 54 insertions(+), 101 deletions(-)

diff --git a/client/web-sveltekit/src/lib/KeyboardShortcut.svelte b/client/web-sveltekit/src/lib/KeyboardShortcut.svelte
index 5d73fa9933e..dc121bb1c13 100644
--- a/client/web-sveltekit/src/lib/KeyboardShortcut.svelte
+++ b/client/web-sveltekit/src/lib/KeyboardShortcut.svelte
@@ -5,14 +5,14 @@ A component to display the keyboard shortcuts for the application.
     import { isMacPlatform } from '$lib/common'
     import { formatShortcutParts, type Keys } from '$lib/Hotkey'
 
-    export let shorcut: Keys
+    export let shortcut: Keys
     export let inline: boolean = false
 
     const separator = isMacPlatform() ? '' : '+'
 
     $: parts = (() => {
         const result: string[] = []
-        let parts = formatShortcutParts(shorcut)
+        let parts = formatShortcutParts(shortcut)
         for (let i = 0; i < parts.length; i++) {
             if (i > 0) {
                 result.push(separator)
@@ -31,16 +31,33 @@ A component to display the keyboard shortcuts for the application.
 
 <style lang="scss">
     kbd {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.125rem;
-    }
+        all: unset;
+        display: inline-block;
+        &.inline {
+            display: inline;
+        }
 
-    .inline {
-        margin: 0;
-        padding: 0;
-        border: none;
-        box-shadow: none;
-        background-color: transparent;
+        // NOTE: the height of the kdb element is based on the base
+        // line height. There is no way to query the line height of the
+        // parent, so we assume that the container has the standard
+        // line height. In the case the parent has a line height of 1,
+        // this will grow the container slightly. This can be overridden
+        // by setting `--line-height-base` if overriding it in the parent.
+        --height: calc(var(--line-height-base) * 1em);
+        --vertical-padding: calc(var(--height) * 0.25);
+        padding: var(--vertical-padding) calc(1.5 * var(--vertical-padding));
+        font-size: calc(var(--height) - 2 * var(--vertical-padding));
+        font-family: var(--font-family-base);
+        border-radius: 0.5em;
+        line-height: 1;
+
+        background-color: var(--secondary-4);
+        color: var(--text-muted);
+
+        // When inside a selected container, show the selected variant
+        :global([aria-selected='true']) & {
+            color: white;
+            background-color: var(--primary);
+        }
     }
 </style>
diff --git a/client/web-sveltekit/src/lib/TabsHeader.svelte b/client/web-sveltekit/src/lib/TabsHeader.svelte
index c6a7fa0f03a..974d0d3e800 100644
--- a/client/web-sveltekit/src/lib/TabsHeader.svelte
+++ b/client/web-sveltekit/src/lib/TabsHeader.svelte
@@ -54,7 +54,7 @@
                 {tab.title}
             </span>
             {#if tab.shortcut}
-                <KeyboardShortcut shorcut={tab.shortcut} />
+                <KeyboardShortcut shortcut={tab.shortcut} />
             {/if}
         </svelte:element>
     {/each}
@@ -82,7 +82,7 @@
         flex-flow: row nowrap;
         justify-content: center;
         white-space: nowrap;
-        gap: 0.25rem;
+        gap: 0.5rem;
         position: relative;
 
         &::after {
@@ -106,13 +106,6 @@
             color: var(--text-title);
             background-color: var(--secondary-2);
 
-            :global(kbd) {
-                color: white;
-                box-shadow: none;
-                border-color: var(--primary);
-                background-color: var(--primary);
-            }
-
             &::after {
                 border-color: var(--primary);
             }
diff --git a/client/web-sveltekit/src/lib/codemirror/SearchPanelView.svelte b/client/web-sveltekit/src/lib/codemirror/SearchPanelView.svelte
index 83023b4f195..c38f6b65c9f 100644
--- a/client/web-sveltekit/src/lib/codemirror/SearchPanelView.svelte
+++ b/client/web-sveltekit/src/lib/codemirror/SearchPanelView.svelte
@@ -94,7 +94,7 @@
     -->
     <label>
         <Switch checked={searchPanelState.overrideBrowserSearch} on:change={handleOverrideBrowserSearchChange} />
-        <KeyboardShortcut shorcut={keyboardShortcut} />
+        <KeyboardShortcut shortcut={keyboardShortcut} />
     </label>
     <Tooltip
         tooltip="When enabled, {formatShortcut(
diff --git a/client/web-sveltekit/src/lib/search/dynamicFilters/Sidebar.svelte b/client/web-sveltekit/src/lib/search/dynamicFilters/Sidebar.svelte
index 5eeb3ba3bd0..e413c936e49 100644
--- a/client/web-sveltekit/src/lib/search/dynamicFilters/Sidebar.svelte
+++ b/client/web-sveltekit/src/lib/search/dynamicFilters/Sidebar.svelte
@@ -7,22 +7,6 @@
         const filters = tokens.term.filter((token): token is QueryFilter => token.type === 'filter')
         return filters.some(filter => filter.field.value === 'type')
     }
-
-    function inferOperatingSystem(userAgent: string): 'Windows' | 'MacOS' | 'Linux' | undefined {
-        if (userAgent.includes('Win')) {
-            return 'Windows'
-        }
-
-        if (userAgent.includes('Mac')) {
-            return 'MacOS'
-        }
-
-        if (userAgent.includes('Linux')) {
-            return 'Linux'
-        }
-
-        return undefined
-    }
 </script>
 
 <script lang="ts">
@@ -34,6 +18,7 @@
     import { page } from '$app/stores'
     import { getGraphQLClient } from '$lib/graphql'
     import Icon from '$lib/Icon.svelte'
+    import KeyboardShortcut from '$lib/KeyboardShortcut.svelte'
     import LanguageIcon from '$lib/LanguageIcon.svelte'
     import Popover from '$lib/Popover.svelte'
     import RepoPopover, { fetchRepoPopoverData } from '$lib/repo/RepoPopover/RepoPopover.svelte'
@@ -77,7 +62,6 @@
         }
     })
 
-    $: resetModifier = inferOperatingSystem(navigator.userAgent) === 'MacOS' ? '⌥' : 'Alt'
     $: resetURL = resetFilters($page.url).toString()
     $: enableReset = selectedFilters.length > 0
 
@@ -104,9 +88,10 @@
         <div class="header">
             <h3>Filter results</h3>
             {#if enableReset}
-                <a href={resetURL}>
-                    <small>Reset all <kbd>{resetModifier} ⌫</kbd></small>
-                </a>
+                <div class="reset">
+                    <a href={resetURL}>Reset all</a>&nbsp;
+                    <KeyboardShortcut shortcut={{ key: 'alt+⌫' }} />
+                </div>
             {/if}
         </div>
 
@@ -226,17 +211,9 @@
             h3 {
                 margin: 0;
             }
-            a {
+            .reset {
+                font-size: var(--font-size-tiny);
                 margin-left: auto;
-                line-height: 1;
-                kbd {
-                    // TODO: use this style globally
-                    font-family: var(--font-family-base);
-                    color: var(--text-muted);
-                    background: var(--color-bg-1);
-                    box-shadow: inset 0 -2px 0 var(--border-color-2);
-                    border: 1px solid var(--border-color-2);
-                }
             }
         }
 
diff --git a/client/web-sveltekit/src/lib/search/input/ActionInfo.svelte b/client/web-sveltekit/src/lib/search/input/ActionInfo.svelte
index 18dd04ece4b..7ae9e2521dd 100644
--- a/client/web-sveltekit/src/lib/search/input/ActionInfo.svelte
+++ b/client/web-sveltekit/src/lib/search/input/ActionInfo.svelte
@@ -1,37 +1,17 @@
 <script lang="ts">
     import type { Action } from '$lib/branded'
-    import { shortcutDisplayName } from '$lib/shared'
+    import type { Keys } from '$lib/Hotkey'
+    import KeyboardShortcut from '$lib/KeyboardShortcut.svelte'
 
     export let action: Action
-    export let shortcut: string
-
-    $: displayName = shortcutDisplayName(shortcut)
+    export let shortcut: Keys
 </script>
 
-Press <kbd>{displayName}</kbd> to
+Press <KeyboardShortcut {shortcut} inline /> to
 {#if action.type === 'completion'}
-    <strong>add</strong> to your query
+    <strong>add</strong> to your query.
 {:else if action.type === 'goto'}
-    <strong>go to</strong> the suggestion
+    <strong>go to</strong> the suggestion.
 {:else if action.type === 'command'}
-    <strong>execute</strong> the command
+    <strong>execute</strong> the command.
 {/if}
-
-<style lang="scss">
-    kbd {
-        all: unset;
-        // This is the code live on S2 but I can't ind it in our code base
-        font-family: var(--code-font-family);
-        font-size: var(--code-font-size);
-        display: inline-block;
-        line-height: 1.3333333333;
-        height: 1.125rem;
-        padding: 0 0.25rem;
-        margin: 0 0.125rem;
-        vertical-align: middle;
-        border-radius: 3px;
-        color: var(--body-color);
-        background-color: var(--color-bg-2);
-        box-shadow: inset 0 -2px 0 var(--color-bg-3);
-    }
-</style>
diff --git a/client/web-sveltekit/src/lib/search/input/Suggestions.svelte b/client/web-sveltekit/src/lib/search/input/Suggestions.svelte
index 7d9015adc48..356397e7122 100644
--- a/client/web-sveltekit/src/lib/search/input/Suggestions.svelte
+++ b/client/web-sveltekit/src/lib/search/input/Suggestions.svelte
@@ -85,9 +85,13 @@
         {#if selectedOption}
             <div class="footer">
                 <span>
-                    <ActionInfo action={selectedOption.action} shortcut="Enter" />{' '}
+                    <ActionInfo action={selectedOption.action} shortcut={{ key: 'enter' }} />
                     {#if selectedOption.alternativeAction}
-                        <ActionInfo action={selectedOption.alternativeAction} shortcut="Mod+Enter" />
+                        {' '}
+                        <ActionInfo
+                            action={selectedOption.alternativeAction}
+                            shortcut={{ key: 'mod+enter', mac: 'cmd+enter' }}
+                        />
                     {/if}
                 </span>
                 <Icon icon={ILucideInfo} aria-hidden="true" inline />
diff --git a/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/+layout.svelte b/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/+layout.svelte
index b93eccfdb4d..547763bb6c2 100644
--- a/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/+layout.svelte
+++ b/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/+layout.svelte
@@ -232,7 +232,7 @@
                                         <Icon icon={ILucideSquareSlash} inline aria-hidden />
                                     {:else}
                                         <span>Search files</span>
-                                        <KeyboardShortcut shorcut={filesHotkey} inline={isCollapsed} />
+                                        <KeyboardShortcut shortcut={filesHotkey} />
                                     {/if}
                                 </button>
                             </Tooltip>
diff --git a/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/RepositoryRevPickerItem.svelte b/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/RepositoryRevPickerItem.svelte
index d62fc6ba696..5f1eb847b9d 100644
--- a/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/RepositoryRevPickerItem.svelte
+++ b/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/RepositoryRevPickerItem.svelte
@@ -8,7 +8,7 @@
 
     import type { RepositoryGitRevAuthor } from './RepositoryRevPicker.gql'
 
-    export let icon: ComponentProps<Icon>['icon']|undefined = undefined
+    export let icon: ComponentProps<Icon>['icon'] | undefined = undefined
     export let label: string
     export let author: RepositoryGitRevAuthor['author'] | null | undefined
 </script>
diff --git a/client/web-sveltekit/src/routes/styles.scss b/client/web-sveltekit/src/routes/styles.scss
index 5223adf889e..920b017a6c2 100644
--- a/client/web-sveltekit/src/routes/styles.scss
+++ b/client/web-sveltekit/src/routes/styles.scss
@@ -42,21 +42,3 @@ button:focus-visible {
 input:focus-visible {
     box-shadow: 0 0 0 2px var(--primary-2);
 }
-
-kbd {
-    display: inline;
-    height: 1.125rem;
-    margin: 0 0.125rem;
-    padding: 0 0.25rem 0.1rem 0.25rem;
-    line-height: (16/12);
-    vertical-align: middle;
-
-    font-size: var(--code-font-size);
-    font-family: var(--monospace-font-family);
-    color: var(--text-muted);
-
-    border-radius: 4px;
-    border: 1px solid var(--border-color-2);
-    background-color: var(--color-bg-1);
-    box-shadow: inset 0 -2px 0 var(--color-bg-2);
-}