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

@@ -122,6 +122,7 @@ export default function SkillTreeMultiSelect({
               searchQuery={query}
               onPickSkill={(id) => addId(id)}
               pickMode="multi"
+              defaultCollapsed
             />
           ) : (
             <ul className="multiselect-combo__list" role="listbox">

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) => {

frontend/src/components/SkillTreeSelect.jsx

@@ -75,6 +75,7 @@ export default function SkillTreeSelect({
               searchQuery={query}
               onPickSkill={pick}
               pickMode="single"
+              defaultCollapsed={false}
             />
           </div>
         </div>

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 {