Ich sehe die offenen Aufgaben immernoch nicht, obwohl sie vorhanden sind.

So sieht es aus:

```html
<div class="bg-gray-800 rounded-xl shadow-lg">
<div class="p-4 border-b border-gray-700">
<h3 class="text-lg font-semibold flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle text-orange-500 mr-2"><circle cx="12" cy="12" r="10"></circle></svg>
Offene Aufgaben (<span id="open-count">3</span>)
</h3>
</div>
<div id="open-tasks" class="p-4 space-y-3 max-h-96 overflow-y-auto"><task-item task-id="1764499641261" completed="false"></task-item><task-item task-id="1764499848322" completed="false"></task-item><task-item task-id="1764500031386" completed="false"></task-item></div>
</div>
```

In der Konsole steht (manches kommt von Extensions):

```sh
cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation cdn.tailwindcss.com:64:1711
feather: 'focus' is not a valid icon 2 feather-icons:12:5197
Content script loaded, initializing... content.js:1719:13
Eine Notification-Anfrage kann nur aus einem kurz laufenden Benutzer-generierten Ereignis-Handler aufgerufen werden. index.html
Error parsing watch history: SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data
loadWatchHistory moz-extension://fbbd56d3-98cc-4e3b-a6f1-5229548dd187/content.js:794
content.js:848:17
Initial watch history loaded. content.js:936:13
Could not extract video UUID from URL content.js:1684:21
SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data content.js:574:73
[PeerTube Companion] Retrieved item "getUrlService-fadikkop-taskforge-pro.static.hf.space" from cache redirection-content-script.f3b7260b.js:1:21789
Source-Map-Fehler: Error: request failed with status 404
Stack in the worker:networkRequest@resource://devtools/client/shared/source-map-loader/utils/network-request.js:43:9

Ressourcen-Adresse: https://unpkg.com/feather-icons
Source-Map-Adresse: feather.min.js.map
Source-Map-Fehler: request failed with status 404
Ressourcen-Adresse: https://unpkg.com/feather-icons
Source-Map-Adresse: feather.min.js.map
Source-Map-Fehler: Error: request failed with status 404
Stack in the worker:networkRequest@resource://devtools/client/shared/source-map-loader/utils/network-request.js:43:9

Ressourcen-Adresse: https://unpkg.com/feather-icons
Source-Map-Adresse: feather.min.js.map
```

Überlege, wie man dafür sorgen kann, dass die offenen Aufgaben geladen angezeigt werden und fixe das!

components/task-item.js

@@ -4,8 +4,10 @@ class TaskItem extends HTMLElement {
         super();
         this.attachShadow({ mode: 'open' });
     }
-
     connectedCallback() {
+        this.taskId = this.getAttribute('task-id');
+        this.completed = this.getAttribute('completed') === 'true';
+        this.loadTaskData();
         this.render();
         this.setupEventListeners();
     }
@@ -14,26 +16,35 @@ class TaskItem extends HTMLElement {
         return ['task-id', 'completed'];
     }
 
-    attributeChangedCallback() {
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'task-id' && oldValue !== newValue) {
+            this.taskId = newValue;
+            this.loadTaskData();
+        } else if (name === 'completed') {
+            this.completed = newValue === 'true';
+        }
         this.render();
     }
 
+    loadTaskData() {
+        if (!window.state || !window.state.tasks) return;
+        
+        this.task = window.state.tasks.find(t => t.id === this.taskId);
+        this.tags = window.state.tags || [];
+    }
+
     render() {
-        const taskId = this.getAttribute('task-id');
-        const completed = this.getAttribute('completed') === 'true';
         if (!this.task) {
-            const taskId = this.getAttribute('task-id');
-            this.shadowRoot.innerHTML = `<div class="loading" data-task-id="${taskId}">Lädt...</div>`;
+            this.shadowRoot.innerHTML = `<div class="loading" data-task-id="${this.taskId}">Lädt...</div>`;
             return;
         }
-const { title, estimatedTime, spentTime, tags } = this.task;
-        const progress = (spentTime / estimatedTime) * 100;
-        const tagElements = tags.map(tagId => {
+        const { title, estimatedTime, spentTime, tags } = this.task;
+        const progress = estimatedTime > 0 ? (spentTime / estimatedTime) * 100 : 0;
+        const tagElements = (tags || []).map(tagId => {
             const tag = this.tags?.find(t => t.id === tagId);
             return tag ? `<span class="tag-badge" style="background-color: ${tag.color}20; color: ${tag.color}">${tag.name}</span>` : '';
         }).join('');
-
-        this.shadowRoot.innerHTML = `
+this.shadowRoot.innerHTML = `
             <style>
                 :host {
                     display: block;
@@ -203,11 +214,10 @@ const { title, estimatedTime, spentTime, tags } = this.task;
                     background: #4b5563;
                 }
             </style>
-            
             <div class="task-header">
-                <input type="checkbox" class="task-checkbox" ${completed ? 'checked' : ''} 
+                <input type="checkbox" class="task-checkbox" ${this.completed ? 'checked' : ''} 
                        @change="${this.handleToggleComplete}">
-                <span class="task-title">${title}</span>
+<span class="task-title">${title}</span>
                 <div class="task-actions">
                     <button class="task-action" @click="${this.handleFocus}" title="Fokus-Modus">
                         <i data-feather="focus"></i>
@@ -247,9 +257,8 @@ const { title, estimatedTime, spentTime, tags } = this.task;
                 </div>
             </div>
         `;
-        
-        if (completed) {
-            this.classList.add('completed');
+        if (this.completed) {
+this.classList.add('completed');
         } else {
             this.classList.remove('completed');
         }

script.js

@@ -1,8 +1,7 @@
 // TaskForge Pro - Main JavaScript
-
 // State management
-const state = {
-    tasks: [],
+window.state = {
+tasks: [],
     tags: [],
     currentView: 'home',
     focusTask: null,
@@ -358,29 +357,27 @@ 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 => {
+        openContainer.innerHTML = '';
+        openTasks.forEach(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('');
-    }
+            openContainer.appendChild(taskElement);
+        });
+}
     
     // 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 => {
+        completedContainer.innerHTML = '';
+        completedTasks.forEach(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('');
-    }
+            completedContainer.appendChild(taskElement);
+        });
+}
     
     document.getElementById('open-count').textContent = openTasks.length;
     document.getElementById('completed-count').textContent = completedTasks.length;