import { useState, useEffect, useCallback } from "react"; import { APP_VERSION } from "./version"; import Dashboard from "./pages/Dashboard"; import { Nodes } from "./pages/Nodes"; import NetworkDiscovery from "./pages/NetworkDiscovery"; import { FlashFirmware } from "./pages/FlashFirmware"; import { OtaUpdate } from "./pages/OtaUpdate"; import { EdgeModules } from "./pages/EdgeModules"; import { Sensing } from "./pages/Sensing"; import { MeshView } from "./pages/MeshView"; import { Settings } from "./pages/Settings"; type Page = | "dashboard" | "discovery" | "nodes" | "flash" | "ota" | "wasm" | "sensing" | "mesh" | "settings"; interface NavItem { id: Page; label: string; icon: string; } const NAV_ITEMS: NavItem[] = [ { id: "dashboard", label: "Dashboard", icon: "\u25A6" }, { id: "discovery", label: "Discovery", icon: "\u25CE" }, { id: "nodes", label: "Nodes", icon: "\u25C9" }, { id: "flash", label: "Flash", icon: "\u26A1" }, { id: "ota", label: "OTA", icon: "\u2B06" }, { id: "wasm", label: "Edge Modules", icon: "\u2B21" }, { id: "sensing", label: "Sensing", icon: "\u2248" }, { id: "mesh", label: "Mesh View", icon: "\u2B2F" }, { id: "settings", label: "Settings", icon: "\u2699" }, ]; interface LiveStatus { nodeCount: number; onlineCount: number; serverRunning: boolean; serverPort: number | null; } const App: React.FC = () => { const [activePage, setActivePage] = useState("dashboard"); const [hoveredNav, setHoveredNav] = useState(null); const [pageKey, setPageKey] = useState(0); const [liveStatus, setLiveStatus] = useState({ nodeCount: 0, onlineCount: 0, serverRunning: false, serverPort: null, }); const navigateTo = useCallback((page: Page) => { setActivePage(page); setPageKey((k) => k + 1); }, []); // Poll live status every 5 seconds useEffect(() => { const poll = async () => { try { const { invoke } = await import("@tauri-apps/api/core"); const [nodes, server] = await Promise.all([ invoke<{ health: string }[]>("discover_nodes", { timeoutMs: 2000 }).catch(() => []), invoke<{ running: boolean; http_port: number | null }>("server_status").catch(() => ({ running: false, http_port: null, })), ]); setLiveStatus({ nodeCount: nodes.length, onlineCount: nodes.filter((n) => n.health === "online").length, serverRunning: server.running, serverPort: server.http_port, }); } catch { // Tauri not available (browser preview) — leave defaults } }; poll(); const id = setInterval(poll, 8000); return () => clearInterval(id); }, []); const renderPage = () => { switch (activePage) { case "dashboard": return ; case "discovery": return ; case "nodes": return ; case "flash": return ; case "ota": return ; case "wasm": return ; case "sensing": return ; case "mesh": return ; case "settings": return ; } }; return (
{/* Sidebar */} {/* Main content */}
{renderPage()}
{/* Status Bar */}
); }; export default App;