Function ComponentList

src/components/common/ComponentList.jsx:80–658

({ list, hasDeleteButton = false, hasFavoriteButton = false, sorting = 'none', title })

    .trim();

const ComponentList = ({ list, hasDeleteButton = false, hasFavoriteButton = false, sorting = 'none', title }) => {
  const scrollRef = useRef(null);
  const GAP_PX = 16;
  const [hoveredKey, setHoveredKey] = useState(null);
  const clearSlotRef = useRef(null);
  const clearBtnRef = useRef(null);
  const CLEAR_APPEAR_DEBOUNCE_MS = 300;

  const setHoverToItemAtPoint = useCallback((x, y) => {
    try {
      const el = document.elementFromPoint(x, y);
      let node = el;
      while (node && node !== document.body) {
        if (node.dataset && node.dataset.itemKey) {
          setHoveredKey(node.dataset.itemKey);
          return;
        }
        node = node.parentElement;
      }
      setHoveredKey(null);
    } catch (e) {
      // noop
    }
  }, []);

  const items = useMemo(() => {
    if (!list) return [];
    const entries = Array.isArray(list) ? list : Object.entries(list).map(([key, meta]) => ({ key, ...meta }));

    const mapToItem = entry => {
      const key = entry.key ?? entry?.id ?? null;
      const meta = entry.key ? entry : (componentMetadata?.[entry] ?? {});
      const fullKey = key || entry;
      const [cat, comp] = (fullKey || '').split('/');
      const title = fromPascal(meta?.name ?? comp);
      return {
        key: fullKey,
        categoryKey: cat,
        componentKey: comp,
        categoryLabel: fromPascal(meta?.category ?? cat),
        title,
        description: meta?.description ?? '',
        videoUrl: meta?.videoUrl ?? '',
        tags: Array.isArray(meta?.tags) ? meta.tags : [],
        docsUrl: meta?.docsUrl,
        isNew: NEW.includes(title)
      };
    };

    let arr = entries
      .filter(e => {
        const key = (e.key ?? e)?.toString?.() ?? '';
        return key.includes('/') && (e.key ? true : !!componentMetadata[key]);
      })
      .map(mapToItem);

    if (sorting === 'alphabetical') {
      // New components are sorted to the top (in NEW list order), then the rest alphabetically.