Draggable playlist sidebar

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 {

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, useToken } from "@chakra-ui/react";
+import { ChevronLeftIcon, ChevronRightIcon, HamburgerIcon, ViewIcon, SettingsIcon, DragHandleIcon } 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>
@@ -61,12 +63,48 @@ const StyledFileInput = () => {
   );
 };
 
+const ResizeHandle = ({ onMouseDown }: { onMouseDown: (e: React.MouseEvent) => void }) => (
+  <Box
+    position="absolute"
+    right="-4px"
+    top={0}
+    bottom={0}
+    width="8px"
+    cursor="col-resize"
+    zIndex={1}
+    _hover={{
+      '&::after': {
+        bg: 'blue.500',
+      }
+    }}
+    onMouseDown={onMouseDown}
+  >
+    <Box
+      position="absolute"
+      left="3px"
+      top={0}
+      bottom={0}
+      width="2px"
+      bg="gray.600"
+      transition="background-color 0.2s"
+      _hover={{ bg: 'blue.500' }}
+    />
+  </Box>
+);
+
 export default function RekordboxReader() {
   const { songs, playlists, setPlaylists, loading } = useXmlParser();
   const [selectedSong, setSelectedSong] = useState<Song | null>(null);
   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 });
+  const [sidebarWidth, setSidebarWidth] = useState(400);
+  const [isResizing, setIsResizing] = useState(false);
+  const resizeRef = useRef<{ startX: number; startWidth: number } | null>(null);
 
   // Get the current playlist from URL or default to "All Songs"
   const currentPlaylist = location.pathname === "/" 
@@ -140,12 +178,54 @@ export default function RekordboxReader() {
     document.body.removeChild(a);
   };
 
+  const handlePlaylistDelete = async (name: string) => {
+    const updatedPlaylists = playlists.filter(p => p.name !== name);
+    const savedPlaylists = await api.savePlaylists(updatedPlaylists);
+    setPlaylists(savedPlaylists);
+    if (currentPlaylist === name) {
+      navigate("/"); // Navigate back to All Songs if the current playlist is deleted
+    }
+  };
+
   const displayedSongs = currentPlaylist === "All Songs"
     ? songs
     : songs.filter((song) =>
         playlists.find((p) => p.name === currentPlaylist)?.tracks.includes(song.id)
       );
 
+  const handleResizeStart = (e: React.MouseEvent) => {
+    e.preventDefault();
+    setIsResizing(true);
+    resizeRef.current = {
+      startX: e.pageX,
+      startWidth: sidebarWidth,
+    };
+  };
+
+  const handleResizeMove = (e: MouseEvent) => {
+    if (!isResizing || !resizeRef.current) return;
+
+    const delta = e.pageX - resizeRef.current.startX;
+    const newWidth = Math.max(300, Math.min(800, resizeRef.current.startWidth + delta));
+    setSidebarWidth(newWidth);
+  };
+
+  const handleResizeEnd = () => {
+    setIsResizing(false);
+    resizeRef.current = null;
+  };
+
+  useEffect(() => {
+    if (isResizing) {
+      window.addEventListener('mousemove', handleResizeMove);
+      window.addEventListener('mouseup', handleResizeEnd);
+    }
+    return () => {
+      window.removeEventListener('mousemove', handleResizeMove);
+      window.removeEventListener('mouseup', handleResizeEnd);
+    };
+  }, [isResizing]);
+
   if (loading) {
     return (
       <Flex height="100vh" align="center" justify="center" direction="column" gap={4}>
@@ -160,11 +240,59 @@ 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>
+    <Box 
-      <Flex direction="column" gap={4} mb={6}>
+      position="fixed"
-        <Heading size="md" mb={2}>Rekordbox Reader</Heading>
+      top={0}
-        <Flex gap={4} align="center">
+      left={0}
+      right={0}
+      bottom={0}
+      overflow="hidden"
+      margin={0}
+      padding={0}
+      userSelect={isResizing ? 'none' : 'auto'}
+    >
+      <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">
@@ -172,17 +300,105 @@ export default function RekordboxReader() {
                 </Button>
               )}
             </Flex>
-      </Flex>
+          )}
-      <Flex gap={4} alignItems="start">
+
-        <Box w="200px">
+          {/* Mobile Actions */}
-          <PlaylistManager
+          {isMobile && (
-            playlists={playlists}
+            <Menu>
-            selectedItem={currentPlaylist}
+              <MenuButton
-            onPlaylistCreate={handleCreatePlaylist}
+                as={IconButton}
-            onPlaylistSelect={handlePlaylistSelect}
+                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>
+
+        {/* Main Content */}
+        <Flex flex={1} overflow="hidden" w="full">
+          {/* Sidebar - Desktop */}
+          {!isMobile && (
+            <Box
+              position="relative"
+              w={`${sidebarWidth}px`}
+              minW={`${sidebarWidth}px`}
+              p={4}
+              borderRight="1px"
+              borderColor="gray.700"
+              overflowY="auto"
+              bg="gray.900"
+            >
+              {playlistManager}
+              <ResizeHandle onMouseDown={handleResizeStart} />
             </Box>
-        <Box flex={1}>
+          )}
+
+          {/* 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}
@@ -193,7 +409,36 @@ export default function RekordboxReader() {
                 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>
   );

packages/frontend/src/components/PlaylistManager.tsx

@@ -13,7 +13,13 @@ import {
   Text,
   useDisclosure,
   VStack,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  IconButton,
 } from "@chakra-ui/react";
+import { ChevronDownIcon, DeleteIcon } from "@chakra-ui/icons";
 import React, { useState } from "react";
 import { Playlist } from "../types/Playlist";
 
@@ -21,7 +27,8 @@ interface PlaylistManagerProps {
   playlists: Playlist[];
   selectedItem: string | null;
   onPlaylistCreate: (name: string) => void;
-  onPlaylistSelect: (id: string | null) => void;
+  onPlaylistSelect: (name: string | null) => void;
+  onPlaylistDelete: (name: string) => void;
 }
 
 const getButtonStyles = (isSelected: boolean) => ({
@@ -48,6 +55,7 @@ export const PlaylistManager: React.FC<PlaylistManagerProps> = ({
   selectedItem,
   onPlaylistCreate,
   onPlaylistSelect,
+  onPlaylistDelete,
 }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [newPlaylistName, setNewPlaylistName] = useState("");
@@ -70,13 +78,37 @@ export const PlaylistManager: React.FC<PlaylistManagerProps> = ({
           All Songs
         </Button>
         {playlists.map((playlist) => (
+          <Flex key={playlist._id} align="center" gap={1}>
             <Button
-            key={playlist._id}
+              flex={1}
               {...getButtonStyles(selectedItem === playlist.name)}
               onClick={() => onPlaylistSelect(playlist.name)}
             >
               {playlist.name}
             </Button>
+            <Menu>
+              <MenuButton
+                as={IconButton}
+                aria-label="Playlist options"
+                icon={<ChevronDownIcon />}
+                variant="ghost"
+                size="sm"
+                color="gray.400"
+                _hover={{ color: "white", bg: "whiteAlpha.200" }}
+              />
+              <MenuList bg="gray.800" borderColor="gray.700">
+                <MenuItem
+                  bg="gray.800"
+                  color="red.300"
+                  _hover={{ bg: "gray.700" }}
+                  icon={<DeleteIcon />}
+                  onClick={() => onPlaylistDelete(playlist.name)}
+                >
+                  Delete Playlist
+                </MenuItem>
+              </MenuList>
+            </Menu>
+          </Flex>
         ))}
       </VStack>
 

packages/frontend/src/components/SongDetails.tsx

@@ -8,17 +8,7 @@ interface SongDetailsProps {
 export const SongDetails: React.FC<SongDetailsProps> = ({ song }) => {
   if (!song) {
     return (
-      <Box
+      <Box h="full" p={4}>
-        w="300px"
-        position="sticky"
-        top={4}
-        h="calc(100vh - 2rem)"
-        bg="gray.800"
-        p={4}
-        borderRadius="md"
-        borderLeft="1px"
-        borderColor="gray.700"
-      >
         <Text color="gray.500">Select a song to view details</Text>
       </Box>
     );
@@ -36,37 +26,11 @@ 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
+    <Box h="full">
-      w="300px"
+      <VStack align="stretch" spacing={4} p={4}>
-      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}
@@ -114,6 +78,5 @@ export const SongDetails: React.FC<SongDetailsProps> = ({ song }) => {
         )}
       </VStack>
     </Box>
-    </Box>
   );
 };