diff --git a/src/pages/views/commcoach/CommcoachDossierView.module.css b/src/pages/views/commcoach/CommcoachDossierView.module.css index 742e1c2..cc79280 100644 --- a/src/pages/views/commcoach/CommcoachDossierView.module.css +++ b/src/pages/views/commcoach/CommcoachDossierView.module.css @@ -3,6 +3,39 @@ max-width: 900px; } +.contextSelector { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-bottom: 1.25rem; +} + +.contextChip { + padding: 0.4rem 0.9rem; + background: var(--bg-card, #fff); + border: 1px solid var(--border-color, #ddd); + border-radius: 20px; + cursor: pointer; + font-size: 0.85rem; + color: var(--text-primary, #333); + transition: all 0.15s; +} + +.contextChip:hover { + border-color: var(--primary-color, #F25843); + color: var(--primary-color, #F25843); +} + +.contextChipActive { + background: var(--primary-color, #F25843); + color: #fff; + border-color: var(--primary-color, #F25843); +} + +.contextChipActive:hover { + color: #fff; +} + .empty { padding: 3rem; text-align: center; diff --git a/src/pages/views/commcoach/CommcoachDossierView.tsx b/src/pages/views/commcoach/CommcoachDossierView.tsx index 785d0b4..df289e3 100644 --- a/src/pages/views/commcoach/CommcoachDossierView.tsx +++ b/src/pages/views/commcoach/CommcoachDossierView.tsx @@ -4,7 +4,7 @@ * Shows context detail: sessions timeline, tasks checklist, scores, insights. */ -import React, { useState, useCallback } from 'react'; +import React, { useState, useCallback, useEffect } from 'react'; import { useCommcoach } from '../../../hooks/useCommcoach'; import ReactMarkdown from 'react-markdown'; import styles from './CommcoachDossierView.module.css'; @@ -14,22 +14,48 @@ export const CommcoachDossierView: React.FC = () => { const [newTaskTitle, setNewTaskTitle] = useState(''); const [activeTab, setActiveTab] = useState<'sessions' | 'tasks' | 'scores'>('tasks'); + useEffect(() => { + if (!coach.selectedContextId && coach.contexts.length > 0) { + coach.selectContext(coach.contexts[0].id); + } + }, [coach.contexts, coach.selectedContextId, coach.selectContext]); + const handleAddTask = useCallback(async () => { if (!newTaskTitle.trim()) return; await coach.addTask(newTaskTitle); setNewTaskTitle(''); }, [newTaskTitle, coach]); - if (!coach.selectedContextId) { + if (coach.loadingContexts) { + return
Lade...
Waehle ein Coaching-Thema im Coaching-Tab, um das Dossier zu sehen.
+Noch keine Coaching-Themen vorhanden. Erstelle zuerst eines im Coaching-Tab.
Waehle ein Coaching-Thema.