fix(web): resolve all 7 ESLint errors for CI pipeline

- Extract useTheme hook and ThemeContext to separate files (react-refresh/only-export-components)

- Add async/await with cleanup in CardPage and ProfilePage effects (react-hooks/set-state-in-effect)

- Remove redundant mounted state in ProfilePage

- Replace 'any' with vi.mocked() and PublicProfile type in tests (no-explicit-any)

- Revert out-of-scope platforms.ts change

Author: Satvik-art-creator

apps/web/src/components/Navbar.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import { useTheme } from '../lib/theme';
+import { useTheme } from '../lib/useTheme';
 import './Navbar.css';
 
 export default function Navbar() {

apps/web/src/lib/ThemeContext.ts

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+
+type Theme = 'light' | 'dark';
+
+export interface ThemeContextValue {
+  theme: Theme;
+  toggleTheme: () => void;
+}
+
+export const ThemeContext = createContext<ThemeContextValue | null>(null);

apps/web/src/lib/theme.tsx

@@ -1,14 +1,9 @@
-import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
+import { useEffect, useState, type ReactNode } from 'react';
+import { ThemeContext } from './ThemeContext';
+import type { ThemeContextValue } from './ThemeContext';
 
 type Theme = 'light' | 'dark';
 
-interface ThemeContextValue {
-  theme: Theme;
-  toggleTheme: () => void;
-}
-
-const ThemeContext = createContext<ThemeContextValue | null>(null);
-
 function getInitialTheme(): Theme {
   if (typeof window === 'undefined') return 'dark';
 
@@ -33,15 +28,11 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
 
   const toggleTheme = () => setTheme((t) => (t === 'dark' ? 'light' : 'dark'));
 
+  const value: ThemeContextValue = { theme, toggleTheme };
+
   return (
-    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+    <ThemeContext.Provider value={value}>
       {children}
     </ThemeContext.Provider>
   );
 }
-
-export function useTheme(): ThemeContextValue {
-  const ctx = useContext(ThemeContext);
-  if (!ctx) throw new Error('useTheme must be used within ThemeProvider');
-  return ctx;
-}

apps/web/src/lib/useTheme.ts

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { ThemeContext } from './ThemeContext';
+import type { ThemeContextValue } from './ThemeContext';
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error('useTheme must be used within ThemeProvider');
+  return ctx;
+}

apps/web/src/pages/CardPage.tsx

@@ -24,17 +24,31 @@ export default function CardPage() {
 
   useEffect(() => {
     if (!id) return;
-    setLoading(true);
-    apiFetch<PublicCard>(`/api/u/card/${id}`)
-      .then((data) => {
-        setCard(data);
-        setError(null);
-      })
-      .catch(() => {
-        setCard(null);
-        setError('Card not found');
-      })
-      .finally(() => setLoading(false));
+
+    let cancelled = false;
+
+    const fetchCard = async () => {
+      try {
+        const data = await apiFetch<PublicCard>(`/api/u/card/${id}`);
+        if (!cancelled) {
+          setCard(data);
+          setError(null);
+        }
+      } catch {
+        if (!cancelled) {
+          setCard(null);
+          setError('Card not found');
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    };
+
+    fetchCard();
+
+    return () => {
+      cancelled = true;
+    };
   }, [id]);
 
   // Update document title

apps/web/src/pages/ProfilePage.test.tsx

@@ -3,6 +3,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { MemoryRouter, Routes, Route } from 'react-router-dom';
 import ProfilePage from './ProfilePage';
 import { apiFetch } from '../lib/api';
+import type { PublicProfile } from '../shared';
 
 vi.mock('../lib/api', () => ({
   apiFetch: vi.fn(),
@@ -24,14 +25,14 @@ describe('ProfilePage', () => {
   };
 
   it('renders loading state initially', () => {
-    (apiFetch as any).mockImplementation(() => new Promise(() => {}));
+    vi.mocked(apiFetch).mockImplementation(() => new Promise(() => {}));
     const { container } = renderWithRouter('testuser');
 
     expect(container.querySelector('.loading-card')).toBeInTheDocument();
   });
 
   it('renders profile data successfully', async () => {
-    const mockProfile = {
+    const mockProfile: PublicProfile = {
       id: '123',
       userId: '456',
       username: 'testuser',
@@ -55,7 +56,7 @@ describe('ProfilePage', () => {
       updatedAt: new Date().toISOString(),
     };
 
-    (apiFetch as any).mockResolvedValue(mockProfile);
+    vi.mocked(apiFetch).mockResolvedValue(mockProfile);
 
     renderWithRouter('testuser');
 
@@ -70,7 +71,7 @@ describe('ProfilePage', () => {
   });
 
   it('renders 404 flow when user is not found', async () => {
-    (apiFetch as any).mockRejectedValue(new Error('User not found'));
+    vi.mocked(apiFetch).mockRejectedValue(new Error('User not found'));
 
     renderWithRouter('unknownuser');
 

apps/web/src/pages/ProfilePage.tsx

@@ -18,27 +18,36 @@ export default function ProfilePage() {
   const [profile, setProfile] = useState<PublicProfile | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
-  const [mounted, setMounted] = useState(false);
   const [copyMessage, setCopyMessage] = useState('');
   const [copyStatus, setCopyStatus] = useState<'success' | 'error'>('success');
 
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
   useEffect(() => {
     if (!username) return;
-    setLoading(true);
-    apiFetch<PublicProfile>(`/api/u/${username}?source=web`)
-      .then((data) => {
-        setProfile(data);
-        setError(null);
-      })
-      .catch(() => {
-        setProfile(null);
-        setError('User not found');
-      })
-      .finally(() => setLoading(false));
+
+    let cancelled = false;
+
+    const fetchProfile = async () => {
+      try {
+        const data = await apiFetch<PublicProfile>(`/api/u/${username}?source=web`);
+        if (!cancelled) {
+          setProfile(data);
+          setError(null);
+        }
+      } catch {
+        if (!cancelled) {
+          setProfile(null);
+          setError('User not found');
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    };
+
+    fetchProfile();
+
+    return () => {
+      cancelled = true;
+    };
   }, [username]);
 
   async function copyProfileUrl() {
@@ -107,7 +116,7 @@ export default function ProfilePage() {
         className="bg-gradient"
         style={{ '--accent': profile.accentColor || '#6366f1' } as React.CSSProperties}
       />
-      <main className={`profile-container ${mounted ? 'loaded' : ''}`}>
+      <main className="profile-container loaded">
         <div
           className="profile-card glass"
           style={{ '--accent': profile.accentColor } as React.CSSProperties}

packages/shared/src/platforms.ts

@@ -292,8 +292,3 @@ export function getDeepLinkUrl(platformId: string, username: string): string | n
   if (!platform?.deepLinkPattern) return null;
   return platform.deepLinkPattern.replace(/{username}/g, username);
 }
-
-/** Check if a platform ID is supported */
-export function isSupportedPlatform(id: string): boolean {
-  return id in PLATFORMS;
-}