@allbluecn/web-app 0.4.9 → 0.4.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allbluecn/web-app",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "license": "AGPL-3.0-or-later",
   "type": "module",
   "files": [
@@ -27,9 +27,11 @@
     "@iconify/react": "^6.0.2",
     "@lobehub/icons": "^5.10.0",
     "@prisma/client": "^7.8.0",
+    "@radix-ui/react-dialog": "^1.1.23",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-visually-hidden": "^1.2.11",
     "@tanstack/ai": "^0.43.0",
     "@tanstack/ai-anthropic": "^0.16.3",
     "@tanstack/ai-gemini": "^0.20.1",
@@ -131,14 +133,14 @@
     "three": "^0.180.0",
     "tw-animate-css": "^1.4.0",
     "zod": "^4.4.3",
-    "@allbluecn/database": "0.4.9",
+    "@allbluecn/database": "0.4.10",
     "@allbluecn/kernel": "0.3.0",
-    "@allbluecn/ai-gateway": "0.4.9",
-    "@allbluecn/plugins-core": "0.4.9",
+    "@allbluecn/ai-gateway": "0.4.10",
+    "@allbluecn/plugins-core": "0.4.10",
     "@allbluecn/prototype": "0.1.1",
-    "@allbluecn/tiptap": "0.4.9",
-    "@allbluecn/shared": "0.4.9",
-    "@allbluecn/ui": "0.4.9"
+    "@allbluecn/shared": "0.4.10",
+    "@allbluecn/tiptap": "0.4.10",
+    "@allbluecn/ui": "0.4.10"
   },
   "devDependencies": {
     "@babel/parser": "^8.0.4",

package/src/components/{command-palette.tsx → command/command-palette.tsx}

@@ -21,15 +21,15 @@ import { useHotkey, useHotkeySequences } from "@tanstack/react-hotkeys"
 import type { HotkeySequence } from "@tanstack/hotkeys"
 import { useTranslation } from "react-i18next"
 import {
-  Command,
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandShortcut,
-} from "@/components/ui/command"
+  CommandMenu,
+  CommandMenuContent,
+  CommandMenuInput,
+  CommandMenuList,
+  CommandMenuEmpty,
+  CommandMenuGroup,
+  CommandMenuItem,
+  useCommandMenu,
+} from "@/components/hextaui/command-menu"
 import { CreatePRDDialog } from "@allbluecn/plugins-core/prd/components/dialog/create-prd-dialog"
 import { useCommands, type ResolvedCommand } from "@/hooks/use-commands"
 import {
@@ -54,8 +54,8 @@ import {
   ShoppingCart,
   Building2,
   Settings,
-  Users,
-  Earth,
+  SunMoon,
+  LogOut,
 } from "lucide-react"
 import type { LucideIcon } from "lucide-react"
 
@@ -76,8 +76,8 @@ const PALETTE_ICON_MAP: Record<string, LucideIcon> = {
   cart: ShoppingCart,
   building2: Building2,
   settings: Settings,
-  users: Users,
-  earth: Earth,
+  sunMoon: SunMoon,
+  logOut: LogOut,
 }
 
 export function CommandPalette() {
@@ -100,15 +100,12 @@ export function CommandPalette() {
     },
   })
 
-  const handleClose = () => setCommandPaletteOpen(false)
-
   const run = (cmd: ResolvedCommand) => {
-    handleClose()
+    setCommandPaletteOpen(false)
     execute(cmd)
   }
 
   useHotkey("Mod+K", toggleCommandPalette, { ignoreInputs: false })
-
   useHotkey("Mod+Shift+L", () => setTheme(theme === "dark" ? "light" : "dark"), {
     ignoreInputs: false,
   })
@@ -123,50 +120,101 @@ export function CommandPalette() {
       })),
   )
 
+  return (
+    <>
+      <CommandMenu
+        open={open}
+        onOpenChange={(next) => {
+          if (next) toggleCommandPalette()
+          else setCommandPaletteOpen(false)
+        }}
+      >
+        <CommandMenuContent className="w-205">
+          <CommandMenuInput
+            placeholder={t("command.searchPlaceholder")}
+          />
+          <CommandMenuList maxHeight="500px">
+            <CommandPaletteList commands={commands} onRun={run} t={t} />
+          </CommandMenuList>
+        </CommandMenuContent>
+      </CommandMenu>
+      <CreatePRDDialog open={prdDialogOpen} onOpenChange={setPrdDialogOpen} />
+    </>
+  )
+}
+
+function resolveShortcut(shortcut: string[]): string {
+  const isMac = typeof navigator !== "undefined"
+    && (navigator.platform.toUpperCase().includes("MAC")
+      || navigator.userAgent.toUpperCase().includes("MAC"))
+  return shortcut.map((k) => {
+    const upper = k.toUpperCase()
+    if (upper === "MOD") return isMac ? "CMD" : "CTRL"
+    return upper
+  }).join("+")
+}
+
+function CommandPaletteList({
+  commands,
+  onRun,
+  t,
+}: {
+  commands: ResolvedCommand[]
+  onRun: (cmd: ResolvedCommand) => void
+  t: (key: string) => string
+}) {
+  const { value } = useCommandMenu()
+
   const navCommands = commands.filter((c) => c.group === "navigation")
   const actionCommands = commands.filter((c) => c.group === "action")
 
+  const filterCommands = (cmds: ResolvedCommand[]): ResolvedCommand[] => {
+    if (!value) return cmds
+    const lower = value.toLowerCase()
+    return cmds.filter(
+      (c) =>
+        c.title.toLowerCase().includes(lower) ||
+        (c.keywords ?? []).some((k) => k.toLowerCase().includes(lower)),
+    )
+  }
+
+  const filteredNav = filterCommands(navCommands)
+  const filteredAction = filterCommands(actionCommands)
+
+  if (filteredNav.length === 0 && filteredAction.length === 0) {
+    return <CommandMenuEmpty>{t("command.empty")}</CommandMenuEmpty>
+  }
+
+  let index = 0
+
   const renderItem = (cmd: ResolvedCommand) => {
     const Icon = cmd.icon ? PALETTE_ICON_MAP[cmd.icon] : undefined
+    const idx = index++
     return (
-      <CommandItem
+      <CommandMenuItem
         key={cmd.id}
-        value={[cmd.title, ...(cmd.keywords ?? [])].join(" ")}
-        onSelect={() => run(cmd)}
+        index={idx}
+        onSelect={() => onRun(cmd)}
+        shortcut={cmd.shortcut ? resolveShortcut(cmd.shortcut) : undefined}
+        icon={Icon && <Icon className="size-4 shrink-0" />}
       >
-        {Icon && <Icon className="size-4 shrink-0" />}
         <span className="truncate">{cmd.title}</span>
-        {cmd.shortcut && (
-          <CommandShortcut>{cmd.shortcut.join(" → ")}</CommandShortcut>
-        )}
-      </CommandItem>
+      </CommandMenuItem>
     )
   }
 
   return (
     <>
-      <CommandDialog
-        open={open}
-        onOpenChange={(next) =>
-          next ? toggleCommandPalette() : handleClose()
-        }
-        title={t("command.searchPlaceholder")}
-        description={t("command.searchPlaceholder")}
-      >
-        <Command className="rounded-xl!">
-          <CommandInput placeholder={t("command.searchPlaceholder")} />
-          <CommandList className="max-h-100">
-            <CommandEmpty>{t("command.empty")}</CommandEmpty>
-            <CommandGroup heading={t("command.groupNavigation")}>
-              {navCommands.map(renderItem)}
-            </CommandGroup>
-            <CommandGroup heading={t("command.groupAction")}>
-              {actionCommands.map(renderItem)}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </CommandDialog>
-      <CreatePRDDialog open={prdDialogOpen} onOpenChange={setPrdDialogOpen} />
+      {filteredNav.length > 0 && (
+        <CommandMenuGroup heading={t("command.groupNavigation")}>
+          {filteredNav.map(renderItem)}
+        </CommandMenuGroup>
+      )}
+      {filteredAction.length > 0 && (
+        <CommandMenuGroup heading={t("command.groupAction")}>
+          {filteredAction.map(renderItem)}
+        </CommandMenuGroup>
+      )}
     </>
   )
 }

package/src/components/hextaui/command-menu.tsx

@@ -0,0 +1,460 @@
+"use client";
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
+import { Search, X, Command, Option, ArrowBigUp, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Delete, Space } from "lucide-react";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+interface CommandMenuContextType {
+  value: string;
+  setValue: (value: string) => void;
+  selectedIndex: number;
+  setSelectedIndex: (index: number) => void;
+  scrollType?: "auto" | "always" | "scroll" | "hover";
+  scrollHideDelay?: number;
+}
+
+const CommandMenuContext = React.createContext<
+  CommandMenuContextType | undefined
+>(undefined);
+
+const CommandMenuProvider: React.FC<{
+  children: React.ReactNode;
+  value: string;
+  setValue: (value: string) => void;
+  selectedIndex: number;
+  setSelectedIndex: (index: number) => void;
+  scrollType?: "auto" | "always" | "scroll" | "hover";
+  scrollHideDelay?: number;
+}> = ({
+  children,
+  value,
+  setValue,
+  selectedIndex,
+  setSelectedIndex,
+  scrollType,
+  scrollHideDelay,
+}) => (
+  <CommandMenuContext.Provider
+    value={{
+      value,
+      setValue,
+      selectedIndex,
+      setSelectedIndex,
+      scrollType,
+      scrollHideDelay,
+    }}
+  >
+    {children}
+  </CommandMenuContext.Provider>
+);
+
+const useCommandMenu = () => {
+  const context = React.useContext(CommandMenuContext);
+  if (!context)
+    throw new Error("useCommandMenu must be used within CommandMenuProvider");
+  return context;
+};
+
+const CommandMenu = DialogPrimitive.Root;
+const CommandMenuTrigger = DialogPrimitive.Trigger;
+const CommandMenuPortal = DialogPrimitive.Portal;
+const CommandMenuClose = DialogPrimitive.Close;
+
+const CommandMenuTitle = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    className={cn(
+      "font-semibold text-foreground text-lg leading-none tracking-tight",
+      className
+    )}
+    ref={ref}
+    {...props}
+  />
+));
+CommandMenuTitle.displayName = "CommandMenuTitle";
+
+const CommandMenuDescription = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    className={cn("text-muted-foreground text-sm", className)}
+    ref={ref}
+    {...props}
+  />
+));
+CommandMenuDescription.displayName = "CommandMenuDescription";
+
+const CommandMenuOverlay = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    className={cn(
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=closed]:animate-out data-[state=open]:animate-in",
+      className
+    )}
+    ref={ref}
+    {...props}
+  />
+));
+CommandMenuOverlay.displayName = "CommandMenuOverlay";
+
+const CommandMenuContent = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    showShortcut?: boolean;
+    scrollType?: "auto" | "always" | "scroll" | "hover";
+    scrollHideDelay?: number;
+  }
+>(
+  (
+    {
+      className,
+      children,
+      showShortcut = true,
+      scrollType = "hover",
+      scrollHideDelay = 600,
+      ...props
+    },
+    ref
+  ) => {
+    const [value, setValue] = React.useState("");
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+
+    React.useEffect(() => {
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter") {
+          e.preventDefault();
+        }
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, []);
+
+    return (
+      <CommandMenuPortal>
+        <CommandMenuOverlay />
+        <DialogPrimitive.Content asChild ref={ref} {...props}>
+          <div
+            className={cn(
+              "fixed top-[30%] left-1/2 z-50 w-auto max-w-none -translate-x-1/2 -translate-y-1/2",
+              "rounded-xl border border-border bg-background",
+              "overflow-hidden",
+              "motion-safe:duration-200 motion-reduce:animate-none",
+              className
+            )}
+          >
+            <CommandMenuProvider
+              scrollHideDelay={scrollHideDelay}
+              scrollType={scrollType}
+              selectedIndex={selectedIndex}
+              setSelectedIndex={setSelectedIndex}
+              setValue={setValue}
+              value={value}
+            >
+              <VisuallyHidden.Root>
+                <CommandMenuTitle>Command Menu</CommandMenuTitle>
+              </VisuallyHidden.Root>
+              {children}
+              <CommandMenuClose className="absolute top-3 right-3 rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+                <X size={14} />
+                <span className="sr-only">Close</span>
+              </CommandMenuClose>
+              {showShortcut && (
+                <div className="absolute top-3 right-12 flex h-6 items-center justify-center gap-1">
+                  <kbd
+                    data-slot="kbd"
+                    className="inline-flex items-center justify-center rounded px-1.5 py-1 font-mono text-[10px] font-medium text-muted-foreground bg-muted h-[22px] min-w-[22px] leading-none"
+                  >
+                    <Command size={10} />
+                  </kbd>
+                  <kbd
+                    data-slot="kbd"
+                    className="inline-flex items-center justify-center rounded px-1.5 py-1 font-mono text-[10px] font-medium text-muted-foreground bg-muted h-[22px] min-w-[22px] leading-none"
+                  >
+                    <span className="text-xs font-medium">K</span>
+                  </kbd>
+                  <span className="text-xs text-muted-foreground">/</span>
+                  <kbd
+                    data-slot="kbd"
+                    className="inline-flex items-center justify-center rounded px-1.5 py-1 font-mono text-[10px] font-medium text-muted-foreground bg-muted h-[22px] min-w-[22px] leading-none"
+                  >
+                    <span className="text-xs font-medium">ESC</span>
+                  </kbd>
+                </div>
+              )}
+            </CommandMenuProvider>
+          </div>
+        </DialogPrimitive.Content>
+      </CommandMenuPortal>
+    );
+  }
+);
+CommandMenuContent.displayName = "CommandMenuContent";
+
+const CommandMenuInput = React.forwardRef<
+  HTMLInputElement,
+  React.InputHTMLAttributes<HTMLInputElement> & { placeholder?: string }
+>(
+  (
+    { className, placeholder = "Type a command or search...", ...props },
+    ref
+  ) => {
+    const { value, setValue } = useCommandMenu();
+    return (
+      <div className="flex items-center gap-2 border-border border-b px-3 py-0">
+        <Search className="size-4 shrink-0 text-muted-foreground" />
+        <input
+          className={cn(
+            "h-12 w-full rounded-none border-0 bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          )}
+          onChange={(e) => setValue(e.target.value)}
+          placeholder={placeholder}
+          ref={ref}
+          value={value}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+CommandMenuInput.displayName = "CommandMenuInput";
+
+const CommandMenuList = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { maxHeight?: string }
+>(({ className, children, maxHeight = "300px", ...props }, ref) => {
+  const {
+    selectedIndex,
+    setSelectedIndex,
+    scrollType = "hover",
+    scrollHideDelay = 600,
+  } = useCommandMenu();
+
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const items = document.querySelectorAll("[data-command-item]");
+      const maxIndex = items.length - 1;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        const newIndex = Math.min(selectedIndex + 1, maxIndex);
+        setSelectedIndex(newIndex);
+        (items[newIndex] as HTMLElement | undefined)?.scrollIntoView({
+          block: "nearest",
+          behavior: "smooth",
+        });
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        const newIndex = Math.max(selectedIndex - 1, 0);
+        setSelectedIndex(newIndex);
+        (items[newIndex] as HTMLElement | undefined)?.scrollIntoView({
+          block: "nearest",
+          behavior: "smooth",
+        });
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [selectedIndex, setSelectedIndex]);
+
+  return (
+    <div className="p-1" ref={ref} {...props}>
+      <ScrollArea
+        className={cn("w-full", className)}
+        scrollHideDelay={scrollHideDelay}
+        style={{ height: maxHeight }}
+        type={scrollType}
+      >
+        <div className="flex flex-col gap-0.5 p-0.5">{children}</div>
+      </ScrollArea>
+    </div>
+  );
+});
+CommandMenuList.displayName = "CommandMenuList";
+
+const CommandMenuGroup = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { heading?: string }
+>(({ className, children, heading, ...props }, ref) => (
+  <div className={cn("", className)} ref={ref} {...props}>
+    {heading && (
+      <div className="px-2 py-1.5 font-medium text-muted-foreground text-xs uppercase tracking-wider">
+        {heading}
+      </div>
+    )}
+    {children}
+  </div>
+));
+CommandMenuGroup.displayName = "CommandMenuGroup";
+
+const CommandMenuItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    onSelect?: () => void;
+    disabled?: boolean;
+    shortcut?: string;
+    icon?: React.ReactNode;
+    index?: number;
+  }
+>(
+  (
+    {
+      className,
+      children,
+      onSelect,
+      disabled = false,
+      shortcut,
+      icon,
+      index = 0,
+      ...props
+    },
+    ref
+  ) => {
+    const { selectedIndex, setSelectedIndex } = useCommandMenu();
+    const isSelected = selectedIndex === index;
+
+    const handleSelect = React.useCallback(() => {
+      if (!disabled && onSelect) onSelect();
+    }, [disabled, onSelect]);
+
+    React.useEffect(() => {
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === "Enter" && isSelected) {
+          e.preventDefault();
+          handleSelect();
+        }
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isSelected, handleSelect]);
+
+    return (
+      <div
+        className={cn(
+          "relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors",
+          "hover:bg-accent hover:text-accent-foreground",
+          isSelected && "bg-accent text-accent-foreground",
+          disabled && "pointer-events-none opacity-50",
+          className
+        )}
+        data-command-item
+        onClick={handleSelect}
+        onMouseEnter={() => setSelectedIndex(index)}
+        ref={ref}
+        {...props}
+      >
+        {icon && (
+          <div className="flex size-4 items-center justify-center">{icon}</div>
+        )}
+        <div className="flex-1">{children}</div>
+        {shortcut && (
+          <div className="ml-auto flex items-center gap-1">
+            {shortcut.split("+").map((key, i) => (
+              <React.Fragment key={`${key}-${i}`}>
+                {i > 0 && (
+                  <span className="text-muted-foreground text-xs">+</span>
+                )}
+                <kbd
+                  data-slot="kbd"
+                  className={cn(
+                    "inline-flex items-center justify-center rounded px-1.5 py-1 font-mono text-[10px] font-medium text-muted-foreground bg-muted h-[22px] min-w-[22px] leading-none"
+                  )}
+                >
+                  {key === "CMD" || key === "⌘" ? (
+                    <Command size={10} />
+                  ) : key === "OPTION" || key === "ALT" ? (
+                    <Option size={14} />
+                  ) : key === "SHIFT" ? (
+                    <ArrowBigUp size={13} />
+                  ) : key === "CTRL" ? (
+                    <span className="text-xs font-medium">CTRL</span>
+                  ) : key === "ESC" || key === "ESCAPE" ? (
+                    <span className="text-xs font-medium">ESC</span>
+                  ) : key === "DELETE" || key === "BACKSPACE" ? (
+                    <Delete size={14} />
+                  ) : key === "ARROWUP" ? (
+                    <ArrowUp size={14} />
+                  ) : key === "ARROWDOWN" ? (
+                    <ArrowDown size={14} />
+                  ) : key === "ARROWLEFT" ? (
+                    <ArrowLeft size={14} />
+                  ) : key === "ARROWRIGHT" ? (
+                    <ArrowRight size={14} />
+                  ) : key === "SPACE" ? (
+                    <Space size={14} />
+                  ) : (
+                    <span className="text-xs font-medium">{key}</span>
+                  )}
+                </kbd>
+              </React.Fragment>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+CommandMenuItem.displayName = "CommandMenuItem";
+
+const CommandMenuSeparator = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    ref={ref}
+    {...props}
+  />
+));
+CommandMenuSeparator.displayName = "CommandMenuSeparator";
+
+const CommandMenuEmpty = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, children = "No results found.", ...props }, ref) => (
+  <div
+    className={cn("py-6 text-center text-muted-foreground text-sm", className)}
+    ref={ref}
+    {...props}
+  >
+    {children}
+  </div>
+));
+CommandMenuEmpty.displayName = "CommandMenuEmpty";
+
+export const useCommandMenuShortcut = (callback: () => void) => {
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        callback();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [callback]);
+};
+
+export {
+  CommandMenu,
+  CommandMenuTrigger,
+  CommandMenuContent,
+  CommandMenuTitle,
+  CommandMenuDescription,
+  CommandMenuInput,
+  CommandMenuList,
+  CommandMenuEmpty,
+  CommandMenuGroup,
+  CommandMenuItem,
+  CommandMenuSeparator,
+  CommandMenuClose,
+  CommandMenuProvider,
+  useCommandMenu,
+};

package/src/components/layout/sidebar-03/sidebar-search-trigger.tsx

@@ -16,11 +16,16 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useTranslation } from "react-i18next"
-import { Search } from "lucide-react"
+import { Search, Command } from "lucide-react"
 import { useSidebar } from "@/components/ui/sidebar"
 import { cn } from "@/lib/utils"
 import { setCommandPaletteOpen } from "@/lib/commands/command-palette-state"
 
+const isMac =
+  typeof navigator !== "undefined" &&
+  (navigator.platform.toUpperCase().includes("MAC") ||
+    navigator.userAgent.toUpperCase().includes("MAC"))
+
 export function SidebarSearchTrigger() {
   const { t } = useTranslation("common")
   const { state } = useSidebar()
@@ -50,14 +55,23 @@ export function SidebarSearchTrigger() {
       )}
     >
       <Search className="size-4 shrink-0" />
-      <span className="flex-1 truncate text-left">
+      <span className="flex-1 truncate text-left text-xs">
         {t("command.searchPlaceholder")}
       </span>
-      <span className="inline-flex items-center gap-0.5">
-        <kbd className="rounded border border-border bg-muted/60 px-1 py-0.5 text-[10px] font-medium text-muted-foreground">
-          ⌘K
-        </kbd>
-      </span>
+        <span className="inline-flex items-center gap-1 rounded border border-border bg-muted/60 px-1.5 py-0.5">
+          <kbd
+            data-slot="kbd"
+            className="inline-flex items-center justify-center"
+          >
+            {isMac ? <Command size={10} /> : <span className="text-[10px] font-medium text-muted-foreground">Ctrl</span>}
+          </kbd>
+          <kbd
+            data-slot="kbd"
+            className="inline-flex items-center justify-center"
+          >
+            <span className="text-[11px] font-medium text-muted-foreground">K</span>
+          </kbd>
+        </span>
     </button>
   )
 }

package/src/lib/commands/registry.ts

@@ -38,8 +38,8 @@ export const COMMAND_REGISTRY: CommandDefinition[] = [
   { id: "create-prd", titleKey: "command.createPrd", icon: "file", group: "action", action: { kind: "callback", id: "create-prd" }, keywords: ["新建", "创建", "PRD", "xj"], shortcut: ["N", "P"] },
   { id: "create-conversation", titleKey: "command.createConversation", icon: "message", group: "action", action: { kind: "callback", id: "create-conversation" }, keywords: ["新建对话", "新对话", "xjdh"], shortcut: ["N", "C"] },
   { id: "create-story", titleKey: "command.createStory", icon: "clipboardList", group: "action", action: { kind: "callback", id: "create-story" }, keywords: ["新建需求", "xjxq"], shortcut: ["N", "S"] },
-  { id: "toggle-theme", titleKey: "command.toggleTheme", icon: "earth", group: "action", action: { kind: "callback", id: "toggle-theme" }, keywords: ["切换主题", "暗黑", "主题", "qhzt"] },
-  { id: "sign-out", titleKey: "command.signOut", icon: "users", group: "action", action: { kind: "callback", id: "sign-out" }, keywords: ["退出登录", "登出", "tcdl"] },
+  { id: "toggle-theme", titleKey: "command.toggleTheme", icon: "sunMoon", group: "action", action: { kind: "callback", id: "toggle-theme" }, keywords: ["切换主题", "暗黑", "主题", "qhzt"], shortcut: ["Mod", "Shift", "L"] },
+  { id: "sign-out", titleKey: "command.signOut", icon: "logOut", group: "action", action: { kind: "callback", id: "sign-out" }, keywords: ["退出登录", "登出", "tcdl"] },
 ] as const
 
 export function getSequencePairs(registry: CommandDefinition[]): string[] {

package/src/routes/_nav/route.lazy.tsx

@@ -20,7 +20,7 @@ import Sidebar03 from '@/components/layout/sidebar-03'
 import { GlobalChatPanel } from '@/components/ai/global-chat-panel'
 import { TimezoneBootstrap } from '@/components/shared/timezone-bootstrap'
 import { SubscriptionProvider } from '@/components/billing/subscription-provider'
-import { CommandPalette } from '@/components/command-palette'
+import { CommandPalette } from '@/components/command/command-palette'
 import type { Session } from '@/lib/auth/auth-client'
 
 export const Route = createLazyFileRoute('/_nav')({