Überarbeite die gesamte Logik. Die Timeline-Seite brauche ich nicht mehr, ihr Inhalt, soll in der Sidebar angezeigt werden. Die breite der Übersicht soll sich an die Timeline-sidebar anpassen, aktuell überdeckt die sidebar die Übersicht teilweise. Wenn ich Aufgaben abhake, sollen die nicht nur anders aussehen, sondern gar nicht mehr in "Offene Aufgaben" angezeigt werden, sondern stattdessen in "Erledigte Aufgaben". Der Löschen Knopf funktioniert nicht. Der Bearbeiten-Knopf soll ein Bearbeiten-Menü wie das Erstellen-Menü öffnen, aktuell tut er nichts. ich möchte Aufgaben mit drag and drop in ihrer Reihenfolge verschieben können und genauso auch in die Timeline. Wenn ich eine Aufgabe in die Timeline ziehe, soll sie in Offene Aufgaben weiterhin angezeigt werden, aber an auf die Zeit geplant werden, wo ich sie hingezogen habe und in der Timeline mit der geschätzten Zeit angezeigt werden. Auch der Pomodoro Starten Knopf funktioniert nicht

components/task-item.js

@@ -4,6 +4,7 @@ class TaskItem extends HTMLElement {
         super();
         this.attachShadow({ mode: 'open' });
     }
+
     connectedCallback() {
         this.taskId = this.getAttribute('task-id');
         this.completed = this.getAttribute('completed') === 'true';
@@ -35,16 +36,17 @@ class TaskItem extends HTMLElement {
 
     render() {
         if (!this.task) {
-            this.shadowRoot.innerHTML = `<div class="loading" data-task-id="${this.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 = 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>` : '';
+            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;
@@ -215,17 +217,16 @@ this.shadowRoot.innerHTML = `
                 }
             </style>
             <div class="task-header">
-                <input type="checkbox" class="task-checkbox" ${this.completed ? 'checked' : ''} 
-                       @change="${this.handleToggleComplete}">
+                <input type="checkbox" class="task-checkbox" ${this.completed ? 'checked' : ''}>
 <span class="task-title">${title}</span>
                 <div class="task-actions">
-                    <button class="focus-btn" @click="${this.handleFocus}" title="Pomodoro starten">
+                    <button class="focus-btn" title="Pomodoro starten">
                         <i data-feather="clock"></i>
                     </button>
-<button class="task-action" @click="${this.handleEdit}" title="Bearbeiten">
+<button class="task-action" title="Bearbeiten">
                         <i data-feather="edit-2"></i>
                     </button>
-                    <button class="task-action" @click="${this.handleDelete}" title="Löschen">
+                    <button class="task-action" title="Löschen">
                         <i data-feather="trash-2"></i>
                     </button>
                 </div>
@@ -246,18 +247,19 @@ this.shadowRoot.innerHTML = `
                            placeholder="h" min="0" max="24" style="width: 60px">
                     <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" title="Zeit hinzufügen">
                         <i data-feather="clock" style="width: 14px; height: 14px;"></i>
                     </button>
                 </div>
                 <div class="edit-actions">
-                    <button class="btn-small btn-save" @click="${this.handleSave}">Speichern</button>
-                    <button class="btn-small btn-cancel" @click="${this.handleCancel}">Abbrechen</button>
+                    <button class="btn-small btn-save">Speichern</button>
+                    <button class="btn-small btn-cancel">Abbrechen</button>
                 </div>
             </div>
         `;
+        
         if (this.completed) {
-this.classList.add('completed');
+            this.classList.add('completed');
         } else {
             this.classList.remove('completed');
         }
@@ -271,16 +273,21 @@ this.classList.add('completed');
 
     setupEventListeners() {
         this.shadowRoot.addEventListener('click', (e) => {
-            const action = e.target.closest('button')?.getAttribute('@click');
-            if (action) {
-                e.stopPropagation();
-                this[action.replace('${this.', '').replace('}', '')](e);
+            const target = e.target.closest('button');
+            if (target) {
+                const action = target.getAttribute('title');
+                if (action === 'Bearbeiten') {
+                    this.handleEdit(e);
+                } else if (action === 'Löschen') {
+                    this.handleDelete(e);
+                } else if (action === 'Pomodoro starten') {
+                    this.handleFocus(e);
+                }
             }
         });
         
         this.shadowRoot.addEventListener('change', (e) => {
             if (e.target.classList.contains('task-checkbox')) {
-                e.stopPropagation();
                 this.handleToggleComplete(e);
             }
         });
@@ -299,6 +306,7 @@ this.classList.add('completed');
             this.classList.remove('completed');
         }
     }
+
     handleFocus(e) {
         const taskId = this.getAttribute('task-id');
         const task = state.tasks.find(t => t.id === taskId);
@@ -306,18 +314,18 @@ this.classList.add('completed');
             startFocusMode(task);
         }
     }
-handleEdit(e) {
-        const editForm = this.shadowRoot.querySelector('.edit-form');
-        editForm.classList.add('active');
+
+    handleEdit(e) {
+        const taskId = this.getAttribute('task-id');
+        openEditTaskModal(taskId);
     }
 
     handleDelete(e) {
         if (confirm('Aufgabe wirklich löschen?')) {
             this.dispatchEvent(new CustomEvent('delete-task', { 
-                detail: { taskId: this.getAttribute('task-id') },
-                bubbles: true 
-            }));
-        }
+            detail: { taskId: this.getAttribute('task-id') },
+            bubbles: true 
+        }));
     }
 
     handleSave(e) {
@@ -342,13 +350,12 @@ handleEdit(e) {
         const minutes = prompt('Wie viele Minuten willst du hinzufügen?', '15');
         if (minutes && !isNaN(minutes)) {
             this.dispatchEvent(new CustomEvent('add-time', { 
-                detail: { 
-                    taskId: this.getAttribute('task-id'), 
-                    minutes: parseInt(minutes) 
-                },
-                bubbles: true 
-            }));
-        }
+            detail: { 
+                taskId: this.getAttribute('task-id'), 
+                minutes: parseInt(minutes) 
+            },
+            bubbles: true 
+        }));
     }
 }
 

components/timeline-sidebar.js

@@ -33,6 +33,7 @@ class TimelineSidebar extends HTMLElement {
           display: flex;
           justify-content: space-between;
           align-items: center;
+          background: #1f2937;
         }
 
         .timeline-container {
@@ -57,6 +58,29 @@ class TimelineSidebar extends HTMLElement {
         .task-drop-area {
           height: 100%;
           min-height: 60px;
+          border-radius: 4px;
+          transition: background-color 0.2s ease;
+        }
+
+        .task-drop-area:hover {
+          background-color: #37415170;
+        }
+
+        .task-block {
+          background: #374151;
+          border-left: 3px solid #f97316;
+          padding: 0.5rem;
+          margin: 0.5rem 0;
+          border-radius: 4px;
+          font-size: 14px;
+          cursor: pointer;
+          margin-bottom: 4px;
+          transition: all 0.2s ease;
+        }
+
+        .task-block:hover {
+          background: #4b5563;
+          transform: scale(1.02);
         }
 
         .toggle-btn {
@@ -71,30 +95,27 @@ class TimelineSidebar extends HTMLElement {
           border-radius: 5px 0 0 5px;
           cursor: pointer;
           z-index: 30;
+          color: white;
         }
 
-        .task-block {
+        .toggle-btn:hover {
           background: #374151;
-          border-left: 3px solid #f97316;
-          padding: 0.5rem;
-          margin: 0.5rem 0;
-          border-radius: 4px;
+        }
+
+        .current-time {
+          background: #ef444420;
+          border-left: 2px solid #ef4444;
         }
       </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>
+        <i data-feather="chevron-left"></i>
       </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>
+          <i data-feather="x"></i>
         </button>
       </div>
 
@@ -113,11 +134,9 @@ class TimelineSidebar extends HTMLElement {
     const toggleBtn = this.shadowRoot.querySelector('.toggle-btn');
     toggleBtn.addEventListener('click', () => {
       this.classList.toggle('open');
-      const icon = toggleBtn.querySelector('svg');
+      const icon = toggleBtn.querySelector('i');
       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>';
       }
     });
 
@@ -148,6 +167,44 @@ class TimelineSidebar extends HTMLElement {
         }));
       }
     });
+
+    // Initialize timeline
+    setTimeout(() => {
+      this.updateTimeline();
+    }, 100);
+  }
+
+  updateTimeline() {
+    const today = new Date().toDateString();
+    const scheduledTasks = state.timelineTasks.filter(t => 
+      new Date(t.date).toDateString() === today
+    );
+
+    const container = this.shadowRoot.querySelector('.timeline-container');
+    container.querySelectorAll('.task-block').forEach(el => el.remove());
+
+    scheduledTasks.forEach(timelineTask => {
+      const task = state.tasks.find(t => t.id === timelineTask.taskId);
+      if (!task || task.completed) return;
+      
+      const startTime = new Date(timelineTask.startTime);
+      const hour = startTime.getHours();
+      const minute = startTime.getMinutes();
+      
+      const hourEl = this.shadowRoot.querySelector(`.timeline-hour[data-hour="${hour}"]`);
+      if (hourEl) {
+        const taskEl = document.createElement('div');
+        taskEl.className = 'task-block';
+        taskEl.innerHTML = `
+          <div class="task-title">${task.title}</div>
+          <div class="task-time">${formatTime(task.estimatedTime)}</div>
+        `;
+        taskEl.draggable = true;
+        taskEl.dataset.taskId = task.id;
+        
+        hourEl.appendChild(taskEl);
+      }
+    });
   }
 }
 

components/timeline-tasks.js

@@ -1,82 +1 @@
-class TimelineTasks extends HTMLElement {
-  connectedCallback() {
-    this.attachShadow({ mode: 'open' });
-    this.render();
-  }
 
-  render() {
-    this.shadowRoot.innerHTML = `
-      <style>
-        :host {
-          display: block;
-          background: #1f2937;
-          border-left: 1px solid #374151;
-          height: 100%;
-          width: 300px;
-          position: fixed;
-          right: 0;
-          top: 80px;
-          overflow-y: auto;
-          padding: 1rem;
-        }
-        
-        h3 {
-          margin-top: 0;
-          color: #f97316;
-          padding-bottom: 1rem;
-          border-bottom: 1px solid #374151;
-        }
-        
-        .task-list {
-          display: flex;
-          flex-direction: column;
-          gap: 8px;
-        }
-        
-        .task-item {
-          background: #374151;
-          border-radius: 6px;
-          padding: 8px;
-          cursor: grab;
-          transition: all 0.2s ease;
-        }
-        
-        .task-item:hover {
-          background: #4b5563;
-          transform: translateX(-4px);
-        }
-        
-        .task-title {
-          font-size: 14px;
-          margin-bottom: 4px;
-        }
-        
-        .task-time {
-          font-size: 12px;
-          color: #9ca3af;
-        }
-      </style>
-      
-      <h3>Timeline</h3>
-      <div class="task-list" id="timeline-task-list"></div>
-    `;
-  }
-
-  updateTasks(tasks) {
-    const container = this.shadowRoot.getElementById('timeline-task-list');
-    container.innerHTML = tasks.map(task => `
-      <div class="task-item" draggable="true" data-task-id="${task.id}">
-        <div class="task-title">${task.title}</div>
-        <div class="task-time">${formatTime(task.estimatedTime)}</div>
-      </div>
-    `).join('');
-  }
-}
-
-customElements.define('timeline-tasks', TimelineTasks);
-
-function formatTime(minutes) {
-  const h = Math.floor(minutes / 60);
-  const m = minutes % 60;
-  return `${h}h ${m}m`;
-}

index.html

@@ -18,51 +18,47 @@
                 <nav class="flex items-center space-x-4">
                     <button id="view-home" class="nav-btn active" data-view="home">
                         <i data-feather="home"></i> Übersicht
-                    </button>
-                    <button id="view-timeline" class="nav-btn" data-view="timeline">
-                        <i data-feather="clock"></i> Timeline
-                    </button>
+                </button>
                     <button id="view-settings" class="nav-btn" data-view="settings">
                         <i data-feather="settings"></i> Einstellungen
-                    </button>
+                </button>
                 </nav>
             </div>
         </div>
     </header>
-
-    <!-- Main Content -->
+<!-- Main Content -->
     <main class="container mx-auto px-4 py-6">
         <!-- Home View -->
         <div id="home-view" class="view active">
-<!-- Tag Progress Bars -->
+            <!-- Tag Progress Bars -->
             <div id="tag-progress-container" class="mb-6 space-y-3"></div>
 
             <!-- Main Progress Bar -->
             <div class="bg-gray-800 rounded-xl p-6 mb-8 shadow-lg">
                 <div class="flex items-center justify-between mb-4">
-                    <h2 class="text-xl font-semibold">Gesamtfortschritt</h2>
-                    <span id="total-progress-text" class="text-sm text-gray-400">0% (0h / 0h)</span>
-                </div>
-                <div class="w-full bg-gray-700 rounded-full h-4 overflow-hidden">
-                    <div id="total-progress-bar" class="bg-gradient-to-r from-orange-500 to-orange-600 h-full rounded-full transition-all duration-500" style="width: 0%"></div>
-                </div>
+                <h2 class="text-xl font-semibold">Gesamtfortschritt</h2>
+                <span id="total-progress-text" class="text-sm text-gray-400">0% (0h / 0h)</span>
+            </div>
+            <div class="w-full bg-gray-700 rounded-full h-4 overflow-hidden">
+                <div id="total-progress-bar" class="bg-gradient-to-r from-orange-500 to-orange-600 h-full rounded-full transition-all duration-500" style="width: 0%"></div>
             </div>
+        </div>
 
             <!-- Task Lists -->
-            <div class="grid md:grid-cols-2 gap-6">
+            <div class="flex gap-6">
                 <!-- Open Tasks -->
-                <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">
-                            <i data-feather="circle" class="text-orange-500 mr-2"></i>
-                            Offene Aufgaben (<span id="open-count">0</span>)
-                        </h3>
-                    </div>
-                    <div id="open-tasks" class="p-4 space-y-3 max-h-96 overflow-y-auto"></div>
+                <div class="flex-1 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">
+                        <i data-feather="circle" class="text-orange-500 mr-2"></i>
+                        Offene Aufgaben (<span id="open-count">0</span>)
+                    </h3>
+                </div>
+                <div id="open-tasks" class="p-4 space-y-3 max-h-96 overflow-y-auto"></div>
                 </div>
 
                 <!-- Completed Tasks -->
-                <div class="bg-gray-800 rounded-xl shadow-lg">
+                <div class="flex-1 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">
                             <i data-feather="check-circle" class="text-emerald-500 mr-2"></i>
@@ -73,29 +69,7 @@
                 </div>
             </div>
         </div>
-
-        <!-- Timeline View -->
-        <div id="timeline-view" class="view">
-            <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
-                <div class="flex items-center justify-between mb-6">
-                    <h2 class="text-xl font-semibold">Timeline - Heute</h2>
-                    <div class="flex items-center space-x-4">
-                        <button id="timeline-now" class="px-4 py-2 bg-orange-500 hover:bg-orange-600 rounded-lg transition">
-                            Jetzt
-                        </button>
-                        <span id="current-time" class="text-lg font-mono"></span>
-                    </div>
-                </div>
-                <div id="timeline-container" class="relative">
-                    <div id="timeline-tasks" class="absolute left-0 top-0 w-64 space-y-2 p-4">
-                        <p class="text-sm text-gray-400">Aufgaben hierher ziehen</p>
-                    </div>
-                    <div id="timeline-hours" class="ml-64 border-l border-gray-600"></div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Settings View -->
+<!-- Settings View -->
         <div id="settings-view" class="view">
             <div class="max-w-4xl mx-auto">
                 <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
@@ -216,18 +190,17 @@
             </div>
         </div>
     </div>
-
     <!-- FAB Buttons -->
     <div class="fixed bottom-6 right-6 flex flex-col space-y-3">
         <button id="focus-fab" class="p-4 bg-orange-500 hover:bg-orange-600 rounded-full shadow-lg transition transform hover:scale-110">
-            <i data-feather="focus"></i>
-        </button>
-        <button id="add-task-fab" class="p-4 bg-emerald-500 hover:bg-emerald-600 rounded-full shadow-lg transition transform hover:scale-110">
-            <i data-feather="plus"></i>
-        </button>
-    </div>
-    <timeline-tasks id="timeline-sidebar"></timeline-tasks>
-    <script src="components/task-item.js"></script>
+                <i data-feather="focus"></i>
+            </button>
+            <button id="add-task-fab" class="p-4 bg-emerald-500 hover:bg-emerald-600 rounded-full shadow-lg transition transform hover:scale-110">
+                <i data-feather="plus"></i>
+            </button>
+        </div>
+        <timeline-sidebar id="timeline-sidebar"></timeline-sidebar>
+<script src="components/task-item.js"></script>
     <script src="components/tag-item.js"></script>
     <script src="components/timeline-tasks.js"></script>
     <script src="script.js"></script>

script.js

@@ -1,7 +1,8 @@
+
 // TaskForge Pro - Main JavaScript
 // State management
 window.state = {
-tasks: [],
+    tasks: [],
     tags: [],
     currentView: 'home',
     focusTask: null,
@@ -14,7 +15,6 @@ tasks: [],
     },
     timelineTasks: []
 };
-
 // Initialize
 document.addEventListener('DOMContentLoaded', () => {
     loadFromLocalStorage();
@@ -22,7 +22,6 @@ document.addEventListener('DOMContentLoaded', () => {
     setupEventListeners();
     render();
 });
-
 // Local Storage
 function loadFromLocalStorage() {
     const savedTasks = localStorage.getItem('tasks');
@@ -82,7 +81,6 @@ function updateCurrentTime() {
     });
     document.getElementById('current-time').textContent = timeString;
 }
-
 function setupEventListeners() {
     // Navigation
     document.querySelectorAll('.nav-btn').forEach(btn => {
@@ -113,10 +111,31 @@ function setupEventListeners() {
     document.getElementById('focus-play').addEventListener('click', resumePomodoro);
     document.getElementById('focus-stop').addEventListener('click', stopPomodoro);
 
-    // Timeline
-    document.getElementById('timeline-now').addEventListener('click', scrollToCurrentTime);
-}
+    // Event delegation for task item events
+    document.addEventListener('delete-task', (e) => {
+        deleteTask(e.detail.taskId);
+    });
 
+    document.addEventListener('toggle-complete', (e) => {
+        toggleTaskComplete(e.detail.taskId, e.detail.completed);
+    });
+
+    document.addEventListener('update-task', (e) => {
+        updateTask(e.detail.taskId, e.detail.updates);
+    });
+
+    document.addEventListener('add-time', (e) => {
+        addTimeToTask(e.detail.taskId, e.detail.minutes);
+    });
+
+    // Timeline sidebar events
+    const timelineSidebar = document.getElementById('timeline-sidebar');
+    if (timelineSidebar) {
+        timelineSidebar.addEventListener('task-dropped', (e) => {
+            scheduleTask(e.detail.taskId, e.detail.hour, 0);
+        });
+    }
+}
 // View Management
 function switchView(view) {
     state.currentView = view;
@@ -138,10 +157,6 @@ function switchView(view) {
         activeView.style.display = 'block';
         activeView.classList.add('active');
     }
-    
-    if (view === 'timeline') {
-        renderTimeline();
-    }
 }
 // Task Management
 function addTask(task) {
@@ -177,22 +192,12 @@ function deleteTask(taskId) {
     saveToLocalStorage();
     render();
 }
-function toggleTaskComplete(taskId) {
+function toggleTaskComplete(taskId, completed) {
     const task = state.tasks.find(t => t.id === taskId);
     if (task) {
-        task.completed = !task.completed;
+        task.completed = completed !== undefined ? completed : !task.completed;
         saveToLocalStorage();
-        
-        // Animate task completion
-        const taskElement = document.querySelector(`task-item[task-id="${taskId}"]`);
-        if (taskElement) {
-            taskElement.classList.add('completed');
-            setTimeout(() => {
-                render();
-            }, 600); // Match animation duration
-        } else {
-            render();
-        }
+        render();
     }
 }
 // Modal Functions
@@ -372,7 +377,7 @@ function renderTasks() {
             taskElement.setAttribute('completed', 'false');
             openContainer.appendChild(taskElement);
         });
-}
+    }
     
     // Render completed tasks
     if (completedTasks.length === 0) {
@@ -385,11 +390,14 @@ function renderTasks() {
             taskElement.setAttribute('completed', 'true');
             completedContainer.appendChild(taskElement);
         });
-}
+    }
     
     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();
 }
@@ -441,33 +449,6 @@ function renderTags() {
         el.addEventListener('delete', () => deleteTag(tagId));
     });
 }
-function renderTimeline() {
-    if (state.currentView !== 'timeline') return;
-    
-    const container = document.getElementById('timeline-hours');
-    container.innerHTML = '';
-    
-    // Generate hours
-    for (let h = 6; h <= 22; h++) {
-        const hourDiv = document.createElement('div');
-        hourDiv.className = 'timeline-hour relative border-b border-gray-700';
-        hourDiv.dataset.hour = h;
-        hourDiv.style.minHeight = '60px';
-        
-        const timeLabel = document.createElement('span');
-        timeLabel.className = 'absolute -ml-20 mt-2 text-sm text-gray-400 w-16 text-right';
-        timeLabel.textContent = `${h.toString().padStart(2, '0')}:00`;
-        
-        hourDiv.appendChild(timeLabel);
-        container.appendChild(hourDiv);
-    }
-    
-    // Highlight current hour
-    highlightCurrentHour();
-    
-    // Render scheduled tasks
-    renderScheduledTasks();
-}
 function highlightCurrentHour() {
     const now = new Date();
     const currentHour = now.getHours();
@@ -523,36 +504,6 @@ function highlightCurrentHour() {
 }
     }
 }
-function renderScheduledTasks() {
-    const today = new Date().toDateString();
-    const scheduledTasks = state.timelineTasks.filter(t => 
-        new Date(t.date).toDateString() === today
-    );
-    
-    scheduledTasks.forEach(task => {
-        const taskData = state.tasks.find(t => t.id === task.taskId);
-        if (!taskData) return;
-        
-        const startHour = new Date(task.startTime).getHours();
-        const startMinute = new Date(task.startTime).getMinutes();
-        const duration = taskData.estimatedTime;
-        
-        const hourEl = document.querySelector(`[data-hour="${startHour}"]`);
-        if (hourEl) {
-            const taskEl = document.createElement('div');
-            taskEl.className = 'timeline-task-block';
-            taskEl.style.left = `${(startMinute / 60) * 100}%`;
-            taskEl.style.width = `${(duration / 60) * 100}%`;
-            taskEl.style.backgroundColor = task.tags[0] ? 
-                state.tags.find(t => t.id === task.tags[0])?.color + '20' : '#f9731620';
-            taskEl.textContent = taskData.title;
-            taskEl.draggable = true;
-            
-            hourEl.appendChild(taskEl);
-        }
-    });
-}
-
 function scrollToCurrentTime() {
     const now = new Date();
     const currentHour = now.getHours();
@@ -611,7 +562,6 @@ function startFocusMode(task) {
     const workTime = parseInt(localStorage.getItem('pomodoroWorkTime')) || 25;
     startPomodoro(workTime * 60, false);
 }
-
 function startPomodoro(seconds, isBreak) {
     state.pomodoro.isRunning = true;
     state.pomodoro.isBreak = isBreak;
@@ -679,7 +629,6 @@ function resumePomodoro() {
     document.getElementById('focus-play').classList.add('hidden');
     document.getElementById('focus-pause').classList.remove('hidden');
 }
-
 function stopPomodoro() {
     clearInterval(state.pomodoro.interval);
     
@@ -695,28 +644,16 @@ function stopPomodoro() {
     document.getElementById('focus-mode').classList.add('hidden');
     render();
 }
-
 function savePomodoroSettings() {
     localStorage.setItem('pomodoroWorkTime', document.getElementById('pomodoro-work').value);
     localStorage.setItem('pomodoroBreakTime', document.getElementById('pomodoro-break').value);
 }
-
 // Timeline Functions
 function initializeTimeline() {
-    // 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');
+            if (e.target.tagName === 'TASK-ITEM') {
+                const taskId = e.target.getAttribute('task-id');
             e.dataTransfer.setData('text/plain', taskId);
         }
     });
@@ -736,27 +673,6 @@ function handleDragOver(e) {
         e.target.classList.add('drag-over');
     }
 }
-function handleDrop(e) {
-    e.preventDefault();
-    
-    // Remove drag-over class from all elements
-    document.querySelectorAll('.drag-over').forEach(el => {
-        el.classList.remove('drag-over');
-    });
-    
-    const taskId = e.dataTransfer.getData('text/plain');
-    const hourEl = e.target.closest('.timeline-hour');
-    
-    if (hourEl && taskId) {
-        const hour = parseInt(hourEl.dataset.hour);
-        const rect = hourEl.getBoundingClientRect();
-        const x = e.clientX - rect.left;
-        const hourWidth = rect.width;
-        const minute = Math.floor((x / hourWidth) * 60);
-        
-        scheduleTask(taskId, hour, minute);
-    }
-}
 function handleDragEnd(e) {
     e.target.classList.remove('dragging');
     document.querySelectorAll('.drag-over').forEach(el => {
@@ -785,7 +701,12 @@ function scheduleTask(taskId, hour, minute) {
     });
     
     saveToLocalStorage();
-    renderTimeline();
+    
+    // Update timeline sidebar
+    const timelineSidebar = document.getElementById('timeline-sidebar');
+    if (timelineSidebar && timelineSidebar.updateTimeline) {
+        timelineSidebar.updateTimeline();
+    }
 }
 // Utilities
 function formatTime(minutes) {
@@ -797,4 +718,107 @@ function formatTime(minutes) {
 // Request notification permission
 if ('Notification' in window && Notification.permission === 'default') {
     Notification.requestPermission();
-}
+}
+
+// New functions for task management
+function addTimeToTask(taskId, minutes) {
+    const task = state.tasks.find(t => t.id === taskId);
+    if (task) {
+        task.spentTime += minutes;
+        saveToLocalStorage();
+        render();
+    }
+}
+
+function setupTaskDragAndDrop() {
+    const openContainer = document.getElementById('open-tasks');
+    const completedContainer = document.getElementById('completed-tasks');
+    
+    // Setup drag and drop for reordering
+    [openContainer, completedContainer].forEach(container => {
+        if (!container) return;
+        
+        container.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            const afterElement = getDragAfterElement(container, e.clientY);
+            const draggable = document.querySelector('.dragging');
+            if (draggable) {
+                if (afterElement == null) {
+                    container.appendChild(draggable);
+                } else {
+                    container.insertBefore(draggable, afterElement);
+            }
+        });
+    });
+}
+
+function getDragAfterElement(container, y) {
+    const draggableElements = [...container.querySelectorAll('task-item:not(.dragging)'));
+        
+        return draggableElements.reduce((closest, child) => {
+            const box = child.getBoundingClientRect();
+            const offset = y - box.top - box.height / 2;
+        if (offset < 0 && offset > closest.offset) {
+            return { offset: offset, element: child };
+        } else {
+            return closest;
+        }
+    }, { offset: Number.NEGATIVE_INFINITY }).element;
+}
+
+// Edit task modal functionality
+function openEditTaskModal(taskId) {
+    const task = state.tasks.find(t => t.id === taskId);
+    if (!task) return;
+    
+    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">
+            <h3 class="text-xl font-semibold mb-4">Aufgabe bearbeiten</h3>
+            <form id="edit-task-form" class="space-y-4">
+                <div>
+                    <label class="block text-sm font-medium mb-2">Titel</label>
+                    <input id="edit-task-title" type="text" required value="${task.title}"
+                        class="w-full bg-gray-700 rounded-lg px-4 py-2 text-gray-100">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-2">Geschätzte Zeit</label>
+                    <div class="flex space-x-2">
+                        <input id="edit-task-hours" type="number" placeholder="h" min="0" max="24" value="${Math.floor(task.estimatedTime / 60)}"
+                            class="w-full bg-gray-700 rounded-lg px-4 py-2 text-gray-100">
+                        <input id="edit-task-minutes" type="number" placeholder="m" min="0" max="59" step="15" value="${task.estimatedTime % 60}"
+                            class="w-full bg-gray-700 rounded-lg px-4 py-2 text-gray-100">
+                    </div>
+                </div>
+                <div class="flex justify-end space-x-2">
+                            <button type="button" onclick="this.closest('div[class*=\"fixed\"]').remove()" 
+                                class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition">
+                                Abbrechen
+                            </button>
+                            <button type="submit" class="px-4 py-2 bg-orange-500 hover:bg-orange-600 rounded-lg transition">
+                                Speichern
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            `;
+    
+    document.body.appendChild(modal);
+    
+    const form = modal.querySelector('#edit-task-form');
+    form.addEventListener('submit', (e) => {
+        e.preventDefault();
+        handleEditTask(taskId);
+        modal.remove();
+    });
+}
+
+function handleEditTask(taskId) {
+    const title = document.getElementById('edit-task-title').value;
+    const hours = parseInt(document.getElementById('edit-task-hours').value) || 0;
+    const minutes = parseInt(document.getElementById('edit-task-minutes').value) || 0;
+    const estimatedTime = hours * 60 + minutes;
+    
+    updateTask(taskId, { title, estimatedTime });
+}