Working on dialog editor, on dialogs, on phone

dialogEditor/src/hooks/useAutoSave.ts

@@ -0,0 +1,31 @@
+import { useState, useEffect, useRef } from 'react';
+
+export function useAutoSave(
+  value: string,
+  onSave: (value: string) => void,
+  delay = 600
+): [string, (v: string) => void] {
+  const [local, setLocal] = useState(value);
+  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const savedValueRef = useRef(value);
+
+  useEffect(() => {
+    if (value !== savedValueRef.current) {
+      savedValueRef.current = value;
+      setLocal(value);
+    }
+  }, [value]);
+
+  const handleChange = (v: string) => {
+    setLocal(v);
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      savedValueRef.current = v;
+      onSave(v);
+    }, delay);
+  };
+
+  useEffect(() => () => clearTimeout(timerRef.current), []);
+
+  return [local, handleChange];
+}

dialogEditor/src/hooks/useValidation.ts

@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+import { useDialogueStore } from '../store/dialogueStore';
+import { ValidationIssue } from '../types/dialogue';
+
+export function useValidation(): {
+  issuesByNodeId: Record<string, ValidationIssue[]>;
+  hasError: (nodeId: string) => boolean;
+  hasWarning: (nodeId: string) => boolean;
+} {
+  const issues = useDialogueStore(s => s.validationIssues);
+
+  const issuesByNodeId = useMemo(() => {
+    const map: Record<string, ValidationIssue[]> = {};
+    for (const issue of issues) {
+      if (!map[issue.nodeId]) map[issue.nodeId] = [];
+      map[issue.nodeId].push(issue);
+    }
+    return map;
+  }, [issues]);
+
+  const hasError = (nodeId: string) =>
+    issuesByNodeId[nodeId]?.some(i => i.severity === 'error') ?? false;
+
+  const hasWarning = (nodeId: string) =>
+    issuesByNodeId[nodeId]?.some(i => i.severity === 'warning') ?? false;
+
+  return { issuesByNodeId, hasError, hasWarning };
+}