Refactor modal components to use new Modal implementation and remove TransitionDialogue references across various components.

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

@@ -6,7 +6,7 @@ import {
   faChevronDown,
 } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { TransitionDialogue } from "~/components";
+import { Modal } from "@storyteller/ui-modal";
 import { Button, ButtonProps } from "@storyteller/ui-button";
 import { twMerge } from "tailwind-merge";
 
@@ -173,7 +173,7 @@ export const ButtonDropdown = ({
       </Menu>
 
       {currentDialogProps && (
-        <TransitionDialogue
+        <Modal
           title={currentDialogProps.title}
           isOpen={isOpen}
           onClose={closeModal}
@@ -207,7 +207,7 @@ export const ButtonDropdown = ({
               </Button>
             )}
           </div>
-        </TransitionDialogue>
+        </Modal>
       )}
     </div>
   );

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

@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
-import { Tooltip } from "../Tooltip"; // Adjust the path if necessary
+import { Tooltip } from "@storyteller/ui-tooltip";
 
 interface Option {
   value: string;

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

@@ -4,8 +4,9 @@ import {
   faFilterList,
   faSearch,
 } from "@fortawesome/pro-solid-svg-icons";
-import { Input, Tooltip } from "~/components";
-import { Button } from "@storyteller/ui-button"
+import { Input } from "@storyteller/ui-input";
+import { Button } from "@storyteller/ui-button";
+import { Tooltip } from "@storyteller/ui-tooltip";
 import debounce from "lodash/debounce";
 import { useRef, useState, useEffect, useCallback } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

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

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 
-import { TransitionDialogue, LoadingDots } from "~/components";
+import { LoadingDots } from "~/components";
+import { Modal } from "@storyteller/ui-modal";
 
 import { UploadAssetError } from "./UploadAssetError";
 import { UploadSuccess } from "./UploadSuccess";
@@ -108,8 +109,8 @@ export function UploadModal({
   };
 
   return (
-    <TransitionDialogue isOpen={isOpen} onClose={onClose} title={title}>
+    <Modal isOpen={isOpen} onClose={onClose} title={title}>
       <UploaderModalContent />
-    </TransitionDialogue>
+    </Modal>
   );
 }

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

@@ -6,7 +6,7 @@ import { UploadAssetError } from "../UploadModal/UploadAssetError";
 import { UploadSuccess } from "../UploadModal/UploadSuccess";
 import { UploadFiles3D } from "./UploadFiles3D";
 import { initialUploaderState, UploaderState } from "~/models";
-import { Select } from "../Select";
+import { Select } from "@storyteller/ui-select";
 import {
   FilterEngineCategories,
   UploaderStates,

frontend/apps/editor3d/app/src/components/reusable/UploadModalMedia/UploadImageMediaModal.tsx

@@ -1,10 +1,9 @@
 import { useEffect, useState } from "react";
 
-import { TransitionDialogue, LoadingDots } from "~/components";
-
+import { LoadingDots } from "~/components";
+import { Modal } from "@storyteller/ui-modal";
 import { UploadAssetError } from "../UploadModal/UploadAssetError";
 import { UploadSuccess } from "../UploadModal/UploadSuccess";
-import { UploadFilesMedia } from "./UploadFilesMedia";
 import { FilterEngineCategories, UploaderStates } from "~/enums";
 import { initialUploaderState, UploaderState } from "~/models";
 import { UploadImageMedia } from "./UploadImageMedia";
@@ -113,8 +112,8 @@ export function UploadImageMediaModal({
   };
 
   return (
-    <TransitionDialogue isOpen={isOpen} onClose={onClose} title={title}>
+    <Modal isOpen={isOpen} onClose={onClose} title={title}>
       <UploaderModalContent />
-    </TransitionDialogue>
+    </Modal>
   );
 }

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

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 
-import { TransitionDialogue, LoadingDots } from "~/components";
+import { LoadingDots } from "~/components";
+import { Modal } from "@storyteller/ui-modal";
 
 import { UploadAssetError } from "../UploadModal/UploadAssetError";
 import { UploadSuccess } from "../UploadModal/UploadSuccess";
@@ -99,8 +100,8 @@ export function UploadModalMedia({
   };
 
   return (
-    <TransitionDialogue isOpen={isOpen} onClose={onClose} title={title}>
+    <Modal isOpen={isOpen} onClose={onClose} title={title}>
       <UploaderModalContent />
-    </TransitionDialogue>
+    </Modal>
   );
 }

frontend/apps/editor3d/app/src/components/reusable/index.ts

@@ -3,7 +3,6 @@ export * from "./ButtonDropdown";
 export * from "./ButtonIcon";
 export * from "./ButtonIconSelect";
 export * from "./ButtonLink";
-
 export * from "./FileUploader";
 export * from "./FilterButtons";
 export * from "./Gravatar";
@@ -15,14 +14,8 @@ export * from "./LoadingDots";
 export * from "./LoadingSpinner";
 export * from "./NumberInput";
 export * from "./Pagination";
-
 export * from "./Popover";
 export * from "./SearchFilter";
-export * from "./Select";
-
-export * from "./Tabs";
-export * from "./Tooltip";
-export * from "./TransitionDialogue";
 export * from "./Typography";
 export * from "./UploadModal";
 export * from "./UploadModal3D";

frontend/apps/editor3d/app/src/components/signaled/ErrorDialog.tsx

@@ -1,8 +1,8 @@
 import { useSignals } from "@preact/signals-react/runtime";
 import { faTriangleExclamation } from "@fortawesome/pro-solid-svg-icons";
 
-import { TransitionDialogue } from "~/components";
-import { Button } from "@storyteller/ui-button"
+import { Modal } from "@storyteller/ui-modal";
+import { Button } from "@storyteller/ui-button";
 import {
   showErrorDialog,
   errorDialogMessage,
@@ -13,7 +13,7 @@ export function ErrorDialog() {
   useSignals();
 
   return (
-    <TransitionDialogue
+    <Modal
       title={errorDialogTitle.value}
       titleIcon={faTriangleExclamation}
       titleIconClassName="text-brand-primary"
@@ -33,6 +33,6 @@ export function ErrorDialog() {
           </Button>
         </div>
       </div>
-    </TransitionDialogue>
+    </Modal>
   );
 }

frontend/apps/editor3d/app/src/pages/Page2d/components/ui/Activity/Activity.tsx

@@ -6,7 +6,7 @@ import { CompletedCard } from "./CompletedCard";
 import { InProgressCard } from "./InProgressCard";
 import { useJobContext } from "~/components/JobContext";
 import { Api } from "~/KonvaApp/Api";
-import { toast } from "sonner";
+import { toast } from "@storyteller/ui-toaster";
 import { Tooltip } from "@storyteller/ui-tooltip";
 
 // Dummy data types
@@ -133,7 +133,7 @@ export function Activity() {
               </>
             </span>
             {jobs.length > 0 && (
-              <div className="absolute -right-1 -top-1 h-3 w-3 animate-pulse rounded-full bg-blue-500" />
+              <div className="bg-blue-500 absolute -right-1 -top-1 h-3 w-3 animate-pulse rounded-full" />
             )}
           </div>
         }

frontend/apps/editor3d/app/src/pages/Page2d/components/ui/ToolbarMain/PaintModeMenu.tsx

@@ -17,9 +17,9 @@ import {
   paintBrushSize,
   setPaintBrushSize,
 } from "../../../signals/uiEvents/toolbarMain/paintMode";
-import { Button } from "../Button";
-import { Input } from "../Input";
-import { Slider } from "@storyteller/ui-slider";
+import { Button } from "@storyteller/ui-button";
+import { Input } from "@storyteller/ui-input";
+import { SliderV2 } from "@storyteller/ui-sliderv2";
 import { HexEyedropPicker } from "../HexEyedropPicker";
 
 export const PaintModeMenu = ({
@@ -206,7 +206,7 @@ export const PaintModeMenu = ({
                   <p className="w-full justify-start text-sm font-medium text-white">
                     Brush Size:
                   </p>
-                  <Slider
+                  <SliderV2
                     min={BRUSH_MIN_SIZE}
                     max={BRUSH_MAX_SIZE}
                     value={brushSize}

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

@@ -1,13 +1,15 @@
-import { TransitionDialogue } from "~/components/reusable/TransitionDialogue";
+import { Modal } from "@storyteller/ui-modal";
 import { faPlus, faTrashAlt } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { PopoverItem } from "~/components/reusable/Popover";
-import { Input, Label, Tooltip } from "~/components";
+import { PopoverItem } from "@storyteller/ui-popover";
+import { Input } from "@storyteller/ui-input";
+import { Label } from "@storyteller/ui-label";
 import { Button } from "@storyteller/ui-button";
 import { SliderV2 } from "@storyteller/ui-sliderv2";
 import { focalLengthDragging } from "~/pages/PageEnigma/signals/camera";
 import { useState, useEffect } from "react";
 import { twMerge } from "tailwind-merge";
+import { Tooltip } from "@storyteller/ui-tooltip";
 
 interface ExtendedPopoverItem extends PopoverItem {
   id: string;
@@ -91,7 +93,7 @@ export const CameraSettingsModal = ({
   };
 
   return (
-    <TransitionDialogue
+    <Modal
       isOpen={isOpen}
       onClose={onClose}
       className={twMerge(
@@ -223,6 +225,6 @@ export const CameraSettingsModal = ({
           </div>
         </div>
       </div>
-    </TransitionDialogue>
+    </Modal>
   );
 };

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

@@ -5,9 +5,9 @@ import {
   faPlus,
   faUpRightAndDownLeftFromCenter,
 } from "@fortawesome/pro-solid-svg-icons";
-import { ButtonIconSelect, Tooltip } from "~/components";
-import { Button } from "@storyteller/ui-button"
-
+import { ButtonIconSelect } from "~/components";
+import { Button } from "@storyteller/ui-button";
+import { Tooltip } from "@storyteller/ui-tooltip";
 import { EngineContext } from "../../contexts/EngineContext";
 import { useContext, useEffect, useState } from "react";
 import { assetModalVisibleDuringDrag, assetModalVisible } from "../../signals";

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

@@ -4,6 +4,7 @@ import { useSignals, useSignalEffect } from "@preact/signals-react/runtime";
 import {
   faCheckSquare,
   faFile,
+  faQuestion,
   faSquare,
 } from "@fortawesome/pro-solid-svg-icons";
 
@@ -15,13 +16,9 @@ import { ToastTypes, getArtStyle } from "~/enums";
 import { scene, signalScene, authentication, addToast } from "~/signals";
 import { outlinerIsShowing } from "~/pages/PageEnigma/signals/outliner/outliner";
 
-import {
-  ButtonDropdown,
-  Input,
-  H4,
-} from "~/components";
+import { ButtonDropdown, Input, H4 } from "~/components";
 
-import {Button} from "@storyteller/ui-button";
+import { Button } from "@storyteller/ui-button";
 
 import { TestFeaturesButtons } from "./TestFeaturesButtons";
 import { LoadUserScenes } from "./LoadUserScenes";
@@ -40,14 +37,15 @@ import {
 } from "~/pages/PageEnigma/signals";
 import { CameraAspectRatio } from "~/pages/PageEnigma/enums";
 import { twMerge } from "tailwind-merge";
-
+import { Help } from "./Help";
+import { Modal } from "@storyteller/ui-modal";
 
 export const ControlsTopButtons = () => {
   useSignals();
   const params = useParams();
   const location = useLocation();
   const navigate = useNavigate();
-
+  const [helpIsShowing, setHelpIsShowing] = useState(false);
   const editorEngine = useContext(EngineContext);
 
   const [sceneTitleInput, setSceneTitleInput] = useState<string>("");
@@ -216,10 +214,12 @@ export const ControlsTopButtons = () => {
               },
             },
             {
-              disabled:
-                !(scene.value.isModified &&
-                  (scene.value.ownerToken === undefined || scene.value.ownerToken ===
-                    authentication.userInfo.value?.user_token)),
+              disabled: !(
+                scene.value.isModified &&
+                (scene.value.ownerToken === undefined ||
+                  scene.value.ownerToken ===
+                    authentication.userInfo.value?.user_token)
+              ),
               // save scene should be disabled if there are no changes
               label: "Save scene",
               description: "Ctrl+S",
@@ -295,29 +295,25 @@ export const ControlsTopButtons = () => {
           Outliner
         </Button>
 
-        {/* <ButtonDialogue
-          buttonProps={{
-            variant: "secondary",
-            label: "Help",
-            className: "shadow-xl",
-            icon: faQuestion,
-          }}
-          dialogProps={{
-            className: "max-w-6xl w-auto",
-          }}
-          title={
-            <>
-              Help
-              <span className="text-sm font-medium opacity-60">
-                @%CURRENT_STORYTELLER_GIT_VERSION%
-              </span>
-            </>
-          }
+        <Button
+          icon={faQuestion}
+          variant="secondary"
+          className="shadow-xl"
+          onClick={() => setHelpIsShowing(true)}
         >
-          <Help />
-        </ButtonDialogue> */}
+          Help
+        </Button>
       </div>
       <TestFeaturesButtons debug={false} />
+
+      <Modal
+        isOpen={helpIsShowing}
+        onClose={() => setHelpIsShowing(false)}
+        title="Help"
+        className="h-[500px] max-w-4xl"
+      >
+        <Help />
+      </Modal>
     </div>
   );
 };

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

@@ -4,7 +4,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { PopoverMenu } from "~/components/reusable/Popover/Popover";
 import { CompletedCard } from "./CompletedCard";
 import { InProgressCard } from "./InProgressCard";
-import { H3, Tooltip } from "~/components";
+import { H3 } from "~/components";
+import { Tooltip } from "@storyteller/ui-tooltip";
 import { useEffect, useState, useRef, useCallback } from "react";
 import { JobsApi } from "~/Classes/ApiManager/JobsApi";
 import { toast } from "@storyteller/ui-toaster";

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

@@ -5,7 +5,7 @@ import { ToastTypes } from "~/enums";
 import { addToast } from "~/signals";
 import { JobState } from "~/pages/PageEnigma/enums";
 import { ActiveJob } from "~/pages/PageEnigma/models";
-import { Tooltip } from "~/components";
+import { Tooltip } from "@storyteller/ui-tooltip";
 import { JobsApi } from "~/Classes/ApiManager";
 import { PollRecentJobs } from "~/hooks/useActiveJobs/utilities";
 interface Props {

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

@@ -1,11 +1,10 @@
 import { useSignals } from "@preact/signals-react/runtime";
 import { faFilm, faSpinnerThird } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
 import { CompletedCard } from "~/pages/PageEnigma/comps/GenerateModals/CompletedCard";
 import { InProgressCard } from "~/pages/PageEnigma/comps/GenerateModals/InProgressCard";
-import { TransitionDialogue, H3, P } from "~/components";
-
+import { H3, P } from "~/components";
+import { Modal } from "@storyteller/ui-modal";
 import { viewMyMovies } from "~/pages/PageEnigma/signals";
 import { activeWorkflowJobs, userMovies } from "~/signals";
 
@@ -17,7 +16,7 @@ export function MyMovies({ setMovieId }: Props) {
   useSignals();
 
   return (
-    <TransitionDialogue
+    <Modal
       title="My Movies"
       titleIcon={faFilm}
       className="max-w-4xl"
@@ -39,7 +38,7 @@ export function MyMovies({ setMovieId }: Props) {
         )}
         <MovieList setMovieId={setMovieId} />
       </div>
-    </TransitionDialogue>
+    </Modal>
   );
 }
 

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

@@ -1,8 +1,10 @@
 import { useSignals } from "@preact/signals-react/runtime";
 import { useState } from "react";
 import { MediaFile } from "~/pages/PageEnigma/models";
-import { Input, Label, TransitionDialogue } from "~/components";
-import { Button } from "@storyteller/ui-button"
+import { Input } from "@storyteller/ui-input";
+import { Label } from "@storyteller/ui-label";
+import { Button } from "@storyteller/ui-button";
+import { Modal } from "@storyteller/ui-modal";
 
 import {
   faArrowDownToLine,
@@ -54,7 +56,7 @@ export function Sharing({ mediaFile, setMediaFile }: Props) {
   };
 
   return (
-    <TransitionDialogue
+    <Modal
       title={generateTitle()}
       titleIcon={generateMovieId.value ? faChevronLeft : faFilm}
       titleIconClassName="text-white/60 hover:text-white/80 transition-colors duration-150"
@@ -145,6 +147,6 @@ export function Sharing({ mediaFile, setMediaFile }: Props) {
           </div>
         </div>
       </div>
-    </TransitionDialogue>
+    </Modal>
   );
 }

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

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { Transition } from "@headlessui/react";
 import { Key, KeyGroup, Mouse, Plus } from "./ControlsTopButtons/Help/Help";
-import { CloseButton } from "~/components";
+import { CloseButton } from "@storyteller/ui-close-button";
 
 const STORAGE_KEY = "onboarding_helper_dismissed";
 const EXPIRATION_DAYS = 3;
@@ -33,7 +33,7 @@ export const OnboardingHelper = () => {
       STORAGE_KEY,
       JSON.stringify({
         timestamp: Date.now(),
-      })
+      }),
     );
   };
 

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

@@ -1,8 +1,8 @@
 import React from "react";
 import { useSignals } from "@preact/signals-react/runtime";
 import { poseMode, showPoseControls } from "../signals/selectedMode";
-import { Tooltip } from "~/components";
-import { Button } from "@storyteller/ui-button"
+import { Tooltip } from "@storyteller/ui-tooltip";
+import { Button } from "@storyteller/ui-button";
 import { faCheck, faPersonRunning } from "@fortawesome/pro-solid-svg-icons";
 
 declare global {

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

@@ -7,10 +7,8 @@ import {
   faCameraViewfinder,
   faSpinnerThird,
 } from "@fortawesome/pro-solid-svg-icons";
-
 import Queue, { QueueNames } from "~/pages/PageEnigma/Queue";
 import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
-
 import {
   cameraAspectRatio,
   editorState,
@@ -22,9 +20,9 @@ import {
 import { pageWidth } from "~/signals";
 import { CameraAspectRatio, EditorStates } from "~/pages/PageEnigma/enums";
 import { CameraViewCanvas } from "~/pages/PageEnigma/comps/EngineCanvases";
-
-import { ButtonIcon, Tooltip } from "~/components";
-import { Button } from "@storyteller/ui-button"
+import { ButtonIcon } from "~/components";
+import { Button } from "@storyteller/ui-button";
+import { Tooltip } from "@storyteller/ui-tooltip";
 import { useEffect } from "react";
 
 export const PreviewEngineCamera = () => {

frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/IPAdapter.tsx

@@ -22,7 +22,8 @@ import {
   faImage,
   faXmark,
 } from "@fortawesome/pro-solid-svg-icons";
-import { Label, P, TransitionDialogue } from "~/components";
+import { Label, P } from "~/components";
+import { Modal } from "@storyteller/ui-modal";
 import { Button } from "@storyteller/ui-button";
 import { EngineContext } from "~/pages/PageEnigma/contexts/EngineContext";
 import { MediaFilesApi } from "~/Classes/ApiManager/MediaFilesApi";
@@ -260,7 +261,7 @@ export const IPAdapter: React.FC = () => {
         </div>
       )}
 
-      <TransitionDialogue
+      <Modal
         title="Crop Reference Image"
         titleIcon={faCrop}
         className="max-w-4xl"
@@ -307,9 +308,9 @@ export const IPAdapter: React.FC = () => {
             Confirm
           </Button>
         </div>
-      </TransitionDialogue>
+      </Modal>
 
-      <TransitionDialogue
+      <Modal
         title="Reference Image Preview"
         titleIcon={faImage}
         className="max-w-fit"
@@ -335,7 +336,7 @@ export const IPAdapter: React.FC = () => {
             Close
           </Button>
         </div>
-      </TransitionDialogue>
+      </Modal>
     </div>
   );
 };

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

@@ -1,5 +1,5 @@
 import { useSignals } from "@preact/signals-react/runtime";
-import { TransitionDialogue } from "~/components";
+import { Modal } from "@storyteller/ui-modal";
 import { Button } from "@storyteller/ui-button";
 import { StyleOptions } from "~/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/StyleOptions";
 
@@ -10,13 +10,13 @@ export const StyleMoreOptions = ({ onClose }: Props) => {
   useSignals();
 
   return (
-    <TransitionDialogue isOpen={true} onClose={onClose} title="More Options">
+    <Modal isOpen={true} onClose={onClose} title="More Options">
       <StyleOptions />
       <div className="mt-5 flex justify-end">
         <Button onClick={onClose} variant="action">
           Close
         </Button>
       </div>
-    </TransitionDialogue>
+    </Modal>
   );
 };

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

@@ -4,8 +4,8 @@ import { ArtStyle } from "~/pages/PageEnigma/Editor/api_manager";
 import { styleList } from "~/pages/PageEnigma/styleList";
 import { ItemPicker } from "./ItemPicker";
 import { useSignals } from "@preact/signals-react/runtime";
-import { TransitionDialogue } from "~/components";
 import { selectedArtStyle } from "~/pages/PageEnigma/signals";
+import { Modal } from "@storyteller/ui-modal";
 
 interface Props {
   onClose: () => void;
@@ -26,7 +26,7 @@ export const StyleSelection = ({ onClose }: Props) => {
   };
 
   return (
-    <TransitionDialogue
+    <Modal
       isOpen={true}
       onClose={onClose}
       title="Select a Style"
@@ -47,6 +47,6 @@ export const StyleSelection = ({ onClose }: Props) => {
           ))}
         </div>
       </div>
-    </TransitionDialogue>
+    </Modal>
   );
 };

frontend/libs/components/camera-settings-modal/src/lib/camera-settings-modal.tsx

@@ -1,7 +1,7 @@
-import { TransitionDialogue } from "@storyteller/ui-transition-dialogue";
+import { Modal } from "@storyteller/ui-modal";
 import { faPlus, faTrashAlt } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { PopoverItem } from "@storyteller/ui-popover"
+import { PopoverItem } from "@storyteller/ui-popover";
 import { Button } from "@storyteller/ui-button";
 import { Input } from "@storyteller/ui-input";
 import { Label } from "@storyteller/ui-label";
@@ -99,20 +99,21 @@ export const CameraSettingsModal = ({
   };
 
   return (
-    <TransitionDialogue
+    <Modal
       isOpen={isOpen}
       onClose={onClose}
       className={twMerge(
         "h-[500px] max-w-3xl duration-200",
-        isDragging ? "opacity-10" : "opacity-100",
+        isDragging ? "opacity-10" : "opacity-100"
       )}
       backdropClassName={twMerge(
         "duration-200",
-        isDragging ? "opacity-0" : "opacity-100",
+        isDragging ? "opacity-0" : "opacity-100"
       )}
       childPadding={false}
       disableHotkeyInput={disableHotkeyInput}
       enableHotkeyInput={enableHotkeyInput}
+      showClose={false}
     >
       <div className="grid h-full grid-cols-12 gap-3">
         <div className="relative col-span-4 p-3 pt-2 after:absolute after:right-0 after:top-0 after:h-full after:w-px after:bg-gray-200 after:dark:bg-white/10">
@@ -132,8 +133,9 @@ export const CameraSettingsModal = ({
             {cameras.map((camera) => (
               <button
                 key={camera.id}
-                className={`h-9 w-full rounded-lg p-2 text-left transition-colors duration-100 hover:bg-[#63636B]/40 ${camera.id === selectedCameraId ? "bg-[#63636B]/40" : ""
-                  }`}
+                className={`h-9 w-full rounded-lg p-2 text-left transition-colors duration-100 hover:bg-[#63636B]/40 ${
+                  camera.id === selectedCameraId ? "bg-[#63636B]/40" : ""
+                }`}
                 onClick={() => handleCameraSelect(camera)}
               >
                 <div className="flex items-center gap-2.5 text-sm">
@@ -163,10 +165,11 @@ export const CameraSettingsModal = ({
                   delay={200}
                 >
                   <button
-                    className={`h-6 w-6 rounded-lg transition-colors ${selectedCamera?.id === "main"
-                      ? "cursor-not-allowed text-white/30"
-                      : "text-white/60 hover:text-white/100"
-                      }`}
+                    className={`h-6 w-6 rounded-lg transition-colors ${
+                      selectedCamera?.id === "main"
+                        ? "cursor-not-allowed text-white/30"
+                        : "text-white/60 hover:text-white/100"
+                    }`}
                     onClick={() =>
                       selectedCamera &&
                       selectedCamera.id !== "main" &&
@@ -231,6 +234,6 @@ export const CameraSettingsModal = ({
           </div>
         </div>
       </div>
-    </TransitionDialogue>
+    </Modal>
   );
 };

frontend/libs/components/modal/src/lib/modal.tsx

@@ -16,16 +16,27 @@ import {
   faUpRightAndDownLeftFromCenter,
   faDownLeftAndUpRightToCenter,
 } from "@fortawesome/pro-solid-svg-icons";
+import { DomLevels } from "@storyteller/common";
 
 const DialogBackdrop = ({
   className,
   onClose,
   closeOnOutsideClick,
+  disableHotkeyInput,
+  enableHotkeyInput,
 }: {
   className?: string;
   onClose?: () => void;
   closeOnOutsideClick?: boolean;
+  disableHotkeyInput: (level: number) => void;
+  enableHotkeyInput: (level: number) => void;
 }) => {
+  useEffect(() => {
+    disableHotkeyInput(DomLevels.DIALOGUE);
+    return () => {
+      enableHotkeyInput(DomLevels.DIALOGUE);
+    };
+  }, []);
   return (
     <TransitionChild
       as="div"
@@ -109,6 +120,8 @@ export const Modal = ({
   titleIcon,
   onTitleIconClick,
   onClose,
+  disableHotkeyInput = () => {},
+  enableHotkeyInput = () => {},
   className,
   backdropClassName,
   width,
@@ -135,6 +148,8 @@ export const Modal = ({
   childPadding?: boolean;
   showClose?: boolean;
   draggable?: boolean;
+  disableHotkeyInput?: (level: number) => void;
+  enableHotkeyInput?: (level: number) => void;
   /**
    * Optional initial position for the modal (only used on first open, if no previous position is stored)
    */
@@ -412,6 +427,8 @@ export const Modal = ({
               className={backdropClassName}
               onClose={onClose}
               closeOnOutsideClick={closeOnOutsideClick}
+              disableHotkeyInput={disableHotkeyInput}
+              enableHotkeyInput={enableHotkeyInput}
             />
           )}
           {allowBackgroundInteraction && (