Auto-rebuild grid when IPA or syllable mode dropdown changes

The dropdowns only updated state but didn't trigger buildGrid().
Now a useEffect watches ipaMode/syllableMode and rebuilds
automatically (skipping the initial mount).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

admin-lehrer/components/grid-editor/useGridEditor.ts

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import type { StructuredGrid, GridZone, LayoutDividers } from './types'
 
 const KLAUSUR_API = '/klausur-api'
@@ -101,6 +101,19 @@ export function useGridEditor(sessionId: string | null) {
     }
   }, [sessionId, buildGrid])
 
+  // Auto-rebuild when IPA or syllable mode changes (skip initial mount)
+  const initialLoadDone = useRef(false)
+  useEffect(() => {
+    if (!initialLoadDone.current) {
+      // Mark as initialized once the first grid is loaded
+      if (grid) initialLoadDone.current = true
+      return
+    }
+    // Mode changed after initial load — rebuild
+    buildGrid()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ipaMode, syllableMode])
+
   // ------------------------------------------------------------------
   // Save
   // ------------------------------------------------------------------