Import source: src/components/shell/command-palette
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
@@ -0,0 +1,168 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useEffect, useMemo, useState } from "react";
|
||||||
|
import { ArrowRight, Search, SunMoon, Zap } from "lucide-react";
|
||||||
|
import type { LucideIcon } from "lucide-react";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { routeItems } from "@/lib/routes";
|
||||||
|
import { useUiStore } from "@/stores/ui-store";
|
||||||
|
|
||||||
|
const commandActions = [
|
||||||
|
{ label: "Create website", path: "/websites/new", keywords: ["website", "new"] },
|
||||||
|
{ label: "Add domain", path: "/domains/new", keywords: ["domain", "dns"] },
|
||||||
|
{ label: "Create database", path: "/databases/new", keywords: ["mysql", "postgres"] },
|
||||||
|
{ label: "Create email", path: "/email/accounts", keywords: ["mailbox", "mail"] },
|
||||||
|
{ label: "Open terminal", path: "/advanced/terminal", keywords: ["shell", "ssh"] },
|
||||||
|
{ label: "Run backup", path: "/backups/new", keywords: ["snapshot", "restore"] },
|
||||||
|
{ label: "View logs", path: "/advanced/logs", keywords: ["error", "access"] },
|
||||||
|
{ label: "Open settings", path: "/settings", keywords: ["preferences"] },
|
||||||
|
{ label: "Switch server", path: "/servers", keywords: ["server"] },
|
||||||
|
{ label: "Switch account", path: "/users", keywords: ["account"] },
|
||||||
|
];
|
||||||
|
|
||||||
|
type CommandResult = {
|
||||||
|
label: string;
|
||||||
|
description: string;
|
||||||
|
path: string;
|
||||||
|
category: string;
|
||||||
|
icon?: LucideIcon;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function CommandPalette() {
|
||||||
|
const open = useUiStore((state) => state.commandOpen);
|
||||||
|
const setOpen = useUiStore((state) => state.setCommandOpen);
|
||||||
|
const setTheme = useUiStore((state) => state.setTheme);
|
||||||
|
const [query, setQuery] = useState("");
|
||||||
|
|
||||||
|
const results = useMemo<CommandResult[]>(() => {
|
||||||
|
const term = query.toLowerCase();
|
||||||
|
const pages = routeItems
|
||||||
|
.filter((item) =>
|
||||||
|
[item.label, item.description, item.category, ...item.keywords].some((value) =>
|
||||||
|
value.toLowerCase().includes(term),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
.slice(0, 12)
|
||||||
|
.map((item) => ({
|
||||||
|
label: item.label,
|
||||||
|
description: item.description,
|
||||||
|
path: item.path,
|
||||||
|
category: item.category,
|
||||||
|
icon: item.icon,
|
||||||
|
}));
|
||||||
|
const actions = commandActions
|
||||||
|
.filter((item) =>
|
||||||
|
[item.label, ...item.keywords].some((value) => value.toLowerCase().includes(term)),
|
||||||
|
)
|
||||||
|
.map((item) => ({ ...item, description: "Command", category: "Actions" }));
|
||||||
|
return query
|
||||||
|
? [...actions, ...pages]
|
||||||
|
: [
|
||||||
|
...commandActions
|
||||||
|
.slice(0, 5)
|
||||||
|
.map((item) => ({ ...item, description: "Command", category: "Actions" })),
|
||||||
|
...pages.slice(0, 7),
|
||||||
|
];
|
||||||
|
}, [query]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
|
<DialogContent className="max-w-3xl">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Command palette</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Search tools, pages, websites, domains, users, servers, settings, and actions.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="p-4">
|
||||||
|
<div className="relative">
|
||||||
|
<Search className="pointer-events-none absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||||
|
<Input
|
||||||
|
autoFocus
|
||||||
|
value={query}
|
||||||
|
onChange={(event) => setQuery(event.target.value)}
|
||||||
|
className="h-10 pl-9 text-base"
|
||||||
|
placeholder="Type a command or resource name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 max-h-[52vh] overflow-y-auto rounded-lg border border-border/60">
|
||||||
|
<button
|
||||||
|
className="group flex w-full items-center gap-3 border-b border-border/50 px-3 py-2.5 text-left text-sm transition-colors hover:bg-primary/[0.07]"
|
||||||
|
onClick={() => {
|
||||||
|
setTheme("system");
|
||||||
|
setOpen(false);
|
||||||
|
}}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted/80 text-muted-foreground transition-colors group-hover:bg-primary/15 group-hover:text-primary">
|
||||||
|
<SunMoon className="h-4 w-4" />
|
||||||
|
</span>
|
||||||
|
<span className="flex-1">Toggle theme</span>
|
||||||
|
<span className="text-xs text-muted-foreground">Theme</span>
|
||||||
|
</button>
|
||||||
|
{results.map((result) => {
|
||||||
|
const Icon = result.icon ?? Zap;
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={`${result.category}-${result.path}-${result.label}`}
|
||||||
|
href={result.path}
|
||||||
|
onClick={() => setOpen(false)}
|
||||||
|
className="group flex items-center gap-3 border-b border-border/50 px-3 py-2.5 text-sm transition-colors last:border-b-0 hover:bg-primary/[0.07]"
|
||||||
|
>
|
||||||
|
<span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted/80 text-muted-foreground transition-colors group-hover:bg-primary/15 group-hover:text-primary">
|
||||||
|
<Icon className="h-4 w-4" />
|
||||||
|
</span>
|
||||||
|
<span className="min-w-0 flex-1">
|
||||||
|
<span className="block truncate font-medium">{result.label}</span>
|
||||||
|
<span className="block truncate text-xs text-muted-foreground">
|
||||||
|
{result.description}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<span className="hidden text-xs text-muted-foreground sm:inline">
|
||||||
|
{result.category}
|
||||||
|
</span>
|
||||||
|
<ArrowRight className="h-3.5 w-3.5 -translate-x-1 text-muted-foreground opacity-0 transition-all group-hover:translate-x-0 group-hover:opacity-100" />
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{!results.length ? (
|
||||||
|
<div className="px-3 py-8 text-center text-sm text-muted-foreground">
|
||||||
|
No matching command.
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
<div className="mt-3 flex items-center justify-between text-xs text-muted-foreground">
|
||||||
|
<span>Press Enter after selecting a row</span>
|
||||||
|
<span className="inline-flex items-center gap-1">
|
||||||
|
<kbd>Ctrl</kbd>
|
||||||
|
<kbd>K</kbd>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CommandPaletteHotkey() {
|
||||||
|
const setOpen = useUiStore((state) => state.setCommandOpen);
|
||||||
|
useEffect(() => {
|
||||||
|
function onKeyDown(event: KeyboardEvent) {
|
||||||
|
if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "k") {
|
||||||
|
event.preventDefault();
|
||||||
|
setOpen(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
window.addEventListener("keydown", onKeyDown);
|
||||||
|
return () => window.removeEventListener("keydown", onKeyDown);
|
||||||
|
}, [setOpen]);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user