Jetzt sieht es so aus

```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 feather-icons:12:5197
Uncaught ReferenceError: taskId is not defined
render https://fadikkop-taskforge-pro.static.hf.space/components/task-item.js:243
attributeChangedCallback https://fadikkop-taskforge-pro.static.hf.space/components/task-item.js:26
renderTasks https://fadikkop-taskforge-pro.static.hf.space/script.js:363
renderTasks https://fadikkop-taskforge-pro.static.hf.space/script.js:361
render https://fadikkop-taskforge-pro.static.hf.space/script.js:344
<anonymous> https://fadikkop-taskforge-pro.static.hf.space/script.js:23
EventListener.handleEvent* https://fadikkop-taskforge-pro.static.hf.space/script.js:19
task-item.js:243:52
Uncaught ReferenceError: taskId is not defined
render https://fadikkop-taskforge-pro.static.hf.space/components/task-item.js:243
attributeChangedCallback https://fadikkop-taskforge-pro.static.hf.space/components/task-item.js:26
renderTasks https://fadikkop-taskforge-pro.static.hf.space/script.js:364
renderTasks https://fadikkop-taskforge-pro.static.hf.space/script.js:361
render https://fadikkop-taskforge-pro.static.hf.space/script.js:344
<anonymous> https://fadikkop-taskforge-pro.static.hf.space/script.js:23
EventListener.handleEvent* https://fadikkop-taskforge-pro.static.hf.space/script.js:19
task-item.js:243:52
Uncaught ReferenceError: taskId is not defined
render https://fadikkop-taskforge-pro.static.hf.space/components/task-item.js:243
connectedCallback https://fadikkop-taskforge-pro.static.hf.space/components/task-item.js:11
renderTasks https://fadikkop-taskforge-pro.static.hf.space/script.js:365
renderTasks https://fadikkop-taskforge-pro.static.hf.space/script.js:361
render https://fadikkop-taskforge-pro.static.hf.space/script.js:344
<anonymous> https://fadikkop-taskforge-pro.static.hf.space/script.js:23
EventListener.handleEvent* https://fadikkop-taskforge-pro.static.hf.space/script.js:19
task-item.js:243:52
Uncaught ReferenceError: taskId is not defined
render https://fadikkop-taskforge-pro.static.hf.space/components/task-item.js:243
attributeChangedCallback https://fadikkop-taskforge-pro.static.hf.space/components/task-item.js:26
renderTasks https://fadikkop-taskforge-pro.static.hf.space/script.js:363
renderTasks https://fadikkop-taskforge-pro.static.hf.space/script.js:361
render https://fadikkop-taskforge-pro.static.hf.space/script.js:344
<anonymous> https://fadikkop-taskforge-pro.static.hf.space/script.js:23
EventListener.handleEvent* https://fadikkop-taskforge-pro.static.hf.space/script.js:19
task-item.js:243:52
Uncaught ReferenceError: taskId is not defined
render https://fadikkop-taskforge-pro.static.hf.space/components/task-item.js:243
attributeChangedCallback https://fadikkop-taskforge-pro.static.hf.space/components/task-item.js:26
renderTasks https://fadikkop-taskforge-pro.static.hf.space/script.js:364
renderTasks https://fadikkop-taskforge-pro.static.hf.space/script.js:361
render https://fadikkop-taskforge-pro.static.hf.space/script.js:344
<anonymous> https://fadikkop-taskforge-pro.static.hf.space/script.js:23
EventListener.handleEvent* https://fadikkop-taskforge-pro.static.hf.space/script.js:19
task-item.js:243:52
Uncaught ReferenceError: taskId is not defined
render https://fadikkop-taskforge-pro.static.hf.space/components/task-item.js:243
connectedCallback https://fadikkop-taskforge-pro.static.hf.space/components/task-item.js:11
renderTasks https://fadikkop-taskforge-pro.static.hf.space/script.js:365
renderTasks https://fadikkop-taskforge-pro.static.hf.space/script.js:361
render https://fadikkop-taskforge-pro.static.hf.space/script.js:344
<anonymous> https://fadikkop-taskforge-pro.static.hf.space/script.js:23
EventListener.handleEvent* https://fadikkop-taskforge-pro.static.hf.space/script.js:19
task-item.js:243:52
Uncaught ReferenceError: taskId is not defined
render https://fadikkop-taskforge-pro.static.hf.space/components/task-item.js:243
attributeChangedCallback https://fadikkop-taskforge-pro.static.hf.space/components/task-item.js:26
renderTasks https://fadikkop-taskforge-pro.static.hf.space/script.js:363
renderTasks https://fadikkop-taskforge-pro.static.hf.space/script.js:361
render https://fadikkop-taskforge-pro.static.hf.space/script.js:344
<anonymous> https://fadikkop-taskforge-pro.static.hf.space/script.js:23
EventListener.handleEvent* https://fadikkop-taskforge-pro.static.hf.space/script.js:19
task-item.js:243:52
Uncaught ReferenceError: taskId is not defined
render https://fadikkop-taskforge-pro.static.hf.space/components/task-item.js:243
attributeChangedCallback https://fadikkop-taskforge-pro.static.hf.space/components/task-item.js:26
renderTasks https://fadikkop-taskforge-pro.static.hf.space/script.js:364
renderTasks https://fadikkop-taskforge-pro.static.hf.space/script.js:361
render https://fadikkop-taskforge-pro.static.hf.space/script.js:344
<anonymous> https://fadikkop-taskforge-pro.static.hf.space/script.js:23
EventListener.handleEvent* https://fadikkop-taskforge-pro.static.hf.space/script.js:19
task-item.js:243:52
Uncaught ReferenceError: taskId is not defined
render https://fadikkop-taskforge-pro.static.hf.space/components/task-item.js:243
connectedCallback https://fadikkop-taskforge-pro.static.hf.space/components/task-item.js:11
renderTasks https://fadikkop-taskforge-pro.static.hf.space/script.js:365
renderTasks https://fadikkop-taskforge-pro.static.hf.space/script.js:361
render https://fadikkop-taskforge-pro.static.hf.space/script.js:344
<anonymous> https://fadikkop-taskforge-pro.static.hf.space/script.js:23
EventListener.handleEvent* https://fadikkop-taskforge-pro.static.hf.space/script.js:19
task-item.js:243:52
feather: 'focus' is not a valid icon feather-icons:12:5197
Content script loaded, initializing... content.js:1719:13
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
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
[PeerTube Companion] Retrieved item "getUrlService-fadikkop-taskforge-pro.static.hf.space" from cache redirection-content-script.f3b7260b.js:1:21789
```

```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>
```

Sorge dafür, dass die offenen Aufgaben korrekt geladen und angezeigt werden! Überlege, wo der Fehler liegen kann und löse ihn. Ich möchte außerdem eine Lösung dafür, dass ich schlecht aus der Übersicht Aufgaben in die Timeline ziehen kann. Mache die Timeline also als eine sidebar, in die ich die Aufgaben per drag and drop ziehen kann

components/task-item.js

@@ -239,15 +239,14 @@ this.shadowRoot.innerHTML = `
             <div class="progress-bar">
                 <div class="progress-fill" style="width: ${progress}%"></div>
             </div>
-            
-            <div class="edit-form" id="edit-form-${taskId}">
-                <div class="input-group">
-                    <input type="text" value="${title}" id="edit-title-${taskId}" placeholder="Titel">
-                    <input type="number" value="${Math.floor(estimatedTime / 60)}" id="edit-hours-${taskId}" 
+            <div class="edit-form" id="edit-form-${this.taskId}">
+<div class="input-group">
+                    <input type="text" value="${title}" id="edit-title-${this.taskId}" placeholder="Titel">
+                    <input type="number" value="${Math.floor(estimatedTime / 60)}" id="edit-hours-${this.taskId}" 
                            placeholder="h" min="0" max="24" style="width: 60px">
-                    <input type="number" value="${estimatedTime % 60}" id="edit-minutes-${taskId}" 
+                    <input type="number" value="${estimatedTime % 60}" id="edit-minutes-${this.taskId}" 
                            placeholder="m" min="0" max="59" step="15" style="width: 60px">
-                    <button class="btn-small btn-add-time" @click="${this.handleAddTime}" title="Zeit hinzufügen">
+<button class="btn-small btn-add-time" @click="${this.handleAddTime}" title="Zeit hinzufügen">
                         <i data-feather="clock" style="width: 14px; height: 14px;"></i>
                     </button>
                 </div>

components/timeline-sidebar.js

@@ -0,0 +1,154 @@
+class TimelineSidebar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.render();
+    this.setupEventListeners();
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          position: fixed;
+          right: 0;
+          top: 0;
+          height: 100vh;
+          width: 300px;
+          background: #1f2937;
+          border-left: 1px solid #374151;
+          z-index: 30;
+          transform: translateX(100%);
+          transition: transform 0.3s ease;
+          overflow-y: auto;
+        }
+
+        :host(.open) {
+          transform: translateX(0);
+        }
+
+        .header {
+          padding: 1rem;
+          border-bottom: 1px solid #374151;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+
+        .timeline-container {
+          padding: 1rem;
+        }
+
+        .timeline-hour {
+          position: relative;
+          min-height: 60px;
+          border-bottom: 1px solid #374151;
+          padding-left: 50px;
+        }
+
+        .hour-label {
+          position: absolute;
+          left: 10px;
+          top: 5px;
+          font-size: 12px;
+          color: #9ca3af;
+        }
+
+        .task-drop-area {
+          height: 100%;
+          min-height: 60px;
+        }
+
+        .toggle-btn {
+          position: fixed;
+          right: 300px;
+          top: 50%;
+          transform: translateY(-50%);
+          background: #1f2937;
+          border: 1px solid #374151;
+          border-right: none;
+          padding: 1rem 0.5rem;
+          border-radius: 5px 0 0 5px;
+          cursor: pointer;
+          z-index: 30;
+        }
+
+        .task-block {
+          background: #374151;
+          border-left: 3px solid #f97316;
+          padding: 0.5rem;
+          margin: 0.5rem 0;
+          border-radius: 4px;
+        }
+      </style>
+
+      <button class="toggle-btn">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="15 18 9 12 15 6"></polyline>
+        </svg>
+      </button>
+
+      <div class="header">
+        <h3>Timeline</h3>
+        <button id="close-timeline">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      </div>
+
+      <div class="timeline-container" id="timeline-hours">
+        ${Array.from({ length: 24 }, (_, i) => `
+          <div class="timeline-hour" data-hour="${i}">
+            <span class="hour-label">${i.toString().padStart(2, '0')}:00</span>
+            <div class="task-drop-area" data-hour="${i}"></div>
+          </div>
+        `).join('')}
+      </div>
+    `;
+  }
+
+  setupEventListeners() {
+    const toggleBtn = this.shadowRoot.querySelector('.toggle-btn');
+    toggleBtn.addEventListener('click', () => {
+      this.classList.toggle('open');
+      const icon = toggleBtn.querySelector('svg');
+      if (this.classList.contains('open')) {
+        icon.innerHTML = '<polyline points="15 18 9 12 15 6"></polyline>';
+      } else {
+        icon.innerHTML = '<polyline points="9 18 15 12 9 6"></polyline>';
+      }
+    });
+
+    // Setup drag and drop
+    this.shadowRoot.addEventListener('dragover', (e) => {
+      if (e.target.classList.contains('task-drop-area')) {
+        e.preventDefault();
+        e.target.style.backgroundColor = '#37415170';
+      }
+    });
+
+    this.shadowRoot.addEventListener('dragleave', (e) => {
+      if (e.target.classList.contains('task-drop-area')) {
+        e.target.style.backgroundColor = '';
+      }
+    });
+
+    this.shadowRoot.addEventListener('drop', (e) => {
+      if (e.target.classList.contains('task-drop-area')) {
+        e.preventDefault();
+        e.target.style.backgroundColor = '';
+        
+        const taskId = e.dataTransfer.getData('text/plain');
+        const hour = parseInt(e.target.dataset.hour);
+        
+        this.dispatchEvent(new CustomEvent('task-dropped', {
+          detail: { taskId, hour }
+        }));
+      }
+    });
+  }
+}
+
+customElements.define('timeline-sidebar', TimelineSidebar);

index.html

@@ -226,11 +226,11 @@
             <i data-feather="plus"></i>
         </button>
     </div>
-
     <script src="components/task-item.js"></script>
     <script src="components/tag-item.js"></script>
+    <script src="components/timeline-sidebar.js"></script>
     <script src="script.js"></script>
-    <script>feather.replace();</script>
+<script>feather.replace();</script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

script.js

@@ -694,13 +694,24 @@ function savePomodoroSettings() {
 
 // Timeline Functions
 function initializeTimeline() {
-    // Setup drag and drop
-    document.addEventListener('dragstart', handleDragStart);
-    document.addEventListener('dragover', handleDragOver);
-    document.addEventListener('drop', handleDrop);
-    document.addEventListener('dragend', handleDragEnd);
-}
+    // Initialize timeline sidebar
+    const timelineSidebar = document.createElement('timeline-sidebar');
+    document.body.appendChild(timelineSidebar);
+    
+    // Listen for task drops
+    timelineSidebar.addEventListener('task-dropped', (e) => {
+        const { taskId, hour } = e.detail;
+        scheduleTask(taskId, hour, 0); // Schedule at top of hour
+    });
 
+    // Setup drag start for task items
+    document.addEventListener('dragstart', (e) => {
+        if (e.target.tagName === 'TASK-ITEM') {
+            const taskId = e.target.getAttribute('task-id');
+            e.dataTransfer.setData('text/plain', taskId);
+        }
+    });
+}
 function handleDragStart(e) {
     if (e.target.classList.contains('task-item')) {
         const taskId = e.target.getAttribute('task-id');