refactor: simplify tag handling by removing dependency on tags.json and updating tag object structure

src/App.svelte

@@ -55,15 +55,12 @@
     applyTheme();
   }
 
-  // Compute all unique tags as objects with text and optional color
+  // Compute all unique tags as strings
   $: 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));
+    new Set(
+      logos.flatMap(logo => (logo.tags || []))
+    )
+  ).map(tag => typeof tag === 'object' ? tag.text : tag);
 
   $: filteredLogos = logos.filter(logo => {
     const matchesSearch = logo.name.toLowerCase().includes(searchQuery.toLowerCase());
@@ -179,7 +176,7 @@
   }
 
   function getTagObj(text) {
-    return allTags.find(t => t.text === text);
+    return { text };
   }
 
   // Listen for outside click to close dropdown
@@ -215,17 +212,14 @@
       </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}
+          <button
+            class="selected-tag"
+            aria-label={`Remove tag: ${tagText}`}
+            on:click={() => removeTag(tagText)}
+          >
+            <span>{tagText}</span>
+            <span class="close">×</span>
+          </button>
         {/each}
         <div class="tag-dropdown">
           <button class="dropdown-toggle" on:click={toggleDropdown} aria-label="Add tag filter">
@@ -233,15 +227,15 @@
           </button>
           {#if tagDropdownOpen}
             <div class="dropdown-list">
-              {#each allTags.filter(t => !selectedTags.includes(t.text)) as tagObj}
+              {#each allTags.filter(tag => !selectedTags.includes(tag)) as tag}
                 <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>
+                  on:click={() => toggleTag(tag)}
+                >
+                  {tag}
+                </button>
               {/each}
-              {#if allTags.filter(t => !selectedTags.includes(t.text)).length === 0}
+              {#if allTags.filter(tag => !selectedTags.includes(tag)).length === 0}
                 <span class="no-tags">No more tags</span>
               {/if}
             </div>

src/components/Preview.svelte

@@ -2,8 +2,6 @@
   import { onMount, onDestroy, createEventDispatcher } from 'svelte';
   import InlineSvg from './InlineSvg.svelte';
   import { getDefaultLogoColor } from '../utils/colorTheme.js';
-  import tagsData from '../../public/data/tags.json';
-  console.log('Loaded tagsData:', tagsData);
 
   export let show = false;
   export let logo = null;
@@ -24,11 +22,9 @@
     return logo && logo.format && logo.format.toLowerCase() === 'svg';
   }
 
-  // Helper to get tag object from tags.json by text
+  // Helper to get tag object - simplified without tags.json
   function getTagObj(text) {
-    const tag = tagsData && typeof tagsData === 'object' && tagsData[text] ? { text, ...tagsData[text] } : { text };
-    console.log('[LogoModal] Tag lookup:', text, tag, tagsData);
-    return tag;
+    return { text: typeof text === 'object' ? text.text : text };
   }
 
   // Always use $theme directly, do not cache in a function
@@ -45,7 +41,6 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
   $: if (logo && logo.tags && logo.tags.length) {
     logo.tags.forEach(tag => {
       console.log('[LogoModal] Tag:', tag);
-      getTagObj(tag);
     });
   }
 
@@ -129,11 +124,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
           {#if logo.tags && logo.tags.length}
             <div class="logo-tags">
               {#each logo.tags as tag}
-                {#if getTagObj(tag).color}
-                  <span class="logo-tag" style={`background:${getTagObj(tag).color}`}>{getTagObj(tag).text}</span>
-                {:else}
-                  <span class="logo-tag">{getTagObj(tag).text}</span>
-                {/if}
+                <span class="logo-tag">{typeof tag === 'object' ? tag.text : tag}</span>
               {/each}
             </div>
           {/if}

src/components/Row.svelte

@@ -7,10 +7,6 @@
   export let onPreview = null;
   import InlineSvg from './InlineSvg.svelte';
   import { getDefaultLogoColor } from '../utils/colorTheme.js';
-  import tagsData from '../../public/data/tags.json';
-  function getTagObj(text) {
-    return tagsData[text] ? { text, ...tagsData[text] } : { text };
-  }
 </script>
 
 <div class="logo-row {view}">
@@ -53,11 +49,7 @@
     {#if logo.tags && logo.tags.length}
       <div class="logo-tags">
         {#each logo.tags as tag}
-          {#if getTagObj(tag).color}
-            <span class="logo-tag" style={`background:${getTagObj(tag).color}`}>{getTagObj(tag).text}</span>
-          {:else}
-            <span class="logo-tag">{getTagObj(tag).text}</span>
-          {/if}
+          <span class="logo-tag">{typeof tag === 'object' ? tag.text : tag}</span>
         {/each}
       </div>
     {/if}