VERY MESSY FRONTEND NOTHING IS WORKING AAAAAAAAAAA

frontend/src/App.tsx

@@ -1,26 +1,56 @@
-import { MantineProvider, Container, Title, Stack } from '@mantine/core';
-import { LinkForm } from './components/LinkForm';
-import { LinkList } from './components/LinkList';
-import { Link } from './types/api';
+import { Container } from './components/ui/container'
+import { Button } from './components/ui/button'
+import { LinkForm } from './components/LinkForm'
+import { LinkList } from './components/LinkList'
+import { AuthForms } from './components/AuthForms'
+import { AuthProvider, useAuth } from './context/AuthContext'
+import { useState } from 'react'
+import { Toaster } from './components/ui/toaster'
 
-function App() {
-	const handleLinkCreated = (link: Link) => {
-		// You could update the list here or show a success message
-		window.location.reload();
-	};
+function AppContent() {
+	const { user, logout } = useAuth()
+	const [refreshCounter, setRefreshCounter] = useState(0)
+
+	const handleLinkCreated = () => {
+		// Increment refresh counter to trigger list refresh
+		setRefreshCounter(prev => prev + 1)
+	}
 
 	return (
-		<MantineProvider withGlobalStyles withNormalizeCSS>
-			<Container size="lg" py="xl">
-				<Stack spacing="xl">
-					<Title order={1}>URL Shortener</Title>
-					<LinkForm onSuccess={handleLinkCreated} />
-					<LinkList />
-				</Stack>
-			</Container>
-		</MantineProvider>
-	);
+		<div className="container max-w-6xl py-8">
+			<div className="space-y-8">
+				<div className="flex items-center justify-between">
+					<h1 className="text-3xl font-bold">URL Shortener</h1>
+					{user && (
+						<div className="flex items-center gap-4">
+							<p className="text-sm text-muted-foreground">Welcome, {user.email}</p>
+							<Button variant="outline" onClick={logout}>
+								Logout
+							</Button>
+						</div>
+					)}
+				</div>
+
+				{user ? (
+					<>
+						<LinkForm onSuccess={handleLinkCreated} />
+						<LinkList refresh={refreshCounter} />
+					</>
+				) : (
+					<AuthForms />
+				)}
+			</div>
+		</div>
+	)
 }
 
-export default App;
+function App() {
+	return (
+		<AuthProvider>
+			<AppContent />
+			<Toaster />
+		</AuthProvider>
+	)
+}
 
+export default App