campaign sending prototype

2026-06-24 16:20:37 +02:00
parent 44516a03aa
commit ce30b4d054
17 changed files with 1233 additions and 14 deletions
--- a/webui/src/components/ExplorerTree.tsx
+++ b/webui/src/components/ExplorerTree.tsx
@@ -0,0 +1,147 @@
+import { Folder, FolderOpen } from "lucide-react";
+import type { CSSProperties, DragEvent as ReactDragEvent, MouseEvent as ReactMouseEvent, ReactNode } from "react";
+
+export type ExplorerTreeNodeContext = {
+  depth: number;
+  active: boolean;
+  expanded: boolean;
+  hasChildren: boolean;
+  disabled: boolean;
+};
+
+type ExplorerTreeProps<T> = {
+  nodes: T[];
+  getNodeId: (node: T) => string;
+  getNodeLabel: (node: T) => string;
+  getNodeChildren: (node: T) => T[];
+  activeId?: string;
+  expandedIds: Set<string>;
+  onOpen: (node: T, context: ExplorerTreeNodeContext) => void;
+  onToggle: (node: T, context: ExplorerTreeNodeContext) => void;
+  disabled?: boolean;
+  depth?: number;
+  className?: string;
+  renderToggleIcon?: (node: T, context: ExplorerTreeNodeContext) => ReactNode;
+  renderNodeContent?: (node: T, context: ExplorerTreeNodeContext) => ReactNode;
+  getNodeWrapClassName?: (node: T, context: ExplorerTreeNodeContext) => string | undefined;
+  getNodeWrapStyle?: (node: T, context: ExplorerTreeNodeContext) => CSSProperties | undefined;
+  getNodeButtonClassName?: (node: T, context: ExplorerTreeNodeContext) => string | undefined;
+  getNodeDraggable?: (node: T, context: ExplorerTreeNodeContext) => boolean;
+  onContextMenu?: (event: ReactMouseEvent<HTMLElement>, node: T, context: ExplorerTreeNodeContext) => void;
+  onDragStart?: (event: ReactDragEvent<HTMLElement>, node: T, context: ExplorerTreeNodeContext) => void;
+  onDragEnd?: (event: ReactDragEvent<HTMLElement>, node: T, context: ExplorerTreeNodeContext) => void;
+  onDragOver?: (event: ReactDragEvent<HTMLElement>, node: T, context: ExplorerTreeNodeContext) => void;
+  onDragLeave?: (event: ReactDragEvent<HTMLElement>, node: T, context: ExplorerTreeNodeContext) => void;
+  onDrop?: (event: ReactDragEvent<HTMLElement>, node: T, context: ExplorerTreeNodeContext) => void;
+};
+
+export default function ExplorerTree<T>({
+  nodes,
+  getNodeId,
+  getNodeLabel,
+  getNodeChildren,
+  activeId = "",
+  expandedIds,
+  onOpen,
+  onToggle,
+  disabled = false,
+  depth = 1,
+  className = "",
+  renderToggleIcon,
+  renderNodeContent,
+  getNodeWrapClassName,
+  getNodeWrapStyle,
+  getNodeButtonClassName,
+  getNodeDraggable,
+  onContextMenu,
+  onDragStart,
+  onDragEnd,
+  onDragOver,
+  onDragLeave,
+  onDrop
+}: ExplorerTreeProps<T>) {
+  if (nodes.length === 0) return null;
+
+  return (
+    <div className={["explorer-tree-children", "file-tree-children", className].filter(Boolean).join(" ")}>
+      {nodes.map((node) => {
+        const nodeId = getNodeId(node);
+        const children = getNodeChildren(node);
+        const hasChildren = children.length > 0;
+        const expanded = expandedIds.has(nodeId);
+        const active = activeId === nodeId;
+        const context: ExplorerTreeNodeContext = { depth, active, expanded, hasChildren, disabled };
+        const draggable = getNodeDraggable?.(node, context) ?? false;
+
+        return (
+          <div key={nodeId}>
+            <div
+              className={[
+                "explorer-tree-node-wrap",
+                "file-tree-node-wrap",
+                active ? "is-active" : "",
+                getNodeWrapClassName?.(node, context) ?? ""
+              ].filter(Boolean).join(" ")}
+              style={getNodeWrapStyle?.(node, context) ?? { paddingLeft: `${Math.min(depth * 14, 56)}px` }}
+              draggable={draggable && !disabled}
+              onContextMenu={onContextMenu ? (event) => onContextMenu(event, node, context) : undefined}
+              onDragStart={draggable && onDragStart ? (event) => onDragStart(event, node, context) : undefined}
+              onDragEnd={draggable && onDragEnd ? (event) => onDragEnd(event, node, context) : undefined}
+              onDragOver={onDragOver ? (event) => onDragOver(event, node, context) : undefined}
+              onDragLeave={onDragLeave ? (event) => onDragLeave(event, node, context) : undefined}
+              onDrop={onDrop ? (event) => onDrop(event, node, context) : undefined}
+            >
+              <button
+                type="button"
+                className="explorer-tree-toggle file-tree-toggle"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  if (hasChildren) onToggle(node, context);
+                }}
+                disabled={disabled || !hasChildren}
+                aria-label={`${expanded ? "Collapse" : "Expand"} ${getNodeLabel(node)}`}
+                aria-expanded={hasChildren ? expanded : undefined}
+              >
+                {renderToggleIcon?.(node, context) ?? (expanded ? <FolderOpen size={15} aria-hidden="true" /> : <Folder size={15} aria-hidden="true" />)}
+              </button>
+              <button
+                type="button"
+                className={["explorer-tree-node", "file-tree-node", getNodeButtonClassName?.(node, context) ?? ""].filter(Boolean).join(" ")}
+                onClick={() => onOpen(node, context)}
+                disabled={disabled}
+              >
+                {renderNodeContent?.(node, context) ?? <span>{getNodeLabel(node)}</span>}
+              </button>
+            </div>
+            {hasChildren && expanded && (
+              <ExplorerTree
+                nodes={children}
+                getNodeId={getNodeId}
+                getNodeLabel={getNodeLabel}
+                getNodeChildren={getNodeChildren}
+                activeId={activeId}
+                expandedIds={expandedIds}
+                onOpen={onOpen}
+                onToggle={onToggle}
+                disabled={disabled}
+                depth={depth + 1}
+                renderToggleIcon={renderToggleIcon}
+                renderNodeContent={renderNodeContent}
+                getNodeWrapClassName={getNodeWrapClassName}
+                getNodeWrapStyle={getNodeWrapStyle}
+                getNodeButtonClassName={getNodeButtonClassName}
+                getNodeDraggable={getNodeDraggable}
+                onContextMenu={onContextMenu}
+                onDragStart={onDragStart}
+                onDragEnd={onDragEnd}
+                onDragOver={onDragOver}
+                onDragLeave={onDragLeave}
+                onDrop={onDrop}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}