Implement draw controls toolbar

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

@@ -0,0 +1,51 @@
+import { faPlusCircle, faMinusCircle, faDrawCircle, faEraser, faPaintbrush } from "@fortawesome/pro-regular-svg-icons";
+import { EditOperation } from "./stores/EditState";
+import { ButtonIconSelect } from "@storyteller/ui-button-icon-select";
+import { SliderV2 } from "@storyteller/ui-sliderv2";
+import { faPaintBrush } from "@fortawesome/pro-solid-svg-icons";
+
+export interface DrawToolControlBarProps {
+  currentMode: EditOperation;
+  currentSize: number;
+  onModeChange?: (mode: EditOperation) => void;
+  onSizeChange?: (size: number) => void;
+}
+
+const DrawToolControlBar = ({
+  currentMode,
+  currentSize,
+  onModeChange,
+  onSizeChange = () => { }
+}: DrawToolControlBarProps) => {
+
+  const modes = [
+    {
+      value: "add",
+      icon: faPaintBrush,
+      text: "Draw",
+      tooltip: "Draw strokes",
+    },
+    {
+      value: "minus",
+      icon: faEraser,
+      text: "Erase",
+      tooltip: "Erases strokes",
+    },
+  ];
+
+  return (
+    <div className="absolute top-16 left-1/2 flex -translate-x-1/2 flex-col gap-3">
+      <div className="glass w-[400px] flex gap-2 rounded-xl p-2 items-center">
+        <ButtonIconSelect
+          options={modes}
+          // @ts-expect-error - TypeScript doesn't recognize the value as EditOperation
+          onOptionChange={onModeChange}
+          selectedOption={currentMode}
+        />
+        <SliderV2 min={1} max={50} value={currentSize} onChange={onSizeChange} step={1} innerLabel={"Size  " + currentSize + "pt"} showDecrement showIncrement />
+      </div>
+    </div>
+  )
+}
+
+export default DrawToolControlBar;

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

@@ -22,6 +22,7 @@ import { ActiveEditTool, useEditStore } from "./stores/EditState";
 import { EditPaintSurface } from "./EditPaintSurface";
 import { normalizeCanvas } from "~/Helpers/CanvasHelpers";
 import { BaseImageSelector, BaseSelectorImage } from "./BaseImageSelector";
+import DrawToolControlBar from "./DrawToolControlBar";
 
 const PageEdit = () => {
   //useStateSceneLoader();
@@ -242,6 +243,18 @@ const PageEdit = () => {
 
   return (
     <>
+      <div
+        className={`preserve-aspect-ratio fixed top-0 left-1/2 z-10 -translate-x-1/2 transform ${isSelecting ? "pointer-events-none" : "pointer-events-auto"
+          }`}
+        style={{ display: store.activeTool === "edit" ? "block" : "none" }}
+      >
+        <DrawToolControlBar
+          currentMode={store.editOperation}
+          currentSize={store.brushSize}
+          onModeChange={store.setEditOperation}
+          onSizeChange={store.setBrushSize}
+        />
+      </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"
           }`}

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

@@ -10,8 +10,6 @@ const PromptEditor: React.FC<PromptBoxEditProps> = ({
 }) => {
   return (
     <div className="mx-auto flex w-full max-w-3xl flex-col space-y-2">
-      <div className="flex w-full justify-center">
-      </div>
 
       <JobProvider>
         <PromptBoxEdit

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

@@ -70,6 +70,7 @@ interface EditState {
 
   // Toolbar actions
   setActiveTool: (tool: ActiveEditTool) => void;
+  setEditOperation: (mode: EditOperation) => void;
   setBrushColor: (color: string) => void;
   setBrushOpacity: (opacity: number) => void;
   setBrushSize: (size: number) => void;
@@ -291,7 +292,6 @@ export const useEditStore = create<EditState>((set, get) => ({
       return {
         history: newHistory,
         historyIndex: newHistory.length - 1,
-        editOperation: state.editOperation === "add" ? "minus" : "add",
       };
     });
   },
@@ -684,6 +684,7 @@ export const useEditStore = create<EditState>((set, get) => ({
 
   // Toolbar actions
   setActiveTool: (tool: ActiveEditTool) => set({ activeTool: tool }),
+  setEditOperation: (mode: EditOperation) => set({ editOperation: mode }),
   setBrushColor: (color: string) => set({ brushColor: color }),
   setBrushSize: (size: number) => set({ brushSize: size }),
   setFillColor: (color: string) => set({ fillColor: color }),