From a007d67828a762827f0408d52f68c5913c2510ab Mon Sep 17 00:00:00 2001
From: sHa <sha@shadoll.dev>
Date: Sun, 4 May 2025 13:51:12 +0300
Subject: [PATCH] display brand count in filter buttons

---
 src/App.svelte             |  4 +++-
 src/components/Grid.svelte | 13 ++++++++++++-
 src/components/List.svelte | 15 +++++++++++++--
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index e714360..ea75e1b 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -316,16 +316,18 @@
     {#if viewMode === "grid"}
       <Grid
         logos={displayLogos}
+        allLogos={logos}
         onCopy={copyUrl}
         onDownload={downloadLogo}
-        theme={effectiveTheme}
         setSearchQuery={setSearchQuery}
+        theme={effectiveTheme}
         on:openPreview={(e) => openPreview(e.detail)}
         {compactMode}
       />
     {:else}
       <List
         logos={displayLogos}
+        allLogos={logos}
         onCopy={copyUrl}
         onDownload={downloadLogo}
         setSearchQuery={setSearchQuery}
diff --git a/src/components/Grid.svelte b/src/components/Grid.svelte
index 9a30bfd..d7f0e45 100644
--- a/src/components/Grid.svelte
+++ b/src/components/Grid.svelte
@@ -9,6 +9,7 @@
   export let onCopy;
   export let onDownload;
   export let setSearchQuery;
+  export let allLogos = [];
 
   let showModal = false;
   let selectedLogo = null;
@@ -73,6 +74,9 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
           <h3>{logo.name}</h3>
           <button class="brand-filter-btn" title="Filter by brand" on:click={() => setSearchQuery(logo.brand)}>
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z"/></svg>
+            {#if allLogos && allLogos.filter(l => l.brand === logo.brand).length > 1}
+              <span class="brand-count">{allLogos.filter(l => l.brand === logo.brand).length}</span>
+            {/if}
           </button>
         </div>
         <div class="format-row">
@@ -161,14 +165,21 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
     border: none;
     color: var(--color-text);
     cursor: pointer;
-    padding: 0.2em;
+    padding: 0.3em 0.8em 0.1em 0.3em;
     border-radius: 4px;
     transition: background 0.2s, color 0.2s;
     z-index: 2;
     margin-left: 0.5em;
+    position: relative;
   }
   .brand-filter-btn:hover {
     background: var(--color-accent, #4f8cff);
     color: #fff;
   }
+
+  .brand-count {
+    font-size: 0.85em;
+    position: absolute;
+    bottom: 0;
+  }
 </style>
diff --git a/src/components/List.svelte b/src/components/List.svelte
index 4b3e584..f49e8bc 100644
--- a/src/components/List.svelte
+++ b/src/components/List.svelte
@@ -6,6 +6,7 @@
   import { onMount, onDestroy } from "svelte";
 
   export let logos = [];
+  export let allLogos = [];
   export let onCopy;
   export let onDownload;
   export let setSearchQuery;
@@ -167,6 +168,9 @@
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
             <path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z"/>
           </svg>
+          {#if allLogos && allLogos.filter(l => l.brand === logo.brand).length > 1}
+            <span class="brand-count-index">{allLogos.filter(l => l.brand === logo.brand).length}</span>
+          {/if}
         </button>
         <Actions {logo} {onCopy} {onDownload} />
       </div>
@@ -230,10 +234,10 @@
     color: #fff;
   }
   .brand-filter-btn.common-btn {
-    background: var(--color-accent, #4f8cff);
+    background: var(--secondary-color);
     color: #fff;
     border: none;
-    padding: 0.4em 0.6em;
+    padding: 0.4em 0.8em 0.4em 0.3em;
     border-radius: 6px;
     display: inline-flex;
     align-items: center;
@@ -242,11 +246,18 @@
     transition: background 0.2s, color 0.2s;
     margin-left: 0.5em;
     box-shadow: 0 1px 2px rgba(0,0,0,0.04);
+    position: relative;
   }
   .brand-filter-btn.common-btn:hover {
     background: var(--color-accent-dark, #3576c7);
     color: #fff;
   }
+  .brand-count-index {
+    position: absolute;
+    font-size: 0.85em;
+    bottom: 0.1em;
+    right: 0.3em;
+  }
   .logo-list-title-row {
     display: flex;
     align-items: center;