From 506569b038ad78f4408e83a4df34744eac3ecccd Mon Sep 17 00:00:00 2001
From: Geert Rademakes <g26107@eon.com>
Date: Fri, 25 Apr 2025 11:30:47 +0200
Subject: [PATCH] UI fixes

---
 packages/frontend/src/pages/Configuration.tsx | 49 +++++++++++++++++--
 1 file changed, 46 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/pages/Configuration.tsx b/packages/frontend/src/pages/Configuration.tsx
index b582b09..56c99c1 100644
--- a/packages/frontend/src/pages/Configuration.tsx
+++ b/packages/frontend/src/pages/Configuration.tsx
@@ -1,4 +1,6 @@
-import { Box, Heading, VStack, Text, Button, OrderedList, ListItem, useDisclosure, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, useToast } from "@chakra-ui/react";
+import { Box, Heading, VStack, Text, Button, OrderedList, ListItem, useDisclosure, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, useToast, IconButton, Flex } from "@chakra-ui/react";
+import { ChevronLeftIcon } from "@chakra-ui/icons";
+import { useNavigate } from "react-router-dom";
 import { useXmlParser } from "../hooks/useXmlParser";
 import { exportToXml } from "../services/xmlService";
 import { StyledFileInput } from "../components/StyledFileInput";
@@ -8,6 +10,7 @@ export function Configuration() {
   const { songs, resetLibrary } = useXmlParser();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const toast = useToast();
+  const navigate = useNavigate();
 
   const handleExport = () => {
     const xmlContent = exportToXml(songs, []);
@@ -45,9 +48,35 @@ export function Configuration() {
   };
 
   return (
-    <Box h="100%" bg="gray.900" p={8}>
+    <Box 
+      h="100%" 
+      bg="gray.900" 
+      p={8}
+      overflowY="auto"
+      sx={{
+        '&::-webkit-scrollbar': {
+          width: '8px',
+          borderRadius: '8px',
+          backgroundColor: 'gray.900',
+        },
+        '&::-webkit-scrollbar-thumb': {
+          backgroundColor: 'gray.700',
+          borderRadius: '8px',
+        },
+      }}
+    >
       <VStack spacing={8} align="stretch" maxW="2xl" mx="auto">
-        <Heading size="lg" mb={6}>Configuration</Heading>
+        <Flex align="center" gap={4}>
+          <IconButton
+            icon={<ChevronLeftIcon boxSize={6} />}
+            aria-label="Go back"
+            variant="ghost"
+            onClick={() => navigate('/')}
+            color="gray.300"
+            _hover={{ color: "white", bg: "whiteAlpha.200" }}
+          />
+          <Heading size="lg">Configuration</Heading>
+        </Flex>
         
         <Box bg="gray.800" p={6} borderRadius="lg" borderWidth="1px" borderColor="gray.700">
           <Heading size="md" mb={4}>Library Management</Heading>
@@ -82,6 +111,20 @@ export function Configuration() {
                 <Text color="gray.400" mb={4}>
                   Export your current library back to XML format to import into Rekordbox.
                 </Text>
+                <OrderedList spacing={3} color="gray.400" mb={4}>
+                  <ListItem>
+                    Click the button below to export your library to XML
+                  </ListItem>
+                  <ListItem>
+                    Open Rekordbox 7 and go to <Text as="span" color="gray.300" fontWeight="medium">Preferences → Advanced → rekordbox xml</Text>
+                  </ListItem>
+                  <ListItem>
+                    Select your exported XML file in the <Text as="span" color="gray.300" fontWeight="medium">rekordbox xml</Text> section
+                  </ListItem>
+                  <ListItem>
+                    Your imported playlists will appear in the left sidebar under <Text as="span" color="gray.300" fontWeight="medium">the sd card with < > in them icon.</></Text>
+                  </ListItem>
+                </OrderedList>
                 <Button onClick={handleExport} width="full">
                   Export XML
                 </Button>