mirror of
https://github.com/Termix-SSH/Termix.git
synced 2026-07-15 04:43:36 +00:00
feat: seperated out sharing, improved host/credential loading, reduced host manager bloat
This commit is contained in:
LukeGus
Generated
+1201
-986
File diff suppressed because it is too large
Load Diff
+10
-9
@@ -37,6 +37,7 @@
|
||||
"build:mac-dev": "npm run build && npm run electron:rebuild && npm run electron:patch-builder && electron-builder --mac dir --publish=never"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tanstack/react-virtual": "^3.13.26",
|
||||
"axios": "^1.15.2",
|
||||
"bcryptjs": "^3.0.3",
|
||||
"better-sqlite3": "^12.9.0",
|
||||
@@ -69,8 +70,8 @@
|
||||
"@codemirror/search": "^6.7.0",
|
||||
"@codemirror/theme-one-dark": "^6.1.3",
|
||||
"@codemirror/view": "^6.41.1",
|
||||
"@commitlint/cli": "^20.5.0",
|
||||
"@commitlint/config-conventional": "^20.5.0",
|
||||
"@commitlint/cli": "^21.0.1",
|
||||
"@commitlint/config-conventional": "^21.0.1",
|
||||
"@deadendjs/swagger-jsdoc": "^8.1.2",
|
||||
"@electron/notarize": "^3.1.1",
|
||||
"@electron/rebuild": "^4.0.4",
|
||||
@@ -102,7 +103,7 @@
|
||||
"@types/js-yaml": "^4.0.9",
|
||||
"@types/jsonwebtoken": "^9.0.10",
|
||||
"@types/multer": "^2.1.0",
|
||||
"@types/node": "^24.12.2",
|
||||
"@types/node": "^25.9.1",
|
||||
"@types/qrcode": "^1.5.6",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
@@ -114,16 +115,16 @@
|
||||
"@uiw/react-codemirror": "^4.25.9",
|
||||
"@vitejs/plugin-react": "^6.0.1",
|
||||
"@xterm/addon-clipboard": "^0.2.0",
|
||||
"@xterm/addon-fit": "^0.10.0",
|
||||
"@xterm/addon-unicode11": "^0.8.0",
|
||||
"@xterm/addon-web-links": "^0.11.0",
|
||||
"@xterm/xterm": "^5.5.0",
|
||||
"@xterm/addon-fit": "^0.11.0",
|
||||
"@xterm/addon-unicode11": "^0.9.0",
|
||||
"@xterm/addon-web-links": "^0.12.0",
|
||||
"@xterm/xterm": "^6.0.0",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"cmdk": "^1.1.1",
|
||||
"concurrently": "^9.2.1",
|
||||
"cytoscape": "^3.33.2",
|
||||
"electron": "^41.3.0",
|
||||
"electron": "^42.2.0",
|
||||
"electron-builder": "^26.8.1",
|
||||
"eslint": "^9.0.0",
|
||||
"eslint-plugin-react-hooks": "^7.1.1",
|
||||
@@ -134,7 +135,7 @@
|
||||
"husky": "^9.1.7",
|
||||
"i18next": "^26.0.8",
|
||||
"i18next-browser-languagedetector": "^8.2.1",
|
||||
"lint-staged": "^16.4.0",
|
||||
"lint-staged": "^17.0.5",
|
||||
"lucide-react": "^1.11.0",
|
||||
"prettier": "3.8.3",
|
||||
"radix-ui": "^1.4.3",
|
||||
|
||||
@@ -1451,7 +1451,7 @@ router.post(
|
||||
const publicKeyString =
|
||||
typeof publicKeyPem === "string"
|
||||
? publicKeyPem
|
||||
: publicKeyPem.toString("utf8");
|
||||
: (publicKeyPem as Buffer).toString("utf8");
|
||||
|
||||
let keyType = "unknown";
|
||||
const asymmetricKeyType = privateKeyObj.asymmetricKeyType;
|
||||
|
||||
+12
-4
@@ -133,6 +133,7 @@ export function AppShell({
|
||||
Array(6).fill(null),
|
||||
);
|
||||
const [realHostTree, setRealHostTree] = useState<HostFolder | null>(null);
|
||||
const [hostsLoading, setHostsLoading] = useState(true);
|
||||
const [allHosts, setAllHosts] = useState<Host[]>([]);
|
||||
const [isAdmin, setIsAdmin] = useState(false);
|
||||
|
||||
@@ -256,6 +257,8 @@ export function AppShell({
|
||||
setRealHostTree(buildHostTree(raw));
|
||||
} catch {
|
||||
// Keep empty state on error
|
||||
} finally {
|
||||
setHostsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
@@ -482,7 +485,9 @@ export function AppShell({
|
||||
// Sidebar panel content — shared between desktop inline sidebar and mobile sheet
|
||||
const sidebarPanelContent = (
|
||||
<div className="flex flex-col flex-1 min-h-0 overflow-hidden">
|
||||
{railView === "hosts" && (
|
||||
<div
|
||||
className={`flex flex-col flex-1 min-h-0 ${railView === "hosts" ? "" : "hidden"}`}
|
||||
>
|
||||
<HostsPanel
|
||||
onOpenTab={(host, type) => {
|
||||
connectHost(host, type);
|
||||
@@ -490,13 +495,16 @@ export function AppShell({
|
||||
}}
|
||||
onEditHost={editHostInManager}
|
||||
hostTree={realHostTree ?? undefined}
|
||||
loading={hostsLoading}
|
||||
onEditingChange={setSidebarEditing}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{railView === "credentials" && (
|
||||
<div
|
||||
className={`flex flex-col flex-1 min-h-0 ${railView === "credentials" ? "" : "hidden"}`}
|
||||
>
|
||||
<CredentialsPanel onEditingChange={setSidebarEditing} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{railView === "quick-connect" && (
|
||||
<QuickConnectPanel
|
||||
|
||||
@@ -890,6 +890,10 @@ const TerminalInner = forwardRef<TerminalHandle, SSHTerminalProps>(
|
||||
|
||||
if (isEmbeddedMode()) {
|
||||
baseWsUrl = "ws://127.0.0.1:30002";
|
||||
const storedJwt = localStorage.getItem("jwt");
|
||||
if (storedJwt) {
|
||||
baseWsUrl += `?token=${encodeURIComponent(storedJwt)}`;
|
||||
}
|
||||
} else if (!configuredUrl) {
|
||||
console.error("No configured server URL available for Electron SSH");
|
||||
setIsConnected(false);
|
||||
@@ -1864,7 +1868,6 @@ const TerminalInner = forwardRef<TerminalHandle, SSHTerminalProps>(
|
||||
terminal.options.fontSize = config.fontSize;
|
||||
terminal.options.fontFamily = fontFamily;
|
||||
terminal.options.rightClickSelectsWord = config.rightClickSelectsWord;
|
||||
terminal.options.fastScrollModifier = config.fastScrollModifier;
|
||||
terminal.options.fastScrollSensitivity = config.fastScrollSensitivity;
|
||||
terminal.options.minimumContrastRatio = config.minimumContrastRatio;
|
||||
terminal.options.letterSpacing = config.letterSpacing;
|
||||
@@ -1934,11 +1937,9 @@ const TerminalInner = forwardRef<TerminalHandle, SSHTerminalProps>(
|
||||
fontFamily,
|
||||
allowTransparency: true, // MUST be set before open()
|
||||
convertEol: false,
|
||||
windowsMode: false,
|
||||
macOptionIsMeta: false,
|
||||
macOptionClickForcesSelection: false,
|
||||
rightClickSelectsWord: config.rightClickSelectsWord,
|
||||
fastScrollModifier: config.fastScrollModifier,
|
||||
fastScrollSensitivity: config.fastScrollSensitivity,
|
||||
allowProposedApi: true,
|
||||
minimumContrastRatio: config.minimumContrastRatio,
|
||||
@@ -1993,6 +1994,26 @@ const TerminalInner = forwardRef<TerminalHandle, SSHTerminalProps>(
|
||||
|
||||
terminal.open(xtermRef.current);
|
||||
|
||||
terminal.attachCustomWheelEventHandler((ev) => {
|
||||
const cfg = {
|
||||
...DEFAULT_TERMINAL_CONFIG,
|
||||
...hostConfig.terminalConfig,
|
||||
};
|
||||
const mod = cfg.fastScrollModifier;
|
||||
const modHeld =
|
||||
(mod === "alt" && ev.altKey) ||
|
||||
(mod === "ctrl" && ev.ctrlKey) ||
|
||||
(mod === "shift" && ev.shiftKey);
|
||||
if (modHeld) {
|
||||
const lines = Math.round(
|
||||
(Math.abs(ev.deltaY) / 100) * (cfg.fastScrollSensitivity ?? 5),
|
||||
);
|
||||
terminal.scrollLines(ev.deltaY > 0 ? lines : -lines);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
fitAddonRef.current?.fit();
|
||||
if (terminal.cols < 10 || terminal.rows < 3) {
|
||||
requestAnimationFrame(() => {
|
||||
|
||||
@@ -552,13 +552,24 @@
|
||||
"failedToDeployKey2": "Failed to deploy key",
|
||||
"deletedCount": "Deleted {{count}} hosts",
|
||||
"failedToDeleteCount": "Failed to delete {{count}} hosts",
|
||||
"duplicatedHost": "Duplicated \"{{name}}\"",
|
||||
"failedToDuplicateHost": "Failed to duplicate host",
|
||||
"updatedCount": "Updated {{count}} hosts",
|
||||
"friendlyNameLabel": "Friendly Name",
|
||||
"descriptionLabel": "Description",
|
||||
"loadingHost": "Loading host...",
|
||||
"loadingHosts": "Loading hosts...",
|
||||
"loadingCredentials": "Loading credentials...",
|
||||
"noHostsYet": "No hosts yet",
|
||||
"noHostsMatchSearch": "No hosts match your search",
|
||||
"hostNotFound": "Host not found",
|
||||
"searchHosts": "Search hosts...",
|
||||
"addHost": "Add Host",
|
||||
"shareHost": "Share Host",
|
||||
"shareHostTitle": "Share: {{name}}",
|
||||
"sharing": {
|
||||
"requiresCredential": "This host must use a credential to enable sharing. Edit the host and assign a credential first."
|
||||
},
|
||||
"guac": {
|
||||
"connection": "Connection",
|
||||
"authentication": "Authentication",
|
||||
|
||||
@@ -2771,6 +2771,10 @@ export async function loginUser(
|
||||
}
|
||||
}
|
||||
|
||||
if (response.data.token) {
|
||||
localStorage.setItem("jwt", response.data.token);
|
||||
}
|
||||
|
||||
if (response.data.success && !response.data.requires_totp) {
|
||||
markUserAuthenticated();
|
||||
}
|
||||
|
||||
@@ -55,7 +55,6 @@ export function CredentialsPanel({
|
||||
|
||||
<div className="flex flex-col flex-1 min-h-0">
|
||||
<HostManager
|
||||
initialSection="credentials"
|
||||
hideListHeader
|
||||
externalSearch={managerEditing ? undefined : search}
|
||||
onEditingChange={handleEditingChange}
|
||||
|
||||
+53
-2028
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,318 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
ArrowLeft,
|
||||
ListChecks,
|
||||
Plus,
|
||||
Shield,
|
||||
User,
|
||||
Users,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "@/components/button";
|
||||
import { Input } from "@/components/input";
|
||||
import { SectionCard } from "@/components/section-card";
|
||||
import {
|
||||
getHostAccess,
|
||||
shareHost,
|
||||
revokeHostAccess,
|
||||
getUserList,
|
||||
getRoles,
|
||||
} from "@/main-axios";
|
||||
import type { Host } from "@/types/ui-types";
|
||||
|
||||
export function HostShareModal({
|
||||
open,
|
||||
onClose,
|
||||
host,
|
||||
}: {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
host: Host | null;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [shareType, setShareType] = useState<"user" | "role">("user");
|
||||
const [shareGranteeId, setShareGranteeId] = useState("");
|
||||
const [shareExpiryHours, setShareExpiryHours] = useState("");
|
||||
const [accessList, setAccessList] = useState<any[]>([]);
|
||||
const [shareUsers, setShareUsers] = useState<
|
||||
{ id: string; username: string }[]
|
||||
>([]);
|
||||
const [shareRoles, setShareRoles] = useState<{ id: string; name: string }[]>(
|
||||
[],
|
||||
);
|
||||
const [sharingLoaded, setSharingLoaded] = useState(false);
|
||||
const [sharingLoadError, setSharingLoadError] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || !host) return;
|
||||
if (sharingLoaded) return;
|
||||
setSharingLoaded(true);
|
||||
Promise.all([
|
||||
getHostAccess(Number(host.id)).catch(() => ({ accessList: [] })),
|
||||
getUserList().catch(() => ({ users: [] })),
|
||||
getRoles().catch(() => ({ roles: [] })),
|
||||
])
|
||||
.then(([accessRes, usersRes, rolesRes]) => {
|
||||
setAccessList((accessRes as any)?.accessList ?? []);
|
||||
setShareUsers(
|
||||
((usersRes as any)?.users ?? []).map((u: any) => ({
|
||||
id: String(u.id ?? u.userId),
|
||||
username: u.username,
|
||||
})),
|
||||
);
|
||||
setShareRoles(
|
||||
((rolesRes as any)?.roles ?? []).map((r: any) => ({
|
||||
id: String(r.id),
|
||||
name: r.name,
|
||||
})),
|
||||
);
|
||||
})
|
||||
.catch(() => setSharingLoadError(true));
|
||||
}, [open, host, sharingLoaded]);
|
||||
|
||||
useEffect(() => {
|
||||
setSharingLoaded(false);
|
||||
setSharingLoadError(false);
|
||||
setAccessList([]);
|
||||
setShareGranteeId("");
|
||||
setShareExpiryHours("");
|
||||
setShareType("user");
|
||||
}, [host?.id]);
|
||||
|
||||
async function refreshAccessList() {
|
||||
if (!host) return;
|
||||
const res = await getHostAccess(Number(host.id));
|
||||
setAccessList((res as any)?.accessList ?? []);
|
||||
}
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
const hasCredential = !!host?.credentialId;
|
||||
|
||||
return (
|
||||
<div className="absolute inset-0 z-20 flex flex-col bg-sidebar">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-2 px-3 py-2 shrink-0 border-b border-border text-xs text-muted-foreground hover:text-foreground">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="flex items-center gap-2 hover:text-foreground transition-colors"
|
||||
>
|
||||
<ArrowLeft className="size-3.5 shrink-0" />
|
||||
<span>{t("hosts.shareHostTitle", { name: host?.name ?? "" })}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Scrollable content */}
|
||||
<div className="flex flex-col flex-1 min-h-0 overflow-y-auto p-3 gap-3">
|
||||
{!hasCredential && host !== null && (
|
||||
<div className="flex items-start gap-3 p-3 border border-yellow-500/30 bg-yellow-500/5 text-xs text-yellow-500">
|
||||
<Shield className="size-3.5 shrink-0 mt-0.5" />
|
||||
<div>{t("hosts.sharing.requiresCredential")}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{sharingLoadError && hasCredential && (
|
||||
<div className="flex items-start gap-3 p-3 border border-destructive/30 bg-destructive/5 text-xs text-destructive">
|
||||
<Shield className="size-3.5 shrink-0 mt-0.5" />
|
||||
<div>{t("hosts.guac.sharingLoadError")}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasCredential && (
|
||||
<>
|
||||
<SectionCard
|
||||
title={t("hosts.guac.shareHostSection")}
|
||||
icon={<Users className="size-3.5" />}
|
||||
>
|
||||
<div className="flex flex-col gap-4 py-3">
|
||||
<div className="flex gap-2">
|
||||
{(["user", "role"] as const).map((shareTypeOpt) => (
|
||||
<button
|
||||
key={shareTypeOpt}
|
||||
onClick={() => {
|
||||
setShareType(shareTypeOpt);
|
||||
setShareGranteeId("");
|
||||
}}
|
||||
className={`px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest border transition-colors ${shareType === shareTypeOpt ? "border-accent-brand/40 bg-accent-brand/10 text-accent-brand" : "border-border text-muted-foreground hover:text-foreground"}`}
|
||||
>
|
||||
{shareTypeOpt === "user" ? (
|
||||
<>
|
||||
<User className="size-3 inline mr-1" />
|
||||
{t("hosts.guac.shareWithUser")}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Shield className="size-3 inline mr-1" />
|
||||
{t("hosts.guac.shareWithRole")}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{shareType === "user"
|
||||
? t("hosts.guac.selectUser")
|
||||
: t("hosts.guac.selectRole")}
|
||||
</label>
|
||||
<select
|
||||
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"
|
||||
value={shareGranteeId}
|
||||
onChange={(e) => setShareGranteeId(e.target.value)}
|
||||
>
|
||||
<option value="">
|
||||
{shareType === "user"
|
||||
? t("hosts.guac.selectUserOption")
|
||||
: t("hosts.guac.selectRoleOption")}
|
||||
</option>
|
||||
{shareType === "user"
|
||||
? shareUsers.map((u) => (
|
||||
<option key={u.id} value={u.id}>
|
||||
{u.username}
|
||||
</option>
|
||||
))
|
||||
: shareRoles.map((r) => (
|
||||
<option key={r.id} value={r.id}>
|
||||
{r.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{t("hosts.guac.expiresInHours")}
|
||||
</label>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder={t("hosts.guac.noExpiryPlaceholder")}
|
||||
value={shareExpiryHours}
|
||||
onChange={(e) => setShareExpiryHours(e.target.value)}
|
||||
className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
|
||||
disabled={!shareGranteeId}
|
||||
onClick={async () => {
|
||||
try {
|
||||
await shareHost(Number(host!.id), {
|
||||
targetType: shareType,
|
||||
...(shareType === "user"
|
||||
? { targetUserId: shareGranteeId }
|
||||
: { targetRoleId: Number(shareGranteeId) }),
|
||||
permissionLevel: "view",
|
||||
...(shareExpiryHours
|
||||
? { durationHours: Number(shareExpiryHours) }
|
||||
: {}),
|
||||
});
|
||||
await refreshAccessList();
|
||||
setShareGranteeId("");
|
||||
setShareExpiryHours("");
|
||||
toast.success(t("hosts.hostSharedSuccessfully"));
|
||||
} catch {
|
||||
toast.error(t("hosts.failedToShareHost"));
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Plus className="size-3.5 mr-1.5" />
|
||||
{t("hosts.guac.shareBtn")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</SectionCard>
|
||||
|
||||
<SectionCard
|
||||
title={t("hosts.guac.currentAccess")}
|
||||
icon={<ListChecks className="size-3.5" />}
|
||||
>
|
||||
<div className="py-2">
|
||||
{accessList.length === 0 && (
|
||||
<div className="px-2 py-4 text-xs text-muted-foreground/50 text-center">
|
||||
{t("hosts.guac.noAccessEntries")}
|
||||
</div>
|
||||
)}
|
||||
{accessList.map((r: any, i: number) => {
|
||||
const expired =
|
||||
r.expiresAt && new Date(r.expiresAt) < new Date();
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className="flex flex-col gap-1 px-2 py-2.5 border-b border-border last:border-0 text-xs"
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-1.5 min-w-0">
|
||||
{r.targetType === "user" ? (
|
||||
<User className="size-3 text-muted-foreground shrink-0" />
|
||||
) : (
|
||||
<Shield className="size-3 text-muted-foreground shrink-0" />
|
||||
)}
|
||||
<span className="font-semibold truncate">
|
||||
{r.username ??
|
||||
r.roleName ??
|
||||
r.roleDisplayName ??
|
||||
r.userId ??
|
||||
r.roleId}
|
||||
</span>
|
||||
<span className="text-muted-foreground capitalize shrink-0">
|
||||
({r.targetType})
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 text-[10px] px-2 text-destructive hover:bg-destructive/10 shrink-0"
|
||||
onClick={async () => {
|
||||
try {
|
||||
await revokeHostAccess(Number(host!.id), r.id);
|
||||
setAccessList((prev) =>
|
||||
prev.filter((_, idx) => idx !== i),
|
||||
);
|
||||
toast.success(t("hosts.accessRevoked"));
|
||||
} catch {
|
||||
toast.error(t("hosts.failedToRevokeAccess"));
|
||||
}
|
||||
}}
|
||||
>
|
||||
{t("hosts.guac.revokeBtn")}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-[10px] text-muted-foreground pl-4">
|
||||
<span>
|
||||
{t("hosts.guac.grantedByHeader")}:{" "}
|
||||
<span className="text-foreground/70">
|
||||
{r.grantedByUsername ?? "—"}
|
||||
</span>
|
||||
</span>
|
||||
<span className={expired ? "text-destructive" : ""}>
|
||||
{t("hosts.guac.expiresHeader")}:{" "}
|
||||
{expired ? (
|
||||
<span className="inline-flex items-center gap-0.5 text-destructive">
|
||||
<X className="size-3" />
|
||||
{t("hosts.guac.expiredLabel")}
|
||||
</span>
|
||||
) : r.expiresAt ? (
|
||||
<span className="text-foreground/70">
|
||||
{new Date(r.expiresAt).toLocaleDateString()}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-foreground/70">
|
||||
{t("hosts.guac.neverLabel")}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</SectionCard>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,25 +1,57 @@
|
||||
import { useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { ListChecks, Plus, Search, X } from "lucide-react";
|
||||
import {
|
||||
Download,
|
||||
ListChecks,
|
||||
Plus,
|
||||
RefreshCw,
|
||||
Search,
|
||||
Upload,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { SidebarTree } from "@/sidebar/SidebarTree";
|
||||
import { HostManager } from "@/sidebar/HostManager";
|
||||
import { HostShareModal } from "@/sidebar/HostShareModal";
|
||||
import { Button } from "@/components/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/dropdown-menu";
|
||||
import { getSSHHosts, bulkImportSSHHosts } from "@/main-axios";
|
||||
import type { SSHHostWithStatus } from "@/main-axios";
|
||||
import type { Host, HostFolder, TabType } from "@/types/ui-types";
|
||||
|
||||
export function HostsPanel({
|
||||
onOpenTab,
|
||||
onEditHost,
|
||||
hostTree,
|
||||
loading,
|
||||
onEditingChange,
|
||||
}: {
|
||||
onOpenTab: (host: Host, type: TabType) => void;
|
||||
onEditHost: (host: Host) => void;
|
||||
hostTree?: HostFolder;
|
||||
loading?: boolean;
|
||||
onEditingChange?: (editing: boolean) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [hostSearch, setHostSearch] = useState("");
|
||||
const [managerEditing, setManagerEditing] = useState(false);
|
||||
const [selectionMode, setSelectionMode] = useState(false);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [rawHosts, setRawHosts] = useState<SSHHostWithStatus[]>([]);
|
||||
const [shareModalHost, setShareModalHost] = useState<Host | null>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const importOverwriteRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
getSSHHosts()
|
||||
.then(setRawHosts)
|
||||
.catch(() => {});
|
||||
}, []);
|
||||
|
||||
function handleEditingChange(editing: boolean) {
|
||||
setManagerEditing(editing);
|
||||
@@ -30,11 +62,99 @@ export function HostsPanel({
|
||||
setSelectionMode((v) => !v);
|
||||
}
|
||||
|
||||
async function handleRefresh() {
|
||||
setRefreshing(true);
|
||||
try {
|
||||
const hosts = await getSSHHosts();
|
||||
setRawHosts(hosts);
|
||||
window.dispatchEvent(new CustomEvent("termix:hosts-changed"));
|
||||
} catch {
|
||||
// best-effort
|
||||
} finally {
|
||||
setRefreshing(false);
|
||||
}
|
||||
}
|
||||
|
||||
function handleExportHosts() {
|
||||
const data = JSON.stringify({ hosts: rawHosts }, null, 2);
|
||||
const blob = new Blob([data], { type: "application/json" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "termix-hosts.json";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
toast.success(t("hosts.hostsExported"));
|
||||
}
|
||||
|
||||
function handleDownloadSample() {
|
||||
const sample = JSON.stringify(
|
||||
{
|
||||
hosts: [
|
||||
{
|
||||
name: "Web Server (Production)",
|
||||
ip: "192.168.1.100",
|
||||
username: "admin",
|
||||
authType: "password",
|
||||
password: "your_secure_password_here",
|
||||
folder: "Production",
|
||||
tags: ["web", "production", "nginx"],
|
||||
pin: true,
|
||||
notes: "Main production web server running Nginx",
|
||||
enableSsh: true,
|
||||
enableRdp: false,
|
||||
enableVnc: false,
|
||||
enableTelnet: false,
|
||||
sshPort: 22,
|
||||
enableTerminal: true,
|
||||
enableTunnel: false,
|
||||
enableFileManager: true,
|
||||
enableDocker: false,
|
||||
defaultPath: "/var/www",
|
||||
},
|
||||
{
|
||||
name: "Database Server",
|
||||
ip: "192.168.1.101",
|
||||
username: "dbadmin",
|
||||
authType: "key",
|
||||
key: "-----BEGIN OPENSSH PRIVATE KEY-----\nYour SSH private key content here\n-----END OPENSSH PRIVATE KEY-----",
|
||||
keyPassword: "optional_key_passphrase",
|
||||
keyType: "ssh-ed25519",
|
||||
folder: "Production",
|
||||
tags: ["database", "production", "postgresql"],
|
||||
enableSsh: true,
|
||||
enableRdp: false,
|
||||
enableVnc: false,
|
||||
enableTelnet: false,
|
||||
sshPort: 22,
|
||||
enableTerminal: true,
|
||||
enableTunnel: true,
|
||||
enableFileManager: false,
|
||||
enableDocker: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
null,
|
||||
2,
|
||||
);
|
||||
const blob = new Blob([sample], { type: "application/json" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "termix-hosts-sample.json";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col flex-1 min-h-0 overflow-hidden">
|
||||
<div className="relative flex flex-col flex-1 min-h-0 overflow-hidden">
|
||||
{!managerEditing && (
|
||||
<div className="flex items-center gap-1.5 px-2 py-1.5 shrink-0 border-b border-border/60">
|
||||
<div className="flex items-center gap-2 px-2.5 h-7 bg-muted/60 border border-border/60 rounded-sm flex-1 min-w-0">
|
||||
<div className="flex flex-col px-2 py-1.5 shrink-0 border-b border-border/60 gap-1.5">
|
||||
<div className="flex items-center gap-2 px-2.5 h-7 bg-muted/60 border border-border/60 rounded-sm">
|
||||
<Search className="size-3 text-muted-foreground/60 shrink-0" />
|
||||
<input
|
||||
value={hostSearch}
|
||||
@@ -51,13 +171,128 @@ export function HostsPanel({
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".json"
|
||||
className="hidden"
|
||||
onChange={async (e) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
e.target.value = "";
|
||||
try {
|
||||
const text = await file.text();
|
||||
const parsed = JSON.parse(text);
|
||||
const hostsArray = Array.isArray(parsed)
|
||||
? parsed
|
||||
: (parsed.hosts ?? []);
|
||||
if (!Array.isArray(hostsArray) || hostsArray.length === 0) {
|
||||
toast.error("No hosts found in file");
|
||||
return;
|
||||
}
|
||||
if (hostsArray.length > 100) {
|
||||
toast.error("Cannot import more than 100 hosts at once");
|
||||
return;
|
||||
}
|
||||
const normalized = hostsArray.map((h: any) => ({
|
||||
...h,
|
||||
port: h.port ?? h.sshPort ?? 22,
|
||||
enableSsh: h.enableSsh ?? h.connectionType === "ssh",
|
||||
enableRdp: h.enableRdp ?? h.connectionType === "rdp",
|
||||
enableVnc: h.enableVnc ?? h.connectionType === "vnc",
|
||||
enableTelnet: h.enableTelnet ?? h.connectionType === "telnet",
|
||||
}));
|
||||
const result = await bulkImportSSHHosts(
|
||||
normalized,
|
||||
importOverwriteRef.current,
|
||||
);
|
||||
const hosts = await getSSHHosts();
|
||||
setRawHosts(hosts);
|
||||
window.dispatchEvent(new CustomEvent("termix:hosts-changed"));
|
||||
const msg = [
|
||||
result.success ? `${result.success} imported` : null,
|
||||
result.updated ? `${result.updated} updated` : null,
|
||||
result.failed ? `${result.failed} failed` : null,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(", ");
|
||||
toast.success(`Import complete: ${msg}`);
|
||||
} catch (err: any) {
|
||||
toast.error(err?.message ?? "Failed to import hosts");
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="flex items-center gap-0.5 flex-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-7 text-muted-foreground hover:text-foreground"
|
||||
title={t("hosts.refreshBtn2")}
|
||||
onClick={handleRefresh}
|
||||
disabled={refreshing}
|
||||
>
|
||||
<RefreshCw
|
||||
className={`size-3.5 ${refreshing ? "animate-spin" : ""}`}
|
||||
/>
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-7 text-muted-foreground hover:text-foreground"
|
||||
title={t("hosts.importExportBtn")}
|
||||
>
|
||||
<Upload className="size-3.5" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="text-xs">
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
importOverwriteRef.current = false;
|
||||
fileInputRef.current?.click();
|
||||
}}
|
||||
>
|
||||
<Upload className="size-3.5 mr-2" />
|
||||
{t("hosts.importSkipExisting")}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
importOverwriteRef.current = true;
|
||||
fileInputRef.current?.click();
|
||||
}}
|
||||
>
|
||||
<Upload className="size-3.5 mr-2" />
|
||||
{t("hosts.importOverwrite")}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={handleExportHosts}
|
||||
disabled={rawHosts.length === 0}
|
||||
>
|
||||
<Download className="size-3.5 mr-2" />
|
||||
{t("hosts.exportAll")}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={handleDownloadSample}>
|
||||
<Download className="size-3.5 mr-2" />
|
||||
{t("hosts.downloadSample")}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<button
|
||||
title={t("hosts.selectHosts")}
|
||||
title={
|
||||
selectionMode
|
||||
? t("hosts.exitSelectionTitle")
|
||||
: 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>
|
||||
</div>
|
||||
<button
|
||||
onClick={() =>
|
||||
window.dispatchEvent(new CustomEvent("host-manager:add-host"))
|
||||
@@ -69,6 +304,7 @@ export function HostsPanel({
|
||||
{t("hosts.addHost")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
@@ -78,9 +314,11 @@ export function HostsPanel({
|
||||
children={hostTree?.children ?? []}
|
||||
onOpenTab={onOpenTab}
|
||||
onEditHost={onEditHost}
|
||||
onShareHost={(host) => setShareModalHost(host)}
|
||||
query={hostSearch.trim().toLowerCase()}
|
||||
selectionMode={selectionMode}
|
||||
onToggleSelectionMode={toggleSelectionMode}
|
||||
loading={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -89,6 +327,12 @@ export function HostsPanel({
|
||||
>
|
||||
<HostManager onEditingChange={handleEditingChange} />
|
||||
</div>
|
||||
|
||||
<HostShareModal
|
||||
open={shareModalHost !== null}
|
||||
onClose={() => setShareModalHost(null)}
|
||||
host={shareModalHost}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+179
-25
@@ -1,15 +1,18 @@
|
||||
import { useState } from "react";
|
||||
import { useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useVirtualizer } from "@tanstack/react-virtual";
|
||||
import {
|
||||
Box,
|
||||
Check,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Copy,
|
||||
CopyPlus,
|
||||
Cpu,
|
||||
FolderOpen,
|
||||
FolderSearch,
|
||||
Link,
|
||||
Loader2,
|
||||
MemoryStick,
|
||||
Monitor,
|
||||
MoreHorizontal,
|
||||
@@ -17,6 +20,7 @@ import {
|
||||
Pencil,
|
||||
Pin,
|
||||
Server,
|
||||
Share2,
|
||||
Terminal,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
@@ -31,7 +35,7 @@ import {
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/dropdown-menu";
|
||||
import { toast } from "sonner";
|
||||
import { bulkUpdateSSHHosts, deleteSSHHost } from "@/main-axios";
|
||||
import { bulkUpdateSSHHosts, createSSHHost, deleteSSHHost } from "@/main-axios";
|
||||
import type { Host, HostFolder, TabType } from "@/types/ui-types";
|
||||
|
||||
export function isFolder(item: Host | HostFolder): item is HostFolder {
|
||||
@@ -100,21 +104,26 @@ function folderHasMatch(folder: HostFolder, query: string): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
type VirtualRow = { item: Host | HostFolder; depth: number };
|
||||
|
||||
function collectVisibleRows(
|
||||
children: (Host | HostFolder)[],
|
||||
query: string,
|
||||
openSet: Set<string>,
|
||||
out: (Host | HostFolder)[] = [],
|
||||
): (Host | HostFolder)[] {
|
||||
out: VirtualRow[] = [],
|
||||
depth = 0,
|
||||
): VirtualRow[] {
|
||||
for (const child of children) {
|
||||
if (isFolder(child)) {
|
||||
const visible = query ? folderHasMatch(child, query) : true;
|
||||
if (!visible) continue;
|
||||
out.push(child);
|
||||
out.push({ item: child, depth });
|
||||
const childOpen = query ? true : openSet.has(child.name);
|
||||
if (childOpen) collectVisibleRows(child.children, query, openSet, out);
|
||||
if (childOpen)
|
||||
collectVisibleRows(child.children, query, openSet, out, depth + 1);
|
||||
} else {
|
||||
if (!query || hostMatchesQuery(child, query)) out.push(child);
|
||||
if (!query || hostMatchesQuery(child, query))
|
||||
out.push({ item: child, depth });
|
||||
}
|
||||
}
|
||||
return out;
|
||||
@@ -166,7 +175,9 @@ export function HostItem({
|
||||
host,
|
||||
onOpenTab,
|
||||
onEditHost,
|
||||
onShareHost,
|
||||
onDelete,
|
||||
onDuplicate,
|
||||
query = "",
|
||||
stripeIndex = 0,
|
||||
selectionMode = false,
|
||||
@@ -178,7 +189,9 @@ export function HostItem({
|
||||
host: Host;
|
||||
onOpenTab: (type: TabType) => void;
|
||||
onEditHost?: () => void;
|
||||
onShareHost?: () => void;
|
||||
onDelete: () => void;
|
||||
onDuplicate: () => void;
|
||||
query?: string;
|
||||
stripeIndex?: number;
|
||||
selectionMode?: boolean;
|
||||
@@ -378,6 +391,21 @@ export function HostItem({
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{onShareHost && (
|
||||
<>
|
||||
<div className="w-px h-3.5 bg-border/60 mx-0.5 shrink-0" />
|
||||
<button
|
||||
title={t("hosts.shareHost")}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onShareHost();
|
||||
}}
|
||||
className="flex items-center justify-center size-7 rounded text-muted-foreground hover:text-accent-brand hover:bg-accent-brand/10 transition-colors"
|
||||
>
|
||||
<Share2 className="size-3.5" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
<DropdownMenu open={isMenuOpen} onOpenChange={onMenuOpenChange}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
@@ -522,6 +550,16 @@ export function HostItem({
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuSub>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onDuplicate();
|
||||
}}
|
||||
>
|
||||
<CopyPlus className="size-3.5 mr-2" />
|
||||
{t("hosts.cloneHostAction")}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
className="text-destructive focus:text-destructive"
|
||||
onClick={(e) => {
|
||||
@@ -544,9 +582,12 @@ export function HostItem({
|
||||
export function FolderItem({
|
||||
folder,
|
||||
depth = 0,
|
||||
flat = false,
|
||||
onOpenTab,
|
||||
onEditHost,
|
||||
onShareHost,
|
||||
onDeleteHost,
|
||||
onDuplicateHost,
|
||||
query = "",
|
||||
stripeMap,
|
||||
openFolders,
|
||||
@@ -559,9 +600,12 @@ export function FolderItem({
|
||||
}: {
|
||||
folder: HostFolder;
|
||||
depth?: number;
|
||||
flat?: boolean;
|
||||
onOpenTab: (host: Host, type: TabType) => void;
|
||||
onEditHost?: (host: Host) => void;
|
||||
onShareHost?: (host: Host) => void;
|
||||
onDeleteHost: (host: Host) => void;
|
||||
onDuplicateHost: (host: Host) => void;
|
||||
query?: string;
|
||||
stripeMap: Map<Host | HostFolder, number>;
|
||||
openFolders: Set<string>;
|
||||
@@ -601,7 +645,8 @@ export function FolderItem({
|
||||
<span className="text-muted-foreground/40">/{total}</span>
|
||||
</span>
|
||||
</button>
|
||||
{isOpen && (
|
||||
{/* Children are rendered as separate virtual rows when flat=true */}
|
||||
{!flat && isOpen && (
|
||||
<div className="border-l border-border/40 ml-[30px]">
|
||||
{folder.children.map((child, i) =>
|
||||
isFolder(child) ? (
|
||||
@@ -611,7 +656,9 @@ export function FolderItem({
|
||||
depth={depth + 1}
|
||||
onOpenTab={onOpenTab}
|
||||
onEditHost={onEditHost}
|
||||
onShareHost={onShareHost}
|
||||
onDeleteHost={onDeleteHost}
|
||||
onDuplicateHost={onDuplicateHost}
|
||||
query={query}
|
||||
stripeMap={stripeMap}
|
||||
openFolders={openFolders}
|
||||
@@ -628,7 +675,9 @@ export function FolderItem({
|
||||
host={child}
|
||||
onOpenTab={(t) => onOpenTab(child, t)}
|
||||
onEditHost={onEditHost ? () => onEditHost(child) : undefined}
|
||||
onShareHost={onShareHost ? () => onShareHost(child) : undefined}
|
||||
onDelete={() => onDeleteHost(child)}
|
||||
onDuplicate={() => onDuplicateHost(child)}
|
||||
query={query}
|
||||
stripeIndex={stripeMap.get(child) ?? 0}
|
||||
selectionMode={selectionMode}
|
||||
@@ -651,18 +700,23 @@ export function SidebarTree({
|
||||
children,
|
||||
onOpenTab,
|
||||
onEditHost,
|
||||
onShareHost,
|
||||
query = "",
|
||||
selectionMode,
|
||||
onToggleSelectionMode,
|
||||
loading = false,
|
||||
}: {
|
||||
children: (Host | HostFolder)[];
|
||||
onOpenTab: (host: Host, type: TabType) => void;
|
||||
onEditHost: (host: Host) => void;
|
||||
onShareHost?: (host: Host) => void;
|
||||
query?: string;
|
||||
selectionMode: boolean;
|
||||
onToggleSelectionMode: () => void;
|
||||
loading?: boolean;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const [openFolders, setOpenFolders] = useState<Set<string>>(new Set());
|
||||
const [selectedHostIds, setSelectedHostIds] = useState<Set<string>>(
|
||||
new Set(),
|
||||
@@ -704,25 +758,117 @@ export function SidebarTree({
|
||||
});
|
||||
}
|
||||
|
||||
async function handleDuplicateHost(host: Host) {
|
||||
try {
|
||||
const {
|
||||
id: _id,
|
||||
online: _online,
|
||||
cpu: _cpu,
|
||||
ram: _ram,
|
||||
lastAccess: _la,
|
||||
hasKey: _hk,
|
||||
hasKeyPassword: _hkp,
|
||||
...rest
|
||||
} = host as any;
|
||||
await createSSHHost({
|
||||
...rest,
|
||||
name: `${host.name} (copy)`,
|
||||
key: undefined,
|
||||
});
|
||||
window.dispatchEvent(new CustomEvent("termix:hosts-changed"));
|
||||
toast.success(t("hosts.duplicatedHost", { name: host.name }));
|
||||
} catch {
|
||||
toast.error(t("hosts.failedToDuplicateHost"));
|
||||
}
|
||||
}
|
||||
|
||||
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]),
|
||||
visibleRows.map((r, i) => [r.item, i]),
|
||||
);
|
||||
|
||||
const virtualizer = useVirtualizer({
|
||||
count: visibleRows.length,
|
||||
getScrollElement: () => scrollRef.current,
|
||||
estimateSize: () => 52,
|
||||
overscan: 8,
|
||||
});
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="relative flex flex-col flex-1 min-h-0">
|
||||
<div className="flex-1 min-h-0 overflow-y-auto px-2 py-2 space-y-1.5">
|
||||
{[28, 20, 24, 20, 28, 20].map((w, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`flex items-center gap-2 px-3 py-2 ${i % 2 === 1 ? "ml-4" : ""}`}
|
||||
>
|
||||
<div className="size-3 rounded-sm bg-muted/50 animate-pulse shrink-0" />
|
||||
<div
|
||||
className="h-3 rounded bg-muted/50 animate-pulse"
|
||||
style={{ width: `${w * 3}px` }}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex items-center justify-center gap-2 pt-4 text-muted-foreground/40">
|
||||
<Loader2 className="size-3.5 animate-spin" />
|
||||
<span className="text-xs">{t("hosts.loadingHosts")}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<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) ? (
|
||||
<div className="flex-1 min-h-0 overflow-y-auto" ref={scrollRef}>
|
||||
{visibleRows.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center px-4">
|
||||
<Server className="size-8 text-muted-foreground/20 mb-2" />
|
||||
<span className="text-sm font-semibold text-muted-foreground/60">
|
||||
{query ? t("hosts.noHostsMatchSearch") : t("hosts.noHostsYet")}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
height: `${virtualizer.getTotalSize()}px`,
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
{virtualizer.getVirtualItems().map((vItem) => {
|
||||
const { item, depth } = visibleRows[vItem.index];
|
||||
const stripeIndex = stripeMap.get(item) ?? 0;
|
||||
const indentPx = depth * 16;
|
||||
return (
|
||||
<div
|
||||
key={vItem.key}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
transform: `translateY(${vItem.start}px)`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={
|
||||
depth > 0 ? { paddingLeft: `${indentPx}px` } : undefined
|
||||
}
|
||||
>
|
||||
{isFolder(item) ? (
|
||||
<FolderItem
|
||||
key={i}
|
||||
folder={child}
|
||||
folder={item}
|
||||
flat={true}
|
||||
depth={depth}
|
||||
onOpenTab={onOpenTab}
|
||||
onEditHost={onEditHost}
|
||||
onShareHost={onShareHost}
|
||||
onDeleteHost={handleDeleteHost}
|
||||
onDuplicateHost={handleDuplicateHost}
|
||||
query={query}
|
||||
stripeMap={stripeMap}
|
||||
openFolders={openFolders}
|
||||
@@ -735,22 +881,30 @@ export function SidebarTree({
|
||||
/>
|
||||
) : (
|
||||
<HostItem
|
||||
key={i}
|
||||
host={child}
|
||||
onOpenTab={(type) => onOpenTab(child, type)}
|
||||
onEditHost={() => onEditHost(child)}
|
||||
onDelete={() => handleDeleteHost(child)}
|
||||
host={item}
|
||||
onOpenTab={(type) => onOpenTab(item, type)}
|
||||
onEditHost={() => onEditHost(item)}
|
||||
onShareHost={
|
||||
onShareHost ? () => onShareHost(item) : undefined
|
||||
}
|
||||
onDelete={() => handleDeleteHost(item)}
|
||||
onDuplicate={() => handleDuplicateHost(item)}
|
||||
query={query}
|
||||
stripeIndex={stripeMap.get(child) ?? 0}
|
||||
stripeIndex={stripeIndex}
|
||||
selectionMode={selectionMode}
|
||||
selected={selectedHostIds.has(child.id)}
|
||||
onToggleSelect={() => toggleSelect(child.id)}
|
||||
isMenuOpen={openMenuHostId === child.id}
|
||||
selected={selectedHostIds.has(item.id)}
|
||||
onToggleSelect={() => toggleSelect(item.id)}
|
||||
isMenuOpen={openMenuHostId === item.id}
|
||||
onMenuOpenChange={(open) =>
|
||||
setOpenMenuHostId(open ? child.id : null)
|
||||
setOpenMenuHostId(open ? item.id : null)
|
||||
}
|
||||
/>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user