Implement routing and improve app data management

- Integrated svelte-spa-router for navigation between Home and Preview pages.
- Refactored App.svelte to manage global app data and handle search queries, compact mode, and view mode changes.
- Updated Grid and List components to navigate to the Preview page instead of using modals.
- Created Home.svelte to serve as the main page, utilizing global app data for rendering.
- Enhanced Preview.svelte to fetch logos and display the selected logo based on URL parameters.
- Improved data handling and reactivity across components, ensuring UI updates reflect changes in global state.
- Added logging for better debugging and tracking of state changes.
This commit is contained in:
sha
2025-05-15 10:32:15 +03:00
parent 8fb057324e
commit d30e2f9e0b
12 changed files with 805 additions and 350 deletions
+6 -13
View File
@@ -1,7 +1,6 @@
<script>
import Actions from './Actions.svelte';
import Preview from "./Preview.svelte";
import Actions from "./Actions.svelte";
import InlineSvg from "./InlineSvg.svelte";
import { getThemeColor, getDefaultLogoColor } from "../utils/colorTheme.js";
import { generateColorSetCircle } from "../utils/colorCircles.js";
@@ -16,15 +15,10 @@
let showModal = false;
let selectedLogo = null;
let theme = getTheme();
function openPreview(logo) {
selectedLogo = logo;
showModal = true;
}
function closeModal() {
showModal = false;
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) {
@@ -78,8 +72,6 @@
}
</script>
<Preview show={showModal} logo={selectedLogo} on:close={closeModal} />
<div class="logo-list">
{#each logos as logo}
<div class="logo-item">
@@ -179,6 +171,7 @@
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);