From 3a65b2b1c9a7866b64a15652dea9a92fdeb48663 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesus=20Manuel=20Pi=C3=B1eiro=20Cid?= <jesusmpc@inditex.com>
Date: Tue, 11 Mar 2025 10:05:31 +0100
Subject: [PATCH 1/2] chore: initial commit


From 4915657fbc795de2bdc7660ab271729ba32a0c89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesus=20Manuel=20Pi=C3=B1eiro=20Cid?= <jesusmpc@inditex.com>
Date: Tue, 11 Mar 2025 10:14:39 +0100
Subject: [PATCH 2/2] chore: fix linting issues

---
 .../overlay/operations-overlay.tsx            | 94 +++++++++----------
 .../overlay/room-information-overlay.tsx      |  6 +-
 .../room-components/overlay/tools-overlay.tsx | 48 +++++++++-
 3 files changed, 91 insertions(+), 57 deletions(-)

diff --git a/code/components/room-components/overlay/operations-overlay.tsx b/code/components/room-components/overlay/operations-overlay.tsx
index 3177b56..d56b929 100644
--- a/code/components/room-components/overlay/operations-overlay.tsx
+++ b/code/components/room-components/overlay/operations-overlay.tsx
@@ -1,9 +1,21 @@
 "use client";
 
 import React from "react";
-import { Clipboard, Copy, Trash2, Redo2, Undo2, Group, Ungroup, MonitorDown, ImageDown } from "lucide-react";
+import {
+  Clipboard,
+  Copy,
+  Trash2,
+  Group,
+  Ungroup,
+  MonitorDown,
+  ImageDown,
+} from "lucide-react";
 import { useWeave } from "@inditextech/weavejs-react";
-import { WeaveCopyPasteNodesPlugin, WeaveExportNodeActionParams, WeaveExportStageActionParams } from "@inditextech/weavejs-sdk";
+import {
+  WeaveCopyPasteNodesPlugin,
+  WeaveExportNodeActionParams,
+  WeaveExportStageActionParams,
+} from "@inditextech/weavejs-sdk";
 import { ToolbarButton } from "../toolbar/toolbar-button";
 
 export function OperationsOverlay() {
@@ -16,9 +28,6 @@ export function OperationsOverlay() {
   const canCopy = useWeave((state) => state.copyPaste.canCopy);
   const canPaste = useWeave((state) => state.copyPaste.canPaste);
 
-  const canUndo = useWeave((state) => state.undoRedo.canUndo);
-  const canRedo = useWeave((state) => state.undoRedo.canRedo);
-
   return (
     <div className="pointer-events-none absolute bottom-2 left-2 right-2 flex gap-5 justify-center items-center">
       <div className="p-1 bg-white border border-zinc-200 shadow-xs flex justify-start items-center gap-3">
@@ -46,14 +55,17 @@ export function OperationsOverlay() {
             tooltipSide="top"
           />
           <div className="w-full flex justify-center items-center">
-            <div className="w-[1px] h-[30px] bg-light-background-3 mx-1"></div>
+            <div className="w-[1px] h-4 bg-zinc-200 mx-2"></div>
           </div>
           <ToolbarButton
             icon={<Copy />}
             disabled={isActionActive || !canCopy}
             onClick={() => {
               if (instance) {
-                const weaveCopyPasteNodesPlugin = instance.getPlugin<WeaveCopyPasteNodesPlugin>("copyPasteNodes");
+                const weaveCopyPasteNodesPlugin =
+                  instance.getPlugin<WeaveCopyPasteNodesPlugin>(
+                    "copyPasteNodes"
+                  );
                 if (weaveCopyPasteNodesPlugin) {
                   return weaveCopyPasteNodesPlugin.copy();
                 }
@@ -67,7 +79,10 @@ export function OperationsOverlay() {
             disabled={isActionActive || !canPaste}
             onClick={() => {
               if (instance) {
-                const weaveCopyPasteNodesPlugin = instance.getPlugin<WeaveCopyPasteNodesPlugin>("copyPasteNodes");
+                const weaveCopyPasteNodesPlugin =
+                  instance.getPlugin<WeaveCopyPasteNodesPlugin>(
+                    "copyPasteNodes"
+                  );
                 if (weaveCopyPasteNodesPlugin) {
                   return weaveCopyPasteNodesPlugin.paste();
                 }
@@ -77,47 +92,23 @@ export function OperationsOverlay() {
             tooltipSide="top"
           />
           <div className="w-full flex justify-center items-center">
-            <div className="w-[1px] h-[30px] bg-light-background-3 mx-1"></div>
-          </div>
-          <ToolbarButton
-            icon={<Undo2 />}
-            disabled={isActionActive || !canUndo}
-            onClick={() => {
-              if (instance) {
-                const actualStore = instance.getStore();
-                actualStore.undoStateStep();
-              }
-            }}
-            label="Undo"
-            tooltipSide="top"
-          />
-          <ToolbarButton
-            icon={<Redo2 />}
-            disabled={isActionActive || !canRedo}
-            onClick={() => {
-              if (instance) {
-                const actualStore = instance.getStore();
-                actualStore.redoStateStep();
-              }
-            }}
-            label="Redo"
-            tooltipSide="top"
-          />
-          <div className="w-full flex justify-center items-center">
-            <div className="w-[1px] h-[30px] bg-light-background-3 mx-1"></div>
+            <div className="w-[1px] h-4 bg-zinc-200 mx-2"></div>
           </div>
           <ToolbarButton
             icon={<ImageDown />}
             disabled={selectedNodes.length !== 1}
             onClick={() => {
               if (instance && selectedNodes.length === 1) {
-                instance.triggerAction<WeaveExportNodeActionParams>("exportNodeTool", {
-                  node: selectedNodes[0].instance,
-                  options: {
-                    padding: 20,
-                    pixelRatio: 2,
-                  },
-                });
+                instance.triggerAction<WeaveExportNodeActionParams>(
+                  "exportNodeTool",
+                  {
+                    node: selectedNodes[0].instance,
+                    options: {
+                      padding: 20,
+                      pixelRatio: 2,
+                    },
+                  }
+                );
               }
             }}
             tooltipSide="top"
@@ -127,19 +118,22 @@ export function OperationsOverlay() {
             icon={<MonitorDown />}
             onClick={() => {
               if (instance) {
-                instance.triggerAction<WeaveExportStageActionParams>("exportStageTool", {
-                  options: {
-                    padding: 20,
-                    pixelRatio: 2,
-                  },
-                });
+                instance.triggerAction<WeaveExportStageActionParams>(
+                  "exportStageTool",
+                  {
+                    options: {
+                      padding: 20,
+                      pixelRatio: 2,
+                    },
+                  }
+                );
               }
             }}
             tooltipSide="top"
             label="Export canvas as image"
           />
           <div className="w-full flex justify-center items-center">
-            <div className="w-[1px] h-[30px] bg-light-background-3 mx-1"></div>
+            <div className="w-[1px] h-4 bg-zinc-200 mx-2"></div>
           </div>
           <ToolbarButton
             icon={<Trash2 />}
diff --git a/code/components/room-components/overlay/room-information-overlay.tsx b/code/components/room-components/overlay/room-information-overlay.tsx
index 4bd969f..f84b9d8 100644
--- a/code/components/room-components/overlay/room-information-overlay.tsx
+++ b/code/components/room-components/overlay/room-information-overlay.tsx
@@ -11,8 +11,10 @@ export function RoomInformationOverlay() {
     <div className="absolute top-2 left-2 flex gap-1 justify-center items-center">
       <div className="p-2 bg-white border border-zinc-200 shadow-xs flex justify-start items-center gap-2">
         <Logo kind="small" />
-        <div className="w-[1px] h-4 bg-zinc-200"></div>
-        <div className="flex justify-start items-center font-noto-sans-mono text-foreground !normal-case min-h-[32px]">{room}</div>
+        <div className="w-[1px] h-4 mx-2 bg-zinc-200"></div>
+        <div className="flex justify-start items-center font-noto-sans-mono text-foreground !normal-case min-h-[32px]">
+          {room}
+        </div>
       </div>
     </div>
   );
diff --git a/code/components/room-components/overlay/tools-overlay.tsx b/code/components/room-components/overlay/tools-overlay.tsx
index e014618..5406932 100644
--- a/code/components/room-components/overlay/tools-overlay.tsx
+++ b/code/components/room-components/overlay/tools-overlay.tsx
@@ -2,7 +2,17 @@
 
 import React from "react";
 import { ToolbarButton } from "../toolbar/toolbar-button";
-import { Brush, ImagePlus, PenTool, Presentation, Square, SwatchBook, Type } from "lucide-react";
+import {
+  Brush,
+  ImagePlus,
+  PenTool,
+  Presentation,
+  Square,
+  SwatchBook,
+  Type,
+  Redo2,
+  Undo2,
+} from "lucide-react";
 import { useWeave } from "@inditextech/weavejs-react";
 import { Toolbar } from "../toolbar/toolbar";
 
@@ -12,6 +22,9 @@ export function ToolsOverlay() {
   const isActionActive = useWeave((state) => state.actions.active);
   const actualAction = useWeave((state) => state.actions.actual);
 
+  const canUndo = useWeave((state) => state.undoRedo.canUndo);
+  const canRedo = useWeave((state) => state.undoRedo.canRedo);
+
   const triggerRectangleTool = React.useCallback(() => {
     if (instance && actualAction !== "rectangleTool") {
       instance.triggerAction("rectangleTool");
@@ -76,7 +89,7 @@ export function ToolsOverlay() {
   }, [instance, actualAction]);
 
   return (
-    <div className="absolute top-[calc(50px+16px)] left-2 bottom-2 flex flex-col gap-5 justify-center items-center">
+    <div className="absolute top-[calc(50px+16px)] left-2 bottom-2 flex flex-col gap-1 justify-center items-center">
       <Toolbar>
         <ToolbarButton
           icon={<Square />}
@@ -113,9 +126,8 @@ export function ToolsOverlay() {
           onClick={triggerImageTool}
           label="Add an image"
         />
-        <div className="w-full flex justify-center items-center">
-          <div className="w-[30px] h-[1px] bg-light-background-3 my-1"></div>
-        </div>
+      </Toolbar>
+      <Toolbar>
         <ToolbarButton
           icon={<SwatchBook />}
           active={actualAction === "pantoneTool"}
@@ -131,6 +143,32 @@ export function ToolsOverlay() {
           label="Create a workspace"
         />
       </Toolbar>
+      <Toolbar>
+        <ToolbarButton
+          icon={<Undo2 />}
+          disabled={isActionActive || !canUndo}
+          onClick={() => {
+            if (instance) {
+              const actualStore = instance.getStore();
+              actualStore.undoStateStep();
+            }
+          }}
+          label="Undo"
+          tooltipSide="top"
+        />
+        <ToolbarButton
+          icon={<Redo2 />}
+          disabled={isActionActive || !canRedo}
+          onClick={() => {
+            if (instance) {
+              const actualStore = instance.getStore();
+              actualStore.redoStateStep();
+            }
+          }}
+          label="Redo"
+          tooltipSide="top"
+        />
+      </Toolbar>
     </div>
   );
 }