@peers-app/peers-ui 0.14.0 → 0.15.0

package/dist/command-palette/command-palette-ui.js

@@ -1,48 +1,17 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CommandPaletteOverlay = CommandPaletteOverlay;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+// biome-ignore lint/correctness/noUnusedImports: classic JSX (`jsx: react`) needs React in scope for emit
+const react_1 = require("react");
+const globals_1 = require("../globals");
 const hooks_1 = require("../hooks");
 const color_mode_dropdown_1 = require("../screens/settings/color-mode-dropdown");
-const command_palette_1 = require("./command-palette");
-const routes_loader_1 = require("../ui-router/routes-loader");
 const system_apps_1 = require("../system-apps");
 const tabs_state_1 = require("../tabs-layout/tabs-state");
-const peers_sdk_1 = require("@peers-app/peers-sdk");
-const globals_1 = require("../globals");
+const routes_loader_1 = require("../ui-router/routes-loader");
+const command_palette_1 = require("./command-palette");
 function CommandPaletteOverlay() {
     const [isOpen] = (0, hooks_1.useObservable)(command_palette_1.isCommandPaletteOpen);
     const [_persistedQuery] = (0, hooks_1.useObservable)(command_palette_1.commandSearchQuery);
@@ -51,15 +20,15 @@ function CommandPaletteOverlay() {
     const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(0);
     const inputRef = (0, react_1.useRef)(null);
     // Local state for query input to avoid locking up on fast typing
-    const [localQuery, setLocalQuery] = (0, react_1.useState)('');
+    const [localQuery, setLocalQuery] = (0, react_1.useState)("");
     const debounceTimeoutRef = (0, react_1.useRef)();
     // Sync local query with persisted query when palette opens
     (0, react_1.useEffect)(() => {
         if (isOpen) {
-            setLocalQuery(_persistedQuery || '');
+            setLocalQuery(_persistedQuery || "");
         }
         else {
-            setLocalQuery('');
+            setLocalQuery("");
         }
     }, [isOpen, _persistedQuery]);
     // Debounced function to update the persisted query
@@ -85,29 +54,34 @@ function CommandPaletteOverlay() {
     const getAllApps = () => {
         const allPackages_ = [...packages, system_apps_1.systemPackage];
         return allPackages_
-            .filter(p => !p.disabled && p.appNavs && p.appNavs.length > 0)
-            .flatMap(pkg => pkg.appNavs.map(navItem => {
-            // Construct path - use direct path for system apps, package-nav for others
-            let path;
-            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('//', '/');
+            .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;
+                if (pkg.packageId === "system-apps") {
+                    path = navItem.navigationPath ?? navItem.name.replace(/\s/g, "-").toLowerCase();
                 }
-            }
-            return {
-                packageId: pkg.packageId,
-                packageName: pkg.name,
-                navItem,
-                path,
-                name: navItem.name,
-                displayName: navItem.displayName || navItem.name,
-                iconClassName: navItem.iconClassName || 'bi-box-seam'
-            };
-        }));
+                else {
+                    path = `package-nav/${pkg.packageId}/${(navItem.navigationPath ?? navItem.name).replace(/[^a-zA-Z0-9]/g, "-").toLowerCase()}`;
+                    while (path.includes("//")) {
+                        path = path.replace("//", "/");
+                    }
+                }
+                return {
+                    packageId: pkg.packageId,
+                    packageName: pkg.name,
+                    navItem,
+                    path,
+                    name: navItem.name,
+                    displayName: navItem.displayName || navItem.name,
+                    iconClassName: navItem.iconClassName || "bi-box-seam",
+                };
+            });
+        });
     };
     // Search apps
     const searchApps = (query) => {
@@ -115,13 +89,13 @@ function CommandPaletteOverlay() {
             return [];
         const allApps = getAllApps();
         const lowerQuery = query.toLowerCase();
-        return allApps.filter(app => app.name.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) => {
+    const createNewThreadFromQuery = (0, react_1.useCallback)(async (query) => {
         try {
             const currentUser = await (0, peers_sdk_1.getMe)();
             const threadMessage = await (0, peers_sdk_1.Messages)().insert({
@@ -134,26 +108,26 @@ function CommandPaletteOverlay() {
             await (0, globals_1.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 = [];
     // 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';
+        const category = cmd.category || "Other";
         if (!acc[category])
             acc[category] = [];
         acc[category].push(cmd);
         return acc;
     }, {})).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
     (0, react_1.useEffect)(() => {
@@ -164,23 +138,23 @@ function CommandPaletteOverlay() {
     // Reset selected index when search changes
     (0, react_1.useEffect)(() => {
         setSelectedIndex(0);
-    }, [searchQuery]);
+    }, []);
     // Keyboard navigation
     (0, react_1.useEffect)(() => {
         if (!isOpen)
             return;
         const handleKeyDown = (e) => {
-            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));
+                setSelectedIndex((prev) => Math.min(prev + 1, maxIndex));
             }
-            else if (e.key === 'ArrowUp') {
+            else if (e.key === "ArrowUp") {
                 e.preventDefault();
-                setSelectedIndex(prev => Math.max(prev - 1, 0));
+                setSelectedIndex((prev) => Math.max(prev - 1, 0));
             }
-            else if (e.key === 'Enter') {
+            else if (e.key === "Enter") {
                 e.preventDefault();
                 // Check if the new thread option is selected (selectedIndex >= allItems.length)
                 if (selectedIndex >= allItems.length && searchQuery.trim()) {
@@ -190,11 +164,11 @@ function CommandPaletteOverlay() {
                 else {
                     const selectedItem = allItems[selectedIndex];
                     if (selectedItem) {
-                        if (selectedItem.type === 'app' && selectedItem.app) {
+                        if (selectedItem.type === "app" && selectedItem.app) {
                             (0, command_palette_1.closeCommandPalette)();
                             (0, tabs_state_1.goToTabPath)(selectedItem.app.path);
                         }
-                        else if (selectedItem.type === 'command' && selectedItem.command) {
+                        else if (selectedItem.type === "command" && selectedItem.command) {
                             (0, command_palette_1.executeCommand)(selectedItem.command.id);
                         }
                     }
@@ -207,179 +181,136 @@ 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';
-    return (react_1.default.createElement("div", { className: "position-fixed w-100 h-100 d-flex align-items-start justify-content-center", style: {
+    const isDark = _colorMode === "dark";
+    return ((0, jsx_runtime_1.jsx)("div", { className: "position-fixed w-100 h-100 d-flex align-items-start justify-content-center", style: {
             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) {
                 (0, command_palette_1.closeCommandPalette)();
             }
-        } },
-        react_1.default.createElement("div", { 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'
-            } },
-            react_1.default.createElement("div", { className: "p-3 border-bottom", style: {
-                    borderBottomColor: isDark ? '#495057' : '#dee2e6'
-                } },
-                react_1.default.createElement("div", { className: "position-relative" },
-                    react_1.default.createElement("i", { className: "bi-search position-absolute", style: {
-                            left: '12px',
-                            top: '50%',
-                            transform: 'translateY(-50%)',
-                            color: '#6c757d',
-                            zIndex: 1
-                        } }),
-                    react_1.default.createElement("input", { ref: inputRef, type: "text", className: `form-control ${isDark ? 'bg-dark text-light border-secondary' : ''}`, placeholder: "Search apps, commands, or navigate...", value: searchQuery, onChange: (e) => {
-                            const newQuery = e.target.value;
-                            setLocalQuery(newQuery);
-                            updatePersistedQuery(newQuery);
-                        }, onBlur: () => {
-                            // Save immediately on blur
-                            if (debounceTimeoutRef.current) {
-                                clearTimeout(debounceTimeoutRef.current);
-                                debounceTimeoutRef.current = undefined;
-                            }
-                            (0, command_palette_1.commandSearchQuery)(localQuery);
-                        }, style: {
-                            paddingLeft: '40px',
-                            fontSize: '16px',
-                            border: 'none',
-                            outline: 'none',
-                            boxShadow: 'none',
-                            backgroundColor: isDark ? '#343a40' : '#f8f9fa'
-                        } }))),
-            react_1.default.createElement("div", { style: {
-                    maxHeight: '400px',
-                    overflowY: 'auto'
-                } }, allItems.length === 0 && !searchQuery.trim() ? (react_1.default.createElement("div", { className: "p-4 text-center text-muted" },
-                react_1.default.createElement("i", { className: "bi-search mb-2 d-block", style: { fontSize: '24px' } }),
-                "No results found")) : (react_1.default.createElement("div", { className: "py-2" },
-                allItems.length === 0 && searchQuery.trim() && (react_1.default.createElement("div", { className: "px-3 py-2 text-muted small text-center" }, "No matching results")),
-                filteredApps.length > 0 && (react_1.default.createElement("div", null,
-                    react_1.default.createElement("div", { className: "px-3 py-1 small text-muted fw-bold text-uppercase", style: { fontSize: '11px', letterSpacing: '0.5px' } }, "Apps"),
-                    filteredApps.map((app) => {
-                        const appId = `app-${app.packageId}-${app.path}`;
-                        const globalIndex = allItems.findIndex(item => item.id === appId);
-                        const isSelected = globalIndex === selectedIndex;
-                        return (react_1.default.createElement("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')
-                                : ''}`, style: {
-                                cursor: 'pointer',
-                                transition: 'background-color 0.1s ease'
-                            }, onClick: () => {
-                                (0, command_palette_1.closeCommandPalette)();
-                                (0, tabs_state_1.goToTabPath)(app.path);
-                            }, onMouseEnter: () => setSelectedIndex(globalIndex) },
-                            react_1.default.createElement("div", { className: "d-flex align-items-center" },
-                                react_1.default.createElement("i", { className: `${app.iconClassName} me-3`, style: {
-                                        fontSize: '16px',
-                                        color: isSelected ? (isDark ? '#ffffff' : '#0d6efd') : '#6c757d',
-                                        minWidth: '16px'
-                                    } }),
-                                react_1.default.createElement("div", null,
-                                    react_1.default.createElement("div", { className: "fw-medium" }, app.displayName),
-                                    react_1.default.createElement("div", { className: "small text-muted", style: { fontSize: '12px' } }, app.packageId === 'system-apps' ? 'System App' : app.packageName)))));
-                    }))),
-                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;
-                }, {})).map(([category, commands]) => (react_1.default.createElement("div", { key: category },
-                    react_1.default.createElement("div", { className: "px-3 py-1 small text-muted fw-bold text-uppercase", style: { fontSize: '11px', letterSpacing: '0.5px' } }, category),
-                    commands.map((command) => {
-                        const commandId = `command-${command.id}`;
-                        const globalIndex = allItems.findIndex(item => item.id === commandId);
-                        const isSelected = globalIndex === selectedIndex;
-                        return (react_1.default.createElement("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: () => (0, command_palette_1.executeCommand)(command.id), onMouseEnter: () => setSelectedIndex(globalIndex) },
-                            react_1.default.createElement("div", { className: "d-flex align-items-center" },
-                                command.iconClassName && (react_1.default.createElement("i", { className: `${command.iconClassName} me-3`, style: {
-                                        fontSize: '16px',
-                                        color: isSelected ? (isDark ? '#ffffff' : '#0d6efd') : '#6c757d',
-                                        minWidth: '16px'
-                                    } })),
-                                react_1.default.createElement("div", null,
-                                    react_1.default.createElement("div", { className: "fw-medium" }, command.label),
-                                    command.description && (react_1.default.createElement("div", { className: "small text-muted", style: { fontSize: '12px' } }, command.description)))),
-                            command.shortcut && (react_1.default.createElement("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))));
-                    })))),
-                searchQuery.trim() && (react_1.default.createElement("div", null,
-                    react_1.default.createElement("div", { className: "px-3 py-1 small text-muted fw-bold text-uppercase", style: { fontSize: '11px', letterSpacing: '0.5px' } }, "Actions"),
-                    react_1.default.createElement("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')
-                            : ''}`, 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'
-                        }, onClick: () => {
-                            (0, command_palette_1.closeCommandPalette)();
-                            createNewThreadFromQuery(searchQuery);
-                        }, onMouseEnter: () => {
-                            // Set selected index beyond the list to indicate this item is selected
-                            setSelectedIndex(allItems.length);
-                        } },
-                        react_1.default.createElement("div", { className: "d-flex align-items-center" },
-                            react_1.default.createElement("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'
-                                } }),
-                            react_1.default.createElement("div", null,
-                                react_1.default.createElement("div", { className: "fw-medium" },
-                                    "Start new thread: ",
-                                    react_1.default.createElement("span", { className: "text-muted" },
-                                        searchQuery.trim().slice(0, 50),
-                                        searchQuery.trim().length > 50 ? '...' : '')),
-                                react_1.default.createElement("div", { className: "small text-muted", style: { fontSize: '12px' } }, "Press Enter to create"))))))))),
-            react_1.default.createElement("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'
-                } },
-                react_1.default.createElement("div", { className: "d-flex align-items-center gap-3" },
-                    react_1.default.createElement("span", null,
-                        react_1.default.createElement("kbd", { className: "small" }, "\u21B5"),
-                        " to select"),
-                    react_1.default.createElement("span", null,
-                        react_1.default.createElement("kbd", { className: "small" }, "\u2191\u2193"),
-                        " to navigate"),
-                    react_1.default.createElement("span", null,
-                        react_1.default.createElement("kbd", { className: "small" }, "esc"),
-                        " to close")),
-                react_1.default.createElement("div", null,
-                    allItems.length,
-                    " result",
-                    allItems.length !== 1 ? 's' : '',
-                    searchQuery.trim() && allItems.length === 0 && ' • Start thread')))));
+        }, children: (0, jsx_runtime_1.jsxs)("div", { 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",
+            }, children: [(0, jsx_runtime_1.jsx)("div", { className: "p-3 border-bottom", style: {
+                        borderBottomColor: isDark ? "#495057" : "#dee2e6",
+                    }, children: (0, jsx_runtime_1.jsxs)("div", { className: "position-relative", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-search position-absolute", style: {
+                                    left: "12px",
+                                    top: "50%",
+                                    transform: "translateY(-50%)",
+                                    color: "#6c757d",
+                                    zIndex: 1,
+                                } }), (0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "text", className: `form-control ${isDark ? "bg-dark text-light border-secondary" : ""}`, placeholder: "Search apps, commands, or navigate...", value: searchQuery, onChange: (e) => {
+                                    const newQuery = e.target.value;
+                                    setLocalQuery(newQuery);
+                                    updatePersistedQuery(newQuery);
+                                }, onBlur: () => {
+                                    // Save immediately on blur
+                                    if (debounceTimeoutRef.current) {
+                                        clearTimeout(debounceTimeoutRef.current);
+                                        debounceTimeoutRef.current = undefined;
+                                    }
+                                    (0, command_palette_1.commandSearchQuery)(localQuery);
+                                }, style: {
+                                    paddingLeft: "40px",
+                                    fontSize: "16px",
+                                    border: "none",
+                                    outline: "none",
+                                    boxShadow: "none",
+                                    backgroundColor: isDark ? "#343a40" : "#f8f9fa",
+                                } })] }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                        maxHeight: "400px",
+                        overflowY: "auto",
+                    }, children: allItems.length === 0 && !searchQuery.trim() ? ((0, jsx_runtime_1.jsxs)("div", { className: "p-4 text-center text-muted", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-search mb-2 d-block", style: { fontSize: "24px" } }), "No results found"] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "py-2", children: [allItems.length === 0 && searchQuery.trim() && ((0, jsx_runtime_1.jsx)("div", { className: "px-3 py-2 text-muted small text-center", children: "No matching results" })), filteredApps.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "px-3 py-1 small text-muted fw-bold text-uppercase", style: { fontSize: "11px", letterSpacing: "0.5px" }, children: "Apps" }), filteredApps.map((app) => {
+                                        const appId = `app-${app.packageId}-${app.path}`;
+                                        const globalIndex = allItems.findIndex((item) => item.id === appId);
+                                        const isSelected = globalIndex === selectedIndex;
+                                        return ((0, jsx_runtime_1.jsx)("div", { 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: () => {
+                                                (0, command_palette_1.closeCommandPalette)();
+                                                (0, tabs_state_1.goToTabPath)(app.path);
+                                            }, onMouseEnter: () => setSelectedIndex(globalIndex), children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center", children: [(0, jsx_runtime_1.jsx)("i", { className: `${app.iconClassName} me-3`, style: {
+                                                            fontSize: "16px",
+                                                            color: isSelected ? (isDark ? "#ffffff" : "#0d6efd") : "#6c757d",
+                                                            minWidth: "16px",
+                                                        } }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "fw-medium", children: app.displayName }), (0, jsx_runtime_1.jsx)("div", { className: "small text-muted", style: { fontSize: "12px" }, children: app.packageId === "system-apps" ? "System App" : app.packageName })] })] }) }, `${app.packageId}-${app.path}`));
+                                    })] })), 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;
+                                }, {})).map(([category, commands]) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "px-3 py-1 small text-muted fw-bold text-uppercase", style: { fontSize: "11px", letterSpacing: "0.5px" }, children: category }), commands.map((command) => {
+                                            const commandId = `command-${command.id}`;
+                                            const globalIndex = allItems.findIndex((item) => item.id === commandId);
+                                            const isSelected = globalIndex === selectedIndex;
+                                            return ((0, jsx_runtime_1.jsxs)("div", { 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: () => (0, command_palette_1.executeCommand)(command.id), onMouseEnter: () => setSelectedIndex(globalIndex), children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center", children: [command.iconClassName && ((0, jsx_runtime_1.jsx)("i", { className: `${command.iconClassName} me-3`, style: {
+                                                                    fontSize: "16px",
+                                                                    color: isSelected ? (isDark ? "#ffffff" : "#0d6efd") : "#6c757d",
+                                                                    minWidth: "16px",
+                                                                } })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "fw-medium", children: command.label }), command.description && ((0, jsx_runtime_1.jsx)("div", { className: "small text-muted", style: { fontSize: "12px" }, children: command.description }))] })] }), command.shortcut && ((0, jsx_runtime_1.jsx)("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",
+                                                        }, children: command.shortcut }))] }, command.id));
+                                        })] }, category))), searchQuery.trim() && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "px-3 py-1 small text-muted fw-bold text-uppercase", style: { fontSize: "11px", letterSpacing: "0.5px" }, children: "Actions" }), (0, jsx_runtime_1.jsx)("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"
+                                            : ""}`, 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",
+                                        }, onClick: () => {
+                                            (0, command_palette_1.closeCommandPalette)();
+                                            createNewThreadFromQuery(searchQuery);
+                                        }, onMouseEnter: () => {
+                                            // Set selected index beyond the list to indicate this item is selected
+                                            setSelectedIndex(allItems.length);
+                                        }, children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center", children: [(0, jsx_runtime_1.jsx)("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",
+                                                    } }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "fw-medium", children: ["Start new thread:", " ", (0, jsx_runtime_1.jsxs)("span", { className: "text-muted", children: [searchQuery.trim().slice(0, 50), searchQuery.trim().length > 50 ? "..." : ""] })] }), (0, jsx_runtime_1.jsx)("div", { className: "small text-muted", style: { fontSize: "12px" }, children: "Press Enter to create" })] })] }) })] }))] })) }), (0, jsx_runtime_1.jsxs)("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",
+                    }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-3", children: [(0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("kbd", { className: "small", children: "\u21B5" }), " to select"] }), (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("kbd", { className: "small", children: "\u2191\u2193" }), " to navigate"] }), (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("kbd", { className: "small", children: "esc" }), " to close"] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [allItems.length, " result", allItems.length !== 1 ? "s" : "", searchQuery.trim() && allItems.length === 0 && " • Start thread"] })] })] }) }));
 }