From f4981a6ba98f6ca998735a8278d7a07828e682aa Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 11 Aug 2025 22:34:04 +1000
Subject: [PATCH] tidy(ui): minor cleanup

---
 .../flow/nodes/Invocation/InvocationNode.tsx           |  4 +---
 .../flow/nodes/Invocation/InvocationNodeHeader.tsx     | 10 ++++++----
 .../flow/nodes/Invocation/fields/InputFieldTitle.tsx   |  6 +++---
 .../common/{NodeTitle.tsx => InvocationNodeTitle.tsx}  |  7 ++++---
 4 files changed, 14 insertions(+), 13 deletions(-)
 rename invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/{NodeTitle.tsx => InvocationNodeTitle.tsx} (92%)

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx
index 66e4befb08..7bb92c1494 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx
@@ -8,7 +8,6 @@ import {
   useInputFieldNamesConnection,
   useInputFieldNamesMissing,
 } from 'features/nodes/hooks/useInputFieldNamesByStatus';
-import { useNodeHasErrors } from 'features/nodes/hooks/useNodeIsInvalid';
 import { useOutputFieldNames } from 'features/nodes/hooks/useOutputFieldNames';
 import { useWithFooter } from 'features/nodes/hooks/useWithFooter';
 import { memo } from 'react';
@@ -38,12 +37,11 @@ const sx: SystemStyleObject = {
 };
 
 const InvocationNode = ({ nodeId, isOpen }: Props) => {
-  const isInvalid = useNodeHasErrors();
   const withFooter = useWithFooter();
 
   return (
     <>
-      <InvocationNodeHeader nodeId={nodeId} isOpen={isOpen} isInvalid={isInvalid} />
+      <InvocationNodeHeader nodeId={nodeId} isOpen={isOpen} />
       {isOpen && (
         <>
           <Flex layerStyle="nodeBody" sx={sx} data-with-footer={withFooter}>
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeHeader.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeHeader.tsx
index 016f96e287..63a86479b2 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeHeader.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeHeader.tsx
@@ -1,8 +1,9 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Flex } from '@invoke-ai/ui-library';
+import InvocationNodeTitle from 'features/nodes/components/flow/nodes/common/InvocationNodeTitle';
 import NodeCollapseButton from 'features/nodes/components/flow/nodes/common/NodeCollapseButton';
-import NodeTitle from 'features/nodes/components/flow/nodes/common/NodeTitle';
 import InvocationNodeClassificationIcon from 'features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon';
+import { useNodeHasErrors } from 'features/nodes/hooks/useNodeIsInvalid';
 import { memo } from 'react';
 
 import InvocationNodeCollapsedHandles from './InvocationNodeCollapsedHandles';
@@ -12,7 +13,6 @@ import InvocationNodeStatusIndicator from './InvocationNodeStatusIndicator';
 type Props = {
   nodeId: string;
   isOpen: boolean;
-  isInvalid?: boolean;
 };
 
 const sx: SystemStyleObject = {
@@ -28,12 +28,14 @@ const sx: SystemStyleObject = {
   },
 };
 
-const InvocationNodeHeader = ({ nodeId, isOpen, isInvalid }: Props) => {
+const InvocationNodeHeader = ({ nodeId, isOpen }: Props) => {
+  const isInvalid = useNodeHasErrors();
+
   return (
     <Flex sx={sx} data-is-open={isOpen} data-is-invalid={isInvalid}>
       <NodeCollapseButton nodeId={nodeId} isOpen={isOpen} />
       <InvocationNodeClassificationIcon nodeId={nodeId} />
-      <NodeTitle nodeId={nodeId} isInvalid={isInvalid} />
+      <InvocationNodeTitle nodeId={nodeId} />
       <Flex alignItems="center">
         <InvocationNodeStatusIndicator nodeId={nodeId} />
         <InvocationNodeInfoIcon nodeId={nodeId} />
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldTitle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldTitle.tsx
index 396b05c2ac..b0a4336486 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldTitle.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldTitle.tsx
@@ -30,12 +30,12 @@ const labelSx: SystemStyleObject = {
   _hover: {
     fontWeight: 'semibold !important',
   },
-  '&[data-is-added-to-form="true"]': {
-    color: 'blue.300',
-  },
   '&[data-is-invalid="true"]': {
     color: 'error.300',
   },
+  '&[data-is-added-to-form="true"]': {
+    color: 'blue.300',
+  },
   '&[data-is-disabled="true"]': {
     opacity: 0.5,
   },
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeTitle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/InvocationNodeTitle.tsx
similarity index 92%
rename from invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeTitle.tsx
rename to invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/InvocationNodeTitle.tsx
index e08b3fe8d0..538a39facb 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeTitle.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/InvocationNodeTitle.tsx
@@ -4,6 +4,7 @@ import { useAppDispatch } from 'app/store/storeHooks';
 import { useEditable } from 'common/hooks/useEditable';
 import { useBatchGroupColorToken } from 'features/nodes/hooks/useBatchGroupColorToken';
 import { useBatchGroupId } from 'features/nodes/hooks/useBatchGroupId';
+import { useNodeHasErrors } from 'features/nodes/hooks/useNodeIsInvalid';
 import { useNodeTemplateTitleSafe } from 'features/nodes/hooks/useNodeTemplateTitleSafe';
 import { useNodeUserTitleSafe } from 'features/nodes/hooks/useNodeUserTitleSafe';
 import { nodeLabelChanged } from 'features/nodes/store/nodesSlice';
@@ -21,11 +22,11 @@ const labelSx: SystemStyleObject = {
 type Props = {
   nodeId: string;
   title?: string;
-  isInvalid?: boolean;
 };
 
-const NodeTitle = ({ nodeId, title, isInvalid }: Props) => {
+const InvocationNodeTitle = ({ nodeId, title }: Props) => {
   const dispatch = useAppDispatch();
+  const isInvalid = useNodeHasErrors();
   const label = useNodeUserTitleSafe();
   const batchGroupId = useBatchGroupId(nodeId);
   const batchGroupColorToken = useBatchGroupColorToken(batchGroupId);
@@ -83,4 +84,4 @@ const NodeTitle = ({ nodeId, title, isInvalid }: Props) => {
   );
 };
 
-export default memo(NodeTitle);
+export default memo(InvocationNodeTitle);