feat: enhance routing with dedicated error pages, improve navigation handling, and add internal path checks

src/App.svelte

@@ -13,8 +13,9 @@
     import { initializeStoredConsent } from "./lib/cookieConsent";
     import { applyTheme, getSavedTheme } from "./lib/theme";
     import { getErrorPath, resolvePathname } from "./lib/errorRouting";
+    import { navigateTo } from "./lib/navigation";
 
-    let pathname = typeof window !== 'undefined' ? window.location.pathname : '/'
+    let pathname = $state(typeof window !== 'undefined' ? window.location.pathname : '/')
 
     const getRoute = (path) => {
         const normalized = resolvePathname(path)
@@ -25,28 +26,12 @@
         if (normalized === '/404') return '404'
         if (normalized === '/500') return '500'
         if (normalized === '/errore') return 'error'
-        return 'error'
+        return '404'
     }
 
     let currentRoute = $derived(getRoute(pathname))
     let isCenteredMain = $derived(['403', '404', '500', 'error'].includes(currentRoute))
 
-    const navigateTo = (targetPath, replace = false) => {
-        const resolved = resolvePathname(targetPath)
-        const current = resolvePathname(window.location.pathname)
-        if (resolved === current) {
-            pathname = resolved
-            return
-        }
-
-        if (replace) {
-            window.history.replaceState({}, '', resolved)
-        } else {
-            window.history.pushState({}, '', resolved)
-        }
-        pathname = resolved
-    }
-
     const syncRouteFromLocation = () => {
         const resolved = resolvePathname(window.location.pathname)
         if (resolved !== window.location.pathname) {

src/components/Button/Button.svelte

@@ -1,5 +1,6 @@
 <script>
     import './Button.css'
+    import { isInternalPath, navigateTo } from '../../lib/navigation'
 
     let {
         color = 'var(--primary-color)',
@@ -11,6 +12,14 @@
         borderWidth = '0px',
         ...restProps
     } = $props()
+
+    function handleClick(event) {
+        if (!href || !isInternalPath(href)) return
+        if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) return
+
+        event.preventDefault()
+        navigateTo(href)
+    }
 </script>
 
 {#if href}
@@ -18,6 +27,7 @@
         class="button"
         style={`--button-color: ${color}; --button-text-color: ${textColor}; --button-radius: ${round}; --button-padding: ${padding}; --button-border-width: ${borderWidth};`}
         {href}
+        on:click={handleClick}
         {...restProps}
     >
         {text}

src/components/Header/Header.svelte

@@ -2,16 +2,21 @@
     import { onMount } from 'svelte'
     import './Header.css'
     import Button from '../Button/Button.svelte'
+    import { navigateTo, isInternalPath } from '../../lib/navigation'
 
-    let activeNav = 'home'
-    let isHidden = false
+    let activeNav = $state(typeof window !== 'undefined' ? window.location.pathname : '/')
+    let isHidden = $state(false)
     let lastScrollY = 0
 
     const SCROLL_DELTA = 8
     const TOP_OFFSET = 24
 
-    function navigate(section) {
-        activeNav = section
+    function handleNavClick(event, path) {
+        if (!isInternalPath(path)) return
+        if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) return
+
+        event.preventDefault()
+        navigateTo(path)
     }
 
     function handleScroll() {
@@ -33,8 +38,14 @@
         lastScrollY = window.scrollY || 0
         window.addEventListener('scroll', handleScroll, { passive: true })
 
+        const updateActiveNav = () => {
+            activeNav = window.location.pathname
+        }
+        window.addEventListener('popstate', updateActiveNav)
+
         return () => {
             window.removeEventListener('scroll', handleScroll)
+            window.removeEventListener('popstate', updateActiveNav)
         }
     })
 </script>
@@ -42,46 +53,46 @@
 <header class="header" class:hidden={isHidden} id="home">
     <div class="header-container">
         <div class="logo">
-            <a href="/" aria-label="CIMA PROGETTI home">
+            <a href="/" aria-label="CIMA PROGETTI home" on:click={(e) => handleNavClick(e, '/')}>
                 <span class="logo-img logo-mask" aria-hidden="true"></span>
             </a>
         </div>
         <nav class="nav">
             <a
-                href="#services"
-                class:active={activeNav === 'services'}
-                on:click|preventDefault={() => navigate('services')}
-                aria-current={activeNav === 'services' ? 'page' : undefined}
+                href="/servizi"
+                class:active={activeNav === '/servizi'}
+                on:click={(e) => handleNavClick(e, '/servizi')}
+                aria-current={activeNav === '/servizi' ? 'page' : undefined}
             >
                 Servizi
             </a>
             <a
-                href="#method"
-                class:active={activeNav === 'method'}
-                on:click|preventDefault={() => navigate('method')}
-                aria-current={activeNav === 'method' ? 'page' : undefined}
+                href="/metodo"
+                class:active={activeNav === '/metodo'}
+                on:click={(e) => handleNavClick(e, '/metodo')}
+                aria-current={activeNav === '/metodo' ? 'page' : undefined}
             >
                 Il metodo
             </a>
             <a
-                href="#projects"
-                class:active={activeNav === 'projects'}
-                on:click|preventDefault={() => navigate('projects')}
-                aria-current={activeNav === 'projects' ? 'page' : undefined}
+                href="/progetti"
+                class:active={activeNav === '/progetti'}
+                on:click={(e) => handleNavClick(e, '/progetti')}
+                aria-current={activeNav === '/progetti' ? 'page' : undefined}
             >
                 Progetti
             </a>
             <a
-                href="#us"
-                class:active={activeNav === 'us'}
-                on:click|preventDefault={() => navigate('us')}
-                aria-current={activeNav === 'us' ? 'page' : undefined}
+                href="/chi-siamo"
+                class:active={activeNav === '/chi-siamo'}
+                on:click={(e) => handleNavClick(e, '/chi-siamo')}
+                aria-current={activeNav === '/chi-siamo' ? 'page' : undefined}
             >
                 Chi Siamo
             </a>
         </nav>
         <div class="header-actions">
-            <Button text="Contattaci" href="#contact" />
+            <Button text="Contattaci" href="/contatti" />
         </div>
     </div>
 </header>

src/lib/errorRouting.js

@@ -25,8 +25,9 @@ export const resolvePathname = (path) => {
     const normalized = normalizePathname(path)
     const alias = PATH_ALIASES[normalized]
     if (alias) return alias
-    if (KNOWN_PATHS.has(normalized)) return normalized
-    return '/404'
+    // Non forziamo un "/404" per preservare l'URL inserito dall'utente.
+    // Sarà getRoute() in App.svelte a mappare le route non conosciute sul componente 404
+    return normalized
 }
 
 export const getErrorPath = (statusOrCode) => {

src/lib/navigation.js

@@ -0,0 +1,24 @@
+export const isInternalPath = (path) => {
+    if (!path) return false;
+    // Percorsi relativi o assoluti interni (es. /, /contatti) ma non ancore interne (#) per le quali basta l'HTML normale
+    if (path.startsWith('/') && !path.startsWith('//')) return true;
+    
+    try {
+        const url = new URL(path, window.location.origin);
+        return url.origin === window.location.origin;
+    } catch {
+        return false;
+    }
+};
+
+export const navigateTo = (path, replace = false) => {
+    if (typeof window === 'undefined') return;
+
+    if (replace) {
+        window.history.replaceState({}, '', path);
+    } else {
+        window.history.pushState({}, '', path);
+    }
+    // Avvisa l'applicazione (App.svelte) che l'URL è cambiato
+    window.dispatchEvent(new Event('popstate'));
+};