From 83fe6994b8391f675d93f3a4e09f0a5387b400ea Mon Sep 17 00:00:00 2001
From: Geert Rademakes <g26107@eon.com>
Date: Thu, 24 Apr 2025 23:11:07 +0200
Subject: [PATCH] Better UI!

---
 packages/frontend/src/App.css                 |  16 +-
 packages/frontend/src/App.tsx                 | 237 +++++++++++++++---
 .../frontend/src/components/SongDetails.tsx   | 135 ++++------
 3 files changed, 265 insertions(+), 123 deletions(-)

diff --git a/packages/frontend/src/App.css b/packages/frontend/src/App.css
index 3a094f1..2abd334 100644
--- a/packages/frontend/src/App.css
+++ b/packages/frontend/src/App.css
@@ -1,7 +1,19 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body, #root {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
 #root {
   max-width: 1280px;
-  margin: 0;
-  padding: 1rem;
 }
 
 .logo {
diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
index de72e21..a05aab9 100644
--- a/packages/frontend/src/App.tsx
+++ b/packages/frontend/src/App.tsx
@@ -1,4 +1,5 @@
-import { Box, Button, Flex, Heading, Input, Spinner, Text, useStyleConfig } from "@chakra-ui/react";
+import { Box, Button, Flex, Heading, Input, Spinner, Text, useStyleConfig, useBreakpointValue, IconButton, Drawer, DrawerBody, DrawerHeader, DrawerOverlay, DrawerContent, DrawerCloseButton, useDisclosure, Container, Menu, MenuButton, MenuList, MenuItem } from "@chakra-ui/react";
+import { ChevronLeftIcon, ChevronRightIcon, HamburgerIcon, ViewIcon, SettingsIcon } from "@chakra-ui/icons";
 import { useState, useRef, useEffect } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import { SongList } from "./components/SongList";
@@ -10,7 +11,7 @@ import { api } from "./services/api";
 import { Song } from "./types/interfaces";
 import "./App.css";
 
-const StyledFileInput = () => {
+const StyledFileInput = ({ isMobile = false }) => {
   const { handleFileUpload } = useXmlParser();
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -22,7 +23,7 @@ const StyledFileInput = () => {
     <Box
       position="relative"
       width="auto"
-      maxW="300px"
+      maxW={isMobile ? "100%" : "300px"}
     >
       <Input
         type="file"
@@ -54,6 +55,7 @@ const StyledFileInput = () => {
           bg: "gray.500"
         }}
         onClick={handleClick}
+        size={isMobile ? "sm" : "md"}
       >
         Choose XML File
       </Button>
@@ -67,6 +69,10 @@ export default function RekordboxReader() {
   const navigate = useNavigate();
   const location = useLocation();
   const initialLoadDone = useRef(false);
+  const mobileFileInputRef = useRef<HTMLInputElement>(null);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  
+  const isMobile = useBreakpointValue({ base: true, md: false });
 
   // Get the current playlist from URL or default to "All Songs"
   const currentPlaylist = location.pathname === "/" 
@@ -169,41 +175,202 @@ export default function RekordboxReader() {
     );
   }
 
+  const playlistManager = (
+    <PlaylistManager
+      playlists={playlists}
+      selectedItem={currentPlaylist}
+      onPlaylistCreate={handleCreatePlaylist}
+      onPlaylistSelect={(name) => {
+        handlePlaylistSelect(name || "All Songs");
+        if (isMobile) onClose();
+      }}
+      onPlaylistDelete={handlePlaylistDelete}
+    />
+  );
+
   return (
-    <Box>
-      <Flex direction="column" gap={4} mb={6}>
-        <Heading size="md" mb={2}>Rekordbox Reader</Heading>
-        <Flex gap={4} align="center">
-          <StyledFileInput />
-          {songs.length > 0 && (
-            <Button onClick={handleExport} size="sm" width="auto">
-              Export XML
-            </Button>
+    <Box 
+      position="fixed"
+      top={0}
+      left={0}
+      right={0}
+      bottom={0}
+      overflow="hidden"
+      margin={0}
+      padding={0}
+    >
+      <Flex direction="column" h="100%" w="100%">
+        {/* Header */}
+        <Flex 
+          px={isMobile ? 2 : 4} 
+          py={2}
+          bg="gray.800" 
+          borderBottom="1px" 
+          borderColor="gray.700" 
+          align="center" 
+          gap={2}
+          w="full"
+        >
+          {isMobile && (
+            <IconButton
+              aria-label="Open menu"
+              icon={<ChevronRightIcon />}
+              onClick={onOpen}
+              variant="solid"
+              colorScheme="blue"
+              size="md"
+              fontSize="20px"
+            />
+          )}
+          <Heading size={isMobile ? "sm" : "md"}>Rekordbox Reader</Heading>
+          
+          {/* Desktop Actions */}
+          {!isMobile && (
+            <Flex gap={2} align="center" ml="auto">
+              <StyledFileInput />
+              {songs.length > 0 && (
+                <Button onClick={handleExport} size="sm" width="auto">
+                  Export XML
+                </Button>
+              )}
+            </Flex>
+          )}
+
+          {/* Mobile Actions */}
+          {isMobile && (
+            <Menu>
+              <MenuButton
+                as={IconButton}
+                icon={<SettingsIcon />}
+                variant="ghost"
+                ml="auto"
+                size="md"
+                color="gray.300"
+                _hover={{ color: "white", bg: "whiteAlpha.200" }}
+              />
+              <MenuList bg="gray.800" borderColor="gray.700">
+                <MenuItem 
+                  bg="gray.800" 
+                  _hover={{ bg: "gray.700" }}
+                >
+                  <StyledFileInput isMobile />
+                </MenuItem>
+                {songs.length > 0 && (
+                  <MenuItem
+                    bg="gray.800"
+                    _hover={{ bg: "gray.700" }}
+                    onClick={handleExport}
+                    color="gray.100"
+                  >
+                    Export XML
+                  </MenuItem>
+                )}
+              </MenuList>
+            </Menu>
           )}
         </Flex>
-      </Flex>
-      <Flex gap={4} alignItems="start">
-        <Box w="200px">
-          <PlaylistManager
-            playlists={playlists}
-            selectedItem={currentPlaylist}
-            onPlaylistCreate={handleCreatePlaylist}
-            onPlaylistSelect={handlePlaylistSelect}
-            onPlaylistDelete={handlePlaylistDelete}
-          />
-        </Box>
-        <Box flex={1}>
-          <SongList
-            songs={displayedSongs}
-            onAddToPlaylist={handleAddSongsToPlaylist}
-            onRemoveFromPlaylist={handleRemoveFromPlaylist}
-            playlists={playlists}
-            onSongSelect={setSelectedSong}
-            selectedSongId={selectedSong?.id || null}
-            currentPlaylist={currentPlaylist}
-          />
-        </Box>
-        <SongDetails song={selectedSong} />
+
+        {/* Main Content */}
+        <Flex flex={1} overflow="hidden" w="full">
+          {/* Sidebar - Desktop */}
+          {!isMobile && (
+            <Box
+              w="300px"
+              minW="300px"
+              p={4}
+              borderRight="1px"
+              borderColor="gray.700"
+              overflowY="auto"
+              bg="gray.900"
+            >
+              {playlistManager}
+            </Box>
+          )}
+
+          {/* Sidebar - Mobile */}
+          <Drawer 
+            isOpen={isOpen} 
+            placement="left" 
+            onClose={onClose}
+            size="full"
+          >
+            <DrawerOverlay />
+            <DrawerContent bg="gray.900" p={0}>
+              <DrawerHeader 
+                borderBottomWidth="1px" 
+                bg="gray.800" 
+                display="flex" 
+                alignItems="center"
+                px={2}
+                py={2}
+              >
+                <Text>Playlists</Text>
+                <IconButton
+                  aria-label="Close menu"
+                  icon={<ChevronLeftIcon />}
+                  onClick={onClose}
+                  variant="ghost"
+                  ml="auto"
+                  color="blue.400"
+                  _hover={{ color: "blue.300", bg: "whiteAlpha.200" }}
+                />
+              </DrawerHeader>
+              <DrawerBody p={2}>
+                {playlistManager}
+              </DrawerBody>
+            </DrawerContent>
+          </Drawer>
+
+          {/* Main Content Area */}
+          <Flex 
+            flex={1} 
+            gap={4} 
+            p={isMobile ? 2 : 4} 
+            overflowY="hidden" 
+            w="full"
+          >
+            {/* Song List */}
+            <Box flex={1} overflowY="auto" w="full">
+              <SongList
+                songs={displayedSongs}
+                onAddToPlaylist={handleAddSongsToPlaylist}
+                onRemoveFromPlaylist={handleRemoveFromPlaylist}
+                playlists={playlists}
+                onSongSelect={setSelectedSong}
+                selectedSongId={selectedSong?.id || null}
+                currentPlaylist={currentPlaylist}
+              />
+            </Box>
+
+            {/* Details Panel */}
+            {!isMobile && (
+              <Box
+                w="350px"
+                minW="350px"
+                p={4}
+                borderLeft="1px"
+                borderColor="gray.700"
+                overflowY="auto"
+                bg="gray.900"
+                sx={{
+                  '&::-webkit-scrollbar': {
+                    width: '8px',
+                    borderRadius: '8px',
+                    backgroundColor: 'gray.900',
+                  },
+                  '&::-webkit-scrollbar-thumb': {
+                    backgroundColor: 'gray.700',
+                    borderRadius: '8px',
+                  },
+                  overflowY: 'auto',
+                  overflowX: 'hidden',
+                }}
+              >
+                <SongDetails song={selectedSong} />
+              </Box>
+            )}
+          </Flex>
+        </Flex>
       </Flex>
     </Box>
   );
diff --git a/packages/frontend/src/components/SongDetails.tsx b/packages/frontend/src/components/SongDetails.tsx
index 6b0594f..a9fddbb 100644
--- a/packages/frontend/src/components/SongDetails.tsx
+++ b/packages/frontend/src/components/SongDetails.tsx
@@ -8,17 +8,7 @@ interface SongDetailsProps {
 export const SongDetails: React.FC<SongDetailsProps> = ({ song }) => {
   if (!song) {
     return (
-      <Box
-        w="300px"
-        position="sticky"
-        top={4}
-        h="calc(100vh - 2rem)"
-        bg="gray.800"
-        p={4}
-        borderRadius="md"
-        borderLeft="1px"
-        borderColor="gray.700"
-      >
+      <Box h="full" p={4}>
         <Text color="gray.500">Select a song to view details</Text>
       </Box>
     );
@@ -36,84 +26,57 @@ export const SongDetails: React.FC<SongDetailsProps> = ({ song }) => {
     { label: "Mix", value: song.mix },
     { label: "Rating", value: song.rating },
     { label: "Comments", value: song.comments },
-  ].filter(detail => detail.value); // Only show fields that have values
+  ].filter(detail => detail.value);
 
   return (
-    <Box
-      w="300px"
-      position="sticky"
-      top={4}
-      h="calc(100vh - 2rem)"
-      bg="gray.800"
-      borderRadius="md"
-      borderLeft="1px"
-      borderColor="gray.700"
-      display="flex"
-      flexDirection="column"
-    >
-      <Box p={4} flex="1" overflowY="auto" css={{
-        '&::-webkit-scrollbar': {
-          width: '4px',
-        },
-        '&::-webkit-scrollbar-track': {
-          background: 'transparent',
-        },
-        '&::-webkit-scrollbar-thumb': {
-          background: 'var(--chakra-colors-gray-600)',
-          borderRadius: '2px',
-        },
-        '&::-webkit-scrollbar-thumb:hover': {
-          background: 'var(--chakra-colors-gray-500)',
-        },
-      }}>
-        <VStack align="stretch" spacing={4}>
-          <Box>
-            <Text fontSize="lg" fontWeight="bold" color="white">
-              {song.title}
-            </Text>
-            <Text fontSize="md" color="gray.400">
-              {song.artist}
-            </Text>
-          </Box>
-          <Divider borderColor="gray.700" />
-          <VStack align="stretch" spacing={3}>
-            {details.map(({ label, value }) => (
-              <Box key={label}>
-                <Text fontSize="xs" color="gray.500" mb={1}>
-                  {label}
-                </Text>
-                <Text fontSize="sm" color="gray.300">
-                  {value}
-                </Text>
-              </Box>
-            ))}
-          </VStack>
-          {song.tempo && (
-            <>
-              <Divider borderColor="gray.700" />
-              <Box>
-                <Text fontSize="xs" color="gray.500" mb={2}>
-                  Tempo Details
-                </Text>
-                <VStack align="stretch" spacing={2}>
-                  <Box>
-                    <Text fontSize="xs" color="gray.500">BPM</Text>
-                    <Text fontSize="sm" color="gray.300">{song.tempo.bpm}</Text>
-                  </Box>
-                  <Box>
-                    <Text fontSize="xs" color="gray.500">Beat</Text>
-                    <Text fontSize="sm" color="gray.300">{song.tempo.battito}</Text>
-                  </Box>
-                  <Box>
-                    <Text fontSize="xs" color="gray.500">Time Signature</Text>
-                    <Text fontSize="sm" color="gray.300">{song.tempo.metro}</Text>
-                  </Box>
-                </VStack>
-              </Box>
-            </>
-          )}
+    <Box h="full">
+      <VStack align="stretch" spacing={4} p={4}>
+        <Box>
+          <Text fontSize="lg" fontWeight="bold" color="white">
+            {song.title}
+          </Text>
+          <Text fontSize="md" color="gray.400">
+            {song.artist}
+          </Text>
+        </Box>
+        <Divider borderColor="gray.700" />
+        <VStack align="stretch" spacing={3}>
+          {details.map(({ label, value }) => (
+            <Box key={label}>
+              <Text fontSize="xs" color="gray.500" mb={1}>
+                {label}
+              </Text>
+              <Text fontSize="sm" color="gray.300">
+                {value}
+              </Text>
+            </Box>
+          ))}
         </VStack>
-      </Box>
+        {song.tempo && (
+          <>
+            <Divider borderColor="gray.700" />
+            <Box>
+              <Text fontSize="xs" color="gray.500" mb={2}>
+                Tempo Details
+              </Text>
+              <VStack align="stretch" spacing={2}>
+                <Box>
+                  <Text fontSize="xs" color="gray.500">BPM</Text>
+                  <Text fontSize="sm" color="gray.300">{song.tempo.bpm}</Text>
+                </Box>
+                <Box>
+                  <Text fontSize="xs" color="gray.500">Beat</Text>
+                  <Text fontSize="sm" color="gray.300">{song.tempo.battito}</Text>
+                </Box>
+                <Box>
+                  <Text fontSize="xs" color="gray.500">Time Signature</Text>
+                  <Text fontSize="sm" color="gray.300">{song.tempo.metro}</Text>
+                </Box>
+              </VStack>
+            </Box>
+          </>
+        )}
+      </VStack>
     </Box>
   );
 }; 
\ No newline at end of file