From f017d480e86209947580c531b169ddbb2611c121 Mon Sep 17 00:00:00 2001
From: sHa <sha@shadoll.dev>
Date: Sun, 4 May 2025 12:48:15 +0300
Subject: [PATCH] Enhance Header and List components with compact mode
 functionality

---
 public/data/logos.json       |  44 ++++++-------
 public/global.css            |   1 +
 src/App.svelte               |  35 ++++++++++-
 src/components/Header.svelte | 117 ++++++++++++++++++++++++++++++++---
 src/components/List.svelte   |   2 +-
 5 files changed, 163 insertions(+), 36 deletions(-)

diff --git a/public/data/logos.json b/public/data/logos.json
index 05f4088..f6f65b8 100644
--- a/public/data/logos.json
+++ b/public/data/logos.json
@@ -663,28 +663,6 @@
     ],
     "brand": "PostgreSQL"
   },
-  {
-    "name": "Privat24",
-    "path": "logos/privat24.svg",
-    "format": "SVG",
-    "disable": false,
-    "brand": "PrivatBank",
-    "tags": [
-      "bank",
-      "finance"
-    ]
-  },
-  {
-    "name": "Privat24 Bussiness",
-    "path": "logos/privat24bussiness.svg",
-    "format": "SVG",
-    "disable": false,
-    "brand": "PrivatBank",
-    "tags": [
-      "bank",
-      "finance"
-    ]
-  },
   {
     "name": "Privatbank",
     "path": "logos/privatbank.svg",
@@ -707,6 +685,28 @@
       "finance"
     ]
   },
+  {
+    "name": "Privat24",
+    "path": "logos/privat24.svg",
+    "format": "SVG",
+    "disable": false,
+    "brand": "PrivatBank",
+    "tags": [
+      "bank",
+      "finance"
+    ]
+  },
+  {
+    "name": "Privat24 Bussiness",
+    "path": "logos/privat24bussiness.svg",
+    "format": "SVG",
+    "disable": false,
+    "brand": "PrivatBank",
+    "tags": [
+      "bank",
+      "finance"
+    ]
+  },
   {
     "name": "Puma",
     "path": "logos/puma.svg",
diff --git a/public/global.css b/public/global.css
index 9e0be95..ba9e265 100644
--- a/public/global.css
+++ b/public/global.css
@@ -516,6 +516,7 @@ div.logo-image img {
   margin-left: 1rem;
   align-self: center;
   opacity: 0.7;
+  padding-top: 0.9rem;
 }
 
 .theme-switcher {
diff --git a/src/App.svelte b/src/App.svelte
index 51f58f4..e714360 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -9,6 +9,7 @@
   let searchQuery = "";
   let logos = [];
   let filteredLogos = [];
+  let displayLogos = [];
   let theme = "system";
   let mq;
   let allTags = [];
@@ -16,11 +17,17 @@
   let tagDropdownOpen = false;
   let showModal = false;
   let selectedLogo = null;
+  let compactMode = false;
 
   function setSearchQuery(val) {
     searchQuery = val;
   }
 
+  function setCompactMode(val) {
+    compactMode = val;
+    localStorage.setItem("compactMode", String(val));
+  }
+
   // Load logos from JSON file with cache busting
   onMount(async () => {
     try {
@@ -72,6 +79,16 @@
     if (searchParam) {
       searchQuery = searchParam;
     }
+
+    // Restore view mode and compact mode from localStorage
+    const savedViewMode = localStorage.getItem("viewMode");
+    if (savedViewMode === "grid" || savedViewMode === "list") {
+      viewMode = savedViewMode;
+    }
+    const savedCompact = localStorage.getItem("compactMode");
+    if (savedCompact === "true" || savedCompact === "false") {
+      setCompactMode(savedCompact === "true");
+    }
   });
 
   // Make sure to apply theme whenever it changes
@@ -104,6 +121,11 @@
     return matchesSearch && matchesTags;
   });
 
+  $: displayLogos = (!searchQuery && compactMode)
+    ? filteredLogos.filter((logo, idx, arr) =>
+        arr.findIndex(l => (l.brand || l.name) === (logo.brand || logo.name)) === idx)
+    : filteredLogos;
+
   // Compute the effective theme for children
   $: effectiveTheme =
     theme === "system"
@@ -115,11 +137,13 @@
   function setGridView() {
     console.log("Setting view mode to: grid");
     viewMode = "grid";
+    localStorage.setItem("viewMode", "grid");
   }
 
   function setListView() {
     console.log("Setting view mode to: list");
     viewMode = "list";
+    localStorage.setItem("viewMode", "list");
   }
 
   function copyUrl(logoPath) {
@@ -257,7 +281,8 @@
 
 <main class="container app-flex">
   <Header
-    {logos}
+    logos={logos}
+    displayLogos={displayLogos}
     {theme}
     {setTheme}
     {viewMode}
@@ -275,6 +300,8 @@
     {getTagObj}
     {closeDropdown}
     {filteredLogos}
+    {compactMode}
+    setCompactMode={setCompactMode}
   />
 
   <Preview
@@ -288,20 +315,22 @@
   <div class="logos-container main-content">
     {#if viewMode === "grid"}
       <Grid
-        logos={filteredLogos}
+        logos={displayLogos}
         onCopy={copyUrl}
         onDownload={downloadLogo}
         theme={effectiveTheme}
         setSearchQuery={setSearchQuery}
         on:openPreview={(e) => openPreview(e.detail)}
+        {compactMode}
       />
     {:else}
       <List
-        logos={filteredLogos}
+        logos={displayLogos}
         onCopy={copyUrl}
         onDownload={downloadLogo}
         setSearchQuery={setSearchQuery}
         on:openPreview={(e) => openPreview(e.detail)}
+        {compactMode}
       />
     {/if}
   </div>
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 5640434..68e94e5 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -1,7 +1,8 @@
 <script>
-  import { onMount } from 'svelte';
+  import { onMount } from "svelte";
 
   export let logos = [];
+  export let displayLogos = [];
   export let theme;
   export let setTheme;
   export let viewMode;
@@ -16,6 +17,8 @@
   export let addTag;
   export let removeTag;
   export let getTagObj;
+  export let compactMode = false;
+  export let setCompactMode = () => {};
 
   function onInput(event) {
     searchQuery = event.target.value;
@@ -23,19 +26,27 @@
     // Update URL with search param
     const params = new URLSearchParams(window.location.search);
     if (searchQuery) {
-      params.set('search', searchQuery);
+      params.set("search", searchQuery);
     } else {
-      params.delete('search');
+      params.delete("search");
     }
-    const newUrl = window.location.pathname + (params.toString() ? '?' + params.toString() : '');
-    history.replaceState(null, '', newUrl);
+    const newUrl =
+      window.location.pathname +
+      (params.toString() ? "?" + params.toString() : "");
+    history.replaceState(null, "", newUrl);
   }
 </script>
 
 <header class="main-header">
   <div class="header-row">
     <h1>Logo Gallery</h1>
-    <span class="logo-count">{logos.length} images in gallery</span>
+    <span class="logo-count">
+      {#if displayLogos && logos && displayLogos.length === logos.length}
+        {logos.length} images in gallery
+      {:else}
+        {displayLogos ? displayLogos.length : 0} of {logos ? logos.length : 0} images displayed
+      {/if}
+    </span>
     <div class="theme-switcher">
       <div class="theme-switch-group">
         <button
@@ -117,9 +128,33 @@
         aria-label="Search logos"
       />
       {#if searchQuery}
-        <button class="clear-btn" on:click={() => { searchQuery = ''; setSearchQuery(''); const params = new URLSearchParams(window.location.search); params.delete('search'); const newUrl = window.location.pathname + (params.toString() ? '?' + params.toString() : ''); history.replaceState(null, '', newUrl); }} aria-label="Clear search">
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M4 4L12 12M12 4L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        <button
+          class="clear-btn"
+          on:click={() => {
+            searchQuery = "";
+            setSearchQuery("");
+            const params = new URLSearchParams(window.location.search);
+            params.delete("search");
+            const newUrl =
+              window.location.pathname +
+              (params.toString() ? "?" + params.toString() : "");
+            history.replaceState(null, "", newUrl);
+          }}
+          aria-label="Clear search"
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M4 4L12 12M12 4L4 12"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+            />
           </svg>
         </button>
       {/if}
@@ -163,6 +198,47 @@
       </div>
     </div>
     <div class="view-toggle">
+      <button
+        class="compact-switch-btn"
+        aria-label="Toggle compact mode"
+        class:active={compactMode}
+        on:click={() => setCompactMode(!compactMode)}
+        title="Show only one logo per brand (compact mode)"
+      >
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M10 11L3 11"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M10 16H3"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M14 13.5L16.1 16L20 11"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M3 6L13.5 6M20 6L17.75 6"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+          />
+        </svg>
+      </button>
       <button
         class:active={viewMode === "grid"}
         on:click={setGridView}
@@ -184,7 +260,8 @@
             x="11"
             y="11"
             width="6"
-            height="6" fill="currentColor"
+            height="6"
+            fill="currentColor"
           /></svg
         >
       </button>
@@ -238,4 +315,24 @@
   .clear-btn:hover {
     color: #f44336;
   }
+  .compact-switch-btn {
+    background: none;
+    border: none;
+    color: var(--color-text);
+    cursor: pointer;
+    padding: 0.3em 0.6em;
+    border-radius: 6px;
+    margin-right: 0.5em;
+    font-size: 1.1em;
+    display: inline-flex;
+    align-items: center;
+    transition:
+      background 0.2s,
+      color 0.2s;
+  }
+  .compact-switch-btn.active,
+  .compact-switch-btn:hover {
+    background: var(--color-accent, #4f8cff);
+    color: #fff;
+  }
 </style>
diff --git a/src/components/List.svelte b/src/components/List.svelte
index 5a910be..4b3e584 100644
--- a/src/components/List.svelte
+++ b/src/components/List.svelte
@@ -226,7 +226,7 @@
     margin-left: 0.5em;
   }
   .brand-filter-btn:hover {
-    background: var(--color-accent, #4f8cff);
+    background: var(--color-accent-light, #e0f0ff);
     color: #fff;
   }
   .brand-filter-btn.common-btn {