Refactor logo management components: remove LogoModal, add Actions and Grid components, enhance List and Preview components with improved theme handling and SVG support.

src/App.svelte

@@ -1,7 +1,7 @@
 <script>
   import { onMount } from 'svelte';
-  import LogoGrid from './components/LogoGrid.svelte';
-  import LogoList from './components/LogoList.svelte';
+  import Grid from './components/Grid.svelte';
+  import List from './components/List.svelte';
 
   let viewMode = 'grid'; // 'grid' or 'list'
   let searchQuery = '';
@@ -261,14 +261,14 @@
 
   <div class="logos-container">
     {#if viewMode === 'grid'}
-      <LogoGrid
+      <Grid
         logos={filteredLogos}
         onCopy={copyUrl}
         onDownload={downloadLogo}
         theme={effectiveTheme}
       />
     {:else}
-      <LogoList
+      <List
         logos={filteredLogos}
         onCopy={copyUrl}
         onDownload={downloadLogo}

src/components/Grid.svelte

@@ -1,6 +1,6 @@
 <script>
-  import LogoModal from './LogoModal.svelte';
-  import LogoActions from './LogoActions.svelte';
+  import Preview from './Preview.svelte';
+  import Actions from './Actions.svelte';
   import InlineSvg from './InlineSvg.svelte';
   import { onMount, onDestroy } from 'svelte';
   import { getDefaultLogoColor, getThemeColor } from '../utils/colorTheme.js';
@@ -53,7 +53,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
   }
 </script>
 
-<LogoModal show={showModal} logo={selectedLogo} theme={theme} on:close={closeModal} />
+<Preview show={showModal} logo={selectedLogo} theme={theme} on:close={closeModal} />
 
 <div class="logo-grid">
   {#each logos as logo}
@@ -115,7 +115,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
           {/if}
         </div>
         <div class="logo-actions">
-          <LogoActions {logo} {onCopy} {onDownload} />
+          <Actions {logo} {onCopy} {onDownload} />
         </div>
       </div>
     </div>

src/components/InlineSvg.svelte

@@ -1,11 +1,11 @@
 <script>
-  import { onMount } from 'svelte';
+  import { onMount } from "svelte";
   export let path;
   export let color;
-  export let colorConfig = { target: 'path', attribute: 'fill' };
-  export let alt;
+  export let colorConfig = { target: "path", attribute: "fill" };
+  export const alt = "";
 
-  let svgHtml = '';
+  let svgHtml = "";
 
   async function fetchAndColorSvg() {
     const res = await fetch(path);
@@ -17,10 +17,10 @@
     }
     // Parse and update color only if user selected
     const parser = new DOMParser();
-    const doc = parser.parseFromString(text, 'image/svg+xml');
+    const doc = parser.parseFromString(text, "image/svg+xml");
     // 1. Parse <style> rules and apply as inline attributes before removing <style>
-    const styleEls = Array.from(doc.querySelectorAll('style'));
-    styleEls.forEach(styleEl => {
+    const styleEls = Array.from(doc.querySelectorAll("style"));
+    styleEls.forEach((styleEl) => {
       const css = styleEl.textContent;
       // Only handle simple .class { ... } rules
       const regex = /\.([\w-]+)\s*{([^}]*)}/g;
@@ -29,19 +29,22 @@
         const className = match[1];
         const rules = match[2];
         // Find all elements with this class
-        doc.querySelectorAll('.' + className).forEach(el => {
-          rules.split(';').forEach(rule => {
-            const [prop, value] = rule.split(':').map(s => s && s.trim());
+        doc.querySelectorAll("." + className).forEach((el) => {
+          rules.split(";").forEach((rule) => {
+            const [prop, value] = rule.split(":").map((s) => s && s.trim());
             if (prop && value) {
               // Apply all style properties, not just fill/stroke
-              el.setAttribute(prop.replace(/-([a-z])/g, g => g[1].toUpperCase()), value);
+              el.setAttribute(
+                prop.replace(/-([a-z])/g, (g) => g[1].toUpperCase()),
+                value,
+              );
             }
           });
         });
       }
     });
     // Remove all <style> elements
-    styleEls.forEach(styleEl => styleEl.remove());
+    styleEls.forEach((styleEl) => styleEl.remove());
     let targets;
     if (colorConfig.selector) {
       targets = doc.querySelectorAll(colorConfig.selector);
@@ -50,21 +53,21 @@
     } else {
       targets = [];
     }
-    targets.forEach(el => {
+    targets.forEach((el) => {
       if (colorConfig.attribute) {
         // Legacy: force a single attribute
         el.setAttribute(colorConfig.attribute, color);
       } else {
         // Always override fill and stroke unless they are 'none'
-        if (el.hasAttribute('fill') && el.getAttribute('fill') !== 'none') {
-          el.setAttribute('fill', color);
+        if (el.hasAttribute("fill") && el.getAttribute("fill") !== "none") {
+          el.setAttribute("fill", color);
         }
-        if (el.hasAttribute('stroke') && el.getAttribute('stroke') !== 'none') {
-          el.setAttribute('stroke', color);
+        if (el.hasAttribute("stroke") && el.getAttribute("stroke") !== "none") {
+          el.setAttribute("stroke", color);
         }
-        if (!el.hasAttribute('fill') && !el.hasAttribute('stroke')) {
+        if (!el.hasAttribute("fill") && !el.hasAttribute("stroke")) {
           // If neither, prefer fill
-          el.setAttribute('fill', color);
+          el.setAttribute("fill", color);
         }
       }
     });

src/components/List.svelte

@@ -1,6 +1,6 @@
 <script>
-  import LogoModal from './LogoModal.svelte';
-  import LogoActions from './LogoActions.svelte';
+  import Preview from './Preview.svelte';
+  import Actions from './Actions.svelte';
   import InlineSvg from './InlineSvg.svelte';
   import { getThemeColor, getDefaultLogoColor } from '../utils/colorTheme.js';
   import { onMount, onDestroy } from 'svelte';
@@ -64,7 +64,7 @@
   }
 </script>
 
-<LogoModal show={showModal} logo={selectedLogo} on:close={closeModal} />
+<Preview show={showModal} logo={selectedLogo} on:close={closeModal} />
 
 <div class="logo-list">
   {#each logos as logo}
@@ -77,8 +77,7 @@
         on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && openPreview(logo)}
         style="cursor:pointer;"
       >
-        {#if isSvgLogo(logo)}
-          <InlineSvg
+        {#if isSvgLogo(logo)}              <InlineSvg
                 path={logo.path}
                 color={logo.colors ? (logo._activeColor || getLogoThemeColor(logo)) : undefined}
                 colorConfig={logo.colors ? logo.colorConfig : undefined}
@@ -125,7 +124,7 @@
         {/if}
       </div>
       <div class="logo-actions">
-        <LogoActions {logo} {onCopy} {onDownload} />
+        <Actions {logo} {onCopy} {onDownload} />
       </div>
     </div>
   {:else}