f311a7a5ad
- Add fade-in/fade-out transition to command palette (200ms) - Add scale animation to command palette on open/close - Add smooth popup animation to context menu (150ms) - Add visual feedback for file selection with ring effect - Add hover scale effect to file grid items - Add transition-all to list view items for consistent behavior - Zero JavaScript overhead, pure CSS transitions - All animations under 200ms for instant feel
405 lines
13 KiB
TypeScript
405 lines
13 KiB
TypeScript
import {
|
|
Command,
|
|
CommandInput,
|
|
CommandItem,
|
|
CommandList,
|
|
CommandGroup,
|
|
CommandSeparator,
|
|
} from "@/components/ui/command.tsx";
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
import { Kbd, KbdGroup } from "@/components/ui/kbd";
|
|
import {
|
|
Key,
|
|
Server,
|
|
Settings,
|
|
User,
|
|
Github,
|
|
Terminal,
|
|
FolderOpen,
|
|
Pencil,
|
|
EllipsisVertical,
|
|
} from "lucide-react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { BiMoney, BiSupport } from "react-icons/bi";
|
|
import { BsDiscord } from "react-icons/bs";
|
|
import { GrUpdate } from "react-icons/gr";
|
|
import { useTabs } from "@/ui/desktop/navigation/tabs/TabContext.tsx";
|
|
import { getRecentActivity, getSSHHosts } from "@/ui/main-axios.ts";
|
|
import type { RecentActivityItem } from "@/ui/main-axios.ts";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuTrigger,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { Button } from "@/components/ui/button.tsx";
|
|
|
|
interface SSHHost {
|
|
id: number;
|
|
name: string;
|
|
ip: string;
|
|
port: number;
|
|
username: string;
|
|
folder: string;
|
|
tags: string[];
|
|
pin: boolean;
|
|
authType: string;
|
|
password?: string;
|
|
key?: string;
|
|
keyPassword?: string;
|
|
keyType?: string;
|
|
enableTerminal: boolean;
|
|
enableTunnel: boolean;
|
|
enableFileManager: boolean;
|
|
defaultPath: string;
|
|
tunnelConnections: unknown[];
|
|
createdAt: string;
|
|
updatedAt: string;
|
|
}
|
|
|
|
export function CommandPalette({
|
|
isOpen,
|
|
setIsOpen,
|
|
}: {
|
|
isOpen: boolean;
|
|
setIsOpen: (isOpen: boolean) => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
const { addTab, setCurrentTab, tabs: tabList, updateTab } = useTabs();
|
|
const [recentActivity, setRecentActivity] = useState<RecentActivityItem[]>(
|
|
[],
|
|
);
|
|
const [hosts, setHosts] = useState<SSHHost[]>([]);
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
inputRef.current?.focus();
|
|
getRecentActivity(50).then((activity) => {
|
|
setRecentActivity(activity.slice(0, 5));
|
|
});
|
|
getSSHHosts().then((allHosts) => {
|
|
setHosts(allHosts);
|
|
});
|
|
}
|
|
}, [isOpen]);
|
|
|
|
const handleAddHost = () => {
|
|
const sshManagerTab = tabList.find((t) => t.type === "ssh_manager");
|
|
if (sshManagerTab) {
|
|
updateTab(sshManagerTab.id, { initialTab: "add_host" });
|
|
setCurrentTab(sshManagerTab.id);
|
|
} else {
|
|
const id = addTab({
|
|
type: "ssh_manager",
|
|
title: t("commandPalette.hostManager"),
|
|
initialTab: "add_host",
|
|
});
|
|
setCurrentTab(id);
|
|
}
|
|
setIsOpen(false);
|
|
};
|
|
|
|
const handleAddCredential = () => {
|
|
const sshManagerTab = tabList.find((t) => t.type === "ssh_manager");
|
|
if (sshManagerTab) {
|
|
updateTab(sshManagerTab.id, { initialTab: "add_credential" });
|
|
setCurrentTab(sshManagerTab.id);
|
|
} else {
|
|
const id = addTab({
|
|
type: "ssh_manager",
|
|
title: t("commandPalette.hostManager"),
|
|
initialTab: "add_credential",
|
|
});
|
|
setCurrentTab(id);
|
|
}
|
|
setIsOpen(false);
|
|
};
|
|
|
|
const handleOpenAdminSettings = () => {
|
|
const adminTab = tabList.find((t) => t.type === "admin");
|
|
if (adminTab) {
|
|
setCurrentTab(adminTab.id);
|
|
} else {
|
|
const id = addTab({ type: "admin", title: t("commandPalette.adminSettings") });
|
|
setCurrentTab(id);
|
|
}
|
|
setIsOpen(false);
|
|
};
|
|
|
|
const handleOpenUserProfile = () => {
|
|
const userProfileTab = tabList.find((t) => t.type === "user_profile");
|
|
if (userProfileTab) {
|
|
setCurrentTab(userProfileTab.id);
|
|
} else {
|
|
const id = addTab({ type: "user_profile", title: t("commandPalette.userProfile") });
|
|
setCurrentTab(id);
|
|
}
|
|
setIsOpen(false);
|
|
};
|
|
|
|
const handleOpenUpdateLog = () => {
|
|
window.open("https://github.com/Termix-SSH/Termix/releases", "_blank");
|
|
setIsOpen(false);
|
|
};
|
|
|
|
const handleGitHub = () => {
|
|
window.open("https://github.com/Termix-SSH/Termix", "_blank");
|
|
setIsOpen(false);
|
|
};
|
|
|
|
const handleSupport = () => {
|
|
window.open("https://github.com/Termix-SSH/Support/issues/new", "_blank");
|
|
setIsOpen(false);
|
|
};
|
|
|
|
const handleDiscord = () => {
|
|
window.open("https://discord.com/invite/jVQGdvHDrf", "_blank");
|
|
setIsOpen(false);
|
|
};
|
|
|
|
const handleDonate = () => {
|
|
window.open("https://github.com/sponsors/LukeGus", "_blank");
|
|
setIsOpen(false);
|
|
};
|
|
|
|
const handleActivityClick = (item: RecentActivityItem) => {
|
|
getSSHHosts().then((hosts) => {
|
|
const host = hosts.find((h: { id: number }) => h.id === item.hostId);
|
|
if (!host) return;
|
|
|
|
if (item.type === "terminal") {
|
|
addTab({
|
|
type: "terminal",
|
|
title: item.hostName,
|
|
hostConfig: host,
|
|
});
|
|
} else if (item.type === "file_manager") {
|
|
addTab({
|
|
type: "file_manager",
|
|
title: item.hostName,
|
|
hostConfig: host,
|
|
});
|
|
}
|
|
});
|
|
setIsOpen(false);
|
|
};
|
|
|
|
const handleHostTerminalClick = (host: SSHHost) => {
|
|
const title = host.name?.trim()
|
|
? host.name
|
|
: `${host.username}@${host.ip}:${host.port}`;
|
|
addTab({ type: "terminal", title, hostConfig: host });
|
|
setIsOpen(false);
|
|
};
|
|
|
|
const handleHostFileManagerClick = (host: SSHHost) => {
|
|
const title = host.name?.trim()
|
|
? host.name
|
|
: `${host.username}@${host.ip}:${host.port}`;
|
|
addTab({ type: "file_manager", title, hostConfig: host });
|
|
setIsOpen(false);
|
|
};
|
|
|
|
const handleHostServerDetailsClick = (host: SSHHost) => {
|
|
const title = host.name?.trim()
|
|
? host.name
|
|
: `${host.username}@${host.ip}:${host.port}`;
|
|
addTab({ type: "server", title, hostConfig: host });
|
|
setIsOpen(false);
|
|
};
|
|
|
|
const handleHostEditClick = (host: SSHHost) => {
|
|
const title = host.name?.trim()
|
|
? host.name
|
|
: `${host.username}@${host.ip}:${host.port}`;
|
|
addTab({
|
|
type: "ssh_manager",
|
|
title: t("commandPalette.hostManager"),
|
|
hostConfig: host,
|
|
initialTab: "add_host",
|
|
});
|
|
setIsOpen(false);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"fixed inset-0 z-50 flex items-center justify-center bg-black/30 transition-opacity duration-200",
|
|
!isOpen && "opacity-0 pointer-events-none",
|
|
)}
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
<Command
|
|
className={cn(
|
|
"w-3/4 max-w-2xl max-h-[60vh] rounded-lg border-2 border-dark-border shadow-md flex flex-col",
|
|
"transition-all duration-200 ease-out",
|
|
!isOpen && "scale-95 opacity-0",
|
|
)}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<CommandInput
|
|
ref={inputRef}
|
|
placeholder={t("commandPalette.searchPlaceholder")}
|
|
/>
|
|
<CommandList
|
|
key={recentActivity.length}
|
|
className="w-full h-auto flex-grow overflow-y-auto"
|
|
style={{ maxHeight: "inherit" }}
|
|
>
|
|
{recentActivity.length > 0 && (
|
|
<>
|
|
<CommandGroup heading={t("commandPalette.recentActivity")}>
|
|
{recentActivity.map((item, index) => (
|
|
<CommandItem
|
|
key={`recent-activity-${index}-${item.type}-${item.hostId}-${item.timestamp}`}
|
|
value={`recent-activity-${index}-${item.hostName}-${item.type}`}
|
|
onSelect={() => handleActivityClick(item)}
|
|
>
|
|
{item.type === "terminal" ? <Terminal /> : <FolderOpen />}
|
|
<span>{item.hostName}</span>
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
<CommandSeparator />
|
|
</>
|
|
)}
|
|
<CommandGroup heading={t("commandPalette.navigation")}>
|
|
<CommandItem onSelect={handleAddHost}>
|
|
<Server />
|
|
<span>{t("commandPalette.addHost")}</span>
|
|
</CommandItem>
|
|
<CommandItem onSelect={handleAddCredential}>
|
|
<Key />
|
|
<span>{t("commandPalette.addCredential")}</span>
|
|
</CommandItem>
|
|
<CommandItem onSelect={handleOpenAdminSettings}>
|
|
<Settings />
|
|
<span>{t("commandPalette.adminSettings")}</span>
|
|
</CommandItem>
|
|
<CommandItem onSelect={handleOpenUserProfile}>
|
|
<User />
|
|
<span>{t("commandPalette.userProfile")}</span>
|
|
</CommandItem>
|
|
<CommandItem onSelect={handleOpenUpdateLog}>
|
|
<GrUpdate />
|
|
<span>{t("commandPalette.updateLog")}</span>
|
|
</CommandItem>
|
|
</CommandGroup>
|
|
<CommandSeparator />
|
|
<CommandGroup heading={t("commandPalette.hosts")}>
|
|
{hosts.map((host, index) => {
|
|
const title = host.name?.trim()
|
|
? host.name
|
|
: `${host.username}@${host.ip}:${host.port}`;
|
|
return (
|
|
<CommandItem
|
|
key={`host-${index}-${host.id}`}
|
|
value={`host-${index}-${title}-${host.id}`}
|
|
onSelect={() => {
|
|
if (host.enableTerminal) {
|
|
handleHostTerminalClick(host);
|
|
}
|
|
}}
|
|
className="flex items-center justify-between"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<Server className="h-4 w-4" />
|
|
<span>{title}</span>
|
|
</div>
|
|
<div
|
|
className="flex items-center gap-1"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<DropdownMenu modal={false}>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
className="!px-2 h-7 border-1 border-dark-border"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<EllipsisVertical className="h-3 w-3" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
align="end"
|
|
side="right"
|
|
className="w-56 bg-dark-bg border-dark-border text-white"
|
|
>
|
|
<DropdownMenuItem
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleHostServerDetailsClick(host);
|
|
}}
|
|
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-dark-hover text-gray-300"
|
|
>
|
|
<Server className="h-4 w-4" />
|
|
<span className="flex-1">{t("commandPalette.openServerDetails")}</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleHostFileManagerClick(host);
|
|
}}
|
|
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-dark-hover text-gray-300"
|
|
>
|
|
<FolderOpen className="h-4 w-4" />
|
|
<span className="flex-1">{t("commandPalette.openFileManager")}</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleHostEditClick(host);
|
|
}}
|
|
className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-dark-hover text-gray-300"
|
|
>
|
|
<Pencil className="h-4 w-4" />
|
|
<span className="flex-1">{t("commandPalette.edit")}</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</CommandItem>
|
|
);
|
|
})}
|
|
</CommandGroup>
|
|
<CommandSeparator />
|
|
<CommandGroup heading={t("commandPalette.links")}>
|
|
<CommandItem onSelect={handleGitHub}>
|
|
<Github />
|
|
<span>{t("commandPalette.github")}</span>
|
|
</CommandItem>
|
|
<CommandItem onSelect={handleSupport}>
|
|
<BiSupport />
|
|
<span>{t("commandPalette.support")}</span>
|
|
</CommandItem>
|
|
<CommandItem onSelect={handleDiscord}>
|
|
<BsDiscord />
|
|
<span>{t("commandPalette.discord")}</span>
|
|
</CommandItem>
|
|
<CommandItem onSelect={handleDonate}>
|
|
<BiMoney />
|
|
<span>{t("commandPalette.donate")}</span>
|
|
</CommandItem>
|
|
</CommandGroup>
|
|
</CommandList>
|
|
<div className="border-t border-dark-border px-4 py-2 bg-dark-hover/50 flex items-center justify-between text-xs text-muted-foreground">
|
|
<div className="flex items-center gap-2">
|
|
<span>{t("commandPalette.press")}</span>
|
|
<KbdGroup>
|
|
<Kbd>Shift</Kbd>
|
|
<Kbd>Shift</Kbd>
|
|
</KbdGroup>
|
|
<span>{t("commandPalette.toToggle")}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span>{t("commandPalette.close")}</span>
|
|
<Kbd>Esc</Kbd>
|
|
</div>
|
|
</div>
|
|
</Command>
|
|
</div>
|
|
);
|
|
}
|