Merge branch 'main' into feature/model-flags

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

@@ -1,12 +1,9 @@
 import { Button } from "@storyteller/ui-button";
 import { useImageEditCompleteEvent } from "@storyteller/tauri-events";
-import { faClockRotateLeft, faTrash, faTrashXmark, faXmark } from "@fortawesome/pro-solid-svg-icons";
-import { useRef, useState } from "react";
+import { faTrash } from "@fortawesome/pro-solid-svg-icons";
+import { 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[];
@@ -20,7 +17,7 @@ interface HistoryStackProps {
 
 export const HistoryStack = ({
   onClear,
-  onImageSelect = () => { },
+  onImageSelect = () => {},
   startingBundles = [],
 }: HistoryStackProps) => {
   const [imageBundles, setImageBundles] =
@@ -49,10 +46,6 @@ 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);
@@ -60,18 +53,26 @@ export const HistoryStack = ({
   };
 
   return (
-    <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) => (
+    <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) => (
           <>
-            {index < imageBundles.length - 1 && <hr className="h-0.5 w-3/4 rounded-md border-none bg-white/10" />}
+            <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 relative h-full w-full border-2 bg-transparent p-0 m-1 hover:bg-transparent hover:opacity-80",
+                  "aspect-square h-full w-full border-2 border-white bg-transparent p-0 hover:bg-transparent hover:opacity-80",
                   selectedImageToken === image.mediaToken &&
-                  "border-primary hover:opacity-100",
+                    "border-primary hover:opacity-100",
                 )}
                 onClick={() => {
                   setSelectedImageToken(image.mediaToken);
@@ -80,42 +81,15 @@ export const HistoryStack = ({
               >
                 {/* TODO: Fix CORS issue here */}
                 <img
-                  src={image.url + "?historystack+" + sessionRandBuster.current}
+                  src={image.url + "?historystack+" + Math.random()}
                   alt=""
                   crossOrigin="anonymous"
-                  className="absolute inset-0 h-full w-full rounded-lg object-cover"
+                  className="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

@@ -21,8 +21,10 @@ import {
   useModelSelectorStore,
 } from "@storyteller/ui-model-selector";
 import { lookupModelByTauriId, ModelInfo } from "@storyteller/model-list";
+import { useImageEditCompleteEvent } from "@storyteller/tauri-events";
 import { HistoryStack, ImageBundle } from "./HistoryStack";
 import { ModelTag } from "libs/model-list/src/lib/ModelTag";
+import LeftResetStack from "./LeftResetStack";
 
 const PAGE_ID: ModelPage = ModelPage.ImageEditor;
 
@@ -58,6 +60,20 @@ 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 });
@@ -296,8 +312,9 @@ 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
@@ -308,8 +325,16 @@ const PageEdit = () => {
         />
       </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 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"
+        }`}
       >
         <HistoryStack
           onClear={() => {
@@ -323,8 +348,9 @@ 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}