Function SidebarSectionHeading

packages/app-core/src/components/Sidebar.tsx:205–253

({
  label,
  onDropPayload,
}: {
  label: string;
  onDropPayload?: (payload: DragPayload) => void | Promise<void>;
})

}

function SidebarSectionHeading({
  label,
  onDropPayload,
}: {
  label: string;
  onDropPayload?: (payload: DragPayload) => void | Promise<void>;
}): JSX.Element {
  const [dragHover, setDragHover] = useState(false);
  const droppable = !!onDropPayload;

  return (
    <div
      className={[
        "rounded-lg px-2 pb-2 pt-4 text-xs font-medium uppercase tracking-wide transition-colors",
        dragHover ? "bg-accent/10 text-accent" : "text-ink-500",
      ].join(" ")}
      onDragOver={
        droppable
          ? (e) => {
              if (!hasZenItem(e)) return;
              e.preventDefault();
              e.dataTransfer.dropEffect = "move";
              setDragHover(true);
            }
          : undefined
      }
      onDragLeave={
        droppable
          ? () => {
              setDragHover(false);
            }
          : undefined
      }
      onDrop={
        droppable
          ? (e) => {
              setDragHover(false);
              const payload = readDragPayload(e);
              if (!payload) return;
              e.preventDefault();
              void onDropPayload(payload);
            }
          : undefined
      }
    >
      {label}
    </div>
  );
}

function vaultRelativeFolderPath(
  folder: NoteFolder,