4.10.0: Добавлен поиск задач с иконкой

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

@@ -4,6 +4,68 @@
   padding-bottom: 2.5rem; /* Отступ для фиксированной кнопки добавления */
 }
 
+.task-search-container {
+  position: relative;
+  margin-bottom: 1.5rem;
+}
+
+.task-search-icon {
+  position: absolute;
+  left: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #9ca3af;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.task-search-input {
+  width: 100%;
+  padding: 0.75rem 2.5rem 0.75rem 2.75rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  font-size: 1rem;
+  background: white;
+  color: #1f2937;
+  transition: all 0.2s;
+}
+
+.task-search-input:focus {
+  outline: none;
+  border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+.task-search-input::placeholder {
+  color: #9ca3af;
+}
+
+.task-search-clear {
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: #9ca3af;
+  cursor: pointer;
+  padding: 0.25rem;
+  font-size: 1.125rem;
+  line-height: 1;
+  border-radius: 0.25rem;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.task-search-clear:hover {
+  background: #f3f4f6;
+  color: #1f2937;
+}
+
 .add-task-button {
   width: 100%;
   padding: 0.75rem 1rem;

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

@@ -18,6 +18,7 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
   const [postponeDate, setPostponeDate] = useState('')
   const [isPostponing, setIsPostponing] = useState(false)
   const [toast, setToast] = useState(null)
+  const [searchQuery, setSearchQuery] = useState('')
   const dateInputRef = useRef(null)
 
   useEffect(() => {
@@ -443,9 +444,16 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
     const today = new Date()
     today.setHours(0, 0, 0, 0)
 
+    // Фильтруем задачи по поисковому запросу
+    const filteredTasks = searchQuery.trim()
+      ? tasks.filter(task => 
+          task.name.toLowerCase().includes(searchQuery.toLowerCase())
+        )
+      : tasks
+
     const groups = {}
     
-    tasks.forEach(task => {
+    filteredTasks.forEach(task => {
       const projects = getTaskProjects(task)
       
       // Если у задачи нет проектов, добавляем в группу "Без проекта"
@@ -534,7 +542,7 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
     })
     
     return groups
-  }, [tasks])
+  }, [tasks, searchQuery])
 
   // Сортируем проекты: сначала с невыполненными задачами, потом без них
   // Группа "Без проекта" всегда последняя в своей категории
@@ -813,6 +821,40 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
         />
       )}
 
+      {/* Поле поиска */}
+      <div className="task-search-container">
+        <svg
+          className="task-search-icon"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <circle cx="11" cy="11" r="8"></circle>
+          <path d="m21 21-4.35-4.35"></path>
+        </svg>
+        <input
+          type="text"
+          className="task-search-input"
+          placeholder="Поиск задач..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+        />
+        {searchQuery && (
+          <button
+            className="task-search-clear"
+            onClick={() => setSearchQuery('')}
+            title="Очистить поиск"
+          >
+            ✕
+          </button>
+        )}
+      </div>
+
       {projectNames.length === 0 && !loading && tasks.length === 0 && (
         <div className="empty-state">
           <p>Задач пока нет. Добавьте задачу через кнопку "Добавить".</p>