Initial commit: ACE-Step UI - Open source music generation interface

context/AuthContext.tsx

@@ -0,0 +1,117 @@
+import React, { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react';
+import { authApi, User } from '../services/api';
+
+interface AuthContextType {
+  user: User | null;
+  token: string | null;
+  isLoading: boolean;
+  isAuthenticated: boolean;
+  setupUser: (username: string) => Promise<void>;
+  updateUsername: (username: string) => Promise<void>;
+  logout: () => void;
+  refreshUser: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+const TOKEN_KEY = 'acestep_token';
+const USER_KEY = 'acestep_user';
+
+export function AuthProvider({ children }: { children: ReactNode }): React.ReactElement {
+  // Start with null - we'll auto-login from database on mount
+  const [user, setUser] = useState<User | null>(null);
+  const [token, setToken] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const isAuthenticated = !!user && !!token;
+
+  // Auto-login on mount: Try to get existing user from database
+  useEffect(() => {
+    async function initAuth(): Promise<void> {
+      try {
+        // First, try auto-login from database (for local single-user app)
+        const { user: userData, token: newToken } = await authApi.auto();
+        setUser(userData);
+        setToken(newToken);
+        localStorage.setItem(TOKEN_KEY, newToken);
+        localStorage.setItem(USER_KEY, JSON.stringify(userData));
+      } catch (error: unknown) {
+        // No user in database (404) or server error - that's okay
+        // Clear any stale localStorage data
+        const err = error as { message?: string };
+        if (err.message?.startsWith('404:')) {
+          // No user exists yet - frontend will show username setup
+          console.log('No user in database, need to set up username');
+        } else {
+          console.warn('Auto-login failed:', error);
+        }
+        // Clear stale data
+        setToken(null);
+        setUser(null);
+        localStorage.removeItem(TOKEN_KEY);
+        localStorage.removeItem(USER_KEY);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    initAuth();
+  }, []);
+
+  const setupUser = useCallback(async (username: string): Promise<void> => {
+    const { user: userData, token: newToken } = await authApi.setup(username);
+    setUser(userData);
+    setToken(newToken);
+    localStorage.setItem(TOKEN_KEY, newToken);
+    localStorage.setItem(USER_KEY, JSON.stringify(userData));
+  }, []);
+
+  const updateUsername = useCallback(async (username: string): Promise<void> => {
+    if (!token) throw new Error('Not authenticated');
+    const { user: userData, token: newToken } = await authApi.updateUsername(username, token);
+    setUser(userData);
+    setToken(newToken);
+    localStorage.setItem(TOKEN_KEY, newToken);
+    localStorage.setItem(USER_KEY, JSON.stringify(userData));
+  }, [token]);
+
+  const logout = useCallback((): void => {
+    authApi.logout().catch(() => {});
+    setUser(null);
+    setToken(null);
+    localStorage.removeItem(TOKEN_KEY);
+    localStorage.removeItem(USER_KEY);
+  }, []);
+
+  const refreshUser = useCallback(async (): Promise<void> => {
+    if (!token) return;
+    try {
+      const { user: userData } = await authApi.me(token);
+      setUser(userData);
+      localStorage.setItem(USER_KEY, JSON.stringify(userData));
+    } catch (error) {
+      console.error('Failed to refresh user:', error);
+    }
+  }, [token]);
+
+  const value: AuthContextType = {
+    user,
+    token,
+    isLoading,
+    isAuthenticated,
+    setupUser,
+    updateUsername,
+    logout,
+    refreshUser,
+  };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export function useAuth(): AuthContextType {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}

context/ResponsiveContext.tsx

@@ -0,0 +1,55 @@
+import React, { createContext, useContext, useState, useEffect, ReactNode, useMemo } from 'react';
+
+interface ResponsiveContextType {
+  isMobile: boolean;
+  isDesktop: boolean;
+}
+
+const MOBILE_BREAKPOINT = 768;
+
+const ResponsiveContext = createContext<ResponsiveContextType | undefined>(undefined);
+
+function getInitialState(): boolean {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+  return window.innerWidth < MOBILE_BREAKPOINT;
+}
+
+export function ResponsiveProvider({ children }: { children: ReactNode }): React.ReactElement {
+  const [isMobile, setIsMobile] = useState<boolean>(getInitialState);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const mediaQuery = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+
+    const handleChange = (event: MediaQueryListEvent) => {
+      setIsMobile(event.matches);
+    };
+
+    setIsMobile(mediaQuery.matches);
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, []);
+
+  const value = useMemo<ResponsiveContextType>(() => ({
+    isMobile,
+    isDesktop: !isMobile,
+  }), [isMobile]);
+
+  return <ResponsiveContext.Provider value={value}>{children}</ResponsiveContext.Provider>;
+}
+
+export function useResponsive(): ResponsiveContextType {
+  const context = useContext(ResponsiveContext);
+  if (context === undefined) {
+    throw new Error('useResponsive must be used within a ResponsiveProvider');
+  }
+  return context;
+}