From feca528d1b519b11528a8bad96b250f6303322b5 Mon Sep 17 00:00:00 2001
From: Fovway <fovway@gmail.com>
Date: Sun, 2 Nov 2025 23:19:15 +0700
Subject: [PATCH] =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82?=
 =?UTF-8?q?=20TagsFilter=20=D0=B4=D0=BB=D1=8F=20=D1=83=D0=BB=D1=83=D1=87?=
 =?UTF-8?q?=D1=88=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=BE=D0=B1=D1=80=D0=B0=D0=B1?=
 =?UTF-8?q?=D0=BE=D1=82=D0=BA=D0=B8=20=D0=BA=D0=BB=D0=B8=D0=BA=D0=BE=D0=B2?=
 =?UTF-8?q?=20=D0=BF=D0=BE=20=D1=82=D0=B5=D0=B3=D0=B0=D0=BC,=20=D0=B4?=
 =?UTF-8?q?=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B0=20=D0=BF=D0=BE?=
 =?UTF-8?q?=D0=B4=D0=B4=D0=B5=D1=80=D0=B6=D0=BA=D0=B0=20touch-=D1=81=D0=BE?=
 =?UTF-8?q?=D0=B1=D1=8B=D1=82=D0=B8=D0=B9=20=D0=B8=20=D1=81=D0=B1=D1=80?=
 =?UTF-8?q?=D0=BE=D1=81=20=D1=84=D0=BE=D0=BA=D1=83=D1=81=D0=B0=20=D0=BF?=
 =?UTF-8?q?=D0=BE=D1=81=D0=BB=D0=B5=20=D0=BA=D0=BB=D0=B8=D0=BA=D0=B0.=20?=
 =?UTF-8?q?=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD=D1=8B=20=D1=81=D1=82?=
 =?UTF-8?q?=D0=B8=D0=BB=D0=B8=20=D0=B4=D0=BB=D1=8F=20=D1=82=D0=B5=D0=B3?=
 =?UTF-8?q?=D0=BE=D0=B2=20=D0=B2=20=D0=BC=D0=BE=D0=B1=D0=B8=D0=BB=D1=8C?=
 =?UTF-8?q?=D0=BD=D0=BE=D0=B9=20=D0=B2=D0=B5=D1=80=D1=81=D0=B8=D0=B8,=20?=
 =?UTF-8?q?=D1=83=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD=D0=B0=20=D0=B0=D0=B4?=
 =?UTF-8?q?=D0=B0=D0=BF=D1=82=D0=B8=D0=B2=D0=BD=D0=BE=D1=81=D1=82=D1=8C=20?=
 =?UTF-8?q?=D0=B8=20=D0=BF=D1=80=D0=B5=D0=B4=D0=BE=D1=82=D0=B2=D1=80=D0=B0?=
 =?UTF-8?q?=D1=89=D0=B5=D0=BD=D0=B8=D0=B5=20"=D0=B7=D0=B0=D0=BB=D0=B8?=
 =?UTF-8?q?=D0=BF=D0=B0=D0=BD=D0=B8=D1=8F"=20=D0=BD=D0=B0=20=D1=83=D1=81?=
 =?UTF-8?q?=D1=82=D1=80=D0=BE=D0=B9=D1=81=D1=82=D0=B2=D0=B0=D1=85=20=D1=81?=
 =?UTF-8?q?=20=D1=81=D0=B5=D0=BD=D1=81=D0=BE=D1=80=D0=BD=D1=8B=D0=BC=20?=
 =?UTF-8?q?=D1=8D=D0=BA=D1=80=D0=B0=D0=BD=D0=BE=D0=BC.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/search/TagsFilter.tsx | 11 ++++++--
 src/styles/style.css                 | 39 +++++++++++++++++++++++-----
 2 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/src/components/search/TagsFilter.tsx b/src/components/search/TagsFilter.tsx
index d3ba620..97d71c6 100644
--- a/src/components/search/TagsFilter.tsx
+++ b/src/components/search/TagsFilter.tsx
@@ -30,12 +30,15 @@ export const TagsFilter: React.FC<TagsFilterProps> = ({ notes = [] }) => {
   const tagCounts = getAllTags();
   const sortedTags = Object.keys(tagCounts).sort();
 
-  const handleTagClick = (tag: string) => {
+  const handleTagClick = (tag: string, event: React.MouseEvent<HTMLSpanElement>) => {
+    event.preventDefault();
     if (selectedTag === tag) {
       dispatch(setSelectedTag(null));
     } else {
       dispatch(setSelectedTag(tag));
     }
+    // Сбрасываем фокус после клика для предотвращения сохранения состояния :active
+    (event.currentTarget as HTMLElement).blur();
   };
 
   if (sortedTags.length === 0) {
@@ -72,7 +75,11 @@ export const TagsFilter: React.FC<TagsFilterProps> = ({ notes = [] }) => {
               key={tag}
               className={`tag ${isActive ? "active" : ""}`}
               data-tag={tag}
-              onClick={() => handleTagClick(tag)}
+              onClick={(e) => handleTagClick(tag, e)}
+              onTouchEnd={(e) => {
+                // Дополнительная обработка для touch-событий
+                e.currentTarget.blur();
+              }}
             >
               #{tag}
               <span className="tag-count">{count}</span>
diff --git a/src/styles/style.css b/src/styles/style.css
index a1cb390..985bbaf 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -2562,19 +2562,49 @@ textarea:focus {
   text-overflow: ellipsis;
   white-space: nowrap;
   word-break: break-word;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
 }
 
-.mobile-sidebar .tag:hover {
+.mobile-sidebar .tag:not(.active) {
+  background-color: rgba(var(--accent-color-rgb), 0.1) !important;
+  color: var(--accent-color) !important;
+}
+
+.mobile-sidebar .tag:not(.active):hover {
   background-color: var(--accent-color, #007bff);
   color: white;
 }
 
+/* Отключаем hover эффекты на touch-устройствах для предотвращения "залипания" */
+@media (hover: none) and (pointer: coarse) {
+  .mobile-sidebar .tag:not(.active):hover {
+    background-color: rgba(var(--accent-color-rgb), 0.1) !important;
+    color: var(--accent-color) !important;
+  }
+}
+
+.mobile-sidebar .tag:not(.active):active,
+.mobile-sidebar .tag:not(.active):focus,
+.mobile-sidebar .tag:not(.active):focus:active {
+  background-color: rgba(var(--accent-color-rgb), 0.1) !important;
+  color: var(--accent-color) !important;
+  outline: none;
+}
+
 .mobile-sidebar .tag.active {
   background-color: var(--accent-color, #007bff);
   color: white;
   font-weight: bold;
 }
 
+.mobile-sidebar .tag.active:active,
+.mobile-sidebar .tag.active:focus {
+  background-color: var(--accent-color, #007bff);
+  color: white;
+  outline: none;
+}
+
 .mobile-sidebar .tag-count {
   margin-left: 3px;
   font-size: 8px;
@@ -4817,12 +4847,7 @@ textarea:focus {
 }
 
 /* Очень маленькие экраны */
-@media (max-width: 480px) {
-  .mobile-menu-btn {
-    top: 10px;
-    left: 10px;
-    padding: 8px 10px;
-  }
+
 
   .mobile-menu-btn .iconify {
     font-size: 20px;