Update anban, kanban (~3)

kanban/index.html

@@ -155,11 +155,18 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
+            min-height: 24px;
+            position: relative;
         }
         
         .task-date {
             font-size: var(--text-xs);
             color: var(--text-muted);
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            padding-right: var(--space-2);
         }
         
         .task-priority {
@@ -173,12 +180,14 @@
         .priority-low { background: var(--success); }
         
         .task-actions {
-            display: none;
+            display: flex;
             gap: var(--space-1);
+            opacity: 0;
+            transition: opacity var(--transition-fast);
         }
         
         .task:hover .task-actions {
-            display: flex;
+            opacity: 1;
         }
         
         .task-action {
@@ -545,14 +554,46 @@
             searchTasks();
         }
         
+        function formatDateTime(isoStr) {
+            if (!isoStr) return '';
+            const d = new Date(isoStr);
+            if (isNaN(d.getTime())) return isoStr; // fallback for old format
+            const day = d.getDate().toString().padStart(2, '0');
+            const month = (d.getMonth() + 1).toString().padStart(2, '0');
+            const year = d.getFullYear();
+            const hours = d.getHours().toString().padStart(2, '0');
+            const mins = d.getMinutes().toString().padStart(2, '0');
+            const secs = d.getSeconds().toString().padStart(2, '0');
+            return `${day}/${month}/${year} ${hours}:${mins}:${secs}`;
+        }
+        
+        function calcDuration(created, completed) {
+            if (!created || !completed) return '';
+            const start = new Date(created);
+            const end = new Date(completed);
+            if (isNaN(start.getTime()) || isNaN(end.getTime())) return '';
+            const diffMs = end - start;
+            if (diffMs < 0) return '';
+            const mins = Math.floor(diffMs / 60000);
+            if (mins < 60) return `${mins}m`;
+            const hours = Math.floor(mins / 60);
+            if (hours < 24) return `${hours}h ${mins % 60}m`;
+            const days = Math.floor(hours / 24);
+            return `${days}d ${hours % 24}h`;
+        }
+        
         function renderTask(task) {
             const hasDesc = task.description && task.description.trim();
+            const startTime = formatDateTime(task.created);
+            const duration = calcDuration(task.created, task.completed);
+            const timeInfo = duration ? `${startTime} (${duration})` : startTime;
+            
             return `
                 <div class="task" draggable="true" data-task-id="${task.id}" onclick="toggleTaskExpand(event, this)">
                     <div class="task-title" contenteditable="true" onblur="updateTask('${task.id}', 'title', this.textContent)">${task.title}</div>
                     ${hasDesc ? `<div class="task-desc" contenteditable="true" onblur="updateTask('${task.id}', 'description', this.textContent)">${task.description}</div>` : ''}
                     <div class="task-footer">
-                        <span class="task-date">${task.completed || task.created}</span>
+                        <span class="task-date">${timeInfo || task.completed || task.created}</span>
                         <div class="task-actions">
                             <button class="task-action" onclick="event.stopPropagation(); cyclePriority('${task.id}')" title="Prioritate">
                                 <i data-lucide="flag"></i>