Refactor Home and Preview pages for improved data handling and UI components

- Updated Home.svelte to streamline app data initialization and reactivity.
- Removed unnecessary intervals and checks for app data updates.
- Enhanced data binding for logos, view modes, and themes.
- Simplified the structure of the Header and Footer components.
- Introduced CardList and CardSquare components for better logo display.
- Improved routing with a NotFound page for unmatched routes.
- Added a RouteHeader component for search functionality and theme switching.
- Enhanced styling for better user experience across components.

src/App.svelte

@@ -3,7 +3,6 @@
   // Import Router component directly with explicit path
   import Router from 'svelte-spa-router/Router.svelte';
 
-  // Import routes from centralized router.js file
   import { routes } from './router.js';
 
   let viewMode = "grid"; // 'grid' or 'list'
@@ -251,7 +250,10 @@
       setSearchQuery,
       setGridView,
       setListView,
-      setTheme,
+      setTheme: (newTheme) => {
+        console.log("window.appData.setTheme called with:", newTheme);
+        setTheme(newTheme);
+      },
       toggleDropdown,
       addTag,
       removeTag,
@@ -354,6 +356,7 @@
 
   function setTheme(newTheme) {
     if (newTheme === "light" || newTheme === "dark" || newTheme === "system") {
+      console.log("App.svelte: Setting theme to:", newTheme);
       theme = newTheme;
       localStorage.setItem("theme", newTheme);
       console.log("[Theme] setTheme:", newTheme);
@@ -439,13 +442,18 @@
   }
 
   function toggleDropdown() {
-    console.log("App: Toggling tag dropdown, current state:", tagDropdownOpen);
     tagDropdownOpen = !tagDropdownOpen;
+    console.log("App: Toggling tag dropdown, current state:", 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);
+      console.log("App: Updated tagDropdownOpen in window.appData to:", tagDropdownOpen);
+
+      // Force immediate update
+      setTimeout(() => {
+        if (window.appData) window.appData.tagDropdownOpen = tagDropdownOpen;
+      }, 0);
     }
   }
 

src/components/Actions.svelte

@@ -37,15 +37,40 @@
 
   function toggleDownloadMenu() {
     showDownloadMenu = !showDownloadMenu;
-    if (showDownloadMenu) showCopyMenu = false;
+    if (showDownloadMenu) {
+      showCopyMenu = false;
+      // Position the dropdown menu
+      setTimeout(() => {
+        const anchor = downloadMenuAnchor;
+        const dropdown = document.querySelector('.download-group .dropdown-menu');
+        if (anchor && dropdown) {
+          const rect = anchor.getBoundingClientRect();
+          dropdown.style.top = rect.bottom + 5 + 'px';
+          dropdown.style.left = rect.left + 'px';
+        }
+      }, 10);
+    }
   }
   function closeDownloadMenu() {
     showDownloadMenu = false;
   }
   function toggleCopyMenu() {
     showCopyMenu = !showCopyMenu;
-    if (showCopyMenu) showDownloadMenu = false;
+    if (showCopyMenu) {
+      showDownloadMenu = false;
+      // Position the dropdown menu
+      setTimeout(() => {
+        const anchor = copyMenuAnchor;
+        const dropdown = document.querySelector('.dropdown-menu');
+        if (anchor && dropdown) {
+          const rect = anchor.getBoundingClientRect();
+          dropdown.style.top = rect.bottom + 5 + 'px';
+          dropdown.style.left = rect.left + 'px';
         }
+      }, 10);
+    }
+  }
+
   function closeCopyMenu() {
     showCopyMenu = false;
   }
@@ -230,7 +255,7 @@
       <svg width="18" height="18" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="4" r="1.5" fill="currentColor"/><circle cx="10" cy="10" r="1.5" fill="currentColor"/><circle cx="10" cy="16" r="1.5" fill="currentColor"/></svg>
     </button>
     {#if showCopyMenu}
-    <div class="dropdown-menu">
+    <div class="dropdown-menu" style="position: fixed">
         <button class="dropdown-item" on:click={handleSourceClick}>
           <span class="icon-wrapper">
             <svg style="margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M14.5 4H17a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-5m2-7L4 7l2 2"/><path d="m10 9l2-2l-2-2"/></g></svg>
@@ -259,7 +284,7 @@
       <svg width="18" height="18" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="4" r="1.5" fill="currentColor"/><circle cx="10" cy="10" r="1.5" fill="currentColor"/><circle cx="10" cy="16" r="1.5" fill="currentColor"/></svg>
     </button>
     {#if showDownloadMenu}
-      <div class="dropdown-menu">
+      <div class="dropdown-menu" style="position: fixed">
         <button class="dropdown-item" on:click={handleDownloadPngClick}>
           <span class="icon-wrapper"></span>
           <span class="dropdown-text">Download PNG</span>
@@ -374,7 +399,7 @@
     border: 1px solid var(--color-border, #ddd);
     border-radius: 8px;
     box-shadow: 0 2px 16px 4px rgba(0,0,0,0.18);
-    z-index: 9999;
+    z-index: 10;
     padding: 0.3em 0;
     display: flex;
     flex-direction: column;
@@ -382,11 +407,7 @@
     pointer-events: auto;
   }
 
-  /* Position the download menu on the right side */
+  /* Dropdown menus are positioned with JavaScript instead of CSS */
-  .download-group .dropdown-menu {
-    right: 0;
-    left: auto;
-  }
   .dropdown-item {
     background: none;
     color: var(--color-text, #222);
@@ -423,7 +444,7 @@
     position: fixed;
     top: 20px;
     right: 20px;
-    z-index: 10000;
+    z-index: 1000;
     pointer-events: none;
   }
 </style>

src/components/CardList.svelte

@@ -0,0 +1,288 @@
+<script>
+  import InlineSvg from './InlineSvg.svelte';
+  import Actions from './Actions.svelte';
+  import { getDefaultLogoColor } from '../utils/colorTheme.js';
+  import { generateColorSetCircle } from '../utils/colorCircles.js';
+
+  export let logo;
+  export let theme;
+  export let onCopy;
+  export let onDownload;
+  export let setSearchQuery;
+  export let allLogos = [];
+  export const setTheme = () => {};
+
+  function openPreview(logo) {
+    // Navigate to preview page using router
+    const routerPath = `/preview/${encodeURIComponent(logo.name.replace(/\s+/g, '-').toLowerCase())}`;
+    window.location.hash = routerPath;
+  }
+
+  function isSvgLogo(logo) {
+    return logo && logo.format && logo.format.toLowerCase() === 'svg';
+  }
+
+  $: getLogoThemeColor = (logo) => getDefaultLogoColor(logo.colors, theme);
+</script>
+
+<div class="logo-list-item">
+  <div
+    class="logo-image-container"
+    role="button"
+    tabindex="0"
+    aria-label="Preview {logo.name}"
+    on:click={() => {
+      console.log('CardList: Logo clicked, calling openPreview');
+      openPreview(logo);
+    }}
+    on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && openPreview(logo)}
+    style="cursor:pointer;"
+  >
+    {#if isSvgLogo(logo)}
+      {#key theme + (logo._activeColor || '')}
+        <InlineSvg
+          path={logo.path}
+          color={logo.colors ? (logo._activeColor || getLogoThemeColor(logo)) : undefined}
+          colorConfig={logo.colors ? logo.colorConfig : undefined}
+          targets={logo.targets}
+          sets={logo.sets}
+          colors={logo.colors}
+          activeSet={logo._activeSet}
+          alt={logo.name}
+        />
+      {/key}
+    {:else}
+      <img src={logo.path} alt={logo.name} />
+    {/if}
+  </div>
+  <div class="logo-content">
+    <div class="logo-header">
+      <h3>{logo.name}</h3>
+      {#if logo.brand}
+        <button
+          class="brand-filter-btn"
+          title="Filter by brand"
+          on:click={() => {
+            console.log('CardList: Filtering by brand:', logo.brand);
+            setSearchQuery(logo.brand);
+            // Update URL with search param
+            const params = new URLSearchParams(window.location.search);
+            params.set('search', logo.brand);
+            const newUrl = window.location.pathname + (params.toString() ? '?' + params.toString() : '');
+            history.replaceState(null, '', newUrl);
+          }}
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+            <path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z" />
+          </svg>
+          {#if allLogos && allLogos.filter((l) => l.brand === logo.brand).length > 1}
+            <span class="brand-count">{allLogos.filter((l) => l.brand === logo.brand).length}</span>
+          {/if}
+        </button>
+      {/if}
+    </div>
+
+    <div class="logo-details">
+      {#if logo.colors}
+        <div class="color-switcher-container">
+          <div class="color-switcher-preview">
+            <span
+              class="color-circle color-reset"
+              title="Reset to theme color"
+              tabindex="0"
+              role="button"
+              aria-label="Reset to theme color"
+              style="background: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: none;"
+              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" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M400,0c220.766,0 400,179.234 400,400c0,220.766 -179.234,400 -400,400c-220.766,0 -400,-179.234 -400,-400c0,-220.766 179.234,-400 400,-400Zm-251.006,583.082l434.088,-434.088c-51.359,-37.541 -114.652,-59.71 -183.082,-59.71c-171.489,0 -310.716,139.227 -310.716,310.716c0,68.43 22.169,131.723 59.71,183.082Zm502.495,-365.501l-433.908,433.908c51.241,37.248 114.283,59.227 182.419,59.227c171.489,-0 310.716,-139.227 310.716,-310.716c-0,-68.136 -21.979,-131.178 -59.227,-182.419Z"
+                  fill="#33363f"
+                />
+              </svg>
+            </span>
+            {#if logo.sets}
+              {#each Object.entries(logo.sets) as [setName, setConfig], i}
+                <span
+                  class="color-circle set-circle"
+                  title={`Color Set ${i + 1}: ${setName}`}
+                  tabindex="0"
+                  role="button"
+                  on:click|stopPropagation={() => {
+                    logo._activeColor = Object.values(logo.colors)[i % Object.keys(logo.colors).length];
+                    logo._activeSet = setName;
+                  }}
+                  on:keydown|stopPropagation={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      logo._activeColor = Object.values(logo.colors)[i % Object.keys(logo.colors).length];
+                      logo._activeSet = setName;
+                    }
+                  }}
+                  style="padding: 0; overflow: hidden;"
+                >
+                  {@html generateColorSetCircle(logo.colors, setConfig)}
+                </span>
+              {/each}
+            {:else}
+              {#each Object.entries(logo.colors) as [colorName, colorValue], i}
+                <span
+                  class="color-circle"
+                  title={colorName.replace('_', ' ')}
+                  style="background:{colorValue}"
+                  tabindex="0"
+                  role="button"
+                  on:click|stopPropagation={() => (logo._activeColor = colorValue)}
+                  on:keydown|stopPropagation={(e) =>
+                    (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = colorValue)}
+                ></span>
+              {/each}
+            {/if}
+          </div>
+        </div>
+      {/if}
+    </div>
+
+    <div class="logo-actions">
+      <Actions {logo} {onCopy} {onDownload} />
+    </div>
+  </div>
+</div>
+
+<style>
+  .logo-list-item {
+    display: flex;
+    background: var(--color-card);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    margin-bottom: 0.75rem;
+    overflow: hidden;
+    height: 130px;
+  }
+
+  .logo-image-container {
+    width: 180px;
+    min-width: 180px;
+    height: 100%;
+    border-right: 1px solid var(--color-border);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+  }
+
+  .logo-image-container img,
+  .logo-image-container :global(svg) {
+    max-width: 100%;
+    max-height: 100%;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    padding: 1rem;
+  }
+
+  .logo-content {
+    flex: 1;
+    padding: 1rem 1.25rem;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  .logo-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+  }
+
+  .logo-details {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  .logo-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: auto;
+    position: relative;
+    z-index: 20; /* Higher than the list item */
+  }
+
+  /* Apply higher z-index to the dropdown menus */
+  /* :global(.logo-list-item .dropdown-menu) { */
+    /* z-index: 100000 !important;  */
+  /* } */
+
+  .brand-filter-btn {
+    background: none;
+    border: none;
+    color: var(--color-text);
+    cursor: pointer;
+    padding: 0.2em 0.5em;
+    border-radius: 4px;
+    transition: background 0.2s, color 0.2s;
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .brand-filter-btn:hover {
+    background: var(--color-accent, #4f8cff);
+    color: #fff;
+  }
+
+  .brand-count {
+    font-size: 0.75em;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+
+  h3 {
+    margin: 0;
+    font-size: 1.1rem;
+    line-height: 1.2;
+  }
+
+  /* For mobile view */
+  @media (max-width: 600px) {
+    .logo-details {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .color-switcher-container {
+      margin-left: 0;
+      margin-top: 0.5rem;
+    }
+
+    .logo-actions {
+      flex-wrap: wrap;
+    }
+  }
+
+  /* Responsive grid for the list view */
+  @media (max-width: 900px) {
+    :global(.list-view) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  :global(.list-item) {
+    position: relative;
+    z-index: 1;
+  }
+
+  :global(.list-item:hover) {
+    z-index: 2; /* Raise the z-index when hovered */
+  }
+
+</style>

src/components/CardSquare.svelte

@@ -0,0 +1,219 @@
+<script>
+  import InlineSvg from './InlineSvg.svelte';
+  import Actions from './Actions.svelte';
+  import { getDefaultLogoColor } from '../utils/colorTheme.js';
+  import { generateColorSetCircle } from '../utils/colorCircles.js';
+
+  export let logo;
+  export let theme;
+  export let onCopy;
+  export let onDownload;
+  export let setSearchQuery;
+  export let allLogos = [];
+  export let setTheme = () => {};
+
+  function openPreview(logo) {
+    // Navigate to preview page using router
+    const routerPath = `/preview/${encodeURIComponent(logo.name.replace(/\s+/g, '-').toLowerCase())}`;
+    window.location.hash = routerPath;
+  }
+
+  function isSvgLogo(logo) {
+    return logo && logo.format && logo.format.toLowerCase() === 'svg';
+  }
+
+  $: getLogoThemeColor = (logo) => getDefaultLogoColor(logo.colors, theme);
+</script>
+
+<div class="logo-card">
+  <div
+    class="logo-image"
+    role="button"
+    tabindex="0"
+    aria-label="Preview {logo.name}"
+    on:click={() => {
+      console.log('CardSquare: Logo clicked, calling openPreview');
+      openPreview(logo);
+    }}
+    on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && openPreview(logo)}
+    style="cursor:pointer;"
+  >
+    {#if isSvgLogo(logo)}
+      {#key theme + (logo._activeColor || '')}
+        <InlineSvg
+          path={logo.path}
+          color={logo.colors ? (logo._activeColor || getLogoThemeColor(logo)) : undefined}
+          colorConfig={logo.colors ? logo.colorConfig : undefined}
+          targets={logo.targets}
+          sets={logo.sets}
+          colors={logo.colors}
+          activeSet={logo._activeSet}
+          alt={logo.name}
+        />
+      {/key}
+    {:else}
+      <img src={logo.path} alt={logo.name} />
+    {/if}
+  </div>
+  <div class="logo-info">
+    <div class="logo-title-row">
+      <h3>{logo.name}</h3>
+      {#if logo.brand}
+        <button
+          class="brand-filter-btn"
+          title="Filter by brand"
+          on:click={() => {
+            console.log('CardSquare: Filtering by brand:', logo.brand);
+            setSearchQuery(logo.brand);
+            // Update URL with search param
+            const params = new URLSearchParams(window.location.search);
+            params.set('search', logo.brand);
+            const newUrl = window.location.pathname + (params.toString() ? '?' + params.toString() : '');
+            history.replaceState(null, '', newUrl);
+          }}
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+            <path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z" />
+          </svg>
+          {#if allLogos && allLogos.filter((l) => l.brand === logo.brand).length > 1}
+            <span class="brand-count">{allLogos.filter((l) => l.brand === logo.brand).length}</span>
+          {/if}
+        </button>
+      {/if}
+    </div>
+    <div class="format-row">
+      <span><strong>Format:</strong> {logo.format}</span>
+      {#if logo.colors}
+        <div class="color-switcher-preview align-right">
+          <span
+            class="color-circle color-reset"
+            title="Reset to theme color"
+            tabindex="0"
+            role="button"
+            aria-label="Reset to theme color"
+            style="background: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: none;"
+            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" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M400,0c220.766,0 400,179.234 400,400c0,220.766 -179.234,400 -400,400c-220.766,0 -400,-179.234 -400,-400c0,-220.766 179.234,-400 400,-400Zm-251.006,583.082l434.088,-434.088c-51.359,-37.541 -114.652,-59.71 -183.082,-59.71c-171.489,0 -310.716,139.227 -310.716,310.716c0,68.43 22.169,131.723 59.71,183.082Zm502.495,-365.501l-433.908,433.908c51.241,37.248 114.283,59.227 182.419,59.227c171.489,-0 310.716,-139.227 310.716,-310.716c-0,-68.136 -21.979,-131.178 -59.227,-182.419Z"
+                fill="#33363f"
+              />
+            </svg>
+          </span>
+          {#if logo.sets}
+            {#each Object.entries(logo.sets) as [setName, setConfig], i}
+              <span
+                class="color-circle set-circle"
+                title={`Color Set ${i + 1}: ${setName}`}
+                tabindex="0"
+                role="button"
+                on:click|stopPropagation={() => {
+                  logo._activeColor = Object.values(logo.colors)[i % Object.keys(logo.colors).length];
+                  logo._activeSet = setName;
+                }}
+                on:keydown|stopPropagation={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    logo._activeColor = Object.values(logo.colors)[i % Object.keys(logo.colors).length];
+                    logo._activeSet = setName;
+                  }
+                }}
+                style="padding: 0; overflow: hidden;"
+              >
+                {@html generateColorSetCircle(logo.colors, setConfig)}
+              </span>
+            {/each}
+          {:else}
+            {#each Object.entries(logo.colors) as [colorName, colorValue], i}
+              <span
+                class="color-circle"
+                title={colorName.replace('_', ' ')}
+                style="background:{colorValue}"
+                tabindex="0"
+                role="button"
+                on:click|stopPropagation={() => (logo._activeColor = colorValue)}
+                on:keydown|stopPropagation={(e) =>
+                  (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = colorValue)}
+              ></span>
+            {/each}
+          {/if}
+        </div>
+      {/if}
+    </div>
+    <div class="logo-actions">
+      <Actions {logo} {onCopy} {onDownload} />
+    </div>
+  </div>
+</div>
+
+<style>
+  .logo-card {
+    background: var(--color-card);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
+  }
+
+  .logo-image {
+    height: 260px;
+    width: 100%;
+    padding: 1rem;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .logo-info {
+    padding: 1rem;
+    border-top: 1px solid var(--color-border);
+  }
+
+  .logo-title-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5em;
+  }
+
+  .brand-filter-btn {
+    background: none;
+    border: none;
+    color: var(--color-text);
+    cursor: pointer;
+    padding: 0.3em 0.8em 0.1em 0.3em;
+    border-radius: 4px;
+    transition: background 0.2s, color 0.2s;
+    z-index: 2;
+    margin-left: 0.5em;
+    position: relative;
+  }
+
+  .brand-filter-btn:hover {
+    background: var(--color-accent, #4f8cff);
+    color: #fff;
+  }
+
+  .brand-count {
+    font-size: 0.85em;
+    position: absolute;
+    bottom: 0;
+  }
+
+  /* Format row styling */
+  .format-row {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+    margin-bottom: 0.5em;
+    justify-content: space-between;
+  }
+
+  h3 {
+    margin: 0 0 0.5rem 0;
+    font-size: 1.2rem;
+    line-height: 1.2;
+  }
+</style>

src/components/Grid.svelte

@@ -1,239 +0,0 @@
-<script>
-  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';
-  import { generateColorSetCircle } from "../utils/colorCircles.js";
-
-  export let logos = [];
-  export let onCopy;
-  export let onDownload;
-  export let setSearchQuery;
-  export let allLogos = [];
-
-  let showModal = false;
-  let selectedLogo = null;  function openPreview(logo) {
-    // Navigate to preview page using router
-    const routerPath = `/preview/${encodeURIComponent(logo.name.replace(/\s+/g, '-').toLowerCase())}`;
-    window.location.hash = routerPath;
-  }
-
-  function isSvgLogo(logo) {
-    return logo && logo.format && logo.format.toLowerCase() === 'svg';
-  }
-
-  export let theme;
-$: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
-
-  $: {
-    if (logos && logos.length) {
-      logos.forEach(logo => {
-        if (logo.colors) {
-          const themeColor = getDefaultLogoColor(logo.colors, theme);
-          const fallbackColor = getThemeColor(logo.colors, theme);
-          const activeColor = logo._activeColor || themeColor;
-        }
-      });
-    }
-  }
-</script>
-
-<!-- Preview is now handled via the standalone page, no longer needed here -->
-
-<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={() => {
-          console.log("Logo clicked, calling openPreview");
-          openPreview(logo);
-        }}
-        on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && openPreview(logo)}
-        style="cursor:pointer;"
-      >
-        {#if isSvgLogo(logo)}
-          {#key theme + (logo._activeColor || '')}
-            <InlineSvg
-              path={logo.path}
-              color={logo.colors ? (logo._activeColor || getLogoThemeColor(logo)) : undefined}
-              colorConfig={logo.colors ? logo.colorConfig : undefined}
-              targets={logo.targets}
-              sets={logo.sets}
-              colors={logo.colors}
-              activeSet={logo._activeSet}
-              alt={logo.name}
-            />
-          {/key}
-        {:else}
-          <img src={logo.path} alt={logo.name} />
-        {/if}
-      </div>
-      <div class="logo-info">
-        <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);
-            params.set('search', logo.brand);
-            const newUrl = window.location.pathname + (params.toString() ? '?' + params.toString() : '');
-            history.replaceState(null, '', newUrl);
-          }}>
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z"/></svg>
-            {#if allLogos && allLogos.filter(l => l.brand === logo.brand).length > 1}
-              <span class="brand-count">{allLogos.filter(l => l.brand === logo.brand).length}</span>
-            {/if}
-          </button>
-        </div>
-        <div class="format-row">
-          <span><strong>Format:</strong> {logo.format}</span>
-          {#if logo.colors}
-            <div class="color-switcher-preview align-right">
-              <span
-                class="color-circle color-reset"
-                title="Reset to theme color"
-                tabindex="0"
-                role="button"
-                aria-label="Reset to theme color"
-                style="background: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: none;"
-                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" xmlns="http://www.w3.org/2000/svg"><path d="M400,0c220.766,0 400,179.234 400,400c0,220.766 -179.234,400 -400,400c-220.766,0 -400,-179.234 -400,-400c0,-220.766 179.234,-400 400,-400Zm-251.006,583.082l434.088,-434.088c-51.359,-37.541 -114.652,-59.71 -183.082,-59.71c-171.489,0 -310.716,139.227 -310.716,310.716c0,68.43 22.169,131.723 59.71,183.082Zm502.495,-365.501l-433.908,433.908c51.241,37.248 114.283,59.227 182.419,59.227c171.489,-0 310.716,-139.227 310.716,-310.716c-0,-68.136 -21.979,-131.178 -59.227,-182.419Z" fill="#33363f"/></svg>
-              </span>
-              {#if logo.sets}
-                {#each Object.entries(logo.sets) as [setName, setConfig], i}
-                  <span
-                    class="color-circle set-circle"
-                    title={`Color Set ${i + 1}: ${setName}`}
-                    tabindex="0"
-                    role="button"
-                    on:click|stopPropagation={() => {
-                      logo._activeColor = Object.values(logo.colors)[i % Object.keys(logo.colors).length];
-                      logo._activeSet = setName;
-                    }}
-                    on:keydown|stopPropagation={(e) => {
-                      if (e.key === 'Enter' || e.key === ' ') {
-                        logo._activeColor = Object.values(logo.colors)[i % Object.keys(logo.colors).length];
-                        logo._activeSet = setName;
-                      }
-                    }}
-                    style="padding: 0; overflow: hidden;"
-                  >
-                    {@html generateColorSetCircle(logo.colors, setConfig)}
-                  </span>
-                {/each}
-              {:else}
-                {#each Object.entries(logo.colors) as [colorName, colorValue], i}
-                  <span
-                    class="color-circle"
-                    title={colorName.replace('_', ' ')}
-                    style="background:{colorValue}"
-                    tabindex="0"
-                    role="button"
-                    on:click|stopPropagation={() => logo._activeColor = colorValue}
-                    on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = colorValue)}
-                  ></span>
-                {/each}
-              {/if}
-            </div>
-          {/if}
-        </div>
-        <div class="logo-actions">
-          <Actions {logo} {onCopy} {onDownload} />
-        </div>
-      </div>
-    </div>
-  {:else}
-    <p class="no-results">No logos found matching your search criteria.</p>
-  {/each}
-</div>
-
-<style>
-
-  .logo-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-    gap: 1.5rem;
-  }
-  .logo-image {
-    height: 260px;
-    width: 100%;
-    padding: 1rem;
-    position: relative;
-  }
-  .logo-info {
-    padding: 1rem;
-    border-top: 1px solid var(--color-border);
-  }
-
-  .no-results {
-    grid-column: 1 / -1;
-    text-align: center;
-    padding: 2rem;
-    color: #666;
-  }
-
-  .color-switcher-preview.align-right {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-
-  /* Removed unused styles */
-
-  .logo-title-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0.5em;
-  }
-
-  .brand-filter-btn {
-    background: none;
-    border: none;
-    color: var(--color-text);
-    cursor: pointer;
-    padding: 0.3em 0.8em 0.1em 0.3em;
-    border-radius: 4px;
-    transition: background 0.2s, color 0.2s;
-    z-index: 2;
-    margin-left: 0.5em;
-    position: relative;
-  }
-  .brand-filter-btn:hover {
-    background: var(--color-accent, #4f8cff);
-    color: #fff;
-  }
-
-  .brand-count {
-    font-size: 0.85em;
-    position: absolute;
-    bottom: 0;
-  }  .set-circle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    padding: 0;
-  }
-
-  .logo-card {
-    background: var(--color-card);
-    color: var(--color-text);
-    border: 1px solid var(--color-border);
-    border-radius: 8px;
-    transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
-    min-width: 320px;
-  }
-
-  .logo-grid .logo-item .logo-image {
-    width: 100%;
-  }
-</style>

src/components/Header.svelte

@@ -3,8 +3,8 @@
 
   export let logos = [];
   export let displayLogos = [];
-  export let theme;
+  export let theme = "system";
-  export let setTheme;
+  export let setTheme = () => {}; // Added default function to prevent errors
   export let viewMode;
   export let setGridView;
   export let setListView;
@@ -187,7 +187,7 @@
           + Tag{selectedTags.length ? "" : "s"}
         </button>
         {#if tagDropdownOpen}
-          <div class="dropdown-list">
+          <div class="dropdown-list" style="z-index: 100;">
             {#each allTags.filter((t) => !selectedTags.includes(t.text)) as tagObj}
               <button
                 class="dropdown-tag"

src/components/List.svelte

@@ -1,290 +1,69 @@
 <script>
-  import Preview from "./Preview.svelte";
+  import CardList from './CardList.svelte';
-  import Actions from "./Actions.svelte";
+  import CardSquare from './CardSquare.svelte';
-  import InlineSvg from "./InlineSvg.svelte";
+  import { getDefaultLogoColor } from '../utils/colorTheme.js';
-  import { getThemeColor, getDefaultLogoColor } from "../utils/colorTheme.js";
-  import { generateColorSetCircle } from "../utils/colorCircles.js";
-  import { onMount, onDestroy } from "svelte";
 
   export let logos = [];
-  export let allLogos = [];
   export let onCopy;
   export let onDownload;
   export let setSearchQuery;
+  export let allLogos = [];
+  export let theme;
+  export let viewMode = "grid"; // "grid" or "list"
+  export let setTheme = () => {}; // Add setTheme prop with default no-op function
 
-  let showModal = false;
+  $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
-  let selectedLogo = null;
-
-  let theme = getTheme();  function openPreview(logo) {
-    // Navigate to preview page instead of showing modal
-    const previewUrl = `#/preview/${encodeURIComponent(logo.name.replace(/\s+/g, '-').toLowerCase())}`;
-    window.location.href = previewUrl;
-  }
-
-  function isSvgLogo(logo) {
-    return logo.format && logo.format.toLowerCase() === "svg";
-  }
-
-  function getTheme() {
-    if (typeof window !== "undefined" && window.matchMedia) {
-      return window.matchMedia("(prefers-color-scheme: dark)").matches
-        ? "dark"
-        : "light";
-    }
-    return "light";
-  }
-
-  function handleThemeChange(e) {
-    theme = e.matches ? "dark" : "light";
-  }
-
-  onMount(() => {
-    const mql = window.matchMedia("(prefers-color-scheme: dark)");
-    mql.addEventListener("change", handleThemeChange);
-  });
-
-  onDestroy(() => {
-    const mql = window.matchMedia("(prefers-color-scheme: dark)");
-    mql.removeEventListener("change", handleThemeChange);
-  });
-
-  $: getLogoThemeColor = (logo) => getDefaultLogoColor(logo.colors, theme);
-
-  $: {
-    if (logos && logos.length) {
-      logos.forEach((logo) => {
-        if (logo.colors) {
-          const themeColor = getDefaultLogoColor(logo.colors, theme);
-          const activeColor = logo._activeColor || themeColor;
-          console.log(
-            "[LogoList] Logo:",
-            logo.name,
-            "| Theme:",
-            theme,
-            "| Theme color:",
-            themeColor,
-            "| Active color:",
-            activeColor,
-          );
-        }
-      });
-    }
-  }
 </script>
 
-<div class="logo-list">
+<div class={`logos-container ${viewMode}-view`}>
   {#each logos as logo}
-    <div class="logo-item">
+    {#if viewMode === "grid"}
-      <div
+      <CardSquare
-        class="logo-preview"
+        {logo}
-        role="button"
+        {theme}
-        tabindex="0"
+        {onCopy}
-        aria-label="Preview {logo.name}"
+        {onDownload}
-        on:click={() => openPreview(logo)}
+        {setSearchQuery}
-        on:keydown={(e) =>
+        {allLogos}
-          (e.key === "Enter" || e.key === " ") && openPreview(logo)}
+        {setTheme}
-        style="cursor:pointer;"
-      >
-        {#if isSvgLogo(logo)}
-          <InlineSvg
-            path={logo.path}
-            color={logo.colors
-              ? logo._activeColor || getLogoThemeColor(logo)
-              : undefined}
-            colorConfig={logo.colors ? logo.colorConfig : undefined}
-            targets={logo.targets}
-            sets={logo.sets}
-            colors={logo.colors}
-            activeSet={logo._activeSet}
-            alt={logo.name}
       />
     {:else}
-          <img src={logo.path} alt={logo.name} />
+      <CardList
+        {logo}
+        {theme}
+        {onCopy}
+        {onDownload}
+        {setSearchQuery}
+        {allLogos}
+        {setTheme}
+      />
     {/if}
-      </div>
-      <div class="logo-info">
-        <div class="logo-list-title-row">
-          <h3>{logo.name}</h3>
-        </div>
-        <div class="format-row">
-          <span><strong>Format:</strong> {logo.format}</span>
-        </div>
-        {#if logo.colors}
-          <div class="color-switcher-preview align-left">
-            <span
-              class="color-circle color-reset"
-              title="Reset to theme color"
-              tabindex="0"
-              role="button"
-              aria-label="Reset to theme color"
-              style="background: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: none;"
-              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" xmlns="http://www.w3.org/2000/svg"><path d="M400,0c220.766,0 400,179.234 400,400c0,220.766 -179.234,400 -400,400c-220.766,0 -400,-179.234 -400,-400c0,-220.766 179.234,-400 400,-400Zm-251.006,583.082l434.088,-434.088c-51.359,-37.541 -114.652,-59.71 -183.082,-59.71c-171.489,0 -310.716,139.227 -310.716,310.716c0,68.43 22.169,131.723 59.71,183.082Zm502.495,-365.501l-433.908,433.908c51.241,37.248 114.283,59.227 182.419,59.227c171.489,-0 310.716,-139.227 310.716,-310.716c-0,-68.136 -21.979,-131.178 -59.227,-182.419Z" fill="#33363f"/></svg>
-            </span>
-            {#if logo.sets}
-              {#each Object.entries(logo.sets) as [setName, setConfig], i}
-                <span
-                  class="color-circle set-circle"
-                  title={`Color Set ${i + 1}: ${setName}`}
-                  tabindex="0"
-                  role="button"
-                  on:click|stopPropagation={() => {
-                    logo._activeColor = Object.values(logo.colors)[i % Object.keys(logo.colors).length];
-                    logo._activeSet = setName;
-                  }}
-                  on:keydown|stopPropagation={(e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      logo._activeColor = Object.values(logo.colors)[i % Object.keys(logo.colors).length];
-                      logo._activeSet = setName;
-                    }
-                  }}
-                  style="padding: 0; overflow: hidden;"
-                >
-                  {@html generateColorSetCircle(logo.colors, setConfig)}
-                </span>
-              {/each}
-            {:else}
-              {#each Object.entries(logo.colors) as [colorName, colorValue]}
-                <span
-                  class="color-circle"
-                  title={colorName.replace('_', ' ')}
-                  style={`background:${colorValue}`}
-                  tabindex="0"
-                  role="button"
-                  on:click|stopPropagation={() =>
-                    (logo._activeColor = colorValue)}
-                  on:keydown|stopPropagation={(e) =>
-                    (e.key === "Enter" || e.key === " ") &&
-                    (logo._activeColor = colorValue)}
-                ></span>
-              {/each}
-            {/if}
-          </div>
-        {/if}
-      </div>
-      <div class="logo-actions">
-        <button
-          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);
-            params.set('search', logo.brand);
-            const newUrl = window.location.pathname + (params.toString() ? '?' + params.toString() : '');
-            history.replaceState(null, '', newUrl);
-          }}
-        >
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
-            <path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z"/>
-          </svg>
-          {#if allLogos && allLogos.filter(l => l.brand === logo.brand).length > 1}
-            <span class="brand-count-index">{allLogos.filter(l => l.brand === logo.brand).length}</span>
-          {/if}
-        </button>
-        <Actions {logo} {onCopy} {onDownload} />
-      </div>
-    </div>
   {:else}
     <p class="no-results">No logos found matching your search criteria.</p>
   {/each}
 </div>
 
 <style>
-  :global(.logo-item) {
+  .logos-container {
-    background: var(--color-card);
+    width: 100%;
-    color: var(--color-text);
-    border: 1px solid var(--color-border);
-    border-radius: 8px;
-    display: grid;
-    grid-template-columns: 80px 2fr 3fr 150px;
-    align-items: center;
-    gap: 1rem;
-    padding: 1rem;
-    transition:
-      background 0.2s,
-      color 0.2s;
-  }
-  .logo-preview {
-    height: 100px;
-    width: 80px;
-    padding: 0;
-    border-radius: 4px;
-    position: relative;
   }
 
-  .logo-list {
+  .grid-view {
-    display: flex;
+    display: grid;
-    flex-direction: column;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-    gap: 1rem;
+    gap: 1.5rem;
   }
+
+  .list-view {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
+    gap: 0.75rem;
+  }
+
   .no-results {
     text-align: center;
     padding: 2rem;
     color: #666;
-  }
+    grid-column: 1 / -1; /* For grid view */
-  .color-switcher-preview.align-left {
-    justify-content: flex-start;
-  }
-  .brand-filter-btn {
-    background: none;
-    border: none;
-    color: var(--color-text);
-    cursor: pointer;
-    padding: 0.2em;
-    border-radius: 4px;
-    transition:
-      background 0.2s,
-      color 0.2s;
-    z-index: 2;
-    margin-left: 0.5em;
-  }
-  .brand-filter-btn:hover {
-    background: var(--color-accent-light, #e0f0ff);
-    color: #fff;
-  }
-  .brand-filter-btn.common-btn {
-    background: var(--secondary-color);
-    color: #fff;
-    border: none;
-    padding: 0.4em 0.8em 0.4em 0.3em;
-    border-radius: 6px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1em;
-    transition: background 0.2s, color 0.2s;
-    margin-left: 0.5em;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
-    position: relative;
-  }
-  .brand-filter-btn.common-btn:hover {
-    background: var(--color-accent-dark, #3576c7);
-    color: #fff;
-  }
-  .brand-count-index {
-    position: absolute;
-    font-size: 0.85em;
-    bottom: 0.1em;
-    right: 0.3em;
-  }
-  .logo-list-title-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0.5em;
-  }
-
-  .set-circle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    padding: 0;
   }
 </style>

src/components/Preview.svelte

@@ -9,6 +9,7 @@
   export let show = false;
   export let logo = null;
   export let theme;
+  export let setTheme = () => {}; // Function to update theme
   export const openLogoByAnchor = () => {};
   export let onDownload = (path, name) => {
     const a = document.createElement("a");

src/components/RouteHeader.svelte

@@ -0,0 +1,116 @@
+<script>
+    export let searchQuery = "";
+    export let setSearchQuery = () => {};
+    export const viewMode = "grid";
+    // eslint-disable-next-line
+    export let theme = "system";
+    export let setTheme = () => {};
+
+    function onInput(event) {
+        searchQuery = event.target.value;
+        setSearchQuery(searchQuery);
+        // Update URL with search param
+        const params = new URLSearchParams(window.location.search);
+        if (searchQuery) {
+            params.set("search", searchQuery);
+        } else {
+            params.delete("search");
+        }
+        const newUrl =
+            window.location.pathname +
+            (params.toString() ? "?" + params.toString() : "");
+        history.replaceState(null, "", newUrl);
+    }
+</script>
+
+<header class="main-header">
+    <div class="header-row">
+        <div class="header-title">
+            <h1>Logo Gallery</h1>
+        </div>
+
+        <div class="theme-switcher">
+            <div class="theme-switch-group">
+                <button
+                    on:click={() => setTheme("system")}
+                    class:active={theme === "system"}
+                    aria-label="System theme"
+                >
+                    System
+                </button>
+                <button
+                    on:click={() => setTheme("light")}
+                    class:active={theme === "light"}
+                    aria-label="Light mode"
+                >
+                    Light
+                </button>
+                <button
+                    on:click={() => setTheme("dark")}
+                    class:active={theme === "dark"}
+                    aria-label="Dark mode"
+                >
+                    Dark
+                </button>
+            </div>
+        </div>
+    </div>
+    <div class="header-row">
+        <div class="search-bar">
+            <input
+                type="text"
+                placeholder="Search logos..."
+                bind:value={searchQuery}
+                on:input={onInput}
+                aria-label="Search logos"
+            />
+        </div>
+    </div>
+</header>
+
+<style>
+    .main-header {
+        padding: 1rem;
+        background: var(--color-card);
+        border-bottom: 1px solid var(--color-border);
+        margin-bottom: 1rem;
+    }
+
+    .header-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 1rem;
+    }
+
+    .header-title h1 {
+        margin: 0;
+    }
+
+    .search-bar input {
+        width: 100%;
+        padding: 0.5rem;
+        border: 1px solid var(--color-border);
+        border-radius: 4px;
+        background: var(--color-bg);
+        color: var(--color-text);
+    }
+
+    .theme-switch-group {
+        display: flex;
+        gap: 0.5rem;
+    }
+
+    button {
+        padding: 0.5rem 1rem;
+        background: var(--color-bg);
+        border: 1px solid var(--color-border);
+        border-radius: 4px;
+        cursor: pointer;
+    }
+
+    button.active {
+        background: var(--color-accent);
+        color: white;
+    }
+</style>

src/pages/Home.svelte

@@ -1,189 +1,170 @@
 <script>
-  import { onMount } from "svelte";
+  import { onMount } from 'svelte';
-  import Grid from "../components/Grid.svelte";
+  import Header from '../components/Header.svelte';
-  import List from "../components/List.svelte";
+  import List from '../components/List.svelte';
-  import Header from "../components/Header.svelte";
+  import Footer from '../components/Footer.svelte';
-  import Footer from "../components/Footer.svelte";
+  import { push } from 'svelte-spa-router';
 
-  let appData = {};
+  let logos = [];
-  let initialized = false;
+  let allLogos = [];
-
+  let viewMode = "grid";
-  function getAppData() {
+  let theme = "system";
-    if (typeof window !== "undefined" && window.appData) {
+  let searchQuery = "";
-      console.log("Home: Using app data with",
+  let compactMode = false;
-        window.appData.logos ? window.appData.logos.length : 0, "logos",
+  let tagDropdownOpen = false;
-        "displayLogos:", window.appData.displayLogos ? window.appData.displayLogos.length : 0);
+  let selectedTags = [];
-
+  let allTags = [];
-      // Create a fresh copy to trigger reactivity
+  let setTheme = () => {};
-      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");
-    }
-  }
 
   onMount(() => {
-    getAppData();
+    if (typeof window !== 'undefined' && window.appData) {
+      logos = window.appData.displayLogos || [];
+      allLogos = window.appData.logos || [];
+      viewMode = window.appData.viewMode || "grid";
+      theme = window.appData.theme || "system";
+      searchQuery = window.appData.searchQuery || "";
+      compactMode = window.appData.compactMode || false;
+      tagDropdownOpen = window.appData.tagDropdownOpen || false;
+      selectedTags = window.appData.selectedTags || [];
+      allTags = window.appData.allTags || [];
 
-    if (!initialized) {
+      if (window.appData.setTheme && typeof window.appData.setTheme === 'function') {
-      console.log("Home: Setting up retry interval for logos data");
+        console.log("Home: Found window.appData.setTheme function");
-      const interval = setInterval(() => {
+        setTheme = window.appData.setTheme;
-        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:",
+        console.warn("Home: window.appData.setTheme not found or not a function");
-            window.appData ? `${window.appData.logos?.length || 0} logos` : "no window.appData");
-        }
-      }, 200); // Increased interval for better logging
       }
 
-  let logoCheckInterval;
+      // Set up reactivity with window.appData
-  let lastViewMode = '';
+      const interval = setInterval(() => {
-  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
+          logos = window.appData.displayLogos || logos;
-      if (window.appData.logos &&
+          allLogos = window.appData.logos || allLogos;
-          window.appData.logos.length > 0 &&
+          viewMode = window.appData.viewMode || viewMode;
-          (!appData.logos || appData.logos.length === 0)) {
+          theme = window.appData.theme || theme;
-        console.log("Home: Detected logos update in window.appData:", window.appData.logos.length);
+          searchQuery = window.appData.searchQuery || searchQuery;
-        getAppData();
+          compactMode = window.appData.compactMode || compactMode;
-        initialized = true;
+
+          if (typeof window.appData.tagDropdownOpen === 'boolean') {
+            tagDropdownOpen = window.appData.tagDropdownOpen;
           }
 
-      // Check for view mode changes
+          if (window.appData.selectedTags) {
-      if (window.appData.viewMode !== lastViewMode) {
+            selectedTags = [...window.appData.selectedTags];
-        console.log("Home: Detected viewMode change:",
-          lastViewMode, "→", window.appData.viewMode);
-        lastViewMode = window.appData.viewMode;
-        getAppData();
           }
 
-      // Check for compact mode changes
+          if (window.appData.allTags) {
-      if (window.appData.compactMode !== lastCompactMode) {
+            allTags = [...window.appData.allTags];
-        console.log("Home: Detected compactMode change:",
+          }
-          lastCompactMode, "→", window.appData.compactMode);
+        }
-        lastCompactMode = window.appData.compactMode;
+      }, 100);
-        getAppData();
+
+      return () => clearInterval(interval);
+    }
+  });
+
+  function setSearchQuery(query) {
+    searchQuery = query;
+    if (typeof window !== 'undefined' && window.appData && window.appData.setSearchQuery) {
+      window.appData.setSearchQuery(query);
+    }
   }
 
-      // Check for search query changes
+  function onCopy(path) {
-      if (window.appData.searchQuery !== lastSearchQuery) {
+    if (typeof window !== 'undefined' && window.appData && window.appData.onCopy) {
-        console.log("Home: Detected searchQuery change:",
+      window.appData.onCopy(path);
-          lastSearchQuery, "→", window.appData.searchQuery);
+    }
-        lastSearchQuery = window.appData.searchQuery;
-        getAppData();
   }
 
-      // Check for display logos count changes
+  function onDownload(path, name) {
-      if (window.appData.displayLogos &&
+    if (typeof window !== 'undefined' && window.appData && window.appData.onDownload) {
-          window.appData.displayLogos.length !== lastDisplayLogosCount) {
+      window.appData.onDownload(path, name);
-        console.log("Home: Detected displayLogos count change:",
+    }
-          lastDisplayLogosCount, "→", window.appData.displayLogos.length);
-        lastDisplayLogosCount = window.appData.displayLogos.length;
-        getAppData();
   }
 
-      // Check for tag selection changes
+  function setGridView() {
-      const currentSelectedTags = window.appData.selectedTags || [];
+    if (typeof window !== 'undefined' && window.appData && window.appData.setGridView) {
-      if (JSON.stringify(currentSelectedTags) !== JSON.stringify(lastSelectedTags)) {
+      window.appData.setGridView();
-        console.log("Home: Detected selectedTags change, now:",
+    }
-          currentSelectedTags.length, "tags");
-        lastSelectedTags = [...currentSelectedTags];
-        getAppData();
   }
 
-      // Check for tag dropdown state changes
+  function setListView() {
-      if (window.appData.tagDropdownOpen !== lastTagDropdownOpen) {
+    if (typeof window !== 'undefined' && window.appData && window.appData.setListView) {
-        console.log("Home: Detected tagDropdownOpen change:",
+      window.appData.setListView();
-          lastTagDropdownOpen, "→", window.appData.tagDropdownOpen);
-        lastTagDropdownOpen = window.appData.tagDropdownOpen;
-        getAppData();
     }
   }
-  }, 100); // Faster interval for UI responsiveness
 
-  return () => clearInterval(logoCheckInterval);
+  function toggleDropdown() {
-});
+    tagDropdownOpen = !tagDropdownOpen;
+    console.log("Home: Toggle dropdown to:", tagDropdownOpen);
+
+    if (typeof window !== 'undefined' && window.appData && window.appData.toggleDropdown) {
+      window.appData.toggleDropdown();
+    }
+  }
+
+  function addTag(tag) {
+    if (typeof window !== 'undefined' && window.appData && window.appData.addTag) {
+      window.appData.addTag(tag);
+    }
+  }
+
+  function removeTag(tag) {
+    if (typeof window !== 'undefined' && window.appData && window.appData.removeTag) {
+      window.appData.removeTag(tag);
+    }
+  }
+
+  function setCompactMode(value) {
+    if (typeof window !== 'undefined' && window.appData && window.appData.setCompactMode) {
+      window.appData.setCompactMode(value);
+    }
+  }
 </script>
 
-{#if initialized}
+<div class="container">
   <Header
-    logos={appData.logos || []}
+    {searchQuery}
-    displayLogos={appData.displayLogos || []}
+    {setSearchQuery}
-    theme={appData.theme || "light"}
+    {viewMode}
-    setTheme={appData.setTheme || ((t) => {})}
+    {theme}
-    viewMode={appData.viewMode || "grid"}
+    {setTheme}
-    setGridView={appData.setGridView || (() => {})}
+    {setGridView}
-    setListView={appData.setListView || (() => {})}
+    {setListView}
-    searchQuery={appData.searchQuery || ""}
+    logos={allLogos}
-    setSearchQuery={appData.setSearchQuery || ((q) => {})}
+    displayLogos={logos}
-    allTags={appData.allTags || []}
+    {toggleDropdown}
-    selectedTags={appData.selectedTags || []}
+    {addTag}
-    tagDropdownOpen={appData.tagDropdownOpen || false}
+    {removeTag}
-    toggleDropdown={appData.toggleDropdown || (() => {})}
+    allTags={allTags}
-    addTag={appData.addTag || (() => {})}
+    selectedTags={selectedTags}
-    removeTag={appData.removeTag || (() => {})}
+    tagDropdownOpen={tagDropdownOpen}
-    getTagObj={appData.getTagObj || ((t) => ({text: t}))}
+    {compactMode}
-    compactMode={appData.compactMode || false}
+    {setCompactMode}
-    setCompactMode={appData.setCompactMode || ((val) => {})}
+    getTagObj={(tag) => (window.appData?.getTagObj ? window.appData.getTagObj(tag) : {text: tag})}
   />
 
-  <main class="logos-container">
+  <main>
-    {#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 || []}
+      logos={logos}
-        allLogos={appData.logos || []}
+      {theme}
-        onCopy={appData.onCopy || ((p) => {})}
+      {viewMode}
-        onDownload={appData.onDownload || ((p, n) => {})}
+      {onCopy}
-        setSearchQuery={appData.setSearchQuery || ((q) => {})}
+      {onDownload}
+      {setSearchQuery}
+      {allLogos}
+      {setTheme}
     />
-    {/if}
   </main>
 
   <Footer />
-{:else}
+</div>
-  <div class="loading">
-    <p>Loading...</p>
-  </div>
-{/if}
 
 <style>
-  .logos-container {
+  main {
-    padding: 1rem;
+    padding: 0 1rem;
-  }
+    max-width: 1400px;
-
+    margin: 0 auto;
-  .loading {
+    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    font-size: 1.5rem;
-    color: var(--color-text);
   }
 </style>

src/pages/NotFound.svelte

@@ -0,0 +1,50 @@
+<script>
+  import { push } from 'svelte-spa-router';
+  import Footer from '../components/Footer.svelte';
+</script>
+
+<div class="not-found">
+  <h1>404: Page Not Found</h1>
+  <p>The page you're looking for doesn't exist.</p>
+  <button on:click={() => push('/')}>Return to Home</button>
+
+  <Footer />
+</div>
+
+<style>
+  .not-found {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 80vh;
+    text-align: center;
+  }
+
+  h1 {
+    font-size: 2rem;
+    margin-bottom: 1rem;
+    color: var(--color-accent);
+  }
+
+  p {
+    margin-bottom: 2rem;
+    color: var(--color-text);
+    opacity: 0.8;
+  }
+
+  button {
+    background: var(--color-accent);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+
+  button:hover {
+    background: var(--color-accent-hover);
+  }
+</style>

src/pages/Preview.svelte

@@ -1,201 +1,116 @@
 <script>
   import { onMount } from 'svelte';
-  import { push, pop } from 'svelte-spa-router';
   import PreviewComponent from '../components/Preview.svelte';
   import Footer from '../components/Footer.svelte';
-  import { getDefaultLogoColor } from '../utils/colorTheme.js';
+  import { push } from 'svelte-spa-router';
 
-  // Get preview ID from URL parameter
+  // Get logo name from URL parameter
   export let params = {};
 
   let logo = null;
-  let theme = 'light'; // Default theme
+  let theme = "system";
-  let allLogos = [];
+  let logos = [];
-  let showPreview = false;
+  let setTheme = () => {}; // Default no-op function
+
+  onMount(() => {
+    if (typeof window !== 'undefined' && window.appData) {
+      logos = window.appData.logos || [];
+      theme = window.appData.theme || "system";
+
+      // Check if setTheme exists in window.appData
+      if (window.appData.setTheme && typeof window.appData.setTheme === 'function') {
+        console.log("PreviewPage: Found window.appData.setTheme function");
+        setTheme = window.appData.setTheme;
+      } else {
+        console.warn("PreviewPage: window.appData.setTheme not found or not a function");
+      }
+
+      // Find the logo based on the URL parameter
+      const logoName = params.logoName.replace(/-/g, ' ');
+      logo = logos.find(l =>
+        l.name.toLowerCase().replace(/\s+/g, '-') === params.logoName.toLowerCase() ||
+        l.name.toLowerCase() === logoName.toLowerCase()
+      );
+
+      if (!logo) {
+        console.error("Logo not found:", params.logoName);
+        push('/', { replace: true });
+      }
+    }
+
+    // Back button event listener
+    const handlePopState = () => {
+      const hash = window.location.hash;
+      if (!hash.includes('/preview/')) {
+        push('/', { replace: true });
+      }
+    };
+
+    window.addEventListener('popstate', handlePopState);
+    return () => {
+      window.removeEventListener('popstate', handlePopState);
+    };
+  });
 
-  // Download handler
   function onDownload(path, name) {
-    const a = document.createElement('a');
+    if (typeof window !== 'undefined' && window.appData && window.appData.onDownload) {
-    a.href = path;
+      window.appData.onDownload(path, name);
-    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();
-
-    // Ensure page starts at the top
-    window.scrollTo(0, 0);
-
-    // 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-route">
-  <header class="back-button-container">
+  <div class="back-button-container">
-    <button class="back-button" on:click={goBack}>
+    <button class="back-button" on:click={() => push('/', { replace: true })}>
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
-        <path d="M19 12H5M12 19l-7-7 7-7"></path>
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H5m0 0l7 7m-7-7l7-7"/>
       </svg>
       Back to Gallery
     </button>
-  </header>
+  </div>
 
-  <main class="preview-content">
+  <div class="preview-container">
-    <PreviewComponent
+    <PreviewComponent logo={logo} {theme} {onDownload} show={true} {setTheme} />
-      show={true}
+  </div>
-      {logo}
-      {theme}
-      {onDownload}
-      on:close={handleClose}
-    />
-  </main>
 
   <Footer />
-{:else}
+</div>
-  <div class="loading-container">
-    <p>Loading logo...</p>
-  </div>
-{/if}
 
 <style>
-  /* Page level styles applied to body in global.css */
+  .preview-route {
+    width: 100%;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .preview-container {
+    flex: 1;
+  }
 
   .back-button-container {
-    position: fixed;
+    padding: 1rem 2rem;
-    top: 20px;
+    background: var(--color-card);
-    left: 20px;
+    position: sticky;
-    z-index: 2500;
+    top: 0;
+    z-index: 5;
   }
 
   .back-button {
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    padding: 0.6rem 1rem;
+    background: var(--color-accent);
-    background: var(--color-card, #fff);
+    color: white;
-    color: var(--color-text, #222);
+    border: none;
-    border: 1px solid var(--color-border, #ddd);
+    padding: 0.5rem 1rem;
-    border-radius: 6px;
+    border-radius: 4px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
     cursor: pointer;
-    transition: all 0.2s;
+    transition: background 0.2s;
+    font-weight: 500;
   }
 
   .back-button:hover {
-    background: var(--color-accent, #4f8cff);
+    background: var(--color-accent-hover);
-    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);
-  }
-
-  .preview-content {
-    max-width: 1200px;
-    margin: 0 auto;
-    width: 100%;
-  }
-
-  /* Footer styles now come from the Footer component */
 </style>

src/router.js

@@ -1,8 +1,11 @@
+// Import pages for routing
 import Home from './pages/Home.svelte';
 import Preview from './pages/Preview.svelte';
+import NotFound from './pages/NotFound.svelte';
 
-// Define all routes for the application
+// Define routes
 export const routes = {
   '/': Home,
-  '/preview/:id': Preview
+  '/preview/:logoName': Preview,
+  '*': NotFound
 };