@peers-app/peers-ui 0.27.3 → 0.27.5

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

@@ -1,564 +0,0 @@
-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,
-  executeCommand,
-  isCommandPaletteOpen,
-  searchCommands,
-} from "./command-palette";
-
-interface AppSearchItem {
-  packageId: string;
-  packageName: string;
-  navItem: IAppNav;
-  path: string;
-  name: string;
-  displayName: string;
-  iconClassName: string;
-}
-
-export function CommandPaletteOverlay() {
-  const [isOpen] = useObservable(isCommandPaletteOpen);
-  const [_persistedQuery] = useObservable(commandSearchQuery);
-  const [_colorMode] = useObservable(colorMode);
-  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 debounceTimeoutRef = useRef<NodeJS.Timeout>();
-
-  // Sync local query with persisted query when palette opens
-  useEffect(() => {
-    if (isOpen) {
-      setLocalQuery(_persistedQuery || "");
-    } else {
-      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 () => {
-      if (debounceTimeoutRef.current) {
-        clearTimeout(debounceTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  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) => {
-        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();
-          } 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: string): AppSearchItem[] => {
-    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),
-    );
-  };
-
-  const filteredApps = searchApps(searchQuery);
-
-  // Function to create a new thread from search query
-  const createNewThreadFromQuery = useCallback(async (query: string) => {
-    try {
-      const currentUser = await getMe();
-      const threadMessage = await Messages().insert({
-        messageId: newid(),
-        userId: currentUser.userId,
-        channelId: currentUser.userId,
-        message: query.trim(),
-        createdAt: new Date(),
-      });
-      await openThreadInTab(threadMessage);
-    } catch (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;
-  }> = [];
-
-  // Add apps first
-  filteredApps.forEach((app) => {
-    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[]>,
-    ),
-  ).flatMap(([, commands]) => commands);
-
-  visualOrderCommands.forEach((cmd) => {
-    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);
-  }, []);
-
-  // Keyboard navigation
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      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") {
-        e.preventDefault();
-        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()) {
-          closeCommandPalette();
-          createNewThreadFromQuery(searchQuery);
-        } else {
-          const selectedItem = allItems[selectedIndex];
-          if (selectedItem) {
-            if (selectedItem.type === "app" && selectedItem.app) {
-              closeCommandPalette();
-              goToTabPath(selectedItem.app.path);
-            } else if (selectedItem.type === "command" && selectedItem.command) {
-              executeCommand(selectedItem.command.id);
-            }
-          } else if (searchQuery.trim()) {
-            // Fallback: Create a new thread with the search query as the message
-            // This happens when no item is selected (selectedIndex is out of bounds or -1)
-            closeCommandPalette();
-            createNewThreadFromQuery(searchQuery);
-          }
-        }
-      }
-    };
-
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [isOpen, selectedIndex, createNewThreadFromQuery, searchQuery]);
-
-  if (!isOpen) return null;
-
-  const isDark = _colorMode === "dark";
-
-  return (
-    <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",
-      }}
-      onClick={(e) => {
-        if (e.target === e.currentTarget) {
-          closeCommandPalette();
-        }
-      }}
-    >
-      <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",
-        }}
-      >
-        {/* Search Input */}
-        <div
-          className="p-3 border-bottom"
-          style={{
-            borderBottomColor: isDark ? "#495057" : "#dee2e6",
-          }}
-        >
-          <div className="position-relative">
-            <i
-              className="bi-search position-absolute"
-              style={{
-                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" : ""}`}
-              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;
-                }
-                commandSearchQuery(localQuery);
-              }}
-              style={{
-                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",
-          }}
-        >
-          {allItems.length === 0 && !searchQuery.trim() ? (
-            <div className="p-4 text-center text-muted">
-              <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>
-              )}
-              {/* Apps Section */}
-              {filteredApps.length > 0 && (
-                <div>
-                  <div
-                    className="px-3 py-1 small text-muted fw-bold text-uppercase"
-                    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 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"
-                            : ""
-                        }`}
-                        style={{
-                          cursor: "pointer",
-                          transition: "background-color 0.1s ease",
-                        }}
-                        onClick={() => {
-                          closeCommandPalette();
-                          goToTabPath(app.path);
-                        }}
-                        onMouseEnter={() => setSelectedIndex(globalIndex)}
-                      >
-                        <div className="d-flex align-items-center">
-                          <i
-                            className={`${app.iconClassName} me-3`}
-                            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>
-                          </div>
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-              )}
-
-              {/* 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>
-                              )}
-                            </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>
-                ))}
-
-              {/* New Thread Indicator - Show when there's a search query */}
-              {searchQuery.trim() && (
-                <div>
-                  <div
-                    className="px-3 py-1 small text-muted fw-bold text-uppercase"
-                    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"
-                        : ""
-                    }`}
-                    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={() => {
-                      closeCommandPalette();
-                      createNewThreadFromQuery(searchQuery);
-                    }}
-                    onMouseEnter={() => {
-                      // Set selected index beyond the list to indicate this item is selected
-                      setSelectedIndex(allItems.length);
-                    }}
-                  >
-                    <div className="d-flex align-items-center">
-                      <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",
-                        }}
-                      />
-                      <div>
-                        <div className="fw-medium">
-                          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" }}>
-                          Press Enter to create
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-
-        {/* Footer */}
-        <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",
-          }}
-        >
-          <div className="d-flex align-items-center gap-3">
-            <span>
-              <kbd className="small">↵</kbd> to select
-            </span>
-            <span>
-              <kbd className="small">↑↓</kbd> to navigate
-            </span>
-            <span>
-              <kbd className="small">esc</kbd> to close
-            </span>
-          </div>
-          <div>
-            {allItems.length} result{allItems.length !== 1 ? "s" : ""}
-            {searchQuery.trim() && allItems.length === 0 && " • Start thread"}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}