From 46feb4c867483c222733176711b31a3c9d2fd7f1 Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Wed, 20 May 2026 11:05:27 +0200
Subject: [PATCH] Add defaultCollapsed prop to SkillTree components for
 improved user experience

- Introduced a `defaultCollapsed` prop in `SkillTreeMultiSelect` and `SkillTreePickerPanel` to control the initial expansion state of skill trees.
- Updated `SkillTreeSelect` to accept a `defaultCollapsed` prop, enhancing flexibility in component usage.
- Adjusted state management in `SkillTreePickerPanel` to respect the `defaultCollapsed` setting, improving user interaction with skill selection.
---
 frontend/src/components/SkillTreeMultiSelect.jsx     |  1 +
 frontend/src/components/SkillTreePickerPanel.jsx     | 12 +++++++++---
 frontend/src/components/SkillTreeSelect.jsx          |  1 +
 .../components/exercises/ExerciseFormPageRoot.jsx    |  1 +
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/SkillTreeMultiSelect.jsx b/frontend/src/components/SkillTreeMultiSelect.jsx
index 98dc4c0..d6d6358 100644
--- a/frontend/src/components/SkillTreeMultiSelect.jsx
+++ b/frontend/src/components/SkillTreeMultiSelect.jsx
@@ -122,6 +122,7 @@ export default function SkillTreeMultiSelect({
               searchQuery={query}
               onPickSkill={(id) => addId(id)}
               pickMode="multi"
+              defaultCollapsed
             />
           ) : (
             <ul className="multiselect-combo__list" role="listbox">
diff --git a/frontend/src/components/SkillTreePickerPanel.jsx b/frontend/src/components/SkillTreePickerPanel.jsx
index b1b0b8d..3b55257 100644
--- a/frontend/src/components/SkillTreePickerPanel.jsx
+++ b/frontend/src/components/SkillTreePickerPanel.jsx
@@ -84,6 +84,8 @@ export default function SkillTreePickerPanel({
   onPickSkill,
   pickMode = 'single',
   className = '',
+  /** true: nur Hauptgruppen sichtbar, bis der Nutzer aufklappt (Filter) */
+  defaultCollapsed = true,
 }) {
   const exclude = useMemo(() => normExclude(excludeIds), [excludeIds])
   const fullTree = useMemo(() => buildSkillCatalogTree(skills), [skills])
@@ -96,12 +98,16 @@ export default function SkillTreePickerPanel({
   useEffect(() => {
     if (searchQuery.trim()) {
       setExpanded(new Set(allExpandableKeys(displayTree)))
+    } else if (defaultCollapsed) {
+      setExpanded(new Set())
     }
-  }, [searchQuery, displayTree])
+  }, [searchQuery, displayTree, defaultCollapsed])
 
   useEffect(() => {
-    setExpanded(new Set(allExpandableKeys(fullTree)))
-  }, [fullTree])
+    if (!defaultCollapsed) {
+      setExpanded(new Set(allExpandableKeys(fullTree)))
+    }
+  }, [fullTree, defaultCollapsed])
 
   const onToggle = useCallback((key) => {
     setExpanded((prev) => {
diff --git a/frontend/src/components/SkillTreeSelect.jsx b/frontend/src/components/SkillTreeSelect.jsx
index 9ef6d1c..728e93b 100644
--- a/frontend/src/components/SkillTreeSelect.jsx
+++ b/frontend/src/components/SkillTreeSelect.jsx
@@ -75,6 +75,7 @@ export default function SkillTreeSelect({
               searchQuery={query}
               onPickSkill={pick}
               pickMode="single"
+              defaultCollapsed={false}
             />
           </div>
         </div>
diff --git a/frontend/src/components/exercises/ExerciseFormPageRoot.jsx b/frontend/src/components/exercises/ExerciseFormPageRoot.jsx
index 11d384d..301b79a 100644
--- a/frontend/src/components/exercises/ExerciseFormPageRoot.jsx
+++ b/frontend/src/components/exercises/ExerciseFormPageRoot.jsx
@@ -16,6 +16,7 @@ import {
 import { autoScrollForDragNearEdges } from '../../utils/dragAutoScroll'
 import SkillTreeSelect from '../SkillTreeSelect'
 import { skillCatalogPathLabel } from '../../utils/skillCatalogTree'
+import { SKILL_LEVEL_OPTIONS, normalizeSkillLevelSlug } from '../../constants/skillLevels'
 import { useAuth } from '../../context/AuthContext'
 import { useToast } from '../../context/ToastContext'
 import {