diff --git a/dashboard/src/features/search-command/command-box.tsx b/dashboard/src/features/search-command/command-box.tsx
@@ -1,29 +1,19 @@
-import {
- UsersIcon,
- ServerIcon,
- BoxIcon,
- ServerCogIcon,
- SettingsIcon,
-} from "lucide-react";
import { useState, useEffect } from "react";
-import { useTranslation } from "react-i18next";
import {
CommandDialog,
CommandEmpty,
- CommandGroup,
CommandInput,
- CommandItem,
CommandList,
- CommandSeparator,
+ ScrollArea,
} from "@marzneshin/components";
-import { useNavigate } from "@tanstack/react-router";
import { SearchBox } from "./search-box";
import { useAuth } from "@marzneshin/features/auth";
+import { CommandItems } from "./command-items";
+import { commandItems } from "./commands";
export function CommandBox() {
const [open, setOpen] = useState(false);
- const { t } = useTranslation();
- const navigate = useNavigate();
+ const { isSudo } = useAuth();
useEffect(() => {
const down = (e: KeyboardEvent) => {
@@ -36,8 +26,6 @@ export function CommandBox() {
return () => document.removeEventListener("keydown", down);
}, []);
- const { isSudo } = useAuth();
-
return (
<>
<SearchBox onClick={() => setOpen(true)} />
@@ -46,68 +34,15 @@ export function CommandBox() {
placeholder="Type a command or search..."
className="focus:ring-0 ring-0 m-1 border-none"
/>
- <CommandList>
- <CommandEmpty>No results found.</CommandEmpty>
- <CommandGroup heading="Pages">
- <CommandItem
- onSelect={() => {
- navigate({ to: "/users" });
- setOpen(false);
- }}
- >
- <UsersIcon className="mr-2 size-4" />
- <span>{t("users")}</span>
- </CommandItem>
- {isSudo() && (
- <>
- <CommandItem
- onSelect={() => {
- navigate({ to: "/services" });
- setOpen(false);
- }}
- >
- <ServerIcon className="mr-2 size-4" />
- <span>{t("services")}</span>
- </CommandItem>
- <CommandItem
- onSelect={() => {
- navigate({ to: "/nodes" });
- setOpen(false);
- }}
- >
- <BoxIcon className="mr-2 h-4 w-4" />
- <span>{t("nodes")}</span>
- </CommandItem>
- <CommandItem
- onSelect={() => {
- navigate({ to: "/hosts" });
- setOpen(false);
- }}
- >
- <ServerCogIcon className="mr-2 h-4 w-4" />
- <span>{t("hosts")}</span>
- </CommandItem>
- </>
- )}
- </CommandGroup>
- {isSudo() && (
- <>
- <CommandSeparator />
- <CommandGroup heading="Settings">
- <CommandItem
- onSelect={() => {
- navigate({ to: "/settings" });
- setOpen(false);
- }}
- >
- <SettingsIcon className="mr-2 h-4 w-4" />
- <span>{t("settings")}</span>
- </CommandItem>
- </CommandGroup>
- </>
- )}
- </CommandList>
+ <ScrollArea className="max-h-100">
+ <CommandList>
+ <CommandEmpty>No results found.</CommandEmpty>
+ <CommandItems items={commandItems} isSudo={isSudo} setOpen={setOpen} />
+ </CommandList>
+ </ScrollArea>
</CommandDialog>
</>
);
}
+
+
diff --git a/dashboard/src/features/search-command/command-items.tsx b/dashboard/src/features/search-command/command-items.tsx
@@ -0,0 +1,47 @@
+// CommandItems.tsx
+import React, { FC } from "react";
+import {
+ CommandGroup,
+ CommandItem,
+ CommandSeparator,
+} from "@marzneshin/components";
+import { useNavigate } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+import { CommandGroupConfig, CommandItemConfig } from "./commands";
+
+interface CommandItemsProps {
+ items: CommandGroupConfig[];
+ isSudo: () => boolean;
+ setOpen: (open: boolean) => void;
+}
+
+export const CommandItems: FC<CommandItemsProps> = ({ items, isSudo, setOpen }) => {
+ const navigate = useNavigate();
+ const { t } = useTranslation();
+
+ return (
+ <>
+ {items.map((group: CommandGroupConfig, groupIndex: number) => (
+ <React.Fragment key={group.group}>
+ <CommandGroup heading={group.group}>
+ {group.items.map((item: CommandItemConfig) => (
+ (!item.sudo || isSudo()) && (
+ <CommandItem
+ key={item.label}
+ onSelect={() => {
+ navigate({ to: item.path });
+ setOpen(false);
+ }}
+ >
+ <item.icon className="mr-2 size-4" />
+ <span>{t(item.label)}</span>
+ </CommandItem>
+ )
+ ))}
+ </CommandGroup>
+ {groupIndex < items.length - 1 && <CommandSeparator />}
+ </React.Fragment>
+ ))}
+ </>
+ );
+};
diff --git a/dashboard/src/features/search-command/commands.ts b/dashboard/src/features/search-command/commands.ts
@@ -0,0 +1,99 @@
+import {
+ UsersIcon,
+ ServerIcon,
+ BoxIcon,
+ ServerCogIcon,
+ SettingsIcon,
+ LucideIcon,
+ ShieldIcon,
+} from "lucide-react";
+
+export interface CommandItemConfig {
+ icon: LucideIcon;
+ label: string;
+ path: string;
+ sudo: boolean;
+}
+
+export interface CommandGroupConfig {
+ group: string;
+ items: CommandItemConfig[];
+}
+
+export const commandItems: CommandGroupConfig[] = [
+ {
+ group: "Pages",
+ items: [
+ {
+ icon: UsersIcon,
+ label: "users",
+ path: "/users",
+ sudo: false,
+ },
+ {
+ icon: ServerIcon,
+ label: "services",
+ path: "/services",
+ sudo: true,
+ },
+ {
+ icon: BoxIcon,
+ label: "nodes",
+ path: "/nodes",
+ sudo: true,
+ },
+ {
+ icon: ServerCogIcon,
+ label: "hosts",
+ path: "/hosts",
+ sudo: true,
+ },
+ {
+ icon: ShieldIcon,
+ label: "admins",
+ path: "/admins",
+ sudo: true,
+ },
+ ],
+ },
+ {
+ group: "Actions",
+ items: [
+ {
+ icon: UsersIcon,
+ label: "page.users.dialogs.creation.title",
+ path: "/users/create",
+ sudo: false,
+ },
+ {
+ icon: ServerIcon,
+ label: "page.services.dialogs.creation.title",
+ path: "/services/create",
+ sudo: true,
+ },
+ {
+ icon: BoxIcon,
+ label: "page.nodes.dialogs.creation.title",
+ path: "/nodes/create",
+ sudo: true,
+ },
+ {
+ icon: ShieldIcon,
+ label: "page.admins.dialogs.creation.title",
+ path: "/admins/create",
+ sudo: true,
+ },
+ ],
+ },
+ {
+ group: "Settings",
+ items: [
+ {
+ icon: SettingsIcon,
+ label: "settings",
+ path: "/settings",
+ sudo: true,
+ },
+ ],
+ },
+];