feat: add frame tool with popover options

src/App.tsx

@@ -4,6 +4,7 @@ import { Toolbar } from "@/components/toolbar";
 import { ColorProvider } from "@/context/color/ColorContext";
 import { EraserPopoverProvider } from "@/context/eraser-popover/PopoverProvider";
 import { PencilPopoverProvider } from "@/context/pencil-popover/PopoverProvider";
+import { FramePopoverProvider } from "@/context/frame-popover/PopoverProvider";
 import { TextPopoverProvider } from "@/context/text-popover/PopoverProvider";
 
 export type ToolbarStates =
@@ -23,11 +24,16 @@ export function App() {
       <PencilPopoverProvider>
         <EraserPopoverProvider>
           <TextPopoverProvider>
-            <Toolbar
-              currentTool={currentTool}
-              setCurrentTool={setCurrentTool}
-            />
-            <Canvas currentTool={currentTool} setCurrentTool={setCurrentTool} />
+            <FramePopoverProvider>
+              <Toolbar
+                currentTool={currentTool}
+                setCurrentTool={setCurrentTool}
+              />
+              <Canvas
+                currentTool={currentTool}
+                setCurrentTool={setCurrentTool}
+              />
+            </FramePopoverProvider>
           </TextPopoverProvider>
         </EraserPopoverProvider>
       </PencilPopoverProvider>

src/components/popovers/frame-popover.tsx

@@ -0,0 +1,80 @@
+import {
+  Circle,
+  Diamond,
+  Square,
+  type LucideIcon,
+} from "lucide-react";
+import { motion, useReducedMotion } from "motion/react";
+import type { FrameShape } from "@/context/frame-popover/constants";
+import { useFramePopover } from "@/context/frame-popover/use-frame-popover";
+import { Button } from "../ui/button";
+
+interface PopoverItem {
+  icon: LucideIcon;
+  value: FrameShape;
+}
+
+const popoverItems: PopoverItem[] = [
+  {
+    icon: Square,
+    value: "square",
+  },
+  {
+    icon: Circle,
+    value: "circle",
+  },
+  {
+    icon: Diamond,
+    value: "diamond",
+  },
+];
+
+export function FramePopover() {
+  const { frameShape, setFrameShape } = useFramePopover();
+  const prefersReducedMotion = useReducedMotion();
+
+  return (
+    <div className="flex items-center gap-1">
+      {popoverItems.map((item) => {
+        const isActive = frameShape === item.value;
+
+        return (
+          <Button
+            onClick={() => setFrameShape(item.value)}
+            style={{ width: "36px", height: "36px", borderRadius: "8px" }}
+            key={item.value}
+            variant="ghost"
+            className="relative"
+            aria-label={`Frame shape: ${item.value}`}
+          >
+            {isActive && (
+              <motion.div
+                layoutId={
+                  prefersReducedMotion
+                    ? undefined
+                    : "active-frame-popover-item"
+                }
+                className="absolute inset-0"
+                style={{
+                  borderRadius: "8px",
+                  backgroundColor: "var(--color-foreground)",
+                }}
+                transition={
+                  prefersReducedMotion
+                    ? { duration: 0 }
+                    : { type: "spring", damping: 50, stiffness: 600 }
+                }
+              />
+            )}
+            <item.icon
+              className="relative z-10 size-5 transition-colors"
+              style={{
+                stroke: isActive ? "var(--color-background)" : undefined,
+              }}
+            />
+          </Button>
+        );
+      })}
+    </div>
+  );
+}

src/components/toolbar.tsx

@@ -18,6 +18,7 @@ import type { ToolbarStates } from "@/App";
 import { ColorPicker } from "@/components/color-picker";
 import { Line, type CustomIcon } from "@/components/custom-icons/icons";
 import { EraserPopover } from "@/components/popovers/erase-popover";
+import { FramePopover } from "@/components/popovers/frame-popover";
 import { PencilPopover } from "@/components/popovers/pencil-popover";
 import { TextPopover } from "@/components/popovers/text-popover";
 import { Button } from "@/components/ui/button";
@@ -53,7 +54,12 @@ const toolbarItems: ToolbarItemsRecord = {
     tooltipText: "Text",
     popover: <TextPopover />,
   },
-  Frame: { icon: Square, shortcut: "5", tooltipText: "Frame" },
+  Frame: {
+    icon: Square,
+    shortcut: "5",
+    tooltipText: "Frame",
+    popover: <FramePopover />,
+  },
   Line: { icon: Line, shortcut: "6", tooltipText: "Line" },
 } as const;
 

src/context/frame-popover/PopoverProvider.tsx

@@ -0,0 +1,12 @@
+import { useState, type ReactNode } from "react";
+import { FramePopoverContext, type FrameShape } from "./constants";
+
+export function FramePopoverProvider({ children }: { children: ReactNode }) {
+  const [frameShape, setFrameShape] = useState<FrameShape>("square");
+
+  return (
+    <FramePopoverContext.Provider value={{ frameShape, setFrameShape }}>
+      {children}
+    </FramePopoverContext.Provider>
+  );
+}

src/context/frame-popover/constants.ts

@@ -0,0 +1,11 @@
+import { createContext, type Dispatch, type SetStateAction } from "react";
+
+export type FrameShape = "square" | "circle" | "diamond";
+
+interface FramePopoverContextProps {
+  frameShape: FrameShape;
+  setFrameShape: Dispatch<SetStateAction<FrameShape>>;
+}
+
+export const FramePopoverContext =
+  createContext<FramePopoverContextProps | null>(null);

src/context/frame-popover/use-frame-popover.ts

@@ -0,0 +1,14 @@
+import { useContext } from "react";
+import { FramePopoverContext } from "./constants";
+
+export function useFramePopover() {
+  const context = useContext(FramePopoverContext);
+
+  if (!context) {
+    throw new Error(
+      "useFramePopover must be used within a FramePopoverProvider"
+    );
+  }
+
+  return context;
+}