Inital build

frontend/src/app/page.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import api from '@/lib/api';
+import SetupWizard from '@/components/SetupWizard';
+import LoginPage from '@/components/LoginPage';
+import FileExplorer from '@/components/FileExplorer';
+
+type AppState = 'loading' | 'setup' | 'login' | 'app';
+
+export default function Home() {
+  const [state, setState] = useState<AppState>('loading');
+
+  useEffect(() => {
+    checkState();
+  }, []);
+
+  async function checkState() {
+    try {
+      const { setup_complete } = await api.checkSetup();
+      if (!setup_complete) {
+        setState('setup');
+        return;
+      }
+
+      if (api.isAuthenticated()) {
+        setState('app');
+      } else {
+        setState('login');
+      }
+    } catch {
+      setState('login');
+    }
+  }
+
+  function handleSetupComplete() {
+    setState('login');
+  }
+
+  function handleLoginSuccess() {
+    setState('app');
+  }
+
+  function handleLogout() {
+    api.logout();
+    setState('login');
+  }
+
+  if (state === 'loading') {
+    return (
+      <div className="flex items-center justify-center min-h-screen" style={{ backgroundColor: 'var(--color-bg-primary)' }}>
+        <div className="flex flex-col items-center gap-4">
+          <div
+            className="w-10 h-10 rounded-full border-2 border-t-transparent"
+            style={{
+              borderColor: 'var(--color-accent)',
+              borderTopColor: 'transparent',
+              animation: 'spin 0.8s linear infinite',
+            }}
+          />
+          <p style={{ color: 'var(--color-text-secondary)' }}>Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (state === 'setup') {
+    return <SetupWizard onComplete={handleSetupComplete} />;
+  }
+
+  if (state === 'login') {
+    return <LoginPage onSuccess={handleLoginSuccess} />;
+  }
+
+  return <FileExplorer onLogout={handleLogout} />;
+}