{editMode && (

)} {editMode && (

)}

{slot.id === "stats_bar" && ( )} {slot.id === "counters_bar" && ( )} {slot.id === "quick_actions" && ( )} {slot.id === "host_status" && ( )} {slot.id === "recent_activity" && ( )} {!CORE_CARD_IDS.has(slot.id) && ( )}

{editMode && !isFlex && (

)}

); } // ─── 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 (

{ onDragOver(e); setOver(true); }} onDragLeave={() => setOver(false)} onDrop={() => { setOver(false); onDrop(panel, order); }} /> ); } // ─── AddCardTray ────────────────────────────────────────────────────────────── function AddCardTray({ activeIds, onAdd, cardLabels, }: { activeIds: string[]; onAdd: (id: string) => void; cardLabels: Record; }) { const { t } = useTranslation(); const registeredCards = useRegisteredDashboardCards(); const available = [ ...DASHBOARD_CARDS.map((card) => ({ id: card.id as string })), ...registeredCards.map((card) => ({ id: card.id })), ].filter((c) => !activeIds.includes(c.id)); if (available.length === 0) return null; return (

{t("dashboardTab.add")} {available.map((card) => ( ))}

); } // ─── 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[]; uptimeFormatted: string; versionText: string; versionStatus: "up_to_date" | "requires_update" | "beta" | "unknown"; releaseUrl: string; dbHealth: "healthy" | "error"; credentialCount: number; activity: RecentActivityItem[]; onClearActivity: () => void; cardLabels: Record; isAdmin: boolean; statusLoading: boolean; isVisible?: boolean; }; function PanelColumn({ panel, slots, editMode, dragState, onDragStart, onDrop, onDragOver, onRemove, onAdd, onHeightChange, onOpenSingletonTab, onOpenTab, hosts, uptimeFormatted, versionText, versionStatus, releaseUrl, dbHealth, credentialCount, activity, onClearActivity, cardLabels, isAdmin, 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 (

{sorted.map((slot, idx) => (

{idx > 0 && (

)} onDragStart(slot)} onDrop={() => onDrop(slot.panel, slot.order)} onDragOver={onDragOver} onRemove={() => onRemove(slot.key)} onHeightChange={onHeightChange} onOpenSingletonTab={onOpenSingletonTab} onOpenTab={onOpenTab} hosts={hosts} uptimeFormatted={uptimeFormatted} versionText={versionText} versionStatus={versionStatus} releaseUrl={releaseUrl} dbHealth={dbHealth} credentialCount={credentialCount} activity={activity} onClearActivity={onClearActivity} isAdmin={isAdmin} statusLoading={statusLoading} isVisible={isVisible} />

))} {editMode && ( onAdd(id, panel)} cardLabels={cardLabels} /> )} {sorted.length === 0 && !editMode && (

{t("dashboardTab.empty")}

)}

); } function ColumnDivider({ onMouseDown, }: { onMouseDown: (e: React.MouseEvent) => void; }) { return (

); } // ─── 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 registeredCards = useRegisteredDashboardCards(); const { t, i18n } = useTranslation(); const { initialLoadComplete } = useServerStatus(); const statusLoading = !initialLoadComplete; const [slots, setSlots] = useState(() => { 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; }); // Picking an interface preset rewrites the stored layout from the settings // panel, so pick it up without waiting for a remount. useEffect(() => { const handler = () => { try { const saved = localStorage.getItem("dashboardTab.slots"); if (!saved) return; const parsed = JSON.parse(saved) as CardSlot[]; setSlots( parsed.map((s, i) => ({ key: s.key ?? `${s.id}_${i}`, ...s })), ); } catch { /* ignore */ } }; window.addEventListener("dashboardSlotsChanged", handler); return () => window.removeEventListener("dashboardSlotsChanged", handler); }, []); // A plugin's own view next to the dashboard, e.g. the homepage plugin's // canvas preview. Only one is offered today; "dashboard" always exists. const secondaryViews = useActionSlot("dashboard.secondaryView"); const secondaryView = secondaryViews[0]; const { settled: pluginsSettled } = usePluginStore(); const [dashboardView, setDashboardView] = useState(() => { try { return localStorage.getItem("dashboardView") ?? "dashboard"; } catch { return "dashboard"; } }); // Until plugins settle, a plugin view saved from last session hasn't had a // chance to register yet, so its absence doesn't mean it's really gone. const viewPending = !pluginsSettled && dashboardView !== "dashboard"; // Falls back to the dashboard when the view a plugin contributed is off. const isDashboardView = dashboardView === "dashboard" || (!viewPending && !secondaryView) || (!!secondaryView && dashboardView !== secondaryView.actionId); useEffect(() => { try { localStorage.setItem("dashboardView", dashboardView); } catch { /* ignore */ } }, [dashboardView]); const [editMode, setEditMode] = useState(false); const [dragState, setDragState] = useState(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([]); const [isAdmin, setIsAdmin] = useState(false); const [uptimeFormatted, setUptimeFormatted] = useState(""); const [versionText, setVersionText] = useState(""); const [versionStatus, setVersionStatus] = useState< "up_to_date" | "requires_update" | "beta" | "unknown" >("up_to_date"); const [releaseUrl, setReleaseUrl] = useState(""); const [dbHealth, setDbHealth] = useState<"healthy" | "error">("healthy"); const [credentialCount, setCredentialCount] = useState(0); const [activity, setActivity] = useState([]); const statusCheckHosts = hosts.filter(isStatusCheckEnabled); useEffect(() => { let mounted = true; const load = async () => { const raw = await getSSHHosts().catch(() => []); if (mounted) setHosts(raw.map(sshHostToHost)); }; load(); getUserInfo() .then((info) => { // A desktop on its own has one implicit user and nothing to // administer; linked, it is an admin when the server account is. setIsAdmin(isElectron() ? !!info.linked?.isAdmin : !!info.is_admin); }) .catch(() => {}); getUptime() .then((u) => setUptimeFormatted(u.formatted)) .catch(() => {}); getVersionInfo() .then((info) => { setVersionText(info.localVersion ?? ""); setVersionStatus(info.status ?? "unknown"); setReleaseUrl(releaseUrlFrom(info)); }) .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(() => {}); if (!isVisible) { return () => { mounted = false; }; } const hostsInterval = setInterval(async () => { if (document.visibilityState === "hidden") return; const raw = await getSSHHosts().catch(() => []); if (mounted) setHosts(raw.map(sshHostToHost)); }, 30000); return () => { mounted = false; clearInterval(hostsInterval); }; }, [isVisible]); const handleClearActivity = async () => { try { await resetRecentActivity(); setActivity([]); } catch { /* ignore */ } }; const todayLabel = new Date().toLocaleDateString(i18n.language, { weekday: "long", month: "long", day: "numeric", year: "numeric", }); const bodyRef = useRef(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 = { 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"), ...Object.fromEntries( registeredCards.map((card) => [card.id, t(card.titleKey)]), ), }; 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 = getRegisteredDashboardCard(id)?.defaultHeight ?? (id === "host_status" || id === "recent_activity" ? null : 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, uptimeFormatted, versionText, versionStatus, releaseUrl, dbHealth, credentialCount, activity, onClearActivity: handleClearActivity, onOpenSingletonTab, onOpenTab, cardLabels, isAdmin, statusLoading, isVisible, }; const isMobile = useIsMobile(); if (isMobile) { const allSlots = [...mainSlots, ...sideSlots]; return (

{t("dashboard.title")}

{todayLabel}

{allSlots.map((slot) => (

))}

); } return (

{viewPending ? ( ) : (

{secondaryView && ( )}

)} {isDashboardView && !viewPending && (

{todayLabel}

)}

{t("dashboardTab.commandPalette")}

Shift + Shift

{isDashboardView && ( <> {editMode ? ( <> ) : ( )} )}

{viewPending ? (

) : !isDashboardView && secondaryView?.component ? (

) : ( <> {editMode && (

{t("dashboardTab.editModeInstructions")}

)}

{(hasSide || editMode) && (editMode ? ( ) : (

))} {(hasSide || editMode) && (

)}

); }