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

VERSION

@@ -1 +1 @@
-4.7.3
+4.8.0

play-life-web/package.json

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

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

@@ -1,6 +1,7 @@
 .task-list {
   max-width: 42rem; /* max-w-2xl = 672px */
   margin: 0 auto;
+  padding-bottom: 6rem; /* Отступ для фиксированной кнопки добавления */
 }
 
 .add-task-button {
@@ -477,8 +478,15 @@
   margin-bottom: 2rem;
 }
 
+.project-group-no-tasks {
+  margin-bottom: 0.5rem;
+}
+
 .project-group-header {
   margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .project-group-title {
@@ -486,38 +494,31 @@
   font-weight: 600;
   color: #1f2937;
   margin: 0;
-  padding-bottom: 0.5rem;
-  border-bottom: 2px solid #e5e7eb;
 }
 
 .project-group-title-empty {
   color: #9ca3af;
 }
 
-.completed-section {
+.completed-toggle-header {
-  margin-top: 1rem;
-}
-
-.completed-toggle {
-  width: 100%;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.25rem;
-  padding: 0.75rem;
+  padding: 0.25rem 0.5rem;
   background: #f9fafb;
   border: 1px solid #e5e7eb;
-  border-radius: 0.5rem;
+  border-radius: 0.375rem;
   cursor: pointer;
   font-size: 0.875rem;
   font-weight: 500;
   color: #6b7280;
   transition: all 0.2s;
-  margin-bottom: 0.5rem;
 }
 
-.completed-toggle:hover {
+.completed-toggle-header:hover {
   background: #f3f4f6;
   color: #1f2937;
+  border-color: #d1d5db;
 }
 
 .completed-toggle-icon {
@@ -525,6 +526,11 @@
   transition: transform 0.2s;
 }
 
+.completed-toggle-count {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
 .completed-tasks {
   margin-top: 0.5rem;
 }

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,24 +798,11 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
             )}
 
             {/* Выполненные задачи */}
-            {hasCompleted && (
+            {hasCompleted && isCompletedExpanded && (
-              <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>
             )}
-              </div>
-            )}
 
             {group.notCompleted.length === 0 && !hasCompleted && (
               <div className="empty-group">Нет задач в этой группе</div>