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

// file: crates/ksp-app-wallet-desk/frontend/ts/main.ts
// version: 2

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.003-config-wallet" });
}

function renderRuntimeStatus(status: RuntimeStatusDto): void {
    const version = document.querySelector<HTMLElement>("#runtimeVersion");
    const compositeProfile = document.querySelector<HTMLElement>("#runtimeCompositeProfile");
    const loggingProfile = document.querySelector<HTMLElement>("#runtimeLoggingProfile");
    const walletProfile = document.querySelector<HTMLElement>("#runtimeWalletProfile");
    const fallback = document.querySelector<HTMLElement>("#runtimeLoggingFallback");
    const documents = document.querySelector<HTMLElement>("#runtimeConfigDocuments");
    const walletsRoot = document.querySelector<HTMLElement>("#runtimeWalletsDirectory");
    const walletsSubdirectory = document.querySelector<HTMLElement>("#runtimeWalletsSubdirectory");
    const effectiveWalletsDirectory = document.querySelector<HTMLElement>("#runtimeEffectiveWalletsDirectory");
    const walletDirectoryCreated = document.querySelector<HTMLElement>("#runtimeWalletDirectoryCreated");
    const phase = document.querySelector<HTMLElement>("#runtimeShellPhase");
    const shellStatus = document.querySelector<HTMLElement>("#shellStatus");
    if (version) {
        version.textContent = status.applicationVersion;
    }
    if (compositeProfile) {
        compositeProfile.textContent = status.activeCompositeProfile;
    }
    if (loggingProfile) {
        loggingProfile.textContent = status.activeLoggingProfile ?? "fallback transitoire";
    }
    if (walletProfile) {
        walletProfile.textContent = status.activeWalletProfile;
    }
    if (fallback) {
        fallback.textContent = status.fallbackLoggingActive ? "oui" : "non";
    }
    if (documents) {
        documents.textContent = status.configDocumentCount.toString();
    }
    if (walletsRoot) {
        walletsRoot.textContent = status.walletsDirectory;
    }
    if (walletsSubdirectory) {
        walletsSubdirectory.textContent = status.walletsSubdirectory ?? "— (racine globale)";
    }
    if (effectiveWalletsDirectory) {
        effectiveWalletsDirectory.textContent = status.effectiveWalletsDirectory;
    }
    if (walletDirectoryCreated) {
        walletDirectoryCreated.textContent = status.effectiveWalletsDirectoryCreatedOnStartup ? "oui" : "non, déjà présent";
    }
    if (phase) {
        phase.textContent = status.shellPhase;
    }
    if (shellStatus) {
        shellStatus.textContent = "Config Wallet Desk résolue ; répertoire Wallet prêt.";
    }
    frontendTrace("main", "Wallet Desk runtime status rendered", {
        compositeProfile: status.activeCompositeProfile,
        fallbackLoggingActive: status.fallbackLoggingActive,
        shellPhase: status.shellPhase,
        walletDirectoryCreatedOnStartup: status.effectiveWalletsDirectoryCreatedOnStartup,
        walletProfile: status.activeWalletProfile,
    });
}

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