Add fullscreen player view (#27)

* Add store controls for fullscreen player

* Normalize styles for playback config

* Add fullscreen player component

* Add option component

* Update player controls to use option/popover components

* Add esc hotkey to close player

* Add usePlayerData hook

src/renderer/features/sidebar/components/sidebar.tsx

@@ -34,6 +34,8 @@ import {
   useAppStoreActions,
   useCurrentSong,
   useCurrentServer,
+  useSetFullScreenPlayerStore,
+  useFullScreenPlayerStore,
 } from '/@/renderer/store';
 import { fadeIn } from '/@/renderer/styles';
 import { CreatePlaylistForm, usePlaylistList } from '/@/renderer/features/playlists';
@@ -48,7 +50,7 @@ const SidebarContainer = styled.div`
   user-select: none;
 `;
 
-const ImageContainer = styled(motion(Link))<{ height: string }>`
+const ImageContainer = styled(motion.div)<{ height: string }>`
   position: relative;
   height: ${(props) => props.height};
 
@@ -112,6 +114,12 @@ export const Sidebar = () => {
     startIndex: 0,
   });
 
+  const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
+  const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
+  const expandFullScreenPlayer = () => {
+    setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
+  };
+
   const cq = useContainerQuery({ sm: 300 });
 
   return (
@@ -327,8 +335,9 @@ export const Sidebar = () => {
               exit={{ opacity: 0, y: 200 }}
               height={sidebar.leftWidth}
               initial={{ opacity: 0, y: 200 }}
-              to={AppRoute.NOW_PLAYING}
+              role="button"
               transition={{ duration: 0.3, ease: 'easeInOut' }}
+              onClick={expandFullScreenPlayer}
             >
               {upsizedImageUrl ? (
                 <SidebarImage
@@ -352,7 +361,7 @@ export const Sidebar = () => {
                 tooltip={{ label: 'Collapse', openDelay: 500 }}
                 variant="default"
                 onClick={(e) => {
-                  e.preventDefault();
+                  e.stopPropagation();
                   setSidebar({ image: false });
                 }}
               >