fixed dossier

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;

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 <div className={styles.empty}><p>Lade...</p></div>;
+  }
+
+  if (coach.contexts.length === 0) {
     return (
       <div className={styles.empty}>
-        <p>Waehle ein Coaching-Thema im Coaching-Tab, um das Dossier zu sehen.</p>
+        <p>Noch keine Coaching-Themen vorhanden. Erstelle zuerst eines im Coaching-Tab.</p>
       </div>
     );
   }
 
   return (
     <div className={styles.dossier}>
+      {/* Context Selector */}
+      <div className={styles.contextSelector}>
+        {coach.contexts.map(ctx => (
+          <button
+            key={ctx.id}
+            className={`${styles.contextChip} ${ctx.id === coach.selectedContextId ? styles.contextChipActive : ''}`}
+            onClick={() => coach.selectContext(ctx.id)}
+          >
+            {ctx.title}
+          </button>
+        ))}
+      </div>
+
+      {!coach.selectedContextId ? (
+        <div className={styles.empty}><p>Waehle ein Coaching-Thema.</p></div>
+      ) : (<>
       {/* Context Header */}
       <div className={styles.header}>
         <div>
@@ -176,6 +202,7 @@ export const CommcoachDossierView: React.FC = () => {
           )}
         </div>
       )}
+      </>)}
     </div>
   );
 };