feat: Add tagging functionality to logos and enhance logo modal display

public/data/logos.json

@@ -3,60 +3,90 @@
     "name": "Apple (black)",
     "path": "logos/apple_black.svg",
     "format": "SVG",
-    "disable": false
+    "disable": false,
+    "tags": [
+      {"text":"tech", "color": "silver"}
+    ]
   },
   {
     "name": "ATB",
     "path": "logos/atb.svg",
     "format": "SVG",
-    "disable": false
+    "disable": false,
+    "tags": [
+      "retail"
+    ]
   },
   {
     "name": "Binance",
     "path": "logos/binance.svg",
     "format": "SVG",
-    "disable": false
+    "disable": false,
+    "tags": [
+      "crypto",
+      "finance",
+      "exchange"
+    ]
   },
   {
     "name": "Dalnoboy Service",
     "path": "logos/dalnoboy-service.svg",
     "format": "SVG",
-    "disable": false
+    "disable": false,
+    "tags": []
   },
   {
     "name": "Google",
     "path": "logos/google.svg",
     "format": "SVG",
-    "disable": false
+    "disable": false,
+    "tags": []
   },
   {
     "name": "Privatbank",
     "path": "logos/privatbank.png",
     "format": "PNG",
-    "disable": false
+    "disable": false,
+    "tags": [
+      "bank",
+      "finance"
+    ]
   },
   {
     "name": "Pumb",
     "path": "logos/pumb.png",
     "format": "PNG",
-    "disable": false
+    "disable": false,
+    "tags": [
+      "bank",
+      "finance"
+    ]
   },
   {
     "name": "Roomerin",
     "path": "logos/roomerin.svg",
     "format": "SVG",
-    "disable": false
+    "disable": false,
+    "tags": [
+      "furniture"
+    ]
   },
   {
     "name": "Shkafnik",
     "path": "logos/shkafnik.svg",
     "format": "SVG",
-    "disable": false
+    "disable": false,
+    "tags": [
+      "furniture"
+    ]
   },
   {
     "name": "Shkafnik Small",
     "path": "logos/shkafnik_small.png",
     "format": "PNG",
-    "disable": false
+    "disable": false,
+    "tags": [
+      "furniture"
+    ]
   }
-]
+]

scripts/scanLogos.js

@@ -61,9 +61,10 @@ function scanLogos() {
       const format = getFileExtension(file);
       const logoPath = `logos/${file}`;
       const existingItem = existingMap.get(logoPath);
+      let logoObj;
       if (existingItem) {
-        // Preserve name and disable, update format/path
+        // Preserve name, tags, and disable, update format/path
-        return {
+        logoObj = {
           ...existingItem,
           path: logoPath,
           format: format,
@@ -71,13 +72,18 @@ function scanLogos() {
         };
       } else {
         // New logo
-        return {
+        logoObj = {
           name: formatName(file),
           path: logoPath,
           format: format,
           disable: false
         };
       }
+      // Ensure tags field exists and is an array
+      if (!Array.isArray(logoObj.tags)) {
+        logoObj.tags = [];
+      }
+      return logoObj;
     });
     return logos;
   } catch (error) {

src/App.svelte

@@ -9,6 +9,9 @@
   let filteredLogos = [];
   let theme = 'system';
   let mq;
+  let allTags = [];
+  let selectedTags = [];
+  let tagDropdownOpen = false;
 
   // Load logos from JSON file with cache busting
   onMount(async () => {
@@ -53,11 +56,21 @@
     applyTheme();
   }
 
-  $: {
+  // Compute all unique tags as objects with text and optional color
-    filteredLogos = logos.filter(logo =>
+  $: allTags = Array.from(
-      logo.name.toLowerCase().includes(searchQuery.toLowerCase())
+    new Map(
-    );
+      logos.flatMap(logo => (logo.tags || []).map(tag => {
-  }
+        if (typeof tag === 'string') return [tag, { text: tag }];
+        return [tag.text, tag];
+      }))
+    ).values()
+  ).sort((a, b) => a.text.localeCompare(b.text));
+
+  $: filteredLogos = logos.filter(logo => {
+    const matchesSearch = logo.name.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesTags = !selectedTags.length || (logo.tags && logo.tags.some(tag => selectedTags.includes(typeof tag === 'string' ? tag : tag.text)));
+    return matchesSearch && matchesTags;
+  });
 
   function setGridView() {
     console.log('Setting view mode to: grid');
@@ -104,6 +117,46 @@
     console.log('[theme] setTheme:', newTheme);
     applyTheme();
   }
+
+  function toggleTag(tag) {
+    if (selectedTags.includes(tag)) {
+      selectedTags = selectedTags.filter(t => t !== tag);
+    } else {
+      selectedTags = [...selectedTags, tag];
+    }
+  }
+
+  function addTag(tag) {
+    if (!selectedTags.includes(tag)) {
+      selectedTags = [...selectedTags, tag];
+    }
+    tagDropdownOpen = false;
+  }
+
+  function removeTag(tag) {
+    selectedTags = selectedTags.filter(t => t !== tag);
+  }
+
+  function toggleDropdown() {
+    tagDropdownOpen = !tagDropdownOpen;
+  }
+
+  function closeDropdown(e) {
+    if (!e.target.closest('.tag-dropdown')) {
+      tagDropdownOpen = false;
+    }
+  }
+
+  function getTagObj(text) {
+    return allTags.find(t => t.text === text);
+  }
+
+  // Listen for outside click to close dropdown
+  $: if (tagDropdownOpen) {
+    window.addEventListener('click', closeDropdown);
+  } else {
+    window.removeEventListener('click', closeDropdown);
+  }
 </script>
 
 <main class="container">
@@ -126,6 +179,41 @@
       <div class="search-bar">
         <input type="text" placeholder="Search logos..." bind:value={searchQuery} />
       </div>
+      <div class="tag-filter">
+        {#each selectedTags as tagText}
+          {#if getTagObj(tagText)}
+            <button
+              class="selected-tag"
+              style={getTagObj(tagText).color ? `background: ${getTagObj(tagText).color}; color: #fff;` : ''}
+              aria-label={`Remove tag: ${getTagObj(tagText).text}`}
+              on:click={() => removeTag(getTagObj(tagText).text)}
+            >
+              {getTagObj(tagText).text}
+              <span class="close">&times;</span>
+            </button>
+          {/if}
+        {/each}
+        <div class="tag-dropdown">
+          <button class="dropdown-toggle" on:click={toggleDropdown} aria-label="Add tag filter">
+            + Tag{selectedTags.length ? '' : 's'}
+          </button>
+          {#if tagDropdownOpen}
+            <div class="dropdown-list">
+              {#each allTags.filter(t => !selectedTags.includes(t.text)) as tagObj}
+                <button
+                  class="dropdown-tag"
+                  style={tagObj.color ? `background: ${tagObj.color}; color: #fff;` : ''}
+                  on:click={() => addTag(tagObj.text)}
+                  aria-label={`Add tag: ${tagObj.text}`}
+                >{tagObj.text}</button>
+              {/each}
+              {#if allTags.filter(t => !selectedTags.includes(t.text)).length === 0}
+                <span class="no-tags">No more tags</span>
+              {/if}
+            </div>
+          {/if}
+        </div>
+      </div>
       <div class="view-toggle">
         <button class:active={viewMode === 'grid'} on:click={setGridView} aria-label="Grid view">
           <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="6" height="6" fill="currentColor"/><rect x="11" y="3" width="6" height="6" fill="currentColor"/><rect x="3" y="11" width="6" height="6" fill="currentColor"/><rect x="11" y="11" width="6" height="6" fill="currentColor"/></svg>
@@ -227,6 +315,108 @@
     opacity: 1;
   }
 
+  .tag-filter {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.3rem;
+    align-items: center;
+    margin-left: 1rem;
+    position: relative;
+  }
+
+  .tag-filter .selected-tag {
+    background: var(--color-accent, #4f8cff);
+    color: #fff;
+    border: none;
+    border-radius: 12px;
+    padding: 0.2em 0.8em 0.2em 0.8em;
+    font-size: 0.85em;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.3em;
+    opacity: 1;
+    transition: background 0.2s, color 0.2s;
+  }
+
+  .tag-filter .selected-tag .close {
+    margin-left: 0.4em;
+    font-size: 1.1em;
+    font-weight: bold;
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity 0.2s;
+  }
+
+  .tag-filter .selected-tag .close:hover {
+    opacity: 1;
+  }
+
+  .tag-dropdown {
+    position: relative;
+    display: inline-block;
+  }
+
+  .tag-dropdown .dropdown-toggle {
+    background: var(--color-card);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    border-radius: 12px;
+    padding: 0.2em 0.8em;
+    font-size: 0.85em;
+    font-weight: 500;
+    cursor: pointer;
+    margin-left: 0.2em;
+    transition: background 0.2s, color 0.2s;
+  }
+
+  .tag-dropdown .dropdown-list {
+    position: absolute;
+    left: 0;
+    top: 110%;
+    min-width: 120px;
+    background: var(--color-card);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+    z-index: 10;
+    padding: 0.4em 0.2em;
+    display: flex;
+    flex-direction: column;
+    gap: 0.2em;
+  }
+
+  .tag-dropdown .dropdown-tag {
+    background: var(--color-accent, #4f8cff);
+    color: #fff;
+    border: none;
+    border-radius: 12px;
+    padding: 0.2em 0.8em;
+    font-size: 0.85em;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    cursor: pointer;
+    opacity: 0.85;
+    margin: 0.1em 0;
+    text-align: left;
+    transition: background 0.2s, color 0.2s;
+  }
+
+  .tag-dropdown .dropdown-tag:hover {
+    opacity: 1;
+    background: var(--color-accent, #4f8cff);
+  }
+
+  .tag-dropdown .no-tags {
+    color: #888;
+    font-size: 0.85em;
+    padding: 0.3em 0.8em;
+    text-align: center;
+  }
+
   .view-toggle {
     display: flex;
     gap: 0.2rem;

src/components/LogoModal.svelte

@@ -49,6 +49,13 @@
         <div class="logo-details">
           <p><strong>Format:</strong> {logo.format}</p>
           <p><strong>Path:</strong> {logo.path}</p>
+          {#if logo.tags && logo.tags.length}
+            <div class="logo-tags">
+              {#each logo.tags as tagObj}
+                <span class="logo-tag" style={tagObj.color ? `background:${tagObj.color}` : ''}>{tagObj.text || tagObj}</span>
+              {/each}
+            </div>
+          {/if}
         </div>
       </div>
     </div>
@@ -133,4 +140,23 @@
   .logo-details p {
     margin-bottom: 0.5rem;
   }
+
+  .logo-tags {
+    margin-top: 1rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .logo-tag {
+    display: inline-block;
+    background: var(--color-accent, #4f8cff);
+    color: #fff;
+    border-radius: 12px;
+    padding: 0.2em 0.8em;
+    font-size: 0.85em;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    transition: background 0.2s;
+  }
 </style>