From 862e48736ba71212e2fb1a23bfdad24db95c0f7f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 15 Jun 2026 16:19:08 +0000
Subject: [PATCH] feat(ux): Modul-Zuordnung immer sichtbar

Das Modul-Zuordnung-Dropdown wird jetzt im Element-Property-Editor und im
Seiten-Dialog immer angezeigt - vorher nur, wenn der Flow bereits Module
deklarierte oder das Element/die Seite getaggt war. Ohne Module erscheint ein
Hinweis, wie man ueber Module welche anlegt, statt die Funktion zu verstecken.
---
 plans/ux-overhaul.md                          |  2 +-
 .../HybridEditor/EnhancedPropertyEditor.tsx   | 60 +++++++++----------
 .../PageNavigator/EditPageDialog.tsx          | 56 ++++++++---------
 3 files changed, 59 insertions(+), 59 deletions(-)

diff --git a/plans/ux-overhaul.md b/plans/ux-overhaul.md
index ebc8fbc..9f36791 100644
--- a/plans/ux-overhaul.md
+++ b/plans/ux-overhaul.md
@@ -49,7 +49,7 @@ Editor-Factory-Muster, `AccordionSection`, `TabbedTranslatableFields`, `ElementP
 - [~] **Element-Picker: Suche + Beschreibungen** *(PR Phase 3)*: Befund — die `ElementPalette.tsx`-Komponente ist **tot** (in `App.tsx` auskommentiert, nicht gerendert). Der real genutzte Picker ist der `ElementTypeDialog` in `ElementContextView`. Dort ergänzt: Suchfeld (filtert Label/Typ/Beschreibung über beide Kategorien) + sichtbare **Beschreibung je Typ** (statt nur Hover-Tooltip → besser auffindbar/Touch). Offen: tote `ElementPalette` aufräumen/entfernen.
 - [~] **Verschachtelungsregeln vorab** *(PR Phase 3)*: Regeln in `utils/nestingRules.ts` extrahiert (Single Source of Truth, Unit-Test) und im Element-Typ-Dialog angewandt — unerlaubte Typen werden **deaktiviert + mit Grund** angezeigt, statt erst nach der Auswahl einen Fehler zu werfen (Fallback in App.tsx bleibt). Offen: ausgefeiltere Drop-Indikatoren beim Reorder-Drag (heute simple Top-Border).
 - [ ] Multi-Select-Affordance (sichtbarer Toggle/Checkboxen).
-- [ ] Modul-Zuordnung immer sichtbar. *(INLINE/CATALOG- & Modul-Tooltips bereits via PR #8.)*
+- [x] **Modul-Zuordnung immer sichtbar** *(PR)*: Das „Modul-Zuordnung"-Dropdown wird jetzt im Element-Property-Editor (`EnhancedPropertyEditor`) **und** im Seiten-Dialog (`EditPageDialog`) immer angezeigt — vorher nur, wenn der Flow bereits Module deklarierte oder das Element/die Seite getaggt war. Ohne Module: Hinweis „über „Module" anlegen" statt versteckter Funktion. *(INLINE/CATALOG- & Modul-Tooltips bereits via PR #8.)*
 
 ## Phase 4 — Editor-Konsistenz & Wartbarkeit
 - [ ] `useElementUpdate`-Hook (dedupliziert Handler-Boilerplate über ~12 Editoren).
diff --git a/src/components/HybridEditor/EnhancedPropertyEditor.tsx b/src/components/HybridEditor/EnhancedPropertyEditor.tsx
index 9587551..148c6c1 100644
--- a/src/components/HybridEditor/EnhancedPropertyEditor.tsx
+++ b/src/components/HybridEditor/EnhancedPropertyEditor.tsx
@@ -193,38 +193,38 @@ const EnhancedPropertyEditor: React.FC<EnhancedPropertyEditorProps> = ({
             </FormField>
           )}
 
-          {/* Modul-Zuordnung (wenn der Flow Module deklariert oder dieses Element bereits getaggt ist) */}
-          {(modules.length > 0 || (element.element as any).module_id) && (
-            <FormField>
-              <FormControl fullWidth size="small">
-                <InputLabel id="module-id-select-label">Modul-Zuordnung</InputLabel>
-                <Select
-                  labelId="module-id-select-label"
-                  label="Modul-Zuordnung"
-                  value={(element.element as any).module_id || ''}
-                  onChange={(e) => handleModuleIdChange(e.target.value as string)}
-                >
-                  <MenuItem value="">
-                    <em>— Kein Modul —</em>
+          {/* Modul-Zuordnung — immer sichtbar, damit das modulare-Flows-Feature auffindbar ist */}
+          <FormField>
+            <FormControl fullWidth size="small">
+              <InputLabel id="module-id-select-label">Modul-Zuordnung</InputLabel>
+              <Select
+                labelId="module-id-select-label"
+                label="Modul-Zuordnung"
+                value={(element.element as any).module_id || ''}
+                onChange={(e) => handleModuleIdChange(e.target.value as string)}
+              >
+                <MenuItem value="">
+                  <em>— Kein Modul —</em>
+                </MenuItem>
+                {modules.map((module) => (
+                  <MenuItem key={module.id} value={module.id}>
+                    {module.name?.de || module.name?.en || module.id}
                   </MenuItem>
-                  {modules.map((module) => (
-                    <MenuItem key={module.id} value={module.id}>
-                      {module.name?.de || module.name?.en || module.id}
+                ))}
+                {(element.element as any).module_id &&
+                  !modules.some((m) => m.id === (element.element as any).module_id) && (
+                    <MenuItem value={(element.element as any).module_id}>
+                      {`⚠ Unbekannt: ${(element.element as any).module_id}`}
                     </MenuItem>
-                  ))}
-                  {(element.element as any).module_id &&
-                    !modules.some((m) => m.id === (element.element as any).module_id) && (
-                      <MenuItem value={(element.element as any).module_id}>
-                        {`⚠ Unbekannt: ${(element.element as any).module_id}`}
-                      </MenuItem>
-                    )}
-                </Select>
-                <FormHelperText>
-                  Element nur sichtbar, wenn das zugeordnete Modul aktiv ist.
-                </FormHelperText>
-              </FormControl>
-            </FormField>
-          )}
+                  )}
+              </Select>
+              <FormHelperText>
+                {modules.length === 0
+                  ? 'Noch keine Module definiert — über „Module" in der Kopfzeile anlegen.'
+                  : 'Element nur sichtbar, wenn das zugeordnete Modul aktiv ist.'}
+              </FormHelperText>
+            </FormControl>
+          </FormField>
 
           {/* Verwende die EnhancedElementEditorFactory für spezialisierte Editoren */}
           <EnhancedElementEditorFactory element={element} onUpdate={onUpdate} />
diff --git a/src/components/PageNavigator/EditPageDialog.tsx b/src/components/PageNavigator/EditPageDialog.tsx
index 9cdc783..2980942 100644
--- a/src/components/PageNavigator/EditPageDialog.tsx
+++ b/src/components/PageNavigator/EditPageDialog.tsx
@@ -512,35 +512,35 @@ const EditPageDialog: React.FC<EditPageDialogProps> = ({
               </Box>
             </Box>
 
-            {/* Modul-Zuordnung (wenn der Flow Module deklariert oder die Seite bereits getaggt ist) */}
-            {((state.currentFlow?.modules?.length ?? 0) > 0 || moduleId) && (
-              <FormControl fullWidth margin="dense" sx={{ mb: 3 }}>
-                <InputLabel id="page-module-select-label">Modul-Zuordnung</InputLabel>
-                <Select
-                  labelId="page-module-select-label"
-                  id="page-module-select"
-                  value={moduleId}
-                  label="Modul-Zuordnung"
-                  onChange={(e) => setModuleId(e.target.value)}
-                >
-                  <MenuItem value="">
-                    <em>— Kein Modul —</em>
+            {/* Modul-Zuordnung — immer sichtbar, damit das modulare-Flows-Feature auffindbar ist */}
+            <FormControl fullWidth margin="dense" sx={{ mb: 3 }}>
+              <InputLabel id="page-module-select-label">Modul-Zuordnung</InputLabel>
+              <Select
+                labelId="page-module-select-label"
+                id="page-module-select"
+                value={moduleId}
+                label="Modul-Zuordnung"
+                onChange={(e) => setModuleId(e.target.value)}
+              >
+                <MenuItem value="">
+                  <em>— Kein Modul —</em>
+                </MenuItem>
+                {(state.currentFlow?.modules ?? []).map((module) => (
+                  <MenuItem key={module.id} value={module.id}>
+                    {module.name?.de || module.name?.en || module.id}
                   </MenuItem>
-                  {(state.currentFlow?.modules ?? []).map((module) => (
-                    <MenuItem key={module.id} value={module.id}>
-                      {module.name?.de || module.name?.en || module.id}
-                    </MenuItem>
-                  ))}
-                  {moduleId &&
-                    !(state.currentFlow?.modules ?? []).some((m) => m.id === moduleId) && (
-                      <MenuItem value={moduleId}>{`⚠ Unbekannt: ${moduleId}`}</MenuItem>
-                    )}
-                </Select>
-                <FormHelperText>
-                  Seite nur sichtbar, wenn das zugeordnete Modul aktiv ist.
-                </FormHelperText>
-              </FormControl>
-            )}
+                ))}
+                {moduleId &&
+                  !(state.currentFlow?.modules ?? []).some((m) => m.id === moduleId) && (
+                    <MenuItem value={moduleId}>{`⚠ Unbekannt: ${moduleId}`}</MenuItem>
+                  )}
+              </Select>
+              <FormHelperText>
+                {(state.currentFlow?.modules?.length ?? 0) === 0
+                  ? 'Noch keine Module definiert — über „Module" in der Kopfzeile anlegen.'
+                  : 'Seite nur sichtbar, wenn das zugeordnete Modul aktiv ist.'}
+              </FormHelperText>
+            </FormControl>
 
             {/* Icon-Auswahl */}
             <Typography variant="subtitle1" gutterBottom>