busya/ss-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrate frontend to Svelte 5 runes semantics

Browse Source
This commit is contained in:
busya
2026-03-11 11:29:24 +03:00
parent e50fc4c476
commit abfe06cea3
61 changed files with 989 additions and 922 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/components/Navbar.svelte
View File

@@ -4,15 +4,18 @@
@SEMANTICS: navbar, navigation, header, layout
@PURPOSE: Main navigation bar for the application.
@LAYER: UI
@RELATION: USES -> $app/stores
@RELATION: USES -> $app/state
-->
<script>
import { page } from '$app/stores';
import { page } from '$app/state';
import { fromStore } from 'svelte/store';
import { t } from '$lib/i18n';
import { LanguageSwitcher } from '$lib/ui';
import { auth } from '$lib/auth/store';
import { goto } from '$app/navigation';
const authState = fromStore(auth);
function handleLogout() {
auth.logout();
goto('/login');
@@ -29,18 +32,18 @@
<nav class="flex items-center space-x-4">
<a
href="/"
class="text-gray-600 hover:text-blue-600 font-medium {$page.url.pathname === '/' ? 'text-blue-600 border-b-2 border-blue-600' : ''}"
class="text-gray-600 hover:text-blue-600 font-medium {page.url.pathname === '/' ? 'text-blue-600 border-b-2 border-blue-600' : ''}"
>
{$t.nav.dashboard}
</a>
<a
href="/reports"
class="text-gray-600 hover:text-blue-600 font-medium {$page.url.pathname.startsWith('/reports') ? 'text-blue-600 border-b-2 border-blue-600' : ''}"
class="text-gray-600 hover:text-blue-600 font-medium {page.url.pathname.startsWith('/reports') ? 'text-blue-600 border-b-2 border-blue-600' : ''}"
>
{$t.nav.reports}
</a>
<div class="relative inline-block group">
<button class="text-gray-600 hover:text-blue-600 font-medium pb-1 {$page.url.pathname.startsWith('/settings') ? 'text-blue-600 border-b-2 border-blue-600' : ''}">
<button class="text-gray-600 hover:text-blue-600 font-medium pb-1 {page.url.pathname.startsWith('/settings') ? 'text-blue-600 border-b-2 border-blue-600' : ''}">
{$t.nav.settings}
</button>
<div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-1 py-2 w-48 z-10 border border-gray-100 before:absolute before:-top-2 before:left-0 before:right-0 before:h-2 before:content-[''] right-0">
@@ -50,9 +53,9 @@
</div>
</div>
{#if $auth.isAuthenticated && $auth.user?.roles?.some(r => r.name === 'Admin')}
{#if authState.current?.isAuthenticated && authState.current?.user?.roles?.some(r => r.name === 'Admin')}
<div class="relative inline-block group">
<button class="text-gray-600 hover:text-blue-600 font-medium pb-1 {$page.url.pathname.startsWith('/admin') ? 'text-blue-600 border-b-2 border-blue-600' : ''}">
<button class="text-gray-600 hover:text-blue-600 font-medium pb-1 {page.url.pathname.startsWith('/admin') ? 'text-blue-600 border-b-2 border-blue-600' : ''}">
{$t.nav.admin}
</button>
<div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-1 py-2 w-48 z-10 border border-gray-100 before:absolute before:-top-2 before:left-0 before:right-0 before:h-2 before:content-[''] right-0">
@@ -65,11 +68,11 @@
{/if}
<LanguageSwitcher />
{#if $auth.isAuthenticated}
{#if authState.current?.isAuthenticated}
<div class="flex items-center space-x-2 border-l pl-4 ml-4">
<span class="text-sm text-gray-600">{$auth.user?.username}</span>
<span class="text-sm text-gray-600">{authState.current?.user?.username}</span>
<button
on:click={handleLogout}
onclick={handleLogout}
class="text-sm text-red-600 hover:text-red-800 font-medium"
>
Logout