svelte: Show correct keyboard shortcut on Linux in "search files" button (#62729)

client/web-sveltekit/src/lib/Hotkey.ts

@@ -19,8 +19,22 @@ const MAC_KEYNAME_MAP: Record<string, string> = {
 /**
  * Formats a key combination for display, properly replacing the key names with their platform-specific
  * counterparts.
+ *
+ * @param keys The key combination to format.
+ * @returns A platform-specific string representing the key combination.
  */
 export function formatShortcut(keys: Keys): string {
+    return formatShortcutParts(keys).join(isMacPlatform() ? '' : '+')
+}
+
+/**
+ * Formats a key combination for display, properly replacing the key names with their platform-specific
+ * counterparts. Returns an array of strings, each representing a part of the key combination.
+ *
+ * @param keys The key combination to format.
+ * @returns An array of strings, each representing a part of the key combination.
+ */
+export function formatShortcutParts(keys: Keys): string[] {
     const key = evaluateKey(keys)
 
     const parts = key.split('+')
@@ -37,7 +51,7 @@ export function formatShortcut(keys: Keys): string {
         }
     }
 
-    return out.join(isMacPlatform() ? '' : '+')
+    return out
 }
 
 export function evaluateKey(keys: { mac?: string; linux?: string; windows?: string; key: string }): string {

client/web-sveltekit/src/lib/KeyboardShortcut.svelte

@@ -0,0 +1,37 @@
+<!-- @component KeyboardShortcut
+A component to display the keyboard shortcuts for the application.
+-->
+<script lang="ts">
+    import { isMacPlatform } from '$lib/common'
+    import { formatShortcutParts, type Keys } from '$lib/Hotkey'
+
+    export let shorcut: Keys
+
+    const separator = isMacPlatform() ? '' : '+'
+
+    $: parts = (() => {
+        const result: string[] = []
+        let parts = formatShortcutParts(shorcut)
+        for (let i = 0; i < parts.length; i++) {
+            if (i > 0) {
+                result.push(separator)
+            }
+            result.push(parts[i])
+        }
+        return result
+    })()
+</script>
+
+<kbd>
+    {#each parts as part}
+        <span>{part}</span>
+    {/each}
+</kbd>
+
+<style lang="scss">
+    kbd {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.125rem;
+    }
+</style>

client/web-sveltekit/src/lib/fuzzyfinder/FuzzyFinder.svelte

@@ -16,8 +16,8 @@
 
     import { nextSibling, onClickOutside, previousSibling } from '$lib/dom'
     import { getGraphQLClient } from '$lib/graphql'
-    import { formatShortcut } from '$lib/Hotkey'
     import Icon from '$lib/Icon.svelte'
+    import KeyboardShortcut from '$lib/KeyboardShortcut.svelte'
     import FileIcon from '$lib/repo/FileIcon.svelte'
     import CodeHostIcon from '$lib/search/CodeHostIcon.svelte'
     import EmphasizedLabel from '$lib/search/EmphasizedLabel.svelte'
@@ -197,11 +197,11 @@
             >
                 <span slot="after-title" let:tab>
                     {#if tab.id === 'repos'}
-                        <kbd>{formatShortcut(reposHotkey)}</kbd>
+                        <KeyboardShortcut shorcut={reposHotkey} />
                     {:else if tab.id === 'symbols'}
-                        <kbd>{formatShortcut(symbolsHotkey)}</kbd>
+                        <KeyboardShortcut shorcut={symbolsHotkey} />
                     {:else if tab.id === 'files'}
-                        <kbd>{formatShortcut(filesHotkey)}</kbd>
+                        <KeyboardShortcut shorcut={filesHotkey} />
                     {/if}
                 </span>
             </TabsHeader>

client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/+layout.svelte

@@ -27,32 +27,32 @@
 </script>
 
 <script lang="ts">
-    import { tick } from 'svelte'
     import { mdiChevronDoubleLeft, mdiChevronDoubleRight, mdiHistory, mdiListBoxOutline, mdiHome } from '@mdi/js'
+    import { tick } from 'svelte'
 
-    import { page } from '$app/stores'
     import { afterNavigate, goto } from '$app/navigation'
-
-    import { Alert, PanelGroup, Panel, PanelResizeHandle, Button } from '$lib/wildcard'
+    import { page } from '$app/stores'
     import { isErrorLike, SourcegraphURL } from '$lib/common'
-    import { fetchSidebarFileTree } from '$lib/repo/api/tree'
-    import type { LastCommitFragment } from '$testing/graphql-type-mocks'
-
-    import Icon from '$lib/Icon.svelte'
-    import Tabs from '$lib/Tabs.svelte'
-    import TabPanel from '$lib/TabPanel.svelte'
-    import LastCommit from '$lib/repo/LastCommit.svelte'
-    import LoadingSpinner from '$lib/LoadingSpinner.svelte'
-    import Tooltip from '$lib/Tooltip.svelte'
-    import HistoryPanel, { type Capture as HistoryCapture } from '$lib/repo/HistoryPanel.svelte'
     import { openFuzzyFinder } from '$lib/fuzzyfinder/FuzzyFinderContainer.svelte'
+    import { filesHotkey } from '$lib/fuzzyfinder/keys'
+    import Icon from '$lib/Icon.svelte'
+    import KeyboardShortcut from '$lib/KeyboardShortcut.svelte'
+    import LoadingSpinner from '$lib/LoadingSpinner.svelte'
+    import { fetchSidebarFileTree } from '$lib/repo/api/tree'
+    import HistoryPanel, { type Capture as HistoryCapture } from '$lib/repo/HistoryPanel.svelte'
+    import LastCommit from '$lib/repo/LastCommit.svelte'
+    import TabPanel from '$lib/TabPanel.svelte'
+    import Tabs from '$lib/Tabs.svelte'
+    import Tooltip from '$lib/Tooltip.svelte'
+    import { Alert, PanelGroup, Panel, PanelResizeHandle, Button } from '$lib/wildcard'
+    import type { LastCommitFragment } from '$testing/graphql-type-mocks'
 
     import type { LayoutData, Snapshot } from './$types'
     import FileTree from './FileTree.svelte'
     import { createFileTreeStore } from './fileTreeStore'
-    import RepositoryRevPicker from './RepositoryRevPicker.svelte'
-    import ReferencePanel from './ReferencePanel.svelte'
     import type { GitHistory_HistoryConnection, RepoPage_ReferencesLocationConnection } from './layout.gql'
+    import ReferencePanel from './ReferencePanel.svelte'
+    import RepositoryRevPicker from './RepositoryRevPicker.svelte'
 
     export let data: LayoutData
 
@@ -221,7 +221,8 @@
                                 class={`${buttonClass} search-files-button`}
                                 on:click={() => openFuzzyFinder('files')}
                             >
-                                <span>Search files</span> <kbd>⌘P</kbd>
+                                <span>Search files</span>
+                                <KeyboardShortcut shorcut={filesHotkey} />
                             </button>
                         </svelte:fragment>
                     </Button>