Stundenplan Phase 3d: all 15 constraint editors via shared shell

Backend was already complete in Phase 2; this finishes the UI.

  - regeln/_shell.tsx introduces useConstraintCrud (handles list/create/
    delete state + reload), ConstraintShell (header, prereq banner,
    form toggle, error display, empty/loading/table render), and
    useShellStyles for the recurring theme tokens. Each editor now
    only carries its schema-specific bits.
  - Existing 4 editors (TeacherUnavailableDay/Window, SubjectMax
    Consecutive/PreferredPeriod) refactored onto the shell — every
    Playwright selector preserved.
  - 11 new editors covering the remaining constraint tables:
      TeacherMaxHours{Day,Week}, TeacherExcluded{Subject,Room},
      Subject{MinDayGap,ContiguousWhenRepeated,DoubleLesson},
      Class{MaxHoursDay,NoGaps},
      Room{RequiresType,Unavailable}.
  - RegelnHub now references all 15 editors directly — no more 'soon'
    placeholders. The two duplicate 'Max. Stunden / Tag' entries
    (teacher + class) are intentional and disambiguated by group.

Tests:
  - e2e/stundenplan.spec.ts: mock routes added for all 11 new constraint
    endpoints. RegelnHub suite gains a single test that switches
    through 13 uniquely-labelled editors, plus a dedicated test for
    the two duplicate 'Max. Stunden / Tag' labels.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

studio-v2/app/stundenplan/_components/regeln/SubjectSimpleEditors.tsx

@@ -0,0 +1,200 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import {
+  subjectMinDayGapApi, subjectContiguousWhenRepeatedApi, subjectDoubleLessonApi, subjectsApi,
+} from '@/lib/stundenplan/api'
+import type {
+  SubjectMinDayGap, SubjectContiguousWhenRepeated, SubjectDoubleLesson, TimetableSubject,
+} from '@/app/stundenplan/types'
+import { useConstraintCrud, ConstraintShell, useShellStyles } from './_shell'
+
+function useSubjects() {
+  const [subjects, setSubjects] = useState<TimetableSubject[]>([])
+  useEffect(() => { subjectsApi.list().then(setSubjects).catch(() => setSubjects([])) }, [])
+  return subjects
+}
+
+function sLabel(subjects: TimetableSubject[], id: string): string {
+  const s = subjects.find(x => x.id === id)
+  return s ? `${s.name} (${s.short_code})` : id.slice(0, 8) + '…'
+}
+
+// ---------- Min Day Gap ----------
+
+type GapForm = Omit<SubjectMinDayGap, 'id' | 'created_by_user_id' | 'created_at'>
+const initialGap: GapForm = { subject_id: '', min_gap_days: 1, is_hard: false, weight: 70, active: true, note: '' }
+
+export function SubjectMinDayGapEditor() {
+  const styles = useShellStyles()
+  const subjects = useSubjects()
+  const crud = useConstraintCrud<SubjectMinDayGap, GapForm>(subjectMinDayGapApi, initialGap)
+
+  return (
+    <ConstraintShell
+      testId="subject-min-day-gap-editor"
+      title="Fach: Min. Tagesabstand"
+      description="Beispiel: „Mathe nicht an 2 Tagen direkt hintereinander"."
+      newLabel="+ Neue Regel"
+      newDisabled={subjects.length === 0}
+      prereqWarning={subjects.length === 0 ? 'Zuerst Faecher anlegen.' : null}
+      emptyText="Keine Regeln vorhanden."
+      tableHeaders={['Fach', 'Mindestabstand (Tage)', 'Hart', 'Weight']}
+      state={crud}
+      formBody={
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
+          <div>
+            <label className="block text-sm mb-1 opacity-70">Fach</label>
+            <select required value={crud.form.subject_id} onChange={e => crud.setForm({ ...crud.form, subject_id: e.target.value })} className={`w-full px-3 py-2 rounded-lg border ${styles.inputClass}`}>
+              <option value="">— bitte waehlen —</option>
+              {subjects.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm mb-1 opacity-70">Min. Tage (1-4)</label>
+            <input type="number" min={1} max={4} required value={crud.form.min_gap_days} onChange={e => crud.setForm({ ...crud.form, min_gap_days: parseInt(e.target.value) || 1 })} className={`w-full px-3 py-2 rounded-lg border ${styles.inputClass}`} />
+          </div>
+          <div>
+            <label className="block text-sm mb-1 opacity-70">Weight (0-100)</label>
+            <input type="number" min={0} max={100} value={crud.form.weight} onChange={e => crud.setForm({ ...crud.form, weight: parseInt(e.target.value) || 0 })} className={`w-full px-3 py-2 rounded-lg border ${styles.inputClass}`} />
+          </div>
+          <div className="flex items-center gap-2">
+            <input type="checkbox" id="is_hard_mdg" checked={crud.form.is_hard} onChange={e => crud.setForm({ ...crud.form, is_hard: e.target.checked })} className="w-5 h-5" />
+            <label htmlFor="is_hard_mdg" className="text-sm">Harte Regel</label>
+          </div>
+          <div className="md:col-span-4 flex items-end">
+            <button type="submit" disabled={crud.submitting} className={styles.submitBtn}>{crud.submitting ? 'Speichert...' : 'Anlegen'}</button>
+          </div>
+        </div>
+      }
+      renderRow={(item) => {
+        const c = item as SubjectMinDayGap
+        return (
+          <tr key={c.id} className={styles.rowClass}>
+            <td className="px-4 py-3 font-medium">{sLabel(subjects, c.subject_id)}</td>
+            <td className="px-4 py-3">{c.min_gap_days}</td>
+            <td className="px-4 py-3">{c.is_hard ? '✓' : '—'}</td>
+            <td className="px-4 py-3">{c.weight}</td>
+            <td className="px-4 py-3 text-right"><button onClick={() => crud.remove(c.id)} className={styles.deleteBtn}>Loeschen</button></td>
+          </tr>
+        )
+      }}
+    />
+  )
+}
+
+// ---------- Contiguous When Repeated ----------
+
+type ContForm = Omit<SubjectContiguousWhenRepeated, 'id' | 'created_by_user_id' | 'created_at'>
+const initialCont: ContForm = { subject_id: '', is_hard: true, weight: 100, active: true, note: '' }
+
+export function SubjectContiguousWhenRepeatedEditor() {
+  const styles = useShellStyles()
+  const subjects = useSubjects()
+  const crud = useConstraintCrud<SubjectContiguousWhenRepeated, ContForm>(subjectContiguousWhenRepeatedApi, initialCont)
+
+  return (
+    <ConstraintShell
+      testId="subject-contiguous-when-repeated-editor"
+      title="Fach: Wenn mehrfach pro Tag, dann zusammenhaengend"
+      description="Beispiel: Mathe Stunde 1+2 ja, aber 1+3 mit Sachkunde dazwischen verboten."
+      newLabel="+ Neue Regel"
+      newDisabled={subjects.length === 0}
+      prereqWarning={subjects.length === 0 ? 'Zuerst Faecher anlegen.' : null}
+      emptyText="Keine Regeln vorhanden."
+      tableHeaders={['Fach', 'Hart', 'Weight']}
+      state={crud}
+      formBody={
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
+          <div>
+            <label className="block text-sm mb-1 opacity-70">Fach</label>
+            <select required value={crud.form.subject_id} onChange={e => crud.setForm({ ...crud.form, subject_id: e.target.value })} className={`w-full px-3 py-2 rounded-lg border ${styles.inputClass}`}>
+              <option value="">— bitte waehlen —</option>
+              {subjects.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm mb-1 opacity-70">Weight (0-100)</label>
+            <input type="number" min={0} max={100} value={crud.form.weight} onChange={e => crud.setForm({ ...crud.form, weight: parseInt(e.target.value) || 0 })} className={`w-full px-3 py-2 rounded-lg border ${styles.inputClass}`} />
+          </div>
+          <div className="flex items-center gap-2">
+            <input type="checkbox" id="is_hard_cwr" checked={crud.form.is_hard} onChange={e => crud.setForm({ ...crud.form, is_hard: e.target.checked })} className="w-5 h-5" />
+            <label htmlFor="is_hard_cwr" className="text-sm">Harte Regel</label>
+          </div>
+          <div className="flex items-end">
+            <button type="submit" disabled={crud.submitting} className={styles.submitBtn}>{crud.submitting ? 'Speichert...' : 'Anlegen'}</button>
+          </div>
+        </div>
+      }
+      renderRow={(item) => {
+        const c = item as SubjectContiguousWhenRepeated
+        return (
+          <tr key={c.id} className={styles.rowClass}>
+            <td className="px-4 py-3 font-medium">{sLabel(subjects, c.subject_id)}</td>
+            <td className="px-4 py-3">{c.is_hard ? '✓' : '—'}</td>
+            <td className="px-4 py-3">{c.weight}</td>
+            <td className="px-4 py-3 text-right"><button onClick={() => crud.remove(c.id)} className={styles.deleteBtn}>Loeschen</button></td>
+          </tr>
+        )
+      }}
+    />
+  )
+}
+
+// ---------- Double Lesson ----------
+
+type DoubleForm = Omit<SubjectDoubleLesson, 'id' | 'created_by_user_id' | 'created_at'>
+const initialDouble: DoubleForm = { subject_id: '', is_hard: false, weight: 60, active: true, note: '' }
+
+export function SubjectDoubleLessonEditor() {
+  const styles = useShellStyles()
+  const subjects = useSubjects()
+  const crud = useConstraintCrud<SubjectDoubleLesson, DoubleForm>(subjectDoubleLessonApi, initialDouble)
+
+  return (
+    <ConstraintShell
+      testId="subject-double-lesson-editor"
+      title="Fach: Doppelstunde bevorzugt"
+      description="Soft-Regel: Sport oder Chemie laufen oft besser als 90-Min-Block statt zwei Einzelstunden."
+      newLabel="+ Neue Regel"
+      newDisabled={subjects.length === 0}
+      prereqWarning={subjects.length === 0 ? 'Zuerst Faecher anlegen.' : null}
+      emptyText="Keine Regeln vorhanden."
+      tableHeaders={['Fach', 'Hart', 'Weight']}
+      state={crud}
+      formBody={
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
+          <div>
+            <label className="block text-sm mb-1 opacity-70">Fach</label>
+            <select required value={crud.form.subject_id} onChange={e => crud.setForm({ ...crud.form, subject_id: e.target.value })} className={`w-full px-3 py-2 rounded-lg border ${styles.inputClass}`}>
+              <option value="">— bitte waehlen —</option>
+              {subjects.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm mb-1 opacity-70">Weight (0-100)</label>
+            <input type="number" min={0} max={100} value={crud.form.weight} onChange={e => crud.setForm({ ...crud.form, weight: parseInt(e.target.value) || 0 })} className={`w-full px-3 py-2 rounded-lg border ${styles.inputClass}`} />
+          </div>
+          <div className="flex items-center gap-2">
+            <input type="checkbox" id="is_hard_dl" checked={crud.form.is_hard} onChange={e => crud.setForm({ ...crud.form, is_hard: e.target.checked })} className="w-5 h-5" />
+            <label htmlFor="is_hard_dl" className="text-sm">Harte Regel</label>
+          </div>
+          <div className="flex items-end">
+            <button type="submit" disabled={crud.submitting} className={styles.submitBtn}>{crud.submitting ? 'Speichert...' : 'Anlegen'}</button>
+          </div>
+        </div>
+      }
+      renderRow={(item) => {
+        const c = item as SubjectDoubleLesson
+        return (
+          <tr key={c.id} className={styles.rowClass}>
+            <td className="px-4 py-3 font-medium">{sLabel(subjects, c.subject_id)}</td>
+            <td className="px-4 py-3">{c.is_hard ? '✓' : '—'}</td>
+            <td className="px-4 py-3">{c.weight}</td>
+            <td className="px-4 py-3 text-right"><button onClick={() => crud.remove(c.id)} className={styles.deleteBtn}>Loeschen</button></td>
+          </tr>
+        )
+      }}
+    />
+  )
+}