Обновлен компонент TagsFilter для улучшения обработки кликов по тегам, добавлена поддержка touch-событий и сброс фокуса после клика. Изменены стили для тегов в мобильной версии, улучшена адаптивность и предотвращение "залипания" на устройствах с сенсорным экраном.

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>

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;