feat: Add modal dragHandlers and prevent background scroll

src/components/CreateModal.jsx

@@ -2,11 +2,19 @@ import { useState, useEffect } from "react";
 
 export default function CreateModal({ onClose, onAddBean, onAddBrew }) {
   const [active, setActive] = useState(false);
+  const [dragY, setDragY] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+  const [startY, setStartY] = useState(0);
 
   useEffect(() => {
+    // Prevent background scroll when mounted
+    document.body.style.overflow = "hidden";
     // Trigger transition shortly after mounting
     const raf = requestAnimationFrame(() => setActive(true));
-    return () => cancelAnimationFrame(raf);
+    return () => {
+      cancelAnimationFrame(raf);
+      document.body.style.overflow = "";
+    };
   }, []);
 
   const handleClose = (callback) => {
@@ -19,16 +27,60 @@ export default function CreateModal({ onClose, onAddBean, onAddBrew }) {
     }, 200);
   };
 
+  const handleDragStart = (clientY) => {
+    setIsDragging(true);
+    setStartY(clientY);
+  };
+
+  const handleDragMove = (clientY) => {
+    if (!isDragging) return;
+    const deltaY = clientY - startY;
+    if (deltaY > 0) {
+      setDragY(deltaY);
+    }
+  };
+
+  const handleDragEnd = () => {
+    if (!isDragging) return;
+    setIsDragging(false);
+    if (dragY > 100) {
+      handleClose();
+    } else {
+      setDragY(0);
+    }
+  };
+
   return (
     <div 
       className={`fixed inset-0 bg-[rgba(44,24,16,0.5)] z-[100] flex items-end justify-center transition-opacity duration-200 ease-in-out ${active ? "opacity-100" : "opacity-0"}`} 
       onClick={() => handleClose()}
     >
       <div 
-        className={`bg-[#FAF6F1] dark:bg-[#150B07] rounded-t-[28px] w-full max-w-[480px] px-5 pb-10 transition-transform duration-200 ease-in-out ${active ? "translate-y-0" : "translate-y-full"}`} 
+        className={`bg-[#FAF6F1] dark:bg-[#150B07] rounded-t-[28px] w-full max-w-[480px] px-5 pb-10 transition-transform duration-200 ease-in-out`} 
         onClick={e => e.stopPropagation()}
+        style={{
+          transform: isDragging 
+            ? `translateY(${dragY}px)` 
+            : active 
+              ? `translateY(${dragY}px)`
+              : "translateY(100%)",
+          transition: isDragging ? "none" : "transform 0.2s ease-out"
+        }}
       >
-        <div className="w-9 h-1 bg-[#E8DFD3] dark:bg-[#3B2217] rounded mx-auto mt-3 mb-6" />
+        <div 
+          className="w-full py-4 -mt-2 cursor-grab active:cursor-grabbing flex justify-center select-none"
+          onTouchStart={(e) => handleDragStart(e.touches[0].clientY)}
+          onTouchMove={(e) => handleDragMove(e.touches[0].clientY)}
+          onTouchEnd={handleDragEnd}
+          onMouseDown={(e) => handleDragStart(e.clientY)}
+          onMouseMove={(e) => {
+            if (e.buttons === 1) handleDragMove(e.clientY);
+          }}
+          onMouseUp={handleDragEnd}
+          onMouseLeave={handleDragEnd}
+        >
+          <div className="w-9 h-1 bg-[#E8DFD3] dark:bg-[#3B2217] rounded" />
+        </div>
         <div className="font-serif text-xl font-semibold text-[#2C1810] dark:text-[#FAF6F1] mb-6">What would you like to add?</div>
         <div className="flex flex-col gap-3">
           <button