tidy(ui): minor cleanup

Author: psychedelicious

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}>

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} />

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,
   },

invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeTitle.tsx renamed to 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);