@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/command-palette/command-palette-ui.tsx

@@ -1,19 +1,20 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useObservable } from '../hooks';
-import { colorMode } from '../screens/settings/color-mode-dropdown';
+import { getMe, type IAppNav, Messages, newid } from "@peers-app/peers-sdk";
+// biome-ignore lint/correctness/noUnusedImports: classic JSX (`jsx: react`) needs React in scope for emit
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { openThreadInTab } from "../globals";
+import { useObservable } from "../hooks";
+import { colorMode } from "../screens/settings/color-mode-dropdown";
+import { systemPackage } from "../system-apps";
+import { goToTabPath } from "../tabs-layout/tabs-state";
+import { allPackages } from "../ui-router/routes-loader";
 import {
+  type Command,
   closeCommandPalette,
   commandSearchQuery,
-  Command,
   executeCommand,
   isCommandPaletteOpen,
-  searchCommands
-} from './command-palette';
-import { allPackages } from '../ui-router/routes-loader';
-import { systemPackage } from '../system-apps';
-import { goToTabPath } from '../tabs-layout/tabs-state';
-import { IAppNav, Messages, newid, getMe } from "@peers-app/peers-sdk";
-import { openThreadInTab } from '../globals';
+  searchCommands,
+} from "./command-palette";
 
 interface AppSearchItem {
   packageId: string;
@@ -32,31 +33,31 @@ export function CommandPaletteOverlay() {
   const [packages] = useObservable(allPackages);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const inputRef = useRef<HTMLInputElement>(null);
-  
+
   // Local state for query input to avoid locking up on fast typing
-  const [localQuery, setLocalQuery] = useState<string>('');
+  const [localQuery, setLocalQuery] = useState<string>("");
   const debounceTimeoutRef = useRef<NodeJS.Timeout>();
-  
+
   // Sync local query with persisted query when palette opens
   useEffect(() => {
     if (isOpen) {
-      setLocalQuery(_persistedQuery || '');
+      setLocalQuery(_persistedQuery || "");
     } else {
-      setLocalQuery('');
+      setLocalQuery("");
     }
   }, [isOpen, _persistedQuery]);
-  
+
   // Debounced function to update the persisted query
   const updatePersistedQuery = (newQuery: string) => {
     if (debounceTimeoutRef.current) {
       clearTimeout(debounceTimeoutRef.current);
     }
-    
+
     debounceTimeoutRef.current = setTimeout(() => {
       commandSearchQuery(newQuery);
     }, 150); // Shorter debounce for command palette (150ms vs 300ms)
   };
-  
+
   // Cleanup debounce timeout on unmount
   useEffect(() => {
     return () => {
@@ -65,25 +66,27 @@ export function CommandPaletteOverlay() {
       }
     };
   }, []);
-  
+
   const searchQuery = localQuery;
   const filteredCommands = searchCommands(searchQuery);
-  
+
   // Get all apps (system and user)
   const getAllApps = (): AppSearchItem[] => {
     const allPackages_ = [...packages, systemPackage];
     return allPackages_
-      .filter(p => !p.disabled && p.appNavs && p.appNavs.length > 0)
-      .flatMap(pkg =>
-        pkg.appNavs!.map(navItem => {
+      .filter((p) => !p.disabled && p.appNavs && p.appNavs.length > 0)
+      .flatMap((pkg) => {
+        const navs = pkg.appNavs;
+        if (!navs) return [];
+        return navs.map((navItem) => {
           // Construct path - use direct path for system apps, package-nav for others
           let path: string;
-          if (pkg.packageId === 'system-apps') {
-            path = navItem.navigationPath ?? navItem.name.replace(/\s/g, '-').toLowerCase();
+          if (pkg.packageId === "system-apps") {
+            path = navItem.navigationPath ?? navItem.name.replace(/\s/g, "-").toLowerCase();
           } else {
-            path = `package-nav/${pkg.packageId}/${(navItem.navigationPath ?? navItem.name).replace(/[^a-zA-Z0-9]/g, '-').toLowerCase()}`;
-            while (path.includes('//')) {
-              path = path.replace('//', '/');
+            path = `package-nav/${pkg.packageId}/${(navItem.navigationPath ?? navItem.name).replace(/[^a-zA-Z0-9]/g, "-").toLowerCase()}`;
+            while (path.includes("//")) {
+              path = path.replace("//", "/");
             }
           }
 
@@ -94,10 +97,10 @@ export function CommandPaletteOverlay() {
             path,
             name: navItem.name,
             displayName: navItem.displayName || navItem.name,
-            iconClassName: navItem.iconClassName || 'bi-box-seam'
+            iconClassName: navItem.iconClassName || "bi-box-seam",
           };
-        })
-      );
+        });
+      });
   };
 
   // Search apps
@@ -105,17 +108,18 @@ export function CommandPaletteOverlay() {
     if (!query.trim()) return [];
     const allApps = getAllApps();
     const lowerQuery = query.toLowerCase();
-    return allApps.filter(app =>
-      app.name.toLowerCase().includes(lowerQuery) ||
-      app.displayName.toLowerCase().includes(lowerQuery) ||
-      app.packageName.toLowerCase().includes(lowerQuery)
+    return allApps.filter(
+      (app) =>
+        app.name.toLowerCase().includes(lowerQuery) ||
+        app.displayName.toLowerCase().includes(lowerQuery) ||
+        app.packageName.toLowerCase().includes(lowerQuery),
     );
   };
 
   const filteredApps = searchApps(searchQuery);
-  
+
   // Function to create a new thread from search query
-  const createNewThreadFromQuery = async (query: string) => {
+  const createNewThreadFromQuery = useCallback(async (query: string) => {
     try {
       const currentUser = await getMe();
       const threadMessage = await Messages().insert({
@@ -127,59 +131,67 @@ export function CommandPaletteOverlay() {
       });
       await openThreadInTab(threadMessage);
     } catch (error) {
-      console.error('Failed to create new thread:', error);
+      console.error("Failed to create new thread:", error);
     }
-  };
-  
+  }, []);
+
   // Create a flattened list that matches the visual rendering order
   // Apps first, then commands
-  const allItems: Array<{ type: 'app' | 'command'; app?: AppSearchItem; command?: Command; id: string }> = [];
-  
+  const allItems: Array<{
+    type: "app" | "command";
+    app?: AppSearchItem;
+    command?: Command;
+    id: string;
+  }> = [];
+
   // Add apps first
   filteredApps.forEach((app) => {
-    allItems.push({ type: 'app', app, id: `app-${app.packageId}-${app.path}` });
+    allItems.push({ type: "app", app, id: `app-${app.packageId}-${app.path}` });
   });
-  
+
   // Then add commands
   const visualOrderCommands = Object.entries(
-    filteredCommands.reduce((acc, cmd) => {
-      const category = cmd.category || 'Other';
-      if (!acc[category]) acc[category] = [];
-      acc[category].push(cmd);
-      return acc;
-    }, {} as Record<string, Command[]>)
+    filteredCommands.reduce(
+      (acc, cmd) => {
+        const category = cmd.category || "Other";
+        if (!acc[category]) acc[category] = [];
+        acc[category].push(cmd);
+        return acc;
+      },
+      {} as Record<string, Command[]>,
+    ),
   ).flatMap(([, commands]) => commands);
-  
+
   visualOrderCommands.forEach((cmd) => {
-    allItems.push({ type: 'command', command: cmd, id: `command-${cmd.id}` });
+    allItems.push({ type: "command", command: cmd, id: `command-${cmd.id}` });
   });
-  
+
   // Focus input when opened
   useEffect(() => {
     if (isOpen && inputRef.current) {
       inputRef.current.focus();
     }
   }, [isOpen]);
-  
+
   // Reset selected index when search changes
   useEffect(() => {
     setSelectedIndex(0);
-  }, [searchQuery]);
-  
+  }, []);
+
   // Keyboard navigation
   useEffect(() => {
     if (!isOpen) return;
-    
+
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'ArrowDown') {
+      if (e.key === "ArrowDown") {
         e.preventDefault();
         // Allow selection to go one past the end if there's a search query (for new thread option)
         const maxIndex = searchQuery.trim() ? allItems.length : allItems.length - 1;
-        setSelectedIndex(prev => Math.min(prev + 1, maxIndex));
-      } else if (e.key === 'ArrowUp') {
+        setSelectedIndex((prev) => Math.min(prev + 1, maxIndex));
+      } else if (e.key === "ArrowUp") {
         e.preventDefault();
-        setSelectedIndex(prev => Math.max(prev - 1, 0));
-      } else if (e.key === 'Enter') {
+        setSelectedIndex((prev) => Math.max(prev - 1, 0));
+      } else if (e.key === "Enter") {
         e.preventDefault();
         // Check if the new thread option is selected (selectedIndex >= allItems.length)
         if (selectedIndex >= allItems.length && searchQuery.trim()) {
@@ -188,10 +200,10 @@ export function CommandPaletteOverlay() {
         } else {
           const selectedItem = allItems[selectedIndex];
           if (selectedItem) {
-            if (selectedItem.type === 'app' && selectedItem.app) {
+            if (selectedItem.type === "app" && selectedItem.app) {
               closeCommandPalette();
               goToTabPath(selectedItem.app.path);
-            } else if (selectedItem.type === 'command' && selectedItem.command) {
+            } else if (selectedItem.type === "command" && selectedItem.command) {
               executeCommand(selectedItem.command.id);
             }
           } else if (searchQuery.trim()) {
@@ -203,15 +215,15 @@ export function CommandPaletteOverlay() {
         }
       }
     };
-    
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [isOpen, allItems, selectedIndex]);
-  
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, selectedIndex, createNewThreadFromQuery, searchQuery]);
+
   if (!isOpen) return null;
-  
-  const isDark = _colorMode === 'dark';
-  
+
+  const isDark = _colorMode === "dark";
+
   return (
     <div
       className="position-fixed w-100 h-100 d-flex align-items-start justify-content-center"
@@ -219,9 +231,9 @@ export function CommandPaletteOverlay() {
         top: 0,
         left: 0,
         zIndex: 1050,
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        backdropFilter: 'blur(4px)',
-        paddingTop: '10vh'
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        backdropFilter: "blur(4px)",
+        paddingTop: "10vh",
       }}
       onClick={(e) => {
         if (e.target === e.currentTarget) {
@@ -230,37 +242,38 @@ export function CommandPaletteOverlay() {
       }}
     >
       <div
-        className={`${isDark ? 'bg-dark text-light' : 'bg-white text-dark'}`}
+        className={`${isDark ? "bg-dark text-light" : "bg-white text-dark"}`}
         style={{
-          width: '90%',
-          maxWidth: '600px',
-          borderRadius: '12px',
-          boxShadow: isDark 
-            ? '0 20px 40px rgba(0, 0, 0, 0.5)'
-            : '0 20px 40px rgba(0, 0, 0, 0.1)',
-          border: isDark ? '1px solid #495057' : '1px solid #dee2e6',
-          overflow: 'hidden'
+          width: "90%",
+          maxWidth: "600px",
+          borderRadius: "12px",
+          boxShadow: isDark ? "0 20px 40px rgba(0, 0, 0, 0.5)" : "0 20px 40px rgba(0, 0, 0, 0.1)",
+          border: isDark ? "1px solid #495057" : "1px solid #dee2e6",
+          overflow: "hidden",
         }}
       >
         {/* Search Input */}
-        <div className="p-3 border-bottom" style={{
-          borderBottomColor: isDark ? '#495057' : '#dee2e6'
-        }}>
+        <div
+          className="p-3 border-bottom"
+          style={{
+            borderBottomColor: isDark ? "#495057" : "#dee2e6",
+          }}
+        >
           <div className="position-relative">
-            <i 
-              className="bi-search position-absolute" 
+            <i
+              className="bi-search position-absolute"
               style={{
-                left: '12px',
-                top: '50%',
-                transform: 'translateY(-50%)',
-                color: '#6c757d',
-                zIndex: 1
-              }} 
+                left: "12px",
+                top: "50%",
+                transform: "translateY(-50%)",
+                color: "#6c757d",
+                zIndex: 1,
+              }}
             />
             <input
               ref={inputRef}
               type="text"
-              className={`form-control ${isDark ? 'bg-dark text-light border-secondary' : ''}`}
+              className={`form-control ${isDark ? "bg-dark text-light border-secondary" : ""}`}
               placeholder="Search apps, commands, or navigate..."
               value={searchQuery}
               onChange={(e) => {
@@ -277,62 +290,62 @@ export function CommandPaletteOverlay() {
                 commandSearchQuery(localQuery);
               }}
               style={{
-                paddingLeft: '40px',
-                fontSize: '16px',
-                border: 'none',
-                outline: 'none',
-                boxShadow: 'none',
-                backgroundColor: isDark ? '#343a40' : '#f8f9fa'
+                paddingLeft: "40px",
+                fontSize: "16px",
+                border: "none",
+                outline: "none",
+                boxShadow: "none",
+                backgroundColor: isDark ? "#343a40" : "#f8f9fa",
               }}
             />
           </div>
         </div>
-        
+
         {/* Commands and Apps List */}
         <div
           style={{
-            maxHeight: '400px',
-            overflowY: 'auto'
+            maxHeight: "400px",
+            overflowY: "auto",
           }}
         >
           {allItems.length === 0 && !searchQuery.trim() ? (
             <div className="p-4 text-center text-muted">
-              <i className="bi-search mb-2 d-block" style={{ fontSize: '24px' }} />
+              <i className="bi-search mb-2 d-block" style={{ fontSize: "24px" }} />
               No results found
             </div>
           ) : (
             <div className="py-2">
               {/* Show "No results" message if there's a query but no results yet */}
               {allItems.length === 0 && searchQuery.trim() && (
-                <div className="px-3 py-2 text-muted small text-center">
-                  No matching results
-                </div>
+                <div className="px-3 py-2 text-muted small text-center">No matching results</div>
               )}
               {/* Apps Section */}
               {filteredApps.length > 0 && (
                 <div>
-                  <div 
+                  <div
                     className="px-3 py-1 small text-muted fw-bold text-uppercase"
-                    style={{ fontSize: '11px', letterSpacing: '0.5px' }}
+                    style={{ fontSize: "11px", letterSpacing: "0.5px" }}
                   >
                     Apps
                   </div>
                   {filteredApps.map((app) => {
                     const appId = `app-${app.packageId}-${app.path}`;
-                    const globalIndex = allItems.findIndex(item => item.id === appId);
+                    const globalIndex = allItems.findIndex((item) => item.id === appId);
                     const isSelected = globalIndex === selectedIndex;
-                    
+
                     return (
                       <div
                         key={`${app.packageId}-${app.path}`}
                         className={`px-3 py-2 d-flex align-items-center justify-content-between ${
-                          isSelected 
-                            ? (isDark ? 'bg-primary bg-opacity-25' : 'bg-primary bg-opacity-10')
-                            : ''
+                          isSelected
+                            ? isDark
+                              ? "bg-primary bg-opacity-25"
+                              : "bg-primary bg-opacity-10"
+                            : ""
                         }`}
                         style={{
-                          cursor: 'pointer',
-                          transition: 'background-color 0.1s ease'
+                          cursor: "pointer",
+                          transition: "background-color 0.1s ease",
                         }}
                         onClick={() => {
                           closeCommandPalette();
@@ -341,21 +354,18 @@ export function CommandPaletteOverlay() {
                         onMouseEnter={() => setSelectedIndex(globalIndex)}
                       >
                         <div className="d-flex align-items-center">
-                          <i 
+                          <i
                             className={`${app.iconClassName} me-3`}
-                            style={{ 
-                              fontSize: '16px',
-                              color: isSelected ? (isDark ? '#ffffff' : '#0d6efd') : '#6c757d',
-                              minWidth: '16px'
+                            style={{
+                              fontSize: "16px",
+                              color: isSelected ? (isDark ? "#ffffff" : "#0d6efd") : "#6c757d",
+                              minWidth: "16px",
                             }}
                           />
                           <div>
                             <div className="fw-medium">{app.displayName}</div>
-                            <div 
-                              className="small text-muted"
-                              style={{ fontSize: '12px' }}
-                            >
-                              {app.packageId === 'system-apps' ? 'System App' : app.packageName}
+                            <div className="small text-muted" style={{ fontSize: "12px" }}>
+                              {app.packageId === "system-apps" ? "System App" : app.packageName}
                             </div>
                           </div>
                         </div>
@@ -366,110 +376,119 @@ export function CommandPaletteOverlay() {
               )}
 
               {/* Commands Section - Group commands by category */}
-              {filteredCommands.length > 0 && Object.entries(
-                filteredCommands.reduce((acc, cmd) => {
-                  const category = cmd.category || 'Other';
-                  if (!acc[category]) acc[category] = [];
-                  acc[category].push(cmd);
-                  return acc;
-                }, {} as Record<string, Command[]>)
-              ).map(([category, commands]) => (
-                <div key={category}>
-                  {/* Category Header */}
-                  <div 
-                    className="px-3 py-1 small text-muted fw-bold text-uppercase"
-                    style={{ fontSize: '11px', letterSpacing: '0.5px' }}
-                  >
-                    {category}
-                  </div>
-                  
-                  {/* Commands in Category */}
-                  {commands.map((command) => {
-                    const commandId = `command-${command.id}`;
-                    const globalIndex = allItems.findIndex(item => item.id === commandId);
-                    const isSelected = globalIndex === selectedIndex;
-                    
-                    return (
-                      <div
-                        key={command.id}
-                        className={`px-3 py-2 d-flex align-items-center justify-content-between ${
-                          isSelected 
-                            ? (isDark ? 'bg-primary bg-opacity-25' : 'bg-primary bg-opacity-10')
-                            : ''
-                        }`}
-                        style={{
-                          cursor: 'pointer',
-                          transition: 'background-color 0.1s ease'
-                        }}
-                        onClick={() => executeCommand(command.id)}
-                        onMouseEnter={() => setSelectedIndex(globalIndex)}
-                      >
-                        <div className="d-flex align-items-center">
-                          {command.iconClassName && (
-                            <i 
-                              className={`${command.iconClassName} me-3`}
-                              style={{ 
-                                fontSize: '16px',
-                                color: isSelected ? (isDark ? '#ffffff' : '#0d6efd') : '#6c757d',
-                                minWidth: '16px'
-                              }}
-                            />
-                          )}
-                          <div>
-                            <div className="fw-medium">{command.label}</div>
-                            {command.description && (
-                              <div 
-                                className="small text-muted"
-                                style={{ fontSize: '12px' }}
-                              >
-                                {command.description}
-                              </div>
+              {filteredCommands.length > 0 &&
+                Object.entries(
+                  filteredCommands.reduce(
+                    (acc, cmd) => {
+                      const category = cmd.category || "Other";
+                      if (!acc[category]) acc[category] = [];
+                      acc[category].push(cmd);
+                      return acc;
+                    },
+                    {} as Record<string, Command[]>,
+                  ),
+                ).map(([category, commands]) => (
+                  <div key={category}>
+                    {/* Category Header */}
+                    <div
+                      className="px-3 py-1 small text-muted fw-bold text-uppercase"
+                      style={{ fontSize: "11px", letterSpacing: "0.5px" }}
+                    >
+                      {category}
+                    </div>
+
+                    {/* Commands in Category */}
+                    {commands.map((command) => {
+                      const commandId = `command-${command.id}`;
+                      const globalIndex = allItems.findIndex((item) => item.id === commandId);
+                      const isSelected = globalIndex === selectedIndex;
+
+                      return (
+                        <div
+                          key={command.id}
+                          className={`px-3 py-2 d-flex align-items-center justify-content-between ${
+                            isSelected
+                              ? isDark
+                                ? "bg-primary bg-opacity-25"
+                                : "bg-primary bg-opacity-10"
+                              : ""
+                          }`}
+                          style={{
+                            cursor: "pointer",
+                            transition: "background-color 0.1s ease",
+                          }}
+                          onClick={() => executeCommand(command.id)}
+                          onMouseEnter={() => setSelectedIndex(globalIndex)}
+                        >
+                          <div className="d-flex align-items-center">
+                            {command.iconClassName && (
+                              <i
+                                className={`${command.iconClassName} me-3`}
+                                style={{
+                                  fontSize: "16px",
+                                  color: isSelected ? (isDark ? "#ffffff" : "#0d6efd") : "#6c757d",
+                                  minWidth: "16px",
+                                }}
+                              />
                             )}
+                            <div>
+                              <div className="fw-medium">{command.label}</div>
+                              {command.description && (
+                                <div className="small text-muted" style={{ fontSize: "12px" }}>
+                                  {command.description}
+                                </div>
+                              )}
+                            </div>
                           </div>
+
+                          {command.shortcut && (
+                            <div
+                              className={`small px-2 py-1 rounded ${
+                                isDark ? "bg-secondary bg-opacity-50" : "bg-light"
+                              }`}
+                              style={{
+                                fontSize: "11px",
+                                fontFamily: "monospace",
+                                color: isDark ? "#adb5bd" : "#6c757d",
+                                border: isDark ? "1px solid #495057" : "1px solid #dee2e6",
+                              }}
+                            >
+                              {command.shortcut}
+                            </div>
+                          )}
                         </div>
-                        
-                        {command.shortcut && (
-                          <div 
-                            className={`small px-2 py-1 rounded ${
-                              isDark ? 'bg-secondary bg-opacity-50' : 'bg-light'
-                            }`}
-                            style={{
-                              fontSize: '11px',
-                              fontFamily: 'monospace',
-                              color: isDark ? '#adb5bd' : '#6c757d',
-                              border: isDark ? '1px solid #495057' : '1px solid #dee2e6'
-                            }}
-                          >
-                            {command.shortcut}
-                          </div>
-                        )}
-                      </div>
-                    );
-                  })}
-                </div>
-              ))}
+                      );
+                    })}
+                  </div>
+                ))}
 
               {/* New Thread Indicator - Show when there's a search query */}
               {searchQuery.trim() && (
                 <div>
-                  <div 
+                  <div
                     className="px-3 py-1 small text-muted fw-bold text-uppercase"
-                    style={{ fontSize: '11px', letterSpacing: '0.5px' }}
+                    style={{ fontSize: "11px", letterSpacing: "0.5px" }}
                   >
                     Actions
                   </div>
                   <div
                     className={`px-3 py-2 d-flex align-items-center ${
-                      (allItems.length === 0 || selectedIndex >= allItems.length) && searchQuery.trim()
-                        ? (isDark ? 'bg-primary bg-opacity-25' : 'bg-primary bg-opacity-10')
-                        : ''
+                      (allItems.length === 0 || selectedIndex >= allItems.length) &&
+                      searchQuery.trim()
+                        ? isDark
+                          ? "bg-primary bg-opacity-25"
+                          : "bg-primary bg-opacity-10"
+                        : ""
                     }`}
                     style={{
-                      cursor: 'pointer',
-                      transition: 'background-color 0.1s ease',
-                      borderTop: allItems.length > 0 ? `1px solid ${isDark ? '#495057' : '#dee2e6'}` : 'none',
-                      marginTop: allItems.length > 0 ? '8px' : '0',
-                      paddingTop: allItems.length > 0 ? '12px' : '8px'
+                      cursor: "pointer",
+                      transition: "background-color 0.1s ease",
+                      borderTop:
+                        allItems.length > 0
+                          ? `1px solid ${isDark ? "#495057" : "#dee2e6"}`
+                          : "none",
+                      marginTop: allItems.length > 0 ? "8px" : "0",
+                      paddingTop: allItems.length > 0 ? "12px" : "8px",
                     }}
                     onClick={() => {
                       closeCommandPalette();
@@ -481,24 +500,29 @@ export function CommandPaletteOverlay() {
                     }}
                   >
                     <div className="d-flex align-items-center">
-                      <i 
+                      <i
                         className="bi-chat-dots me-3"
-                        style={{ 
-                          fontSize: '16px',
-                          color: (allItems.length === 0 || selectedIndex >= allItems.length) && searchQuery.trim() 
-                            ? (isDark ? '#ffffff' : '#0d6efd') 
-                            : '#6c757d',
-                          minWidth: '16px'
+                        style={{
+                          fontSize: "16px",
+                          color:
+                            (allItems.length === 0 || selectedIndex >= allItems.length) &&
+                            searchQuery.trim()
+                              ? isDark
+                                ? "#ffffff"
+                                : "#0d6efd"
+                              : "#6c757d",
+                          minWidth: "16px",
                         }}
                       />
                       <div>
                         <div className="fw-medium">
-                          Start new thread: <span className="text-muted">{searchQuery.trim().slice(0, 50)}{searchQuery.trim().length > 50 ? '...' : ''}</span>
+                          Start new thread:{" "}
+                          <span className="text-muted">
+                            {searchQuery.trim().slice(0, 50)}
+                            {searchQuery.trim().length > 50 ? "..." : ""}
+                          </span>
                         </div>
-                        <div 
-                          className="small text-muted"
-                          style={{ fontSize: '12px' }}
-                        >
+                        <div className="small text-muted" style={{ fontSize: "12px" }}>
                           Press Enter to create
                         </div>
                       </div>
@@ -509,13 +533,13 @@ export function CommandPaletteOverlay() {
             </div>
           )}
         </div>
-        
+
         {/* Footer */}
-        <div 
+        <div
           className={`px-3 py-2 small text-muted border-top d-flex align-items-center justify-content-between`}
           style={{
-            borderTopColor: isDark ? '#495057' : '#dee2e6',
-            fontSize: '11px'
+            borderTopColor: isDark ? "#495057" : "#dee2e6",
+            fontSize: "11px",
           }}
         >
           <div className="d-flex align-items-center gap-3">
@@ -530,11 +554,11 @@ export function CommandPaletteOverlay() {
             </span>
           </div>
           <div>
-            {allItems.length} result{allItems.length !== 1 ? 's' : ''}
-            {searchQuery.trim() && allItems.length === 0 && ' • Start thread'}
+            {allItems.length} result{allItems.length !== 1 ? "s" : ""}
+            {searchQuery.trim() && allItems.length === 0 && " • Start thread"}
           </div>
         </div>
       </div>
     </div>
   );
-}
+}