Achievement Leiste nach links verschoben

public/app.js

@@ -63,7 +63,7 @@ class App {
 
         if (hour >= 5 && hour < 12) {
             emoji = '&#9728;&#65039;';
-            greeting = 'Good morning, >Laila';
+            greeting = 'Good morning, Laila';
             sub = 'Ready to learn something new today?';
         } else if (hour >= 12 && hour < 17) {
             emoji = '&#127774;';
@@ -178,15 +178,16 @@ class App {
 
     // ─── View Switching ───
 
-    async switchView(mode) {
+    switchView(mode) {
         if (this.viewMode === mode) return;
         this.viewMode = mode;
         document.getElementById('view-active').classList.toggle('active', mode === 'active');
         document.getElementById('view-archive').classList.toggle('active', mode === 'archive');
         document.getElementById('overall-progress').classList.toggle('hidden', mode === 'archive');
         document.getElementById('open-modal').style.display = mode === 'archive' ? 'none' : '';
-        if (mode === 'archive') await this.loadArchivedTasks();
-        else await this.loadTasks();
+
+        if (mode === 'archive') this.renderArchive();
+        else this.render();
     }
 
     // ─── Modal ───
@@ -354,6 +355,7 @@ class App {
         const taskList = this.getCurrentTasks();
 
         if (editId) {
+            let rerenderTaskId = editId;
             if (parentId) {
                 const parentTask = taskList.find(t => t.id === parentId);
                 if (parentTask) {
@@ -363,6 +365,7 @@ class App {
                         this._syncToServer(parentTask);
                     }
                 }
+                rerenderTaskId = parentId;
             } else {
                 const task = taskList.find(t => t.id === editId);
                 if (task) {
@@ -371,8 +374,7 @@ class App {
                 }
             }
             this.updateOverallProgress();
-            if (this.viewMode === 'archive') this.renderArchive();
-            else this.render();
+            this._rerenderCard(rerenderTaskId);
         } else {
             try {
                 const response = await fetch(`${API_URL}/tasks`, {
@@ -472,7 +474,7 @@ class App {
         if (totalTasks === 0) {
             const pctEl = document.getElementById('overall-percentage');
             pctEl.textContent = '0%';
-            document.getElementById('overall-progress-fill').style.width = '0%';
+            document.getElementById('overall-progress-fill').style.height = '0%';
             this._previousOverallProgress = 0;
             return;
         }
@@ -487,11 +489,27 @@ class App {
         this.animateCounter(pctEl, prevPct, overallProgress, '%');
 
         this._previousOverallProgress = overallProgress;
-        document.getElementById('overall-progress-fill').style.width = overallProgress + '%';
+        document.getElementById('overall-progress-fill').style.height = overallProgress + '%';
     }
 
     // ─── Server Sync (fire-and-forget) ───
 
+    _rerenderCard(taskId) {
+        const oldCard = document.querySelector(`[data-task-id="${taskId}"]`);
+        if (!oldCard) return;
+        if (this.viewMode === 'archive') {
+            const index = this.archivedTasks.findIndex(t => t.id === taskId);
+            if (index === -1) return;
+            const newCard = this.renderArchivedTask(this.archivedTasks[index]);
+            oldCard.replaceWith(newCard);
+        } else {
+            const index = this.tasks.findIndex(t => t.id === taskId);
+            if (index === -1) return;
+            const newCard = this.renderTask(this.tasks[index], index);
+            oldCard.replaceWith(newCard);
+        }
+    }
+
     _syncToServer(task) {
         fetch(`${API_URL}/tasks/${task.id}`, {
             method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(task)
@@ -544,7 +562,7 @@ class App {
         if (!wasCompleted && isNowCompleted && task.reward) this._celebrateTaskId = taskId;
 
         this.updateOverallProgress();
-        this.render();
+        this._rerenderCard(taskId);
         this._checkCelebrations(prevProgress);
         this._syncToServer(task);
     }
@@ -562,7 +580,7 @@ class App {
         if (parentWillComplete && task.reward && !task.completed) this._celebrateTaskId = taskId;
 
         this.updateOverallProgress();
-        this.render();
+        this._rerenderCard(taskId);
         this._checkCelebrations(prevProgress);
         this._syncToServer(task);
     }
@@ -572,7 +590,7 @@ class App {
         if (!task) return;
         task.subtasks = task.subtasks.filter(st => st.id !== subtaskId);
         this.updateOverallProgress();
-        this.render();
+        this._rerenderCard(taskId);
         this._syncToServer(task);
     }
 
@@ -854,7 +872,9 @@ class App {
         card.className = `task-card ${isCompleted ? 'completed' : ''}`;
         card.draggable = true;
         card.setAttribute('data-task-id', task.id);
-        card.style.borderLeftColor = task.color || '#6366f1';
+        const color = task.color || '#6366f1';
+        card.style.background = `linear-gradient(${this._hexToRgba(color, 0.12)}, ${this._hexToRgba(color, 0.12)}), rgba(255, 255, 255, 0.18)`;
+        card.style.borderColor = this._hexToRgba(color, 0.25);
 
         card.addEventListener('dragstart', (e) => { if (!e.target.closest('.subtask')) this.handleDragStart(e, task, false); });
         card.addEventListener('dragend', (e) => this.handleDragEnd(e));
@@ -996,7 +1016,9 @@ class App {
         const card = document.createElement('div');
         card.className = `task-card archived-card ${isCompleted ? 'completed' : ''}`;
         card.setAttribute('data-task-id', task.id);
-        card.style.borderLeftColor = task.color || '#6366f1';
+        const color = task.color || '#6366f1';
+        card.style.background = `linear-gradient(${this._hexToRgba(color, 0.12)}, ${this._hexToRgba(color, 0.12)}), rgba(255, 255, 255, 0.18)`;
+        card.style.borderColor = this._hexToRgba(color, 0.25);
 
         card.addEventListener('contextmenu', (e) => { if (!e.target.closest('.subtask')) this.showContextMenu(e, task, 'task'); });
         card.addEventListener('dblclick', (e) => { if (!e.target.closest('.subtask') && !e.target.closest('button')) this.openEditModal(task); });
@@ -1312,6 +1334,13 @@ class App {
         div.textContent = text;
         return div.innerHTML;
     }
+
+    _hexToRgba(hex, alpha) {
+        const r = parseInt(hex.slice(1, 3), 16);
+        const g = parseInt(hex.slice(3, 5), 16);
+        const b = parseInt(hex.slice(5, 7), 16);
+        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    }
 }
 
 const app = new App();