Сортировка групп задач и серый заголовок

VERSION

@@ -1 +1 @@
-3.10.3
+3.10.4

play-life-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "play-life-web",
-  "version": "3.10.3",
+  "version": "3.10.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

play-life-web/src/components/TaskList.css

@@ -461,6 +461,10 @@
   border-bottom: 2px solid #e5e7eb;
 }
 
+.project-group-title-empty {
+  color: #9ca3af;
+}
+
 .completed-section {
   margin-top: 1rem;
 }

play-life-web/src/components/TaskList.jsx

@@ -468,6 +468,24 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
     return groups
   }, [tasks])
 
+  // Сортируем проекты: сначала с невыполненными задачами, потом без них
+  const projectNames = useMemo(() => {
+    const sorted = Object.keys(groupedTasks).sort((a, b) => {
+      const groupA = groupedTasks[a]
+      const groupB = groupedTasks[b]
+      const hasNotCompletedA = groupA.notCompleted.length > 0
+      const hasNotCompletedB = groupB.notCompleted.length > 0
+      
+      // Если у одной группы есть невыполненные, а у другой нет - сортируем по этому признаку
+      if (hasNotCompletedA && !hasNotCompletedB) return -1
+      if (!hasNotCompletedA && hasNotCompletedB) return 1
+      
+      // Если обе группы в одной категории - сортируем по алфавиту
+      return a.localeCompare(b)
+    })
+    return sorted
+  }, [groupedTasks])
+
   const renderTaskItem = (task, isCompleted = false) => {
     const hasProgression = task.has_progression || task.progression_base != null
     const hasSubtasks = task.subtasks_count > 0
@@ -647,8 +665,6 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
     )
   }
 
-  const projectNames = Object.keys(groupedTasks).sort()
-
   return (
     <div className="task-list">
       {toast && (
@@ -671,12 +687,13 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
       {projectNames.map(projectName => {
         const group = groupedTasks[projectName]
         const hasCompleted = group.completed.length > 0
+        const hasNotCompleted = group.notCompleted.length > 0
         const isCompletedExpanded = expandedCompleted[projectName]
 
         return (
           <div key={projectName} className="project-group">
             <div className="project-group-header">
-              <h3 className="project-group-title">{projectName}</h3>
+              <h3 className={`project-group-title ${!hasNotCompleted ? 'project-group-title-empty' : ''}`}>{projectName}</h3>
             </div>
             
             {/* Обычные задачи (включая бесконечные) */}