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

2025-12-20 03:26:59 +00:00 · 2025-04-28 11:51:43 +03:00
parent 5446646519
commit 51ea3c3dba
4 changed files with 271 additions and 19 deletions
--- a/public/data/logos.json
+++ b/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"
+    ]
  }
-]
+]
--- a/scripts/scanLogos.js
+++ b/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
-        return {
+        // Preserve name, tags, and disable, update format/path
+        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) {
--- a/src/App.svelte
+++ b/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();
  }

-  $: {
-    filteredLogos = logos.filter(logo =>
-      logo.name.toLowerCase().includes(searchQuery.toLowerCase())
-    );
-  }
+  // Compute all unique tags as objects with text and optional color
+  $: allTags = Array.from(
+    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;
--- a/src/components/LogoModal.svelte
+++ b/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>