Merge pull request #36139 from overleaf/jd-command-palette-ui-tweaks

UI tweaks to the command palette & adding a "No results" state

GitOrigin-RevId: 4e3c7aa1498ef03f3a1d9948c3f3df8fa38670c3

services/web/frontend/extracted-translations.json

@@ -1326,6 +1326,7 @@
   "no_folder": "",
   "no_image_files_found": "",
   "no_libraries_selected": "",
+  "no_matches": "",
   "no_members": "",
   "no_messages_yet": "",
   "no_new_commits_in_github": "",

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

@@ -109,6 +109,13 @@ const CommandPaletteBody: FC<CommandPaletteBodyProps> = ({ show, onHide }) => {
           />
         </div>
         <ul ref={resultsRef} className="command-palette-results">
+          {results.length === 0 && (
+            <li role="none" className="command-palette-result">
+              <div className="command-palette-result-title command-palette-no-matches">
+                {t('no_matches')}
+              </div>
+            </li>
+          )}
           {results.map((result, index) => (
             <li
               role="none"

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

@@ -34,7 +34,7 @@
       flex: 1;
       background: transparent;
       color: var(--content-primary-themed);
-      font-size: var(--font-size-04);
+      font-size: var(--font-size-03);
       border: 0;
       outline: none;
       border-radius: var(--border-radius-base);
@@ -91,16 +91,26 @@
     &.command-palette-result-selected button {
       background-color: var(--command-palette-selected-bg);
       color: var(--command-palette-selected-color);
+
+      .command-palette-result-title,
+      .command-palette-result-description {
+        color: var(--command-palette-selected-color);
+      }
     }
   }
 
   .command-palette-result-title {
     color: var(--content-primary-themed);
     font-size: var(--font-size-02);
-    font-weight: 500;
+    font-weight: 400;
     line-height: 1.2;
   }
 
+  .command-palette-no-matches {
+    color: var(--content-placeholder-themed);
+    padding: var(--spacing-03) var(--spacing-04);
+  }
+
   .command-palette-result-description {
     font-size: var(--font-size-02);
     margin-left: var(--spacing-02);

services/web/locales/en.json

@@ -1717,6 +1717,7 @@
   "no_folder": "No folder",
   "no_image_files_found": "No image files found",
   "no_libraries_selected": "No libraries selected",
+  "no_matches": "No matches",
   "no_members": "No members",
   "no_messages_yet": "No messages yet",
   "no_new_commits_in_github": "No new commits in GitHub since last merge.",