fix: Add initial command palette

src/ui/desktop/DesktopApp.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useRef } from "react";
 import { LeftSidebar } from "@/ui/desktop/navigation/LeftSidebar.tsx";
 import { Dashboard } from "@/ui/desktop/apps/dashboard/Dashboard.tsx";
 import { AppView } from "@/ui/desktop/navigation/AppView.tsx";
@@ -11,6 +11,7 @@ import { TopNavbar } from "@/ui/desktop/navigation/TopNavbar.tsx";
 import { AdminSettings } from "@/ui/desktop/admin/AdminSettings.tsx";
 import { UserProfile } from "@/ui/desktop/user/UserProfile.tsx";
 import { Toaster } from "@/components/ui/sonner.tsx";
+import { CommandPalette } from "@/ui/desktop/apps/command-palette/CommandPalette.tsx";
 import { getUserInfo } from "@/ui/main-axios.ts";
 
 function AppContent() {
@@ -23,6 +24,29 @@ function AppContent() {
     return saved !== null ? JSON.parse(saved) : true;
   });
   const { currentTab, tabs } = useTabs();
+  const [isCommandPaletteOpen, setIsCommandPaletteOpen] = useState(false);
+
+  const lastShiftPressTime = useRef(0);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.code === "ShiftLeft") {
+        const now = Date.now();
+        if (now - lastShiftPressTime.current < 300) {
+          setIsCommandPaletteOpen((isOpen) => !isOpen);
+        }
+        lastShiftPressTime.current = now;
+      }
+      if (event.key === "Escape") {
+        setIsCommandPaletteOpen(false);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
 
   useEffect(() => {
     const checkAuth = () => {
@@ -93,6 +117,10 @@ function AppContent() {
 
   return (
     <div>
+      <CommandPalette
+        isOpen={isCommandPaletteOpen}
+        setIsOpen={setIsCommandPaletteOpen}
+      />
       {!isAuthenticated && !authLoading && (
         <div className="fixed inset-0 flex items-center justify-center z-[10000]">
           <Dashboard

src/ui/desktop/apps/command-palette/CommandPalette.tsx

@@ -0,0 +1,88 @@
+import {
+  Command,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+  CommandGroup,
+  CommandSeparator,
+} from "@/components/ui/command.tsx";
+import React, { useEffect, useRef } from "react";
+import { cn } from "@/lib/utils";
+import {
+  Calculator,
+  Calendar,
+  CreditCard,
+  Settings,
+  Smile,
+  User,
+} from "lucide-react";
+import { CommandEmpty } from "cmdk";
+export function CommandPalette({
+  isOpen,
+  setIsOpen,
+}: {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+}) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      inputRef.current?.focus();
+    }
+  }, [isOpen]);
+  return (
+    <div
+      className={cn(
+        "fixed inset-0 z-50 flex items-center justify-center bg-black/20 backdrop-blur-sm",
+        !isOpen && "hidden",
+      )}
+      onClick={() => setIsOpen(false)}
+    >
+      <Command
+        className="w-3/4 max-w-2xl max-h-[60vh] rounded-lg border-2 border-dark-border shadow-md"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <CommandInput
+          ref={inputRef}
+          placeholder="Search for hosts or quick actions..."
+        />
+        <CommandList>
+          <CommandGroup heading="Suggestions">
+            <CommandItem>
+              <Calendar />
+              <span>Calendar</span>
+            </CommandItem>
+            <CommandItem>
+              <Smile />
+              <span>Search Emoji</span>
+            </CommandItem>
+            <CommandItem disabled>
+              <Calculator />
+              <span>Calculator</span>
+            </CommandItem>
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading="Settings">
+            <CommandItem>
+              <User />
+              <span>Profile</span>
+              <CommandShortcut>⌘P</CommandShortcut>
+            </CommandItem>
+            <CommandItem>
+              <CreditCard />
+              <span>Billing</span>
+              <CommandShortcut>⌘B</CommandShortcut>
+            </CommandItem>
+            <CommandItem>
+              <Settings />
+              <span>Settings</span>
+              <CommandShortcut>⌘S</CommandShortcut>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    </div>
+  );
+}