v0.2.6-pre.002

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

@@ -0,0 +1,152 @@
+// file: crates/ksp-app-wallet-desk/frontend/ts/main.ts
+// version: 1
+
+import "bootstrap";
+import DataTable from "datatables.net-bs5";
+import "datatables.net-select-bs5";
+import ResizeObserver from "resize-observer-polyfill";
+import "simplebar";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import type { RuntimeStatusDto } from "./bindings/ksp_app_wallet_desk/dto_common/RuntimeStatusDto.ts";
+import { frontendDebug, frontendInfo, frontendTrace, installFrontendConsoleBridge } from "./frontend_log";
+import { invokeKsp } from "./invoke";
+import "../sass/main.scss";
+
+(window as Window & typeof globalThis & { ResizeObserver?: typeof ResizeObserver }).ResizeObserver = ResizeObserver;
+installFrontendConsoleBridge("main");
+
+type ViewId = "dashboard" | "wallets" | "create-import" | "details" | "security" | "diagnostics";
+
+const viewTitles: Record<ViewId, string> = {
+    dashboard: "Dashboard",
+    wallets: "Wallets",
+    "create-import": "Create / Import",
+    details: "Details",
+    security: "Security",
+    diagnostics: "Diagnostics",
+};
+
+function isViewId(value: string): value is ViewId {
+    return value in viewTitles;
+}
+
+function activateView(viewId: ViewId, source: "startup" | "user"): void {
+    if (source === "user") {
+        frontendDebug("main", "Wallet Desk navigation activated", { viewId });
+    }
+    const title = viewTitles[viewId];
+    const headerTitle = document.querySelector<HTMLElement>("#headerViewTitle");
+    const viewTitle = document.querySelector<HTMLElement>("#viewTitle");
+    if (headerTitle) {
+        headerTitle.textContent = title;
+    }
+    if (viewTitle) {
+        viewTitle.textContent = title;
+    }
+    document.title = `Wallet Desk — ${title}`;
+    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");
+    });
+    document.querySelectorAll<HTMLElement>("[data-view-panel]").forEach(panel => {
+        panel.hidden = panel.dataset.viewPanel !== viewId;
+    });
+    frontendTrace("main", "Wallet Desk view DOM updated", { viewId, source });
+}
+
+function bindNavigation(): void {
+    document.querySelectorAll<HTMLButtonElement>("[data-view]").forEach(button => {
+        button.addEventListener("click", () => {
+            const requestedView = button.dataset.view;
+            frontendTrace("main", "Wallet Desk navigation clicked", { requestedView: requestedView ?? null });
+            if (requestedView && isViewId(requestedView)) {
+                activateView(requestedView, "user");
+            }
+        });
+    });
+    frontendTrace("main", "Wallet Desk navigation handlers installed");
+}
+
+function initializeWalletTable(): void {
+    new DataTable("#walletInventoryTable", {
+        order: [[1, "asc"]],
+        pageLength: 10,
+        select: {
+            style: "single",
+        },
+        language: {
+            emptyTable: "L'inventaire Wallet sera branché en pre.004.",
+            search: "Filtrer :",
+            zeroRecords: "Aucun wallet correspondant.",
+        },
+    });
+    frontendDebug("main", "Wallet inventory DataTable initialized", { phase: "pre.002-shell" });
+}
+
+function renderRuntimeStatus(status: RuntimeStatusDto): void {
+    const version = document.querySelector<HTMLElement>("#runtimeVersion");
+    const profile = document.querySelector<HTMLElement>("#runtimeLoggingProfile");
+    const fallback = document.querySelector<HTMLElement>("#runtimeLoggingFallback");
+    const documents = document.querySelector<HTMLElement>("#runtimeConfigDocuments");
+    const phase = document.querySelector<HTMLElement>("#runtimeShellPhase");
+    const shellStatus = document.querySelector<HTMLElement>("#shellStatus");
+    if (version) {
+        version.textContent = status.applicationVersion;
+    }
+    if (profile) {
+        profile.textContent = status.activeLoggingProfile ?? "fallback transitoire";
+    }
+    if (fallback) {
+        fallback.textContent = status.fallbackLoggingActive ? "oui" : "non";
+    }
+    if (documents) {
+        documents.textContent = status.configDocumentCount.toString();
+    }
+    if (phase) {
+        phase.textContent = status.shellPhase;
+    }
+    if (shellStatus) {
+        shellStatus.textContent = "Shell Wallet Desk prêt.";
+    }
+    frontendTrace("main", "Wallet Desk runtime status rendered", {
+        fallbackLoggingActive: status.fallbackLoggingActive,
+        shellPhase: status.shellPhase,
+    });
+}
+
+async function loadRuntimeStatus(): Promise<void> {
+    const status = await invokeKsp<RuntimeStatusDto>("main", "get_runtime_status");
+    renderRuntimeStatus(status);
+}
+
+function bindShellActions(): void {
+    document.querySelectorAll<HTMLButtonElement>("[data-shell-action]").forEach(button => {
+        button.addEventListener("click", () => {
+            frontendDebug("main", "Wallet Desk shell action clicked", { action: button.dataset.shellAction ?? "unknown", enabled: !button.disabled });
+        });
+    });
+    frontendTrace("main", "Wallet Desk shell action handlers installed");
+}
+
+async function initializeMain(): Promise<void> {
+    const windowLabel = getCurrentWindow().label;
+    frontendInfo("main", "Wallet Desk main frontend loaded", { windowLabel });
+    bindNavigation();
+    bindShellActions();
+    initializeWalletTable();
+    activateView("dashboard", "startup");
+    try {
+        await loadRuntimeStatus();
+    } catch {
+        const shellStatus = document.querySelector<HTMLElement>("#shellStatus");
+        if (shellStatus) {
+            shellStatus.textContent = "Le statut runtime n'a pas pu être chargé.";
+        }
+        frontendTrace("main", "Wallet Desk shell status replaced", { status: "runtime_error" });
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    void initializeMain();
+});