4.8.0: Улучшен UI списка задач

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

@@ -774,9 +774,20 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
         const isCompletedExpanded = expandedCompleted[projectName]
 
         return (
-          <div key={projectName} className="project-group">
+          <div key={projectName} className={`project-group ${!hasNotCompleted ? 'project-group-no-tasks' : ''}`}>
             <div className="project-group-header">
               <h3 className={`project-group-title ${!hasNotCompleted ? 'project-group-title-empty' : ''}`}>{projectName}</h3>
+              {hasCompleted && (
+                <button
+                  className="completed-toggle-header"
+                  onClick={() => toggleCompletedExpanded(projectName)}
+                  title={isCompletedExpanded ? 'Скрыть выполненные' : 'Показать выполненные'}
+                >
+                  <span className="completed-toggle-icon">
+                    {isCompletedExpanded ? '▼' : '▶'}
+                  </span>
+                </button>
+              )}
             </div>
             
             {/* Обычные задачи (включая бесконечные) */}
@@ -787,22 +798,9 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
             )}
 
             {/* Выполненные задачи */}
-            {hasCompleted && (
-              <div className="completed-section">
-                <button
-                  className="completed-toggle"
-                  onClick={() => toggleCompletedExpanded(projectName)}
-                >
-                  <span className="completed-toggle-icon">
-                    {isCompletedExpanded ? '▼' : '▶'}
-                  </span>
-                  <span>Выполненные ({group.completed.length})</span>
-                </button>
-                {isCompletedExpanded && (
-                  <div className="task-group completed-tasks">
-                    {group.completed.map(task => renderTaskItem(task, true))}
-                  </div>
-                )}
+            {hasCompleted && isCompletedExpanded && (
+              <div className="task-group completed-tasks">
+                {group.completed.map(task => renderTaskItem(task, true))}
               </div>
             )}