Working on dialog editor, on dialogs, on phone

dialogEditor/src/components/RightPanel/inspectors/OtherInspectors.tsx

@@ -0,0 +1,76 @@
+import { CutsceneStartNode, EndNode } from '../../../types/dialogue';
+import { useDialogueStore } from '../../../store/dialogueStore';
+import styles from '../RightPanel.module.css';
+
+interface CutsceneProps {
+  node: CutsceneStartNode;
+  dialogueId: string;
+}
+
+export function CutsceneStartInspector({ node, dialogueId }: CutsceneProps) {
+  const { updateNode, deleteNode, file } = useDialogueStore();
+  const dialogue = file?.dialogues.find(d => d.id === dialogueId);
+  const nodeIds = dialogue?.nodes.map(n => n.id) ?? [];
+
+  return (
+    <div className={styles.inspector}>
+      <div className={styles.inspectorHeader}>
+        <span className={styles.nodeTypeBadge} style={{ background: '#4a4a5a' }}>CutsceneStart</span>
+        <span className={styles.nodeIdLabel}>{node.id}</span>
+        <button className={styles.deleteNodeBtn} onClick={() => deleteNode(dialogueId, node.id)} title="Delete node">🗑</button>
+      </div>
+      <div>
+        <label className={styles.label}>Node ID</label>
+        <input className={styles.input} value={node.id} readOnly />
+      </div>
+      <div style={{ marginTop: 8 }}>
+        <label className={styles.label}>Cutscene ID</label>
+        <input
+          className={styles.input}
+          value={node.cutsceneId}
+          placeholder="cutscene_id"
+          onChange={e => updateNode(dialogueId, node.id, { cutsceneId: e.target.value })}
+        />
+      </div>
+      <div style={{ marginTop: 8 }}>
+        <label className={styles.label}>Next node</label>
+        <input
+          className={styles.input}
+          value={node.next}
+          placeholder="node_id"
+          onChange={e => updateNode(dialogueId, node.id, { next: e.target.value })}
+          list={`nodelist-cs-${node.id}`}
+        />
+        <datalist id={`nodelist-cs-${node.id}`}>
+          {nodeIds.map(id => <option key={id} value={id} />)}
+        </datalist>
+      </div>
+    </div>
+  );
+}
+
+interface EndProps {
+  node: EndNode;
+  dialogueId: string;
+}
+
+export function EndInspector({ node, dialogueId }: EndProps) {
+  const { deleteNode } = useDialogueStore();
+
+  return (
+    <div className={styles.inspector}>
+      <div className={styles.inspectorHeader}>
+        <span className={styles.nodeTypeBadge} style={{ background: '#f38ba8', color: '#1e1e2e' }}>End</span>
+        <span className={styles.nodeIdLabel}>{node.id}</span>
+        <button className={styles.deleteNodeBtn} onClick={() => deleteNode(dialogueId, node.id)} title="Delete node">🗑</button>
+      </div>
+      <div>
+        <label className={styles.label}>Node ID</label>
+        <input className={styles.input} value={node.id} readOnly />
+      </div>
+      <div className={styles.emptyHint} style={{ marginTop: 12 }}>
+        This is a terminal node. Dialogue ends here.
+      </div>
+    </div>
+  );
+}