Agent Zero
85 lines
2.7 KiB
TypeScript
85 lines
2.7 KiB
TypeScript
/**
|
||
* Task F4 – UI für LibraryProviderExtensions.
|
||
*
|
||
* Lädt alle übergebenen Provider (builtin/user/global) und rendert je Ordner
|
||
* eine Sektion mit Thumbnail-Blöcken. Jeder Block ist als DragSource an den
|
||
* bestehenden 'text/global-block-data'-Kanal angebunden (DragDrop → Canvas).
|
||
*/
|
||
import React, { useEffect, useState } from 'react';
|
||
import type { LibraryProviderExtension, LibBlock } from '../plugins/types';
|
||
|
||
interface Props {
|
||
providers: LibraryProviderExtension[];
|
||
}
|
||
|
||
interface Section { key: string; label: string; blocks: LibBlock[]; }
|
||
|
||
const LibraryProviderPanel: React.FC<Props> = ({ providers }) => {
|
||
const [sections, setSections] = useState<Section[]>([]);
|
||
|
||
useEffect(() => {
|
||
let cancelled = false;
|
||
(async () => {
|
||
const out: Section[] = [];
|
||
for (const provider of providers) {
|
||
try {
|
||
const folders = await provider.listFolders();
|
||
for (const folder of folders) {
|
||
try {
|
||
const blocks = await provider.listBlocks(folder.id);
|
||
if (blocks.length > 0) {
|
||
out.push({ key: `${provider.id}/${folder.id}`, label: folder.label, blocks });
|
||
}
|
||
} catch {
|
||
// Ordner bei Fehler überspringen
|
||
}
|
||
}
|
||
} catch {
|
||
// Provider bei Fehler überspringen
|
||
}
|
||
}
|
||
if (!cancelled) setSections(out);
|
||
})();
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [providers]);
|
||
|
||
const handleDragStart = (e: React.DragEvent, block: LibBlock) => {
|
||
const payload = typeof block.payload === 'string' ? block.payload : JSON.stringify(block.payload ?? []);
|
||
e.dataTransfer.setData('text/global-block-data', payload);
|
||
e.dataTransfer.effectAllowed = 'copy';
|
||
};
|
||
|
||
if (sections.length === 0) return null;
|
||
|
||
return (
|
||
<div className="lib-provider-panel">
|
||
{sections.map((section) => (
|
||
<div className="lprov-section" key={section.key}>
|
||
<div className="lprov-title">{section.label}</div>
|
||
<div className="lprov-grid">
|
||
{section.blocks.map((block) => (
|
||
<button
|
||
key={block.id}
|
||
type="button"
|
||
className="lprov-block"
|
||
aria-label={block.name}
|
||
title={block.name}
|
||
draggable
|
||
onDragStart={(e) => handleDragStart(e, block)}
|
||
>
|
||
{block.thumbnail
|
||
? <span className="tree-thumb" dangerouslySetInnerHTML={{ __html: block.thumbnail }} />
|
||
: <span className="lib-grid-placeholder">📦</span>}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default LibraryProviderPanel;
|