refactor(App.jsx): streamline component structure for better maintainability

src/App.jsx

@@ -27,9 +27,9 @@ import {
   Center,
   Collapse,
   Icon,
-  SlideFade,
+  IconButton,
 } from '@chakra-ui/react';
-import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons';
+import { ChevronDownIcon, ChevronUpIcon, SettingsIcon } from '@chakra-ui/icons';
 import axios from 'axios';
 import JSZip from 'jszip';
 import { saveAs } from 'file-saver';
@@ -487,7 +487,7 @@ const App = () => {
       display="flex" 
       alignItems="center" 
       justifyContent="center"
-      bg="#000000"
+      bg="black"
       overflow="hidden"
       position="relative"
     >
@@ -498,161 +498,121 @@ const App = () => {
         left={0}
         right={0}
         bottom={0}
-        opacity={0.03}
-        backgroundImage="radial-gradient(circle at 1px 1px, #aaaaaa 1px, transparent 0)"
+        opacity={0.02}
+        backgroundImage="radial-gradient(circle at 1px 1px, #666666 1px, transparent 0)"
         backgroundSize="40px 40px"
         pointerEvents="none"
       />
       
-      <VStack 
-        spacing={6}
-        maxW={{ base: "95%", md: "500px" }}
+      {/* Single container with everything */}
+      <Box 
+        maxW={{ base: "90%", md: "450px" }}
         w="full"
+        backdropFilter="blur(25px)"
+        bg="rgba(28, 28, 30, 0.75)"
+        borderRadius="2xl"
+        borderWidth="1px"
+        borderColor="rgba(255, 255, 255, 0.08)"
+        boxShadow="0 20px 40px rgba(0, 0, 0, 0.4)"
+        overflow="hidden"
+        position="relative"
       >
-        {/* Title */}
-        <Heading 
-          as="h1" 
-          size="2xl" 
-          color="#ffffff"
-          textAlign="center"
-          fontWeight="semibold"
-          letterSpacing="tight"
-        >
-          Glif LoRA Autocaption
-        </Heading>
-        
-        {/* Main minimalistic drop box */}
-        <Box 
-          w="full"
-          backdropFilter="blur(20px)"
-          bg="rgba(30, 30, 30, 0.7)"
-          borderRadius="xl"
-          borderWidth="1px"
-          borderColor="rgba(255, 255, 255, 0.1)"
-          boxShadow="0 10px 30px 0 rgba(0, 0, 0, 0.4)"
-          overflow="hidden"
-          p={6}
-          position="relative"
-        >
+        {/* Title and Main Area */}
+        <VStack spacing={0} w="full">
+          <Box 
+            w="full" 
+            pt={8} 
+            pb={4} 
+            px={6}
+            textAlign="center"
+          >
+            <Heading 
+              as="h1" 
+              size="lg" 
+              color="white"
+              fontWeight="semibold"
+              letterSpacing="tight"
+            >
+              Glif LoRA Autocaption
+            </Heading>
+          </Box>
+          
           {/* Main Drop Area */}
           <Box
             w="full"
-            h="180px"
-            borderWidth="1px"
-            borderRadius="lg"
-            borderStyle="dashed"
-            borderColor="rgba(255, 255, 255, 0.2)"
             display="flex"
             alignItems="center"
             justifyContent="center"
             cursor="pointer"
-            bg="rgba(40, 40, 40, 0.4)"
             transition="all 0.3s"
-            mb={uploadedImages.length > 0 ? 6 : 0}
-            _hover={{ 
-              bg: "rgba(50, 50, 50, 0.5)",
-              borderColor: "rgba(255, 255, 255, 0.3)",
-            }}
             onClick={() => fileInputRef.current?.click()}
+            px={6}
+            pb={6}
           >
-            <VStack spacing={4}>
-              <Text color="#e0e0e0" fontSize="md">Drop images here or click to browse</Text>
-              <Button
-                size="sm"
-                bg="rgba(255, 255, 255, 0.1)"
-                color="white"
-                fontWeight="medium"
-                _hover={{ bg: "rgba(255, 255, 255, 0.2)" }}
-                _active={{ bg: "rgba(255, 255, 255, 0.15)" }}
-                disabled={processing}
-              >
-                Select Files
-              </Button>
-            </VStack>
-            <input
-              type="file"
-              multiple
-              accept="image/*"
-              onChange={handleFileChange}
-              style={{ display: 'none' }}
-              ref={fileInputRef}
-            />
+            <Box
+              w="full"
+              h="160px"
+              borderWidth="1px"
+              borderRadius="xl"
+              borderStyle="dashed"
+              borderColor="rgba(255, 255, 255, 0.2)"
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+              bg="rgba(20, 20, 20, 0.3)"
+              transition="all 0.3s"
+              _hover={{ 
+                bg: "rgba(30, 30, 30, 0.5)",
+                borderColor: "rgba(255, 255, 255, 0.3)",
+                transform: "translateY(-1px)"
+              }}
+            >
+              <VStack spacing={3}>
+                <Text color="#e0e0e0" fontSize="md">Drop images here or click to browse</Text>
+                <Button
+                  size="sm"
+                  bg="rgba(255, 255, 255, 0.08)"
+                  color="white"
+                  fontWeight="medium"
+                  _hover={{ bg: "rgba(255, 255, 255, 0.15)" }}
+                  _active={{ bg: "rgba(255, 255, 255, 0.1)" }}
+                  disabled={processing}
+                >
+                  Select Files
+                </Button>
+              </VStack>
+              <input
+                type="file"
+                multiple
+                accept="image/*"
+                onChange={handleFileChange}
+                style={{ display: 'none' }}
+                ref={fileInputRef}
+              />
+            </Box>
           </Box>
-
-          {/* Toggle button for advanced settings */}
+          
+          {/* Settings icon */}
           <Box position="absolute" right={4} bottom={4}>
-            <Button
+            <IconButton
+              aria-label="Settings"
               size="sm"
               variant="ghost"
-              color="rgba(255, 255, 255, 0.6)"
-              _hover={{ color: "white", bg: "rgba(255, 255, 255, 0.1)" }}
+              color="rgba(255, 255, 255, 0.5)"
+              _hover={{ color: "white", bg: "rgba(255, 255, 255, 0.08)" }}
               onClick={toggleApiKey}
-              rightIcon={<Icon as={isApiKeyOpen ? ChevronUpIcon : ChevronDownIcon} />}
-            >
-              Settings
-            </Button>
-          </Box>
-          
-          {/* Action Buttons - only shown when images are uploaded */}
-          {uploadedImages.length > 0 && (
-            <Flex justify="center" gap={4} wrap="wrap" mb={4}>
-              <Button
-                colorScheme="blue"
-                variant="ghost"
-                isLoading={processing}
-                loadingText="Processing"
-                onClick={processImages}
-                disabled={processing || uploadedImages.filter(img => img.status === 'pending').length === 0}
-                _hover={{ bg: "rgba(66, 153, 225, 0.2)" }}
-              >
-                Process Images
-              </Button>
-              
-              <Button
-                variant="ghost"
-                color="teal.300"
-                isLoading={downloading}
-                loadingText="Downloading"
-                onClick={downloadCaptions}
-                disabled={downloading || !hasCaptions}
-                _hover={{ bg: "rgba(49, 151, 149, 0.2)" }}
-              >
-                Download Captions
-              </Button>
-              
-              <Button
-                variant="ghost"
-                color="gray.400"
-                onClick={clearAll}
-                disabled={processing || uploadedImages.length === 0}
-                _hover={{ bg: "rgba(160, 174, 192, 0.2)" }}
-              >
-                Clear All
-              </Button>
-            </Flex>
-          )}
-
-          {processing && (
-            <Progress
-              value={progress}
-              size="xs"
-              colorScheme="blue"
-              hasStripe
-              isAnimated
+              icon={<SettingsIcon />}
               borderRadius="full"
-              mb={4}
             />
-          )}
+          </Box>
 
           {/* Advanced settings panel - collapsible */}
-          <Collapse in={isApiKeyOpen} animateOpacity>
+          <Collapse in={isApiKeyOpen} animateOpacity style={{ width: '100%' }}>
             <Box 
-              mt={4} 
-              p={4} 
-              bg="rgba(20, 20, 20, 0.6)" 
-              borderRadius="md"
-              borderWidth="1px"
-              borderColor="rgba(255, 255, 255, 0.05)"
+              p={5}
+              bg="rgba(24, 24, 26, 0.8)"
+              borderTopWidth="1px"
+              borderTopColor="rgba(255, 255, 255, 0.05)"
             >
               <VStack spacing={4} align="stretch">
                 <FormControl>
@@ -738,23 +698,86 @@ const App = () => {
             </Box>
           </Collapse>
 
+          {/* Action Buttons - only shown when images are uploaded */}
+          {uploadedImages.length > 0 && (
+            <Box 
+              px={5} 
+              py={4} 
+              bg="rgba(22, 22, 24, 0.8)"
+              w="full"
+              borderTopWidth="1px"
+              borderTopColor="rgba(255, 255, 255, 0.05)"
+            >
+              <Flex justify="center" gap={4} wrap="wrap">
+                <Button
+                  variant="ghost"
+                  color="rgba(255, 255, 255, 0.9)"
+                  isLoading={processing}
+                  loadingText="Processing"
+                  onClick={processImages}
+                  disabled={processing || uploadedImages.filter(img => img.status === 'pending').length === 0}
+                  _hover={{ bg: "rgba(255, 255, 255, 0.1)" }}
+                  size="sm"
+                >
+                  Process Images
+                </Button>
+                
+                <Button
+                  variant="ghost"
+                  color="rgba(255, 255, 255, 0.9)"
+                  isLoading={downloading}
+                  loadingText="Downloading"
+                  onClick={downloadCaptions}
+                  disabled={downloading || !hasCaptions}
+                  _hover={{ bg: "rgba(255, 255, 255, 0.1)" }}
+                  size="sm"
+                >
+                  Download Captions
+                </Button>
+                
+                <Button
+                  variant="ghost"
+                  color="rgba(255, 255, 255, 0.6)"
+                  onClick={clearAll}
+                  disabled={processing || uploadedImages.length === 0}
+                  _hover={{ bg: "rgba(255, 255, 255, 0.1)" }}
+                  size="sm"
+                >
+                  Clear All
+                </Button>
+              </Flex>
+              
+              {processing && (
+                <Progress
+                  value={progress}
+                  size="xs"
+                  colorScheme="blue"
+                  hasStripe
+                  isAnimated
+                  borderRadius="full"
+                  mt={3}
+                />
+              )}
+            </Box>
+          )}
+
           {/* Images Section */}
           {uploadedImages.length > 0 && (
-            <Box mt={6}>
+            <Box w="full" borderTopWidth={isImagesOpen ? "1px" : "0px"} borderTopColor="rgba(255, 255, 255, 0.05)">
               <Flex 
                 justify="space-between" 
                 align="center" 
                 onClick={toggleImages}
                 cursor="pointer"
-                py={2}
-                borderRadius="md"
-                _hover={{ color: "white" }}
+                py={3}
+                px={5}
+                _hover={{ bg: "rgba(255, 255, 255, 0.03)" }}
               >
                 <Text fontWeight="medium" color="#e0e0e0">Uploaded Images ({uploadedImages.length})</Text>
                 <Icon as={isImagesOpen ? ChevronUpIcon : ChevronDownIcon} color="#e0e0e0" />
               </Flex>
               <Collapse in={isImagesOpen} animateOpacity>
-                <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4} mt={4}>
+                <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4} p={5}>
                   {uploadedImages.map((image) => (
                     <Box
                       key={image.id}
@@ -770,7 +793,7 @@ const App = () => {
                       <Box position="absolute" top={2} right={2} zIndex={1}>
                         {getStatusBadge(image.status)}
                         {image.isEdited && (
-                          <Badge ml={2} bg="purple.700" color="white">Edited</Badge>
+                          <Badge ml={2} bg="rgba(124, 58, 237, 0.6)" color="white">Edited</Badge>
                         )}
                       </Box>
                       <Image
@@ -897,12 +920,12 @@ const App = () => {
               </Collapse>
             </Box>
           )}
-        </Box>
-        
-        <Text fontSize="xs" color="gray.600" textAlign="center">
-          Glif LoRA Autocaption • {new Date().getFullYear()}
-        </Text>
-      </VStack>
+          
+          <Text fontSize="xs" color="gray.500" textAlign="center" py={2}>
+            Glif LoRA Autocaption • {new Date().getFullYear()}
+          </Text>
+        </VStack>
+      </Box>
     </Box>
   );
 };