From 5d1bae8008c2af3247f6a141bc5f58dbccb556e0 Mon Sep 17 00:00:00 2001 From: sHa Date: Fri, 16 May 2025 02:24:04 +0300 Subject: [PATCH] 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 | 16 +- src/components/Actions.svelte | 43 +++-- src/components/CardList.svelte | 288 +++++++++++++++++++++++++++ src/components/CardSquare.svelte | 219 +++++++++++++++++++++ src/components/Grid.svelte | 239 ----------------------- src/components/Header.svelte | 6 +- src/components/List.svelte | 309 +++++------------------------ src/components/Preview.svelte | 1 + src/components/RouteHeader.svelte | 116 +++++++++++ src/pages/Home.svelte | 311 ++++++++++++++---------------- src/pages/NotFound.svelte | 50 +++++ src/pages/Preview.svelte | 239 ++++++++--------------- src/router.js | 7 +- 13 files changed, 993 insertions(+), 851 deletions(-) create mode 100644 src/components/CardList.svelte create mode 100644 src/components/CardSquare.svelte delete mode 100644 src/components/Grid.svelte create mode 100644 src/components/RouteHeader.svelte create mode 100644 src/pages/NotFound.svelte diff --git a/src/App.svelte b/src/App.svelte index 58784bb..dc800aa 100644 --- a/src/App.svelte +++ b/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); } } diff --git a/src/components/Actions.svelte b/src/components/Actions.svelte index 4417bbd..4bd90ec 100644 --- a/src/components/Actions.svelte +++ b/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 @@ {#if showCopyMenu} -
+
{#if showDownloadMenu} -
+
+ {/if} +
+ +
+ {#if logo.colors} +
+
+ (logo._activeColor = undefined)} + on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = undefined)} + > + + + + + {#if logo.sets} + {#each Object.entries(logo.sets) as [setName, setConfig], i} + { + 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)} + + {/each} + {:else} + {#each Object.entries(logo.colors) as [colorName, colorValue], i} + (logo._activeColor = colorValue)} + on:keydown|stopPropagation={(e) => + (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = colorValue)} + > + {/each} + {/if} +
+
+ {/if} +
+ +
+ +
+
+
+ + diff --git a/src/components/CardSquare.svelte b/src/components/CardSquare.svelte new file mode 100644 index 0000000..de05edd --- /dev/null +++ b/src/components/CardSquare.svelte @@ -0,0 +1,219 @@ + + +
+
{ + 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 || '')} + + {/key} + {:else} + {logo.name} + {/if} +
+
+
+

{logo.name}

+ {#if logo.brand} + + {/if} +
+
+ Format: {logo.format} + {#if logo.colors} +
+ (logo._activeColor = undefined)} + on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = undefined)} + > + + + + + {#if logo.sets} + {#each Object.entries(logo.sets) as [setName, setConfig], i} + { + 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)} + + {/each} + {:else} + {#each Object.entries(logo.colors) as [colorName, colorValue], i} + (logo._activeColor = colorValue)} + on:keydown|stopPropagation={(e) => + (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = colorValue)} + > + {/each} + {/if} +
+ {/if} +
+
+ +
+
+
+ + diff --git a/src/components/Grid.svelte b/src/components/Grid.svelte deleted file mode 100644 index b1639f7..0000000 --- a/src/components/Grid.svelte +++ /dev/null @@ -1,239 +0,0 @@ - - - - -
- {#each logos as logo} - -
-
{ - 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 || '')} - - {/key} - {:else} - {logo.name} - {/if} -
-
-
-

{logo.name}

- -
-
- Format: {logo.format} - {#if logo.colors} -
- logo._activeColor = undefined} - on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = undefined)} - > - - - {#if logo.sets} - {#each Object.entries(logo.sets) as [setName, setConfig], i} - { - 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)} - - {/each} - {:else} - {#each Object.entries(logo.colors) as [colorName, colorValue], i} - logo._activeColor = colorValue} - on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = colorValue)} - > - {/each} - {/if} -
- {/if} -
-
- -
-
-
- {:else} -

No logos found matching your search criteria.

- {/each} -
- - diff --git a/src/components/Header.svelte b/src/components/Header.svelte index 3b1105d..60b0943 100644 --- a/src/components/Header.svelte +++ b/src/components/Header.svelte @@ -3,8 +3,8 @@ export let logos = []; export let displayLogos = []; - export let theme; - export let setTheme; + export let theme = "system"; + 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"} {#if tagDropdownOpen} -
+
{#each allTags.filter((t) => !selectedTags.includes(t.text)) as tagObj} - -
-
+ {#if viewMode === "grid"} + + {:else} + + {/if} {:else}

No logos found matching your search criteria.

{/each}
diff --git a/src/components/Preview.svelte b/src/components/Preview.svelte index 838a3f2..c8997d3 100644 --- a/src/components/Preview.svelte +++ b/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"); diff --git a/src/components/RouteHeader.svelte b/src/components/RouteHeader.svelte new file mode 100644 index 0000000..9f6eaa9 --- /dev/null +++ b/src/components/RouteHeader.svelte @@ -0,0 +1,116 @@ + + +
+
+
+

Logo Gallery

+
+ +
+
+ + + +
+
+
+
+
+ +
+
+
+ + diff --git a/src/pages/Home.svelte b/src/pages/Home.svelte index 9cf19f2..6aecb07 100644 --- a/src/pages/Home.svelte +++ b/src/pages/Home.svelte @@ -1,189 +1,170 @@ -{#if initialized} +
{})} - 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) => {})} + {searchQuery} + {setSearchQuery} + {viewMode} + {theme} + {setTheme} + {setGridView} + {setListView} + logos={allLogos} + displayLogos={logos} + {toggleDropdown} + {addTag} + {removeTag} + allTags={allTags} + selectedTags={selectedTags} + tagDropdownOpen={tagDropdownOpen} + {compactMode} + {setCompactMode} + getTagObj={(tag) => (window.appData?.getTagObj ? window.appData.getTagObj(tag) : {text: tag})} /> -
- {#if appData.viewMode === "grid"} - {})} - onDownload={appData.onDownload || ((p, n) => {})} - setSearchQuery={appData.setSearchQuery || ((q) => {})} - theme={appData.effectiveTheme || "light"} - /> - {:else} - {})} - onDownload={appData.onDownload || ((p, n) => {})} - setSearchQuery={appData.setSearchQuery || ((q) => {})} - /> - {/if} +
+
-{:else} -
-

Loading...

-
-{/if} +
diff --git a/src/pages/NotFound.svelte b/src/pages/NotFound.svelte new file mode 100644 index 0000000..7990aa1 --- /dev/null +++ b/src/pages/NotFound.svelte @@ -0,0 +1,50 @@ + + +
+

404: Page Not Found

+

The page you're looking for doesn't exist.

+ + +
+
+ + diff --git a/src/pages/Preview.svelte b/src/pages/Preview.svelte index 9ddbf4a..d4bc2d5 100644 --- a/src/pages/Preview.svelte +++ b/src/pages/Preview.svelte @@ -1,201 +1,116 @@ -{#if logo} -
- -
+ -
- -
+
+ +