סרגל צף — קוד להעתקה

import React, { useState, useEffect, useRef, createContext, useContext } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { GripVertical, Plus } from "lucide-react";
import { cn } from "@/lib/utils";

const DockContext = createContext(null);
export const useDock = () => useContext(DockContext);

// ═══════════════════════════════════════════
// כפתור צף בודד — מוצג כשהוצא מהסרגל
// ═══════════════════════════════════════════
export function DraggableFloatingButton({ id, icon: Icon, label, gradient, glow, solid, onClick, isActive }) {
  const { addToDock, isInDock } = useDock();
  const [position, setPosition] = useState(() => {
    const saved = localStorage.getItem(`floating-btn-pos-${id}`);
    return saved ? JSON.parse(saved) : { x: window.innerWidth - 80, y: 80 };
  });
  const [isDragging, setIsDragging] = useState(false);
  const dragStartRef = useRef({ x: 0, y: 0, posX: 0, posY: 0 });

  if (isInDock(id)) return null;

  const handleMouseDown = (e) => {
    if (e.target.closest('.btn-drag-handle')) {
      setIsDragging(true);
      dragStartRef.current = { x: e.clientX, y: e.clientY, posX: position.x, posY: position.y };
      e.preventDefault();
    }
  };


// ... (לחץ "הצג הכל" לראות את שאר הקוד)