feat: clean up unused styles and remove URL manipulation from Preview component

src/App.svelte

@@ -260,7 +260,8 @@
       closeDropdown,
       setCompactMode,
       onCopy: copyUrl,
-      onDownload: downloadLogo
+      onDownload: downloadLogo,
+      openLogoByAnchor
     };
     console.log("App: Updated window.appData with", logos.length, "logos,", displayLogos.length, "display logos");
   }
@@ -464,33 +465,19 @@
     return allTags.find((t) => t.text === text);
   }
 
-  function openPreview(logo) {
-    // Use the routing approach
-    const previewUrl = `#/preview/${encodeURIComponent(logo.name.replace(/\s+/g, '-').toLowerCase())}`;
-    window.location.href = previewUrl;
-  }
+  // The openPreview function has been removed as it's now handled directly
+  // by the Grid.svelte component using the router
 
   function openLogoByAnchor(hash) {
-    if (!hash) return;
+    if (!hash || !hash.startsWith("#/preview/")) return;
 
-    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 anchor = decodeURIComponent(hash.replace("#/preview/", ""));
 
     const found = logos.find(
-      (l) =>
-        l.name.replace(/\s+/g, "-").toLowerCase() ===
-        anchor.replace(/\s+/g, "-").toLowerCase(),
+      (l) => l.name.replace(/\s+/g, "-").toLowerCase() === anchor,
     );
 
     if (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;

src/components/Preview.svelte

@@ -50,9 +50,6 @@
       ? logo.colorConfig
       : undefined;
 
-  // No URL manipulation in the component anymore
-  // Parent components should handle all URL and navigation concerns
-
   // Only fetch SVG source when displayed
   $: if (show && logo) {
     // Fetch SVG source when logo is displayed and is an SVG
@@ -73,9 +70,6 @@
     window.scrollTo(0, 0);
   }
 
-  // Component doesn't handle any window events or URL changes
-  // Parent should handle all navigation logic
-
   // Svelte action to remove width/height from SVGs for responsive scaling
   function removeSvgSize(node) {
     function cleanSvg() {
@@ -257,7 +251,7 @@
     border-radius: 12px;
     padding: 1.5rem;
     box-shadow: 0 2px 16px 4px rgba(0, 0, 0, 0.18);
-    z-index: 1;
+    z-index: 2;
     position: relative;
   }
 
@@ -379,7 +373,6 @@
     padding: 1.5rem;
     box-shadow: 0 2px 16px 4px rgba(0, 0, 0, 0.18);
     overflow-y: auto;
-    z-index: 1;
   }
   .logo-tags {
     display: flex;
@@ -465,7 +458,6 @@
     border-radius: 12px;
     padding: 1.5rem;
     box-shadow: 0 2px 16px 4px rgba(0, 0, 0, 0.18);
-    z-index: 1;
     position: relative;
   }