Visual update

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { Container, CssBaseline, ThemeProvider, createTheme, Button, Box, Typography, Alert, CircularProgress } from '@mui/material';
+import { Container, CssBaseline, ThemeProvider, createTheme, Button, Box, Typography, Alert, CircularProgress, Grid } from '@mui/material';
 import Header from './components/Header';
 import DocumentInput from './components/DocumentInput';
 import QuizGenerator from './components/QuizGenerator';
@@ -98,8 +98,14 @@ function App() {
       <Container maxWidth="md" sx={{ py: 4 }}>
         <Header />
         <DocumentInput />
-        <Topics onTopicChange={handleTopicChange} />
-        <QuizGenerator onProblemsGenerated={handleProblemsGenerated} />
+        <Grid container spacing={2} sx={{ mb: 2 }}>
+          <Grid item xs={12} md={4}>
+            <Topics onTopicChange={handleTopicChange} />
+          </Grid>
+          <Grid item xs={12} md={8}>
+            <QuizGenerator onProblemsGenerated={handleProblemsGenerated} />
+          </Grid>
+        </Grid>
         
         {error && (
           <Alert severity="error" sx={{ mt: 2, mb: 2 }}>

frontend/src/components/Header.tsx

@@ -4,7 +4,7 @@ function Header() {
   return (
     <Box sx={{ mb: 4 }}>
       <Typography variant="h2" component="h1" align="center">
-        Simplify
+        Simplifi
       </Typography>
     </Box>
   );

frontend/src/components/Topics.tsx

@@ -1,4 +1,4 @@
-import { FormControl, InputLabel, Select, MenuItem, SelectChangeEvent } from '@mui/material';
+import { FormControl, InputLabel, Select, MenuItem, SelectChangeEvent, CircularProgress, Box } from '@mui/material';
 import { useEffect, useState } from 'react';
 
 interface TopicsProps {
@@ -13,17 +13,18 @@ export default function Topics({ onTopicChange }: TopicsProps) {
   const [topics, setTopics] = useState<string[]>([]);
   const [selectedTopic, setSelectedTopic] = useState('');
   const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     const fetchTopics = async () => {
       try {
+        setIsLoading(true);
         const response = await fetch('/api/topics');
         if (!response.ok) {
           throw new Error('Failed to fetch topics');
         }
         const data: TopicsResponse = await response.json();
         
-        // Validate that we received an array of sources
         if (!data.sources || !Array.isArray(data.sources)) {
           throw new Error('Invalid topics data received');
         }
@@ -32,7 +33,9 @@ export default function Topics({ onTopicChange }: TopicsProps) {
       } catch (error) {
         console.error('Error fetching topics:', error);
         setError('Failed to load topics');
-        setTopics([]); // Ensure topics is at least an empty array
+        setTopics([]);
+      } finally {
+        setIsLoading(false);
       }
     };
 
@@ -47,18 +50,28 @@ export default function Topics({ onTopicChange }: TopicsProps) {
 
   return (
     <FormControl fullWidth sx={{ mb: 2 }}>
-      <InputLabel>Topics</InputLabel>
+      <InputLabel>Topic</InputLabel>
       <Select
         value={selectedTopic}
-        label="Topics"
+        label="Topic"
         onChange={handleChange}
         error={!!error}
+        disabled={isLoading}
       >
-        {Array.isArray(topics) && topics.map((topic) => (
-          <MenuItem key={topic} value={topic}>
-            {topic}
+        {isLoading ? (
+          <MenuItem value="" disabled>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <CircularProgress size={20} />
+              Loading topics...
+            </Box>
           </MenuItem>
-        ))}
+        ) : (
+          Array.isArray(topics) && topics.map((topic) => (
+            <MenuItem key={topic} value={topic}>
+              {topic}
+            </MenuItem>
+          ))
+        )}
       </Select>
     </FormControl>
   );