nu

frontend/src/lib/stores/auth.js

@@ -95,6 +95,48 @@ function createAuthStore() {
             return { success: false, error: data.error || 'Registration failed' };
         },
         
+async updateColor(color) {
+    const token = localStorage.getItem('auth_token');
+    const response = await fetch('/api/user/color', {
+        method: 'PUT',
+        headers: {
+            'Authorization': `Bearer ${token}`,
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ color })
+    });
+    
+    const data = await response.json();
+    
+    if (response.ok && data.success) {
+        // IMPORTANT: Store the new token that includes the updated color
+        if (data.token) {
+            localStorage.setItem('auth_token', data.token);
+            
+            // Update the store with new token and user data
+            update(state => ({
+                ...state,
+                token: data.token,
+                user: { 
+                    ...state.user, 
+                    userColor: data.color,
+                    colorCode: data.color  // Make sure both fields are updated
+                }
+            }));
+        } else {
+            // Fallback if no new token (shouldn't happen with current backend)
+            update(state => ({
+                ...state,
+                user: { ...state.user, userColor: data.color, colorCode: data.color }
+            }));
+        }
+        
+        return { success: true, color: data.color };
+    }
+    
+    return { success: false, error: data.error || 'Failed to update color' };
+},
+        
         updateUser(userData) {
             update(state => ({
                 ...state,
@@ -125,4 +167,9 @@ export const isAdmin = derived(
 export const isStreamer = derived(
     auth,
     $auth => $auth.user?.isStreamer || false
+);
+
+export const userColor = derived(
+    auth,
+    $auth => $auth.user?.colorCode || '#561D5E'
 );

frontend/src/lib/stores/user.js

@@ -0,0 +1,93 @@
+import { writable, derived } from 'svelte/store';
+import { browser } from '$app/environment';
+
+function createUserStore() {
+    // Initialize from localStorage if in browser
+    const initialUser = browser ? JSON.parse(localStorage.getItem('user') || 'null') : null;
+    
+    const { subscribe, set, update } = writable(initialUser);
+
+    return {
+        subscribe,
+        set: (user) => {
+            if (browser && user) {
+                localStorage.setItem('user', JSON.stringify(user));
+            } else if (browser) {
+                localStorage.removeItem('user');
+            }
+            set(user);
+        },
+        update: (fn) => {
+            update(currentUser => {
+                const newUser = fn(currentUser);
+                if (browser && newUser) {
+                    localStorage.setItem('user', JSON.stringify(newUser));
+                }
+                return newUser;
+            });
+        },
+        updateColor: async (newColor) => {
+            const token = browser ? localStorage.getItem('token') : null;
+            if (!token) return false;
+
+            try {
+                const response = await fetch('/api/user/color', {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': `Bearer ${token}`
+                    },
+                    body: JSON.stringify({ color: newColor })
+                });
+
+                const data = await response.json();
+                if (data.success) {
+                    // Update the store with new user data
+                    if (data.user) {
+                        // Full user data returned
+                        set(data.user);
+                    } else {
+                        // Only color returned, update existing user
+                        update(u => u ? { ...u, userColor: data.color } : null);
+                    }
+                    return true;
+                }
+                return false;
+            } catch (error) {
+                console.error('Failed to update color:', error);
+                return false;
+            }
+        },
+        refresh: async () => {
+            const token = browser ? localStorage.getItem('token') : null;
+            if (!token) return;
+
+            try {
+                const response = await fetch('/api/user/me', {
+                    headers: {
+                        'Authorization': `Bearer ${token}`
+                    }
+                });
+
+                if (response.ok) {
+                    const data = await response.json();
+                    if (data.success && data.user) {
+                        set(data.user);
+                        return data.user;
+                    }
+                }
+            } catch (error) {
+                console.error('Failed to refresh user:', error);
+            }
+            return null;
+        }
+    };
+}
+
+export const userStore = createUserStore();
+
+// Derived store for just the color
+export const userColor = derived(
+    userStore,
+    $user => $user?.userColor || '#561D5E'
+);