page constants

frontend/apps/editor3d/app/src/pages/PageDraw/PageDraw.tsx

@@ -20,6 +20,8 @@ import {
 } from "@storyteller/ui-model-selector";
 import { useCanvasBgRemovedEvent } from "@storyteller/tauri-api";
 
+const PAGE_ID : ModelPage = ModelPage.Canvas2D;
+
 export const DecodeBase64ToImage = async (
   base64String: string,
 ): Promise<ImageBitmap> => {
@@ -55,7 +57,7 @@ const PageDraw = () => {
   const store = useSceneStore();
 
   const selectedModel =
-    selectedModels[ModelPage.Canvas2D] ||
+    selectedModels[PAGE_ID] ||
     CANVAS_2D_PAGE_MODEL_LIST[0]?.label;
 
   const selectedModelInfo: ModelInfo | undefined =
@@ -446,7 +448,7 @@ const PageDraw = () => {
       <div className="absolute bottom-6 left-6 z-20 flex items-center gap-2">
         <ModelSelector
           items={CANVAS_2D_PAGE_MODEL_LIST}
-          page={ModelPage.Canvas2D}
+          page={PAGE_ID}
           panelTitle="Select Model"
           panelClassName="min-w-[280px]"
           buttonClassName="bg-transparent p-0 text-lg hover:bg-transparent text-white/80 hover:text-white"

frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx

@@ -77,6 +77,8 @@ import { useTabStore } from "../Stores/TabState";
 import PageEdit from "../PageEdit/PageEdit";
 import { ModelInfo } from "@storyteller/model-list";
 
+const PAGE_ID : ModelPage = ModelPage.Stage3D;
+
 export const PageEditor = () => {
   useSignals();
   const { triggerRecheck } = useLoginModalStore();
@@ -109,7 +111,7 @@ export const PageEditor = () => {
   }, []);
 
   const selectedModel =
-    selectedModels[ModelPage.Stage3D] ||
+    selectedModels[PAGE_ID] ||
     STAGE_3D_PAGE_MODEL_LIST[0]?.label;
 
   const selectedModelInfo: ModelInfo | undefined =
@@ -548,7 +550,7 @@ export const PageEditor = () => {
                 <div className="absolute bottom-6 left-6 z-20 flex items-center gap-2">
                   <ModelSelector
                     items={STAGE_3D_PAGE_MODEL_LIST}
-                    page={ModelPage.Stage3D}
+                    page={PAGE_ID}
                     panelTitle="Select Model"
                     panelClassName="min-w-[280px]"
                     buttonClassName="bg-transparent p-0 text-lg hover:bg-transparent text-white/80 hover:text-white"

frontend/apps/editor3d/app/src/pages/PageImage/TextToImage.tsx

@@ -15,12 +15,14 @@ interface TextToImageProps {
 }
 import { ModelInfo } from "@storyteller/model-list";
 
+const PAGE_ID : ModelPage = ModelPage.TextToImage;
+
 const TextToImage = ({ imageMediaId, imageUrl }: TextToImageProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const { selectedModels } = useModelSelectorStore();
 
   const selectedModel =
-    selectedModels[ModelPage.TextToImage] ||
+    selectedModels[PAGE_ID] ||
     TEXT_TO_IMAGE_PAGE_MODEL_LIST[0]?.label;
 
   const selectedModelInfo: ModelInfo | undefined = TEXT_TO_IMAGE_PAGE_MODEL_LIST.find(
@@ -67,7 +69,7 @@ const TextToImage = ({ imageMediaId, imageUrl }: TextToImageProps) => {
           <div className="absolute bottom-6 left-6 z-20 flex items-center gap-2">
             <ModelSelector
               items={TEXT_TO_IMAGE_PAGE_MODEL_LIST}
-              page={ModelPage.TextToImage}
+              page={PAGE_ID}
               mode="hoverSelect"
               panelTitle="Select Model"
               panelClassName="min-w-[280px]"

frontend/apps/editor3d/app/src/pages/PageVideo/ImageToVideo.tsx

@@ -10,6 +10,8 @@ import {
 } from "@storyteller/ui-model-selector";
 import { ModelInfo } from "@storyteller/model-list";
 
+const PAGE_ID : ModelPage = ModelPage.ImageToVideo;
+
 interface ImageToVideoProps {
   imageMediaId?: string;
   imageUrl?: string;
@@ -20,7 +22,7 @@ const ImageToVideo = ({ imageMediaId, imageUrl }: ImageToVideoProps) => {
   const { selectedModels } = useModelSelectorStore();
 
   const selectedModel =
-    selectedModels[ModelPage.ImageToVideo] ||
+    selectedModels[PAGE_ID] ||
     IMAGE_TO_VIDEO_PAGE_MODEL_LIST[0]?.label;
 
   const selectedModelInfo: ModelInfo | undefined = IMAGE_TO_VIDEO_PAGE_MODEL_LIST.find(
@@ -68,7 +70,7 @@ const ImageToVideo = ({ imageMediaId, imageUrl }: ImageToVideoProps) => {
           <div className="absolute bottom-6 left-6 z-20 flex items-center gap-2">
             <ModelSelector
               items={IMAGE_TO_VIDEO_PAGE_MODEL_LIST}
-              page={ModelPage.ImageToVideo}
+              page={PAGE_ID}
               panelTitle="Select Model"
               panelClassName="min-w-[280px]"
               buttonClassName="bg-transparent p-0 text-lg hover:bg-transparent text-white/80 hover:text-white"