v2.3.0

src/ui/shell/CommandPalette.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import { Kbd } from "@/components/kbd";
 import {
   Command,
-  CommandInput,
   CommandItem,
   CommandList,
   CommandGroup,
@@ -14,43 +14,26 @@ import {
   Settings,
   Terminal,
   FolderOpen,
+  FolderSearch,
   Box,
   Globe,
   Plus,
   MessagesSquare,
   LifeBuoy,
-  DollarSign,
   Search,
   Activity,
   Network,
-  MoreHorizontal,
-  Edit3,
   User,
   KeyRound,
   LayoutDashboard,
+  Monitor,
+  MousePointerClick,
+  Clock,
+  Folder,
+  Pencil,
 } from "lucide-react";
-import { Button } from "@/components/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/dropdown-menu";
-
-type Host = {
-  name: string;
-  user: string;
-  address: string;
-  online: boolean;
-  cpu: number;
-  ram: number;
-  lastAccess: string;
-  tags?: string[];
-  enableTerminal?: boolean;
-  enableFileManager?: boolean;
-  enableDocker?: boolean;
-  enableTunnel?: boolean;
-};
+import { getRecentActivity, type RecentActivityItem } from "@/main-axios";
+import type { Host } from "@/types/ui-types";
 
 interface CommandPaletteProps {
   isOpen: boolean;
@@ -59,35 +42,71 @@ interface CommandPaletteProps {
   onOpenTab: (type: any, label?: string, pendingEvent?: string) => void;
 }
 
-const ACTION_ICONS: Record<string, React.ReactNode> = {
-  Terminal: <Terminal className="size-3" />,
-  Files: <FolderOpen className="size-3" />,
-  Docker: <Box className="size-3" />,
-  Stats: <Activity className="size-3" />,
-  Tunnels: <Network className="size-3" />,
+const ACTIVITY_ICONS: Record<string, React.ReactNode> = {
+  terminal: <Terminal className="size-3.5" />,
+  file_manager: <FolderOpen className="size-3.5" />,
+  server_stats: <Activity className="size-3.5" />,
+  tunnel: <Network className="size-3.5" />,
+  docker: <Box className="size-3.5" />,
+  telnet: <MessagesSquare className="size-3.5" />,
+  vnc: <MousePointerClick className="size-3.5" />,
+  rdp: <Monitor className="size-3.5" />,
 };
 
-const ACTION_TAB_TYPE: Record<string, string> = {
-  Terminal: "terminal",
-  Files: "files",
-  Docker: "docker",
-  Stats: "stats",
-  Tunnels: "tunnel",
+const ACTIVITY_TAB_TYPE: Record<string, string> = {
+  terminal: "terminal",
+  file_manager: "files",
+  server_stats: "stats",
+  tunnel: "tunnel",
+  docker: "docker",
+  telnet: "telnet",
+  vnc: "vnc",
+  rdp: "rdp",
 };
 
+function getSshActions(host: Host) {
+  const metricsEnabled = host.statsConfig?.metricsEnabled !== false;
+  return [
+    host.enableTerminal !== false && {
+      type: "terminal",
+      icon: Terminal,
+      label: "Terminal",
+    },
+    host.enableFileManager && {
+      type: "files",
+      icon: FolderSearch,
+      label: "Files",
+    },
+    host.enableDocker && { type: "docker", icon: Box, label: "Docker" },
+    host.enableTunnel && { type: "tunnel", icon: Network, label: "Tunnels" },
+    metricsEnabled && { type: "stats", icon: Activity, label: "Stats" },
+  ].filter(Boolean) as {
+    type: string;
+    icon: React.ElementType;
+    label: string;
+  }[];
+}
+
 export function CommandPalette({
   isOpen,
   setIsOpen,
   hosts,
   onOpenTab,
 }: CommandPaletteProps) {
+  const { t } = useTranslation();
   const inputRef = useRef<HTMLInputElement>(null);
   const [search, setSearch] = useState("");
+  const [recentActivity, setRecentActivity] = useState<RecentActivityItem[]>(
+    [],
+  );
 
   useEffect(() => {
     if (isOpen) {
       setTimeout(() => inputRef.current?.focus(), 50);
       setSearch("");
+      getRecentActivity(5)
+        .then(setRecentActivity)
+        .catch(() => {});
     }
   }, [isOpen]);
 
@@ -104,9 +123,28 @@ export function CommandPalette({
   const filteredHosts = hosts.filter(
     (h) =>
       h.name.toLowerCase().includes(search.toLowerCase()) ||
-      h.ip.toLowerCase().includes(search.toLowerCase()),
+      h.ip.toLowerCase().includes(search.toLowerCase()) ||
+      h.username.toLowerCase().includes(search.toLowerCase()),
   );
 
+  // Group hosts by folder; ungrouped hosts appear first under an implicit root group
+  const groupedHosts: { folder: string | null; hosts: Host[] }[] = [];
+  const folderMap = new Map<string, Host[]>();
+  const ungrouped: Host[] = [];
+  for (const h of filteredHosts) {
+    if (h.folder) {
+      if (!folderMap.has(h.folder)) folderMap.set(h.folder, []);
+      folderMap.get(h.folder)!.push(h);
+    } else {
+      ungrouped.push(h);
+    }
+  }
+  if (ungrouped.length > 0)
+    groupedHosts.push({ folder: null, hosts: ungrouped });
+  for (const [folder, fhosts] of folderMap) {
+    groupedHosts.push({ folder, hosts: fhosts });
+  }
+
   const handleAction = (action: () => void) => {
     action();
     setIsOpen(false);
@@ -134,7 +172,7 @@ export function CommandPalette({
               ref={inputRef}
               value={search}
               onChange={(e) => setSearch(e.target.value)}
-              placeholder="Search hosts, commands, or settings..."
+              placeholder={t("commandPalette.searchPlaceholder")}
               className="flex-1 h-12 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
             />
             <div className="flex items-center gap-1.5 ml-2">
@@ -145,7 +183,10 @@ export function CommandPalette({
           </div>
 
           <CommandList className="max-h-[60vh] thin-scrollbar">
-            <CommandGroup heading="Quick Actions" className="px-2">
+            <CommandGroup
+              heading={t("commandPalette.quickActions")}
+              className="px-2"
+            >
               <CommandItem
                 onSelect={() => handleAction(() => onOpenTab("host-manager"))}
                 className="group flex items-center gap-3 px-3 py-2.5 rounded-none hover:bg-accent-brand/10 cursor-pointer"
@@ -154,9 +195,11 @@ export function CommandPalette({
                   <LayoutDashboard className="size-4 text-accent-brand" />
                 </div>
                 <div className="flex flex-col flex-1">
-                  <span className="text-sm font-semibold">Host Manager</span>
+                  <span className="text-sm font-semibold">
+                    {t("commandPalette.hostManager")}
+                  </span>
                   <span className="text-xs text-muted-foreground">
-                    Manage, add, or edit hosts
+                    {t("commandPalette.hostManagerDesc")}
                   </span>
                 </div>
               </CommandItem>
@@ -177,9 +220,11 @@ export function CommandPalette({
                   <Plus className="size-4 text-accent-brand" />
                 </div>
                 <div className="flex flex-col flex-1">
-                  <span className="text-sm font-semibold">Add New Host</span>
+                  <span className="text-sm font-semibold">
+                    {t("commandPalette.addNewHost")}
+                  </span>
                   <span className="text-xs text-muted-foreground">
-                    Register a new host
+                    {t("commandPalette.addNewHostDesc")}
                   </span>
                 </div>
               </CommandItem>
@@ -192,9 +237,11 @@ export function CommandPalette({
                   <Settings className="size-4 text-accent-brand" />
                 </div>
                 <div className="flex flex-col flex-1">
-                  <span className="text-sm font-semibold">Admin Settings</span>
+                  <span className="text-sm font-semibold">
+                    {t("commandPalette.adminSettings")}
+                  </span>
                   <span className="text-xs text-muted-foreground">
-                    Configure system preferences and users
+                    {t("commandPalette.adminSettingsDesc")}
                   </span>
                 </div>
               </CommandItem>
@@ -207,9 +254,11 @@ export function CommandPalette({
                   <User className="size-4 text-accent-brand" />
                 </div>
                 <div className="flex flex-col flex-1">
-                  <span className="text-sm font-semibold">User Profile</span>
+                  <span className="text-sm font-semibold">
+                    {t("commandPalette.userProfile")}
+                  </span>
                   <span className="text-xs text-muted-foreground">
-                    Manage your account and preferences
+                    {t("commandPalette.userProfileDesc")}
                   </span>
                 </div>
               </CommandItem>
@@ -230,142 +279,242 @@ export function CommandPalette({
                   <KeyRound className="size-4 text-accent-brand" />
                 </div>
                 <div className="flex flex-col flex-1">
-                  <span className="text-sm font-semibold">Add Credential</span>
+                  <span className="text-sm font-semibold">
+                    {t("commandPalette.addCredential")}
+                  </span>
                   <span className="text-xs text-muted-foreground">
-                    Store SSH keys or passwords
+                    {t("commandPalette.addCredentialDesc")}
                   </span>
                 </div>
               </CommandItem>
             </CommandGroup>
 
-            <CommandSeparator className="my-2" />
-
-            <CommandGroup heading="Servers & Hosts" className="px-2">
-              {filteredHosts.length > 0 ? (
-                filteredHosts.map((host, i) => {
-                  const actions = [
-                    host.enableTerminal !== false && "Terminal",
-                    host.enableFileManager !== false && "Files",
-                    host.enableDocker && "Docker",
-                    host.enableTunnel && "Tunnels",
-                    "Stats",
-                  ].filter(Boolean) as string[];
-
-                  return (
+            {recentActivity.length > 0 && (
+              <>
+                <CommandSeparator className="my-2" />
+                <CommandGroup
+                  heading={t("commandPalette.recentActivity")}
+                  className="px-2"
+                >
+                  {recentActivity.map((item) => (
                     <CommandItem
-                      key={i}
+                      key={item.id}
                       onSelect={() =>
-                        handleAction(() => onOpenTab("terminal", host.name))
+                        handleAction(() =>
+                          onOpenTab(
+                            ACTIVITY_TAB_TYPE[item.type] as any,
+                            item.hostName,
+                          ),
+                        )
                       }
-                      className="group flex items-center gap-3 px-3 py-2.5 rounded-none hover:bg-accent-brand/10 cursor-pointer"
+                      className="group flex items-center gap-3 px-3 py-2 rounded-none hover:bg-accent-brand/10 cursor-pointer"
                     >
-                      <div className="size-8 rounded-none bg-muted flex items-center justify-center group-hover:bg-accent-brand/20 transition-colors shrink-0">
-                        <Server
-                          className={cn(
-                            "size-4",
-                            host.online
-                              ? "text-accent-brand"
-                              : "text-muted-foreground",
-                          )}
-                        />
+                      <div className="size-7 rounded-none bg-muted flex items-center justify-center group-hover:bg-accent-brand/20 transition-colors text-muted-foreground group-hover:text-accent-brand">
+                        {ACTIVITY_ICONS[item.type]}
                       </div>
                       <div className="flex flex-col flex-1 min-w-0">
-                        <div className="flex items-center gap-2">
-                          <span className="text-sm font-semibold truncate">
-                            {host.name}
-                          </span>
-                          {host.online && (
-                            <span className="size-1.5 rounded-full bg-accent-brand animate-pulse shrink-0" />
-                          )}
-                        </div>
-                        <span className="text-xs text-muted-foreground font-mono">
-                          {host.ip}
+                        <span className="text-sm font-semibold truncate">
+                          {item.hostName}
+                        </span>
+                        <span className="text-xs text-muted-foreground capitalize">
+                          {item.type.replace("_", " ")}
                         </span>
                       </div>
-                      <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
-                        {actions.map((action) => (
-                          <Button
-                            key={action}
-                            variant="ghost"
-                            size="icon"
-                            title={action}
-                            className="size-7 rounded-none hover:bg-accent-brand/20 hover:text-accent-brand"
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              handleAction(() =>
-                                onOpenTab(
-                                  ACTION_TAB_TYPE[action] as any,
-                                  host.name,
-                                ),
-                              );
-                            }}
-                          >
-                            {ACTION_ICONS[action]}
-                          </Button>
-                        ))}
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className="size-7 rounded-none hover:bg-muted"
-                              onClick={(e) => e.stopPropagation()}
-                            >
-                              <MoreHorizontal className="size-3" />
-                            </Button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent
-                            align="end"
-                            className="rounded-none border-border bg-card w-40"
-                          >
-                            <DropdownMenuItem
-                              className="rounded-none text-xs font-semibold hover:bg-accent-brand/10 hover:text-accent-brand cursor-pointer"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                handleAction(() => onOpenTab("host-manager"));
-                              }}
-                            >
-                              <Edit3 className="size-3.5 mr-2" /> Edit Host
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
+                      <div className="flex items-center gap-1 text-muted-foreground/50">
+                        <Clock className="size-3" />
+                        <span className="text-[10px]">
+                          {new Date(item.timestamp).toLocaleDateString()}
+                        </span>
                       </div>
                     </CommandItem>
-                  );
-                })
+                  ))}
+                </CommandGroup>
+              </>
+            )}
+
+            <CommandSeparator className="my-2" />
+
+            <CommandGroup
+              heading={t("commandPalette.serversAndHosts")}
+              className="px-2"
+            >
+              {filteredHosts.length > 0 ? (
+                groupedHosts.map(({ folder, hosts: groupHosts }) => (
+                  <div key={folder ?? "__root__"}>
+                    {folder && (
+                      <div className="flex items-center gap-1.5 px-3 py-1.5 text-[11px] font-semibold text-muted-foreground/60 uppercase tracking-wide">
+                        <Folder className="size-3" />
+                        {folder}
+                      </div>
+                    )}
+                    {groupHosts.map((host, i) => (
+                      <CommandItem
+                        key={i}
+                        onSelect={() =>
+                          handleAction(() => onOpenTab("terminal", host.name))
+                        }
+                        className="group flex items-center gap-3 px-3 py-2.5 rounded-none hover:bg-accent-brand/10 cursor-pointer"
+                      >
+                        <div className="size-8 rounded-none bg-muted flex items-center justify-center group-hover:bg-accent-brand/20 transition-colors shrink-0">
+                          <Server
+                            className={cn(
+                              "size-4",
+                              host.online
+                                ? "text-accent-brand"
+                                : "text-muted-foreground",
+                            )}
+                          />
+                        </div>
+                        <div className="flex flex-col flex-1 min-w-0">
+                          <div className="flex items-center gap-2">
+                            <span className="text-sm font-semibold truncate">
+                              {host.name}
+                            </span>
+                            {host.online && (
+                              <span className="size-1.5 rounded-full bg-accent-brand animate-pulse shrink-0" />
+                            )}
+                          </div>
+                          <span className="text-xs text-muted-foreground font-mono">
+                            {host.username}@{host.ip}
+                          </span>
+                        </div>
+                        <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+                          {host.enableSsh &&
+                            getSshActions(host).map(
+                              ({ type, icon: Icon, label }) => (
+                                <button
+                                  key={type}
+                                  title={label}
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handleAction(() =>
+                                      onOpenTab(type as any, host.name),
+                                    );
+                                  }}
+                                  className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
+                                >
+                                  <Icon className="size-3.5" />
+                                </button>
+                              ),
+                            )}
+                          {host.enableSsh &&
+                            (host.enableRdp ||
+                              host.enableVnc ||
+                              host.enableTelnet) && (
+                              <div className="w-px h-3.5 bg-border/60 mx-0.5 shrink-0" />
+                            )}
+                          {host.enableRdp && (
+                            <button
+                              title="RDP"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleAction(() => onOpenTab("rdp", host.name));
+                              }}
+                              className="flex items-center gap-1 px-2 h-6 rounded text-xs font-medium text-muted-foreground/70 hover:text-foreground hover:bg-muted-foreground/10 transition-colors border border-border/40"
+                            >
+                              <Monitor className="size-3" />
+                              RDP
+                            </button>
+                          )}
+                          {host.enableVnc && (
+                            <button
+                              title="VNC"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleAction(() => onOpenTab("vnc", host.name));
+                              }}
+                              className="flex items-center gap-1 px-2 h-6 rounded text-xs font-medium text-muted-foreground/70 hover:text-foreground hover:bg-muted-foreground/10 transition-colors border border-border/40"
+                            >
+                              <MousePointerClick className="size-3" />
+                              VNC
+                            </button>
+                          )}
+                          {host.enableTelnet && (
+                            <button
+                              title="Telnet"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleAction(() =>
+                                  onOpenTab("telnet", host.name),
+                                );
+                              }}
+                              className="flex items-center gap-1 px-2 h-6 rounded text-xs font-medium text-muted-foreground/70 hover:text-foreground hover:bg-muted-foreground/10 transition-colors border border-border/40"
+                            >
+                              <Terminal className="size-3" />
+                              Telnet
+                            </button>
+                          )}
+                          <div className="w-px h-3.5 bg-border/60 mx-0.5 shrink-0" />
+                          <button
+                            title="Edit Host"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setIsOpen(false);
+                              onOpenTab("host-manager");
+                              setTimeout(() => {
+                                window.dispatchEvent(
+                                  new CustomEvent("host-manager:edit-host", {
+                                    detail: host.id,
+                                  }),
+                                );
+                              }, 100);
+                            }}
+                            className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
+                          >
+                            <Pencil className="size-3.5" />
+                          </button>
+                        </div>
+                      </CommandItem>
+                    ))}
+                  </div>
+                ))
               ) : (
                 <div className="py-6 text-center text-sm text-muted-foreground">
-                  No hosts found matching "{search}"
+                  {t("commandPalette.noHostsFound", { search })}
                 </div>
               )}
             </CommandGroup>
 
             <CommandSeparator className="my-2" />
 
-            <CommandGroup heading="Links" className="px-2">
-              <div className="grid grid-cols-2 gap-1">
+            <CommandGroup heading={t("commandPalette.links")} className="px-2">
+              <div className="grid grid-cols-3 gap-1">
                 <CommandItem
-                  onSelect={() => window.open("https://github.com", "_blank")}
+                  onSelect={() =>
+                    window.open(
+                      "https://github.com/Termix-SSH/Termix",
+                      "_blank",
+                    )
+                  }
                   className="flex items-center gap-3 px-3 py-2 rounded-none hover:bg-accent-brand/10 cursor-pointer"
                 >
                   <Globe className="size-4 text-muted-foreground" />
                   <span className="text-sm font-medium">GitHub</span>
                 </CommandItem>
                 <CommandItem
-                  onSelect={() => window.open("https://discord.com", "_blank")}
+                  onSelect={() =>
+                    window.open(
+                      "https://discord.com/invite/jVQGdvHDrf",
+                      "_blank",
+                    )
+                  }
                   className="flex items-center gap-3 px-3 py-2 rounded-none hover:bg-accent-brand/10 cursor-pointer"
                 >
                   <MessagesSquare className="size-4 text-muted-foreground" />
                   <span className="text-sm font-medium">Discord</span>
                 </CommandItem>
-                <CommandItem className="flex items-center gap-3 px-3 py-2 rounded-none hover:bg-accent-brand/10 cursor-pointer">
+                <CommandItem
+                  onSelect={() =>
+                    window.open(
+                      "https://github.com/Termix-SSH/Support/issues/new",
+                      "_blank",
+                    )
+                  }
+                  className="flex items-center gap-3 px-3 py-2 rounded-none hover:bg-accent-brand/10 cursor-pointer"
+                >
                   <LifeBuoy className="size-4 text-muted-foreground" />
                   <span className="text-sm font-medium">Support</span>
                 </CommandItem>
-                <CommandItem className="flex items-center gap-3 px-3 py-2 rounded-none hover:bg-accent-brand/10 cursor-pointer">
-                  <DollarSign className="size-4 text-muted-foreground" />
-                  <span className="text-sm font-medium">Donate</span>
-                </CommandItem>
               </div>
             </CommandGroup>
           </CommandList>
@@ -374,15 +523,15 @@ export function CommandPalette({
             <div className="flex items-center gap-3">
               <div className="flex items-center gap-1">
                 <Kbd className="h-5 px-1 bg-background rounded-none">↑↓</Kbd>
-                <span>Navigate</span>
+                <span>{t("commandPalette.navigate")}</span>
               </div>
               <div className="flex items-center gap-1">
                 <Kbd className="h-5 px-1 bg-background rounded-none">ENTER</Kbd>
-                <span>Select</span>
+                <span>{t("commandPalette.select")}</span>
               </div>
             </div>
             <div className="flex items-center gap-1">
-              <span>Toggle with</span>
+              <span>{t("commandPalette.toggleWith")}</span>
               <Kbd className="h-5 px-1.5 bg-background rounded-none">Shift</Kbd>
               <span>+</span>
               <Kbd className="h-5 px-1.5 bg-background rounded-none">Shift</Kbd>