khadhroony-solana-project/crates/ksp-app-backfill-desk/frontend/ts/main.ts

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