Enhance logo search and display functionality

- Updated logo filtering to include title in search criteria across multiple components.
- Modified CardFull, CardMiddle, CardSmall, and CardTiny components to display title or name as appropriate.
- Added support for displaying logo variants in CardFull component.
- Improved logo retrieval logic in Preview page to account for title matching.

src/App.svelte

@@ -39,6 +39,7 @@
       window.appData.filteredLogos = window.appData.logos.filter((logo) => {
         const matchesSearch =
           logo.name.toLowerCase().includes(val.toLowerCase()) ||
+          (logo.title && logo.title.toLowerCase().includes(val.toLowerCase())) ||
           (logo.brand && logo.brand.toLowerCase().includes(val.toLowerCase()));
         const matchesTags =
           !selectedTags.length ||
@@ -349,6 +350,7 @@
   $: filteredLogos = logos.filter((logo) => {
     const matchesSearch =
       logo.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      (logo.title && logo.title.toLowerCase().includes(searchQuery.toLowerCase())) ||
       (logo.brand &&
         logo.brand.toLowerCase().includes(searchQuery.toLowerCase()));
     const matchesTags =
@@ -704,6 +706,7 @@
       window.appData.filteredLogos = window.appData.logos.filter((logo) => {
         const matchesSearch =
           logo.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          (logo.title && logo.title.toLowerCase().includes(searchQuery.toLowerCase())) ||
           (logo.brand && logo.brand.toLowerCase().includes(searchQuery.toLowerCase()));
         const matchesTags =
           !selectedTags.length ||

src/components/CardFull.svelte

@@ -132,7 +132,7 @@
   {#if logo}
     <div class="modal-header">
       <div class="header-spacer"></div>
-      <h2>{logo.name}</h2>
+      <h2>{logo.title || logo.name}</h2>
       <div class="header-spacer"></div>
     </div>
     <div class="preview-body">
@@ -149,10 +149,10 @@
             sets={logo.sets}
             colors={logo.colors}
             activeSet={logo._activeSet}
-            alt={logo.name}
+            alt={logo.title || logo.name}
           />
         {:else}
-          <img src={logo.path} alt={logo.name} />
+          <img src={logo.path} alt={logo.title || logo.name} />
         {/if}
       </div>
       <div class="right-column">
@@ -185,6 +185,13 @@
               {/each}
             </div>
           {/if}
+          {#if logo.variants && logo.variants.length}
+              <div class="variants-list">
+                {#each logo.variants as variant}
+                  <span class="logo-variant">{variant}</span>
+                {/each}
+              </div>
+          {/if}
         </div>
 
         <div class="preview-actions-container">
@@ -295,6 +302,13 @@
     flex-wrap: wrap;
     gap: 0.5rem;
   }
+
+  .variants-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+  }
   .logo-tag {
     display: inline-block;
     background: var(--color-accent);
@@ -309,6 +323,25 @@
     margin-bottom: 0.2em;
     transition: background 0.2s;
   }
+
+  .logo-variant {
+    display: inline-block;
+    background: #9b59b6;
+    color: white;
+    border-radius: 12px;
+    padding: 0.2em 0.8em;
+    font-size: 0.85em;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    margin-right: 0.3em;
+    margin-top: 0.2em;
+    margin-bottom: 0.2em;
+    transition: background 0.2s;
+  }
+
+  .logo-variant:hover {
+    background: #8e44ad;
+  }
   .preview-actions-container {
     width: 100%;
     background: var(--color-card);

src/components/CardMiddle.svelte

@@ -51,16 +51,16 @@
           sets={logo.sets}
           colors={logo.colors}
           activeSet={logo._activeSet}
-          alt={logo.name}
+          alt={logo.title || logo.name}
         />
       {/key}
     {:else}
-      <img src={logo.path} alt={logo.name} />
+      <img src={logo.path} alt={logo.title || logo.name}/>
     {/if}
   </div>
   <div class="logo-info">
     <div class="logo-title-row">
-      <h3>{logo.name}</h3>
+      <h3>{logo.title || logo.name}</h3>
       {#if logo.brand}
         <button
           class="brand-filter-btn"

src/components/CardSmall.svelte

@@ -55,12 +55,12 @@
         />
       {/key}
     {:else}
-      <img src={logo.path} alt={logo.name} />
+      <img src={logo.path} alt={logo.title || logo.name} />
     {/if}
   </div>
   <div class="logo-content">
     <div class="logo-header">
-      <h3>{logo.name}</h3>
+      <h3>{logo.title || logo.name}</h3>
       {#if logo.brand}
         <button
           class="brand-filter-btn"

src/components/CardTiny.svelte

@@ -51,10 +51,10 @@
         sets={logo.sets}
         colors={logo.colors}
         activeSet={logo._activeSet}
-        alt={logo.name}
+        alt={logo.title || logo.name}
       />
     {:else}
-      <img src={logo.path} alt={logo.name} />
+      <img src={logo.path} alt={logo.title || logo.name} />
     {/if}
   </div>
   {#if logo.colors}
@@ -63,7 +63,7 @@
       logo._activeSet = setName;
     }} />
   {/if}
-  <div class="name">{logo.name}</div>
+  <div class="name">{logo.title || logo.name}</div>
 </div>
 
 <style>

src/pages/Preview.svelte

@@ -22,8 +22,10 @@
         }
         const logoName = params.logoName.replace(/-/g, ' ');
         logo = logos.find(l =>
+          l.name.toLowerCase() === params.logoName.toLowerCase() ||
           l.name.toLowerCase().replace(/\s+/g, '-') === params.logoName.toLowerCase() ||
-          l.name.toLowerCase() === logoName.toLowerCase()
+          (l.title && l.title.toLowerCase() === logoName.toLowerCase()) ||
+          (l.title && l.title.toLowerCase().replace(/\s+/g, '-') === params.logoName.toLowerCase())
         );
         if (!logo) {
           console.error("Logo not found:", params.logoName);