makearmy-app/app/portal/laser-settings/Client.tsx

// app/portal/laser-settings/Client.tsx
"use client";

import dynamic from "next/dynamic";
import { useSearchParams } from "next/navigation";

const SettingsSwitcher = dynamic(
    () => import("@/components/portal/SettingsSwitcher"),
                                 { ssr: false }
);

function DetailsFrame({ src }: { src: string }) {
    return (
        <iframe
        key={src}
        src={src}
        className="w-full h-[70vh] rounded-md border"
        sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
        />
    );
}

export default function LaserSettingsClient() {
    const search = useSearchParams();
    const t = (search.get("t") || "fiber").toLowerCase();
    const id = search.get("id");
    const view = (search.get("view") || "list").toLowerCase();

    // Only use legacy detail pages for tabs we haven't migrated yet.
    // CO₂ Galvo renders its detail INSIDE the panel, so never iFrame it here.
    const detailSrc =
    id && view === "detail" && (t === "fiber" || t === "uv" || t === "co2-gantry")
    ? t === "fiber"
    ? `/settings/fiber/${id}`
    : t === "uv"
    ? `/settings/uv/${id}`
    : `/settings/co2-gantry/${id}`
    : null;

    return (
        <div className="space-y-4">
        <div className="rounded-lg border p-6">
        <h2 className="mb-4 text-xl font-semibold">Laser Settings</h2>
        <SettingsSwitcher />
        </div>

        {/* Only show legacy iframe for non-CO₂ Galvo tabs, and only when explicitly in detail view */}
        {detailSrc && (
            <div className="rounded-lg border p-4">
            <div className="mb-2 text-sm opacity-70">
            Viewing detail #{id} ({t})
            </div>
            <DetailsFrame src={detailSrc} />
            </div>
        )}
        </div>
    );
}