mirror of
https://github.com/Termix-SSH/Termix.git
synced 2026-07-15 04:43:36 +00:00
ZacharyZcR
867058bddd
Host/status caching, shell code-split, SSH pool waits, host-metrics concurrency, background-tab idle, per-host status subscriptions, homepage poll quieting, and virtualized host sidebar + file manager lists.
2019 lines
68 KiB
TypeScript
2019 lines
68 KiB
TypeScript
import { useState, useRef, useCallback, useEffect } from "react";
|
|
import { useIsMobile } from "@/hooks/use-mobile";
|
|
import { Button } from "@/components/button";
|
|
import { Card } from "@/components/card";
|
|
import { Separator } from "@/components/separator";
|
|
import {
|
|
Activity,
|
|
Check,
|
|
Database,
|
|
ExternalLink,
|
|
GripHorizontal,
|
|
GripVertical,
|
|
KeyRound,
|
|
LayoutDashboard,
|
|
Link,
|
|
MessagesSquare,
|
|
Network,
|
|
Plus,
|
|
Server,
|
|
Settings,
|
|
Terminal,
|
|
Trash2,
|
|
User,
|
|
Zap,
|
|
} from "lucide-react";
|
|
import { Kbd } from "@/components/kbd";
|
|
import { DASHBOARD_CARDS } from "@/lib/theme";
|
|
import type { DashboardCardId, TabType, Host } from "@/types/ui-types";
|
|
import {
|
|
getSSHHosts,
|
|
getUptime,
|
|
getVersionInfo,
|
|
getDatabaseHealth,
|
|
getRecentActivity,
|
|
getTunnelStatuses,
|
|
getCredentials,
|
|
resetRecentActivity,
|
|
getAllServerStatuses,
|
|
getServerMetricsById,
|
|
registerMetricsViewer,
|
|
sendMetricsHeartbeat,
|
|
getUserInfo,
|
|
getServiceLinks,
|
|
createServiceLink,
|
|
deleteServiceLink,
|
|
} from "@/main-axios";
|
|
import type { RecentActivityItem, ServiceLink } from "@/main-axios";
|
|
import { useTranslation } from "react-i18next";
|
|
import { NetworkGraphCard } from "@/dashboard/cards/NetworkGraphCard";
|
|
import { HomepagePreviewCard } from "@/dashboard/cards/HomepagePreviewCard";
|
|
import { HomepageCanvas } from "@/features/homepage/HomepageCanvas";
|
|
|
|
// Side-effect imports so homepage widgets register themselves
|
|
import "@/features/homepage/widgets/ServiceLinkWidget";
|
|
import "@/features/homepage/widgets/ClockWidget";
|
|
import "@/features/homepage/widgets/NotesWidget";
|
|
import "@/features/homepage/widgets/BookmarkListWidget";
|
|
import "@/features/homepage/widgets/HostStatusWidget";
|
|
import "@/features/homepage/widgets/FolderWidget";
|
|
import {
|
|
useStatusColorScheme,
|
|
getStatusClasses,
|
|
} from "@/hooks/use-status-color-scheme";
|
|
import { useServerStatus } from "@/lib/ServerStatusContext";
|
|
import { sshHostToHost } from "@/sidebar/HostManagerData";
|
|
import { getDefaultConnectionTab } from "@/lib/host-connection-tabs";
|
|
import {
|
|
isValidServiceLinkUrl,
|
|
normalizeServiceLinkUrl,
|
|
} from "@/lib/service-link-url";
|
|
|
|
// ─── Types ────────────────────────────────────────────────────────────────────
|
|
|
|
type PanelId = "main" | "side";
|
|
|
|
type CardSlot = {
|
|
key: string;
|
|
id: DashboardCardId;
|
|
panel: PanelId;
|
|
order: number;
|
|
height: number | null;
|
|
};
|
|
|
|
type DragState = {
|
|
key: string;
|
|
id: DashboardCardId;
|
|
sourcePanel: PanelId;
|
|
sourceOrder: number;
|
|
} | null;
|
|
|
|
// ─── Default layout ───────────────────────────────────────────────────────────
|
|
|
|
const DEFAULT_SLOTS: CardSlot[] = [
|
|
{ key: "stats_bar_0", id: "stats_bar", panel: "main", order: 0, height: 96 },
|
|
{
|
|
key: "counters_bar_0",
|
|
id: "counters_bar",
|
|
panel: "main",
|
|
order: 1,
|
|
height: 48,
|
|
},
|
|
{
|
|
key: "quick_actions_0",
|
|
id: "quick_actions",
|
|
panel: "main",
|
|
order: 2,
|
|
height: 160,
|
|
},
|
|
{
|
|
key: "host_status_0",
|
|
id: "host_status",
|
|
panel: "main",
|
|
order: 3,
|
|
height: null,
|
|
},
|
|
{
|
|
key: "recent_activity_0",
|
|
id: "recent_activity",
|
|
panel: "side",
|
|
order: 0,
|
|
height: null,
|
|
},
|
|
];
|
|
|
|
// ─── Card components ──────────────────────────────────────────────────────────
|
|
|
|
function StatsBarCard({
|
|
hosts,
|
|
uptimeFormatted,
|
|
versionText,
|
|
versionStatus,
|
|
dbHealth,
|
|
}: {
|
|
hosts: Host[];
|
|
uptimeFormatted: string;
|
|
versionText: string;
|
|
versionStatus: "up_to_date" | "requires_update" | "beta";
|
|
dbHealth: "healthy" | "error";
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const online = hosts.filter((h) => h.online).length;
|
|
const statusLabel =
|
|
versionStatus === "beta"
|
|
? t("dashboard.beta").toUpperCase()
|
|
: versionStatus === "requires_update"
|
|
? t("dashboard.updateAvailable").toUpperCase()
|
|
: t("dashboardTab.stable");
|
|
const statusColor =
|
|
versionStatus === "beta"
|
|
? "bg-blue-500/20 text-blue-400"
|
|
: versionStatus === "requires_update"
|
|
? "bg-yellow-500/20 text-yellow-400"
|
|
: "bg-accent-brand/20 text-accent-brand";
|
|
return (
|
|
<Card className="grid grid-cols-4 divide-x divide-border overflow-hidden w-full h-full py-0 gap-0">
|
|
<div className="flex flex-col justify-center px-4 py-2 gap-1">
|
|
<span className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold">
|
|
{t("dashboard.version")}
|
|
</span>
|
|
<span className="text-xl font-bold text-accent-brand leading-none">
|
|
{versionText || "—"}
|
|
</span>
|
|
<span
|
|
className={`text-[10px] px-1.5 py-0.5 w-fit font-semibold leading-none ${statusColor}`}
|
|
>
|
|
{statusLabel}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col justify-center px-4 py-2 gap-1">
|
|
<span className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold">
|
|
{t("dashboard.uptime")}
|
|
</span>
|
|
<span className="text-xl font-bold leading-none">
|
|
{uptimeFormatted || "—"}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col justify-center px-4 py-2 gap-1">
|
|
<span className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold">
|
|
{t("dashboard.database")}
|
|
</span>
|
|
<span
|
|
className={`text-xl font-bold leading-none ${dbHealth === "healthy" ? "text-accent-brand" : "text-red-400"}`}
|
|
>
|
|
{dbHealth === "healthy"
|
|
? t("dashboard.healthy")
|
|
: t("dashboard.error")}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col justify-center px-4 py-2 gap-1">
|
|
<span className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold">
|
|
{t("dashboardTab.hostsOnline")}
|
|
</span>
|
|
<div className="flex items-baseline gap-1">
|
|
<span className="text-xl font-bold leading-none">{online}</span>
|
|
<span className="text-base text-muted-foreground leading-none">
|
|
/{hosts.length}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function CountersBarCard({
|
|
hosts,
|
|
credentialCount,
|
|
activeTunnelCount,
|
|
onOpenSingletonTab,
|
|
}: {
|
|
hosts: Host[];
|
|
credentialCount: number;
|
|
activeTunnelCount: number;
|
|
onOpenSingletonTab: (type: TabType, pendingEvent?: string) => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<Card className="grid grid-cols-3 divide-x divide-border overflow-hidden w-full h-full py-0 gap-0">
|
|
<button
|
|
onClick={() => onOpenSingletonTab("host-manager")}
|
|
className="flex items-center gap-2.5 px-4 py-2.5 hover:bg-muted transition-colors cursor-pointer text-left"
|
|
>
|
|
<Server className="size-3.5 text-muted-foreground shrink-0" />
|
|
<span className="text-base font-bold">{hosts.length}</span>
|
|
<span className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold">
|
|
{t("dashboard.totalHosts")}
|
|
</span>
|
|
</button>
|
|
<button
|
|
onClick={() =>
|
|
onOpenSingletonTab("host-manager", "host-manager:show-credentials")
|
|
}
|
|
className="flex items-center gap-2.5 px-4 py-2.5 hover:bg-muted transition-colors cursor-pointer text-left"
|
|
>
|
|
<KeyRound className="size-3.5 text-muted-foreground shrink-0" />
|
|
<span className="text-base font-bold">{credentialCount}</span>
|
|
<span className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold">
|
|
{t("dashboard.totalCredentials")}
|
|
</span>
|
|
</button>
|
|
<button
|
|
onClick={() => onOpenSingletonTab("tunnel")}
|
|
className="flex items-center gap-2.5 px-4 py-2.5 hover:bg-muted transition-colors cursor-pointer text-left"
|
|
>
|
|
<Network className="size-3.5 text-muted-foreground shrink-0" />
|
|
<span className="text-base font-bold">{activeTunnelCount}</span>
|
|
<span className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold">
|
|
{t("dashboardTab.activeTunnels")}
|
|
</span>
|
|
</button>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function QuickActionsCard({
|
|
onOpenSingletonTab,
|
|
hosts,
|
|
onOpenTab,
|
|
isAdmin,
|
|
}: {
|
|
onOpenSingletonTab: (type: TabType, pendingEvent?: string) => void;
|
|
hosts: Host[];
|
|
onOpenTab: (host: Host, type: TabType) => void;
|
|
isAdmin: boolean;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const pinnedHosts = hosts.filter((h) => h.pin);
|
|
const getConnectionEndpoint = (host: Host) => {
|
|
const type = getDefaultConnectionTab(host);
|
|
const port =
|
|
type === "rdp"
|
|
? host.rdpPort
|
|
: type === "vnc"
|
|
? host.vncPort
|
|
: type === "telnet"
|
|
? host.telnetPort
|
|
: host.sshPort;
|
|
return `${host.ip}:${port}`;
|
|
};
|
|
const renderConnectionIcon = (host: Host) => {
|
|
const type = getDefaultConnectionTab(host);
|
|
if (type === "terminal" || type === "telnet") {
|
|
return <Terminal className="size-3 text-accent-brand" />;
|
|
}
|
|
return <Server className="size-3 text-accent-brand" />;
|
|
};
|
|
return (
|
|
<Card className="flex flex-col overflow-hidden w-full h-full py-0 gap-0">
|
|
<div className="flex items-center gap-2 px-4 py-2.5 border-b border-border shrink-0">
|
|
<Zap className="size-3.5 text-muted-foreground" />
|
|
<span className="text-xs text-muted-foreground uppercase tracking-widest font-semibold">
|
|
{t("dashboard.quickActions")}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-1 min-h-0">
|
|
<div className="flex flex-col flex-1 border-r border-border">
|
|
<button
|
|
onClick={() =>
|
|
onOpenSingletonTab("host-manager", "host-manager:add-host")
|
|
}
|
|
className="group/btn flex items-center gap-2.5 px-4 py-2.5 hover:bg-muted transition-colors cursor-pointer border-b border-border flex-1"
|
|
>
|
|
<div className="size-7 border border-border bg-muted flex items-center justify-center shrink-0 group-hover/btn:bg-accent-brand/20 group-hover/btn:border-accent-brand/40 transition-colors">
|
|
<Plus className="size-3 text-accent-brand" />
|
|
</div>
|
|
<div className="flex flex-col items-start text-left">
|
|
<span className="text-xs font-semibold">
|
|
{t("dashboard.addHost")}
|
|
</span>
|
|
<span className="text-[10px] text-muted-foreground">
|
|
{t("dashboardTab.registerNewServer")}
|
|
</span>
|
|
</div>
|
|
</button>
|
|
<button
|
|
onClick={() =>
|
|
onOpenSingletonTab("host-manager", "host-manager:add-credential")
|
|
}
|
|
className="group/btn flex items-center gap-2.5 px-4 py-2.5 hover:bg-muted transition-colors cursor-pointer flex-1"
|
|
>
|
|
<div className="size-7 border border-border bg-muted flex items-center justify-center shrink-0 group-hover/btn:bg-accent-brand/20 group-hover/btn:border-accent-brand/40 transition-colors">
|
|
<KeyRound className="size-3 text-accent-brand" />
|
|
</div>
|
|
<div className="flex flex-col items-start text-left">
|
|
<span className="text-xs font-semibold">
|
|
{t("dashboard.addCredential")}
|
|
</span>
|
|
<span className="text-[10px] text-muted-foreground">
|
|
{t("dashboardTab.storeSshKeysOrPasswords")}
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div className="flex flex-col flex-1">
|
|
{pinnedHosts.length > 0 ? (
|
|
<div className="flex flex-col flex-1 overflow-y-auto thin-scrollbar">
|
|
{pinnedHosts.slice(0, 4).map((host) => (
|
|
<button
|
|
key={host.id}
|
|
onClick={() => onOpenTab(host, getDefaultConnectionTab(host))}
|
|
className="group/btn flex items-center gap-2.5 px-4 py-2 hover:bg-muted transition-colors cursor-pointer border-b border-border last:border-b-0"
|
|
>
|
|
<div className="size-7 border border-border bg-muted flex items-center justify-center shrink-0 group-hover/btn:bg-accent-brand/20 group-hover/btn:border-accent-brand/40 transition-colors">
|
|
{renderConnectionIcon(host)}
|
|
</div>
|
|
<div className="flex flex-col items-start text-left min-w-0">
|
|
<span className="text-xs font-semibold truncate w-full">
|
|
{host.name || host.ip}
|
|
</span>
|
|
<span className="text-[10px] text-muted-foreground truncate w-full">
|
|
{getConnectionEndpoint(host)}
|
|
</span>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<>
|
|
{isAdmin && (
|
|
<button
|
|
onClick={() => onOpenSingletonTab("admin-settings")}
|
|
className="group/btn flex items-center gap-2.5 px-4 py-2.5 hover:bg-muted transition-colors cursor-pointer border-b border-border flex-1"
|
|
>
|
|
<div className="size-7 border border-border bg-muted flex items-center justify-center shrink-0 group-hover/btn:bg-accent-brand/20 group-hover/btn:border-accent-brand/40 transition-colors">
|
|
<Settings className="size-3 text-accent-brand" />
|
|
</div>
|
|
<div className="flex flex-col items-start text-left">
|
|
<span className="text-xs font-semibold">
|
|
{t("dashboard.adminSettings")}
|
|
</span>
|
|
<span className="text-[10px] text-muted-foreground">
|
|
{t("dashboardTab.manageUsersAndRoles")}
|
|
</span>
|
|
</div>
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={() => onOpenSingletonTab("user-profile")}
|
|
className="group/btn flex items-center gap-2.5 px-4 py-2.5 hover:bg-muted transition-colors cursor-pointer flex-1"
|
|
>
|
|
<div className="size-7 border border-border bg-muted flex items-center justify-center shrink-0 group-hover/btn:bg-accent-brand/20 group-hover/btn:border-accent-brand/40 transition-colors">
|
|
<User className="size-3 text-accent-brand" />
|
|
</div>
|
|
<div className="flex flex-col items-start text-left">
|
|
<span className="text-xs font-semibold">
|
|
{t("dashboard.userProfile")}
|
|
</span>
|
|
<span className="text-[10px] text-muted-foreground">
|
|
{t("dashboardTab.manageYourAccount")}
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function MetricBar({ label, value }: { label: string; value: number }) {
|
|
const color =
|
|
value >= 90
|
|
? "bg-red-500"
|
|
: value >= 70
|
|
? "bg-yellow-500"
|
|
: "bg-accent-brand";
|
|
const textColor =
|
|
value >= 90
|
|
? "text-red-400"
|
|
: value >= 70
|
|
? "text-yellow-400"
|
|
: "text-accent-brand";
|
|
return (
|
|
<div className="flex flex-col gap-0.5 w-16">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[10px] text-muted-foreground">{label}</span>
|
|
<span className={`text-[10px] font-bold ${textColor}`}>
|
|
{value.toFixed(0)}%
|
|
</span>
|
|
</div>
|
|
<div className="h-0.5 bg-muted w-full">
|
|
<div className={`h-full ${color}`} style={{ width: `${value}%` }} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function HostStatusCard({
|
|
hosts,
|
|
hostMetrics,
|
|
onOpenTab,
|
|
statusLoading,
|
|
}: {
|
|
hosts: Host[];
|
|
hostMetrics: Map<
|
|
string,
|
|
{ cpu: number | null; ram: number | null; disk: number | null }
|
|
>;
|
|
onOpenTab: (host: Host, type: TabType) => void;
|
|
statusLoading?: boolean;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const statusScheme = useStatusColorScheme();
|
|
const online = hosts.filter((h) => h.online).length;
|
|
return (
|
|
<Card className="flex flex-col overflow-hidden w-full h-full py-0 gap-0">
|
|
<div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
|
|
<div className="flex items-center gap-2">
|
|
<Database className="size-3.5 text-muted-foreground" />
|
|
<span className="text-xs text-muted-foreground uppercase tracking-widest font-semibold">
|
|
{t("dashboardTab.hostStatus")}
|
|
</span>
|
|
</div>
|
|
<span className="text-xs text-muted-foreground">
|
|
{online}/{hosts.length} {t("dashboardTab.onlineLower")}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col overflow-auto flex-1">
|
|
{hosts.length === 0 && (
|
|
<div className="flex-1 flex items-center justify-center text-xs text-muted-foreground/40 py-8">
|
|
{t("dashboardTab.noHostsConfigured")}
|
|
</div>
|
|
)}
|
|
{hosts.map((host, i) => {
|
|
const metrics = hostMetrics.get(host.id);
|
|
const cpu = metrics?.cpu ?? null;
|
|
const ram = metrics?.ram ?? null;
|
|
const disk = metrics?.disk ?? null;
|
|
const hasMetrics = cpu !== null || ram !== null || disk !== null;
|
|
return (
|
|
<div
|
|
key={i}
|
|
onClick={() => onOpenTab(host, "host-metrics")}
|
|
className="flex items-center justify-between px-4 py-2.5 border-b border-border last:border-0 hover:bg-muted/50 cursor-pointer group/row"
|
|
>
|
|
<div className="flex items-center gap-2.5">
|
|
<span
|
|
className={`size-1.5 rounded-full shrink-0 ${getStatusClasses(host.online, statusScheme, "dot", statusLoading)}`}
|
|
/>
|
|
<div className="flex flex-col">
|
|
<div className="flex items-center gap-1">
|
|
<span className="text-xs font-semibold">{host.name}</span>
|
|
<ExternalLink className="size-2.5 text-muted-foreground/0 group-hover/row:text-muted-foreground/60 transition-colors shrink-0" />
|
|
</div>
|
|
<span className="text-[10px] text-muted-foreground font-mono">
|
|
{host.ip}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
{host.online && hasMetrics ? (
|
|
<div className="flex items-center gap-3">
|
|
{cpu !== null && (
|
|
<MetricBar label={t("dashboard.cpu")} value={cpu} />
|
|
)}
|
|
{ram !== null && (
|
|
<MetricBar label={t("dashboard.ram")} value={ram} />
|
|
)}
|
|
{disk !== null && (
|
|
<MetricBar label={t("dashboardTab.disk")} value={disk} />
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-[10px] text-muted-foreground w-16 text-center">
|
|
—
|
|
</span>
|
|
<span className="text-[10px] text-muted-foreground w-16 text-center">
|
|
—
|
|
</span>
|
|
<span className="text-[10px] text-muted-foreground w-16 text-center">
|
|
—
|
|
</span>
|
|
</div>
|
|
)}
|
|
<span
|
|
className={`text-[10px] px-2 py-0.5 font-semibold border ${getStatusClasses(host.online, statusScheme, "badge", statusLoading)}`}
|
|
>
|
|
{statusLoading
|
|
? t("dashboardTab.checking")
|
|
: host.online
|
|
? t("dashboardTab.online")
|
|
: t("dashboardTab.offline")}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function isStatusCheckEnabled(host: Host): boolean {
|
|
return host.statsConfig?.statusCheckEnabled !== false;
|
|
}
|
|
|
|
function RecentActivityCard({
|
|
activity,
|
|
hosts,
|
|
onOpenTab,
|
|
onClear,
|
|
statusLoading,
|
|
}: {
|
|
activity: RecentActivityItem[];
|
|
hosts: Host[];
|
|
onOpenTab: (host: Host, type: TabType) => void;
|
|
onClear: () => void;
|
|
statusLoading?: boolean;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const statusScheme = useStatusColorScheme();
|
|
const typeIcon: Record<RecentActivityItem["type"], React.ReactNode> = {
|
|
terminal: <Terminal className="size-2.5" />,
|
|
file_manager: <Server className="size-2.5" />,
|
|
server_stats: <Activity className="size-2.5" />,
|
|
tunnel: <Network className="size-2.5" />,
|
|
docker: <Server className="size-2.5" />,
|
|
rdp: <Server className="size-2.5" />,
|
|
vnc: <Server className="size-2.5" />,
|
|
telnet: <MessagesSquare className="size-2.5" />,
|
|
};
|
|
const typeToTab: Record<RecentActivityItem["type"], TabType> = {
|
|
terminal: "terminal",
|
|
file_manager: "files",
|
|
server_stats: "host-metrics",
|
|
tunnel: "tunnel",
|
|
docker: "docker",
|
|
rdp: "rdp",
|
|
vnc: "vnc",
|
|
telnet: "telnet",
|
|
};
|
|
const typeLabel: Record<RecentActivityItem["type"], string> = {
|
|
terminal: t("networkGraph.terminal"),
|
|
file_manager: t("networkGraph.fileManager"),
|
|
server_stats: t("networkGraph.serverStats"),
|
|
tunnel: t("networkGraph.tunnel"),
|
|
docker: t("networkGraph.docker"),
|
|
rdp: "RDP",
|
|
vnc: "VNC",
|
|
telnet: "Telnet",
|
|
};
|
|
function formatTime(ts: string) {
|
|
const diffMs = Date.now() - new Date(ts).getTime();
|
|
if (diffMs < 0) return t("dashboard.justNow");
|
|
const diff = Math.floor(diffMs / 1000);
|
|
if (diff < 60) return t("dashboard.justNow");
|
|
if (diff < 3600) return `${Math.floor(diff / 60)}m`;
|
|
if (diff < 86400) return `${Math.floor(diff / 3600)}h`;
|
|
return `${Math.floor(diff / 86400)}d`;
|
|
}
|
|
return (
|
|
<Card className="flex flex-col overflow-hidden w-full h-full py-0 gap-0">
|
|
<div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
|
|
<div className="flex items-center gap-2">
|
|
<Activity className="size-3.5 text-muted-foreground" />
|
|
<span className="text-xs text-muted-foreground uppercase tracking-widest font-semibold">
|
|
{t("dashboard.recentActivity")}
|
|
</span>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-xs text-accent-brand h-auto py-0.5 px-2"
|
|
onClick={onClear}
|
|
>
|
|
{t("dashboardTab.clear")}
|
|
</Button>
|
|
</div>
|
|
<div className="flex flex-col overflow-auto flex-1">
|
|
{activity.length === 0 && (
|
|
<div className="flex-1 flex items-center justify-center text-xs text-muted-foreground/40 py-8">
|
|
{t("dashboard.noRecentActivity")}
|
|
</div>
|
|
)}
|
|
{activity.map((item) => {
|
|
const host = hosts.find((h) => h.id === String(item.hostId));
|
|
return (
|
|
<div
|
|
key={item.id}
|
|
onClick={() => {
|
|
if (host) onOpenTab(host, typeToTab[item.type]);
|
|
}}
|
|
className="flex items-center justify-between px-4 py-2 border-b border-border last:border-0 hover:bg-muted/50 cursor-pointer"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<span
|
|
className={`size-1.5 rounded-full shrink-0 ${getStatusClasses(host?.online ?? false, statusScheme, "dot", statusLoading)}`}
|
|
/>
|
|
<div className="flex flex-col">
|
|
<span className="text-xs font-semibold truncate max-w-24">
|
|
{item.hostName}
|
|
</span>
|
|
<div className="flex items-center gap-1 text-muted-foreground">
|
|
{typeIcon[item.type]}
|
|
<span className="text-[10px]">{typeLabel[item.type]}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span className="text-[10px] text-muted-foreground shrink-0">
|
|
{formatTime(item.timestamp)}
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function ServiceLinksCard({
|
|
links,
|
|
onAdd,
|
|
onDelete,
|
|
}: {
|
|
links: ServiceLink[];
|
|
onAdd: (label: string, url: string) => Promise<void>;
|
|
onDelete: (id: number) => Promise<void>;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [label, setLabel] = useState("");
|
|
const [url, setUrl] = useState("");
|
|
const [urlError, setUrlError] = useState(false);
|
|
const [addError, setAddError] = useState("");
|
|
const [adding, setAdding] = useState(false);
|
|
|
|
const handleAdd = async () => {
|
|
const normalizedUrl = normalizeServiceLinkUrl(url);
|
|
if (!isValidServiceLinkUrl(normalizedUrl)) {
|
|
setUrlError(true);
|
|
setAddError("");
|
|
return;
|
|
}
|
|
setUrlError(false);
|
|
setAddError("");
|
|
setAdding(true);
|
|
try {
|
|
await onAdd(label.trim(), normalizedUrl);
|
|
setLabel("");
|
|
setUrl("");
|
|
} catch (error) {
|
|
setAddError(
|
|
error instanceof Error
|
|
? error.message
|
|
: t("dashboardTab.serviceLinksAddFailed"),
|
|
);
|
|
} finally {
|
|
setAdding(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Card className="flex flex-col overflow-hidden w-full h-full py-0 gap-0">
|
|
<div className="flex items-center gap-2 px-4 py-2.5 border-b border-border shrink-0">
|
|
<Link className="size-3.5 text-muted-foreground" />
|
|
<span className="text-xs text-muted-foreground uppercase tracking-widest font-semibold">
|
|
{t("dashboardTab.serviceLinksTitle")}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col overflow-auto flex-1">
|
|
{links.length === 0 && (
|
|
<div className="flex-1 flex items-center justify-center text-xs text-muted-foreground/40 py-4">
|
|
{t("dashboardTab.serviceLinksEmpty")}
|
|
</div>
|
|
)}
|
|
{links.map((link) => (
|
|
<div
|
|
key={link.id}
|
|
className="flex items-center justify-between px-4 py-2 border-b border-border last:border-0 group/link"
|
|
>
|
|
<a
|
|
href={link.url}
|
|
target="_blank"
|
|
rel="noreferrer noopener"
|
|
className="flex items-center gap-2 min-w-0 flex-1 hover:text-accent-brand transition-colors"
|
|
>
|
|
<ExternalLink className="size-3 text-muted-foreground shrink-0" />
|
|
<span className="text-xs font-semibold truncate">
|
|
{link.label}
|
|
</span>
|
|
<span className="text-[10px] text-muted-foreground truncate">
|
|
{link.url}
|
|
</span>
|
|
</a>
|
|
<button
|
|
onClick={() => onDelete(link.id)}
|
|
className="ml-2 opacity-0 group-hover/link:opacity-100 transition-opacity size-5 flex items-center justify-center hover:text-destructive"
|
|
>
|
|
<Trash2 className="size-3" />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="flex items-center gap-2 px-4 py-2 border-t border-border shrink-0">
|
|
<input
|
|
type="text"
|
|
value={label}
|
|
onChange={(e) => setLabel(e.target.value)}
|
|
placeholder={t("dashboardTab.serviceLinksLabelPlaceholder")}
|
|
className="flex-1 min-w-0 text-xs bg-transparent border border-border px-2 py-1 focus:outline-none focus:border-accent-brand/60"
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={url}
|
|
onChange={(e) => {
|
|
setUrl(e.target.value);
|
|
setUrlError(false);
|
|
setAddError("");
|
|
}}
|
|
placeholder={t("dashboardTab.serviceLinksUrlPlaceholder")}
|
|
className={`flex-[2] min-w-0 text-xs bg-transparent border px-2 py-1 focus:outline-none ${urlError ? "border-destructive" : "border-border focus:border-accent-brand/60"}`}
|
|
/>
|
|
<Button
|
|
size="sm"
|
|
className="text-xs bg-accent-brand hover:bg-accent-brand/90 text-white h-6 px-2 shrink-0"
|
|
onClick={handleAdd}
|
|
disabled={!label.trim() || !url.trim() || adding}
|
|
>
|
|
{t("dashboardTab.serviceLinksAdd")}
|
|
</Button>
|
|
</div>
|
|
{urlError && (
|
|
<div className="px-4 pb-2 text-[10px] text-destructive shrink-0">
|
|
{t("dashboardTab.serviceLinksInvalidUrl")}
|
|
</div>
|
|
)}
|
|
{addError && (
|
|
<div className="px-4 pb-2 text-[10px] text-destructive shrink-0">
|
|
{addError}
|
|
</div>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
// ─── CardItem ─────────────────────────────────────────────────────────────────
|
|
|
|
function CardItem({
|
|
slot,
|
|
editMode,
|
|
isDragging,
|
|
onDragStart,
|
|
onDrop,
|
|
onDragOver,
|
|
onRemove,
|
|
onHeightChange,
|
|
onOpenSingletonTab,
|
|
onOpenTab,
|
|
hosts,
|
|
hostMetrics,
|
|
uptimeFormatted,
|
|
versionText,
|
|
versionStatus,
|
|
dbHealth,
|
|
credentialCount,
|
|
activeTunnelCount,
|
|
activity,
|
|
onClearActivity,
|
|
isAdmin,
|
|
serviceLinks,
|
|
onAddServiceLink,
|
|
onDeleteServiceLink,
|
|
statusLoading,
|
|
isVisible = true,
|
|
}: {
|
|
slot: CardSlot;
|
|
editMode: boolean;
|
|
isDragging: boolean;
|
|
onDragStart: () => void;
|
|
onDrop: () => void;
|
|
onDragOver: (e: React.DragEvent) => void;
|
|
onRemove: () => void;
|
|
onHeightChange: (key: string, h: number) => void;
|
|
onOpenSingletonTab: (type: TabType, pendingEvent?: string) => void;
|
|
onOpenTab: (host: Host, type: TabType) => void;
|
|
hosts: Host[];
|
|
hostMetrics: Map<
|
|
string,
|
|
{ cpu: number | null; ram: number | null; disk: number | null }
|
|
>;
|
|
uptimeFormatted: string;
|
|
versionText: string;
|
|
versionStatus: "up_to_date" | "requires_update" | "beta";
|
|
dbHealth: "healthy" | "error";
|
|
credentialCount: number;
|
|
activeTunnelCount: number;
|
|
activity: RecentActivityItem[];
|
|
onClearActivity: () => void;
|
|
isAdmin: boolean;
|
|
serviceLinks: ServiceLink[];
|
|
onAddServiceLink: (label: string, url: string) => Promise<void>;
|
|
onDeleteServiceLink: (id: number) => Promise<void>;
|
|
statusLoading?: boolean;
|
|
isVisible?: boolean;
|
|
}) {
|
|
const cardRef = useRef<HTMLDivElement | null>(null);
|
|
|
|
const onResizeMouseDown = useCallback(
|
|
(e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const startY = e.clientY;
|
|
const startH = cardRef.current?.getBoundingClientRect().height ?? 100;
|
|
const onMove = (ev: MouseEvent) => {
|
|
onHeightChange(slot.key, Math.max(50, startH + (ev.clientY - startY)));
|
|
};
|
|
const onUp = () => {
|
|
window.removeEventListener("mousemove", onMove);
|
|
window.removeEventListener("mouseup", onUp);
|
|
};
|
|
window.addEventListener("mousemove", onMove);
|
|
window.addEventListener("mouseup", onUp);
|
|
},
|
|
[slot.key, onHeightChange],
|
|
);
|
|
|
|
const isFlex = slot.height === null;
|
|
|
|
return (
|
|
<div
|
|
ref={cardRef}
|
|
className={`relative flex flex-col transition-opacity select-none ${isDragging ? "opacity-40" : "opacity-100"} ${isFlex ? "flex-1 min-h-0" : "shrink-0"}`}
|
|
style={!isFlex ? { height: slot.height } : undefined}
|
|
draggable={editMode}
|
|
onDragStart={onDragStart}
|
|
onDrop={onDrop}
|
|
onDragOver={onDragOver}
|
|
>
|
|
{editMode && (
|
|
<div className="absolute inset-0 z-10 pointer-events-none border-2 border-dashed border-accent-brand/30" />
|
|
)}
|
|
{editMode && (
|
|
<div className="absolute top-2 right-2 z-20 flex items-center gap-1">
|
|
<div className="size-6 bg-card border border-border flex items-center justify-center cursor-grab active:cursor-grabbing pointer-events-auto">
|
|
<GripVertical className="size-3 text-muted-foreground" />
|
|
</div>
|
|
<button
|
|
onClick={onRemove}
|
|
className="size-6 bg-card border border-border flex items-center justify-center hover:bg-destructive/10 hover:border-destructive/40 transition-colors pointer-events-auto"
|
|
>
|
|
<Trash2 className="size-3 text-muted-foreground" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
<div className="flex-1 min-h-0 overflow-hidden">
|
|
{slot.id === "stats_bar" && (
|
|
<StatsBarCard
|
|
hosts={hosts}
|
|
uptimeFormatted={uptimeFormatted}
|
|
versionText={versionText}
|
|
versionStatus={versionStatus}
|
|
dbHealth={dbHealth}
|
|
/>
|
|
)}
|
|
{slot.id === "counters_bar" && (
|
|
<CountersBarCard
|
|
hosts={hosts}
|
|
credentialCount={credentialCount}
|
|
activeTunnelCount={activeTunnelCount}
|
|
onOpenSingletonTab={onOpenSingletonTab}
|
|
/>
|
|
)}
|
|
{slot.id === "quick_actions" && (
|
|
<QuickActionsCard
|
|
onOpenSingletonTab={onOpenSingletonTab}
|
|
hosts={hosts}
|
|
onOpenTab={onOpenTab}
|
|
/>
|
|
)}
|
|
{slot.id === "host_status" && (
|
|
<HostStatusCard
|
|
hosts={hosts}
|
|
hostMetrics={hostMetrics}
|
|
onOpenTab={onOpenTab}
|
|
isAdmin={isAdmin}
|
|
statusLoading={statusLoading}
|
|
/>
|
|
)}
|
|
{slot.id === "recent_activity" && (
|
|
<RecentActivityCard
|
|
activity={activity}
|
|
hosts={hosts}
|
|
onOpenTab={onOpenTab}
|
|
onClear={onClearActivity}
|
|
statusLoading={statusLoading}
|
|
/>
|
|
)}
|
|
{slot.id === "network_graph" && (
|
|
<NetworkGraphCard
|
|
embedded={true}
|
|
isVisible={isVisible}
|
|
onOpenInNewTab={() => onOpenSingletonTab("network_graph")}
|
|
/>
|
|
)}
|
|
{slot.id === "service_links" && (
|
|
<ServiceLinksCard
|
|
links={serviceLinks}
|
|
onAdd={onAddServiceLink}
|
|
onDelete={onDeleteServiceLink}
|
|
/>
|
|
)}
|
|
{slot.id === "homepage_preview" && (
|
|
<HomepagePreviewCard
|
|
onOpenFullscreen={() => onOpenSingletonTab("homepage")}
|
|
/>
|
|
)}
|
|
</div>
|
|
{editMode && !isFlex && (
|
|
<div
|
|
onMouseDown={onResizeMouseDown}
|
|
className="absolute bottom-0 left-0 right-0 h-2 z-20 flex items-center justify-center cursor-row-resize group/resize"
|
|
title="Drag to resize"
|
|
>
|
|
<div className="w-12 h-0.5 bg-border group-hover/resize:bg-accent-brand/60 transition-colors rounded-full" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── DropZone ─────────────────────────────────────────────────────────────────
|
|
|
|
function DropZone({
|
|
panel,
|
|
order,
|
|
onDrop,
|
|
onDragOver,
|
|
active,
|
|
}: {
|
|
panel: PanelId;
|
|
order: number;
|
|
onDrop: (panel: PanelId, order: number) => void;
|
|
onDragOver: (e: React.DragEvent) => void;
|
|
active: boolean;
|
|
}) {
|
|
const [over, setOver] = useState(false);
|
|
if (!active) return null;
|
|
return (
|
|
<div
|
|
className={`shrink-0 transition-all duration-150 ${over ? "h-10 border-2 border-dashed border-accent-brand/60 bg-accent-brand/5" : "h-2"}`}
|
|
onDragOver={(e) => {
|
|
onDragOver(e);
|
|
setOver(true);
|
|
}}
|
|
onDragLeave={() => setOver(false)}
|
|
onDrop={() => {
|
|
setOver(false);
|
|
onDrop(panel, order);
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// ─── AddCardTray ──────────────────────────────────────────────────────────────
|
|
|
|
function AddCardTray({
|
|
activeIds,
|
|
onAdd,
|
|
cardLabels,
|
|
}: {
|
|
activeIds: DashboardCardId[];
|
|
onAdd: (id: DashboardCardId) => void;
|
|
cardLabels: Record<DashboardCardId, string>;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const available = DASHBOARD_CARDS.filter((c) => !activeIds.includes(c.id));
|
|
if (available.length === 0) return null;
|
|
return (
|
|
<div className="flex items-center gap-2 px-1 py-2 flex-wrap shrink-0">
|
|
<span className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold shrink-0">
|
|
{t("dashboardTab.add")}
|
|
</span>
|
|
{available.map((card) => (
|
|
<button
|
|
key={card.id}
|
|
onClick={() => onAdd(card.id)}
|
|
className="flex items-center gap-1.5 px-2.5 py-1 border border-dashed border-border text-xs text-muted-foreground hover:text-foreground hover:border-accent-brand/60 hover:bg-accent-brand/5 transition-colors"
|
|
>
|
|
<Plus className="size-3 text-accent-brand" />
|
|
{cardLabels[card.id]}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── PanelColumn ─────────────────────────────────────────────────────────────
|
|
|
|
type PanelColumnProps = {
|
|
panel: PanelId;
|
|
slots: CardSlot[];
|
|
editMode: boolean;
|
|
dragState: DragState;
|
|
onDragStart: (slot: CardSlot) => void;
|
|
onDrop: (targetPanel: PanelId, targetOrder: number) => void;
|
|
onDragOver: (e: React.DragEvent) => void;
|
|
onRemove: (key: string) => void;
|
|
onAdd: (id: DashboardCardId, panel: PanelId) => void;
|
|
onHeightChange: (key: string, h: number) => void;
|
|
onOpenSingletonTab: (type: TabType, pendingEvent?: string) => void;
|
|
onOpenTab: (host: Host, type: TabType) => void;
|
|
hosts: Host[];
|
|
hostMetrics: Map<
|
|
string,
|
|
{ cpu: number | null; ram: number | null; disk: number | null }
|
|
>;
|
|
uptimeFormatted: string;
|
|
versionText: string;
|
|
versionStatus: "up_to_date" | "requires_update" | "beta";
|
|
dbHealth: "healthy" | "error";
|
|
credentialCount: number;
|
|
activeTunnelCount: number;
|
|
activity: RecentActivityItem[];
|
|
onClearActivity: () => void;
|
|
cardLabels: Record<DashboardCardId, string>;
|
|
isAdmin: boolean;
|
|
serviceLinks: ServiceLink[];
|
|
onAddServiceLink: (label: string, url: string) => Promise<void>;
|
|
onDeleteServiceLink: (id: number) => Promise<void>;
|
|
statusLoading: boolean;
|
|
isVisible?: boolean;
|
|
};
|
|
|
|
function PanelColumn({
|
|
panel,
|
|
slots,
|
|
editMode,
|
|
dragState,
|
|
onDragStart,
|
|
onDrop,
|
|
onDragOver,
|
|
onRemove,
|
|
onAdd,
|
|
onHeightChange,
|
|
onOpenSingletonTab,
|
|
onOpenTab,
|
|
hosts,
|
|
hostMetrics,
|
|
uptimeFormatted,
|
|
versionText,
|
|
versionStatus,
|
|
dbHealth,
|
|
credentialCount,
|
|
activeTunnelCount,
|
|
activity,
|
|
onClearActivity,
|
|
cardLabels,
|
|
isAdmin,
|
|
serviceLinks,
|
|
onAddServiceLink,
|
|
onDeleteServiceLink,
|
|
statusLoading,
|
|
isVisible = true,
|
|
}: PanelColumnProps) {
|
|
const { t } = useTranslation();
|
|
const sorted = [...slots].sort((a, b) => a.order - b.order);
|
|
const allIds = slots.map((s) => s.id);
|
|
|
|
return (
|
|
<div className="flex flex-col flex-1 min-h-0">
|
|
<DropZone
|
|
panel={panel}
|
|
order={-1}
|
|
onDrop={onDrop}
|
|
onDragOver={onDragOver}
|
|
active={!!dragState}
|
|
/>
|
|
{sorted.map((slot, idx) => (
|
|
<div
|
|
key={slot.key}
|
|
className={`flex flex-col min-h-0 ${slot.height === null ? "flex-1" : "shrink-0"}`}
|
|
>
|
|
{idx > 0 && (
|
|
<div className={editMode ? "" : "h-4 shrink-0"}>
|
|
<DropZone
|
|
panel={panel}
|
|
order={slot.order - 0.5}
|
|
onDrop={onDrop}
|
|
onDragOver={onDragOver}
|
|
active={!!dragState}
|
|
/>
|
|
</div>
|
|
)}
|
|
<CardItem
|
|
slot={slot}
|
|
editMode={editMode}
|
|
isDragging={dragState?.key === slot.key}
|
|
onDragStart={() => onDragStart(slot)}
|
|
onDrop={() => onDrop(slot.panel, slot.order)}
|
|
onDragOver={onDragOver}
|
|
onRemove={() => onRemove(slot.key)}
|
|
onHeightChange={onHeightChange}
|
|
onOpenSingletonTab={onOpenSingletonTab}
|
|
onOpenTab={onOpenTab}
|
|
hosts={hosts}
|
|
hostMetrics={hostMetrics}
|
|
uptimeFormatted={uptimeFormatted}
|
|
versionText={versionText}
|
|
versionStatus={versionStatus}
|
|
dbHealth={dbHealth}
|
|
credentialCount={credentialCount}
|
|
activeTunnelCount={activeTunnelCount}
|
|
activity={activity}
|
|
onClearActivity={onClearActivity}
|
|
isAdmin={isAdmin}
|
|
serviceLinks={serviceLinks}
|
|
onAddServiceLink={onAddServiceLink}
|
|
onDeleteServiceLink={onDeleteServiceLink}
|
|
statusLoading={statusLoading}
|
|
isVisible={isVisible}
|
|
/>
|
|
</div>
|
|
))}
|
|
<DropZone
|
|
panel={panel}
|
|
order={sorted.length}
|
|
onDrop={onDrop}
|
|
onDragOver={onDragOver}
|
|
active={!!dragState}
|
|
/>
|
|
{editMode && (
|
|
<AddCardTray
|
|
activeIds={allIds}
|
|
onAdd={(id) => onAdd(id, panel)}
|
|
cardLabels={cardLabels}
|
|
/>
|
|
)}
|
|
{sorted.length === 0 && !editMode && (
|
|
<div className="flex-1 flex items-center justify-center text-muted-foreground/20 text-xs border border-dashed border-border/30">
|
|
{t("dashboardTab.empty")}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ColumnDivider({
|
|
onMouseDown,
|
|
}: {
|
|
onMouseDown: (e: React.MouseEvent) => void;
|
|
}) {
|
|
return (
|
|
<div
|
|
onMouseDown={onMouseDown}
|
|
className="w-3 shrink-0 flex items-center justify-center cursor-col-resize group/divider self-stretch z-10"
|
|
title="Drag to resize columns"
|
|
>
|
|
<div className="w-px h-full bg-border group-hover/divider:bg-accent-brand/50 transition-colors" />
|
|
<div className="absolute size-4 flex items-center justify-center opacity-0 group-hover/divider:opacity-100 transition-opacity">
|
|
<GripHorizontal className="size-3 text-accent-brand" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── DashboardTab ─────────────────────────────────────────────────────────────
|
|
|
|
export function DashboardTab({
|
|
onOpenSingletonTab,
|
|
onOpenTab,
|
|
isVisible = true,
|
|
}: {
|
|
onOpenSingletonTab: (type: TabType, pendingEvent?: string) => void;
|
|
onOpenTab: (host: Host, type: TabType) => void;
|
|
/** When false, pause dashboard metrics refresh while the tab stays mounted. */
|
|
isVisible?: boolean;
|
|
}) {
|
|
const { t, i18n } = useTranslation();
|
|
const { initialLoadComplete } = useServerStatus();
|
|
const statusLoading = !initialLoadComplete;
|
|
|
|
const [slots, setSlots] = useState<CardSlot[]>(() => {
|
|
try {
|
|
const saved = localStorage.getItem("dashboardTab.slots");
|
|
if (saved) {
|
|
const parsed = JSON.parse(saved) as CardSlot[];
|
|
return parsed.map((s, i) => ({ key: s.key ?? `${s.id}_${i}`, ...s }));
|
|
}
|
|
} catch {
|
|
/* ignore */
|
|
}
|
|
return DEFAULT_SLOTS;
|
|
});
|
|
|
|
const [homepageLinkCopied, setHomepageLinkCopied] = useState(false);
|
|
|
|
const handleCopyHomepageLink = () => {
|
|
navigator.clipboard
|
|
.writeText(`${window.location.origin}?view=homepage`)
|
|
.catch(() => {});
|
|
setHomepageLinkCopied(true);
|
|
setTimeout(() => setHomepageLinkCopied(false), 1500);
|
|
};
|
|
|
|
const [dashboardView, setDashboardView] = useState<"dashboard" | "homepage">(
|
|
() => {
|
|
try {
|
|
return (localStorage.getItem("dashboardView") ?? "dashboard") as
|
|
| "dashboard"
|
|
| "homepage";
|
|
} catch {
|
|
return "dashboard";
|
|
}
|
|
},
|
|
);
|
|
|
|
useEffect(() => {
|
|
try {
|
|
localStorage.setItem("dashboardView", dashboardView);
|
|
} catch {
|
|
/* ignore */
|
|
}
|
|
}, [dashboardView]);
|
|
|
|
const [editMode, setEditMode] = useState(false);
|
|
const [dragState, setDragState] = useState<DragState>(null);
|
|
|
|
const [mainWidthPct, setMainWidthPct] = useState(() => {
|
|
try {
|
|
const saved = localStorage.getItem("dashboardTab.mainWidthPct");
|
|
if (saved) return Number(saved);
|
|
} catch {
|
|
/* ignore */
|
|
}
|
|
return 68;
|
|
});
|
|
|
|
useEffect(() => {
|
|
try {
|
|
localStorage.setItem("dashboardTab.slots", JSON.stringify(slots));
|
|
} catch {
|
|
/* ignore */
|
|
}
|
|
}, [slots]);
|
|
|
|
useEffect(() => {
|
|
try {
|
|
localStorage.setItem("dashboardTab.mainWidthPct", String(mainWidthPct));
|
|
} catch {
|
|
/* ignore */
|
|
}
|
|
}, [mainWidthPct]);
|
|
|
|
const [hosts, setHosts] = useState<Host[]>([]);
|
|
const [isAdmin, setIsAdmin] = useState(false);
|
|
const [uptimeFormatted, setUptimeFormatted] = useState("");
|
|
const [versionText, setVersionText] = useState("");
|
|
const [versionStatus, setVersionStatus] = useState<
|
|
"up_to_date" | "requires_update" | "beta"
|
|
>("up_to_date");
|
|
const [dbHealth, setDbHealth] = useState<"healthy" | "error">("healthy");
|
|
const [credentialCount, setCredentialCount] = useState(0);
|
|
const [activeTunnelCount, setActiveTunnelCount] = useState(0);
|
|
const [activity, setActivity] = useState<RecentActivityItem[]>([]);
|
|
const [hostMetrics, setHostMetrics] = useState<
|
|
Map<string, { cpu: number | null; ram: number | null; disk: number | null }>
|
|
>(new Map());
|
|
const viewerSessionsRef = useRef<Map<number, string>>(new Map());
|
|
const statusCheckHosts = hosts.filter(isStatusCheckEnabled);
|
|
|
|
const fetchMetrics = useCallback(async (hostList: Host[]) => {
|
|
let statuses: Record<number, { status?: string }> = {};
|
|
try {
|
|
statuses = (await getAllServerStatuses()) as Record<
|
|
number,
|
|
{ status?: string }
|
|
>;
|
|
} catch {
|
|
/* best-effort */
|
|
}
|
|
|
|
const newSessions = new Map<number, string>(viewerSessionsRef.current);
|
|
const results = await Promise.all(
|
|
hostList.map(async (host) => {
|
|
const hostId = Number(host.id);
|
|
const knownStatus = statuses?.[hostId]?.status;
|
|
if (knownStatus === "offline") return null;
|
|
if (host.authType === "none" || host.authType === "opkssh") return null;
|
|
|
|
try {
|
|
const existing = newSessions.get(hostId);
|
|
if (!existing) {
|
|
const reg = await registerMetricsViewer(hostId);
|
|
if (reg.skipped) return null;
|
|
if (reg.success && reg.viewerSessionId) {
|
|
newSessions.set(hostId, reg.viewerSessionId);
|
|
}
|
|
}
|
|
const metrics = await getServerMetricsById(hostId);
|
|
if (!metrics) return null;
|
|
return {
|
|
id: host.id,
|
|
cpu: metrics.cpu?.percent ?? null,
|
|
ram: metrics.memory?.percent ?? null,
|
|
disk: metrics.disk?.percent ?? null,
|
|
};
|
|
} catch {
|
|
return null;
|
|
}
|
|
}),
|
|
);
|
|
|
|
viewerSessionsRef.current = newSessions;
|
|
const map = new Map<
|
|
string,
|
|
{ cpu: number | null; ram: number | null; disk: number | null }
|
|
>();
|
|
for (const r of results) {
|
|
if (r) map.set(r.id, { cpu: r.cpu, ram: r.ram, disk: r.disk });
|
|
}
|
|
setHostMetrics(map);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
let mounted = true;
|
|
const load = async () => {
|
|
const raw = await getSSHHosts().catch(() => []);
|
|
const mapped = raw.map(sshHostToHost);
|
|
const statusHosts = mapped.filter(isStatusCheckEnabled);
|
|
if (mounted) setHosts(mapped);
|
|
if (isVisible) {
|
|
fetchMetrics(statusHosts).catch(() => {});
|
|
}
|
|
};
|
|
load();
|
|
|
|
getUserInfo()
|
|
.then((info) => setIsAdmin(!!info.is_admin))
|
|
.catch(() => {});
|
|
getUptime()
|
|
.then((u) => setUptimeFormatted(u.formatted))
|
|
.catch(() => {});
|
|
getVersionInfo()
|
|
.then((info) => {
|
|
setVersionText(info.localVersion ?? "");
|
|
setVersionStatus(info.status ?? "up_to_date");
|
|
})
|
|
.catch(() => {});
|
|
getDatabaseHealth()
|
|
.then((health) => {
|
|
setDbHealth(
|
|
health.status === "ok" || health.status === "healthy"
|
|
? "healthy"
|
|
: "error",
|
|
);
|
|
})
|
|
.catch(() => {
|
|
setDbHealth("error");
|
|
});
|
|
getRecentActivity(50)
|
|
.then(setActivity)
|
|
.catch(() => {});
|
|
getCredentials()
|
|
.then((res) =>
|
|
setCredentialCount(
|
|
Array.isArray(res)
|
|
? res.length
|
|
: Array.isArray(res?.credentials)
|
|
? res.credentials.length
|
|
: 0,
|
|
),
|
|
)
|
|
.catch(() => {});
|
|
getTunnelStatuses()
|
|
.then((statuses) => {
|
|
const active = Object.values(statuses ?? {}).filter(
|
|
(s) => s?.status === "CONNECTED",
|
|
).length;
|
|
setActiveTunnelCount(active);
|
|
})
|
|
.catch(() => {});
|
|
|
|
if (!isVisible) {
|
|
return () => {
|
|
mounted = false;
|
|
};
|
|
}
|
|
|
|
const metricsInterval = setInterval(async () => {
|
|
if (document.visibilityState === "hidden") return;
|
|
const raw = await getSSHHosts().catch(() => []);
|
|
const mapped = raw.map(sshHostToHost);
|
|
const statusHosts = mapped.filter(isStatusCheckEnabled);
|
|
if (mounted) setHosts(mapped);
|
|
fetchMetrics(statusHosts).catch(() => {});
|
|
}, 30000);
|
|
|
|
return () => {
|
|
mounted = false;
|
|
clearInterval(metricsInterval);
|
|
};
|
|
}, [fetchMetrics, isVisible]);
|
|
|
|
useEffect(() => {
|
|
if (!isVisible || viewerSessionsRef.current.size === 0) return;
|
|
const heartbeat = setInterval(async () => {
|
|
if (document.visibilityState === "hidden") return;
|
|
for (const [, sessionId] of viewerSessionsRef.current) {
|
|
sendMetricsHeartbeat(sessionId).catch(() => {});
|
|
}
|
|
}, 30000);
|
|
return () => clearInterval(heartbeat);
|
|
}, [hostMetrics, isVisible]);
|
|
|
|
const handleClearActivity = async () => {
|
|
try {
|
|
await resetRecentActivity();
|
|
setActivity([]);
|
|
} catch {
|
|
/* ignore */
|
|
}
|
|
};
|
|
|
|
const [serviceLinks, setServiceLinks] = useState<ServiceLink[]>([]);
|
|
|
|
useEffect(() => {
|
|
getServiceLinks()
|
|
.then(setServiceLinks)
|
|
.catch(() => {});
|
|
}, []);
|
|
|
|
const handleAddServiceLink = async (label: string, url: string) => {
|
|
const created = await createServiceLink(label, url);
|
|
setServiceLinks((prev) => [...prev, created]);
|
|
};
|
|
|
|
const handleDeleteServiceLink = async (id: number) => {
|
|
await deleteServiceLink(id);
|
|
setServiceLinks((prev) => prev.filter((l) => l.id !== id));
|
|
};
|
|
|
|
const todayLabel = new Date().toLocaleDateString(i18n.language, {
|
|
weekday: "long",
|
|
month: "long",
|
|
day: "numeric",
|
|
year: "numeric",
|
|
});
|
|
const bodyRef = useRef<HTMLDivElement | null>(null);
|
|
|
|
const mainSlots = slots
|
|
.filter((s) => s.panel === "main")
|
|
.sort((a, b) => a.order - b.order);
|
|
const sideSlots = slots
|
|
.filter((s) => s.panel === "side")
|
|
.sort((a, b) => a.order - b.order);
|
|
const hasSide = sideSlots.length > 0;
|
|
|
|
const cardLabels: Record<DashboardCardId, string> = {
|
|
stats_bar: t("dashboard.serverOverview"),
|
|
counters_bar: t("dashboard.serverStats"),
|
|
quick_actions: t("dashboard.quickActions"),
|
|
host_status: t("dashboardTab.hostStatus"),
|
|
recent_activity: t("dashboard.recentActivity"),
|
|
network_graph: t("dashboard.networkGraph"),
|
|
service_links: t("dashboard.serviceLinks"),
|
|
homepage_preview: t("dashboard.homepagePreview"),
|
|
};
|
|
|
|
const onColumnDividerMouseDown = useCallback(
|
|
(e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
const startX = e.clientX;
|
|
const startPct = mainWidthPct;
|
|
const onMove = (ev: MouseEvent) => {
|
|
if (!bodyRef.current) return;
|
|
const totalW = bodyRef.current.getBoundingClientRect().width;
|
|
setMainWidthPct(
|
|
Math.min(
|
|
85,
|
|
Math.max(25, startPct + ((ev.clientX - startX) / totalW) * 100),
|
|
),
|
|
);
|
|
};
|
|
const onUp = () => {
|
|
window.removeEventListener("mousemove", onMove);
|
|
window.removeEventListener("mouseup", onUp);
|
|
};
|
|
window.addEventListener("mousemove", onMove);
|
|
window.addEventListener("mouseup", onUp);
|
|
},
|
|
[mainWidthPct],
|
|
);
|
|
|
|
const handleDragStart = (slot: CardSlot) =>
|
|
setDragState({
|
|
key: slot.key,
|
|
id: slot.id,
|
|
sourcePanel: slot.panel,
|
|
sourceOrder: slot.order,
|
|
});
|
|
const handleDragOver = (e: React.DragEvent) => e.preventDefault();
|
|
const handleDrop = (targetPanel: PanelId, targetOrder: number) => {
|
|
if (!dragState) return;
|
|
setSlots((prev) => {
|
|
const without = prev.filter((s) => s.key !== dragState.key);
|
|
const panelSlots = without
|
|
.filter((s) => s.panel === targetPanel)
|
|
.sort((a, b) => a.order - b.order);
|
|
const others = without.filter((s) => s.panel !== targetPanel);
|
|
const insertIdx = panelSlots.findIndex((s) => s.order > targetOrder);
|
|
const insertAt = insertIdx === -1 ? panelSlots.length : insertIdx;
|
|
const newPanelSlots = [
|
|
...panelSlots.slice(0, insertAt),
|
|
{
|
|
key: dragState.key,
|
|
id: dragState.id,
|
|
panel: targetPanel,
|
|
order: 0,
|
|
height: prev.find((s) => s.key === dragState.key)?.height ?? null,
|
|
},
|
|
...panelSlots.slice(insertAt),
|
|
].map((s, i) => ({ ...s, order: i }));
|
|
return [...others, ...newPanelSlots];
|
|
});
|
|
setDragState(null);
|
|
};
|
|
const handleRemove = (key: string) =>
|
|
setSlots((prev) => prev.filter((s) => s.key !== key));
|
|
const handleAdd = (id: DashboardCardId, panel: PanelId) => {
|
|
setSlots((prev) => {
|
|
const panelSlots = prev.filter((s) => s.panel === panel);
|
|
const maxOrder =
|
|
panelSlots.length > 0
|
|
? Math.max(...panelSlots.map((s) => s.order)) + 1
|
|
: 0;
|
|
const defaultHeight: number | null =
|
|
id === "network_graph"
|
|
? 350
|
|
: id === "host_status" || id === "recent_activity"
|
|
? null
|
|
: id === "service_links"
|
|
? 200
|
|
: 150;
|
|
const key = `${id}_${Date.now()}`;
|
|
return [
|
|
...prev,
|
|
{ key, id, panel, order: maxOrder, height: defaultHeight },
|
|
];
|
|
});
|
|
};
|
|
const handleHeightChange = (key: string, h: number) =>
|
|
setSlots((prev) =>
|
|
prev.map((s) => (s.key === key ? { ...s, height: h } : s)),
|
|
);
|
|
const handleReset = () => {
|
|
setSlots(DEFAULT_SLOTS);
|
|
setMainWidthPct(68);
|
|
setEditMode(false);
|
|
try {
|
|
localStorage.removeItem("dashboardTab.slots");
|
|
localStorage.removeItem("dashboardTab.mainWidthPct");
|
|
} catch {
|
|
/* ignore */
|
|
}
|
|
};
|
|
|
|
const columnProps = {
|
|
hosts,
|
|
hostMetrics,
|
|
uptimeFormatted,
|
|
versionText,
|
|
versionStatus,
|
|
dbHealth,
|
|
credentialCount,
|
|
activeTunnelCount,
|
|
activity,
|
|
onClearActivity: handleClearActivity,
|
|
onOpenSingletonTab,
|
|
onOpenTab,
|
|
cardLabels,
|
|
isAdmin,
|
|
serviceLinks,
|
|
onAddServiceLink: handleAddServiceLink,
|
|
onDeleteServiceLink: handleDeleteServiceLink,
|
|
statusLoading,
|
|
isVisible,
|
|
};
|
|
|
|
const isMobile = useIsMobile();
|
|
|
|
if (isMobile) {
|
|
const allSlots = [...mainSlots, ...sideSlots];
|
|
return (
|
|
<div className="flex flex-col w-full h-full min-h-0 overflow-hidden">
|
|
<div className="flex-1 min-h-0 overflow-y-auto px-3 pb-3 pt-3 flex flex-col gap-3">
|
|
<Card className="flex-row items-center justify-between px-4 py-3 shrink-0 gap-0">
|
|
<div>
|
|
<h1 className="text-base font-bold leading-tight">
|
|
{t("dashboard.title")}
|
|
</h1>
|
|
<p className="text-xs text-muted-foreground">{todayLabel}</p>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-xs text-muted-foreground hover:text-foreground"
|
|
asChild
|
|
>
|
|
<a
|
|
href="https://github.com/Termix-SSH/Termix"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
{t("dashboard.github")}
|
|
</a>
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-xs text-muted-foreground hover:text-foreground"
|
|
asChild
|
|
>
|
|
<a
|
|
href="https://github.com/Termix-SSH/Support"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
{t("dashboard.support")}
|
|
</a>
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-xs text-muted-foreground hover:text-foreground"
|
|
asChild
|
|
>
|
|
<a
|
|
href="https://discord.com/invite/jVQGdvHDrf"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
{t("dashboard.discord")}
|
|
</a>
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-xs text-muted-foreground hover:text-foreground"
|
|
asChild
|
|
>
|
|
<a
|
|
href="https://docs.termix.site/"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
{t("dashboard.docs")}
|
|
</a>
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-xs text-muted-foreground hover:text-foreground"
|
|
asChild
|
|
>
|
|
<a
|
|
href="https://donate.termix.site/"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
{t("dashboard.donate")}
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
{allSlots.map((slot) => (
|
|
<div
|
|
key={slot.id}
|
|
className={`shrink-0 ${slot.id === "host_status" || slot.id === "recent_activity" ? "max-h-72 flex flex-col overflow-hidden" : ""}`}
|
|
>
|
|
{slot.id === "stats_bar" && (
|
|
<StatsBarCard
|
|
hosts={hosts}
|
|
uptimeFormatted={uptimeFormatted}
|
|
versionText={versionText}
|
|
versionStatus={versionStatus}
|
|
dbHealth={dbHealth}
|
|
/>
|
|
)}
|
|
{slot.id === "counters_bar" && (
|
|
<CountersBarCard
|
|
hosts={hosts}
|
|
credentialCount={credentialCount}
|
|
activeTunnelCount={activeTunnelCount}
|
|
onOpenSingletonTab={onOpenSingletonTab}
|
|
/>
|
|
)}
|
|
{slot.id === "quick_actions" && (
|
|
<QuickActionsCard
|
|
onOpenSingletonTab={onOpenSingletonTab}
|
|
hosts={hosts}
|
|
onOpenTab={onOpenTab}
|
|
/>
|
|
)}
|
|
{slot.id === "host_status" && (
|
|
<HostStatusCard
|
|
hosts={statusCheckHosts}
|
|
hostMetrics={hostMetrics}
|
|
onOpenTab={onOpenTab}
|
|
isAdmin={isAdmin}
|
|
statusLoading={statusLoading}
|
|
/>
|
|
)}
|
|
{slot.id === "recent_activity" && (
|
|
<RecentActivityCard
|
|
activity={activity}
|
|
hosts={hosts}
|
|
onOpenTab={onOpenTab}
|
|
onClear={handleClearActivity}
|
|
statusLoading={statusLoading}
|
|
/>
|
|
)}
|
|
{slot.id === "network_graph" && (
|
|
<NetworkGraphCard
|
|
embedded={true}
|
|
isVisible={isVisible}
|
|
onOpenInNewTab={() => onOpenSingletonTab("network_graph")}
|
|
/>
|
|
)}
|
|
{slot.id === "service_links" && (
|
|
<ServiceLinksCard
|
|
links={serviceLinks}
|
|
onAdd={handleAddServiceLink}
|
|
onDelete={handleDeleteServiceLink}
|
|
/>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col w-full h-full min-h-0 overflow-hidden">
|
|
<Card className="flex-row items-center justify-between px-5 py-3 shrink-0 mx-5 mt-5 gap-0">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex items-center gap-0 bg-muted/40 border border-border p-0.5">
|
|
<button
|
|
onClick={() => setDashboardView("dashboard")}
|
|
className={`px-3 py-1 text-sm font-medium transition-colors ${dashboardView === "dashboard" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`}
|
|
>
|
|
{t("dashboard.title")}
|
|
</button>
|
|
<button
|
|
onClick={() => setDashboardView("homepage")}
|
|
className={`px-3 py-1 text-sm font-medium transition-colors ${dashboardView === "homepage" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`}
|
|
>
|
|
{t("nav.homepage")}
|
|
</button>
|
|
</div>
|
|
{dashboardView === "dashboard" && (
|
|
<p className="text-xs text-muted-foreground hidden sm:block">
|
|
{todayLabel}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<div className="hidden sm:flex items-center gap-2 mr-2 bg-muted/50 px-2.5 py-1 rounded-none border border-border">
|
|
<span className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">
|
|
{t("dashboardTab.commandPalette")}
|
|
</span>
|
|
<div className="flex items-center gap-1">
|
|
<Kbd className="h-5 px-1.5 bg-background text-[10px]">Shift</Kbd>
|
|
<span className="text-[10px] text-muted-foreground">+</span>
|
|
<Kbd className="h-5 px-1.5 bg-background text-[10px]">Shift</Kbd>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-xs text-muted-foreground hover:text-foreground"
|
|
asChild
|
|
>
|
|
<a
|
|
href="https://github.com/Termix-SSH/Termix"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
{t("dashboard.github")}
|
|
</a>
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-xs text-muted-foreground hover:text-foreground"
|
|
asChild
|
|
>
|
|
<a
|
|
href="https://github.com/Termix-SSH/Support"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
{t("dashboard.support")}
|
|
</a>
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-xs text-muted-foreground hover:text-foreground"
|
|
asChild
|
|
>
|
|
<a
|
|
href="https://discord.com/invite/jVQGdvHDrf"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
{t("dashboard.discord")}
|
|
</a>
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-xs text-muted-foreground hover:text-foreground"
|
|
asChild
|
|
>
|
|
<a
|
|
href="https://docs.termix.site/"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
{t("dashboard.docs")}
|
|
</a>
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-xs text-muted-foreground hover:text-foreground"
|
|
asChild
|
|
>
|
|
<a
|
|
href="https://donate.termix.site/"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
{t("dashboard.donate")}
|
|
</a>
|
|
</Button>
|
|
{dashboardView === "dashboard" && (
|
|
<>
|
|
<Separator orientation="vertical" className="mx-1 h-5" />
|
|
{editMode ? (
|
|
<>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-xs text-muted-foreground"
|
|
onClick={handleReset}
|
|
>
|
|
{t("dashboard.reset")}
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
className="text-xs bg-accent-brand hover:bg-accent-brand/90 text-white"
|
|
onClick={() => setEditMode(false)}
|
|
>
|
|
{t("dashboardTab.done")}
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => setEditMode(true)}
|
|
title={t("dashboard.customizeLayout")}
|
|
>
|
|
<LayoutDashboard className="size-4 text-accent-brand" />
|
|
</Button>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
|
|
{dashboardView === "homepage" ? (
|
|
<div className="flex-1 min-h-0 overflow-hidden mx-5 mb-5 mt-4 border border-border flex flex-col">
|
|
<div className="flex items-center justify-between px-3 py-1.5 border-b border-border shrink-0 bg-muted/20">
|
|
<span className="text-[10px] text-muted-foreground/50 uppercase tracking-widest font-semibold">
|
|
{t("nav.homepage")}
|
|
</span>
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
className="text-[10px] text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
|
|
onClick={handleCopyHomepageLink}
|
|
>
|
|
{homepageLinkCopied ? (
|
|
<>
|
|
<Check size={10} className="text-accent-brand" />
|
|
<span className="text-accent-brand">
|
|
{t("homepage.linkCopied")}
|
|
</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Link size={10} />
|
|
{t("homepage.copyLink")}
|
|
</>
|
|
)}
|
|
</button>
|
|
<button
|
|
className="text-[10px] text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
|
|
onClick={() => onOpenSingletonTab("homepage")}
|
|
>
|
|
<ExternalLink size={10} />
|
|
{t("homepage.openFullView")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 min-h-0 overflow-hidden">
|
|
<HomepageCanvas />
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{editMode && (
|
|
<div className="mx-5 mt-4 px-4 py-2 border border-dashed border-accent-brand/40 bg-accent-brand/5 shrink-0 flex items-center gap-2">
|
|
<LayoutDashboard className="size-3.5 text-accent-brand shrink-0" />
|
|
<span className="text-xs text-accent-brand font-semibold">
|
|
{t("dashboardTab.editModeInstructions")}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
<div
|
|
ref={bodyRef}
|
|
className="flex flex-row flex-1 min-h-0 px-5 pb-5 pt-4 overflow-hidden"
|
|
>
|
|
<div
|
|
className="flex flex-col min-h-0"
|
|
style={{
|
|
width: hasSide || editMode ? `${mainWidthPct}%` : "100%",
|
|
}}
|
|
>
|
|
<PanelColumn
|
|
panel="main"
|
|
slots={mainSlots}
|
|
editMode={editMode}
|
|
dragState={dragState}
|
|
onDragStart={handleDragStart}
|
|
onDrop={handleDrop}
|
|
onDragOver={handleDragOver}
|
|
onRemove={handleRemove}
|
|
onAdd={handleAdd}
|
|
onHeightChange={handleHeightChange}
|
|
{...columnProps}
|
|
/>
|
|
</div>
|
|
|
|
{(hasSide || editMode) &&
|
|
(editMode ? (
|
|
<ColumnDivider onMouseDown={onColumnDividerMouseDown} />
|
|
) : (
|
|
<div className="w-4 shrink-0" />
|
|
))}
|
|
|
|
{(hasSide || editMode) && (
|
|
<div className="flex flex-col min-h-0 flex-1">
|
|
<PanelColumn
|
|
panel="side"
|
|
slots={sideSlots}
|
|
editMode={editMode}
|
|
dragState={dragState}
|
|
onDragStart={handleDragStart}
|
|
onDrop={handleDrop}
|
|
onDragOver={handleDragOver}
|
|
onRemove={handleRemove}
|
|
onAdd={handleAdd}
|
|
onHeightChange={handleHeightChange}
|
|
{...columnProps}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|