From 436d6847b2e9f5fb98653598aacdc9796cae3a43 Mon Sep 17 00:00:00 2001
From: sHa <sha@shadoll.dev>
Date: Thu, 29 May 2025 11:45:14 +0300
Subject: [PATCH] feat: update tag labels for consistency and add clear all
 filters functionality

---
 public/data/logos.json       |  4 +--
 src/components/Header.svelte | 66 +++++++++++++++++++++++++++++++++---
 2 files changed, 63 insertions(+), 7 deletions(-)

diff --git a/public/data/logos.json b/public/data/logos.json
index 493bf93..9d3a7b6 100644
--- a/public/data/logos.json
+++ b/public/data/logos.json
@@ -413,7 +413,7 @@
     "disable": false,
     "brand": "Grafana",
     "tags": [
-      "monitoring",
+      "Monitoring Tools",
       "software"
     ]
   },
@@ -1167,7 +1167,7 @@
     "disable": false,
     "brand": "Uptime Kuma",
     "tags": [
-      "monitoring",
+      "Monitoring Tools",
       "software"
     ]
   },
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index d825de1..0cb74c2 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -255,9 +255,9 @@
                   </span>
                   <span class="hover-icon">
                     {#if compactMode}
-                      ❌
+                      ✕
                     {:else}
-                      ✔️
+                      ✔︎
                     {/if}
                   </span>
                 </span>
@@ -319,14 +319,14 @@
                         <span class="tag-icon">
                           <span class="permanent-icon">
                             {#if isSelected}
-                              ✔️
+                              ✔︎
                             {/if}
                           </span>
                           <span class="hover-icon">
                             {#if isSelected}
-                              ❌
+                              ✕
                             {:else}
-                              ✔️
+                              ✔︎
                             {/if}
                           </span>
                         </span>
@@ -347,6 +347,23 @@
                 {/if}
               </div>
             {/if}
+
+            {#if selectedTags.length > 0 || compactMode}
+              <div class="filter-separator"></div>
+              <div class="clear-all-section">
+                <button
+                  class="clear-all-button"
+                  on:click={() => {
+                    selectedTags.forEach(tag => removeTag(tag));
+                    if (compactMode) setCompactMode(false);
+                  }}
+                  aria-label="Clear all filters"
+                >
+                  <span class="clear-all-icon">✕</span>
+                  <span class="clear-all-text">Clear all</span>
+                </button>
+              </div>
+            {/if}
           </div>
         {/if}
       </div>
@@ -943,4 +960,43 @@
     transition: opacity 0.2s;
     position: absolute;
   }
+
+  .clear-all-section {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .clear-all-button {
+    background: none;
+    border: none;
+    padding: 0.4rem 0.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: background 0.2s;
+    text-align: left;
+    color: var(--color-text);
+    width: 100%;
+  }
+
+  .clear-all-button:hover {
+    background: var(--color-border);
+  }
+
+  .clear-all-icon {
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    font-size: 14px;
+  }
+
+  .clear-all-text {
+    font-size: 0.85em;
+    font-weight: 500;
+  }
 </style>