diff --git a/frontend/src/components/ExerciseAiQuickCreateOffer.jsx b/frontend/src/components/ExerciseAiQuickCreateOffer.jsx index 206d6b4..e55112b 100644 --- a/frontend/src/components/ExerciseAiQuickCreateOffer.jsx +++ b/frontend/src/components/ExerciseAiQuickCreateOffer.jsx @@ -3,6 +3,39 @@ import React from 'react' /** * Inline-Angebot: aus Suchstring neue Übung per KI anlegen (Fokusbereich + optional Titel/Skizze). */ +/** Kompakter Einstieg unter Trefferliste — expandiert zum vollen Formular. */ +export function ExerciseAiQuickCreateTeaser({ onExpand, disabled = false }) { + return ( +
+
+ + Nichts Richtiges dabei?{' '} + Neue Übung mit KI anlegen und direkt übernehmen. + + +
+
+ ) +} + export default function ExerciseAiQuickCreateOffer({ searchLabel, title, @@ -19,6 +52,7 @@ export default function ExerciseAiQuickCreateOffer({ showSketchField = true, sketchOptional = true, hint, + headline, }) { const canRun = !busy && @@ -37,7 +71,7 @@ export default function ExerciseAiQuickCreateOffer({ }} > - Keine passende Übung gefunden + {headline || 'Keine passende Übung gefunden'}

{hint || diff --git a/frontend/src/components/ExercisePickerModal.jsx b/frontend/src/components/ExercisePickerModal.jsx index 70736ae..6269d0a 100644 --- a/frontend/src/components/ExercisePickerModal.jsx +++ b/frontend/src/components/ExercisePickerModal.jsx @@ -18,7 +18,7 @@ import SkillTreeMultiSelect from './SkillTreeMultiSelect' import ExerciseFocusRulePicker from './ExerciseFocusRulePicker' import CatalogRulePicker from './CatalogRulePicker' import ExerciseAiSuggestPreviewModal from './ExerciseAiSuggestPreviewModal' -import ExerciseAiQuickCreateOffer from './ExerciseAiQuickCreateOffer' +import ExerciseAiQuickCreateOffer, { ExerciseAiQuickCreateTeaser } from './ExerciseAiQuickCreateOffer' import { useExerciseAiQuickCreateFields } from '../hooks/useExerciseAiQuickCreateFields' import { buildQuickCreateAiPreview, @@ -79,6 +79,7 @@ export default function ExercisePickerModal({ const [quickSaving, setQuickSaving] = useState(false) const [quickAiError, setQuickAiError] = useState('') const [quickCreateDraft, setQuickCreateDraft] = useState(null) + const [quickCreateExpanded, setQuickCreateExpanded] = useState(false) const [planningContextSummary, setPlanningContextSummary] = useState(null) const [planningTargetProfileSummary, setPlanningTargetProfileSummary] = useState(null) const [planningLlmRankApplied, setPlanningLlmRankApplied] = useState(false) @@ -154,6 +155,7 @@ export default function ExercisePickerModal({ : (searchInput || aiSearchInput).trim() setPlanningSubmittedQuery(q) setPlanningHasSearched(true) + setQuickCreateExpanded(false) setList([]) setPlanningSearchTick((t) => t + 1) }, [searchInput, aiSearchInput]) @@ -174,6 +176,10 @@ export default function ExercisePickerModal({ ) } + useEffect(() => { + if (!usePlanningSearch) setQuickCreateExpanded(false) + }, [effectivePickerQuery, usePlanningSearch]) + useEffect(() => { const t = setTimeout(() => setDebouncedSearch(searchInput.trim()), 350) return () => clearTimeout(t) @@ -184,13 +190,45 @@ export default function ExercisePickerModal({ return () => clearTimeout(t) }, [aiSearchInput]) - const showQuickCreateOffer = + const canOfferQuickCreate = enableQuickCreateDraft && catalogsReady && !loading && - list.length === 0 && - planningHasSearched && - (usePlanningSearch ? true : effectivePickerQuery.length >= 3) + (usePlanningSearch ? planningHasSearched : effectivePickerQuery.length >= 3) + + const showQuickCreateFull = canOfferQuickCreate && (list.length === 0 || quickCreateExpanded) + const showQuickCreateTeaser = canOfferQuickCreate && list.length > 0 && !quickCreateExpanded + + const quickCreateHeadline = usePlanningSearch + ? 'Nichts Richtiges dabei?' + : list.length > 0 + ? 'Neue Übung anlegen' + : undefined + + const quickCreateHint = usePlanningSearch + ? effectivePickerQuery + ? `Aus Planungsanfrage „${effectivePickerQuery}“ oder eigener Idee — KI schlägt Texte vor, danach bearbeiten und übernehmen.` + : 'Aus Planungskontext oder eigener Idee — KI schlägt Texte vor, danach bearbeiten und übernehmen.' + : undefined + + const renderQuickCreateOffer = () => ( + + ) useEffect(() => { if (!open) return @@ -239,6 +277,7 @@ export default function ExercisePickerModal({ setQuickSaving(false) setQuickAiError('') setQuickCreateDraft(null) + setQuickCreateExpanded(false) setPlanningContextSummary(null) setPlanningTargetProfileSummary(null) setPlanningLlmRankApplied(false) @@ -1060,21 +1099,8 @@ export default function ExercisePickerModal({

) : list.length === 0 ? ( - showQuickCreateOffer ? ( - + showQuickCreateFull ? ( + renderQuickCreateOffer() ) : (

{usePlanningSearch @@ -1223,6 +1249,15 @@ export default function ExercisePickerModal({ )} + {showQuickCreateTeaser ? ( + setQuickCreateExpanded(true)} + /> + ) : null} + {showQuickCreateFull && quickCreateExpanded ? ( +

{renderQuickCreateOffer()}
+ ) : null} {multiSelect && typeof onSelectExercises === 'function' ? (