Okay, die Aufgaben werden jetzt angezeigt. Ich möchte einen Knopf an jeder Aufgabe, um den Pomodoro Modus mit ihr zu starten. Wenn ich Aufgaben abhake, wird die Aufgabe nicht nach erledigt verschoben. Die Progress Bars für die Tags sollen nur für Tags angezeigt werden, die auch Aufgaben haben. Das Abhaken von Aufgaben soll visuell noch cooler aussehen, bisschen gamification. Und die Timeline soll eine schmale Seitenleiste rechts in der Übersicht sein. Implementiere all das!

components/task-item.js

@@ -219,10 +219,10 @@ this.shadowRoot.innerHTML = `
                        @change="${this.handleToggleComplete}">
 <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>
+                    <button class="focus-btn" @click="${this.handleFocus}" title="Pomodoro starten">
+                        <i data-feather="clock"></i>
                     </button>
-                    <button class="task-action" @click="${this.handleEdit}" title="Bearbeiten">
+<button class="task-action" @click="${this.handleEdit}" title="Bearbeiten">
                         <i data-feather="edit-2"></i>
                     </button>
                     <button class="task-action" @click="${this.handleDelete}" title="Löschen">

components/timeline-tasks.js

@@ -0,0 +1,82 @@
+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

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

script.js

@@ -177,16 +177,24 @@ function deleteTask(taskId) {
     saveToLocalStorage();
     render();
 }
-
 function toggleTaskComplete(taskId) {
     const task = state.tasks.find(t => t.id === taskId);
     if (task) {
         task.completed = !task.completed;
         saveToLocalStorage();
-        render();
+        
+        // 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();
+        }
     }
 }
-
 // Modal Functions
 function openAddTaskModal() {
     const modal = document.getElementById('add-task-modal');
@@ -395,31 +403,32 @@ function renderProgressBars() {
     document.getElementById('total-progress-text').textContent = 
         `${Math.round(totalProgress)}% (${formatTime(totalSpent)} / ${formatTime(totalEstimated)})`;
     
-    // Tag progress bars
+    // Tag progress bars - only for tags with tasks
     const container = document.getElementById('tag-progress-container');
-    container.innerHTML = state.tags.map(tag => {
-        const tagTasks = state.tasks.filter(t => t.tags.includes(tag.id));
-        const tagEstimated = tagTasks.reduce((sum, t) => sum + t.estimatedTime, 0) || 1;
-        const tagSpent = tagTasks.reduce((sum, t) => sum + t.spentTime, 0);
-        const tagProgress = (tagSpent / tagEstimated) * 100;
-        
-        return `
-            <div class="bg-gray-800 rounded-lg p-4 shadow">
-                <div class="flex items-center justify-between mb-2">
-                    <span class="font-medium" style="color: ${tag.color}">${tag.name}</span>
-                    <span class="text-sm text-gray-400">
-                        ${Math.round(tagProgress)}% (${formatTime(tagSpent)} / ${formatTime(tagEstimated)})
-                    </span>
-                </div>
-                <div class="w-full bg-gray-700 rounded-full h-2 overflow-hidden">
-                    <div class="h-full rounded-full" 
-                         style="width: ${tagProgress}%; background-color: ${tag.color}"></div>
+    container.innerHTML = state.tags
+        .filter(tag => state.tasks.some(t => t.tags.includes(tag.id))) // Only tags with tasks
+        .map(tag => {
+            const tagTasks = state.tasks.filter(t => t.tags.includes(tag.id));
+            const tagEstimated = tagTasks.reduce((sum, t) => sum + t.estimatedTime, 0) || 1;
+            const tagSpent = tagTasks.reduce((sum, t) => sum + t.spentTime, 0);
+            const tagProgress = (tagSpent / tagEstimated) * 100;
+            
+            return `
+                <div class="bg-gray-800 rounded-lg p-4 shadow transition-all hover:scale-[1.02]">
+                    <div class="flex items-center justify-between mb-2">
+                        <span class="font-medium" style="color: ${tag.color}">${tag.name}</span>
+                        <span class="text-sm text-gray-400">
+                            ${Math.round(tagProgress)}% (${formatTime(tagSpent)} / ${formatTime(tagEstimated)})
+                        </span>
+                    </div>
+                    <div class="w-full bg-gray-700 rounded-full h-2 overflow-hidden">
+                        <div class="h-full rounded-full transition-all duration-500" 
+                             style="width: ${tagProgress}%; background-color: ${tag.color}"></div>
+                    </div>
                 </div>
-            </div>
-        `;
-    }).join('');
+            `;
+        }).join('');
 }
-
 function renderTags() {
     const container = document.getElementById('tags-list');
     container.innerHTML = state.tags.map(tag => `

style.css

@@ -17,13 +17,38 @@
 ::-webkit-scrollbar-thumb:hover {
     @apply bg-gray-500;
 }
-
 /* Task hover effects */
 .task-item {
     @apply relative overflow-hidden;
     transition: all 0.3s ease;
+    border-left: 4px solid transparent;
+}
+
+.task-item.completed {
+    animation: completeTask 0.6s ease forwards;
+}
+
+@keyframes completeTask {
+    0% { transform: scale(1); opacity: 1; }
+    50% { transform: scale(0.95); opacity: 0.8; }
+    100% { transform: scale(1); opacity: 1; border-left-color: #10b981; }
 }
 
+.task-item .focus-btn {
+    @apply absolute right-12 top-1/2 transform -translate-y-1/2;
+    @apply p-2 rounded-full bg-orange-500 bg-opacity-0 text-orange-500;
+    @apply transition-all duration-300 ease-in-out;
+    opacity: 0;
+}
+
+.task-item:hover .focus-btn {
+    @apply bg-opacity-20;
+    opacity: 1;
+}
+
+.task-item .focus-btn:hover {
+    @apply bg-opacity-100 text-white;
+}
 .task-item:hover {
     @apply transform scale-105 shadow-lg;
 }