feat: implement tag data loading and refactor tag handling in components

ToDo.md

@@ -0,0 +1,2 @@
+- png/jpg genareto can generate image all colors
+- for color palette add support combination

src/App.svelte

@@ -141,6 +141,7 @@
       effectiveTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
     }
     document.documentElement.setAttribute('data-theme', effectiveTheme);
+    console.log('[theme] Applied theme:', effectiveTheme, '(from', theme, ')');
   }
 
   function setTheme(newTheme) {
@@ -179,10 +180,6 @@
     }
   }
 
-  function getTagObj(text) {
-    return allTags.find(t => t.text === text);
-  }
-
   // Listen for outside click to close dropdown
   $: if (tagDropdownOpen) {
     window.addEventListener('click', closeDropdown);
@@ -207,7 +204,6 @@
     {addTag}
     {removeTag}
     {toggleTag}
-    {getTagObj}
     {closeDropdown}
     {filteredLogos}
   />

src/components/Header.svelte

@@ -12,7 +12,6 @@
   export let toggleDropdown;
   export let addTag;
   export let removeTag;
-  export let getTagObj;
 </script>
 
 <header class="main-header">
@@ -39,17 +38,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)}
+            aria-label={`Remove tag: ${tagText}`}
+            on:click={() => removeTag(tagText)}
           >
-            {getTagObj(tagText).text}
+            {tagText}
             <span class="close">&times;</span>
           </button>
-        {/if}
       {/each}
       <div class="tag-dropdown">
         <button class="dropdown-toggle" on:click={toggleDropdown} aria-label="Add tag filter">

src/components/InlineSvg.svelte

@@ -3,7 +3,6 @@
   export let path;
   export let color;
   export let colorConfig = { target: 'path', attribute: 'fill' };
-  export let alt;
 
   let svgHtml = '';
 

src/components/Preview.svelte

@@ -2,11 +2,11 @@
   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);
+  import { loadTagsData, getTagObj } from '../utils/tagUtils.js';
 
   export let show = false;
   export let logo = null;
+  export let theme;
 
   const dispatch = createEventDispatcher();
 
@@ -24,34 +24,13 @@
     return logo && logo.format && logo.format.toLowerCase() === 'svg';
   }
 
-  // Helper to get tag object from tags.json by text
-  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;
+  function getLogoThemeColor(logo) {
+    return logo && logo.colors ? getDefaultLogoColor(logo.colors, theme) : undefined;
   }
 
-  // Always use $theme directly, do not cache in a function
-  export let theme;
-$: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
-
-  $: {
-    if (logo && logo.colors) {
-      const themeColor = getDefaultLogoColor(logo.colors, theme);
-      const activeColor = logo._activeColor || themeColor;
-    }
-  }
-
-  $: if (logo && logo.tags && logo.tags.length) {
-    logo.tags.forEach(tag => {
-      console.log('[LogoModal] Tag:', tag);
-      getTagObj(tag);
-    });
-  }
-
-  onMount(() => {
+  onMount(async () => {
     document.addEventListener('keydown', handleKeydown);
-    console.log('[LogoModal] Mounted, added keydown event listener');
+    await loadTagsData();
   });
 
   onDestroy(() => {
@@ -59,26 +38,12 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
   });
 </script>
 
-<div class="modal-backdrop"
-  style="display: {show && logo ? 'flex' : 'none'}"
-  role="dialog"
-  aria-modal="true"
->
+<div class="modal-backdrop" class:show style="display: {show ? 'flex' : 'none'}" on:click={close}>
   {#if logo}
-    <div class="modal-content">
-      <div class="modal-header">
-        <h2>{logo.name}</h2>
-        <button class="close-btn" on:click={close} aria-label="Close preview">×</button>
-      </div>
+    <div class="modal-content" on:click|stopPropagation>
+      <button class="close-btn" on:click={close} aria-label="Close modal">&times;</button>
       <div class="modal-body">
-        <div class="preview-container"
-          role="button"
-          tabindex="0"
-          aria-label="Close preview"
-          on:click={close}
-          on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && close()}
-          style="cursor:pointer;"
-        >
+        <div class="preview-image-container">
           {#if isSvgLogo(logo)}
             <InlineSvg
               path={logo.path}
@@ -91,6 +56,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
           {/if}
         </div>
         <div class="logo-details">
+          <h2>{logo.name}</h2>
           {#if isSvgLogo(logo) && logo.colors}
             <div class="color-switcher-preview">
               <span
@@ -103,7 +69,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
                 on:click|stopPropagation={() => logo._activeColor = undefined}
                 on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = undefined)}
               >
-                <svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+                <svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
                   <circle cx="400" cy="400" r="400" style="fill:#d6d6d6;"/>
                   <path d="M682.843,117.843l-565.686,565.685c-156.209,-156.21 -156.209,-409.476 0,-565.685c156.21,-156.21 409.476,-156.21 565.686,-0Z" style="fill:#33363f;"/>
                 </svg>
@@ -130,9 +96,9 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
             <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>
+                  <span class="logo-tag" style={`background:${getTagObj(tag).color}`}>{tag}</span>
                 {:else}
-                  <span class="logo-tag">{getTagObj(tag).text}</span>
+                  <span class="logo-tag">{tag}</span>
                 {/if}
               {/each}
             </div>
@@ -144,118 +110,91 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
 </div>
 
 <style>
-  :global(.modal-backdrop) {
+  .modal-backdrop {
     position: fixed;
     top: 0;
     left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.7);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0,0,0,0.7);
     z-index: 1000;
-  }
-
-  :global(.modal-content) {
-    background: var(--color-card);
-    color: var(--text-color);
-    border-radius: 8px;
-    padding: 1rem;
-    max-width: 500px;
-    width: 90%;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-    border: 1px solid var(--color-border);
-    transition: background 0.2s, color 0.2s;
-  }
-
-  .modal-header {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    margin-bottom: 1rem;
-  }
-
-  .modal-header h2 {
-    margin: 0;
-    font-size: 1.5rem;
-  }
-
-  .close-btn {
-    background: none;
-    border: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    color: var(--text-color, #222);
-    transition: color 0.2s;
-  }
-
-  .close-btn:hover {
-    color: var(--color-accent, #4f8cff);
-  }
-
-  .modal-body img {
-    max-width: 100%;
-    margin-bottom: 1rem;
-  }
-
-  .preview-container {
-    display: flex;
     justify-content: center;
-    align-items: center;
-    background-color: var(--color-card);
-    border-radius: 4px;
+  }
+  .modal-content {
+    background: var(--color-card);
+    color: var(--color-text);
+    border-radius: 12px;
+    box-shadow: 0 4px 32px rgba(0,0,0,0.18);
+    max-width: 96vw;
+    max-height: 96vh;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    position: relative;
     padding: 2rem;
-    min-height: 200px;
-    max-height: 60vh;
-    max-width: 100%;
-    transition: background 0.2s, color 0.2s;
     overflow: auto;
   }
-
-  .preview-container img {
+  .preview-image-container {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
     max-width: 100%;
-    max-height: 60vh;
-    object-fit: contain;
+    max-height: 80vh;
+    overflow: auto;
+    margin-bottom: 2rem;
+  }
+  .preview-image-container img,
+  .preview-image-container :global(svg) {
+    max-width: 90%;
+    max-height: 70vh;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    display: block;
+    margin: auto;
+  }
+  .close-btn {
+    position: absolute;
+    top: 1.5rem;
+    right: 2rem;
+    font-size: 2.2rem;
+    background: none;
+    border: none;
+    color: var(--color-text);
+    cursor: pointer;
+    z-index: 1100;
+    padding: 0.2em 0.5em;
+    border-radius: 50%;
+    transition: background 0.2s;
+  }
+  .close-btn:hover {
+    background: rgba(0,0,0,0.18);
   }
-
   .logo-details {
     padding: 1rem;
-    background-color: var(--color-card);
-    color: var(--text-color);
-    border-radius: 4px;
-    transition: background 0.2s, color 0.2s;
+    background: var(--color-card);
+    color: var(--color-text);
+    border-radius: 8px;
+    border: 1px solid var(--color-border);
+  }
+  .logo-details h2 {
+    margin-top: 0;
+    margin-bottom: 1rem;
+    color: var(--color-accent);
   }
-
   .logo-details p {
     margin-bottom: 0.5rem;
   }
-
   .logo-tags {
     margin-top: 1rem;
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
   }
-
-  .color-switcher-preview {
-    display: flex;
-    align-items: center;
-  }
-
-  .color-circle.color-reset {
-    background: none !important;
-  }
-
-  .color-circle {
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 4px;
-    cursor: pointer;
-    box-sizing: border-box;
-  }
 </style>

src/components/Row.svelte

@@ -1,21 +1,23 @@
 <script>
+  import { onMount } from 'svelte';
   export let logo;
   export let view = 'grid'; // or 'list'
   export let showActions = true;
   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 };
-  }
+  import { loadTagsData, getTagObj } from '../utils/tagUtils.js';
+
+  onMount(async () => {
+    await loadTagsData();
+  });
 </script>
 
 <div class="logo-row {view}">
   <div
     class="logo-img"
     on:click={onPreview}
-    on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && onPreview && onPreview(e)}
+    on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && onPreview && onPreview()}
     tabindex="0"
     role="button"
     aria-label="Preview logo"
@@ -52,9 +54,9 @@
       <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>
+            <span class="logo-tag" style={`background:${getTagObj(tag).color}`}>{tag}</span>
           {:else}
-            <span class="logo-tag">{getTagObj(tag).text}</span>
+            <span class="logo-tag">{tag}</span>
           {/if}
         {/each}
       </div>

src/utils/tagUtils.js

@@ -0,0 +1,27 @@
+// Shared tag data loading and utilities
+let tagsDataPromise = null;
+let tagsData = null;
+
+// Load tags data once and cache it
+export function loadTagsData() {
+  if (!tagsDataPromise) {
+    tagsDataPromise = fetch('/data/tags.json')
+      .then(res => res.json())
+      .then(data => {
+        console.log('Tags data loaded successfully:', data);
+        tagsData = data;
+        return data;
+      })
+      .catch(err => {
+        console.error('Failed to load tags data:', err);
+        return {};
+      });
+  }
+  return tagsDataPromise;
+}
+
+// Get tag object (with color) from tag text
+export function getTagObj(text) {
+  if (!tagsData) return { text };
+  return tagsData[text] ? { text, ...tagsData[text] } : { text };
+}