UI: Show current search shortcut in search box sidebar

code/ui/manager/src/components/sidebar/Search.stories.tsx

@@ -1,4 +1,7 @@
 import React from 'react';
+import type { StoryFn, Meta } from '@storybook/react';
+import type { API } from '@storybook/manager-api';
+import { ManagerContext } from '@storybook/manager-api';
 import { action } from '@storybook/addon-actions';
 
 import { index } from './mockdata.large';
@@ -16,28 +19,29 @@ const getLastViewed = () =>
     .filter((item, i) => item.type === 'component' && item.parent && i % 20 === 0)
     .map((component) => ({ storyId: component.id, refId }));
 
-export default {
+const meta = {
   component: Search,
   title: 'Sidebar/Search',
   parameters: { layout: 'fullscreen', withSymbols: true },
   decorators: [(storyFn: any) => <div style={{ padding: 20, maxWidth: '230px' }}>{storyFn()}</div>],
-};
+} satisfies Meta<typeof Search>;
+export default meta;
 
 const baseProps = {
   dataset,
   clearLastViewed: action('clear'),
   getLastViewed: () => [] as Selection[],
 };
 
-export const Simple = () => <Search {...baseProps}>{() => null}</Search>;
+export const Simple: StoryFn = () => <Search {...baseProps}>{() => null}</Search>;
 
-export const FilledIn = () => (
+export const FilledIn: StoryFn = () => (
   <Search {...baseProps} initialQuery="Search query">
     {() => <SearchResults {...noResults} />}
   </Search>
 );
 
-export const LastViewed = () => (
+export const LastViewed: StoryFn = () => (
   <Search {...baseProps} getLastViewed={getLastViewed}>
     {({ query, results, closeMenu, getMenuProps, getItemProps, highlightedIndex }) => (
       <SearchResults
@@ -52,8 +56,26 @@ export const LastViewed = () => (
   </Search>
 );
 
-export const ShortcutsDisabled = () => (
+export const ShortcutsDisabled: StoryFn = () => (
   <Search {...baseProps} enableShortcuts={false}>
     {() => null}
   </Search>
 );
+
+export const CustomShortcuts: StoryFn = () => <Search {...baseProps}>{() => null}</Search>;
+
+CustomShortcuts.decorators = [
+  (storyFn) => (
+    <ManagerContext.Provider
+      value={
+        {
+          api: {
+            getShortcutKeys: () => ({ search: ['control', 'shift', 's'] }),
+          } as API,
+        } as any
+      }
+    >
+      {storyFn()}
+    </ManagerContext.Provider>
+  ),
+];

code/ui/manager/src/components/sidebar/Search.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-cycle */
-import { useStorybookApi } from '@storybook/manager-api';
+import { useStorybookApi, shortcutToHumanString } from '@storybook/manager-api';
 import { styled } from '@storybook/theming';
 import { Icons } from '@storybook/components';
 import type { DownshiftState, StateChangeOptions } from 'downshift';
@@ -115,7 +115,7 @@ const FocusKey = styled.code(({ theme }) => ({
   position: 'absolute',
   top: 8,
   right: 16,
-  width: 16,
+  minWidth: 16,
   height: 16,
   zIndex: 1,
   lineHeight: '16px',
@@ -165,6 +165,7 @@ export const Search = React.memo<{
   const inputRef = useRef<HTMLInputElement>(null);
   const [inputPlaceholder, setPlaceholder] = useState('Find components');
   const [allComponents, showAllComponents] = useState(false);
+  const searchShortcut = api ? shortcutToHumanString(api.getShortcutKeys().search) : '/';
 
   const selectStory = useCallback(
     (id: string, refId: string) => {
@@ -354,7 +355,7 @@ export const Search = React.memo<{
               <SearchIcon icon="search" />
               {/* @ts-expect-error (TODO) */}
               <Input {...inputProps} />
-              {enableShortcuts && <FocusKey>/</FocusKey>}
+              {enableShortcuts && <FocusKey>{searchShortcut}</FocusKey>}
               <ClearIcon icon="cross" onClick={() => clearSelection()} />
             </SearchField>
             <FocusContainer tabIndex={0} id="storybook-explorer-menu">