Jetzt funktioniert kein einziger Knopf mehr, egal, wo ich drauf drücke, es passiert nichts

components/task-item.js

@@ -270,7 +270,6 @@ class TaskItem extends HTMLElement {
             icon.outerHTML = feather.icons[iconName].toSvg({ width: 16, height: 16 });
         });
     }
-
     setupEventListeners() {
         this.shadowRoot.addEventListener('click', (e) => {
             const target = e.target.closest('button');
@@ -291,9 +290,23 @@ class TaskItem extends HTMLElement {
                 this.handleToggleComplete(e);
             }
         });
-    }
 
-    handleToggleComplete(e) {
+        // Direct event listeners for buttons
+        const focusBtn = this.shadowRoot.querySelector('.focus-btn');
+        const editBtn = this.shadowRoot.querySelector('.task-action[title="Bearbeiten"]');
+        const deleteBtn = this.shadowRoot.querySelector('.task-action[title="Löschen"]');
+        
+        if (focusBtn) {
+            focusBtn.addEventListener('click', (e) => this.handleFocus(e));
+        }
+        if (editBtn) {
+            editBtn.addEventListener('click', (e) => this.handleEdit(e));
+        }
+        if (deleteBtn) {
+            deleteBtn.addEventListener('click', (e) => this.handleDelete(e));
+        }
+    }
+handleToggleComplete(e) {
         const completed = e.target.checked;
         this.dispatchEvent(new CustomEvent('toggle-complete', { 
             detail: { taskId: this.getAttribute('task-id'), completed },

index.html

@@ -16,14 +16,14 @@
             <div class="flex items-center justify-between">
                 <h1 class="text-2xl font-bold text-orange-500">TaskForge Pro</h1>
                 <nav class="flex items-center space-x-4">
-                    <button id="view-home" class="nav-btn active" data-view="home">
+                    <a href="#" id="view-home" class="nav-btn active" data-view="home">
                         <i data-feather="home"></i> Übersicht
-                </button>
-                    <button id="view-settings" class="nav-btn" data-view="settings">
+                </a>
+                    <a href="#" id="view-settings" class="nav-btn" data-view="settings">
                         <i data-feather="settings"></i> Einstellungen
-                </button>
+                </a>
                 </nav>
-            </div>
+</div>
         </div>
     </header>
 <!-- Main Content -->

script.js

@@ -82,22 +82,20 @@ function updateCurrentTime() {
     document.getElementById('current-time').textContent = timeString;
 }
 function setupEventListeners() {
-    // Navigation
+// Navigation
     document.querySelectorAll('.nav-btn').forEach(btn => {
         btn.addEventListener('click', (e) => {
+            e.preventDefault();
             const view = e.currentTarget.dataset.view;
             switchView(view);
         });
     });
-
-    // FAB buttons
+// FAB buttons
     document.getElementById('add-task-fab').addEventListener('click', openAddTaskModal);
     document.getElementById('focus-fab').addEventListener('click', enterFocusMode);
-
     // Add task modal
     document.getElementById('add-task-form').addEventListener('submit', handleAddTask);
     document.getElementById('cancel-task').addEventListener('click', closeAddTaskModal);
-
     // Settings
     document.getElementById('import-btn').addEventListener('click', handleImport);
     document.getElementById('export-btn').addEventListener('click', handleExport);
@@ -105,13 +103,11 @@ function setupEventListeners() {
     
     document.getElementById('pomodoro-work').addEventListener('change', savePomodoroSettings);
     document.getElementById('pomodoro-break').addEventListener('change', savePomodoroSettings);
-
     // Focus mode
     document.getElementById('focus-pause').addEventListener('click', pausePomodoro);
     document.getElementById('focus-play').addEventListener('click', resumePomodoro);
     document.getElementById('focus-stop').addEventListener('click', stopPomodoro);
-
-    // Event delegation for task item events
+// Event delegation for task item events
     document.addEventListener('delete-task', (e) => {
         deleteTask(e.detail.taskId);
     });
@@ -127,8 +123,7 @@ function setupEventListeners() {
     document.addEventListener('add-time', (e) => {
         addTimeToTask(e.detail.taskId, e.detail.minutes);
     });
-
-    // Timeline sidebar events
+// Timeline sidebar events
     const timelineSidebar = document.getElementById('timeline-sidebar');
     if (timelineSidebar) {
         timelineSidebar.addEventListener('task-dropped', (e) => {
@@ -394,12 +389,14 @@ function renderTasks() {
     
     document.getElementById('open-count').textContent = openTasks.length;
     document.getElementById('completed-count').textContent = completedTasks.length;
-    
     // Setup drag and drop for task items
     setupTaskDragAndDrop();
     
     // Replace feather icons
     feather.replace();
+    
+    // Re-attach event listeners to task items after render
+    reattachTaskEventListeners();
 }
 function renderProgressBars() {
     // Overall progress
@@ -729,7 +726,6 @@ function addTimeToTask(taskId, minutes) {
         render();
     }
 }
-
 function setupTaskDragAndDrop() {
     const openContainer = document.getElementById('open-tasks');
     const completedContainer = document.getElementById('completed-tasks');
@@ -752,6 +748,22 @@ function setupTaskDragAndDrop() {
     });
 }
 
+function reattachTaskEventListeners() {
+    document.querySelectorAll('task-item').forEach(taskEl => {
+        // Remove existing listeners and re-add
+        const taskId = taskEl.getAttribute('task-id');
+        
+        // Add event listeners for checkbox toggle
+        const checkbox = taskEl.shadowRoot?.querySelector('.task-checkbox');
+        if (checkbox) {
+            checkbox.addEventListener('change', (e) => {
+                const completed = e.target.checked;
+                toggleTaskComplete(taskId, completed);
+            });
+            
+        }
+    });
+}
 function getDragAfterElement(container, y) {
     const draggableElements = [...container.querySelectorAll('task-item:not(.dragging)'));