Decode JWT client-side instead of calling /api/auth/me

- Add lib/auth.ts with decodeJWT() and isTokenValid()
- Layout decodes JWT directly - no extra request
- Domains page also uses JWT for admin check
- Removed redundant user.domains from domains list page

frontend/src/lib/auth.ts

@@ -0,0 +1,28 @@
+interface JWTPayload {
+  userId: number;
+  username: string;
+  role: string;
+  exp: number;
+  iat: number;
+}
+
+export function decodeJWT(token: string): JWTPayload | null {
+  try {
+    const parts = token.split('.');
+    if (parts.length !== 3) return null;
+    
+    const payload = parts[1];
+    const decoded = atob(payload.replace(/-/g, '+').replace(/_/g, '/'));
+    return JSON.parse(decoded);
+  } catch {
+    return null;
+  }
+}
+
+export function isTokenValid(token: string): boolean {
+  const payload = decodeJWT(token);
+  if (!payload) return false;
+  
+  const now = Math.floor(Date.now() / 1000);
+  return payload.exp > now;
+}

frontend/src/routes/+layout.svelte

@@ -2,9 +2,10 @@
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
   import { onMount } from 'svelte';
+  import { decodeJWT, isTokenValid } from '$lib/auth';
 
   let { children } = $props();
-  let user: { username?: string; email?: string; role?: string } | null = $state(null);
+  let user: { userId?: number; username?: string; role?: string } | null = $state(null);
   let selectedDomain = $state<string | null>(null);
   let loading = $state(true);
   let showDropdown = $state(false);
@@ -47,35 +48,25 @@
     }
   });
 
-  async function checkAuth() {
+  function checkAuth() {
     const token = localStorage.getItem('token');
-    if (!token) {
+    if (!token || !isTokenValid(token)) {
       goto('/auth/login');
       return;
     }
 
-    try {
+    const payload = decodeJWT(token);
-      const res = await fetch('/api/auth/me', {
+    if (!payload) {
-        headers: { Authorization: `Bearer ${token}` }
-      });
-      
-      if (!res.ok) {
-        goto('/auth/login');
-        return;
-      }
-
-      const data = await res.json();
-      user = data.data;
-
-      if (user?.role !== 'admin') {
-        goto('/auth/dashboard');
-        return;
-      }
-    } catch {
       goto('/auth/login');
-    } finally {
+      return;
-      loading = false;
     }
+
+    user = {
+      userId: payload.userId,
+      username: payload.username,
+      role: payload.role
+    };
+    loading = false;
   }
 
   function logout() {
@@ -111,7 +102,7 @@
       </nav>
       <div class="user-menu" bind:this={dropdownRef}>
         <button class="dropdown-trigger" onclick={toggleDropdown}>
-          <span class="username">{user.username || user.email}</span>
+          <span class="username">{user.username}</span>
           <span class="arrow" class:open={showDropdown}>▼</span>
         </button>
         {#if showDropdown}

frontend/src/routes/domains/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { decodeJWT } from '$lib/auth';
+
   interface Domain {
     id: number;
     name: string;
@@ -6,15 +8,8 @@
     aliasCount: number;
   }
 
-  interface UserInfo {
-    id: number;
-    username: string;
-    role: string;
-    domains: string[];
-  }
-
   let domains = $state<Domain[]>([]);
-  let user = $state<UserInfo | null>(null);
+  let isAdmin = $state(false);
   let loading = $state(true);
   let dialogEl = $state<HTMLDialogElement | null>(null);
   let newDomain = $state({ name: '' });
@@ -29,18 +24,15 @@
   }
 
   async function loadData() {
-    try {
+    const token = localStorage.getItem('token');
-      const [domainsRes, userRes] = await Promise.all([
+    const payload = decodeJWT(token || '');
-        fetchWithAuth('/api/domains'),
+    isAdmin = payload?.role === 'admin';
-        fetchWithAuth('/api/auth/me')
-      ]);
 
+    try {
+      const domainsRes = await fetchWithAuth('/api/domains');
       if (domainsRes.data) {
         domains = domainsRes.data || [];
       }
-      if (userRes.data) {
-        user = userRes.data;
-      }
     } catch (e) {
       console.error('Failed to load data:', e);
     } finally {
@@ -92,38 +84,22 @@
     }
   }
 
-  function isAdmin() {
-    return user?.role === 'admin';
-  }
-
   $effect(() => { loadData(); });
 </script>
 
 <div class="header">
   <h2>Domains</h2>
-  {#if isAdmin()}
+  {#if isAdmin}
     <button onclick={openModal}>Add Domain</button>
   {/if}
 </div>
 
-{#if user && !isAdmin() && user.domains.length > 0}
-  <h3>Your Domains</h3>
-  <div class="domains-grid">
-    {#each user.domains as domainName}
-      <a href="/domains/{domainName}/users" class="domain-card">
-        <span class="domain-name">{domainName}</span>
-        <span class="domain-links">Manage →</span>
-      </a>
-    {/each}
-  </div>
-{/if}
-
 {#if loading}
   <p>Loading...</p>
-{:else if isAdmin() && domains.length === 0}
+{:else if domains.length === 0}
   <p>No domains configured yet.</p>
-{:else if isAdmin()}
+{:else}
-  <h3>All Domains</h3>
+  <h3>Domains</h3>
   <table>
     <thead>
       <tr>