removing junk files from app/settings/ and removing double details

app/settings/co2-galvo/[id]/page.tsx

@@ -1,12 +0,0 @@
-// app/settings/co2-galvo/[id]/co2-galvo.tsx
-"use client";
-
-import { useParams, useSearchParams } from "next/navigation";
-import CO2GalvoDetail from "@/components/details/CO2GalvoDetail";
-
-export default function CO2GalvoSettingDetailPage() {
-    const { id } = useParams<{ id: string }>();
-    const sp = useSearchParams();
-    const edit = sp.get("edit") === "1";
-    return <CO2GalvoDetail id={id} mode={edit ? "edit" : "view"} />;
-}

app/settings/co2-galvo/layout.tsx

@@ -1,5 +0,0 @@
-import { Suspense } from "react";
-
-export default function Layout({ children }: { children: React.ReactNode }) {
-  return <Suspense fallback={null}>{children}</Suspense>;
-}

app/settings/co2-galvo/page.tsx

@@ -1,14 +0,0 @@
-"use client";
-import CO2GalvoList from "@/components/lists/CO2GalvoList";
-
-export default function CO2GalvoSettingsPageStandalone() {
-  return (
-    <div className="p-6 max-w-7xl mx-auto space-y-4">
-    <CO2GalvoList
-    linkFor={(sid, opts) =>
-      opts?.edit ? `/settings/co2-galvo/${sid}?edit=1` : `/settings/co2-galvo/${sid}`
-    }
-    />
-    </div>
-  );
-}

components/details/CO2GalvoDetail.tsx

@@ -57,6 +57,31 @@ function fileUrl(id?: string) {
     return `/api/dx/assets/${id}`; // fallback if you proxy assets
 }
 
+/** Small helper to render a square-cropped thumbnail that opens a lightbox on click */
+function ZoomableSquareImage({
+    src,
+    alt,
+    onOpen,
+}: {
+    src: string;
+    alt: string;
+    onOpen: () => void;
+}) {
+    // Use CSS aspect-ratio for a consistent 1:1 crop (works without Tailwind plugin)
+    return (
+        <div className="border rounded overflow-hidden" style={{ aspectRatio: "1 / 1" }}>
+        <img
+        src={src}
+        alt={alt}
+        className="w-full h-full object-cover cursor-zoom-in"
+        loading="lazy"
+        onClick={onOpen}
+        onError={(e) => { e.currentTarget.style.display = "none"; }}
+        />
+        </div>
+    );
+}
+
 export default function CO2GalvoDetail({
     id,
     mode,
@@ -79,6 +104,18 @@ export default function CO2GalvoDetail({
     const [loading, setLoading] = useState(true);
     const [err, setErr] = useState<string | null>(null);
 
+    // lightbox state
+    const [viewerSrc, setViewerSrc] = useState<string | null>(null);
+
+    // close lightbox on Escape
+    useEffect(() => {
+        function onKey(e: KeyboardEvent) {
+            if (e.key === "Escape") setViewerSrc(null);
+        }
+        if (viewerSrc) window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [viewerSrc]);
+
     // load record (with human-readable fields)
     useEffect(() => {
         if (!id) return;
@@ -215,6 +252,9 @@ export default function CO2GalvoDetail({
     const photoId = typeof rec.photo === "object" ? rec.photo?.id : (rec.photo as any);
     const screenId = typeof rec.screen === "object" ? rec.screen?.id : (rec.screen as any);
 
+    const photoSrc = photoId ? fileUrl(String(photoId)) : "";
+    const screenSrc = screenId ? fileUrl(String(screenId)) : "";
+
     return (
         <div className="space-y-6">
         <header className="space-y-1">
@@ -248,32 +288,26 @@ export default function CO2GalvoDetail({
 
         {showOwnerEdit && (
             <div className="pt-2">
-            <Link href={`/settings/co2-galvo/${rec.submission_id}?edit=1`} className="underline">Edit this setting</Link>
+            <Link
+              href={`/portal/laser-settings?t=co2-galvo&view=${rec.submission_id}&edit=1`}
+              className="underline"
+            >
             </div>
         )}
         </div>
 
+        {/* Thumbnails: square crop with lightbox on click */}
         <div className="grid grid-cols-2 gap-4">
-        {photoId ? (
+        {photoSrc ? (
-            <figure className="border rounded overflow-hidden">
+            <figure className="space-y-1">
-            <img
+            <ZoomableSquareImage src={photoSrc} alt="Result" onOpen={() => setViewerSrc(photoSrc)} />
-            src={fileUrl(String(photoId))}
+            <figcaption className="text-xs text-muted-foreground">Result</figcaption>
-            alt="Result"
-            className="w-full h-auto"
-            onError={(e) => { e.currentTarget.style.display = "none"; }}
-            />
-            <figcaption className="text-xs p-1 text-muted-foreground">Result</figcaption>
             </figure>
         ) : null}
-        {screenId ? (
+        {screenSrc ? (
-            <figure className="border rounded overflow-hidden">
+            <figure className="space-y-1">
-            <img
+            <ZoomableSquareImage src={screenSrc} alt="Settings Screenshot" onOpen={() => setViewerSrc(screenSrc)} />
-            src={fileUrl(String(screenId))}
+            <figcaption className="text-xs text-muted-foreground">Settings Screenshot</figcaption>
-            alt="Settings screenshot"
-            className="w-full h-auto"
-            onError={(e) => { e.currentTarget.style.display = "none"; }}
-            />
-            <figcaption className="text-xs p-1 text-muted-foreground">Settings Screenshot</figcaption>
             </figure>
         ) : null}
         </div>
@@ -385,6 +419,21 @@ export default function CO2GalvoDetail({
             </div>
             </section>
         )}
+
+        {/* Lightbox */}
+        {viewerSrc && (
+            <div
+            className="fixed inset-0 z-50 bg-black/80 p-4 flex items-center justify-center"
+            onClick={() => setViewerSrc(null)}
+            >
+            <img
+            src={viewerSrc}
+            alt=""
+            className="max-w-full max-h-full cursor-zoom-out"
+            onClick={(e) => e.stopPropagation()}
+            />
+            </div>
+        )}
         </div>
     );
 }