From 78e53f42bf24209527717240e0c85ef4f2894c06 Mon Sep 17 00:00:00 2001
From: Maksim Totmin <maksim@totmin.ru>
Date: Thu, 25 Jun 2026 19:30:42 +0700
Subject: [PATCH] fix: SvelteKit UI reactivity with Svelte 5 runes

* / replaces legacy $: syntax
* Active menu highlight via .url.pathname (/stores)
* Logout navigates to /login via goto()
* Token/user footer updates reactively via
---
 web/src/routes/+layout.svelte | 39 +++++++++++++++++++++--------------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index fb8662e..1e2e8d7 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -1,31 +1,40 @@
 <script lang="ts">
-  import { browser } from '$app/environment';
   import { page } from '$app/stores';
+  import { goto } from '$app/navigation';
   import '../app.css';
   import { Toaster } from 'svelte-sonner';
-  import { LogIn, LayoutDashboard, Phone, Cable, Users } from 'lucide-svelte';
+  import { LayoutDashboard, Phone, Cable, Users } from 'lucide-svelte';
 
-  let token: string | null = browser ? localStorage.getItem('token') : null;
-  let user: { username: string; role: string } | null = token
-    ? (() => { try { return JSON.parse(atob(token.split('.')[1])); } catch { return null; } })()
-    : null;
+  let token: string | null = null;
+  let user: { username: string; role: string } | null = null;
 
-  function logout() {
-    if (browser) {
-      localStorage.removeItem('token');
-      localStorage.removeItem('refreshToken');
+  function updateAuth() {
+    token = typeof localStorage !== 'undefined' ? localStorage.getItem('token') : null;
+    if (token) {
+      try { user = JSON.parse(atob(token.split('.')[1])); } catch { user = null; }
+    } else {
+      user = null;
     }
-    token = null;
-    user = null;
   }
 
-  $: pathname = browser ? window.location.pathname : '';
-  $: isLogin = pathname === '/login';
+  function logout() {
+    localStorage.removeItem('token');
+    localStorage.removeItem('refreshToken');
+    updateAuth();
+    goto('/login');
+  }
+
+  let pathname = $derived($page.url.pathname);
+
+  $effect(() => {
+    $page.url.pathname;
+    updateAuth();
+  });
 </script>
 
 <Toaster position="top-right" />
 
-{#if !isLogin}
+{#if pathname !== '/login'}
   <div class="flex min-h-screen">
     <!-- Sidebar -->
     <aside class="w-64 border-r bg-card flex flex-col">