Build application shell with live runtime status

2026-05-20 12:22:40 +01:00
parent b38c374a81
commit 9fcf67c7ae
16 changed files with 672 additions and 6 deletions
@@ -0,0 +1,66 @@
+import { Sidebar } from "../navigation/Sidebar";
+import { TopBar } from "./TopBar";
+import { BottomStatusBar } from "./BottomStatusBar";
+import { useTelemetryStream } from "../../features/telemetry/hooks/useTelemetryStream";
+import { useNotifications } from "../../features/notifications/hooks/useNotifications";
+import { useCurrentUser } from "../../features/auth/hooks/useCurrentUser";
+import { useRuntimeConfig } from "../../features/system/hooks/useRuntimeConfig";
+
+import { useState } from "react";
+
+type AppShellProps = {
+    children: React.ReactNode;
+};
+
+export function AppShell({ children }: AppShellProps) {
+    const telemetry = useTelemetryStream();
+    const notifications = useNotifications();
+    const currentUser = useCurrentUser();
+    const [theme, setTheme] = useState<"dark" | "light">("dark");
+    const runtime = useRuntimeConfig();
+
+    const toggleTheme = () => {
+        setTheme((current) => (current === "dark" ? "light" : "dark"));
+    };
+
+    const isDark = theme === "dark";
+    return (
+        <div className={isDark ? "min-h-screen bg-[#0E1A24] text-[#EAF2FA]" : "min-h-screen bg-[#F4F7FA] text-[#102030]"}>
+            <div className="flex min-h-screen">
+                <div className="relative">
+                    <Sidebar theme={theme} />
+                    <div className="pointer-events-none absolute right-0 top-0 h-full w-2 bg-gradient-to-r from-[#3A5064]/6 to-transparent blur-sm" />
+                </div>
+
+                <div className="flex min-h-screen flex-1 flex-col">
+                    <TopBar
+                        connected={telemetry.connected}
+                        lastTimestamp={telemetry.lastTimestamp}
+                        notificationCount={notifications.unreadCount}
+                        userInitials={currentUser.initials}
+                        theme={theme}
+                        onToggleTheme={toggleTheme}
+                    />
+
+                    <main
+                        className={
+                            isDark
+                                ? "flex-1 overflow-y-auto bg-[#0E1A24] px-6 py-5"
+                                : "flex-1 overflow-y-auto bg-[#F4F7FA] px-6 py-5"
+                        }
+                    >
+                        {children}
+                    </main>
+
+                    <BottomStatusBar
+                        theme={theme}
+                        backendPort={runtime.runtimeConfig?.backendPort?.toString()}
+                        mode={runtime.runtimeConfig?.mode}
+                        controllerName={runtime.runtimeConfig?.controllerName}
+                        controllerIp={runtime.runtimeConfig?.controllerIp}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+}