Function RootFolderDropTarget

packages/app-core/src/components/Sidebar.tsx:357–391

({
  children,
  onDropPayload,
}: {
  children: JSX.Element;
  onDropPayload: (payload: DragPayload) => void | Promise<void>;
})

}

function RootFolderDropTarget({
  children,
  onDropPayload,
}: {
  children: JSX.Element;
  onDropPayload: (payload: DragPayload) => void | Promise<void>;
}): JSX.Element {
  const [dragHover, setDragHover] = useState(false);

  return (
    <div
      className={[
        "min-h-8 rounded-lg transition-colors",
        dragHover ? "bg-accent/10 ring-1 ring-accent/25" : "",
      ].join(" ")}
      onDragOver={(e) => {
        if (e.target !== e.currentTarget || !hasZenItem(e)) return;
        e.preventDefault();
        e.dataTransfer.dropEffect = "move";
        setDragHover(true);
      }}
      onDragLeave={() => setDragHover(false)}
      onDrop={(e) => {
        setDragHover(false);
        if (e.target !== e.currentTarget) return;
        const payload = readDragPayload(e);
        if (!payload) return;
        e.preventDefault();
        void onDropPayload(payload);
      }}
    >
      {children}
    </div>
  );
}

export function Sidebar(): JSX.Element {
  const vault = useStore((s) => s.vault);