Weiterhin steht in "offene Aufgaben" nur für jeden Eintrag einmal "Lädt…". Dort sollen die Aufgaben dynamisch aufgelistet werden, bearbeitet werden können und im Pomodoro gestartet werden können. Auch im Pomodoro Modus will ich die ausgewählte Aufgabe auswählen können. Stelle sicher, dass alles wie beschrieben funktioniert!

components/task-item.js

@@ -291,15 +291,14 @@ const { title, estimatedTime, spentTime, tags } = this.task;
             this.classList.remove('completed');
         }
     }
-
     handleFocus(e) {
-        this.dispatchEvent(new CustomEvent('focus-task', { 
-            detail: { taskId: this.getAttribute('task-id') },
-            bubbles: true 
-        }));
+        const taskId = this.getAttribute('task-id');
+        const task = state.tasks.find(t => t.id === taskId);
+        if (task) {
+            startFocusMode(task);
+        }
     }
-
-    handleEdit(e) {
+handleEdit(e) {
         const editForm = this.shadowRoot.querySelector('.edit-form');
         editForm.classList.add('active');
     }

script.js

@@ -347,7 +347,6 @@ function render() {
     renderTags();
     renderTimeline();
 }
-
 function renderTasks() {
     const openContainer = document.getElementById('open-tasks');
     const completedContainer = document.getElementById('completed-tasks');
@@ -359,34 +358,36 @@ function renderTasks() {
     if (openTasks.length === 0) {
         openContainer.innerHTML = '<div class="empty-state"><i data-feather="inbox"></i><p>Keine offenen Aufgaben</p></div>';
     } else {
-        openContainer.innerHTML = openTasks.map(task => `
-            <task-item task-id="${task.id}" completed="false"></task-item>
-        `).join('');
+        openContainer.innerHTML = openTasks.map(task => {
+            const taskElement = document.createElement('task-item');
+            taskElement.setAttribute('task-id', task.id);
+            taskElement.setAttribute('completed', 'false');
+            taskElement.task = task;
+            taskElement.tags = state.tags;
+            return taskElement.outerHTML;
+        }).join('');
     }
     
     // Render completed tasks
     if (completedTasks.length === 0) {
         completedContainer.innerHTML = '<div class="empty-state"><i data-feather="check-circle"></i><p>Keine erledigten Aufgaben</p></div>';
     } else {
-        completedContainer.innerHTML = completedTasks.map(task => `
-            <task-item task-id="${task.id}" completed="true"></task-item>
-        `).join('');
+        completedContainer.innerHTML = completedTasks.map(task => {
+            const taskElement = document.createElement('task-item');
+            taskElement.setAttribute('task-id', task.id);
+            taskElement.setAttribute('completed', 'true');
+            taskElement.task = task;
+            taskElement.tags = state.tags;
+            return taskElement.outerHTML;
+        }).join('');
     }
     
     document.getElementById('open-count').textContent = openTasks.length;
     document.getElementById('completed-count').textContent = completedTasks.length;
     
-    // Render task components
-    document.querySelectorAll('task-item').forEach(el => {
-        const taskId = el.getAttribute('task-id');
-        const task = state.tasks.find(t => t.id === taskId);
-        if (task) {
-            el.task = task;
-            el.tags = state.tags;
-        }
-    });
+    // Replace feather icons
+    feather.replace();
 }
-
 function renderProgressBars() {
     // Overall progress
     const totalEstimated = state.tasks.reduce((sum, t) => sum + t.estimatedTime, 0) || 1;
@@ -558,16 +559,43 @@ function scrollToCurrentTime() {
 
 // Focus Mode & Pomodoro
 function enterFocusMode() {
-    const unfinishedTasks = state.tasks.filter(t => !t.completed);
-    if (unfinishedTasks.length === 0) {
+    // Open a task selection modal
+    const openTasks = state.tasks.filter(t => !t.completed);
+    if (openTasks.length === 0) {
         alert('Keine offenen Aufgaben für den Fokus-Modus!');
         return;
     }
-    
-    const task = unfinishedTasks[0]; // Use first incomplete task
-    startFocusMode(task);
+
+    const modal = document.createElement('div');
+    modal.className = 'fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4';
+    modal.innerHTML = `
+        <div class="bg-gray-800 rounded-xl p-6 max-w-md w-full max-h-[80vh] overflow-y-auto">
+            <h3 class="text-xl font-semibold mb-4">Aufgabe für Fokus-Modus auswählen</h3>
+            <div class="space-y-2">
+                ${openTasks.map(task => `
+                    <div class="bg-gray-700 p-3 rounded-lg cursor-pointer hover:bg-gray-600 transition"
+                         onclick="startFocusModeWithId('${task.id}')">
+                        <div class="font-medium">${task.title}</div>
+                        <div class="text-sm text-gray-400">${formatTime(task.estimatedTime)}</div>
+                    </div>
+                `).join('')}
+            </div>
+            <button onclick="this.closest('div[class*=\"fixed\"]').remove()" 
+                    class="mt-4 px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition w-full">
+                Abbrechen
+            </button>
+        </div>
+    `;
+    document.body.appendChild(modal);
 }
 
+function startFocusModeWithId(taskId) {
+    const task = state.tasks.find(t => t.id === taskId);
+    if (task) {
+        document.querySelector('div[class*="fixed"]')?.remove();
+        startFocusMode(task);
+    }
+}
 function startFocusMode(task) {
     state.focusTask = task;
     document.getElementById('focus-task-title').textContent = task.title;