Implement routing and improve app data management

- Integrated svelte-spa-router for navigation between Home and Preview pages.
- Refactored App.svelte to manage global app data and handle search queries, compact mode, and view mode changes.
- Updated Grid and List components to navigate to the Preview page instead of using modals.
- Created Home.svelte to serve as the main page, utilizing global app data for rendering.
- Enhanced Preview.svelte to fetch logos and display the selected logo based on URL parameters.
- Improved data handling and reactivity across components, ensuring UI updates reflect changes in global state.
- Added logging for better debugging and tracking of state changes.

Makefile

@@ -2,7 +2,7 @@
 
 # Configuration
 DOCKER_COMPOSE = docker compose
-CONTAINER_NAME = logo-gallery
+CONTAINER_NAME = slogos-dev
 DEV_PORT = 5006
 
 # Main targets
@@ -47,15 +47,9 @@ run:
 # Scan logos.json from files in the logos directory (for dev mode)
 scan-logos:
 	@echo "Scanning logos directory and updating logos.json for development..."
-	$(DOCKER_COMPOSE) -f compose.dev.yml run --rm slogos-dev npm run scan-logos
+	$(DOCKER_COMPOSE) -f compose.dev.yml run --rm $(CONTAINER_NAME) npm run scan-logos
 	@echo "Logos have been updated - refresh the browser to see changes"
 
-# Convert logo colors format from array to object
-convert-colors:
-	@echo "Converting logo colors format in logos.json..."
-	$(DOCKER_COMPOSE) -f compose.dev.yml run --rm slogos-dev npm run convert-colors
-	@echo "Color format conversion complete"
-
 # Clean up build artifacts and temporary files
 clean:
 	@echo "Cleaning up build artifacts and temporary files..."
@@ -70,7 +64,7 @@ rebuild:
 # Generate favicons
 favicon:
 	@echo "Generating favicons..."
-	$(DOCKER_COMPOSE) -f compose.dev.yml run --rm slogos-dev npm run generate-favicons
+	$(DOCKER_COMPOSE) -f compose.dev.yml run --rm $(CONTAINER_NAME) npm run generate-favicons
 	@echo "Favicons have been generated"
 
 # Build with favicons
@@ -79,5 +73,5 @@ build-with-favicons: favicon build
 # Update package-lock.json by running npm install in Docker
 update-lock:
 	@echo "Updating package-lock.json to match package.json..."
-	$(DOCKER_COMPOSE) -f compose.dev.yml run --rm slogos-dev npm install
+	$(DOCKER_COMPOSE) -f compose.dev.yml run --rm $(CONTAINER_NAME) npm install
 	@echo "Package lock file has been updated"

package-lock.json

@@ -10,7 +10,8 @@
       "dependencies": {
         "@resvg/resvg-js": "^2.0.1",
         "jimp": "^0.22.10",
-        "sirv-cli": "^1.0.0"
+        "sirv-cli": "^1.0.0",
+        "svelte-spa-router": "^3.3.0"
       },
       "devDependencies": {
         "@rollup/plugin-commonjs": "^17.0.0",
@@ -1736,6 +1737,15 @@
       "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
       "license": "MIT"
     },
+    "node_modules/regexparam": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/regexparam/-/regexparam-2.0.1.tgz",
+      "integrity": "sha512-zRgSaYemnNYxUv+/5SeoHI0eJIgTL/A2pUtXUPLHQxUldagouJ9p+K6IbIZ/JiQuCEv2E2B1O11SjVQy3aMCkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.10",
       "dev": true,
@@ -2017,6 +2027,18 @@
         "node": ">= 8"
       }
     },
+    "node_modules/svelte-spa-router": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/svelte-spa-router/-/svelte-spa-router-3.3.0.tgz",
+      "integrity": "sha512-cwRNe7cxD43sCvSfEeaKiNZg3FCizGxeMcf7CPiWRP3jKXjEma3vxyyuDtPOam6nWbVxl9TNM3hlE/i87ZlqcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "regexparam": "2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ItalyPaleAle"
+      }
+    },
     "node_modules/terser": {
       "version": "5.39.0",
       "dev": true,

package.json

@@ -7,8 +7,7 @@
     "dev": "rollup -c -w",
     "start": "sirv public --host 0.0.0.0 --dev --single",
     "scan-logos": "node scripts/scanLogos.js",
-    "generate-favicons": "node scripts/generateFavicons.js",
+    "generate-favicons": "node scripts/generateFavicons.js"
-    "convert-colors": "node scripts/convertColorsFormat.js"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^17.0.0",
@@ -23,6 +22,7 @@
   "dependencies": {
     "@resvg/resvg-js": "^2.0.1",
     "jimp": "^0.22.10",
-    "sirv-cli": "^1.0.0"
+    "sirv-cli": "^1.0.0",
+    "svelte-spa-router": "^3.3.0"
   }
 }

scripts/convertColorsFormat.js

@@ -1,93 +0,0 @@
-#!/usr/bin/env node
-
-const fs = require('fs');
-const path = require('path');
-
-// Path to logos.json
-const logosJsonPath = path.join(__dirname, '../public/data/logos.json');
-
-// Read the current logos.json file
-console.log('Reading logos.json...');
-const logosData = JSON.parse(fs.readFileSync(logosJsonPath, 'utf8'));
-
-// Convert the colors format and create targets & sets
-console.log('Converting logos format...');
-let convertedColorsCount = 0;
-let convertedConfigCount = 0;
-
-for (const logo of logosData) {
-  // 1. Convert colors array to object if needed
-  if (logo.colors && Array.isArray(logo.colors)) {
-    // Convert array format to object format
-    const newColors = {};
-    for (const colorObj of logo.colors) {
-      // Convert label to lowercase and replace spaces with underscores
-      const key = colorObj.label.toLowerCase().replace(/\s+/g, '_');
-      newColors[key] = colorObj.value;
-    }
-    logo.colors = newColors;
-    convertedColorsCount++;
-  }
-
-  // 2. Convert colorConfig to targets and sets
-  if (logo.colorConfig && !logo.targets) {
-    // Create targets object
-    logo.targets = {};
-
-    // Handle selector or target from colorConfig
-    if (logo.colorConfig.selector) {
-      // Split multiple selectors (e.g., "#text, #logo_int")
-      const selectors = logo.colorConfig.selector.split(',').map(s => s.trim());
-
-      // Create a target for each selector
-      selectors.forEach((selector, index) => {
-        logo.targets[`selector_${index + 1}`] = selector;
-      });
-
-      // Create sets for each color
-      if (logo.colors && Object.keys(logo.colors).length > 0) {
-        logo.sets = {};
-        let setIndex = 1;
-
-        // Create a set for each color
-        for (const [colorName, colorValue] of Object.entries(logo.colors)) {
-          const setName = `set_${setIndex}`;
-          logo.sets[setName] = {};
-
-          // Apply this color to all targets in this set
-          Object.keys(logo.targets).forEach(targetName => {
-            logo.sets[setName][targetName] = colorName;
-          });
-
-          setIndex++;
-        }
-      }
-    } else if (logo.colorConfig.target) {
-      logo.targets.main = logo.colorConfig.target;
-
-      // Create sets for each color
-      if (logo.colors && Object.keys(logo.colors).length > 0) {
-        logo.sets = {};
-        let setIndex = 1;
-
-        // Create a set for each color
-        for (const [colorName, colorValue] of Object.entries(logo.colors)) {
-          const setName = `set_${setIndex}`;
-          logo.sets[setName] = {
-            main: colorName
-          };
-          setIndex++;
-        }
-      }
-    }
-
-    convertedConfigCount++;
-
-    // Keep the original colorConfig for backward compatibility
-  }
-}
-
-// Write the updated data back to logos.json
-console.log('Writing updated logos.json...');
-fs.writeFileSync(logosJsonPath, JSON.stringify(logosData, null, 2));
-console.log(`Conversion complete! Updated colors for ${convertedColorsCount} logos and created targets/sets for ${convertedConfigCount} logos.`);

src/App.svelte

@@ -1,9 +1,15 @@
 <script>
   import { onMount } from "svelte";
-  import Grid from "./components/Grid.svelte";
+  import Router from 'svelte-spa-router';
-  import List from "./components/List.svelte";
+
-  import Header from "./components/Header.svelte";
+  // Import pages for routing
-  import Preview from "./components/Preview.svelte";
+  import Home from './pages/Home.svelte';
+  import PreviewPage from './pages/Preview.svelte';
+
+  const routes = {
+    '/': Home,
+    '/preview/:id': PreviewPage,
+  };
 
   let viewMode = "grid"; // 'grid' or 'list'
   let searchQuery = "";
@@ -21,15 +27,82 @@
 
   function setSearchQuery(val) {
     searchQuery = val;
+    console.log("App: searchQuery set to:", val);
+    // Update window.appData immediately
+    if (typeof window !== 'undefined' && window.appData) {
+      window.appData.searchQuery = val;
+
+      // Also update filtered/display logos immediately for reactive UI
+      window.appData.filteredLogos = window.appData.logos.filter((logo) => {
+        const matchesSearch = logo.name.toLowerCase().includes(val.toLowerCase())
+          || (logo.brand && logo.brand.toLowerCase().includes(val.toLowerCase()));
+        const matchesTags =
+          !selectedTags.length ||
+          (logo.tags &&
+            logo.tags.some((tag) =>
+              selectedTags.includes(typeof tag === "string" ? tag : tag.text),
+            ));
+        return matchesSearch && matchesTags;
+      });
+
+      window.appData.displayLogos = (!val && compactMode)
+        ? window.appData.filteredLogos.filter((logo, idx, arr) =>
+            arr.findIndex(l => (l.brand || l.name) === (logo.brand || logo.name)) === idx)
+        : window.appData.filteredLogos;
+
+      console.log("App: Updated filtered/display logos directly:",
+        window.appData.filteredLogos.length, window.appData.displayLogos.length);
+    }
   }
 
   function setCompactMode(val) {
     compactMode = val;
     localStorage.setItem("compactMode", String(val));
+
+    // Update window.appData immediately on compact mode change
+    if (typeof window !== 'undefined' && window.appData) {
+      window.appData.compactMode = val;
+      console.log("App: Updated compactMode in window.appData to", val);
+
+      // Also update filtered/display logos immediately
+      updateFilteredLogosImmediate();
+    }
   }
 
   // Load logos from JSON file with cache busting
   onMount(async () => {
+    console.log("App: onMount start - before loading logos");
+
+    // Set initial empty app data
+    if (typeof window !== 'undefined') {
+      window.appData = {
+        logos: [],
+        filteredLogos: [],
+        displayLogos: [],
+        theme,
+        effectiveTheme: 'light',
+        viewMode,
+        searchQuery,
+        allTags: [],
+        selectedTags: [],
+        tagDropdownOpen,
+        compactMode,
+        setSearchQuery,
+        setGridView,
+        setListView,
+        setTheme,
+        toggleDropdown,
+        addTag,
+        removeTag,
+        toggleTag,
+        getTagObj,
+        closeDropdown,
+        setCompactMode,
+        onCopy: copyUrl,
+        onDownload: downloadLogo
+      };
+    }
+
     try {
       // Add timestamp as cache-busting query parameter
       const timestamp = new Date().getTime();
@@ -45,12 +118,44 @@
       if (response.ok) {
         logos = await response.json();
         filteredLogos = logos;
+        displayLogos = logos;
         console.log(
           "Loaded logos:",
           logos.length,
           "at",
           new Date().toLocaleTimeString(),
         );
+
+        // Update app data immediately after logos are loaded
+        if (typeof window !== 'undefined') {
+          window.appData = {
+            logos,
+            filteredLogos,
+            displayLogos,
+            theme,
+            effectiveTheme,
+            viewMode,
+            searchQuery,
+            allTags,
+            selectedTags,
+            tagDropdownOpen,
+            compactMode,
+            setSearchQuery,
+            setGridView,
+            setListView,
+            setTheme,
+            toggleDropdown,
+            addTag,
+            removeTag,
+            toggleTag,
+            getTagObj,
+            closeDropdown,
+            setCompactMode,
+            onCopy: copyUrl,
+            onDownload: downloadLogo
+          };
+          console.log("App: Updated window.appData after loading with", logos.length, "logos");
+        }
       } else {
         console.error("Failed to load logos data", response.status);
       }
@@ -134,16 +239,59 @@
         : "light"
       : theme;
 
+  // Make app data available globally for components
+  $: if (typeof window !== 'undefined') {
+    window.appData = {
+      logos,
+      filteredLogos,
+      displayLogos,
+      theme,
+      effectiveTheme,
+      viewMode,
+      searchQuery,
+      allTags,
+      selectedTags,
+      tagDropdownOpen,
+      compactMode,
+      setSearchQuery,
+      setGridView,
+      setListView,
+      setTheme,
+      toggleDropdown,
+      addTag,
+      removeTag,
+      toggleTag,
+      getTagObj,
+      closeDropdown,
+      setCompactMode,
+      onCopy: copyUrl,
+      onDownload: downloadLogo
+    };
+    console.log("App: Updated window.appData with", logos.length, "logos,", displayLogos.length, "display logos");
+  }
+
   function setGridView() {
     console.log("Setting view mode to: grid");
     viewMode = "grid";
     localStorage.setItem("viewMode", "grid");
+
+    // Update window.appData immediately on view change
+    if (typeof window !== 'undefined' && window.appData) {
+      window.appData.viewMode = "grid";
+      console.log("App: Updated viewMode in window.appData to grid");
+    }
   }
 
   function setListView() {
     console.log("Setting view mode to: list");
     viewMode = "list";
     localStorage.setItem("viewMode", "list");
+
+    // Update window.appData immediately on view change
+    if (typeof window !== 'undefined' && window.appData) {
+      window.appData.viewMode = "list";
+      console.log("App: Updated viewMode in window.appData to list");
+    }
   }
 
   function copyUrl(logoPath) {
@@ -219,31 +367,101 @@
   }
 
   function toggleTag(tag) {
+    console.log("App: Toggling tag:", tag);
     if (selectedTags.includes(tag)) {
       selectedTags = selectedTags.filter((t) => t !== tag);
     } else {
       selectedTags = [...selectedTags, tag];
     }
-  }
 
-  function addTag(tag) {
+    // Update window.appData immediately
+    if (typeof window !== 'undefined' && window.appData) {
+      window.appData.selectedTags = [...selectedTags];
+
+      // Update filtered logos immediately
+      updateFilteredLogosImmediate();
+    }
+  }  function addTag(tag) {
+    console.log("App: Adding tag:", tag);
     if (!selectedTags.includes(tag)) {
       selectedTags = [...selectedTags, tag];
+
+      // Update window.appData immediately
+      if (typeof window !== 'undefined' && window.appData) {
+        window.appData.selectedTags = [...selectedTags];
+
+        // Update filtered logos immediately
+        updateFilteredLogosImmediate();
+      }
     }
+    // Close dropdown after adding tag
     tagDropdownOpen = false;
+
+    // Also update the dropdown state in window.appData
+    if (typeof window !== 'undefined' && window.appData) {
+      window.appData.tagDropdownOpen = false;
+      console.log("App: Closed tag dropdown after adding tag");
+    }
   }
 
   function removeTag(tag) {
+    console.log("App: Removing tag:", tag);
     selectedTags = selectedTags.filter((t) => t !== tag);
+
+    // Update window.appData immediately
+    if (typeof window !== 'undefined' && window.appData) {
+      window.appData.selectedTags = [...selectedTags];
+
+      // Update filtered logos immediately
+      updateFilteredLogosImmediate();
+    }
+  }
+
+  // Helper function to immediately update filtered/display logos in window.appData
+  function updateFilteredLogosImmediate() {
+    if (typeof window !== 'undefined' && window.appData && window.appData.logos) {
+      window.appData.filteredLogos = window.appData.logos.filter((logo) => {
+        const matchesSearch = logo.name.toLowerCase().includes(searchQuery.toLowerCase())
+          || (logo.brand && logo.brand.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;
+      });
+
+      window.appData.displayLogos = (!searchQuery && compactMode)
+        ? window.appData.filteredLogos.filter((logo, idx, arr) =>
+            arr.findIndex(l => (l.brand || l.name) === (logo.brand || logo.name)) === idx)
+        : window.appData.filteredLogos;
+
+      console.log("App: Updated filtered logos:", window.appData.filteredLogos.length,
+        "display logos:", window.appData.displayLogos.length);
+    }
   }
 
   function toggleDropdown() {
+    console.log("App: Toggling tag dropdown, current state:", tagDropdownOpen);
     tagDropdownOpen = !tagDropdownOpen;
+
+    // Update window.appData immediately
+    if (typeof window !== 'undefined' && window.appData) {
+      window.appData.tagDropdownOpen = tagDropdownOpen;
+      console.log("App: Updated tagDropdownOpen in window.appData to", tagDropdownOpen);
+    }
   }
 
   function closeDropdown(e) {
     if (!e.target.closest(".tag-dropdown")) {
       tagDropdownOpen = false;
+
+      // Update window.appData immediately
+      if (typeof window !== 'undefined' && window.appData) {
+        window.appData.tagDropdownOpen = false;
+        console.log("App: Closed dropdown, updated in window.appData");
+      }
     }
   }
 
@@ -252,22 +470,35 @@
   }
 
   function openPreview(logo) {
-    selectedLogo = logo;
+    // Use the routing approach
-    showModal = true;
+    const previewUrl = `#/preview/${encodeURIComponent(logo.name.replace(/\s+/g, '-').toLowerCase())}`;
+    window.location.href = previewUrl;
   }
 
   function openLogoByAnchor(hash) {
-    if (!hash || !hash.startsWith("#preview-")) return;
+    if (!hash) return;
-    const anchor = decodeURIComponent(
+
-      hash.replace("#preview-", "").replace(/-/g, " "),
+    let anchor = "";
-    );
+    // Handle both old and new formats
+    if (hash.startsWith("#preview-")) {
+      anchor = decodeURIComponent(hash.replace("#preview-", "").replace(/-/g, " "));
+    } else if (hash.startsWith("#/preview/")) {
+      anchor = decodeURIComponent(hash.replace("#/preview/", "").replace(/-/g, " "));
+    } else {
+      return;
+    }
+
     const found = logos.find(
       (l) =>
         l.name.replace(/\s+/g, "-").toLowerCase() ===
         anchor.replace(/\s+/g, "-").toLowerCase(),
     );
+
     if (found) {
-      openPreview(found);
+      // Use routing approach - use router format
+      const previewUrl = `#/preview/${encodeURIComponent(found.name.replace(/\s+/g, '-').toLowerCase())}`;
+      console.log("App: Navigating to router URL:", previewUrl);
+      window.location.href = previewUrl;
     }
   }
 
@@ -280,85 +511,7 @@
 </script>
 
 <main class="container app-flex">
-  <Header
+  <Router {routes} />
-    logos={logos}
-    displayLogos={displayLogos}
-    {theme}
-    {setTheme}
-    {viewMode}
-    {setGridView}
-    {setListView}
-    bind:searchQuery
-    setSearchQuery={setSearchQuery}
-    {allTags}
-    {selectedTags}
-    {tagDropdownOpen}
-    {toggleDropdown}
-    {addTag}
-    {removeTag}
-    {toggleTag}
-    {getTagObj}
-    {closeDropdown}
-    {filteredLogos}
-    {compactMode}
-    setCompactMode={setCompactMode}
-  />
-
-  <Preview
-    bind:show={showModal}
-    bind:logo={selectedLogo}
-    {theme}
-    {logos}
-    {openLogoByAnchor}
-  />
-
-  <div class="logos-container main-content">
-    {#if viewMode === "grid"}
-      <Grid
-        logos={displayLogos}
-        allLogos={logos}
-        onCopy={copyUrl}
-        onDownload={downloadLogo}
-        setSearchQuery={setSearchQuery}
-        theme={effectiveTheme}
-        on:openPreview={(e) => openPreview(e.detail)}
-        {compactMode}
-      />
-    {:else}
-      <List
-        logos={displayLogos}
-        allLogos={logos}
-        onCopy={copyUrl}
-        onDownload={downloadLogo}
-        setSearchQuery={setSearchQuery}
-        on:openPreview={(e) => openPreview(e.detail)}
-        {compactMode}
-      />
-    {/if}
-  </div>
-
-  <footer>
-    <div class="footer-flex">
-      <span class="footer-left">shadoll Logo Gallery</span>
-      <span class="footer-center">All logos are property of their respective owners.</span>
-      <a
-        href="https://github.com/shadoll/sLogos"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="footer-github"
-      >
-        <svg
-          width="22"
-          height="22"
-          viewBox="0 0 24 24"
-          fill="#ccc"
-          style="margin-right:0.3em;"
-        ><path
-            d="M12 0.297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.387 0.6 0.113 0.82-0.258 0.82-0.577 0-0.285-0.011-1.04-0.017-2.04-3.338 0.726-4.042-1.61-4.042-1.61-0.546-1.387-1.333-1.756-1.333-1.756-1.089-0.745 0.084-0.729 0.084-0.729 1.205 0.084 1.84 1.236 1.84 1.236 1.07 1.834 2.809 1.304 3.495 0.997 0.108-0.775 0.418-1.305 0.762-1.605-2.665-0.305-5.466-1.334-5.466-5.931 0-1.311 0.469-2.381 1.236-3.221-0.124-0.303-0.535-1.523 0.117-3.176 0 0 1.008-0.322 3.301 1.23 0.957-0.266 1.983-0.399 3.003-0.404 1.02 0.005 2.047 0.138 3.006 0.404 2.291-1.553 3.297-1.23 3.297-1.23 0.653 1.653 0.242 2.873 0.119 3.176 0.77 0.84 1.235 1.91 1.235 3.221 0 4.609-2.803 5.624-5.475 5.921 0.43 0.372 0.823 1.102 0.823 2.222 0 1.606-0.015 2.898-0.015 3.293 0 0.322 0.216 0.694 0.825 0.576 4.765-1.589 8.199-6.085 8.199-11.386 0-6.627-5.373-12-12-12z"
-        /></svg>
-      </a>
-    </div>
-  </footer>
 
   <style>
     .app-flex {

src/components/Grid.svelte

@@ -13,19 +13,14 @@
   export let allLogos = [];
 
   let showModal = false;
-  let selectedLogo = null;
+  let selectedLogo = null;  function openPreview(logo) {
-
+    // Navigate to preview page using router
-  function openPreview(logo) {
+    const routerPath = `/preview/${encodeURIComponent(logo.name.replace(/\s+/g, '-').toLowerCase())}`;
-    selectedLogo = logo;
+    window.location.hash = routerPath;
-    showModal = true;
-  }
-
-  function closeModal() {
-    showModal = false;
   }
 
   function isSvgLogo(logo) {
-    return logo.format && logo.format.toLowerCase() === 'svg';
+    return logo && logo.format && logo.format.toLowerCase() === 'svg';
   }
 
   export let theme;
@@ -44,23 +39,20 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
   }
 </script>
 
-<Preview
+<!-- Preview is now handled via the standalone page, no longer needed here -->
-  show={showModal}
-  logo={selectedLogo}
-  theme={theme}
-  {onCopy}
-  {onDownload}
-  on:close={closeModal}
-/>
 
 <div class="logo-grid">
   {#each logos as logo}
+    <!-- For debugging: {console.log("Grid: rendering logo", logo)} -->
     <div class="logo-card">
       <div class="logo-image"
         role="button"
         tabindex="0"
         aria-label="Preview {logo.name}"
-        on:click={() => openPreview(logo)}
+        on:click={() => {
+          console.log("Logo clicked, calling openPreview");
+          openPreview(logo);
+        }}
         on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && openPreview(logo)}
         style="cursor:pointer;"
       >
@@ -85,6 +77,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
         <div class="logo-title-row">
           <h3>{logo.name}</h3>
           <button class="brand-filter-btn" title="Filter by brand" on:click={() => {
+            console.log("Grid: Filtering by brand:", logo.brand);
             setSearchQuery(logo.brand);
             // Update URL with search param
             const params = new URLSearchParams(window.location.search);

src/components/Header.svelte

@@ -12,11 +12,11 @@
   export let setSearchQuery;
   export let allTags = [];
   export let selectedTags = [];
-  export let tagDropdownOpen;
+  export let tagDropdownOpen = false;
-  export let toggleDropdown;
+  export let toggleDropdown = () => console.log("toggleDropdown not provided");
-  export let addTag;
+  export let addTag = () => console.log("addTag not provided");
-  export let removeTag;
+  export let removeTag = () => console.log("removeTag not provided");
-  export let getTagObj;
+  export let getTagObj = (tag) => ({ text: tag });
   export let compactMode = false;
   export let setCompactMode = () => {};
 
@@ -34,6 +34,8 @@
       window.location.pathname +
       (params.toString() ? "?" + params.toString() : "");
     history.replaceState(null, "", newUrl);
+
+    console.log("Header: Search query set to:", searchQuery);
   }
 </script>
 
@@ -144,6 +146,7 @@
               window.location.pathname +
               (params.toString() ? "?" + params.toString() : "");
             history.replaceState(null, "", newUrl);
+            console.log("Header: Search query cleared");
           }}
           aria-label="Clear search"
         >

src/components/InlineSvg.svelte

@@ -6,9 +6,8 @@
   export let targets = null;
   export let sets = null;
   export let activeSet = null;
-  export let colors = null; // Add colors object for access to all color values
+  export let colors = null;
-  export const alt = "";
+  export let alt = "";
-
   let svgHtml = "";
 
   async function fetchAndColorSvg() {
@@ -89,39 +88,29 @@
         }
       }
     }
-    // Otherwise, use the legacy format for backward compatibility
-    else {
-      let targetElements;
-      if (colorConfig.selector) {
-        targetElements = doc.querySelectorAll(colorConfig.selector);
-      } else if (colorConfig.target) {
-        targetElements = doc.querySelectorAll(colorConfig.target);
-      } else {
-        targetElements = [];
-      }
-      targetElements.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("stroke") && el.getAttribute("stroke") !== "none") {
-            el.setAttribute("stroke", color);
-          }
-          if (!el.hasAttribute("fill") && !el.hasAttribute("stroke")) {
-            // If neither, prefer fill
-            el.setAttribute("fill", color);
-          }
-        }
-      });
-    }
     svgHtml = doc.documentElement.outerHTML;
   }
 
   $: path, color, colorConfig, targets, sets, activeSet, colors, fetchAndColorSvg();
 </script>
 
-{@html svgHtml}
+<div class="svg-wrapper" role="img" aria-label={alt || "SVG image"}>
+  {@html svgHtml}
+</div>
+
+<style>
+  .svg-wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .svg-wrapper :global(svg) {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+</style>

src/components/List.svelte

@@ -1,7 +1,6 @@
 <script>
-  import Actions from './Actions.svelte';
   import Preview from "./Preview.svelte";
-
+  import Actions from "./Actions.svelte";
   import InlineSvg from "./InlineSvg.svelte";
   import { getThemeColor, getDefaultLogoColor } from "../utils/colorTheme.js";
   import { generateColorSetCircle } from "../utils/colorCircles.js";
@@ -16,15 +15,10 @@
   let showModal = false;
   let selectedLogo = null;
 
-  let theme = getTheme();
+  let theme = getTheme();  function openPreview(logo) {
-
+    // Navigate to preview page instead of showing modal
-  function openPreview(logo) {
+    const previewUrl = `#/preview/${encodeURIComponent(logo.name.replace(/\s+/g, '-').toLowerCase())}`;
-    selectedLogo = logo;
+    window.location.href = previewUrl;
-    showModal = true;
-  }
-
-  function closeModal() {
-    showModal = false;
   }
 
   function isSvgLogo(logo) {
@@ -78,8 +72,6 @@
   }
 </script>
 
-<Preview show={showModal} logo={selectedLogo} on:close={closeModal} />
-
 <div class="logo-list">
   {#each logos as logo}
     <div class="logo-item">
@@ -179,6 +171,7 @@
           class="brand-filter-btn common-btn"
           title="Filter by brand"
           on:click={() => {
+            console.log("List: Filtering by brand:", logo.brand);
             setSearchQuery(logo.brand);
             // Update URL with search param
             const params = new URLSearchParams(window.location.search);

src/components/Preview.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+  import { onMount } from 'svelte';
   import InlineSvg from './InlineSvg.svelte';
   import Actions from './Actions.svelte';
   import { getDefaultLogoColor, getThemeColor } from '../utils/colorTheme.js';
@@ -9,7 +9,7 @@
   export let show = false;
   export let logo = null;
   export let theme;
-  export let openLogoByAnchor = () => {};
+  export const openLogoByAnchor = () => {};
   export let onDownload = (path, name) => {
     const a = document.createElement('a');
     a.href = path;
@@ -23,22 +23,7 @@
   let svgSource = '';
   let isFetchingSvgSource = false;
 
-  const dispatch = createEventDispatcher();
+  // No event dispatching, parent is fully responsible for controlling the component
-
-  function close() {
-    show = false;
-    dispatch('close');
-    // Remove preview anchor from URL
-    if (window.location.hash.startsWith('#preview-')) {
-      history.replaceState(null, '', window.location.pathname + window.location.search);
-    }
-  }
-
-  function handleKeydown(event) {
-    if (event.key === 'Escape') {
-      close();
-    }
-  }
 
   function isSvgLogo(logo) {
     return logo && logo.format && logo.format.toLowerCase() === 'svg';
@@ -62,29 +47,11 @@
 
   $: validColorConfig = logo && typeof logo.colorConfig === 'object' && logo.colorConfig.selector ? logo.colorConfig : undefined;
 
-  // Sync show state with URL hash
+  // No URL manipulation in the component anymore
-  $: {
+  // Parent components should handle all URL and navigation concerns
-    if (typeof window !== 'undefined') {
-      if (window.location.hash.startsWith('#preview-')) {
-        show = true;
-      } else {
-        show = false;
-      }
-    }
-  }
 
-  // Update URL hash when opening/closing preview
+  // Only fetch SVG source when displayed
   $: if (show && logo) {
-    const anchor = '#preview-' + encodeURIComponent(logo.name.replace(/\s+/g, '-').toLowerCase());
-    if (window.location.hash !== anchor) {
-      history.replaceState(null, '', window.location.pathname + window.location.search + anchor);
-    }
-  }
-
-  // Watch for show/close to update scroll lock
-  $: if (show && logo) {
-    document.body.style.overflow = 'hidden';
-
     // Fetch SVG source when logo is displayed and is an SVG
     if (logo.format === 'SVG' && !svgSource) {
       isFetchingSvgSource = true;
@@ -98,37 +65,10 @@
           isFetchingSvgSource = false;
         });
     }
-  } else {
-    document.body.style.overflow = '';
   }
 
-  // On mount, check for preview anchor and open if present
+  // Component doesn't handle any window events or URL changes
-  onMount(() => {
+  // Parent should handle all navigation logic
-    document.addEventListener('keydown', handleKeydown);
-    if (window.location.hash.startsWith('#preview-')) {
-      openLogoByAnchor(window.location.hash);
-    }
-    window.addEventListener('hashchange', onHashChange);
-    // Lock background scroll when preview is open
-    if (show && logo) {
-      document.body.style.overflow = 'hidden';
-    }
-  });
-
-  onDestroy(() => {
-    document.removeEventListener('keydown', handleKeydown);
-    window.removeEventListener('hashchange', onHashChange);
-    // Restore scroll when component is destroyed
-    document.body.style.overflow = '';
-  });
-
-  function onHashChange() {
-    if (window.location.hash.startsWith('#preview-')) {
-      openLogoByAnchor(window.location.hash);
-    } else {
-      dispatch('close');
-    }
-  }
 
   // Svelte action to remove width/height from SVGs for responsive scaling
   function removeSvgSize(node) {
@@ -154,15 +94,16 @@
 </script>
 
 <div class="modal-backdrop fullscreen"
-  style="display: {show && logo ? 'flex' : 'none'}"
+  style="display: {show === true ? 'flex' : 'none'}"
   role="dialog"
   aria-modal="true"
 >
   {#if logo}
     <div class="modal-content fullscreen-modal">
       <div class="modal-header">
+        <div class="header-spacer"></div>
         <h2>{logo.name}</h2>
-        <button class="close-btn" on:click={close} aria-label="Close preview">×</button>
+        <div class="header-spacer"></div>
       </div>
       <div class="modal-body fullscreen-body">
         <div class="preview-container fullscreen-preview"
@@ -355,17 +296,9 @@
     color: var(--color-accent, #4f8cff);
     margin: 0;
   }
-  .close-btn {
+  .header-spacer {
-    font-size: 2.5rem;
+    /* This empty div helps maintain the centered title with the back button on the left */
-    background: none;
+    width: 70px;
-    border: none;
-    color: var(--color-text);
-    cursor: pointer;
-    transition: color 0.2s;
-    z-index: 2;
-  }
-  .close-btn:hover {
-    color: #f44336;
   }
   .modal-body.fullscreen-body {
     flex: 1 1 auto;

src/pages/Home.svelte

@@ -0,0 +1,277 @@
+<script>
+  import { onMount } from "svelte";
+  import Grid from "../components/Grid.svelte";
+  import List from "../components/List.svelte";
+  import Header from "../components/Header.svelte";
+
+  // Use the app's global data without reloading
+  let appData = {};
+  let initialized = false;
+
+  // Simple function to get data from the global app object
+  function getAppData() {
+    if (typeof window !== "undefined" && window.appData) {
+      console.log("Home: Using app data with",
+        window.appData.logos ? window.appData.logos.length : 0, "logos",
+        "displayLogos:", window.appData.displayLogos ? window.appData.displayLogos.length : 0);
+
+      // Create a fresh copy to trigger reactivity
+      appData = {
+        ...window.appData,
+        logos: [...(window.appData.logos || [])],
+        displayLogos: [...(window.appData.displayLogos || [])],
+        filteredLogos: [...(window.appData.filteredLogos || [])]
+      };
+
+      initialized = true;
+    } else {
+      console.log("Home: window.appData not available yet");
+    }
+  }
+
+  // Consolidate the onMount functions into a single one
+  onMount(() => {
+    getAppData();
+
+    // If not initialized yet, set up an interval to check for data
+    if (!initialized) {
+      console.log("Home: Setting up retry interval for logos data");
+      const interval = setInterval(() => {
+        if (window.appData && window.appData.logos && window.appData.logos.length > 0) {
+          console.log("Home: Data now available:",
+            window.appData.logos.length, "logos");
+          getAppData();
+          initialized = true;
+          clearInterval(interval);
+        } else {
+          console.log("Home: Waiting for logo data, current status:",
+            window.appData ? `${window.appData.logos?.length || 0} logos` : "no window.appData");
+        }
+      }, 200); // Increased interval for better logging
+
+      // No cleanup here - we'll handle in the second part
+    }
+
+    // Also watch for changes to window.appData
+  let logoCheckInterval;
+  let lastViewMode = '';
+  let lastCompactMode = false;
+  let lastSearchQuery = '';
+  let lastSelectedTags = [];
+  let lastTagDropdownOpen = false;
+  let lastDisplayLogosCount = 0;
+
+  // Set up the interval for watching changes
+  logoCheckInterval = setInterval(() => {
+    if (window.appData) {
+      // Check for logo updates
+      if (window.appData.logos &&
+          window.appData.logos.length > 0 &&
+          (!appData.logos || appData.logos.length === 0)) {
+        console.log("Home: Detected logos update in window.appData:", window.appData.logos.length);
+        getAppData();
+        initialized = true;
+      }
+
+      // Check for view mode changes
+      if (window.appData.viewMode !== lastViewMode) {
+        console.log("Home: Detected viewMode change:",
+          lastViewMode, "→", window.appData.viewMode);
+        lastViewMode = window.appData.viewMode;
+        getAppData();
+      }
+
+      // Check for compact mode changes
+      if (window.appData.compactMode !== lastCompactMode) {
+        console.log("Home: Detected compactMode change:",
+          lastCompactMode, "→", window.appData.compactMode);
+        lastCompactMode = window.appData.compactMode;
+        getAppData();
+      }
+
+      // Check for search query changes
+      if (window.appData.searchQuery !== lastSearchQuery) {
+        console.log("Home: Detected searchQuery change:",
+          lastSearchQuery, "→", window.appData.searchQuery);
+        lastSearchQuery = window.appData.searchQuery;
+        getAppData();
+      }
+
+      // Check for display logos count changes
+      if (window.appData.displayLogos &&
+          window.appData.displayLogos.length !== lastDisplayLogosCount) {
+        console.log("Home: Detected displayLogos count change:",
+          lastDisplayLogosCount, "→", window.appData.displayLogos.length);
+        lastDisplayLogosCount = window.appData.displayLogos.length;
+        getAppData();
+      }
+
+      // Check for tag selection changes
+      const currentSelectedTags = window.appData.selectedTags || [];
+      if (JSON.stringify(currentSelectedTags) !== JSON.stringify(lastSelectedTags)) {
+        console.log("Home: Detected selectedTags change, now:",
+          currentSelectedTags.length, "tags");
+        lastSelectedTags = [...currentSelectedTags];
+        getAppData();
+      }
+
+      // Check for tag dropdown state changes
+      if (window.appData.tagDropdownOpen !== lastTagDropdownOpen) {
+        console.log("Home: Detected tagDropdownOpen change:",
+          lastTagDropdownOpen, "→", window.appData.tagDropdownOpen);
+        lastTagDropdownOpen = window.appData.tagDropdownOpen;
+        getAppData();
+      }
+    }
+  }, 100); // Faster interval for UI responsiveness
+
+  // Cleanup function to clear the interval when component is destroyed
+  return () => clearInterval(logoCheckInterval);
+});
+</script>
+
+{#if initialized}
+  <div class="home-container">
+    <Header
+      logos={appData.logos || []}
+      displayLogos={appData.displayLogos || []}
+      theme={appData.theme || "light"}
+      setTheme={appData.setTheme || ((t) => {})}
+      viewMode={appData.viewMode || "grid"}
+      setGridView={appData.setGridView || (() => {})}
+      setListView={appData.setListView || (() => {})}
+      searchQuery={appData.searchQuery || ""}
+      setSearchQuery={appData.setSearchQuery || ((q) => {})}
+      allTags={appData.allTags || []}
+      selectedTags={appData.selectedTags || []}
+      tagDropdownOpen={appData.tagDropdownOpen || false}
+      toggleDropdown={appData.toggleDropdown || (() => {})}
+      addTag={appData.addTag || (() => {})}
+      removeTag={appData.removeTag || (() => {})}
+      getTagObj={appData.getTagObj || ((t) => ({text: t}))}
+      compactMode={appData.compactMode || false}
+      setCompactMode={appData.setCompactMode || ((val) => {})}
+    />
+
+    <div class="logos-container main-content">
+      {#if appData.viewMode === "grid"}
+        <Grid
+          logos={appData.displayLogos || []}
+          allLogos={appData.logos || []}
+          onCopy={appData.onCopy || ((p) => {})}
+          onDownload={appData.onDownload || ((p, n) => {})}
+          setSearchQuery={appData.setSearchQuery || ((q) => {})}
+          theme={appData.effectiveTheme || "light"}
+        />
+      {:else}
+        <List
+          logos={appData.displayLogos || []}
+          allLogos={appData.logos || []}
+          onCopy={appData.onCopy || ((p) => {})}
+          onDownload={appData.onDownload || ((p, n) => {})}
+          setSearchQuery={appData.setSearchQuery || ((q) => {})}
+        />
+      {/if}
+    </div>
+
+    <!-- Footer -->
+    <footer>
+      <div class="footer-flex">
+        <span class="footer-left">shadoll Logo Gallery</span>
+        <span class="footer-center">All logos are property of their respective owners.</span>
+        <a
+          href="https://github.com/shadoll/sLogos"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="footer-github"
+        >
+          <svg
+            width="22"
+            height="22"
+            viewBox="0 0 24 24"
+            fill="#ccc"
+            style="margin-right:0.3em;"
+          ><path
+              d="M12 0.297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.387 0.6 0.113 0.82-0.258 0.82-0.577 0-0.285-0.011-1.04-0.017-2.04-3.338 0.726-4.042-1.61-4.042-1.61-0.546-1.387-1.333-1.756-1.333-1.756-1.089-0.745 0.084-0.729 0.084-0.729 1.205 0.084 1.84 1.236 1.84 1.236 1.07 1.834 2.809 1.304 3.495 0.997 0.108-0.775 0.418-1.305 0.762-1.605-2.665-0.305-5.466-1.334-5.466-5.931 0-1.311 0.469-2.381 1.236-3.221-0.124-0.303-0.535-1.523 0.117-3.176 0 0 1.008-0.322 3.301 1.23 0.957-0.266 1.983-0.399 3.003-0.404 1.02 0.005 2.047 0.138 3.006 0.404 2.291-1.553 3.297-1.23 3.297-1.23 0.653 1.653 0.242 2.873 0.119 3.176 0.77 0.84 1.235 1.91 1.235 3.221 0 4.609-2.803 5.624-5.475 5.921 0.43 0.372 0.823 1.102 0.823 2.222 0 1.606-0.015 2.898-0.015 3.293 0 0.322 0.216 0.694 0.825 0.576 4.765-1.589 8.199-6.085 8.199-11.386 0-6.627-5.373-12-12-12z"
+          /></svg>
+        </a>
+      </div>
+    </footer>
+  </div>
+{:else}
+  <div class="loading">
+    <p>Loading...</p>
+  </div>
+{/if}
+
+<style>
+  .home-container {
+    width: 100%;
+  }
+
+  .logos-container {
+    padding: 1rem;
+  }
+
+  .main-content {
+    flex: 1 0 auto;
+  }
+
+  .loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    font-size: 1.5rem;
+    color: var(--color-text);
+  }
+
+  footer {
+    padding: 1.5rem;
+    background: var(--color-background);
+    color: var(--color-text-muted);
+    border-top: 1px solid var(--color-border);
+    font-size: 0.9rem;
+  }
+
+  .footer-flex {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    gap: 1em;
+  }
+
+  .footer-left {
+    flex: 1;
+    text-align: left;
+  }
+
+  .footer-center {
+    flex: 2;
+    text-align: left;
+  }
+
+  .footer-github {
+    flex: 0;
+    margin-left: 1em;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  @media (max-width: 700px) {
+    .footer-flex {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.3em;
+    }
+    .footer-left, .footer-center {
+      text-align: left;
+      width: 100%;
+    }
+    .footer-github {
+      margin-left: 0;
+      margin-top: 0.5em;
+    }
+  }
+</style>

src/pages/Preview.svelte

@@ -0,0 +1,191 @@
+<script>
+  import { onMount } from 'svelte';
+  import { push, pop } from 'svelte-spa-router';
+  import PreviewComponent from '../components/Preview.svelte';
+  import { getDefaultLogoColor } from '../utils/colorTheme.js';
+
+  // Get preview ID from URL parameter
+  export let params = {};
+
+  let logo = null;
+  let theme = 'light'; // Default theme
+  let allLogos = [];
+  let showPreview = false;
+
+  // Download handler
+  function onDownload(path, name) {
+    const a = document.createElement('a');
+    a.href = path;
+    a.download = name;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  }
+
+  // Go back to previous page
+  function goBack() {
+    pop();
+  }
+
+  // Set theme based on user preference or system
+  function initTheme() {
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme && ['light', 'dark', 'system'].includes(savedTheme)) {
+      theme = savedTheme;
+    } else {
+      theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+
+    // Apply theme to document
+    if (theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+      document.documentElement.classList.add('dark-theme');
+    } else {
+      document.documentElement.classList.remove('dark-theme');
+    }
+  }
+
+  // Find logo by ID in URL
+  function findLogoByUrlId(id) {
+    if (!id || !allLogos.length) return null;
+
+    const decodedId = decodeURIComponent(id);
+    console.log("Preview page: Looking for logo with ID:", decodedId);
+
+    // Try to match by name
+    const foundLogo = allLogos.find(logo => {
+      const urlFriendlyName = logo.name.replace(/\s+/g, '-').toLowerCase();
+      return urlFriendlyName === decodedId;
+    });
+
+    console.log("Preview page: Found logo:", foundLogo ? foundLogo.name : "none");
+    return foundLogo;
+  }
+
+  // Handle close event from Preview component - navigate back to home
+  function handleClose() {
+    push('/');
+  }
+
+  onMount(async () => {
+    console.log("Preview page: onMount with params:", params);
+    // Initialize theme
+    initTheme();
+
+    // First try to get logos from window.appData if available
+    if (window.appData && window.appData.logos && window.appData.logos.length > 0) {
+      console.log("Preview page: Using logos from window.appData:", window.appData.logos.length);
+      allLogos = window.appData.logos;
+    } else {
+      // Fetch logos data directly if not available in window.appData
+      try {
+        console.log("Preview page: Fetching logos data directly");
+        const timestamp = new Date().getTime(); // Cache busting
+        const response = await fetch(`/data/logos.json?t=${timestamp}`, {
+          cache: "no-cache",
+          headers: {
+            "Cache-Control": "no-cache",
+            Pragma: "no-cache",
+          },
+        });
+        if (!response.ok) throw new Error('Failed to fetch logos data');
+
+        allLogos = await response.json();
+        console.log("Preview page: Loaded", allLogos.length, "logos directly");
+      } catch (error) {
+        console.error('Preview page: Error loading logos:', error);
+      }
+    }
+
+    // Find the logo to display based on URL
+    if (params.id && allLogos.length > 0) {
+      logo = findLogoByUrlId(params.id);
+
+      // Set document title
+      if (logo) {
+        document.title = `${logo.name} - Logo Gallery`;
+        showPreview = true;
+        console.log("Preview page: Set up logo for display:", logo.name);
+      } else {
+        console.error("Preview page: Logo not found for ID:", params.id);
+      }
+    } else {
+      console.log("Preview page: No params.id or no logos loaded:",
+        params.id, allLogos.length);
+    }
+
+    if (!logo && params.id) {
+      console.error("Preview page: Logo not found: " + params.id);
+      // Redirect to home if logo not found
+      push('/');
+    }
+  });
+</script>
+
+{#if logo}
+  <div class="preview-page">
+    <div class="back-button-container">
+      <button class="back-button" on:click={goBack}>
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M19 12H5M12 19l-7-7 7-7"></path>
+        </svg>
+        Back to Gallery
+      </button>
+    </div>
+
+    <PreviewComponent
+      show={true}
+      {logo}
+      {theme}
+      {onDownload}
+      on:close={handleClose}
+    />
+  </div>
+{:else}
+  <div class="loading-container">
+    <p>Loading logo...</p>
+  </div>
+{/if}
+
+<style>
+  .preview-page {
+    width: 100%;
+    min-height: 100vh;
+    position: relative;
+  }
+
+  .back-button-container {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    z-index: 2500;
+  }
+
+  .back-button {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.6rem 1rem;
+    background: var(--color-card, #fff);
+    color: var(--color-text, #222);
+    border: 1px solid var(--color-border, #ddd);
+    border-radius: 6px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .back-button:hover {
+    background: var(--color-accent, #4f8cff);
+    color: #fff;
+  }
+
+  .loading-container {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+    color: var(--color-text, #222);
+  }
+</style>