From be90e8fca54c99d4a38ff54f396f22f466a04da4 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Wed, 4 Sep 2024 14:49:36 -0400
Subject: [PATCH] image context menu

---
 .../ContextualImageToolbar.tsx                | 43 +++++++++++++++++++
 src/components/ContextualToolbars/index.ts    |  1 +
 .../{ToolbarMain => }/ToolbarButtons.tsx      |  0
 src/components/features/ToolbarMain/index.tsx |  8 ++--
 src/pages/sandbox.tsx                         |  4 ++
 5 files changed, 52 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ContextualToolbars/ContextualImageToolbar.tsx
 create mode 100644 src/components/ContextualToolbars/index.ts
 rename src/components/features/{ToolbarMain => }/ToolbarButtons.tsx (100%)

diff --git a/src/components/ContextualToolbars/ContextualImageToolbar.tsx b/src/components/ContextualToolbars/ContextualImageToolbar.tsx
new file mode 100644
index 0000000000..1bb4733c95
--- /dev/null
+++ b/src/components/ContextualToolbars/ContextualImageToolbar.tsx
@@ -0,0 +1,43 @@
+import { twMerge } from "tailwind-merge";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+  faArrowsRotate,
+  faArrowsUpDownLeftRight,
+  faEraser,
+  faImage,
+  faPaintbrush,
+  faTrashCan,
+  faWandMagicSparkles,
+} from "@fortawesome/pro-thin-svg-icons";
+import { ToolbarButtons } from "~/components/features/ToolbarButtons";
+import { paperWrapperStyles } from "~/components/styles";
+
+export const ContextualImageToolbar = ({
+  position,
+}: {
+  position: {
+    x: number;
+    y: number;
+  };
+}) => {
+  return (
+    <div
+      className={twMerge(paperWrapperStyles, "fixed flex gap-2")}
+      style={{
+        top: position.y,
+        left: position.x,
+      }}
+    >
+      <div className="flex size-10 items-center justify-center rounded-3xl bg-ui-border p-2">
+        <FontAwesomeIcon icon={faImage} />
+      </div>
+      <ToolbarButtons icon={faArrowsUpDownLeftRight} />
+      <ToolbarButtons icon={faArrowsRotate} />
+      <ToolbarButtons icon={faEraser} />
+      <ToolbarButtons icon={faPaintbrush} />
+      <ToolbarButtons icon={faWandMagicSparkles} />
+      <ToolbarButtons icon={faTrashCan} />
+    </div>
+  );
+};
diff --git a/src/components/ContextualToolbars/index.ts b/src/components/ContextualToolbars/index.ts
new file mode 100644
index 0000000000..01a9fad000
--- /dev/null
+++ b/src/components/ContextualToolbars/index.ts
@@ -0,0 +1 @@
+export * from "./ContextualImageToolbar";
diff --git a/src/components/features/ToolbarMain/ToolbarButtons.tsx b/src/components/features/ToolbarButtons.tsx
similarity index 100%
rename from src/components/features/ToolbarMain/ToolbarButtons.tsx
rename to src/components/features/ToolbarButtons.tsx
diff --git a/src/components/features/ToolbarMain/index.tsx b/src/components/features/ToolbarMain/index.tsx
index f153c6ac9a..63195e4429 100644
--- a/src/components/features/ToolbarMain/index.tsx
+++ b/src/components/features/ToolbarMain/index.tsx
@@ -17,7 +17,7 @@ import {
   faSquareDashed,
 } from "@fortawesome/pro-thin-svg-icons";
 
-import { ToolbarButtons } from "./ToolbarButtons";
+import { ToolbarButtons } from "../ToolbarButtons";
 import { twMerge } from "tailwind-merge";
 
 import { UploadImage } from "../UploadImage";
@@ -82,14 +82,14 @@ export const ToolbarMain = () => {
               </div>
             )}
           </div>
+          <ToolbarButtons icon={faCameraRotate} />
         </div>
-        <div className="flex items-center gap-2 px-2">
+        {/* <div className="flex items-center gap-2 px-2">
           <ToolbarButtons icon={faMinus} />
           <span>100%</span>
           <ToolbarButtons icon={faPlus} />
           <ToolbarButtons icon={faHand} />
-          <ToolbarButtons icon={faCameraRotate} />
-        </div>
+        </div> */}
         <div className="flex items-center gap-2 px-2">
           <ToolbarButtons icon={faArrowRotateLeft} />
           <ToolbarButtons icon={faArrowRotateRight} />
diff --git a/src/pages/sandbox.tsx b/src/pages/sandbox.tsx
index 108d78a278..eeb4dad916 100644
--- a/src/pages/sandbox.tsx
+++ b/src/pages/sandbox.tsx
@@ -1,5 +1,7 @@
 import { LoadingBar, LoadingBarStatus } from "~/components/ui";
 
+import { ContextualImageToolbar } from "~/components/ContextualToolbars";
+
 export const Sandbox = () => {
   return (
     <div>
@@ -18,6 +20,8 @@ export const Sandbox = () => {
         isShowing={true}
         message="Loading..."
       />
+
+      <ContextualImageToolbar position={{ x: 300, y: 600 }} />
     </div>
   );
 };