Working on dialog editor, on dialogs, on phone

dialogEditor/src/components/nodes/ConditionNode.tsx

@@ -0,0 +1,60 @@
+import { memo } from 'react';
+import { Handle, Position, NodeProps } from '@xyflow/react';
+import { ConditionNode as ConditionNodeData } from '../../types/dialogue';
+import { useValidation } from '../../hooks/useValidation';
+import styles from './nodes.module.css';
+
+export const ConditionNode = memo(({ data, selected }: NodeProps & { data: ConditionNodeData }) => {
+  const { hasError, hasWarning } = useValidation();
+  const error = hasError(data.id);
+  const warning = !error && hasWarning(data.id);
+
+  return (
+    <div
+      className={[
+        styles.node,
+        styles.conditionNode,
+        selected ? styles.selected : '',
+        error ? styles.hasError : '',
+        warning ? styles.hasWarning : '',
+      ].join(' ')}
+    >
+      <Handle type="target" position={Position.Top} id="target" className={styles.handle} />
+      <div className={styles.nodeHeader}>
+        <span className={styles.speakerName}>Condition</span>
+        <span className={styles.nodeType}>If</span>
+      </div>
+      <div className={styles.nodeId}>{data.id}</div>
+      <div className={styles.nodeBody}>
+        {data.conditions.map((c, i) => (
+          <div key={i} className={styles.conditionRow}>
+            <span className={styles.flagPill}>{c.flag}</span>
+            <span className={styles.opBadge}>{c.op}</span>
+            <span className={styles.valuePill}>{String(c.value)}</span>
+          </div>
+        ))}
+        {data.conditions.length === 0 && (
+          <span className={styles.emptyText}>(no conditions)</span>
+        )}
+      </div>
+      <div className={styles.conditionHandles}>
+        <span className={styles.trueLabel}>TRUE</span>
+        <span className={styles.falseLabel}>FALSE</span>
+      </div>
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        id="true"
+        className={[styles.handle, styles.trueHandle].join(' ')}
+        style={{ left: '30%' }}
+      />
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        id="false"
+        className={[styles.handle, styles.falseHandle].join(' ')}
+        style={{ left: '70%' }}
+      />
+    </div>
+  );
+});