Function handleFolderDragStart

public/js/folderManager.js:1923–2079

(ev, fullPath, optEl)

}

function handleFolderDragStart(ev, fullPath, optEl) {
  const dt = ev.dataTransfer;
  if (!dt) return;

  // Drag payload
  try { dt.setData('application/x-filerise-folder', fullPath); } catch (e) {}
  try { dt.setData('text/plain', fullPath); } catch (e) {}
  dt.effectAllowed = 'move';

  const row = optEl.closest('.folder-row') || optEl;
  if (!row || !dt.setDragImage) return;

  const isDark = document.body.classList.contains('dark-mode');

  // --- Resolve folder colors from CSS vars (per-folder color picker) ---
  let frontColor = '';
  let backColor = '';
  let strokeColor = '';
  try {
    const src = optEl || row;
    if (src) {
      const cs = getComputedStyle(src);
      frontColor  = (cs.getPropertyValue('--filr-folder-front')  || '').trim();
      backColor   = (cs.getPropertyValue('--filr-folder-back')   || '').trim();
      strokeColor = (cs.getPropertyValue('--filr-folder-stroke') || '').trim();
    }
  } catch (e) {
    // fall through to defaults
  }

  // Fallback to your default palette if no custom color is set
  if (!frontColor)  frontColor  = isDark ? '#facc6b' : '#e2b158';
  if (!backColor)   backColor   = isDark ? '#f5d88a' : '#f0d084';
  if (!strokeColor) strokeColor = isDark ? '#854d0e' : '#996a1e';

  // --- Drag ghost pill ---
  const ghost = document.createElement('div');
  ghost.className = 'folder-drag-ghost';

  const rowStyles = getComputedStyle(row);

  Object.assign(ghost.style, {
    position: 'fixed',
    top: '-9999px',
    left: '-9999px',
    pointerEvents: 'none',
    zIndex: '99999',

    display: 'inline-flex',
    alignItems: 'center',
    gap: '6px',
    padding: '2px 10px',
    borderRadius: '999px',
    whiteSpace: 'nowrap',

    fontFamily: rowStyles.fontFamily,
    fontSize: rowStyles.fontSize,