добавлены области сортировки

src/components/Section.vue

@@ -1,11 +1,39 @@
 <!-- AdminLogin.vue -->
 <template>
   <div class="w-full sm:w-4/5 dark:text-neutral-300">
-    <div class="bg-white flex justify-between p-5 dark:bg-gray-800 ">
-      <h1>Результат:</h1>
+    <div class="bg-white flex justify-between p-3 lg:p-5 dark:bg-gray-800">
+      <div class="flex flex-col lg:flex-row">
+        <div class="relative">
+          <img
+            v-if="isDarkMode"
+            src="https://img.icons8.com/?size=100&id=WwWusvLMTFd7&format=png&color=000000"
+            class="absolute top-4 left-3 h-5"
+          />
+          <img
+            v-else
+            src="https://img.icons8.com/?size=100&id=zR5EBMqZTIBz&format=png&color=000000"
+            class="absolute top-4 left-3 h-5"
+          />
+          <input
+            v-model="time"
+            type="text"
+            placeholder="Поиск..."
+            class="dark:bg-gray-900 border-slate-100 shadow rounded-xl p-3 pl-11"
+          />
+        </div>
+        <select
+          class="dark:bg-gray-900 border-slate-100 shadow rounded-xl h-12 p-3 mt-3 lg:mt-0 lg:ml-4 "
+        >
+          <option value="all">Все</option>
+          <option value="viewed">Просмотренные</option>
+          <option value="not_viewed">Непросмотренные</option>
+          <option value="status_true">Статус: True</option>
+          <option value="status_false">Статус: False</option>
+        </select>
+      </div>
       <Time />
     </div>
-    
+
     <div class="p-4">
       <Stat
         v-for="item in items"
@@ -17,18 +45,34 @@
         :short_text="item.short_text"
         :category="item.category"
         :parsed_at="item.parsed_at"
-        :status = "item.status"
-        :viewed = "item.viewed"
-        :other = "item.other"
+        :status="item.status"
+        :viewed="item.viewed"
+        :other="item.other"
       />
     </div>
   </div>
 </template>
 
 <script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
 import Stat from "./Stat.vue";
 import Time from "./Time.vue";
 
+const isDarkMode = ref(document.documentElement.classList.contains("dark"));
+// Следим за изменениями класса dark на html
+onMounted(() => {
+  // Инициализация при загрузке (если класс ещё не установлен)
+  isDarkMode.value = document.documentElement.classList.contains("dark");
+
+  const observer = new MutationObserver(() => {
+    isDarkMode.value = document.documentElement.classList.contains("dark");
+  });
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class"],
+  });
+});
+
 defineProps({
   items: Array,
 });

src/components/Setings.vue

@@ -248,7 +248,7 @@ const saveSources = async () => {
 // Запуск парсинга 1
 const start_parser_1 = async () => {
   try {
-    await axios.post("http://45.129.78.228:8001/parser_1", {
+    await axios.post("http://127.0.0.1:8001/parser_1", {
       time: time.value,
     });
   } catch (error) {