v0.3.7-pre.002

crates/ksp-app-backfill-desk/frontend/ts/main.ts

@@ -0,0 +1,144 @@
+// file: crates/ksp-app-backfill-desk/frontend/ts/main.ts
+// version: 1
+
+import "bootstrap";
+import ResizeObserver from "resize-observer-polyfill";
+import "simplebar";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import type { ShellStatusDto } from "./bindings/ksp_app_backfill_desk/dto_common/ShellStatusDto.ts";
+import { frontendDebug, frontendInfo, frontendTrace, frontendWarn, installFrontendConsoleBridge } from "./frontend_log";
+import { invokeKsp } from "./invoke";
+
+(window as Window & typeof globalThis & { ResizeObserver?: typeof ResizeObserver }).ResizeObserver = ResizeObserver;
+installFrontendConsoleBridge("main");
+
+type ViewId = "backfill" | "diagnostics";
+
+const viewTitles: Record<ViewId, string> = {
+    backfill: "Backfill",
+    diagnostics: "Diagnostics",
+};
+
+function isViewId(value: string | undefined): value is ViewId {
+    return value === "backfill" || value === "diagnostics";
+}
+
+function activateView(viewId: ViewId, source: "startup" | "user"): void {
+    document.querySelectorAll<HTMLElement>("[data-view-panel]").forEach(panel => {
+        panel.hidden = panel.dataset.viewPanel !== viewId;
+    });
+    document.querySelectorAll<HTMLButtonElement>("[data-view]").forEach(button => {
+        const active = button.dataset.view === viewId;
+        button.classList.toggle("active", active);
+        button.setAttribute("aria-current", active ? "page" : "false");
+    });
+    const header = document.querySelector<HTMLElement>("#headerViewTitle");
+    if (header) {
+        header.textContent = viewTitles[viewId];
+    }
+    document.title = `Backfill Desk — ${viewTitles[viewId]}`;
+    frontendTrace("main", "Backfill Desk view DOM updated", { viewId, source });
+}
+
+function bindFrontendInteractions(): void {
+    document.addEventListener(
+        "click",
+        event => {
+            const source = event.target;
+            if (!(source instanceof Element)) {
+                return;
+            }
+            const control = source.closest<HTMLElement>('button, a, input, select, textarea, [role="button"], [role="tab"], [data-view]');
+            if (!control) {
+                return;
+            }
+            frontendTrace("main", "Backfill Desk frontend control clicked", {
+                controlId: control.id || null,
+                role: control.getAttribute("role"),
+                tagName: control.tagName.toLowerCase(),
+                viewId: control.dataset.view ?? null,
+            });
+        },
+        true,
+    );
+    frontendTrace("main", "Backfill Desk frontend control interaction logger installed");
+}
+
+function bindNavigation(): void {
+    document.querySelectorAll<HTMLButtonElement>("[data-view]").forEach(button => {
+        button.addEventListener("click", () => {
+            const viewId = button.dataset.view;
+            frontendDebug("main", "Backfill Desk navigation tab clicked", { viewId: viewId ?? "unknown" });
+            if (isViewId(viewId)) {
+                activateView(viewId, "user");
+            }
+        });
+    });
+    frontendTrace("main", "Backfill Desk navigation handlers installed");
+}
+
+function renderRuntimeStatus(status: ShellStatusDto): void {
+    const values: Record<string, string> = {
+        runtimeVersion: status.applicationVersion,
+        runtimeShellPhase: status.shellPhase,
+        runtimeConfigDocuments: status.configDocumentCount.toString(),
+        runtimeLoggingProfile: status.activeLoggingProfile ?? "fallback transitoire",
+        runtimeLoggingFallback: status.fallbackLoggingActive ? "oui" : "non",
+    };
+    for (const [id, value] of Object.entries(values)) {
+        const element = document.querySelector<HTMLElement>(`#${id}`);
+        if (element) {
+            element.textContent = value;
+        }
+    }
+    const badge = document.querySelector<HTMLElement>("#appVersionBadge");
+    if (badge) {
+        badge.textContent = status.applicationVersion;
+    }
+    const diagnostic = document.querySelector<HTMLElement>("#runtimeDiagnostic");
+    if (diagnostic) {
+        diagnostic.hidden = status.startupDiagnostic === null;
+        diagnostic.textContent = status.startupDiagnostic === null ? "" : `${status.startupDiagnostic.domain}/${status.startupDiagnostic.code}: ${status.startupDiagnostic.message}`;
+    }
+    frontendTrace("main", "Backfill Desk runtime status rendered", {
+        fallbackLoggingActive: status.fallbackLoggingActive,
+        configDocumentCount: status.configDocumentCount,
+    });
+}
+
+async function loadRuntimeStatus(source: "startup" | "user"): Promise<void> {
+    frontendDebug("main", "Backfill Desk runtime status load started", { source });
+    const status = await invokeKsp<ShellStatusDto>("main", "get_runtime_status");
+    renderRuntimeStatus(status);
+    frontendDebug("main", "Backfill Desk runtime status load completed", { source });
+}
+
+function bindRuntimeStatusRefresh(): void {
+    const button = document.querySelector<HTMLButtonElement>("#refreshRuntimeStatus");
+    if (!button) {
+        return;
+    }
+    button.addEventListener("click", () => {
+        frontendDebug("main", "Backfill Desk runtime status refresh button clicked");
+        void loadRuntimeStatus("user").catch(() => frontendWarn("main", "Backfill Desk runtime status refresh failed"));
+    });
+    frontendTrace("main", "Backfill Desk runtime status refresh handler installed");
+}
+
+async function initializeMain(): Promise<void> {
+    const windowLabel = getCurrentWindow().label;
+    frontendInfo("main", "Backfill Desk main frontend loaded", { windowLabel });
+    bindFrontendInteractions();
+    bindNavigation();
+    bindRuntimeStatusRefresh();
+    activateView("backfill", "startup");
+    try {
+        await loadRuntimeStatus("startup");
+    } catch {
+        frontendWarn("main", "Backfill Desk startup runtime status load failed");
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    void initializeMain();
+});