feat(web): стабилизация UI, Gemini-скроллинг, роутеры контекста/снапшотов и актуализация роадмапа

modules/web_api/static/js/tasks.js

@@ -1,117 +1,200 @@
 /**
-===============================================================================
-FILE: modules/web_api/static/js/tasks.js
-PROJECT: SCUD Orion AI (Unified Architecture)
-MODULE: web_api / static / js
-ROLE: Загрузка, фильтрация и рендеринг списка задач в боковой панели (Drawer).
-===============================================================================
-*/
+ * ===============================================================================
+ * FILE: modules/web_api/static/js/tasks.js
+ * ROLE: Управление персональными задачами оператора (CRUD, фильтры, рендер).
+ * ===============================================================================
+ */
 
-let currentTaskFilter = 'IN_PROGRESS';
+let currentTasksFilter = 'ALL';
+let tasksCache = [];
+
+function getTasksContainer() {
+    return document.getElementById("tasks-list-container") || 
+           document.getElementById("sidebar-dynamic-content") ||
+           document.getElementById("tasks-list");
+}
 
 async function loadTasks() {
-    const token = typeof API_TOKEN !== 'undefined' && API_TOKEN ? API_TOKEN : localStorage.getItem("scud_api_auth_token");
-    if (!token) return;
+    const container = getTasksContainer();
+    if (!container) return;
+
+    container.innerHTML = `
+        <div class="text-center py-8 text-xs text-slate-400">
+            <i class="fa-solid fa-spinner fa-spin mr-1"></i> Загрузка задач...
+        </div>
+    `;
 
     try {
         const res = await fetch("/api/v1/tasks", {
-            headers: { "Authorization": "Bearer " + token }
+            headers: AuthManager.getAuthHeaders()
         });
-        if (res.ok) {
-            const data = await res.json();
-            renderSidebarTasks(data.tasks || []);
-        } else {
-            renderSidebarError("Ошибка доступа. Авторизуйтесь снова.");
+
+        if (!res.ok) {
+            if (res.status === 401) {
+                showAuthModal();
+                return;
+            }
+            throw new Error(`Ошибка сервера (${res.status})`);
         }
-    } catch (e) {
-        console.error("Ошибка загрузки задач:", e);
-        renderSidebarError("Ошибка сети. Сервер недоступен.");
+
+        const data = await res.json();
+        tasksCache = Array.isArray(data) ? data : (data.tasks || []);
+        renderTasksUI();
+    } catch (err) {
+        console.error("[Tasks] Ошибка загрузки:", err);
+        container.innerHTML = `
+            <div class="p-4 text-xs text-rose-500 text-center flex flex-col items-center gap-2">
+                <i class="fa-solid fa-triangle-exclamation text-base"></i>
+                <span>Не удалось загрузить задачи</span>
+                <button onclick="loadTasks()" class="px-2.5 py-1 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded text-[11px] font-semibold transition">Повторить</button>
+            </div>
+        `;
     }
 }
 
-function renderSidebarError(msg) {
-    // Поддерживаем оба варианта ID (новый и старый) для обратной совместимости
-    const container = document.getElementById("tasks-list") || document.getElementById("tasks-list-container");
-    if (container) {
-        container.innerHTML = `<div class="text-center py-8 text-xs text-rose-500 font-semibold">${msg}</div>`;
-    }
+function setTaskFilter(filter) {
+    currentTasksFilter = filter;
+    renderTasksUI();
 }
 
-function filterTasksByTab(status) {
-    currentTaskFilter = status;
-    
-    // Сброс стилей всех кнопок-вкладок
-    document.querySelectorAll('.task-tab-btn').forEach(btn => {
-        btn.classList.remove('text-indigo-600', 'bg-indigo-50');
-        btn.classList.add('text-slate-600');
-    });
-    
-    // Установка активного стиля для выбранной вкладки
-    const activeBtnId = {
-        'IN_PROGRESS': 'tab-in-progress',
-        'BACKLOG': 'tab-backlog',
-        'COMPLETED': 'tab-completed',
-        'ALL': 'tab-all'
-    }[status];
-    
-    if (activeBtnId) {
-        const btn = document.getElementById(activeBtnId);
-        if (btn) {
-            btn.classList.remove('text-slate-600', 'hover:bg-slate-100');
-            btn.classList.add('text-indigo-600', 'bg-indigo-50');
-        }
-    }
-    
-    loadTasks();
-}
-
-function renderSidebarTasks(tasks) {
-    const container = document.getElementById("tasks-list") || document.getElementById("tasks-list-container");
+function renderTasksUI() {
+    const container = getTasksContainer();
     if (!container) return;
-    
-    let filtered = tasks;
-    if (currentTaskFilter !== 'ALL') {
-        filtered = tasks.filter(t => t.status === currentTaskFilter);
+
+    let filtered = tasksCache;
+    if (currentTasksFilter === 'IN_PROGRESS') {
+        filtered = tasksCache.filter(t => t.status === 'IN_PROGRESS');
+    } else if (currentTasksFilter === 'BACKLOG') {
+        filtered = tasksCache.filter(t => t.status === 'BACKLOG' || t.status === 'PLANNED');
+    } else if (currentTasksFilter === 'COMPLETED') {
+        filtered = tasksCache.filter(t => t.status === 'COMPLETED' || t.status === 'DONE');
     }
 
+    const filtersHtml = `
+        <div class="flex items-center gap-1 p-1 bg-slate-200/70 rounded-lg text-[11px] font-semibold mb-2">
+            <button onclick="setTaskFilter('ALL')" class="flex-1 py-1 rounded text-center transition ${currentTasksFilter === 'ALL' ? 'bg-white text-indigo-700 shadow-sm' : 'text-slate-600 hover:text-slate-900'}">Все</button>
+            <button onclick="setTaskFilter('IN_PROGRESS')" class="flex-1 py-1 rounded text-center transition ${currentTasksFilter === 'IN_PROGRESS' ? 'bg-white text-indigo-700 shadow-sm' : 'text-slate-600 hover:text-slate-900'}">В работе</button>
+            <button onclick="setTaskFilter('BACKLOG')" class="flex-1 py-1 rounded text-center transition ${currentTasksFilter === 'BACKLOG' ? 'bg-white text-indigo-700 shadow-sm' : 'text-slate-600 hover:text-slate-900'}">Планы</button>
+            <button onclick="setTaskFilter('COMPLETED')" class="flex-1 py-1 rounded text-center transition ${currentTasksFilter === 'COMPLETED' ? 'bg-white text-indigo-700 shadow-sm' : 'text-slate-600 hover:text-slate-900'}">Готово</button>
+        </div>
+    `;
+
+    const addBtnHtml = `
+        <div class="flex items-center justify-between px-1 mb-1.5">
+            <span class="text-xs font-bold text-slate-700">Задачи: ${filtered.length}</span>
+            <button onclick="openCreateTaskModal()" class="px-2 py-1 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-[11px] font-bold shadow-sm flex items-center gap-1 transition">
+                <i class="fa-solid fa-plus text-[10px]"></i> Новая
+            </button>
+        </div>
+    `;
+
     if (filtered.length === 0) {
-        container.innerHTML = `<div class="text-center py-8 text-[11px] font-medium text-slate-400 bg-slate-50 rounded-xl border border-dashed border-slate-200">Нет задач в этой категории</div>`;
+        container.innerHTML = `
+            ${filtersHtml}
+            ${addBtnHtml}
+            <div class="text-center py-8 text-xs text-slate-400 bg-white border border-slate-200 rounded-xl p-4">
+                Нет задач в выбранной категории
+            </div>
+        `;
         return;
     }
 
-    container.innerHTML = filtered.map(t => {
-        const isCompleted = t.status === 'COMPLETED';
-        const priorityColor = t.priority === 'HIGH' || t.priority === 'CRITICAL' 
-            ? 'text-rose-600 bg-rose-50 border-rose-200' 
-            : t.priority === 'MEDIUM' 
-                ? 'text-amber-600 bg-amber-50 border-amber-200' 
-                : 'text-slate-600 bg-slate-50 border-slate-200';
-        
+    const itemsHtml = filtered.map(t => {
+        const isDone = t.status === 'COMPLETED' || t.status === 'DONE';
+        const priorityColors = {
+            'HIGH': 'bg-rose-50 text-rose-700 border-rose-200',
+            'MEDIUM': 'bg-amber-50 text-amber-700 border-amber-200',
+            'LOW': 'bg-slate-50 text-slate-600 border-slate-200'
+        };
+        const pClass = priorityColors[t.priority] || priorityColors['MEDIUM'];
+
         return `
-            <div class="p-3 bg-white border border-slate-200 rounded-xl shadow-sm hover:border-indigo-400 hover:shadow-md transition cursor-pointer flex flex-col gap-2 group" 
-                 onclick="handleActionButtonClick('покажи задачу ${t.id}')">
-                
+            <div class="flex flex-col p-2.5 bg-white border border-slate-200 rounded-xl text-xs gap-1.5 shadow-sm hover:border-indigo-300 transition">
                 <div class="flex items-start justify-between gap-2">
-                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider group-hover:text-indigo-500 transition">#${t.id}</span>
-                    ${isCompleted 
-                        ? `<span class="text-[10px] font-bold px-1.5 py-0.5 rounded-md bg-emerald-50 text-emerald-600 border border-emerald-200 shadow-sm"><i class="fa-solid fa-check mr-0.5"></i> Готово</span>`
-                        : `<span class="text-[10px] font-bold px-1.5 py-0.5 rounded-md ${priorityColor} shadow-sm">${t.priority || 'LOW'}</span>`
-                    }
+                    <div class="flex items-center gap-1.5 min-w-0">
+                        <button onclick="toggleTaskStatus(${t.id}, '${t.status}')" class="text-slate-400 hover:text-indigo-600 transition shrink-0">
+                            <i class="fa-${isDone ? 'solid fa-circle-check text-emerald-500' : 'regular fa-circle'} text-sm"></i>
+                        </button>
+                        <span class="font-bold text-slate-800 ${isDone ? 'line-through text-slate-400' : ''} truncate">${escapeHtml(t.title)}</span>
+                    </div>
+                    <span class="px-1.5 py-0.5 rounded text-[9px] font-semibold border ${pClass} shrink-0">${t.priority || 'NORMAL'}</span>
                 </div>
                 
-                <div class="text-xs font-semibold text-slate-700 leading-snug line-clamp-3">${escapeHtml(t.title || 'Без названия')}</div>
-                
-                <div class="flex items-center justify-between text-[10px] text-slate-400 mt-1">
-                    <span class="bg-slate-100 px-1.5 py-0.5 rounded font-mono truncate max-w-[120px]">${escapeHtml(t.module || 'general')}</span>
-                    ${t.due_date ? `<span class="shrink-0 font-medium text-slate-500"><i class="fa-regular fa-calendar mr-1"></i>${escapeHtml(t.due_date)}</span>` : ''}
+                <div class="flex items-center justify-between text-[10px] text-slate-400 pt-1 border-t border-slate-100">
+                    <span>${t.task_id || ('#' + t.id)} · ${escapeHtml(t.module || 'general')}</span>
+                    <div class="flex items-center gap-1">
+                        <button onclick="deleteTaskItem(${t.id})" class="text-slate-400 hover:text-rose-600 p-0.5 transition" title="Удалить">
+                            <i class="fa-solid fa-trash-can text-[11px]"></i>
+                        </button>
+                    </div>
                 </div>
             </div>
         `;
     }).join('');
+
+    container.innerHTML = `
+        ${filtersHtml}
+        ${addBtnHtml}
+        <div class="flex flex-col gap-1.5 max-h-[70vh] overflow-y-auto">
+            ${itemsHtml}
+        </div>
+    `;
 }
 
-// Глобальная инициализация при загрузке DOM
-document.addEventListener("DOMContentLoaded", () => {
-    // Небольшая задержка, чтобы гарантировать применение токена
-    setTimeout(loadTasks, 200);
-});
+async function toggleTaskStatus(id, currentStatus) {
+    const newStatus = (currentStatus === 'COMPLETED' || currentStatus === 'DONE') ? 'IN_PROGRESS' : 'COMPLETED';
+    try {
+        const res = await fetch(`/api/v1/tasks/${id}`, {
+            method: "PATCH",
+            headers: AuthManager.getAuthHeaders(),
+            body: JSON.stringify({ status: newStatus })
+        });
+        if (res.ok) {
+            loadTasks();
+        }
+    } catch (e) {
+        console.error("Ошибка смены статуса задачи:", e);
+    }
+}
+
+async function deleteTaskItem(id) {
+    if (!confirm("Удалить эту задачу?")) return;
+    try {
+        const res = await fetch(`/api/v1/tasks/${id}`, {
+            method: "DELETE",
+            headers: AuthManager.getAuthHeaders()
+        });
+        if (res.ok) {
+            loadTasks();
+        }
+    } catch (e) {
+        alert("Ошибка сети при удалении");
+    }
+}
+
+async function openCreateTaskModal() {
+    const title = prompt("Введите описание новой задачи:");
+    if (!title || !title.trim()) return;
+
+    try {
+        const res = await fetch("/api/v1/tasks", {
+            method: "POST",
+            headers: AuthManager.getAuthHeaders(),
+            body: JSON.stringify({
+                title: title.trim(),
+                priority: "MEDIUM",
+                status: "IN_PROGRESS"
+            })
+        });
+        if (res.ok) {
+            loadTasks();
+        } else {
+            alert("Не удалось создать задачу");
+        }
+    } catch (e) {
+        alert("Ошибка сети");
+    }
+}
+
+window.loadTasks = loadTasks;
+window.setTaskFilter = setTaskFilter;