feat: Implement collection support for logos and flags in the gallery

src/App.svelte

@@ -1,6 +1,7 @@
 <script>
   import { onMount } from "svelte";
   import Router from "svelte-spa-router/Router.svelte";
+  import { collections } from "./collections.js";
 
   import Home from "./pages/Home.svelte";
   import Preview from "./pages/Preview.svelte";
@@ -28,6 +29,38 @@
   let selectedLogo = null;
   let compactMode = false;
 
+  // --- Collection support ---
+  let collection = localStorage.getItem("collection") || "logos";
+  function setCollection(val) {
+    if (val !== collection) {
+      collection = val;
+      localStorage.setItem("collection", val);
+      loadCollectionData();
+    }
+  }
+
+  async function loadCollectionData() {
+    // Load the correct data file for the selected collection
+    try {
+      const timestamp = new Date().getTime();
+      const response = await fetch(`data/${collection}.json?t=${timestamp}`);
+      if (response.ok) {
+        logos = await response.json();
+        // Reset filters and state for new collection
+        searchQuery = "";
+        selectedTags = [];
+        selectedBrands = [];
+        selectedVariants = [];
+        tagDropdownOpen = false;
+        compactMode = false;
+      } else {
+        logos = [];
+      }
+    } catch (error) {
+      logos = [];
+    }
+  }
+
   function setSearchQuery(val) {
     searchQuery = val;
     console.log("App: searchQuery set to:", val);
@@ -404,6 +437,9 @@
       selectedVariants,
       tagDropdownOpen,
       compactMode,
+      collection,
+      setCollection,
+      collections,
       setSearchQuery,
       setGridView,
       setListView,

src/collections.js

@@ -0,0 +1,20 @@
+// This file lists all supported collections for the gallery
+export const collections = [
+    {
+        name: 'logos',
+        label: 'Logos',
+        baseDir: 'logos',
+        genDir: 'logos_gen',
+        dataFile: 'data/logos.json'
+    },
+    {
+        name: 'flags',
+        label: 'Flags',
+        baseDir: 'flags',
+        genDir: 'flags_gen',
+        dataFile: 'data/flags.json'
+    }
+];
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { collections };
+}

src/components/Header.svelte

@@ -4,6 +4,7 @@
   import ThemeSwitcher from "./ThemeSwitcher.svelte";
   import ListViewSwitcher from "./ListViewSwitcher.svelte";
   import SearchBar from "./SearchBar.svelte";
+  import { collections } from "../collections.js";
 
   export let displayLogos = [];
   export let allLogos = []; // Add this to get total count
@@ -30,6 +31,8 @@
   export let getTagObj = (tag) => ({ text: tag });
   export let compactMode = false;
   export let setCompactMode = () => {};
+  export let collection = "logos";
+  export let setCollection = () => {};
 </script>
 
 <header class="main-header">
@@ -38,6 +41,11 @@
       <div class="header-icon">
         <img src="favicon.svg" alt="Logo Gallery icon" />
       </div>
+      <select class="collection-chooser" bind:value={collection} on:change={(e) => setCollection(e.target.value)} aria-label="Choose collection">
+        {#each collections as c}
+          <option value={c.name}>{c.label}</option>
+        {/each}
+      </select>
       <h1>Logo Gallery</h1>
     </div>
     <span class="logo-count">
@@ -119,6 +127,18 @@
     border-radius: 4px;
   }
 
+  .collection-chooser {
+    font-family: inherit;
+    font-size: 1rem;
+    color: var(--color-text);
+    background: var(--color-card);
+    border: 1px solid var(--color-border);
+    border-radius: 4px;
+    padding: 0.25rem 0.5rem;
+    margin-right: 1rem;
+    cursor: pointer;
+  }
+
   .header-controls {
     display: flex;
     align-items: center;