Use shared lightbox component in 3D

frontend/apps/editor3d/app/src/components/reusable/LightboxModal.tsx

@@ -1,122 +0,0 @@
-import { CloseButton, Button } from "~/components";
-import { Transition } from "@headlessui/react";
-import { createPortal } from "react-dom";
-import dayjs from "dayjs";
-import { faDownToLine } from "@fortawesome/pro-solid-svg-icons";
-
-interface LightboxModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  imageUrl?: string | null;
-  imageAlt?: string;
-  onImageError?: () => void;
-  title?: string;
-  createdAt?: string;
-  additionalInfo?: React.ReactNode;
-  downloadUrl?: string;
-}
-
-export function LightboxModal({
-  isOpen,
-  onClose,
-  imageUrl,
-  imageAlt = "",
-  onImageError,
-  title,
-  createdAt,
-  additionalInfo,
-  downloadUrl,
-}: LightboxModalProps) {
-  return createPortal(
-    <Transition appear show={isOpen}>
-      <div className="fixed inset-0 z-[100]">
-        <Transition.Child
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div
-            className="fixed inset-0 cursor-pointer bg-black/60"
-            onClick={onClose}
-          />
-        </Transition.Child>
-        <div
-          className="fixed inset-0 flex items-center justify-center p-4"
-          onClick={onClose}
-        >
-          <Transition.Child
-            enter="ease-out duration-300"
-            enterFrom="opacity-0 scale-95"
-            enterTo="opacity-100 scale-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100 scale-100"
-            leaveTo="opacity-0 scale-95"
-          >
-            <div
-              className="relative h-[90vh] w-[80vw] rounded-xl bg-[#2C2C2C]"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <CloseButton
-                onClick={onClose}
-                className="absolute right-4 top-4 z-10"
-              />
-              <div className="grid h-full grid-cols-3 gap-6">
-                <div className="col-span-2 flex h-full items-center justify-center overflow-hidden rounded-l-xl bg-black/40">
-                  {!imageUrl ? (
-                    <div className="flex h-full w-full items-center justify-center bg-gray-800">
-                      <span className="text-white/60">Image not available</span>
-                    </div>
-                  ) : (
-                    <img
-                      src={imageUrl}
-                      alt={imageAlt}
-                      className="h-full w-full object-contain"
-                      onError={onImageError}
-                      crossOrigin="anonymous"
-                      referrerPolicy="no-referrer"
-                    />
-                  )}
-                </div>
-                <div className="flex h-full flex-col py-5 pe-5">
-                  <div className="flex-1 space-y-4">
-                    <div className="text-xl font-medium">
-                      {title || "Image Generation"}
-                    </div>
-                    {createdAt && (
-                      <div className="text-sm text-white/60">
-                        Created:{" "}
-                        {dayjs(createdAt).format("MMM D, YYYY HH:mm:ss")}
-                      </div>
-                    )}
-                    {additionalInfo}
-                  </div>
-                  {downloadUrl && (
-                    <div className="flex justify-end">
-                      <a
-                        href={downloadUrl}
-                        download
-                        onClick={(e) => e.stopPropagation()}
-                        className="no-underline"
-                      >
-                        <Button
-                          icon={faDownToLine}
-                          onClick={(e) => e.stopPropagation()}
-                        >
-                          Download
-                        </Button>
-                      </a>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          </Transition.Child>
-        </div>
-      </div>
-    </Transition>,
-    document.body,
-  );
-}

frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import dayjs from "dayjs";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faDownToLine } from "@fortawesome/pro-solid-svg-icons";
-import { LightboxModal } from "~/components/reusable/LightboxModal";
+import { LightboxModal } from "@storyteller/ui-lightbox-modal";
 import { GetCdnOrigin } from "~/api/GetCdnOrigin";
 
 interface Props {

frontend/apps/editor3d/app/src/pages/PageEnigma/comps/LibraryModal/LibraryModal.tsx

@@ -7,7 +7,7 @@ import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { LibraryModalApi } from "./LibraryModalApi";
 import { FilterMediaClasses } from "../../../../enums";
 import { twMerge } from "tailwind-merge";
-import { LightboxModal } from "~/components/reusable/LightboxModal";
+import { LightboxModal } from "@storyteller/ui-lightbox-modal";
 import { GetCdnOrigin } from "~/api/GetCdnOrigin";
 
 export interface LibraryItem {

frontend/apps/editor3d/tsconfig.json

@@ -33,6 +33,9 @@
     "noEmit": true
   },
   "references": [
+    {
+      "path": "../../libs/components/lightbox-modal"
+    },
     {
       "path": "../../libs/components/input"
     },
@@ -59,6 +62,9 @@
     },
     {
       "path": "../../libs/components/gallery-modal"
+    },
+    {
+      "path": "../../libs/tauri-utils"
     }
   ]
 }

frontend/libs/api/tsconfig.json

@@ -3,6 +3,9 @@
   "files": [],
   "include": [],
   "references": [
+    {
+      "path": "../tauri-utils"
+    },
     {
       "path": "./tsconfig.lib.json"
     },

frontend/libs/api/tsconfig.lib.json

@@ -15,7 +15,11 @@
     "types": ["node", "vite/client"]
   },
   "include": ["src/**/*.ts"],
-  "references": [],
+  "references": [
+    {
+      "path": "../tauri-utils/tsconfig.lib.json"
+    }
+  ],
   "exclude": [
     "vite.config.ts",
     "vite.config.mts",