feat(46-03): remove header props from 8 node components (batch 2)

- PromptConstructorNode: removed title, customTitle, comment, header callbacks, onExpand - PromptNode: removed title, customTitle, comment, header callbacks, onExpand, headerButtons - RouterNode: removed title, customTitle, comment, header callbacks - SplitGridNode: removed title, customTitle, comment, header callbacks - SwitchNode: removed title, customTitle, comment, header callbacks - VideoFrameGrabNode: removed title, customTitle, comment, header callbacks, onRun - VideoTrimNode: removed title, customTitle, comment, header callbacks, onRun (all 3 variants) - VideoStitchNode: removed title, customTitle, comment, header callbacks, onRun (all 3 variants)
4 months ago · e631c5268c
8 changed files with 0 additions and 101 deletions
--- a/src/components/nodes/PromptConstructorNode.tsx
+++ b/src/components/nodes/PromptConstructorNode.tsx
@ -4,7 +4,6 @@ import { useCallback, useState, useEffect, useMemo, useRef } from "react";
 import { createPortal } from "react-dom";
 import { Handle, Position, NodeProps, Node } from "@xyflow/react";
 import { BaseNode } from "./BaseNode";
-import { useCommentNavigation } from "@/hooks/useCommentNavigation";
 import { usePromptAutocomplete } from "@/hooks/usePromptAutocomplete";
 import { useWorkflowStore } from "@/store/workflowStore";
 import { PromptConstructorNodeData, PromptNodeData, LLMGenerateNodeData, AvailableVariable } from "@/types";
@ -15,7 +14,6 @@ type PromptConstructorNodeType = Node<PromptConstructorNodeData, "promptConstruc

 export function PromptConstructorNode({ id, data, selected }: NodeProps<PromptConstructorNodeType>) {
  const nodeData = data;
-  const commentNavigation = useCommentNavigation(id);
  const updateNodeData = useWorkflowStore((state) => state.updateNodeData);
  const edges = useWorkflowStore((state) => state.edges);
  const nodes = useWorkflowStore((state) => state.nodes);
@ -181,14 +179,7 @@ export function PromptConstructorNode({ id, data, selected }: NodeProps<PromptCo
    <>
      <BaseNode
        id={id}
-        title="Prompt Constructor"
-        customTitle={nodeData.customTitle}
-        comment={nodeData.comment}
-        onCustomTitleChange={(title) => updateNodeData(id, { customTitle: title || undefined })}
-        onCommentChange={(comment) => updateNodeData(id, { comment: comment || undefined })}
-        onExpand={handleOpenModal}
        selected={selected}
-        commentNavigation={commentNavigation ?? undefined}
      >
        {/* Text input handle */}
        <Handle
--- a/src/components/nodes/PromptNode.tsx
+++ b/src/components/nodes/PromptNode.tsx
@ -4,7 +4,6 @@ import { useCallback, useState, useEffect, useMemo, useRef } from "react";
 import { createPortal } from "react-dom";
 import { Handle, Position, NodeProps, Node } from "@xyflow/react";
 import { BaseNode } from "./BaseNode";
-import { useCommentNavigation } from "@/hooks/useCommentNavigation";
 import { useWorkflowStore } from "@/store/workflowStore";
 import { PromptNodeData } from "@/types";
 import { PromptEditorModal } from "@/components/modals/PromptEditorModal";
@ -13,7 +12,6 @@ type PromptNodeType = Node<PromptNodeData, "prompt">;

 export function PromptNode({ id, data, selected }: NodeProps<PromptNodeType>) {
  const nodeData = data;
-  const commentNavigation = useCommentNavigation(id);
  const updateNodeData = useWorkflowStore((state) => state.updateNodeData);
  const incrementModalCount = useWorkflowStore((state) => state.incrementModalCount);
  const decrementModalCount = useWorkflowStore((state) => state.decrementModalCount);
@ -115,34 +113,7 @@ export function PromptNode({ id, data, selected }: NodeProps<PromptNodeType>) {
    <>
      <BaseNode
        id={id}
-        title="Prompt"
-        customTitle={nodeData.customTitle}
-        comment={nodeData.comment}
-        onCustomTitleChange={(title) => updateNodeData(id, { customTitle: title || undefined })}
-        onCommentChange={(comment) => updateNodeData(id, { comment: comment || undefined })}
-        onExpand={handleOpenModal}
        selected={selected}
-        commentNavigation={commentNavigation ?? undefined}
-        headerButtons={
-          <div className="relative ml-2 shrink-0 group">
-            <button
-              onClick={() => setShowVarDialog(true)}
-              className={`nodrag nopan p-0.5 rounded transition-all duration-200 ease-in-out flex items-center overflow-hidden group-hover:pr-2 ${
-                nodeData.variableName
-                  ? "text-blue-400 hover:text-blue-200 border border-blue-500/50"
-                  : "text-neutral-500 group-hover:text-neutral-200 border border-neutral-600"
-              }`}
-              title={nodeData.variableName ? `Variable: @${nodeData.variableName}` : "Set variable name"}
-            >
-              <svg className="w-3.5 h-3.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M16 12h4m0 0l-4-4m4 4l-4 4m-8-4H4m0 0l4 4m-4-4l4-4" />
-              </svg>
-              <span className="max-w-0 opacity-0 whitespace-nowrap text-[10px] transition-all duration-200 ease-in-out overflow-hidden group-hover:max-w-[60px] group-hover:opacity-100 group-hover:ml-1">
-                {nodeData.variableName ? `@${nodeData.variableName}` : "Variable"}
-              </span>
-            </button>
-          </div>
-        }
      >
        {/* Text input handle - for receiving text from LLM nodes */}
        <Handle
--- a/src/components/nodes/RouterNode.tsx
+++ b/src/components/nodes/RouterNode.tsx
@ -71,11 +71,6 @@ export const RouterNode = memo(({ id, data, selected }: NodeProps<WorkflowNode>)
  return (
    <BaseNode
      id={id}
-      title="Router"
-      customTitle={nodeData.customTitle}
-      comment={nodeData.comment}
-      onCustomTitleChange={(customTitle) => updateNodeData(id, { customTitle })}
-      onCommentChange={(comment) => updateNodeData(id, { comment })}
      selected={selected}
      minWidth={200}
      minHeight={minHeight}
--- a/src/components/nodes/SplitGridNode.tsx
+++ b/src/components/nodes/SplitGridNode.tsx
@ -3,7 +3,6 @@
 import { useCallback, useState, useEffect } from "react";
 import { Handle, Position, NodeProps, Node } from "@xyflow/react";
 import { BaseNode } from "./BaseNode";
-import { useCommentNavigation } from "@/hooks/useCommentNavigation";
 import { useWorkflowStore } from "@/store/workflowStore";
 import { SplitGridNodeData } from "@/types";
 import { SplitGridSettingsModal } from "../SplitGridSettingsModal";
@ -12,7 +11,6 @@ type SplitGridNodeType = Node<SplitGridNodeData, "splitGrid">;

 export function SplitGridNode({ id, data, selected }: NodeProps<SplitGridNodeType>) {
  const nodeData = data;
-  const commentNavigation = useCommentNavigation(id);
  const updateNodeData = useWorkflowStore((state) => state.updateNodeData);
  const regenerateNode = useWorkflowStore((state) => state.regenerateNode);
  const isRunning = useWorkflowStore((state) => state.isRunning);
@ -40,14 +38,8 @@ export function SplitGridNode({ id, data, selected }: NodeProps<SplitGridNodeTyp
  return (
    <BaseNode
      id={id}
-      title="Split Grid"
-      customTitle={nodeData.customTitle}
-      comment={nodeData.comment}
-      onCustomTitleChange={(title) => updateNodeData(id, { customTitle: title || undefined })}
-      onCommentChange={(comment) => updateNodeData(id, { comment: comment || undefined })}
      selected={selected}
      hasError={nodeData.status === "error"}
-      commentNavigation={commentNavigation ?? undefined}
    >
      {/* Image input handle */}
      <Handle
--- a/src/components/nodes/SwitchNode.tsx
+++ b/src/components/nodes/SwitchNode.tsx
@ -115,11 +115,6 @@ export const SwitchNode = memo(({ id, data, selected }: NodeProps<WorkflowNode>)
  return (
    <BaseNode
      id={id}
-      title="Switch"
-      customTitle={nodeData.customTitle}
-      comment={nodeData.comment}
-      onCustomTitleChange={(customTitle) => updateNodeData(id, { customTitle })}
-      onCommentChange={(comment) => updateNodeData(id, { comment })}
      selected={selected}
      minWidth={220}
      minHeight={minHeight}
--- a/src/components/nodes/VideoFrameGrabNode.tsx
+++ b/src/components/nodes/VideoFrameGrabNode.tsx
@ -3,7 +3,6 @@
 import React, { useMemo } from "react";
 import { Handle, Position, NodeProps, Node } from "@xyflow/react";
 import { BaseNode } from "./BaseNode";
-import { useCommentNavigation } from "@/hooks/useCommentNavigation";
 import { useWorkflowStore } from "@/store/workflowStore";
 import { VideoFrameGrabNodeData } from "@/types";

@ -11,7 +10,6 @@ type VideoFrameGrabNodeType = Node<VideoFrameGrabNodeData, "videoFrameGrab">;

 export function VideoFrameGrabNode({ id, data, selected }: NodeProps<VideoFrameGrabNodeType>) {
  const nodeData = data;
-  const commentNavigation = useCommentNavigation(id);
  const updateNodeData = useWorkflowStore((state) => state.updateNodeData);
  const regenerateNode = useWorkflowStore((state) => state.regenerateNode);
  const isRunning = useWorkflowStore((state) => state.isRunning);
@ -40,16 +38,9 @@ export function VideoFrameGrabNode({ id, data, selected }: NodeProps<VideoFrameG
  return (
    <BaseNode
      id={id}
-      title="Frame Grab"
-      customTitle={nodeData.customTitle}
-      comment={nodeData.comment}
-      onCustomTitleChange={(title) => updateNodeData(id, { customTitle: title || undefined })}
-      onCommentChange={(comment) => updateNodeData(id, { comment: comment || undefined })}
-      onRun={canExtract ? handleExtract : undefined}
      selected={selected}
      isExecuting={isRunning}
      hasError={nodeData.status === "error"}
-      commentNavigation={commentNavigation ?? undefined}
      minWidth={320}
      minHeight={320}
    >
--- a/src/components/nodes/VideoStitchNode.tsx
+++ b/src/components/nodes/VideoStitchNode.tsx
@ -3,7 +3,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Handle, Position, NodeProps, Node } from "@xyflow/react";
 import { BaseNode } from "./BaseNode";
-import { useCommentNavigation } from "@/hooks/useCommentNavigation";
 import { useWorkflowStore } from "@/store/workflowStore";
 import { VideoStitchNodeData } from "@/types";
 import { checkEncoderSupport } from "@/hooks/useStitchVideos";
@ -13,7 +12,6 @@ type VideoStitchNodeType = Node<VideoStitchNodeData, "videoStitch">;

 export function VideoStitchNode({ id, data, selected }: NodeProps<VideoStitchNodeType>) {
  const nodeData = data;
-  const commentNavigation = useCommentNavigation(id);
  const updateNodeData = useWorkflowStore((state) => state.updateNodeData);
  const edges = useWorkflowStore((state) => state.edges);
  const nodes = useWorkflowStore((state) => state.nodes);
@ -367,13 +365,7 @@ export function VideoStitchNode({ id, data, selected }: NodeProps<VideoStitchNod
    return (
      <BaseNode
        id={id}
-        title="Video Stitch"
-        customTitle={nodeData.customTitle}
-        comment={nodeData.comment}
-        onCustomTitleChange={(title) => updateNodeData(id, { customTitle: title || undefined })}
-        onCommentChange={(comment) => updateNodeData(id, { comment: comment || undefined })}
        selected={selected}
-        commentNavigation={commentNavigation ?? undefined}
        minWidth={500}
        minHeight={280}
      >
@ -403,13 +395,7 @@ export function VideoStitchNode({ id, data, selected }: NodeProps<VideoStitchNod
    return (
      <BaseNode
        id={id}
-        title="Video Stitch"
-        customTitle={nodeData.customTitle}
-        comment={nodeData.comment}
-        onCustomTitleChange={(title) => updateNodeData(id, { customTitle: title || undefined })}
-        onCommentChange={(comment) => updateNodeData(id, { comment: comment || undefined })}
        selected={selected}
-        commentNavigation={commentNavigation ?? undefined}
        minWidth={500}
        minHeight={280}
      >
@ -445,16 +431,9 @@ export function VideoStitchNode({ id, data, selected }: NodeProps<VideoStitchNod
  return (
    <BaseNode
      id={id}
-      title="Video Stitch"
-      customTitle={nodeData.customTitle}
-      comment={nodeData.comment}
-      onCustomTitleChange={(title) => updateNodeData(id, { customTitle: title || undefined })}
-      onCommentChange={(comment) => updateNodeData(id, { comment: comment || undefined })}
-      onRun={handleStitch}
      selected={selected}
      isExecuting={isRunning}
      hasError={nodeData.status === "error"}
-      commentNavigation={commentNavigation ?? undefined}
      minWidth={500}
      minHeight={280}
    >
--- a/src/components/nodes/VideoTrimNode.tsx
+++ b/src/components/nodes/VideoTrimNode.tsx
@ -3,7 +3,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Handle, Position, NodeProps, Node } from "@xyflow/react";
 import { BaseNode } from "./BaseNode";
-import { useCommentNavigation } from "@/hooks/useCommentNavigation";
 import { useWorkflowStore } from "@/store/workflowStore";
 import { VideoTrimNodeData } from "@/types";
 import { checkEncoderSupport } from "@/hooks/useStitchVideos";
@ -22,7 +21,6 @@ function formatTime(seconds: number): string {

 export function VideoTrimNode({ id, data, selected }: NodeProps<VideoTrimNodeType>) {
  const nodeData = data;
-  const commentNavigation = useCommentNavigation(id);
  const updateNodeData = useWorkflowStore((state) => state.updateNodeData);
  const regenerateNode = useWorkflowStore((state) => state.regenerateNode);
  const isRunning = useWorkflowStore((state) => state.isRunning);
@ -234,13 +232,7 @@ export function VideoTrimNode({ id, data, selected }: NodeProps<VideoTrimNodeTyp
    return (
      <BaseNode
        id={id}
-        title="Video Trim"
-        customTitle={nodeData.customTitle}
-        comment={nodeData.comment}
-        onCustomTitleChange={(title) => updateNodeData(id, { customTitle: title || undefined })}
-        onCommentChange={(comment) => updateNodeData(id, { comment: comment || undefined })}
        selected={selected}
-        commentNavigation={commentNavigation ?? undefined}
        minWidth={360}
        minHeight={360}
      >
@ -261,16 +253,9 @@ export function VideoTrimNode({ id, data, selected }: NodeProps<VideoTrimNodeTyp
  return (
    <BaseNode
      id={id}
-      title="Video Trim"
-      customTitle={nodeData.customTitle}
-      comment={nodeData.comment}
-      onCustomTitleChange={(title) => updateNodeData(id, { customTitle: title || undefined })}
-      onCommentChange={(comment) => updateNodeData(id, { comment: comment || undefined })}
-      onRun={canTrim ? handleTrim : undefined}
      selected={selected}
      isExecuting={isRunning}
      hasError={nodeData.status === "error"}
-      commentNavigation={commentNavigation ?? undefined}
      minWidth={360}
      minHeight={360}
    >