Merge pull request #36092 from overleaf/mj-command-palette-pre-release

[web] Pre-labs-release changes for command palette

GitOrigin-RevId: 578cf56f1ef51996ce928466edf50e360fa73b42

services/web/frontend/extracted-translations.json

@@ -338,6 +338,8 @@
   "column_width": "",
   "column_width_is_custom_click_to_resize": "",
   "column_width_is_x_click_to_resize": "",
+  "command_palette": "",
+  "command_palette_search": "",
   "comment": "",
   "comment_only": "",
   "comment_only_upgrade_for_track_changes": "",
@@ -2279,6 +2281,7 @@
   "turn_off_link_sharing": "",
   "turn_on": "",
   "turn_on_link_sharing": "",
+  "type_a_command": "",
   "unable_to_save_check_connection_or_download": "",
   "unarchive": "",
   "uncategorized": "",

services/web/frontend/js/features/command-palette/components/command-palette-body.tsx

@@ -13,6 +13,8 @@ import classNames from 'classnames'
 import useEventListener from '@/shared/hooks/use-event-listener'
 import useCommandPaletteResults from '../hooks/use-command-palette-results'
 import { debugConsole } from '@/utils/debugging'
+import SplitTestBadge from '@/shared/components/split-test-badge'
+import { useTranslation } from 'react-i18next'
 
 type CommandPaletteBodyProps = {
   show: boolean
@@ -24,6 +26,7 @@ const CommandPaletteBody: FC<CommandPaletteBodyProps> = ({ show, onHide }) => {
   const [selectedIndex, setSelectedIndex] = useState(0)
   const resultsRef = useRef<HTMLUListElement>(null)
   const results = useCommandPaletteResults(query)
+  const { t } = useTranslation()
 
   useEffect(() => {
     setSelectedIndex(0)
@@ -91,15 +94,20 @@ const CommandPaletteBody: FC<CommandPaletteBodyProps> = ({ show, onHide }) => {
       themed
     >
       <OLModalBody>
-        <input
-          type="text"
-          value={query}
-          onChange={e => setQuery(e.target.value)}
-          onKeyDown={onKeyDown}
-          placeholder="Type a command..."
-          aria-label="Command palette search"
-          className="command-palette-input"
-        />
+        <div className="command-palette-input">
+          <input
+            type="text"
+            value={query}
+            onChange={e => setQuery(e.target.value)}
+            onKeyDown={onKeyDown}
+            placeholder={t('type_a_command')}
+            aria-label={t('command_palette_search')}
+          />
+          <SplitTestBadge
+            displayOnVariants={['enabled']}
+            splitTestName="command-palette"
+          />
+        </div>
         <ul ref={resultsRef} className="command-palette-results">
           {results.map((result, index) => (
             <li

services/web/frontend/js/features/command-palette/components/command-palette-root.tsx

@@ -8,10 +8,13 @@ import {
 import useCommandPaletteTriggers from '../hooks/use-command-palette-triggers'
 import CommandPaletteBody from './command-palette-body'
 import { useLayoutContext } from '@/shared/context/layout-context'
+import { useCommandProvider } from '@/features/ide-react/hooks/use-command-provider'
+import { useTranslation } from 'react-i18next'
 
 const CommandPaletteRoot = () => {
   const [show, _setShow] = useState(false)
   const { view } = useLayoutContext()
+  const { t } = useTranslation()
 
   const setShow: Dispatch<SetStateAction<boolean>> = useCallback(
     value => {
@@ -29,6 +32,19 @@ const CommandPaletteRoot = () => {
   useCommandPaletteTriggers(setShow)
   const onHide = useCallback(() => setShow(false), [setShow])
 
+  useCommandProvider(() => {
+    if (view === 'history') {
+      return
+    }
+    return [
+      {
+        id: 'command-palette',
+        label: t('command_palette'),
+        handler: () => setShow(true),
+      },
+    ]
+  }, [view, t, setShow])
+
   if (!show) {
     return null
   }

services/web/frontend/js/features/ide-react/components/toolbar/menu-bar.tsx

@@ -224,6 +224,14 @@ export const ToolbarMenuBar = () => {
     [t]
   )
 
+  const commandPaletteMenuSectionStructure: MenuSectionStructure = useMemo(
+    () => ({
+      id: 'command-palette-group',
+      children: ['command-palette'],
+    }),
+    []
+  )
+
   const {
     mathPreview,
     setMathPreview,
@@ -301,6 +309,10 @@ export const ToolbarMenuBar = () => {
             }
             onClick={toggleMathPreview}
           />
+          <CommandSection
+            section={commandPaletteMenuSectionStructure}
+            includeDivider
+          />
           <CommandSection
             section={pdfControlsMenuSectionStructure}
             includeDivider

services/web/frontend/stylesheets/pages/editor/command-palette.scss

@@ -30,18 +30,27 @@
   }
 
   .command-palette-input {
-    width: 100%;
-    padding: var(--spacing-05);
-    border: 0;
-    border-bottom: 1px solid var(--border-divider-themed);
-    background: transparent;
-    color: var(--content-primary-themed);
-    font-size: var(--font-size-04);
-    outline: none;
+    input {
+      flex: 1;
+      background: transparent;
+      color: var(--content-primary-themed);
+      font-size: var(--font-size-04);
+      border: 0;
+      outline: none;
+      border-radius: var(--border-radius-base);
+      padding: var(--spacing-02);
 
-    &::placeholder {
-      color: var(--content-placeholder-themed);
+      &::placeholder {
+        color: var(--content-placeholder-themed);
+      }
     }
+
+    border-bottom: 1px solid var(--border-divider-themed);
+    padding: var(--spacing-03);
+    gap: var(--spacing-02);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
 
   .command-palette-results {

services/web/locales/en.json

@@ -436,6 +436,8 @@
   "column_width": "Column width",
   "column_width_is_custom_click_to_resize": "Column width is custom. Click to resize",
   "column_width_is_x_click_to_resize": "Column width is __width__. Click to resize",
+  "command_palette": "Command palette",
+  "command_palette_search": "Command palette search",
   "comment": "Comment",
   "comment_only": "Comment only",
   "comment_only_upgrade_for_track_changes": "Comment only. Upgrade for track changes.",
@@ -2901,6 +2903,7 @@
   "turn_on_link_sharing": "Turn on link sharing",
   "turn_on_password_visibility": "Turn on password visibility",
   "tutorials": "Tutorials",
+  "type_a_command": "Type a command…",
   "uk": "Ukrainian",
   "unable_to_extract_the_supplied_zip_file": "Opening this content on Overleaf failed because the zip file could not be extracted. Please ensure that it is a valid zip file. If this keeps happening for links on a particular site, please report this to them.",
   "unable_to_save_check_connection_or_download": "We couldn’t add this file to your project. Check your connection and try again, or <0>download the file</0> instead.",