Merge the delete buttons to history stack

Promptbox now shows controls responding to selected inpainting model.

frontend/apps/editor3d/app/src/pages/PageEdit/HistoryStack.tsx

@@ -1,9 +1,12 @@
 import { Button } from "@storyteller/ui-button";
 import { useImageEditCompleteEvent } from "@storyteller/tauri-events";
-import { faTrash } from "@fortawesome/pro-solid-svg-icons";
-import { useState } from "react";
+import { faClockRotateLeft, faTrash, faTrashXmark, faXmark } from "@fortawesome/pro-solid-svg-icons";
+import { useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
 import { BaseSelectorImage } from "./BaseImageSelector";
+import { Tooltip } from "@storyteller/ui-tooltip";
+import { isActionReminderOpen, showActionReminder } from "@storyteller/ui-action-reminder-modal";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export interface ImageBundle {
   images: BaseSelectorImage[];
@@ -17,7 +20,7 @@ interface HistoryStackProps {
 
 export const HistoryStack = ({
   onClear,
-  onImageSelect = () => {},
+  onImageSelect = () => { },
   startingBundles = [],
 }: HistoryStackProps) => {
   const [imageBundles, setImageBundles] =
@@ -46,6 +49,10 @@ export const HistoryStack = ({
     }
   });
 
+  // This is used to force image reloads in different sessions
+  // and prevent fetching CORS-tainted images from cache
+  const sessionRandBuster = useRef(Math.random());
+
   const handleClear = () => {
     setImageBundles(startingBundles);
     setSelectedImageToken(null);
@@ -53,26 +60,18 @@ export const HistoryStack = ({
   };
 
   return (
-    <div className="max-h-1/2 glass h-auto w-16 overflow-y-auto rounded-lg p-1">
-      <div className="flex flex-col-reverse items-center justify-center gap-2">
-        <Button
-          className="h-7 w-full rounded-md opacity-80"
-          iconClassName="h-3 w-3"
-          icon={faTrash}
-          type="reset"
-          onClick={handleClear}
-          variant="destructive"
-        />
-        {imageBundles.map((bundle) => (
+    <div className="max-h-1/2 h-auto w-20 overflow-y-auto rounded-lg">
+      <div className="flex glass rounded-lg flex-col-reverse items-center justify-center gap-2 p-1">
+        {imageBundles.map((bundle, index) => (
           <>
-            <hr className="h-0.5 w-3/4 rounded-md border-none bg-white/10" />
+            {index < imageBundles.length - 1 && <hr className="h-0.5 w-3/4 rounded-md border-none bg-white/10" />}
             {bundle.images.map((image, imgIndex) => (
               <Button
                 key={imgIndex}
                 className={twMerge(
-                  "aspect-square h-full w-full border-2 border-white bg-transparent p-0 hover:bg-transparent hover:opacity-80",
+                  "aspect-square relative h-full w-full border-2 bg-transparent p-0 m-1 hover:bg-transparent hover:opacity-80",
                   selectedImageToken === image.mediaToken &&
-                    "border-primary hover:opacity-100",
+                  "border-primary hover:opacity-100",
                 )}
                 onClick={() => {
                   setSelectedImageToken(image.mediaToken);
@@ -81,15 +80,42 @@ export const HistoryStack = ({
               >
                 {/* TODO: Fix CORS issue here */}
                 <img
-                  src={image.url + "?historystack+" + Math.random()}
+                  src={image.url + "?historystack+" + sessionRandBuster.current}
                   alt=""
                   crossOrigin="anonymous"
-                  className="h-full w-full rounded-lg object-cover"
+                  className="absolute inset-0 h-full w-full rounded-lg object-cover"
                 />
               </Button>
             ))}
           </>
         ))}
+        <FontAwesomeIcon icon={faClockRotateLeft} className="p-1 text-gray-400" />
+      </div>
+      <div className="glass mt-4 rounded-full border-red/50 border-2 size-12 flex justify-center items-center mx-auto">
+        <button
+          className="flex h-full w-full aspect-square rounded-full items-center justify-center text-white transition-colors hover:bg-red/50"
+          onClick={() =>
+            showActionReminder({
+              reminderType: "default",
+              title: "Reset All",
+              primaryActionIcon: faTrashXmark,
+              primaryActionBtnClassName: "bg-red hover:bg-red/80",
+              message: (
+                <p className="text-sm text-white/70">
+                  Are you sure you want to reset all? This will clear all your
+                  work and cannot be undone.
+                </p>
+              ),
+              primaryActionText: "Reset all",
+              onPrimaryAction: () => {
+                handleClear();
+                isActionReminderOpen.value = false;
+              },
+            })
+          }
+        >
+          <FontAwesomeIcon icon={faXmark} className="h-5 w-5 text-xl" />
+        </button>
       </div>
     </div>
   );

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

@@ -20,10 +20,9 @@ import {
   ModelSelector,
   useModelSelectorStore,
 } from "@storyteller/ui-model-selector";
-import { ModelInfo } from "@storyteller/model-list";
-import { useImageEditCompleteEvent } from "@storyteller/tauri-events";
+import { lookupModelByTauriId, ModelInfo } from "@storyteller/model-list";
 import { HistoryStack, ImageBundle } from "./HistoryStack";
-import LeftResetStack from "./LeftResetStack";
+import { ModelTag } from "libs/model-list/src/lib/ModelTag";
 
 const PAGE_ID: ModelPage = ModelPage.ImageEditor;
 
@@ -31,13 +30,15 @@ const PageEdit = () => {
   //useStateSceneLoader();
   const { selectedModels } = useModelSelectorStore();
 
-  const selectedModel =
+  const selectedModelLabel =
     selectedModels[PAGE_ID] || IMAGE_EDITOR_PAGE_MODEL_LIST[0]?.label;
 
+  const selectedModel = IMAGE_EDITOR_PAGE_MODEL_LIST.find(
+    (m) => m.label === selectedModelLabel,
+  );
+
   const selectedModelInfo: ModelInfo | undefined =
-    IMAGE_EDITOR_PAGE_MODEL_LIST.find(
-      (m) => m.label === selectedModel,
-    )?.modelInfo;
+    selectedModel?.modelInfo;
 
   // State for canvas dimensions
   const canvasWidth = useRef<number>(1024);
@@ -57,20 +58,6 @@ const PageEdit = () => {
   // Use the Zustand store
   const store = useEditStore();
 
-  useImageEditCompleteEvent(async (event) => {
-    console.log("Image edit complete:", event);
-
-    // TODO: Logic to show edit history
-    for (const editedImage of event.edited_images) {
-      console.log("Edited image:", editedImage.media_token);
-      console.log("Edited image url:", editedImage.cdn_url);
-      console.log(
-        "Edited image thumbnail template:",
-        editedImage.maybe_thumbnail_template,
-      );
-    }
-  });
-
   // Pass store actions directly as callbacks
   useDeleteHotkeys({ onDelete: store.deleteSelectedItems });
   useUndoRedoHotkeys({ undo: store.undo, redo: store.redo });
@@ -267,6 +254,24 @@ const PageEdit = () => {
     ],
   );
 
+  const modelConfig = lookupModelByTauriId(selectedModelInfo!.tauri_id);
+  const supportsMaskedInpainting = modelConfig?.tags?.includes(ModelTag.MaskedInpainting) ?? false;
+
+  if (!supportsMaskedInpainting && (store.activeTool !== "select" || store.lineNodes.length > 0)) {
+    // TODO: Implement a new mode for unsupported masking and hide the nodes layer instead of clearing
+    store.setActiveTool("select");
+    store.clearLineNodes();
+  }
+
+  /*
+    *
+    * Only component logic below this
+    *
+    *
+    *
+    *
+    */
+
   // Display image selector on launch, otherwise hide it
   // Also show loading state if info is set but image is loading
   if (!store.baseImageInfo || !store.baseImageBitmap) {
@@ -291,9 +296,8 @@ const PageEdit = () => {
   return (
     <>
       <div
-        className={`preserve-aspect-ratio fixed left-1/2 top-0 z-10 -translate-x-1/2 transform ${
-          isSelecting ? "pointer-events-none" : "pointer-events-auto"
-        }`}
+        className={`preserve-aspect-ratio fixed left-1/2 top-0 z-10 -translate-x-1/2 transform ${isSelecting ? "pointer-events-none" : "pointer-events-auto"
+          }`}
         style={{ display: store.activeTool === "edit" ? "block" : "none" }}
       >
         <DrawToolControlBar
@@ -304,16 +308,8 @@ const PageEdit = () => {
         />
       </div>
       <div
-        className={`preserve-aspect-ratio fixed left-4 top-1/2 z-10 -translate-y-1/2 transform ${
-          isSelecting ? "pointer-events-none" : "pointer-events-auto"
-        }`}
-      >
-        <LeftResetStack onReset={() => store.RESET()} />
-      </div>
-      <div
-        className={`preserve-aspect-ratio fixed right-4 top-1/2 z-10 -translate-y-1/2 transform ${
-          isSelecting ? "pointer-events-none" : "pointer-events-auto"
-        }`}
+        className={`preserve-aspect-ratio fixed right-4 top-1/2 z-10 -translate-y-1/2 transform ${isSelecting ? "pointer-events-none" : "pointer-events-auto"
+          }`}
       >
         <HistoryStack
           onClear={() => {
@@ -327,9 +323,8 @@ const PageEdit = () => {
         />
       </div>
       <div
-        className={`preserve-aspect-ratio fixed bottom-0 left-1/2 z-10 -translate-x-1/2 transform ${
-          isSelecting ? "pointer-events-none" : "pointer-events-auto"
-        }`}
+        className={`preserve-aspect-ratio fixed bottom-0 left-1/2 z-10 -translate-x-1/2 transform ${isSelecting ? "pointer-events-none" : "pointer-events-auto"
+          }`}
       >
         <PromptEditor
           modelInfo={selectedModelInfo}
@@ -342,6 +337,7 @@ const PageEdit = () => {
           isDisabled={isEnqueuing}
           generationCount={generationCount}
           onGenerationCountChange={setGenerationCount}
+          supportsMaskedInpainting={supportsMaskedInpainting}
         />
       </div>
       <div className="relative z-0">

frontend/apps/editor3d/app/src/pages/PageEdit/PromptEditor/PromptEditor.tsx

@@ -10,6 +10,7 @@ const PromptEditor: React.FC<PromptBoxEditProps> = ({
   modelInfo,
   generationCount,
   onGenerationCountChange,
+  supportsMaskedInpainting
 }) => {
   return (
     <div className="mx-auto flex w-full max-w-3xl flex-col space-y-2">
@@ -22,6 +23,7 @@ const PromptEditor: React.FC<PromptBoxEditProps> = ({
         modelInfo={modelInfo}
         generationCount={generationCount}
         onGenerationCountChange={onGenerationCountChange}
+        supportsMaskedInpainting={supportsMaskedInpainting}
       />
     </div>
   );

frontend/apps/editor3d/app/src/pages/PageEdit/stores/EditState.ts

@@ -810,7 +810,14 @@ export const useEditStore = create<EditState>((set, get, store) => ({
   },
 
   // Toolbar actions
-  setActiveTool: (tool: ActiveEditTool) => set({ activeTool: tool }),
+  setActiveTool: (tool: ActiveEditTool) => {
+    // Avoid triggering state change if the tool is same
+    if (tool === get().activeTool) {
+      return;
+    }
+
+    set({ activeTool: tool })
+  },
   setEditOperation: (mode: EditOperation) => set({ editOperation: mode }),
   setBrushColor: (color: string) => set({ brushColor: color }),
   setBrushSize: (size: number) => set({ brushSize: size }),

frontend/libs/components/model-selector/src/lib/model-selector.tsx

@@ -1,6 +1,6 @@
 import { PopoverMenu, type PopoverItem } from "@storyteller/ui-popover";
 import { useModelSelectorStore } from "./model-selector-store";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { ModelPage } from "./model-pages";
 
 interface ModelSelectorProps {
@@ -22,6 +22,14 @@ export function ModelSelector({
   const { selectedModels, setSelectedModel } = useModelSelectorStore();
   const selectedModel = selectedModels[page] || items[0]?.label;
 
+  // For the first mount, make sure the selected model is set for other components to listen
+  useEffect(() => {
+    // Initialize selected model if not set
+    if (!selectedModels[page] && items[0]) {
+      setSelectedModel(page, items[0].label);
+    }
+  }, []);
+
   const handleModelSelect = (item: PopoverItem) => {
     setSelectedModel(page, item.label);
   };

frontend/libs/components/promptbox/src/lib/PromptBoxEdit.tsx

@@ -26,6 +26,7 @@ export interface PromptBoxEditProps {
   modelInfo?: ModelInfo;
   generationCount?: number;
   onGenerationCountChange?: (count: number) => void;
+  supportsMaskedInpainting?: boolean;
 }
 
 export const PromptBoxEdit = ({
@@ -37,6 +38,7 @@ export const PromptBoxEdit = ({
   modelInfo,
   generationCount: generationCountProp,
   onGenerationCountChange,
+  supportsMaskedInpainting = false,
 }: PromptBoxEditProps) => {
   const [prompt, setPrompt] = useState("");
   const [useSystemPrompt, setUseSystemPrompt] = useState(true);
@@ -180,17 +182,19 @@ export const PromptBoxEdit = ({
               onChange={handleChange}
               onPaste={handlePaste}
               onKeyDown={handleKeyDown}
-              onFocus={() => {}}
-              onBlur={() => {}}
+              onFocus={() => { }}
+              onBlur={() => { }}
             />
           </div>
           <div className="mt-2 flex items-center justify-between gap-2">
             <div className="flex items-center gap-2">
-              <ButtonIconSelect
-                options={modes}
-                onOptionChange={onModeSelectionChange}
-                selectedOption={selectedMode}
-              />
+              {supportsMaskedInpainting && (
+                <ButtonIconSelect
+                  options={modes}
+                  onOptionChange={onModeSelectionChange}
+                  selectedOption={selectedMode}
+                />
+              )}
 
               <Tooltip
                 content={