Adjust playerbar

src/renderer/features/player/components/right-controls.tsx

@@ -1,15 +1,22 @@
 import styled from '@emotion/styled';
-import { RiVolumeUpFill, RiVolumeMuteFill } from 'react-icons/ri';
-import { usePlayerStore } from '../../../store';
+import { Group } from '@mantine/core';
+import {
+  RiVolumeUpFill,
+  RiVolumeMuteFill,
+  RiPlayListFill,
+} from 'react-icons/ri';
+import { usePlayerStore, useAppStore } from '@/renderer/store';
 import { useRightControls } from '../hooks/use-right-controls';
 import { PlayerButton } from './player-button';
 import { Slider } from './slider';
 
 const RightControlsContainer = styled.div`
   display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
   width: 100%;
   height: 100%;
-  padding: 0.5rem;
+  padding-right: 1rem;
 `;
 
 const VolumeSliderWrapper = styled.div`
@@ -25,18 +32,27 @@ const MetadataStack = styled.div`
   gap: 0.3rem;
   align-items: flex-end;
   justify-content: center;
-  width: 100%;
   overflow: visible;
 `;
 
 export const RightControls = () => {
   const volume = usePlayerStore((state) => state.settings.volume);
   const muted = usePlayerStore((state) => state.settings.muted);
+  const setSidebar = useAppStore((state) => state.setSidebar);
+  const isQueueExpanded = useAppStore((state) => state.sidebar.rightExpanded);
   const { handleVolumeSlider, handleVolumeSliderState, handleMute } =
     useRightControls();
 
   return (
     <RightControlsContainer>
+      <Group>
+        <PlayerButton
+          icon={<RiPlayListFill size={15} />}
+          tooltip={{ label: 'View queue' }}
+          variant="secondary"
+          onClick={() => setSidebar({ rightExpanded: !isQueueExpanded })}
+        />
+      </Group>
       <MetadataStack>
         <VolumeSliderWrapper>
           <PlayerButton