mirror of
https://github.com/Termix-SSH/Termix.git
synced 2026-07-15 04:43:36 +00:00
feat: readd mange mode for host manager, guacd toolbar improvements, connection issues, etc.
This commit is contained in:
LukeGus
+21
-3
@@ -12,6 +12,7 @@ import { getUserInfo, getCurrentToken, appReadyPromise } from "@/main-axios";
|
||||
import { applyAccentColor, applyFontSize } from "@/lib/theme";
|
||||
import type { FontSizeId } from "@/types/ui-types";
|
||||
import { useServiceWorker } from "@/hooks/use-service-worker";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const AppShell = lazy(() =>
|
||||
import("@/AppShell").then((m) => ({ default: m.AppShell })),
|
||||
@@ -177,19 +178,36 @@ function App() {
|
||||
const appOpacity = phase === "idle-app" ? 1 : 0;
|
||||
const authOpacity = phase === "idle-auth" ? 1 : 0;
|
||||
|
||||
const { t } = useTranslation();
|
||||
const isTransitioning = phase === "fading-in" || phase === "fading-out";
|
||||
|
||||
if (phase === "verifying") {
|
||||
return (
|
||||
<div className="fixed inset-0 flex items-center justify-center bg-background">
|
||||
<div className="w-5 h-5 border-2 border-primary border-t-transparent rounded-full animate-spin" />
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="w-5 h-5 border-2 border-primary border-t-transparent rounded-full animate-spin" />
|
||||
<p className="text-sm text-muted-foreground">{t("common.loading")}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{isTransitioning && (
|
||||
<div className="fixed inset-0 z-0 flex items-center justify-center bg-background">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="w-5 h-5 border-2 border-primary border-t-transparent rounded-full animate-spin" />
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("common.loading")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showApp && (
|
||||
<div
|
||||
className="fixed inset-0 z-0 transition-opacity duration-[450ms] ease-in-out"
|
||||
className="fixed inset-0 z-10 transition-opacity duration-[450ms] ease-in-out"
|
||||
style={{
|
||||
opacity: appOpacity,
|
||||
pointerEvents: phase === "idle-app" ? "auto" : "none",
|
||||
@@ -203,7 +221,7 @@ function App() {
|
||||
|
||||
{showAuth && (
|
||||
<div
|
||||
className="fixed inset-0 z-10 transition-opacity duration-[450ms] ease-in-out"
|
||||
className="fixed inset-0 z-20 transition-opacity duration-[450ms] ease-in-out"
|
||||
style={{
|
||||
opacity: authOpacity,
|
||||
pointerEvents: phase === "idle-auth" ? "auto" : "none",
|
||||
|
||||
@@ -187,6 +187,7 @@ export type Tab = {
|
||||
host?: Host;
|
||||
terminalRef?: import("react").RefObject<{
|
||||
sendInput?: (data: string) => void;
|
||||
reconnect?: () => void;
|
||||
} | null>;
|
||||
};
|
||||
|
||||
|
||||
+15
-1
@@ -398,6 +398,19 @@ export function AppShell({
|
||||
});
|
||||
}
|
||||
|
||||
function refreshTab(id: string) {
|
||||
const tab = tabs.find((t) => t.id === id);
|
||||
if (!tab) return;
|
||||
if (tab.type === "terminal") {
|
||||
const ref = tab.terminalRef?.current;
|
||||
ref?.reconnect?.();
|
||||
} else if (["rdp", "vnc", "telnet"].includes(tab.type)) {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("termix:refresh-guacamole", { detail: { tabId: id } }),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function closeTab(id: string) {
|
||||
const tab = tabs.find((t) => t.id === id);
|
||||
const confirmEnabled = localStorage.getItem("confirmTabClose") === "true";
|
||||
@@ -556,7 +569,7 @@ export function AppShell({
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-full w-12.5 rounded-none text-muted-foreground hover:text-foreground"
|
||||
className="h-full w-12.5 border-y-0 border-border rounded-none text-muted-foreground hover:text-foreground"
|
||||
title="Reset width"
|
||||
onClick={() => setSidebarWidth(266)}
|
||||
>
|
||||
@@ -647,6 +660,7 @@ export function AppShell({
|
||||
activeTabId={activeTabId}
|
||||
onSetActiveTab={setActiveTabId}
|
||||
onCloseTab={closeTab}
|
||||
onRefreshTab={refreshTab}
|
||||
onReorderTabs={setTabs}
|
||||
/>
|
||||
<div className="relative flex flex-col flex-1 min-h-0 overflow-hidden">
|
||||
|
||||
@@ -14,9 +14,10 @@ import type { SSHHost } from "@/types";
|
||||
|
||||
interface GuacamoleAppProps {
|
||||
hostId?: string;
|
||||
tabId?: string;
|
||||
}
|
||||
|
||||
const GuacamoleApp: React.FC<GuacamoleAppProps> = ({ hostId }) => {
|
||||
const GuacamoleApp: React.FC<GuacamoleAppProps> = ({ hostId, tabId }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
@@ -74,6 +75,7 @@ const GuacamoleApp: React.FC<GuacamoleAppProps> = ({ hostId }) => {
|
||||
<GuacamoleAppInner
|
||||
hostId={parseInt(hostId, 10)}
|
||||
hostConfig={hostConfig}
|
||||
tabId={tabId}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
@@ -84,11 +86,13 @@ const GuacamoleApp: React.FC<GuacamoleAppProps> = ({ hostId }) => {
|
||||
interface GuacamoleAppInnerProps {
|
||||
hostId: number;
|
||||
hostConfig: Pick<SSHHost, "connectionType">;
|
||||
tabId?: string;
|
||||
}
|
||||
|
||||
const GuacamoleAppInner: React.FC<GuacamoleAppInnerProps> = ({
|
||||
hostId,
|
||||
hostConfig,
|
||||
tabId,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const [token, setToken] = useState<string | null>(null);
|
||||
@@ -121,6 +125,17 @@ const GuacamoleAppInner: React.FC<GuacamoleAppInnerProps> = ({
|
||||
setRetryCount((c) => c + 1);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!tabId) return;
|
||||
const handler = (e: Event) => {
|
||||
const { tabId: eventTabId } = (e as CustomEvent).detail;
|
||||
if (eventTabId === tabId) handleReconnect();
|
||||
};
|
||||
window.addEventListener("termix:refresh-guacamole", handler);
|
||||
return () =>
|
||||
window.removeEventListener("termix:refresh-guacamole", handler);
|
||||
}, [tabId, handleReconnect]);
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div
|
||||
|
||||
@@ -10,8 +10,6 @@ import Guacamole from "guacamole-common-js";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { getGuacamoleToken, isElectron, isEmbeddedMode } from "@/main-axios.ts";
|
||||
import { SimpleLoader } from "@/lib/SimpleLoader.tsx";
|
||||
import { WifiOff, RefreshCw } from "lucide-react";
|
||||
import { Button } from "@/components/button.tsx";
|
||||
|
||||
export type GuacamoleConnectionType = "rdp" | "vnc" | "telnet";
|
||||
|
||||
@@ -67,7 +65,6 @@ export const GuacamoleDisplay = forwardRef<
|
||||
typeof document === "undefined" ? true : document.hasFocus(),
|
||||
);
|
||||
const [isReady, setIsReady] = useState(false);
|
||||
const [connectionError, setConnectionError] = useState<string | null>(null);
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
disconnect: () => {
|
||||
@@ -270,14 +267,19 @@ export const GuacamoleDisplay = forwardRef<
|
||||
if (isConnectingRef.current) return;
|
||||
isConnectingRef.current = true;
|
||||
setIsReady(false);
|
||||
setConnectionError(null);
|
||||
|
||||
let containerWidth = containerRef.current?.clientWidth || 0;
|
||||
let containerHeight = containerRef.current?.clientHeight || 0;
|
||||
// Wait two frames so the container is fully laid out before measuring.
|
||||
await new Promise<void>((resolve) =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
|
||||
);
|
||||
|
||||
const rect = containerRef.current?.getBoundingClientRect();
|
||||
let containerWidth = rect?.width || 0;
|
||||
let containerHeight = rect?.height || 0;
|
||||
|
||||
if (containerWidth < 100 || containerHeight < 100) {
|
||||
containerWidth = 1280;
|
||||
containerHeight = 720;
|
||||
containerWidth = window.innerWidth || 1280;
|
||||
containerHeight = window.innerHeight || 720;
|
||||
}
|
||||
|
||||
const wsUrl = await getWebSocketUrl(containerWidth, containerHeight);
|
||||
@@ -307,6 +309,11 @@ export const GuacamoleDisplay = forwardRef<
|
||||
setIsReady(true);
|
||||
};
|
||||
|
||||
const protocol = connectionConfig.protocol ?? connectionConfig.type;
|
||||
if (protocol === "telnet") {
|
||||
setIsReady(true);
|
||||
}
|
||||
|
||||
const mouse = new Guacamole.Mouse(displayElement);
|
||||
const sendMouseState = (state: Guacamole.Mouse.State) => {
|
||||
displayElement.focus({ preventScroll: true });
|
||||
@@ -358,6 +365,12 @@ export const GuacamoleDisplay = forwardRef<
|
||||
isConnectingRef.current = false;
|
||||
setIsReady(true);
|
||||
onConnect?.();
|
||||
if (containerRef.current) {
|
||||
const rect = containerRef.current.getBoundingClientRect();
|
||||
const w = Math.round(rect.width);
|
||||
const h = Math.round(rect.height);
|
||||
if (w > 0 && h > 0) client.sendSize(w, h);
|
||||
}
|
||||
break;
|
||||
case 4:
|
||||
break;
|
||||
@@ -373,7 +386,6 @@ export const GuacamoleDisplay = forwardRef<
|
||||
client.onerror = (error: Guacamole.Status) => {
|
||||
const errorMessage = error.message || t("guacamole.connectionError");
|
||||
setIsReady(false);
|
||||
setConnectionError(errorMessage);
|
||||
isConnectingRef.current = false;
|
||||
onError?.(errorMessage);
|
||||
};
|
||||
@@ -432,11 +444,7 @@ export const GuacamoleDisplay = forwardRef<
|
||||
|
||||
if (isVisible && !hasInitiatedRef.current) {
|
||||
hasInitiatedRef.current = true;
|
||||
requestAnimationFrame(() => {
|
||||
if (isMountedRef.current) {
|
||||
connect();
|
||||
}
|
||||
});
|
||||
connect();
|
||||
}
|
||||
}, [isVisible, connect]);
|
||||
|
||||
@@ -500,26 +508,23 @@ export const GuacamoleDisplay = forwardRef<
|
||||
if (!containerRef.current) return;
|
||||
|
||||
const resizeObserver = new ResizeObserver(() => {
|
||||
rescaleDisplay(false);
|
||||
if (resizeTimeoutRef.current) clearTimeout(resizeTimeoutRef.current);
|
||||
resizeTimeoutRef.current = setTimeout(() => {
|
||||
if (clientRef.current && containerRef.current) {
|
||||
const w = containerRef.current.clientWidth;
|
||||
const h = containerRef.current.clientHeight;
|
||||
const rect = containerRef.current.getBoundingClientRect();
|
||||
const w = Math.round(rect.width);
|
||||
const h = Math.round(rect.height);
|
||||
if (w > 0 && h > 0) clientRef.current.sendSize(w, h);
|
||||
}
|
||||
}, 200);
|
||||
}, 150);
|
||||
});
|
||||
|
||||
resizeObserver.observe(containerRef.current);
|
||||
|
||||
const initialTimeout = setTimeout(() => rescaleDisplay(true), 100);
|
||||
|
||||
return () => {
|
||||
resizeObserver.disconnect();
|
||||
clearTimeout(initialTimeout);
|
||||
};
|
||||
}, [rescaleDisplay]);
|
||||
}, []);
|
||||
|
||||
const syncClipboard = useCallback(() => {
|
||||
const client = clientRef.current;
|
||||
@@ -555,18 +560,6 @@ export const GuacamoleDisplay = forwardRef<
|
||||
};
|
||||
}, [isReady, syncClipboard]);
|
||||
|
||||
const handleReconnect = useCallback(() => {
|
||||
setConnectionError(null);
|
||||
hasInitiatedRef.current = false;
|
||||
isConnectingRef.current = false;
|
||||
if (clientRef.current) {
|
||||
clientRef.current.disconnect();
|
||||
clientRef.current = null;
|
||||
}
|
||||
displayElementRef.current = null;
|
||||
connect();
|
||||
}, [connect]);
|
||||
|
||||
const connectingMessage = t("guacamole.connecting", {
|
||||
type: (
|
||||
connectionConfig.protocol ||
|
||||
@@ -590,32 +583,7 @@ export const GuacamoleDisplay = forwardRef<
|
||||
}}
|
||||
/>
|
||||
|
||||
{connectionError ? (
|
||||
<div
|
||||
className="absolute inset-0 flex flex-col items-center justify-center gap-4 z-[100]"
|
||||
style={{ backgroundColor: "var(--bg-base)" }}
|
||||
>
|
||||
<WifiOff className="size-10" style={{ color: "var(--foreground)" }} />
|
||||
<p
|
||||
className="text-sm font-semibold"
|
||||
style={{ color: "var(--foreground)" }}
|
||||
>
|
||||
{t("guacamole.connectionFailed")}
|
||||
</p>
|
||||
<p
|
||||
className="text-xs max-w-xs text-center"
|
||||
style={{ color: "var(--foreground-secondary)" }}
|
||||
>
|
||||
{connectionError}
|
||||
</p>
|
||||
<Button variant="outline" size="sm" onClick={handleReconnect}>
|
||||
<RefreshCw className="size-4 mr-2" />
|
||||
{t("guacamole.reconnect")}
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<SimpleLoader visible={!isReady} message={connectingMessage} />
|
||||
)}
|
||||
<SimpleLoader visible={!isReady} message={connectingMessage} />
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -8,7 +8,6 @@ import React, {
|
||||
import {
|
||||
GripVertical,
|
||||
Monitor,
|
||||
RefreshCw,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
ChevronUp,
|
||||
@@ -240,247 +239,239 @@ export const GuacamoleToolbar: React.FC<GuacamoleToolbarProps> = ({
|
||||
zIndex: 20,
|
||||
};
|
||||
|
||||
if (collapsed) {
|
||||
return (
|
||||
<div
|
||||
ref={toolbarRef}
|
||||
style={containerStyle}
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="flex items-center bg-background/85 backdrop-blur-sm border border-border shadow-lg rounded-sm overflow-hidden">
|
||||
<button
|
||||
type="button"
|
||||
onMouseDown={startDrag}
|
||||
className="flex items-center justify-center size-7 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors cursor-grab active:cursor-grabbing"
|
||||
>
|
||||
<GripVertical className="size-3" />
|
||||
</button>
|
||||
<div className="w-px h-4 bg-border" />
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setCollapsed(false)}
|
||||
className="flex items-center justify-center size-7 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
|
||||
title={t("guacamole.toolbar.expand")}
|
||||
>
|
||||
<Monitor className="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom" sideOffset={6}>
|
||||
{t("guacamole.toolbar.expand")}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<TooltipProvider delayDuration={500}>
|
||||
<div
|
||||
ref={toolbarRef}
|
||||
style={containerStyle}
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
className="flex items-center bg-background/85 backdrop-blur-sm border border-border shadow-lg rounded-sm px-0.5 py-0.5 gap-0"
|
||||
>
|
||||
{/* Drag handle */}
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onMouseDown={startDrag}
|
||||
className="flex items-center justify-center h-7 px-1 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors rounded-sm cursor-grab active:cursor-grabbing"
|
||||
>
|
||||
<GripVertical className="size-3.5" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom" sideOffset={6}>
|
||||
{t("guacamole.toolbar.dragHandle")}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
{collapsed ? (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="flex items-center bg-background/85 backdrop-blur-sm border border-border shadow-lg rounded-sm overflow-hidden">
|
||||
<button
|
||||
type="button"
|
||||
onMouseDown={startDrag}
|
||||
className="flex items-center justify-center size-7 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors cursor-grab active:cursor-grabbing"
|
||||
>
|
||||
<GripVertical className="size-3" />
|
||||
</button>
|
||||
<div className="w-px h-4 bg-border" />
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setCollapsed(false)}
|
||||
className="flex items-center justify-center size-7 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
|
||||
>
|
||||
<Monitor className="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom" sideOffset={6}>
|
||||
{t("guacamole.toolbar.expand")}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<div className="flex items-center bg-background/85 backdrop-blur-sm border border-border shadow-lg rounded-sm px-0.5 py-0.5 gap-0">
|
||||
{/* Drag handle */}
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onMouseDown={startDrag}
|
||||
className="flex items-center justify-center h-7 px-1 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors rounded-sm cursor-grab active:cursor-grabbing"
|
||||
>
|
||||
<GripVertical className="size-3.5" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom" sideOffset={6}>
|
||||
{t("guacamole.toolbar.dragHandle")}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
{/* System combos — RDP/VNC only */}
|
||||
{isRdpVnc && (
|
||||
<>
|
||||
{/* System combos — RDP/VNC only */}
|
||||
{isRdpVnc && (
|
||||
<>
|
||||
<div className={SEP} />
|
||||
<TipBtn
|
||||
tooltip={t("guacamole.toolbar.ctrlAltDel")}
|
||||
onClick={() => sendCombo(0xffe3, 0xffe9, 0xffff)}
|
||||
>
|
||||
CAD
|
||||
</TipBtn>
|
||||
<TipBtn
|
||||
tooltip={t("guacamole.toolbar.winL")}
|
||||
onClick={() => sendCombo(0xff67, 0x006c)}
|
||||
>
|
||||
Win+L
|
||||
</TipBtn>
|
||||
<TipBtn
|
||||
tooltip={t("guacamole.toolbar.winKey")}
|
||||
onClick={() => sendCombo(0xff67)}
|
||||
>
|
||||
Win
|
||||
</TipBtn>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Sticky modifiers — RDP/VNC only */}
|
||||
{isRdpVnc && (
|
||||
<>
|
||||
<div className={SEP} />
|
||||
{(
|
||||
[
|
||||
[
|
||||
"ctrl",
|
||||
MODIFIER_KEYSYMS.ctrl,
|
||||
t("guacamole.toolbar.ctrl"),
|
||||
],
|
||||
["alt", MODIFIER_KEYSYMS.alt, t("guacamole.toolbar.alt")],
|
||||
[
|
||||
"shift",
|
||||
MODIFIER_KEYSYMS.shift,
|
||||
t("guacamole.toolbar.shift"),
|
||||
],
|
||||
["win", MODIFIER_KEYSYMS.win, t("guacamole.toolbar.win")],
|
||||
] as [string, number, string][]
|
||||
).map(([key, ks, label]) => (
|
||||
<Tooltip key={key}>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleStickyKey(ks)}
|
||||
className={cn(
|
||||
BTN_BASE,
|
||||
stickyKeys[ks] &&
|
||||
"bg-primary/15 text-primary border border-primary/30",
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom" sideOffset={6}>
|
||||
{stickyKeys[ks]
|
||||
? t("guacamole.toolbar.stickyActive", { key: label })
|
||||
: t("guacamole.toolbar.stickyInactive", { key: label })}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Function key toggle */}
|
||||
<div className={SEP} />
|
||||
<TipBtn
|
||||
tooltip={t("guacamole.toolbar.ctrlAltDel")}
|
||||
onClick={() => sendCombo(0xffe3, 0xffe9, 0xffff)}
|
||||
tooltip={t("guacamole.toolbar.fnToggle")}
|
||||
onClick={() => setShowFKeys((v) => !v)}
|
||||
className={cn(
|
||||
showFKeys &&
|
||||
"bg-primary/15 text-primary border border-primary/30",
|
||||
)}
|
||||
>
|
||||
CAD
|
||||
Fn
|
||||
</TipBtn>
|
||||
<TipBtn
|
||||
tooltip={t("guacamole.toolbar.winL")}
|
||||
onClick={() => sendCombo(0xff67, 0x006c)}
|
||||
>
|
||||
Win+L
|
||||
</TipBtn>
|
||||
<TipBtn
|
||||
tooltip={t("guacamole.toolbar.winKey")}
|
||||
onClick={() => sendCombo(0xff67)}
|
||||
>
|
||||
Win
|
||||
</TipBtn>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Sticky modifiers — RDP/VNC only */}
|
||||
{isRdpVnc && (
|
||||
<>
|
||||
{/* F1-F12 row */}
|
||||
{showFKeys &&
|
||||
FKEY_KEYSYMS.map((ks, i) => (
|
||||
<TipBtn
|
||||
key={ks}
|
||||
tooltip={`F${i + 1}`}
|
||||
onClick={() => sendCombo(ks)}
|
||||
>
|
||||
F{i + 1}
|
||||
</TipBtn>
|
||||
))}
|
||||
|
||||
{/* Navigation */}
|
||||
<div className={SEP} />
|
||||
{(
|
||||
[
|
||||
["ctrl", MODIFIER_KEYSYMS.ctrl, t("guacamole.toolbar.ctrl")],
|
||||
["alt", MODIFIER_KEYSYMS.alt, t("guacamole.toolbar.alt")],
|
||||
["shift", MODIFIER_KEYSYMS.shift, t("guacamole.toolbar.shift")],
|
||||
["win", MODIFIER_KEYSYMS.win, t("guacamole.toolbar.win")],
|
||||
] as [string, number, string][]
|
||||
).map(([key, ks, label]) => (
|
||||
<Tooltip key={key}>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleStickyKey(ks)}
|
||||
className={cn(
|
||||
BTN_BASE,
|
||||
stickyKeys[ks] &&
|
||||
"bg-primary/15 text-primary border border-primary/30",
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom" sideOffset={6}>
|
||||
{stickyKeys[ks]
|
||||
? t("guacamole.toolbar.stickyActive", { key: label })
|
||||
: t("guacamole.toolbar.stickyInactive", { key: label })}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Function key toggle */}
|
||||
<div className={SEP} />
|
||||
<TipBtn
|
||||
tooltip={t("guacamole.toolbar.fnToggle")}
|
||||
onClick={() => setShowFKeys((v) => !v)}
|
||||
className={cn(
|
||||
showFKeys && "bg-primary/15 text-primary border border-primary/30",
|
||||
)}
|
||||
>
|
||||
Fn
|
||||
</TipBtn>
|
||||
|
||||
{/* F1-F12 row */}
|
||||
{showFKeys &&
|
||||
FKEY_KEYSYMS.map((ks, i) => (
|
||||
<TipBtn
|
||||
key={ks}
|
||||
tooltip={`F${i + 1}`}
|
||||
onClick={() => sendCombo(ks)}
|
||||
tooltip={t("guacamole.toolbar.esc")}
|
||||
onClick={() => sendCombo(0xff1b)}
|
||||
>
|
||||
F{i + 1}
|
||||
Esc
|
||||
</TipBtn>
|
||||
))}
|
||||
|
||||
{/* Navigation */}
|
||||
<div className={SEP} />
|
||||
<TipBtn
|
||||
tooltip={t("guacamole.toolbar.esc")}
|
||||
onClick={() => sendCombo(0xff1b)}
|
||||
>
|
||||
Esc
|
||||
</TipBtn>
|
||||
<TipBtn
|
||||
tooltip={t("guacamole.toolbar.tab")}
|
||||
onClick={() => sendCombo(0xff09)}
|
||||
>
|
||||
Tab
|
||||
</TipBtn>
|
||||
<TipBtn
|
||||
tooltip={t("guacamole.toolbar.home")}
|
||||
onClick={() => sendCombo(0xff50)}
|
||||
>
|
||||
Home
|
||||
</TipBtn>
|
||||
<TipBtn
|
||||
tooltip={t("guacamole.toolbar.end")}
|
||||
onClick={() => sendCombo(0xff57)}
|
||||
>
|
||||
End
|
||||
</TipBtn>
|
||||
<TipBtn
|
||||
tooltip={t("guacamole.toolbar.pageUp")}
|
||||
onClick={() => sendCombo(0xff55)}
|
||||
>
|
||||
PgUp
|
||||
</TipBtn>
|
||||
<TipBtn
|
||||
tooltip={t("guacamole.toolbar.pageDown")}
|
||||
onClick={() => sendCombo(0xff56)}
|
||||
>
|
||||
PgDn
|
||||
</TipBtn>
|
||||
|
||||
{/* Arrow cluster */}
|
||||
<div className="flex flex-col ml-0.5">
|
||||
<div className="flex justify-center">
|
||||
<TipIconBtn
|
||||
tooltip={t("guacamole.toolbar.arrowUp")}
|
||||
onClick={() => sendCombo(0xff52)}
|
||||
<TipBtn
|
||||
tooltip={t("guacamole.toolbar.tab")}
|
||||
onClick={() => sendCombo(0xff09)}
|
||||
>
|
||||
<ChevronUp className="size-3" />
|
||||
</TipIconBtn>
|
||||
Tab
|
||||
</TipBtn>
|
||||
<TipBtn
|
||||
tooltip={t("guacamole.toolbar.home")}
|
||||
onClick={() => sendCombo(0xff50)}
|
||||
>
|
||||
Home
|
||||
</TipBtn>
|
||||
<TipBtn
|
||||
tooltip={t("guacamole.toolbar.end")}
|
||||
onClick={() => sendCombo(0xff57)}
|
||||
>
|
||||
End
|
||||
</TipBtn>
|
||||
<TipBtn
|
||||
tooltip={t("guacamole.toolbar.pageUp")}
|
||||
onClick={() => sendCombo(0xff55)}
|
||||
>
|
||||
PgUp
|
||||
</TipBtn>
|
||||
<TipBtn
|
||||
tooltip={t("guacamole.toolbar.pageDown")}
|
||||
onClick={() => sendCombo(0xff56)}
|
||||
>
|
||||
PgDn
|
||||
</TipBtn>
|
||||
|
||||
{/* Arrow cluster */}
|
||||
<div className="flex flex-col ml-0.5">
|
||||
<div className="flex justify-center">
|
||||
<TipIconBtn
|
||||
tooltip={t("guacamole.toolbar.arrowUp")}
|
||||
onClick={() => sendCombo(0xff52)}
|
||||
>
|
||||
<ChevronUp className="size-3" />
|
||||
</TipIconBtn>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<TipIconBtn
|
||||
tooltip={t("guacamole.toolbar.arrowLeft")}
|
||||
onClick={() => sendCombo(0xff51)}
|
||||
>
|
||||
<ChevronLeft className="size-3" />
|
||||
</TipIconBtn>
|
||||
<TipIconBtn
|
||||
tooltip={t("guacamole.toolbar.arrowDown")}
|
||||
onClick={() => sendCombo(0xff54)}
|
||||
>
|
||||
<ChevronDown className="size-3" />
|
||||
</TipIconBtn>
|
||||
<TipIconBtn
|
||||
tooltip={t("guacamole.toolbar.arrowRight")}
|
||||
onClick={() => sendCombo(0xff53)}
|
||||
>
|
||||
<ChevronRight className="size-3" />
|
||||
</TipIconBtn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Collapse */}
|
||||
<div className="w-px h-5 bg-border mx-0.5 shrink-0" />
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setCollapsed(true)}
|
||||
className={cn(BTN_ICON)}
|
||||
>
|
||||
<ChevronsLeftRight className="size-3.5" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom" sideOffset={6}>
|
||||
{t("guacamole.toolbar.collapse")}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<TipIconBtn
|
||||
tooltip={t("guacamole.toolbar.arrowLeft")}
|
||||
onClick={() => sendCombo(0xff51)}
|
||||
>
|
||||
<ChevronLeft className="size-3" />
|
||||
</TipIconBtn>
|
||||
<TipIconBtn
|
||||
tooltip={t("guacamole.toolbar.arrowDown")}
|
||||
onClick={() => sendCombo(0xff54)}
|
||||
>
|
||||
<ChevronDown className="size-3" />
|
||||
</TipIconBtn>
|
||||
<TipIconBtn
|
||||
tooltip={t("guacamole.toolbar.arrowRight")}
|
||||
onClick={() => sendCombo(0xff53)}
|
||||
>
|
||||
<ChevronRight className="size-3" />
|
||||
</TipIconBtn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Session */}
|
||||
<div className={SEP} />
|
||||
<TipIconBtn
|
||||
tooltip={t("guacamole.toolbar.reconnect")}
|
||||
onClick={onReconnect}
|
||||
>
|
||||
<RefreshCw className="size-3.5" />
|
||||
</TipIconBtn>
|
||||
|
||||
{/* Collapse */}
|
||||
<div className="w-px h-5 bg-border mx-0.5 shrink-0" />
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setCollapsed(true)}
|
||||
className={cn(BTN_ICON)}
|
||||
>
|
||||
<ChevronsLeftRight className="size-3.5" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom" sideOffset={6}>
|
||||
{t("guacamole.toolbar.collapse")}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
);
|
||||
|
||||
@@ -131,6 +131,7 @@
|
||||
"passwordCopied": "Password copied to clipboard",
|
||||
"noPasswordAvailable": "No password available",
|
||||
"failedToCopyPassword": "Failed to copy password",
|
||||
"refreshTab": "Refresh connection",
|
||||
"openFileManager": "Open File Manager",
|
||||
"dashboard": "Dashboard",
|
||||
"networkGraph": "Network Graph",
|
||||
@@ -293,6 +294,9 @@
|
||||
"keyFileLoaded": "Key file loaded",
|
||||
"keyUploadClick": "Click to upload .pem / .key / .ppk",
|
||||
"clearKey": "Clear key",
|
||||
"keySaved": "SSH key saved",
|
||||
"keyReplaceNotice": "paste a new key below to replace it",
|
||||
"replaceKey": "Replace key",
|
||||
"forceKeyboardInteractiveLabel": "Force Keyboard Interactive",
|
||||
"forceKeyboardInteractiveShortDesc": "Force manual password entry even if keys are present",
|
||||
"terminalAppearance": "Terminal Appearance",
|
||||
@@ -509,6 +513,7 @@
|
||||
"hostsTab": "Hosts",
|
||||
"credentialsTab": "Credentials",
|
||||
"selectMultiple": "Select multiple",
|
||||
"selectHosts": "Select hosts",
|
||||
"connectionLabel": "Connection",
|
||||
"authenticationLabel": "Authentication",
|
||||
"generateKeyPairTitle": "Generate Key Pair",
|
||||
|
||||
+35
-14
@@ -6,21 +6,25 @@ import {
|
||||
DropdownMenuContent,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/dropdown-menu";
|
||||
import { ChevronDown, ChevronUp, X } from "lucide-react";
|
||||
import { ChevronDown, ChevronUp, RefreshCw, X } from "lucide-react";
|
||||
import { tabIcon } from "@/shell/tabUtils";
|
||||
import type { Tab } from "@/types/ui-types";
|
||||
import type { Tab, TabType } from "@/types/ui-types";
|
||||
|
||||
const CONNECTION_TAB_TYPES: TabType[] = ["terminal", "rdp", "vnc", "telnet"];
|
||||
|
||||
export function TabBar({
|
||||
tabs,
|
||||
activeTabId,
|
||||
onSetActiveTab,
|
||||
onCloseTab,
|
||||
onRefreshTab,
|
||||
onReorderTabs,
|
||||
}: {
|
||||
tabs: Tab[];
|
||||
activeTabId: string;
|
||||
onSetActiveTab: (id: string) => void;
|
||||
onCloseTab: (id: string) => void;
|
||||
onRefreshTab: (id: string) => void;
|
||||
onReorderTabs: (tabs: Tab[]) => void;
|
||||
}) {
|
||||
const [open, setOpen] = useState(true);
|
||||
@@ -217,16 +221,33 @@ export function TabBar({
|
||||
{tabIcon(tab.type)}
|
||||
{tab.type !== "dashboard" && tab.label}
|
||||
{tab.type !== "dashboard" && (
|
||||
<button
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onCloseTab(tab.id);
|
||||
}}
|
||||
className={`flex items-center justify-center size-5 md:size-4 rounded-sm transition-opacity text-muted-foreground hover:text-foreground hover:bg-muted ml-1 ${active ? "opacity-100" : "opacity-0 group-hover/tab:opacity-100"}`}
|
||||
<div
|
||||
className={`flex items-center gap-0.5 ml-1 ${active ? "opacity-100" : "opacity-0 group-hover/tab:opacity-100"}`}
|
||||
>
|
||||
<X className="size-3" />
|
||||
</button>
|
||||
{CONNECTION_TAB_TYPES.includes(tab.type) && (
|
||||
<button
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onRefreshTab(tab.id);
|
||||
}}
|
||||
title="Refresh connection"
|
||||
className="flex items-center justify-center size-5 md:size-4 rounded-sm transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
|
||||
>
|
||||
<RefreshCw className="size-3" />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onCloseTab(tab.id);
|
||||
}}
|
||||
className="flex items-center justify-center size-5 md:size-4 rounded-sm transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
|
||||
>
|
||||
<X className="size-3" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
@@ -272,7 +293,7 @@ export function TabBar({
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-full w-12.5 rounded-none text-muted-foreground hover:text-foreground"
|
||||
className="h-full w-12.5 border-y-0 border-r-0 border-border rounded-none text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<ChevronDown className="size-4" />
|
||||
</Button>
|
||||
@@ -313,7 +334,7 @@ export function TabBar({
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-full w-12.5 rounded-none text-muted-foreground hover:text-foreground"
|
||||
className="h-full w-12.5 rounded-none border-y-0 border-border text-muted-foreground hover:text-foreground"
|
||||
onClick={() => setOpen((o) => !o)}
|
||||
>
|
||||
<ChevronUp
|
||||
@@ -325,7 +346,7 @@ export function TabBar({
|
||||
{!open && (
|
||||
<button
|
||||
onClick={() => setOpen(true)}
|
||||
className="flex items-center justify-center w-full h-6 bg-sidebar border-b border-border text-muted-foreground hover:text-accent-brand hover:bg-accent-brand/5 transition-colors shrink-0"
|
||||
className="flex items-center justify-center w-full h-6 bg-sidebar border-b border-border text-muted-foreground hover:text-accent-brand hover:bg-accent-brand/5 transition-colors shrink-0"
|
||||
>
|
||||
<ChevronDown className="size-3.5" />
|
||||
</button>
|
||||
|
||||
@@ -229,7 +229,7 @@ export function renderTabContent(
|
||||
return (
|
||||
<EmptyState icon={Monitor} messageKey="guacamole.noHostSelected" />
|
||||
);
|
||||
return <GuacamoleApp hostId={host.id} />;
|
||||
return <GuacamoleApp hostId={host.id} tabId={tab.id} />;
|
||||
|
||||
case "network_graph":
|
||||
return <NetworkGraphCard embedded={false} />;
|
||||
|
||||
+140
-57
@@ -159,14 +159,20 @@ function sshHostToHost(h: SSHHostWithStatus): Host {
|
||||
vncPort: h.vncPort ?? (h.connectionType === "vnc" ? h.port : 5900),
|
||||
telnetPort: h.telnetPort ?? (h.connectionType === "telnet" ? h.port : 23),
|
||||
rdpUser: h.rdpUser,
|
||||
rdpPassword: h.rdpPassword,
|
||||
rdpPassword: (h as any).hasRdpPassword
|
||||
? "existing_password"
|
||||
: (h.rdpPassword ?? ""),
|
||||
domain: h.rdpDomain,
|
||||
security: h.rdpSecurity,
|
||||
ignoreCert: h.rdpIgnoreCert ?? false,
|
||||
vncPassword: h.vncPassword,
|
||||
vncPassword: (h as any).hasVncPassword
|
||||
? "existing_password"
|
||||
: (h.vncPassword ?? ""),
|
||||
vncUser: h.vncUser,
|
||||
telnetUser: h.telnetUser,
|
||||
telnetPassword: h.telnetPassword,
|
||||
telnetPassword: (h as any).hasTelnetPassword
|
||||
? "existing_password"
|
||||
: (h.telnetPassword ?? ""),
|
||||
quickActions: (h.quickActions ?? []).map((a: any) => ({
|
||||
name: a.name,
|
||||
snippetId: String(a.snippetId),
|
||||
@@ -945,14 +951,20 @@ function HostEditor({
|
||||
quickActions:
|
||||
host?.quickActions ?? ([] as { name: string; snippetId: string }[]),
|
||||
rdpUser: host?.rdpUser ?? "",
|
||||
rdpPassword: host?.rdpPassword ?? "",
|
||||
rdpPassword: (host as any)?.hasRdpPassword
|
||||
? "existing_password"
|
||||
: (host?.rdpPassword ?? ""),
|
||||
domain: host?.domain ?? "",
|
||||
security: host?.security ?? "",
|
||||
ignoreCert: host?.ignoreCert ?? false,
|
||||
vncPassword: host?.vncPassword ?? "",
|
||||
vncPassword: (host as any)?.hasVncPassword
|
||||
? "existing_password"
|
||||
: (host?.vncPassword ?? ""),
|
||||
vncUser: host?.vncUser ?? "",
|
||||
telnetUser: host?.telnetUser ?? "",
|
||||
telnetPassword: host?.telnetPassword ?? "",
|
||||
telnetPassword: (host as any)?.hasTelnetPassword
|
||||
? "existing_password"
|
||||
: (host?.telnetPassword ?? ""),
|
||||
guacamoleConfig: host?.guacamoleConfig ?? ({} as Record<string, any>),
|
||||
statsConfig: host?.statsConfig ?? {
|
||||
statusCheckEnabled: true,
|
||||
@@ -1121,14 +1133,23 @@ function HostEditor({
|
||||
telnetPort: Number(form.telnetPort),
|
||||
forceKeyboardInteractive: form.forceKeyboardInteractive,
|
||||
rdpUser: form.rdpUser || null,
|
||||
rdpPassword: form.rdpPassword || null,
|
||||
rdpPassword:
|
||||
form.rdpPassword === "existing_password"
|
||||
? undefined
|
||||
: form.rdpPassword || null,
|
||||
rdpDomain: form.domain || null,
|
||||
rdpSecurity: form.security || null,
|
||||
rdpIgnoreCert: form.ignoreCert,
|
||||
vncPassword: form.vncPassword || null,
|
||||
vncPassword:
|
||||
form.vncPassword === "existing_password"
|
||||
? undefined
|
||||
: form.vncPassword || null,
|
||||
vncUser: form.vncUser || null,
|
||||
telnetUser: form.telnetUser || null,
|
||||
telnetPassword: form.telnetPassword || null,
|
||||
telnetPassword:
|
||||
form.telnetPassword === "existing_password"
|
||||
? undefined
|
||||
: form.telnetPassword || null,
|
||||
jumpHosts: form.jumpHosts,
|
||||
portKnockSequence: form.portKnockSequence,
|
||||
tunnelConnections: form.serverTunnels,
|
||||
@@ -1187,6 +1208,9 @@ function HostEditor({
|
||||
};
|
||||
|
||||
const authMethod = form.authType;
|
||||
const selectedCredential = credentials.find(
|
||||
(c) => c.id === form.credentialId,
|
||||
);
|
||||
|
||||
const handleProtocolToggle = (
|
||||
proto: keyof typeof protocols,
|
||||
@@ -1934,6 +1958,11 @@ function HostEditor({
|
||||
<Input
|
||||
placeholder="root"
|
||||
value={form.username}
|
||||
disabled={
|
||||
authMethod === "credential" &&
|
||||
!!selectedCredential?.username &&
|
||||
!form.overrideCredentialUsername
|
||||
}
|
||||
onChange={(e) => setField("username", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
@@ -1985,13 +2014,23 @@ function HostEditor({
|
||||
</div>
|
||||
</div>
|
||||
{form.keySubTab === "paste" ? (
|
||||
<textarea
|
||||
placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"
|
||||
rows={5}
|
||||
value={form.key}
|
||||
onChange={(e) => setField("key", e.target.value)}
|
||||
className="w-full px-3 py-2 text-[10px] bg-background border border-border text-foreground placeholder:text-muted-foreground resize-none outline-none focus:ring-1 focus:ring-ring font-mono"
|
||||
/>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
{form.key === "existing_key" && (
|
||||
<div className="px-3 py-2 text-[10px] border border-accent-brand/30 bg-accent-brand/5 text-accent-brand">
|
||||
{t("hosts.keySaved")} —{" "}
|
||||
{t("hosts.keyReplaceNotice")}
|
||||
</div>
|
||||
)}
|
||||
<textarea
|
||||
placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"
|
||||
rows={5}
|
||||
value={
|
||||
form.key === "existing_key" ? "" : form.key
|
||||
}
|
||||
onChange={(e) => setField("key", e.target.value)}
|
||||
className="w-full px-3 py-2 text-[10px] bg-background border border-border text-foreground placeholder:text-muted-foreground resize-none outline-none focus:ring-1 focus:ring-ring font-mono"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
<label
|
||||
@@ -1999,9 +2038,11 @@ function HostEditor({
|
||||
>
|
||||
<Upload className="size-4" />
|
||||
<span className="text-xs">
|
||||
{form.key
|
||||
? t("hosts.keyFileLoaded")
|
||||
: t("hosts.keyUploadClick")}
|
||||
{form.key === "existing_key"
|
||||
? t("hosts.keySaved")
|
||||
: form.key
|
||||
? t("hosts.keyFileLoaded")
|
||||
: t("hosts.keyUploadClick")}
|
||||
</span>
|
||||
<input
|
||||
type="file"
|
||||
@@ -2022,7 +2063,9 @@ function HostEditor({
|
||||
onClick={() => setField("key", "")}
|
||||
className="text-[10px] text-destructive self-start"
|
||||
>
|
||||
{t("hosts.clearKey")}
|
||||
{form.key === "existing_key"
|
||||
? t("hosts.replaceKey")
|
||||
: t("hosts.clearKey")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@@ -2079,9 +2122,17 @@ function HostEditor({
|
||||
</label>
|
||||
<select
|
||||
value={form.credentialId}
|
||||
onChange={(e) =>
|
||||
setField("credentialId", e.target.value)
|
||||
}
|
||||
onChange={(e) => {
|
||||
const newId = e.target.value;
|
||||
setField("credentialId", newId);
|
||||
if (!form.overrideCredentialUsername) {
|
||||
const cred = credentials.find(
|
||||
(c) => c.id === newId,
|
||||
);
|
||||
if (cred?.username)
|
||||
setField("username", cred.username);
|
||||
}
|
||||
}}
|
||||
className="flex h-9 w-full border border-border bg-background px-3 py-1 text-xs outline-none focus:ring-1 focus:ring-ring"
|
||||
>
|
||||
<option value="">
|
||||
@@ -2089,38 +2140,34 @@ function HostEditor({
|
||||
</option>
|
||||
{credentials.map((c) => (
|
||||
<option key={c.id} value={c.id}>
|
||||
{c.name} ({c.username})
|
||||
{c.username
|
||||
? `${c.name} (${c.username})`
|
||||
: c.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex items-center justify-between col-span-2 pt-1">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-xs font-medium">
|
||||
{t("hosts.overrideCredentialUsername")}
|
||||
</span>
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
{t("hosts.overrideCredentialUsernameDesc")}
|
||||
</span>
|
||||
</div>
|
||||
<FakeSwitch
|
||||
checked={form.overrideCredentialUsername}
|
||||
onChange={(v) =>
|
||||
setField("overrideCredentialUsername", v)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
{form.overrideCredentialUsername && (
|
||||
<div className="flex flex-col gap-1.5 col-span-2">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{t("hosts.username")}
|
||||
</label>
|
||||
<Input
|
||||
placeholder="root"
|
||||
value={form.username}
|
||||
onChange={(e) =>
|
||||
setField("username", e.target.value)
|
||||
}
|
||||
{selectedCredential?.username && (
|
||||
<div className="flex items-center justify-between col-span-2 pt-1">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-xs font-medium">
|
||||
{t("hosts.overrideCredentialUsername")}
|
||||
</span>
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
{t("hosts.overrideCredentialUsernameDesc")}
|
||||
</span>
|
||||
</div>
|
||||
<FakeSwitch
|
||||
checked={form.overrideCredentialUsername}
|
||||
onChange={(v) => {
|
||||
setField("overrideCredentialUsername", v);
|
||||
if (!v && selectedCredential?.username) {
|
||||
setField(
|
||||
"username",
|
||||
selectedCredential.username,
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@@ -3283,8 +3330,20 @@ function HostEditor({
|
||||
</label>
|
||||
<PasswordInput
|
||||
className="h-8 text-xs pr-8"
|
||||
placeholder="••••••••"
|
||||
value={form.rdpPassword}
|
||||
placeholder={
|
||||
form.rdpPassword === "existing_password"
|
||||
? t("hosts.passwordSaved")
|
||||
: "••••••••"
|
||||
}
|
||||
value={
|
||||
form.rdpPassword === "existing_password"
|
||||
? ""
|
||||
: form.rdpPassword
|
||||
}
|
||||
onFocus={() => {
|
||||
if (form.rdpPassword === "existing_password")
|
||||
setField("rdpPassword", "");
|
||||
}}
|
||||
onChange={(e) => setField("rdpPassword", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
@@ -4059,8 +4118,20 @@ function HostEditor({
|
||||
</label>
|
||||
<PasswordInput
|
||||
className="h-8 text-xs pr-8"
|
||||
placeholder="••••••••"
|
||||
value={form.vncPassword}
|
||||
placeholder={
|
||||
form.vncPassword === "existing_password"
|
||||
? t("hosts.passwordSaved")
|
||||
: "••••••••"
|
||||
}
|
||||
value={
|
||||
form.vncPassword === "existing_password"
|
||||
? ""
|
||||
: form.vncPassword
|
||||
}
|
||||
onFocus={() => {
|
||||
if (form.vncPassword === "existing_password")
|
||||
setField("vncPassword", "");
|
||||
}}
|
||||
onChange={(e) => setField("vncPassword", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
@@ -4443,8 +4514,20 @@ function HostEditor({
|
||||
</label>
|
||||
<PasswordInput
|
||||
className="h-8 text-xs pr-8"
|
||||
placeholder="••••••••"
|
||||
value={form.telnetPassword}
|
||||
placeholder={
|
||||
form.telnetPassword === "existing_password"
|
||||
? t("hosts.passwordSaved")
|
||||
: "••••••••"
|
||||
}
|
||||
value={
|
||||
form.telnetPassword === "existing_password"
|
||||
? ""
|
||||
: form.telnetPassword
|
||||
}
|
||||
onFocus={() => {
|
||||
if (form.telnetPassword === "existing_password")
|
||||
setField("telnetPassword", "");
|
||||
}}
|
||||
onChange={(e) => setField("telnetPassword", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Plus, Search, X } from "lucide-react";
|
||||
import { ListChecks, Plus, Search, X } from "lucide-react";
|
||||
import { SidebarTree } from "@/sidebar/SidebarTree";
|
||||
import { HostManager } from "@/sidebar/HostManager";
|
||||
import type { Host, HostFolder, TabType } from "@/types/ui-types";
|
||||
@@ -19,12 +19,17 @@ export function HostsPanel({
|
||||
const { t } = useTranslation();
|
||||
const [hostSearch, setHostSearch] = useState("");
|
||||
const [managerEditing, setManagerEditing] = useState(false);
|
||||
const [selectionMode, setSelectionMode] = useState(false);
|
||||
|
||||
function handleEditingChange(editing: boolean) {
|
||||
setManagerEditing(editing);
|
||||
onEditingChange?.(editing);
|
||||
}
|
||||
|
||||
function toggleSelectionMode() {
|
||||
setSelectionMode((v) => !v);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col flex-1 min-h-0 overflow-hidden">
|
||||
{!managerEditing && (
|
||||
@@ -46,6 +51,13 @@ export function HostsPanel({
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
title={t("hosts.selectHosts")}
|
||||
onClick={toggleSelectionMode}
|
||||
className={`flex items-center justify-center size-7 rounded-sm shrink-0 transition-colors ${selectionMode ? "text-accent-brand bg-accent-brand/10 border border-accent-brand/30" : "text-muted-foreground/60 hover:text-foreground hover:bg-muted/60 border border-transparent"}`}
|
||||
>
|
||||
<ListChecks className="size-3.5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() =>
|
||||
window.dispatchEvent(new CustomEvent("host-manager:add-host"))
|
||||
@@ -60,13 +72,15 @@ export function HostsPanel({
|
||||
)}
|
||||
|
||||
<div
|
||||
className={`flex-1 min-h-0 overflow-y-auto py-1 ${managerEditing ? "hidden" : ""}`}
|
||||
className={`flex flex-col flex-1 min-h-0 ${managerEditing ? "hidden" : ""}`}
|
||||
>
|
||||
<SidebarTree
|
||||
children={hostTree?.children ?? []}
|
||||
onOpenTab={onOpenTab}
|
||||
onEditHost={onEditHost}
|
||||
query={hostSearch.trim().toLowerCase()}
|
||||
selectionMode={selectionMode}
|
||||
onToggleSelectionMode={toggleSelectionMode}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
+628
-72
@@ -1,17 +1,37 @@
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
Box,
|
||||
Check,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Copy,
|
||||
Cpu,
|
||||
FolderOpen,
|
||||
FolderSearch,
|
||||
Link,
|
||||
MemoryStick,
|
||||
Monitor,
|
||||
MoreHorizontal,
|
||||
Network,
|
||||
Pencil,
|
||||
Pin,
|
||||
Server,
|
||||
Terminal,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubContent,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/dropdown-menu";
|
||||
import { toast } from "sonner";
|
||||
import { bulkUpdateSSHHosts, deleteSSHHost } from "@/main-axios";
|
||||
import type { Host, HostFolder, TabType } from "@/types/ui-types";
|
||||
|
||||
export function isFolder(item: Host | HostFolder): item is HostFolder {
|
||||
@@ -80,9 +100,6 @@ function folderHasMatch(folder: HostFolder, query: string): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Walks the visible tree in render order and pushes every visible row
|
||||
// (folder header + hosts) into `out`. This gives us a flat ordered list
|
||||
// to assign a single global stripe counter across folders and hosts.
|
||||
function collectVisibleRows(
|
||||
children: (Host | HostFolder)[],
|
||||
query: string,
|
||||
@@ -93,7 +110,7 @@ function collectVisibleRows(
|
||||
if (isFolder(child)) {
|
||||
const visible = query ? folderHasMatch(child, query) : true;
|
||||
if (!visible) continue;
|
||||
out.push(child); // folder header row counts
|
||||
out.push(child);
|
||||
const childOpen = query ? true : openSet.has(child.name);
|
||||
if (childOpen) collectVisibleRows(child.children, query, openSet, out);
|
||||
} else {
|
||||
@@ -103,6 +120,29 @@ function collectVisibleRows(
|
||||
return out;
|
||||
}
|
||||
|
||||
function collectAllHosts(children: (Host | HostFolder)[]): Host[] {
|
||||
const out: Host[] = [];
|
||||
for (const child of children) {
|
||||
if (isFolder(child)) {
|
||||
out.push(...collectAllHosts(child.children));
|
||||
} else {
|
||||
out.push(child);
|
||||
}
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
function collectAllFolders(children: (Host | HostFolder)[]): string[] {
|
||||
const names = new Set<string>();
|
||||
for (const child of children) {
|
||||
if (isFolder(child)) {
|
||||
names.add(child.name);
|
||||
for (const f of collectAllFolders(child.children)) names.add(f);
|
||||
}
|
||||
}
|
||||
return Array.from(names).sort();
|
||||
}
|
||||
|
||||
function folderHostCount(folder: HostFolder): {
|
||||
total: number;
|
||||
online: number;
|
||||
@@ -126,25 +166,47 @@ export function HostItem({
|
||||
host,
|
||||
onOpenTab,
|
||||
onEditHost,
|
||||
onDelete,
|
||||
query = "",
|
||||
stripeIndex = 0,
|
||||
selectionMode = false,
|
||||
selected = false,
|
||||
onToggleSelect,
|
||||
isMenuOpen = false,
|
||||
onMenuOpenChange,
|
||||
}: {
|
||||
host: Host;
|
||||
onOpenTab: (type: TabType) => void;
|
||||
onEditHost?: () => void;
|
||||
onDelete: () => void;
|
||||
query?: string;
|
||||
stripeIndex?: number;
|
||||
selectionMode?: boolean;
|
||||
selected?: boolean;
|
||||
onToggleSelect?: () => void;
|
||||
isMenuOpen?: boolean;
|
||||
onMenuOpenChange?: (open: boolean) => void;
|
||||
}) {
|
||||
const [hovered, setHovered] = useState(false);
|
||||
const { t } = useTranslation();
|
||||
const metricsEnabled =
|
||||
host.enableSsh && host.statsConfig?.metricsEnabled !== false;
|
||||
|
||||
if (query && !hostMatchesQuery(host, query)) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`relative flex items-stretch cursor-pointer select-none transition-colors hover:bg-muted/40 ${stripeIndex % 2 === 1 ? "bg-muted/20" : ""}`}
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
className={`group relative flex items-stretch cursor-pointer select-none transition-colors hover:bg-muted/40 ${
|
||||
selected
|
||||
? "bg-accent-brand/5"
|
||||
: stripeIndex % 2 === 1
|
||||
? "bg-muted/20"
|
||||
: ""
|
||||
} ${isMenuOpen ? "bg-muted/40" : ""}`}
|
||||
onClick={() => {
|
||||
if (selectionMode) {
|
||||
onToggleSelect?.();
|
||||
return;
|
||||
}
|
||||
if (host.enableSsh) onOpenTab("terminal");
|
||||
else if (host.enableRdp) onOpenTab("rdp");
|
||||
else if (host.enableVnc) onOpenTab("vnc");
|
||||
@@ -158,62 +220,90 @@ export function HostItem({
|
||||
/>
|
||||
|
||||
<div className="flex flex-col flex-1 min-w-0 px-2.5 pt-2 pb-1.5 gap-1">
|
||||
{/* Name + dot */}
|
||||
{/* Name row */}
|
||||
<div className="flex items-center gap-1.5 min-w-0">
|
||||
{selectionMode && (
|
||||
<div
|
||||
className={`size-3.5 border-2 flex items-center justify-center shrink-0 transition-colors ${selected ? "border-accent-brand bg-accent-brand" : "border-border bg-background"}`}
|
||||
>
|
||||
{selected && <Check className="size-2 text-background" />}
|
||||
</div>
|
||||
)}
|
||||
<span
|
||||
className={`size-1.5 rounded-full shrink-0 ${host.online ? "bg-accent-brand" : "bg-muted-foreground/25"}`}
|
||||
/>
|
||||
<span className="text-[13px] font-medium truncate text-foreground leading-none">
|
||||
{host.name}
|
||||
</span>
|
||||
{host.pin && (
|
||||
<Pin className="size-2.5 text-accent-brand/50 shrink-0" />
|
||||
)}
|
||||
</div>
|
||||
{/* Address — only visible on hover */}
|
||||
|
||||
{/* Address — only visible on hover or while menu is open */}
|
||||
<span
|
||||
className={`text-[11px] text-muted-foreground/55 truncate leading-none pl-3 transition-opacity duration-100 ${hovered ? "opacity-100" : "opacity-0 h-0 overflow-hidden"}`}
|
||||
className={`text-[11px] text-muted-foreground/55 truncate leading-none pl-3 transition-opacity duration-100 group-hover:opacity-100 group-hover:h-auto ${isMenuOpen ? "opacity-100 h-auto" : "opacity-0 h-0 overflow-hidden"}`}
|
||||
>
|
||||
{host.username}@{host.ip}
|
||||
</span>
|
||||
|
||||
{/* Action tray — slides open on hover */}
|
||||
{/* Tag pills */}
|
||||
{host.tags && host.tags.length > 0 && (
|
||||
<div className="flex items-center gap-1 min-w-0 overflow-hidden pl-3">
|
||||
{host.tags.slice(0, 4).map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="text-[9px] px-1 py-px border border-border/50 bg-muted/30 text-muted-foreground/60 lowercase shrink-0 leading-none"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
{host.tags.length > 4 && (
|
||||
<span className="text-[9px] text-muted-foreground/40 shrink-0">
|
||||
+{host.tags.length - 4}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action tray — slides open on CSS hover or while menu is open */}
|
||||
<div
|
||||
className="overflow-hidden transition-all duration-150 ease-out"
|
||||
style={{
|
||||
maxHeight: hovered ? "200px" : "0px",
|
||||
opacity: hovered ? 1 : 0,
|
||||
}}
|
||||
className={`overflow-hidden transition-all duration-150 ease-out max-h-0 opacity-0 group-hover:max-h-[200px] group-hover:opacity-100 ${selectionMode ? "!max-h-0 !opacity-0" : ""} ${isMenuOpen && !selectionMode ? "!max-h-[200px] !opacity-100" : ""}`}
|
||||
>
|
||||
{host.online && (host.cpu != null || host.ram != null) && (
|
||||
<div className="flex items-center gap-3 pl-3">
|
||||
{host.cpu != null && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Cpu className="size-2.5 shrink-0 text-muted-foreground/30" />
|
||||
<div className="w-9 h-[3px] bg-muted-foreground/15 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full ${host.cpu > 80 ? "bg-red-400" : host.cpu > 50 ? "bg-yellow-400" : "bg-accent-brand"}`}
|
||||
style={{ width: `${host.cpu}%` }}
|
||||
/>
|
||||
{host.online &&
|
||||
((host.cpu != null && host.cpu > 0) ||
|
||||
(host.ram != null && host.ram > 0)) && (
|
||||
<div className="flex items-center gap-3 pl-3">
|
||||
{host.cpu != null && host.cpu > 0 && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Cpu className="size-2.5 shrink-0 text-muted-foreground/30" />
|
||||
<div className="w-9 h-[3px] bg-muted-foreground/15 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full ${host.cpu > 80 ? "bg-red-400" : host.cpu > 50 ? "bg-yellow-400" : "bg-accent-brand"}`}
|
||||
style={{ width: `${host.cpu}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-[9px] tabular-nums text-muted-foreground/40">
|
||||
{host.cpu}%
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-[9px] tabular-nums text-muted-foreground/40">
|
||||
{host.cpu}%
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{host.ram != null && (
|
||||
<div className="flex items-center gap-1">
|
||||
<MemoryStick className="size-2.5 shrink-0 text-muted-foreground/30" />
|
||||
<div className="w-9 h-[3px] bg-muted-foreground/15 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full ${host.ram > 80 ? "bg-red-400" : host.ram > 60 ? "bg-yellow-400" : "bg-accent-brand/60"}`}
|
||||
style={{ width: `${host.ram}%` }}
|
||||
/>
|
||||
)}
|
||||
{host.ram != null && host.ram > 0 && (
|
||||
<div className="flex items-center gap-1">
|
||||
<MemoryStick className="size-2.5 shrink-0 text-muted-foreground/30" />
|
||||
<div className="w-9 h-[3px] bg-muted-foreground/15 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full ${host.ram > 80 ? "bg-red-400" : host.ram > 60 ? "bg-yellow-400" : "bg-accent-brand/60"}`}
|
||||
style={{ width: `${host.ram}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-[9px] tabular-nums text-muted-foreground/40">
|
||||
{host.ram}%
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-[9px] tabular-nums text-muted-foreground/40">
|
||||
{host.ram}%
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center flex-wrap gap-1 pt-1.5 pl-2 pb-1">
|
||||
{getSshActions(host).map(({ type, icon: Icon, label }) => (
|
||||
@@ -288,6 +378,162 @@ export function HostItem({
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
<DropdownMenu open={isMenuOpen} onOpenChange={onMenuOpenChange}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
title="More options"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
|
||||
>
|
||||
<MoreHorizontal className="size-3.5" />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="text-xs">
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigator.clipboard.writeText(
|
||||
`${host.username}@${host.ip}`,
|
||||
);
|
||||
toast.success(t("hosts.copiedToClipboard"));
|
||||
}}
|
||||
>
|
||||
<Copy className="size-3.5 mr-2" />
|
||||
{t("hosts.copyAddress")}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger>
|
||||
<Link className="size-3.5 mr-2" />
|
||||
{t("hosts.copyLink")}
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuSubContent>
|
||||
{host.enableSsh && host.enableTerminal && (
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigator.clipboard.writeText(
|
||||
`${window.location.origin}?view=terminal&hostId=${host.id}`,
|
||||
);
|
||||
toast.success(t("hosts.terminalUrlCopied"));
|
||||
}}
|
||||
>
|
||||
<Terminal className="size-3.5 mr-2" />
|
||||
{t("hosts.copyTerminalUrlAction")}
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{host.enableSsh && host.enableFileManager && (
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigator.clipboard.writeText(
|
||||
`${window.location.origin}?view=file-manager&hostId=${host.id}`,
|
||||
);
|
||||
toast.success(t("hosts.fileManagerUrlCopied"));
|
||||
}}
|
||||
>
|
||||
<FolderSearch className="size-3.5 mr-2" />
|
||||
{t("hosts.copyFileManagerUrlAction")}
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{host.enableSsh && host.enableTunnel && (
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigator.clipboard.writeText(
|
||||
`${window.location.origin}?view=tunnel&hostId=${host.id}`,
|
||||
);
|
||||
toast.success(t("hosts.tunnelUrlCopied"));
|
||||
}}
|
||||
>
|
||||
<Network className="size-3.5 mr-2" />
|
||||
{t("hosts.copyTunnelUrlAction")}
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{host.enableSsh && host.enableDocker && (
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigator.clipboard.writeText(
|
||||
`${window.location.origin}?view=docker&hostId=${host.id}`,
|
||||
);
|
||||
toast.success(t("hosts.dockerUrlCopied"));
|
||||
}}
|
||||
>
|
||||
<Box className="size-3.5 mr-2" />
|
||||
{t("hosts.copyDockerUrlAction")}
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{host.enableSsh && metricsEnabled && (
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigator.clipboard.writeText(
|
||||
`${window.location.origin}?view=server-stats&hostId=${host.id}`,
|
||||
);
|
||||
toast.success(t("hosts.serverStatsUrlCopied"));
|
||||
}}
|
||||
>
|
||||
<Server className="size-3.5 mr-2" />
|
||||
{t("hosts.copyServerStatsUrlAction")}
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{host.enableRdp && (
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigator.clipboard.writeText(
|
||||
`${window.location.origin}?view=rdp&hostId=${host.id}`,
|
||||
);
|
||||
toast.success(t("hosts.rdpUrlCopied"));
|
||||
}}
|
||||
>
|
||||
<Monitor className="size-3.5 mr-2" />
|
||||
{t("hosts.copyRdpUrlAction")}
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{host.enableVnc && (
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigator.clipboard.writeText(
|
||||
`${window.location.origin}?view=vnc&hostId=${host.id}`,
|
||||
);
|
||||
toast.success(t("hosts.vncUrlCopied"));
|
||||
}}
|
||||
>
|
||||
<Monitor className="size-3.5 mr-2" />
|
||||
{t("hosts.copyVncUrlAction")}
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{host.enableTelnet && (
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigator.clipboard.writeText(
|
||||
`${window.location.origin}?view=telnet&hostId=${host.id}`,
|
||||
);
|
||||
toast.success(t("hosts.telnetUrlCopied"));
|
||||
}}
|
||||
>
|
||||
<Terminal className="size-3.5 mr-2" />
|
||||
{t("hosts.copyTelnetUrlAction")}
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuSub>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
className="text-destructive focus:text-destructive"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onDelete();
|
||||
}}
|
||||
>
|
||||
<Trash2 className="size-3.5 mr-2" />
|
||||
{t("common.delete")}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -300,19 +546,31 @@ export function FolderItem({
|
||||
depth = 0,
|
||||
onOpenTab,
|
||||
onEditHost,
|
||||
onDeleteHost,
|
||||
query = "",
|
||||
stripeMap,
|
||||
openFolders,
|
||||
onToggleFolder,
|
||||
selectionMode,
|
||||
selectedHostIds,
|
||||
onToggleSelect,
|
||||
openMenuHostId,
|
||||
onMenuOpenChange,
|
||||
}: {
|
||||
folder: HostFolder;
|
||||
depth?: number;
|
||||
onOpenTab: (host: Host, type: TabType) => void;
|
||||
onEditHost?: (host: Host) => void;
|
||||
onDeleteHost: (host: Host) => void;
|
||||
query?: string;
|
||||
stripeMap: Map<Host | HostFolder, number>;
|
||||
openFolders: Set<string>;
|
||||
onToggleFolder: (name: string) => void;
|
||||
selectionMode: boolean;
|
||||
selectedHostIds: Set<string>;
|
||||
onToggleSelect: (id: string) => void;
|
||||
openMenuHostId: string | null;
|
||||
onMenuOpenChange: (hostId: string | null) => void;
|
||||
}) {
|
||||
const { total, online } = folderHostCount(folder);
|
||||
|
||||
@@ -353,10 +611,16 @@ export function FolderItem({
|
||||
depth={depth + 1}
|
||||
onOpenTab={onOpenTab}
|
||||
onEditHost={onEditHost}
|
||||
onDeleteHost={onDeleteHost}
|
||||
query={query}
|
||||
stripeMap={stripeMap}
|
||||
openFolders={openFolders}
|
||||
onToggleFolder={onToggleFolder}
|
||||
selectionMode={selectionMode}
|
||||
selectedHostIds={selectedHostIds}
|
||||
onToggleSelect={onToggleSelect}
|
||||
openMenuHostId={openMenuHostId}
|
||||
onMenuOpenChange={onMenuOpenChange}
|
||||
/>
|
||||
) : (
|
||||
<HostItem
|
||||
@@ -364,8 +628,16 @@ export function FolderItem({
|
||||
host={child}
|
||||
onOpenTab={(t) => onOpenTab(child, t)}
|
||||
onEditHost={onEditHost ? () => onEditHost(child) : undefined}
|
||||
onDelete={() => onDeleteHost(child)}
|
||||
query={query}
|
||||
stripeIndex={stripeMap.get(child) ?? 0}
|
||||
selectionMode={selectionMode}
|
||||
selected={selectedHostIds.has(child.id)}
|
||||
onToggleSelect={() => onToggleSelect(child.id)}
|
||||
isMenuOpen={openMenuHostId === child.id}
|
||||
onMenuOpenChange={(open) =>
|
||||
onMenuOpenChange(open ? child.id : null)
|
||||
}
|
||||
/>
|
||||
),
|
||||
)}
|
||||
@@ -375,19 +647,31 @@ export function FolderItem({
|
||||
);
|
||||
}
|
||||
|
||||
// Top-level tree renderer — owns open state and global stripe index.
|
||||
export function SidebarTree({
|
||||
children,
|
||||
onOpenTab,
|
||||
onEditHost,
|
||||
query = "",
|
||||
selectionMode,
|
||||
onToggleSelectionMode,
|
||||
}: {
|
||||
children: (Host | HostFolder)[];
|
||||
onOpenTab: (host: Host, type: TabType) => void;
|
||||
onEditHost: (host: Host) => void;
|
||||
query?: string;
|
||||
selectionMode: boolean;
|
||||
onToggleSelectionMode: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [openFolders, setOpenFolders] = useState<Set<string>>(new Set());
|
||||
const [selectedHostIds, setSelectedHostIds] = useState<Set<string>>(
|
||||
new Set(),
|
||||
);
|
||||
const [openMenuHostId, setOpenMenuHostId] = useState<string | null>(null);
|
||||
const [confirmDialog, setConfirmDialog] = useState<{
|
||||
message: string;
|
||||
onConfirm: () => Promise<void> | void;
|
||||
} | null>(null);
|
||||
|
||||
function toggleFolder(name: string) {
|
||||
setOpenFolders((prev) => {
|
||||
@@ -397,36 +681,308 @@ export function SidebarTree({
|
||||
});
|
||||
}
|
||||
|
||||
function toggleSelect(id: string) {
|
||||
setSelectedHostIds((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.has(id) ? next.delete(id) : next.add(id);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
function handleDeleteHost(host: Host) {
|
||||
setConfirmDialog({
|
||||
message: t("hosts.deleteHostConfirm", { name: host.name }),
|
||||
onConfirm: async () => {
|
||||
try {
|
||||
await deleteSSHHost(Number(host.id));
|
||||
window.dispatchEvent(new CustomEvent("termix:hosts-changed"));
|
||||
toast.success(t("hosts.deletedCount", { count: 1 }));
|
||||
} catch {
|
||||
toast.error(t("hosts.failedToDeleteCount", { count: 1 }));
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const allHosts = collectAllHosts(children);
|
||||
const allFolders = collectAllFolders(children);
|
||||
|
||||
const visibleRows = collectVisibleRows(children, query, openFolders);
|
||||
const stripeMap = new Map<Host | HostFolder, number>(
|
||||
visibleRows.map((r, i) => [r, i]),
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{children.map((child, i) =>
|
||||
isFolder(child) ? (
|
||||
<FolderItem
|
||||
key={i}
|
||||
folder={child}
|
||||
onOpenTab={onOpenTab}
|
||||
onEditHost={onEditHost}
|
||||
query={query}
|
||||
stripeMap={stripeMap}
|
||||
openFolders={openFolders}
|
||||
onToggleFolder={toggleFolder}
|
||||
/>
|
||||
) : (
|
||||
<HostItem
|
||||
key={i}
|
||||
host={child}
|
||||
onOpenTab={(t) => onOpenTab(child, t)}
|
||||
onEditHost={() => onEditHost(child)}
|
||||
query={query}
|
||||
stripeIndex={stripeMap.get(child) ?? 0}
|
||||
/>
|
||||
),
|
||||
<div className="relative flex flex-col flex-1 min-h-0">
|
||||
<div className="flex-1 min-h-0 overflow-y-auto">
|
||||
{children.map((child, i) =>
|
||||
isFolder(child) ? (
|
||||
<FolderItem
|
||||
key={i}
|
||||
folder={child}
|
||||
onOpenTab={onOpenTab}
|
||||
onEditHost={onEditHost}
|
||||
onDeleteHost={handleDeleteHost}
|
||||
query={query}
|
||||
stripeMap={stripeMap}
|
||||
openFolders={openFolders}
|
||||
onToggleFolder={toggleFolder}
|
||||
selectionMode={selectionMode}
|
||||
selectedHostIds={selectedHostIds}
|
||||
onToggleSelect={toggleSelect}
|
||||
openMenuHostId={openMenuHostId}
|
||||
onMenuOpenChange={setOpenMenuHostId}
|
||||
/>
|
||||
) : (
|
||||
<HostItem
|
||||
key={i}
|
||||
host={child}
|
||||
onOpenTab={(type) => onOpenTab(child, type)}
|
||||
onEditHost={() => onEditHost(child)}
|
||||
onDelete={() => handleDeleteHost(child)}
|
||||
query={query}
|
||||
stripeIndex={stripeMap.get(child) ?? 0}
|
||||
selectionMode={selectionMode}
|
||||
selected={selectedHostIds.has(child.id)}
|
||||
onToggleSelect={() => toggleSelect(child.id)}
|
||||
isMenuOpen={openMenuHostId === child.id}
|
||||
onMenuOpenChange={(open) =>
|
||||
setOpenMenuHostId(open ? child.id : null)
|
||||
}
|
||||
/>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Floating selection bar */}
|
||||
{selectionMode && (
|
||||
<div className="absolute bottom-4 inset-x-3 z-50">
|
||||
<div className="bg-popover border border-border shadow-xl px-2.5 py-2 flex items-center gap-1.5 flex-wrap">
|
||||
<span className="text-xs font-semibold tabular-nums shrink-0">
|
||||
{t("hosts.nSelected", { count: selectedHostIds.size })}
|
||||
</span>
|
||||
<div className="w-px h-4 bg-border mx-0.5" />
|
||||
<button
|
||||
className="text-[10px] text-muted-foreground hover:text-foreground px-1.5 py-1 hover:bg-muted rounded transition-colors"
|
||||
onClick={() => {
|
||||
if (selectedHostIds.size === allHosts.length)
|
||||
setSelectedHostIds(new Set());
|
||||
else setSelectedHostIds(new Set(allHosts.map((h) => h.id)));
|
||||
}}
|
||||
>
|
||||
{selectedHostIds.size === allHosts.length
|
||||
? t("hosts.deselectAll")
|
||||
: t("hosts.selectAll")}
|
||||
</button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
className="text-[10px] text-muted-foreground hover:text-foreground px-1.5 py-1 hover:bg-muted rounded transition-colors flex items-center gap-1 disabled:opacity-40"
|
||||
disabled={selectedHostIds.size === 0}
|
||||
>
|
||||
{t("hosts.featuresMenu")} <ChevronDown className="size-2.5" />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="text-xs">
|
||||
{[
|
||||
{
|
||||
labelKey: "hosts.enableTerminalFeature",
|
||||
field: "enableTerminal",
|
||||
value: true,
|
||||
icon: Terminal,
|
||||
},
|
||||
{
|
||||
labelKey: "hosts.disableTerminalFeature",
|
||||
field: "enableTerminal",
|
||||
value: false,
|
||||
icon: Terminal,
|
||||
},
|
||||
{
|
||||
labelKey: "hosts.enableFilesFeature",
|
||||
field: "enableFileManager",
|
||||
value: true,
|
||||
icon: FolderSearch,
|
||||
},
|
||||
{
|
||||
labelKey: "hosts.disableFilesFeature",
|
||||
field: "enableFileManager",
|
||||
value: false,
|
||||
icon: FolderSearch,
|
||||
},
|
||||
{
|
||||
labelKey: "hosts.enableTunnelsFeature",
|
||||
field: "enableTunnel",
|
||||
value: true,
|
||||
icon: Network,
|
||||
},
|
||||
{
|
||||
labelKey: "hosts.disableTunnelsFeature",
|
||||
field: "enableTunnel",
|
||||
value: false,
|
||||
icon: Network,
|
||||
},
|
||||
{
|
||||
labelKey: "hosts.enableDockerFeature",
|
||||
field: "enableDocker",
|
||||
value: true,
|
||||
icon: Box,
|
||||
},
|
||||
{
|
||||
labelKey: "hosts.disableDockerFeature",
|
||||
field: "enableDocker",
|
||||
value: false,
|
||||
icon: Box,
|
||||
},
|
||||
].map(({ labelKey, field, value, icon: Icon }) => (
|
||||
<DropdownMenuItem
|
||||
key={labelKey}
|
||||
onClick={async () => {
|
||||
const ids = Array.from(selectedHostIds).map(Number);
|
||||
try {
|
||||
await bulkUpdateSSHHosts(ids, { [field]: value });
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("termix:hosts-changed"),
|
||||
);
|
||||
toast.success(
|
||||
t("hosts.updatedCount", { count: ids.length }),
|
||||
);
|
||||
} catch {
|
||||
toast.error(t("hosts.bulkUpdateFailed"));
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon className="size-3.5 mr-2" />
|
||||
{t(labelKey)}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
className="text-[10px] text-muted-foreground hover:text-foreground px-1.5 py-1 hover:bg-muted rounded transition-colors flex items-center gap-1 disabled:opacity-40"
|
||||
disabled={selectedHostIds.size === 0}
|
||||
>
|
||||
{t("hosts.moveMenu")} <ChevronDown className="size-2.5" />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="text-xs">
|
||||
<DropdownMenuItem
|
||||
onClick={async () => {
|
||||
const ids = Array.from(selectedHostIds).map(Number);
|
||||
try {
|
||||
await bulkUpdateSSHHosts(ids, { folder: "" });
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("termix:hosts-changed"),
|
||||
);
|
||||
toast.success(t("hosts.movedToRoot"));
|
||||
} catch {
|
||||
toast.error(t("hosts.failedToMoveHosts"));
|
||||
}
|
||||
}}
|
||||
>
|
||||
<FolderOpen className="size-3.5 mr-2" />
|
||||
{t("hosts.noFolderOption")}
|
||||
</DropdownMenuItem>
|
||||
{allFolders.map((f) => (
|
||||
<DropdownMenuItem
|
||||
key={f}
|
||||
onClick={async () => {
|
||||
const ids = Array.from(selectedHostIds).map(Number);
|
||||
try {
|
||||
await bulkUpdateSSHHosts(ids, { folder: f });
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("termix:hosts-changed"),
|
||||
);
|
||||
toast.success(t("hosts.movedToFolder", { folder: f }));
|
||||
} catch {
|
||||
toast.error(t("hosts.failedToMoveHosts"));
|
||||
}
|
||||
}}
|
||||
>
|
||||
<FolderOpen className="size-3.5 mr-2" />
|
||||
{f}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<button
|
||||
className="text-[10px] text-destructive hover:text-destructive px-1.5 py-1 hover:bg-destructive/10 rounded transition-colors disabled:opacity-40"
|
||||
disabled={selectedHostIds.size === 0}
|
||||
onClick={() => {
|
||||
setConfirmDialog({
|
||||
message: t("hosts.deleteHostsConfirm", {
|
||||
count: selectedHostIds.size,
|
||||
plural: selectedHostIds.size !== 1 ? "s" : "",
|
||||
}),
|
||||
onConfirm: async () => {
|
||||
const ids = Array.from(selectedHostIds);
|
||||
const results = await Promise.allSettled(
|
||||
ids.map((id) => deleteSSHHost(Number(id))),
|
||||
);
|
||||
const succeeded = results.filter(
|
||||
(r) => r.status === "fulfilled",
|
||||
).length;
|
||||
const failed = results.filter(
|
||||
(r) => r.status === "rejected",
|
||||
).length;
|
||||
setSelectedHostIds(new Set());
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("termix:hosts-changed"),
|
||||
);
|
||||
if (succeeded > 0)
|
||||
toast.success(
|
||||
t("hosts.deletedCount", { count: succeeded }),
|
||||
);
|
||||
if (failed > 0)
|
||||
toast.error(
|
||||
t("hosts.failedToDeleteCount", { count: failed }),
|
||||
);
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
{t("hosts.deleteSelected")}
|
||||
</button>
|
||||
<div className="flex-1" />
|
||||
<button
|
||||
className="text-[10px] text-muted-foreground hover:text-foreground px-1.5 py-1 hover:bg-muted rounded transition-colors"
|
||||
onClick={() => {
|
||||
onToggleSelectionMode();
|
||||
setSelectedHostIds(new Set());
|
||||
}}
|
||||
>
|
||||
{t("hosts.cancelSelection")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
|
||||
{/* Confirm dialog */}
|
||||
{confirmDialog && (
|
||||
<div className="absolute inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm p-4">
|
||||
<div className="bg-popover border border-border shadow-xl w-full max-w-xs flex flex-col gap-4 p-4">
|
||||
<p className="text-sm text-foreground">{confirmDialog.message}</p>
|
||||
<div className="flex justify-end gap-2">
|
||||
<button
|
||||
onClick={() => setConfirmDialog(null)}
|
||||
className="px-3 py-1.5 text-xs border border-border text-muted-foreground hover:text-foreground hover:bg-muted rounded transition-colors"
|
||||
>
|
||||
{t("hosts.cancelBtn")}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
confirmDialog.onConfirm();
|
||||
setConfirmDialog(null);
|
||||
}}
|
||||
className="px-3 py-1.5 text-xs bg-destructive text-destructive-foreground hover:bg-destructive/90 rounded transition-colors"
|
||||
>
|
||||
{t("hosts.deleteConfirmBtn")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user