From 58c737053642f59385d36735f0047593c3dd522a Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Tue, 28 Mar 2023 23:59:51 -0700
Subject: [PATCH] Add dedicated OS window bars (#22)

---
 src/renderer/components/scroll-area/index.tsx |  12 +-
 .../components/search-input/index.tsx         |   2 +-
 .../hooks/use-fixed-table-header.tsx          |  13 +-
 .../player/components/left-controls.tsx       |   4 +-
 .../player/components/right-controls.tsx      |   4 +-
 .../settings/components/general-tab.tsx       |  22 +-
 .../components/sidebar-playlist-list.tsx      | 158 ++++----
 .../features/sidebar/components/sidebar.tsx   |   6 +-
 .../hooks/use-should-pad-titlebar.tsx         |  12 +-
 .../layouts/assets/close-mac-hover.png        | Bin 0 -> 507 bytes
 src/renderer/layouts/assets/close-mac.png     | Bin 0 -> 553 bytes
 src/renderer/layouts/assets/max-mac-hover.png | Bin 0 -> 566 bytes
 src/renderer/layouts/assets/max-mac.png       | Bin 0 -> 557 bytes
 src/renderer/layouts/assets/min-mac-hover.png | Bin 0 -> 532 bytes
 src/renderer/layouts/assets/min-mac.png       | Bin 0 -> 556 bytes
 src/renderer/layouts/default-layout.tsx       | 374 ++----------------
 .../layouts/default-layout/main-content.tsx   | 345 ++++++++++++++++
 .../layouts/default-layout/player-bar.tsx     |  17 +
 src/renderer/layouts/window-bar.tsx           | 251 ++++++++++++
 src/renderer/router/titlebar-outlet.tsx       |  12 +-
 src/renderer/store/app.store.ts               |  10 +-
 src/renderer/store/player.store.ts            |  18 +-
 src/renderer/store/settings.store.ts          |  14 +-
 src/renderer/styles/ag-grid.scss              |   4 +
 src/renderer/themes/default.scss              |   7 +-
 25 files changed, 823 insertions(+), 462 deletions(-)
 create mode 100644 src/renderer/layouts/assets/close-mac-hover.png
 create mode 100644 src/renderer/layouts/assets/close-mac.png
 create mode 100644 src/renderer/layouts/assets/max-mac-hover.png
 create mode 100644 src/renderer/layouts/assets/max-mac.png
 create mode 100644 src/renderer/layouts/assets/min-mac-hover.png
 create mode 100644 src/renderer/layouts/assets/min-mac.png
 create mode 100644 src/renderer/layouts/default-layout/main-content.tsx
 create mode 100644 src/renderer/layouts/default-layout/player-bar.tsx
 create mode 100644 src/renderer/layouts/window-bar.tsx

diff --git a/src/renderer/components/scroll-area/index.tsx b/src/renderer/components/scroll-area/index.tsx
index fabb0b25..555b5823 100644
--- a/src/renderer/components/scroll-area/index.tsx
+++ b/src/renderer/components/scroll-area/index.tsx
@@ -5,6 +5,8 @@ import { useMergedRef, useTimeout } from '@mantine/hooks';
 import { motion, useScroll } from 'framer-motion';
 import styled from 'styled-components';
 import { PageHeader, PageHeaderProps } from '/@/renderer/components/page-header';
+import { useGeneralSettings } from '/@/renderer/store/settings.store';
+import { Platform } from '/@/renderer/types';
 
 interface ScrollAreaProps extends MantineScrollAreaProps {
   children: React.ReactNode;
@@ -26,16 +28,18 @@ const StyledScrollArea = styled(MantineScrollArea)`
   }
 `;
 
-const StyledNativeScrollArea = styled.div<{ scrollBarOffset?: string }>`
+const StyledNativeScrollArea = styled.div<{ scrollBarOffset?: string; windowBarStyle?: Platform }>`
   height: 100%;
   overflow-y: overlay !important;
 
   &::-webkit-scrollbar-track {
-    margin-top: ${(props) => props.scrollBarOffset || '65px'};
+    margin-top: ${(props) =>
+      props.windowBarStyle !== Platform.WEB ? '0px' : props.scrollBarOffset || '65px'};
   }
 
   &::-webkit-scrollbar-thumb {
-    margin-top: ${(props) => props.scrollBarOffset || '65px'};
+    margin-top: ${(props) =>
+      props.windowBarStyle !== Platform.WEB ? '0px' : props.scrollBarOffset || '65px'};
   }
 `;
 
@@ -74,6 +78,7 @@ export const NativeScrollArea = forwardRef(
     }: NativeScrollAreaProps,
     ref: Ref<HTMLDivElement>,
   ) => {
+    const { windowBarStyle } = useGeneralSettings();
     const [hideScrollbar, setHideScrollbar] = useState(false);
     const [hideHeader, setHideHeader] = useState(true);
     const { start, clear } = useTimeout(
@@ -130,6 +135,7 @@ export const NativeScrollArea = forwardRef(
           ref={mergedRef}
           className={hideScrollbar ? 'hide-scrollbar' : undefined}
           scrollBarOffset={scrollBarOffset}
+          windowBarStyle={windowBarStyle}
           onMouseEnter={() => {
             setHideScrollbar(false);
             clear();
diff --git a/src/renderer/components/search-input/index.tsx b/src/renderer/components/search-input/index.tsx
index 9e59ee63..a3580860 100644
--- a/src/renderer/components/search-input/index.tsx
+++ b/src/renderer/components/search-input/index.tsx
@@ -54,7 +54,7 @@ export const SearchInput = ({
           padding: isOpened ? '10px' : 0,
         },
       }}
-      width={isOpened ? openedWidth || 150 : initialWidth || 50}
+      width={isOpened ? openedWidth || 150 : initialWidth || 35}
       onChange={onChange}
       onKeyDown={handleEscape}
     />
diff --git a/src/renderer/components/virtual-table/hooks/use-fixed-table-header.tsx b/src/renderer/components/virtual-table/hooks/use-fixed-table-header.tsx
index 09028e66..78df4049 100644
--- a/src/renderer/components/virtual-table/hooks/use-fixed-table-header.tsx
+++ b/src/renderer/components/virtual-table/hooks/use-fixed-table-header.tsx
@@ -1,12 +1,15 @@
 import { useEffect, useRef } from 'react';
 import { useInView } from 'framer-motion';
+import { useGeneralSettings } from '/@/renderer/store/settings.store';
+import { Platform } from '/@/renderer/types';
 
 export const useFixedTableHeader = () => {
   const intersectRef = useRef<HTMLDivElement | null>(null);
   const tableContainerRef = useRef<HTMLDivElement | null>(null);
+  const { windowBarStyle } = useGeneralSettings();
 
   const isNotPastTableIntersection = useInView(intersectRef, {
-    margin: '-68px 0px 0px 0px',
+    margin: windowBarStyle === Platform.WEB ? '-68px 0px 0px 0px' : '-98px 0px 0px 0px',
   });
 
   const tableInView = useInView(tableContainerRef, {
@@ -18,13 +21,19 @@ export const useFixedTableHeader = () => {
     const root = document.querySelector('main .ag-root');
 
     if (isNotPastTableIntersection || !tableInView) {
+      if (windowBarStyle !== Platform.WEB) {
+        header?.classList.remove('window-frame');
+      }
       header?.classList.remove('ag-header-fixed');
       root?.classList.remove('ag-header-fixed-margin');
     } else {
+      if (windowBarStyle !== Platform.WEB) {
+        header?.classList.add('window-frame');
+      }
       header?.classList.add('ag-header-fixed');
       root?.classList.add('ag-header-fixed-margin');
     }
-  }, [isNotPastTableIntersection, tableInView]);
+  }, [isNotPastTableIntersection, tableInView, windowBarStyle]);
 
   return { intersectRef, tableContainerRef };
 };
diff --git a/src/renderer/features/player/components/left-controls.tsx b/src/renderer/features/player/components/left-controls.tsx
index 4498fc0e..ee4ec786 100644
--- a/src/renderer/features/player/components/left-controls.tsx
+++ b/src/renderer/features/player/components/left-controls.tsx
@@ -80,7 +80,7 @@ const LineItem = styled.div<{ $secondary?: boolean }>`
 `;
 
 export const LeftControls = () => {
-  const { setSidebar } = useAppStoreActions();
+  const { setSideBar } = useAppStoreActions();
   const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
   const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
   const hideImage = useAppStore((state) => state.sidebar.image);
@@ -102,7 +102,7 @@ export const LeftControls = () => {
 
   const handleToggleSidebarImage = (e: MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
-    setSidebar({ image: true });
+    setSideBar({ image: true });
   };
 
   return (
diff --git a/src/renderer/features/player/components/right-controls.tsx b/src/renderer/features/player/components/right-controls.tsx
index 04d7fba8..2a167030 100644
--- a/src/renderer/features/player/components/right-controls.tsx
+++ b/src/renderer/features/player/components/right-controls.tsx
@@ -28,7 +28,7 @@ export const RightControls = () => {
   const muted = useMuted();
   const server = useCurrentServer();
   const currentSong = useCurrentSong();
-  const { setSidebar } = useAppStoreActions();
+  const { setSideBar } = useAppStoreActions();
   const { rightExpanded: isQueueExpanded } = useSidebarStore();
   const { handleVolumeSlider, handleVolumeWheel, handleMute } = useRightControls();
 
@@ -145,7 +145,7 @@ export const RightControls = () => {
           icon={<HiOutlineQueueList size="1.1rem" />}
           tooltip={{ label: 'View queue', openDelay: 500 }}
           variant="secondary"
-          onClick={() => setSidebar({ rightExpanded: !isQueueExpanded })}
+          onClick={() => setSideBar({ rightExpanded: !isQueueExpanded })}
         />
         <Group
           noWrap
diff --git a/src/renderer/features/settings/components/general-tab.tsx b/src/renderer/features/settings/components/general-tab.tsx
index 1aae8fc5..e34db080 100644
--- a/src/renderer/features/settings/components/general-tab.tsx
+++ b/src/renderer/features/settings/components/general-tab.tsx
@@ -9,6 +9,7 @@ import {
   SideQueueType,
 } from '/@/renderer/store/settings.store';
 import { AppTheme } from '/@/renderer/themes/types';
+import { Platform } from '/@/renderer/types';
 
 const FONT_OPTIONS = [
   { label: 'Archivo', value: 'Archivo' },
@@ -26,6 +27,12 @@ const SIDE_QUEUE_OPTIONS = [
   { label: 'Floating', value: 'sideDrawerQueue' },
 ];
 
+const TITLEBAR_OPTIONS = [
+  { label: 'Web (hidden)', value: Platform.WEB },
+  { label: 'Windows', value: Platform.WINDOWS },
+  { label: 'macOS', value: Platform.MACOS },
+];
+
 export const GeneralTab = () => {
   const settings = useGeneralSettings();
   const { setSettings } = useSettingsStoreActions();
@@ -34,9 +41,18 @@ export const GeneralTab = () => {
     {
       control: (
         <Select
-          disabled
-          data={['Windows', 'macOS']}
-          defaultValue="Windows"
+          data={TITLEBAR_OPTIONS}
+          disabled={!isElectron()}
+          value={settings.windowBarStyle}
+          onChange={(e) => {
+            if (!e) return;
+            setSettings({
+              general: {
+                ...settings,
+                windowBarStyle: e as Platform,
+              },
+            });
+          }}
         />
       ),
       description: 'Adjust the style of the titlebar',
diff --git a/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx b/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
index 326cabc3..09eedb51 100644
--- a/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
+++ b/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
@@ -17,92 +17,94 @@ interface SidebarPlaylistListProps {
   data: ReturnType<typeof usePlaylistList>['data'];
 }
 
-const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => (
-  <div style={{ margin: '0.5rem 0', padding: '0 1.5rem', ...style }}>
-    <Group
-      noWrap
-      className="sidebar-playlist-item"
-      pos="relative"
-      position="apart"
-      sx={{
-        '&:hover': {
-          '.sidebar-playlist-controls': {
-            display: 'flex',
-          },
-          '.sidebar-playlist-name': {
-            color: 'var(--sidebar-fg-hover) !important',
-          },
-        },
-      }}
-    >
-      <Text
-        className="sidebar-playlist-name"
-        component={Link}
-        overflow="hidden"
-        size="md"
-        sx={{
-          color: 'var(--sidebar-fg) !important',
-          cursor: 'default',
-          width: '100%',
-        }}
-        to={
-          data?.items[index].id
-            ? generatePath(AppRoute.PLAYLISTS_DETAIL, {
-                playlistId: data?.items[index].id,
-              })
-            : undefined
-        }
-      >
-        {data?.items[index].name}
-      </Text>
+const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => {
+  return (
+    <div style={{ margin: '0.5rem 0', padding: '0 1.5rem', ...style }}>
       <Group
         noWrap
-        className="sidebar-playlist-controls"
-        display="none"
-        pos="absolute"
-        right="0"
-        spacing="sm"
+        className="sidebar-playlist-item"
+        pos="relative"
+        position="apart"
+        sx={{
+          '&:hover': {
+            '.sidebar-playlist-controls': {
+              display: 'flex',
+            },
+            '.sidebar-playlist-name': {
+              color: 'var(--sidebar-fg-hover) !important',
+            },
+          },
+        }}
       >
-        <Button
-          compact
+        <Text
+          className="sidebar-playlist-name"
+          component={Link}
+          overflow="hidden"
           size="md"
-          tooltip={{ label: 'Play', openDelay: 500 }}
-          variant="default"
-          onClick={() => {
-            if (!data?.items?.[index].id) return;
-            data.handlePlay(data?.items[index].id, Play.NOW);
+          sx={{
+            color: 'var(--sidebar-fg) !important',
+            cursor: 'default',
+            width: '100%',
           }}
+          to={
+            data?.items[index].id
+              ? generatePath(AppRoute.PLAYLISTS_DETAIL, {
+                  playlistId: data?.items[index].id,
+                })
+              : undefined
+          }
         >
-          <RiPlayFill />
-        </Button>
-        <Button
-          compact
-          size="md"
-          tooltip={{ label: 'Add to queue', openDelay: 500 }}
-          variant="default"
-          onClick={() => {
-            if (!data?.items?.[index].id) return;
-            data.handlePlay(data?.items[index].id, Play.LAST);
-          }}
+          {data?.items[index].name}
+        </Text>
+        <Group
+          noWrap
+          className="sidebar-playlist-controls"
+          display="none"
+          pos="absolute"
+          right="0"
+          spacing="sm"
         >
-          <RiAddBoxFill />
-        </Button>
-        <Button
-          compact
-          size="md"
-          tooltip={{ label: 'Add to queue next', openDelay: 500 }}
-          variant="default"
-          onClick={() => {
-            if (!data?.items?.[index].id) return;
-            data.handlePlay(data?.items[index].id, Play.NEXT);
-          }}
-        >
-          <RiAddCircleFill />
-        </Button>
+          <Button
+            compact
+            size="md"
+            tooltip={{ label: 'Play', openDelay: 500 }}
+            variant="default"
+            onClick={() => {
+              if (!data?.items?.[index].id) return;
+              data.handlePlay(data?.items[index].id, Play.NOW);
+            }}
+          >
+            <RiPlayFill />
+          </Button>
+          <Button
+            compact
+            size="md"
+            tooltip={{ label: 'Add to queue', openDelay: 500 }}
+            variant="default"
+            onClick={() => {
+              if (!data?.items?.[index].id) return;
+              data.handlePlay(data?.items[index].id, Play.LAST);
+            }}
+          >
+            <RiAddBoxFill />
+          </Button>
+          <Button
+            compact
+            size="md"
+            tooltip={{ label: 'Add to queue next', openDelay: 500 }}
+            variant="default"
+            onClick={() => {
+              if (!data?.items?.[index].id) return;
+              data.handlePlay(data?.items[index].id, Play.NEXT);
+            }}
+          >
+            <RiAddCircleFill />
+          </Button>
+        </Group>
       </Group>
-    </Group>
-  </div>
-);
+    </div>
+  );
+};
 
 export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
   const { isScrollbarHidden, hideScrollbarElementProps } = useHideScrollbar(0);
diff --git a/src/renderer/features/sidebar/components/sidebar.tsx b/src/renderer/features/sidebar/components/sidebar.tsx
index 1febb40f..84f2346a 100644
--- a/src/renderer/features/sidebar/components/sidebar.tsx
+++ b/src/renderer/features/sidebar/components/sidebar.tsx
@@ -87,7 +87,7 @@ export const Sidebar = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const sidebar = useSidebarStore();
-  const { setSidebar } = useAppStoreActions();
+  const { setSideBar } = useAppStoreActions();
   const imageUrl = useCurrentSong()?.imageUrl;
   const server = useCurrentServer();
 
@@ -215,7 +215,7 @@ export const Sidebar = () => {
                 panel: { padding: '0 1rem' },
               }}
               value={sidebar.expanded}
-              onChange={(e) => setSidebar({ expanded: e })}
+              onChange={(e) => setSideBar({ expanded: e })}
             >
               <Accordion.Item value="library">
                 <Accordion.Control>
@@ -362,7 +362,7 @@ export const Sidebar = () => {
                 variant="default"
                 onClick={(e) => {
                   e.stopPropagation();
-                  setSidebar({ image: false });
+                  setSideBar({ image: false });
                 }}
               >
                 <RiArrowDownSLine
diff --git a/src/renderer/hooks/use-should-pad-titlebar.tsx b/src/renderer/hooks/use-should-pad-titlebar.tsx
index 190b4d2a..5e87b3c0 100644
--- a/src/renderer/hooks/use-should-pad-titlebar.tsx
+++ b/src/renderer/hooks/use-should-pad-titlebar.tsx
@@ -2,14 +2,20 @@ import { useLocation } from 'react-router';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useSidebarRightExpanded } from '/@/renderer/store';
 import { useGeneralSettings } from '/@/renderer/store/settings.store';
+import { Platform } from '/@/renderer/types';
 
 export const useShouldPadTitlebar = () => {
   const location = useLocation();
   const isSidebarExpanded = useSidebarRightExpanded();
   const isQueuePage = location.pathname === AppRoute.NOW_PLAYING;
-  const { sideQueueType } = useGeneralSettings();
+  const { sideQueueType, windowBarStyle } = useGeneralSettings();
 
-  // If the sidebar is expanded, the sidebar queue is enabled, and the user is not on the queue page
+  const conditions = [
+    windowBarStyle === Platform.WEB,
+    !(isSidebarExpanded && sideQueueType === 'sideQueue' && !isQueuePage),
+  ];
 
-  return !(isSidebarExpanded && sideQueueType === 'sideQueue' && !isQueuePage);
+  const shouldPadTitlebar = conditions.every((condition) => condition);
+
+  return shouldPadTitlebar;
 };
diff --git a/src/renderer/layouts/assets/close-mac-hover.png b/src/renderer/layouts/assets/close-mac-hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..7630acaf17c28bec00529e1851569623f0855d57
GIT binary patch
literal 507
zcmV<X0R;YuP)<h;3K|Lk000e1NJLTq000sI000sQ1^@s6R?d!B00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!T<mc!T}X1N`L?W0gy>VK~y+T<&(Qg
zLqQOR|JjXb^aLe}SFkZ?sj(5?z(NEeHa3bc;Y-;01PT%hA+4>QHU>MvB!zfGM9`?Y
z?v8tQH{eO)3+UJE?!Pnt4m0QA??Qf!pjTFUF`8ULOwOBQ%89xJ!Fde4UWonEn$>>L
zVWcyeB!>Fd5g*tD^BhSz73!?i1Bk9ssUFj3JxAH>i%sxEjP%Z00vOyt(7#JTV%8V|
zLikH<q6u6s7f`M3;p-_Yj!xg*r3v$^g?Mlt@!l;8f>|rHOhWvg5<v<*J=>7U1uJ+W
zMoc<wUY&s{Bz(PtmL|nCBrUpwBVq&+GbCeEkxJSj0n@ih6XS;9iDq#3DRze=v28|N
zWUcOPV}FBnIKf9~6ue?-H_Ah)lC3M8SUW9Et6M-_x`QKX)W8*LjYBSfxYvGG=J)*Z
zSwvkOpf2)O@O1QqS64@Pd^m%6pZOq>qL`epdb9ZiK{u$>j`8w#B67KBo8al%-0&Bn
xvEgMFlr}ZH=_oFe#3h<{=X7vZwc39G_y*m(hdEmT_3!`y002ovPDHLkV1h%T*rosg

literal 0
HcmV?d00001

diff --git a/src/renderer/layouts/assets/close-mac.png b/src/renderer/layouts/assets/close-mac.png
new file mode 100644
index 0000000000000000000000000000000000000000..cc3d6f9f22958622c50fece1f3460417843a9f11
GIT binary patch
literal 553
zcmV+^0@nSBP)<h;3K|Lk000e1NJLTq000sI000sQ1^@s6R?d!B00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0lrB@K~y+T<&)1&
z8!-^Z$M&wb3FJW3OaG{stda@|g>Y$m>?0u23zzmS`VxH!xWJ(jH=d!rB&vi&1e-`f
zv}q$0piR4*-5r~;aU`}0FVOxZYrWstpFA@*{JSvsEpP~7P+Rj~_#SI&fY4}Kvp%Bg
zusHi%kD{qvc!xQoqt&O?<x+KXIgr~5py3Pg#OPU$-vop1uWY)XTwfeKKN()w4UU4*
zaidXLsswMAq<mj3m+OjiU_#iKMg*=DjN?DiBuPFDuamu(QS{RW3GTiY8HlFz{I|vg
zJr96PC^b9G+-TKOIrRPD-Ac({H}Z^v5go6^Ijh-|u=(;CO;bz?{!DPb;bcp}NDHWW
zRFhdc3!#`0{4r;@O_)(IA{KUWA=E}UvlLT9-OCZbn!?@-#V}Vxs$1j~OEEPK9aOq+
zx})jmZ;Zw$mMT0$rrJ)n6pS#=zGP{-JC5T>U`{7Qo2wl(H`-+!_p)@l1CzXCH#z2N
z(yiAY29*a}6)Cr=O`+%UM@FX$`JHPx{Y@7#9gjYS{U0N{!LhKoC-g+H8N8AlTTJoW
rC&Hnp6l<SfO+LLI3=+HWe*oYHO|h#k?uIuh00000NkvXXu0mjf%>wSf

literal 0
HcmV?d00001

diff --git a/src/renderer/layouts/assets/max-mac-hover.png b/src/renderer/layouts/assets/max-mac-hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..ca55908d2f9875efc41ade7b92236e2e6eb9fc98
GIT binary patch
literal 566
zcmV-60?GY}P)<h;3K|Lk000e1NJLTq000sI000sQ1^@s6R?d!B00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!T<mc!T}X1N`L?W0n155K~y+T<&#ZI
z96=C<`)g)aXGC@pLB(7g*4)&1i1Fra4?z(0;zj>O{zU#na*2n47YSZ-N)+NE2ud<5
z_!UL`Kr>m_+3BuS_q34CddN9>pqb%)t7^KdddR;EwNHomLoFB{sXS+%8UvuQ))=UL
zDS7>fUTq}R^?MWe8y$tFcIGQRQE4uSf<>yxC=+5x>#{As69IeKk8I_#b-nuK>Dq-!
zusDULcV~N|uy-MdO0U9lR3#F3LYeUt03jSm^D0g5(&p=%)5~|8Q|q_JM2aYj=Z9mS
zFP6H?VU^|-O|&szFNWXLT302CJug@e`zzx`R)JGUP?+G1jZle6w6lF$qqs}Y=TA6Q
z&#Y{43K75}Tns%N=P|TL86PBe2oE?JfUbT03*1<z5N^EzQl2PKR_R20O68|OSz;xF
zyCaZwCFQ=J4(KWUf!2WIRmjvK1=zB(!6}r=o9%Wxd)vHD6A(ZYUL<ota4CIo)X-~S
z%o~xjdXZJo(UZx&mwkO*<#|6WEfP>M7v6x@WuBj5r@ys+wpP+Ceg7$5JvRxKN1I#w
zS_|5;_XY9k1Ww#c2Y;0YHfJk2KKpzy^RZ<D{|5;91v2!mPW4iVWB>pF07*qoM6N<$
Eg6HM(r2qf`

literal 0
HcmV?d00001

diff --git a/src/renderer/layouts/assets/max-mac.png b/src/renderer/layouts/assets/max-mac.png
new file mode 100644
index 0000000000000000000000000000000000000000..78de801a46d5ad9391847b6c3cc2e69b1b00ada5
GIT binary patch
literal 557
zcmV+|0@D47P)<h;3K|Lk000e1NJLTq000sI000sQ1^@s6R?d!B00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0m4Z{K~y+T-I76T
z6fqRXU-D)qGuqj;RS>KQva7{Ytq9^*=s^%Kq6hU;_&GfHq$e*@Pksiybm>iSw_ri*
zLAJZl?aU^5iOEcCjVpNX?~>vFfBDaQN#N|l!W#1m#D&W@?g8iP3|JpHfF-*J)(j>c
z`w2FO^H6!hLQrSx>PmL0e3%yEi3?dn#8qEK%6_*<pVhH^Th9)+kDea<3|ks7tS#@?
z%Cg8GiKXIYe(~I0A@YtWa>#^$q)1CVpIo;Dw}7XUYP0(Vw#O%(xu#E9mUcZA;+a?}
zZl;t1GWQ?bddN6<EnhDB8PA?CrR;X=v_wG`*aqXghlIe`;_-Q{@e;g-oZSg>Lloo+
zdzkQ5<nhFR;yqV$#Rc_))DQ*vmcrNn`KvY_&DxP6^NkDzWfAWY(E%Ad3{pef5jO)O
zvqwliG>E5o&3I3neFkPH$PH1@q_(?SsyFqx8Y<L4?yi3iK-PfQs>9=v*6Q^{!k~3p
z;!}0+f<H+1-L*`OGF@HEOiNuVDPcaF|B&^3AZKc;qUxP`JQ{~x4gWse4<NeJ-hD`L
v!(Dd2dD+B9z}3$5NPmPEU+YkL_5t_>3~{kTwm-|l00000NkvXXu0mjf{Gt6)

literal 0
HcmV?d00001

diff --git a/src/renderer/layouts/assets/min-mac-hover.png b/src/renderer/layouts/assets/min-mac-hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..994107aa215d7389376cec24620b855e49e1d310
GIT binary patch
literal 532
zcmV+v0_**WP)<h;3K|Lk000e1NJLTq000sI000sQ1^@s6R?d!B00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!T<mc!T}X1N`L?W0jWtuK~y+T<&n)!
z8!;4xk3AVuL_*alDgxAY!H6y)s8VTJARYk;Hrc>i^d<Td?WS2Ev15za@V6jh)rcmk
zTB$!mL4iPinepwlJyB(tz5x9s>w3<$kH^P&xQMtqsGT5<iD$3jr{_QjtV(t6lrj4C
zNX}OKR{P66BelPnLpHaH%%dWIz7(D}t#t~cpYTw@b+;sXoo(@Iuc7rJj*<HOHVgG+
zolV|}{Mal)ZVPFfq<|EG8tp1N-S@a^e3FaDE!za*RTj}7pF`T;FebOU#e=x$q35iL
zd?r9@WD}#0=e0V-F(Qcqq@1yTk`SNPLax5|9MW5`qQx<S!i-39Cd2C_!9C7xicgIn
z!Q$?q<X23FoVBizpc+Nd4-@Ra;2x>y7bI0<#c;<6Wkjm3Uk79ocF|gj>md3L6`okp
z;u>|Erx^4<nkV-4U-8fvFqhytYjn}BVQ~8aomN?^L+)ilyUTfcnq9-#NReX*IQ&VY
zN8xWi_6u%$B{Z8`a_QjQY=}t=SDgiE(SGrUq+ifxMwF^1BAno|awt~5^^EpE0Q>>U
WbB_r=wm^^o0000<MNUMnLSTZP?CyI2

literal 0
HcmV?d00001

diff --git a/src/renderer/layouts/assets/min-mac.png b/src/renderer/layouts/assets/min-mac.png
new file mode 100644
index 0000000000000000000000000000000000000000..38e477ecdb0f5c1356417714586f7d1d07d82ef1
GIT binary patch
literal 556
zcmV+{0@MA8P)<h;3K|Lk000e1NJLTq000sI000sQ1^@s6R?d!B00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0l`T`K~y+T<&(`y
z96=DrtGj1s)^+^IDu@vzVF%4k%_aC4f?m9+C&7zHU&4z=NiNAH9t3ZB2EDih1VwlE
z5J(JRT^DD^{hIDdb=xY<W?vxwVCd#wRe!pxdf@+s+126O9t4HK@ehGubBHVg4j@xi
zp{4jHsh;p{Xxr2$dW_CKLVh@ySPH}JDk?VX2|lH>x~clbIbI}j=OAgtNAETpRa;_k
zjLtv7&|omJGL*~ijOKGQfC7NihZICf*%Iov%~B(2?KW$juQS`VyN60jv#Y^pujT^Z
zU(+Ut87j0U8ro}ZG(Qmeer7#8!sl(o;21IV7Ca#e`Xr3?w$ErvK*sZ?CBl0v8(bs7
z3qtoqU#A}wqny{kcw`lWV?<}~Jw_iGy8U&G5LH<!^%E2|wjUIur*Mr*m8@cLjaXVt
z)3l<egZS9xXN<-rJ%#iK?M|(1aExSJ|K9F&zSL{Y660N})FZb++G~x*U+&88=hRn4
z8!`0s<YGS@AIOHw!(p(hkVhGhPud6hTY$Q1+_w)}aeNqUC4X#*;h)XDq+f*P#uhy;
u78nOJ9VwyAQJ#W#bNqG#S|;%&0Pq*}ji@ZAf^r!E0000<MNUMnLSTZd#`5|A

literal 0
HcmV?d00001

diff --git a/src/renderer/layouts/default-layout.tsx b/src/renderer/layouts/default-layout.tsx
index 69f4217e..80e23e85 100644
--- a/src/renderer/layouts/default-layout.tsx
+++ b/src/renderer/layouts/default-layout.tsx
@@ -1,21 +1,10 @@
-import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useDisclosure, useTimeout } from '@mantine/hooks';
-import type { Variants } from 'framer-motion';
-import { AnimatePresence, motion } from 'framer-motion';
+import { lazy } from 'react';
 import isElectron from 'is-electron';
-import throttle from 'lodash/throttle';
-import { TbArrowBarLeft } from 'react-icons/tb';
-import { Outlet, useLocation } from 'react-router';
 import styled from 'styled-components';
-import { DrawerPlayQueue, SidebarPlayQueue } from '/@/renderer/features/now-playing';
-import { Playerbar } from '/@/renderer/features/player';
-import { Sidebar } from '/@/renderer/features/sidebar/components/sidebar';
-import { AppRoute } from '/@/renderer/router/routes';
-import { useAppStore, useAppStoreActions, useFullScreenPlayerStore } from '/@/renderer/store';
-import { useSettingsStore, useGeneralSettings } from '/@/renderer/store/settings.store';
-import { PlaybackType } from '/@/renderer/types';
-import { constrainSidebarWidth, constrainRightSidebarWidth } from '/@/renderer/utils';
-import { FullScreenPlayer } from '/@/renderer/features/player/components/full-screen-player';
+import { useGeneralSettings, useSettingsStore } from '/@/renderer/store/settings.store';
+import { Platform, PlaybackType } from '/@/renderer/types';
+import { MainContent } from '/@/renderer/layouts/default-layout/main-content';
+import { PlayerBar } from '/@/renderer/layouts/default-layout/player-bar';
 
 if (!isElectron()) {
   useSettingsStore.getState().actions.setSettings({
@@ -26,357 +15,44 @@ if (!isElectron()) {
   });
 }
 
-const Layout = styled.div`
+const Layout = styled.div<{ windowBarStyle: Platform }>`
   display: grid;
   grid-template-areas:
+    'window-bar'
     'main-content'
     'player';
-  grid-template-rows: calc(100vh - 90px) 90px;
+  grid-template-rows:
+    ${(props) => (props.windowBarStyle !== Platform.WEB ? '30px' : '0px')} calc(100vh - 120px)
+    90px;
   grid-template-columns: 1fr;
   gap: 0;
   height: 100%;
 `;
 
-const MainContentContainer = styled.div<{
-  leftSidebarWidth: string;
-  rightExpanded?: boolean;
-  rightSidebarWidth?: string;
-  shell?: boolean;
-}>`
-  position: relative;
-  display: ${(props) => (props.shell ? 'flex' : 'grid')};
-  grid-area: main-content;
-  grid-template-areas: 'sidebar . right-sidebar';
-  grid-template-rows: 1fr;
-  grid-template-columns: ${(props) => props.leftSidebarWidth} 1fr ${(props) =>
-      props.rightExpanded && props.rightSidebarWidth};
-  gap: 0;
-  background: var(--main-bg);
-`;
-
-const SidebarContainer = styled.aside`
-  position: relative;
-  grid-area: sidebar;
-  background: var(--sidebar-bg);
-  border-right: var(--sidebar-border);
-`;
-
-const RightSidebarContainer = styled(motion.aside)`
-  position: relative;
-  grid-area: right-sidebar;
-  height: 100%;
-  background: var(--sidebar-bg);
-  border-left: var(--sidebar-border);
-`;
-
-const PlayerbarContainer = styled.footer`
-  z-index: 100;
-  grid-area: player;
-  background: var(--playerbar-bg);
-  filter: drop-shadow(0 -3px 1px rgba(0, 0, 0, 10%));
-`;
-
-const ResizeHandle = styled.div<{
-  isResizing: boolean;
-  placement: 'top' | 'left' | 'bottom' | 'right';
-}>`
-  position: absolute;
-  top: ${(props) => props.placement === 'top' && 0};
-  right: ${(props) => props.placement === 'right' && 0};
-  bottom: ${(props) => props.placement === 'bottom' && 0};
-  left: ${(props) => props.placement === 'left' && 0};
-  z-index: 90;
-  width: 2px;
-  height: 100%;
-  background-color: var(--sidebar-handle-bg);
-  cursor: ew-resize;
-  opacity: ${(props) => (props.isResizing ? 1 : 0)};
-
-  &:hover {
-    opacity: 0.5;
-  }
-`;
-
-const QueueDrawer = styled(motion.div)`
-  background: var(--main-bg);
-  border: 3px solid var(--generic-border-color);
-  border-radius: 10px;
-`;
-
-const QueueDrawerArea = styled(motion.div)`
-  position: absolute;
-  top: 50%;
-  right: 25px;
-  z-index: 100;
-  display: flex;
-  align-items: center;
-  width: 20px;
-  height: 30px;
-  user-select: none;
-`;
+const WindowBar = lazy(() =>
+  import('/@/renderer/layouts/window-bar').then((module) => ({
+    default: module.WindowBar,
+  })),
+);
 
 interface DefaultLayoutProps {
   shell?: boolean;
 }
 
 export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
-  const sidebar = useAppStore((state) => state.sidebar);
-  const { setSidebar } = useAppStoreActions();
-  const [drawer, drawerHandler] = useDisclosure(false);
-  const location = useLocation();
-  const { sideQueueType, showQueueDrawerButton } = useGeneralSettings();
-
-  const sidebarRef = useRef<HTMLDivElement | null>(null);
-  const rightSidebarRef = useRef<HTMLDivElement | null>(null);
-  const [isResizing, setIsResizing] = useState(false);
-  const [isResizingRight, setIsResizingRight] = useState(false);
-
-  const drawerTimeout = useTimeout(() => drawerHandler.open(), 500);
-
-  const handleEnterDrawerButton = useCallback(() => {
-    drawerTimeout.start();
-  }, [drawerTimeout]);
-
-  const handleLeaveDrawerButton = useCallback(() => {
-    drawerTimeout.clear();
-  }, [drawerTimeout]);
-
-  const isQueueDrawerButtonVisible =
-    showQueueDrawerButton &&
-    !sidebar.rightExpanded &&
-    !drawer &&
-    location.pathname !== AppRoute.NOW_PLAYING;
-
-  const showSideQueue = sidebar.rightExpanded && location.pathname !== AppRoute.NOW_PLAYING;
-  const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
-
-  const queueDrawerButtonVariants: Variants = {
-    hidden: {
-      opacity: 0,
-      transition: { duration: 0.2 },
-      x: 100,
-    },
-    visible: {
-      opacity: 0.5,
-      transition: { duration: 0.1, ease: 'anticipate' },
-      x: 0,
-    },
-  };
-
-  const queueDrawerVariants: Variants = {
-    closed: {
-      height: 'calc(100vh - 175px)',
-      position: 'absolute',
-      right: 0,
-      top: '75px',
-      transition: {
-        duration: 0.4,
-        ease: 'anticipate',
-      },
-      width: '450px',
-      x: '50vw',
-    },
-    open: {
-      boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.8)',
-      height: 'calc(100vh - 175px)',
-      position: 'absolute',
-      right: '20px',
-      top: '75px',
-      transition: {
-        damping: 10,
-        delay: 0,
-        duration: 0.4,
-        ease: 'anticipate',
-        mass: 0.5,
-      },
-      width: '450px',
-      x: 0,
-      zIndex: 120,
-    },
-  };
-
-  const queueSidebarVariants: Variants = {
-    closed: {
-      transition: { duration: 0.5 },
-      width: sidebar.rightWidth,
-      x: 1000,
-      zIndex: 120,
-    },
-    open: {
-      transition: {
-        duration: 0.5,
-        ease: 'anticipate',
-      },
-      width: sidebar.rightWidth,
-      x: 0,
-      zIndex: 120,
-    },
-  };
-
-  const startResizing = useCallback((position: 'left' | 'right') => {
-    if (position === 'left') return setIsResizing(true);
-    return setIsResizingRight(true);
-  }, []);
-
-  const stopResizing = useCallback(() => {
-    setIsResizing(false);
-    setIsResizingRight(false);
-  }, []);
-
-  const resize = useCallback(
-    (mouseMoveEvent: any) => {
-      if (isResizing) {
-        const width = `${constrainSidebarWidth(mouseMoveEvent.clientX)}px`;
-        setSidebar({ leftWidth: width });
-      }
-      if (isResizingRight) {
-        const start = Number(sidebar.rightWidth.split('px')[0]);
-        const { left } = rightSidebarRef!.current!.getBoundingClientRect();
-        const width = `${constrainRightSidebarWidth(start + left - mouseMoveEvent.clientX)}px`;
-        setSidebar({ rightWidth: width });
-      }
-    },
-    [isResizing, isResizingRight, setSidebar, sidebar.rightWidth],
-  );
-
-  const throttledResize = useMemo(() => throttle(resize, 50), [resize]);
-
-  useEffect(() => {
-    window.addEventListener('mousemove', throttledResize);
-    window.addEventListener('mouseup', stopResizing);
-    return () => {
-      window.removeEventListener('mousemove', throttledResize);
-      window.removeEventListener('mouseup', stopResizing);
-    };
-  }, [throttledResize, stopResizing]);
+  const { windowBarStyle } = useGeneralSettings();
 
   return (
-    <Layout id="default-layout">
-      <MainContentContainer
-        id="main-content"
-        leftSidebarWidth={sidebar.leftWidth}
-        rightExpanded={showSideQueue && sideQueueType === 'sideQueue'}
-        rightSidebarWidth={sidebar.rightWidth}
-        shell={shell}
+    <>
+      <Layout
+        id="default-layout"
+        windowBarStyle={windowBarStyle}
       >
-        {!shell && (
-          <>
-            <AnimatePresence
-              initial={false}
-              mode="wait"
-            >
-              {isFullScreenPlayerExpanded && <FullScreenPlayer />}
-            </AnimatePresence>
-            <SidebarContainer id="sidebar">
-              <ResizeHandle
-                ref={sidebarRef}
-                isResizing={isResizing}
-                placement="right"
-                onMouseDown={(e) => {
-                  e.preventDefault();
-                  startResizing('left');
-                }}
-              />
-              <Sidebar />
-            </SidebarContainer>
-            <AnimatePresence
-              initial={false}
-              mode="wait"
-            >
-              {isQueueDrawerButtonVisible && (
-                <QueueDrawerArea
-                  key="queue-drawer-button"
-                  animate="visible"
-                  exit="hidden"
-                  initial="hidden"
-                  variants={queueDrawerButtonVariants}
-                  whileHover={{ opacity: 1, scale: 2, transition: { duration: 0.5 } }}
-                  onMouseEnter={handleEnterDrawerButton}
-                  onMouseLeave={handleLeaveDrawerButton}
-                >
-                  <TbArrowBarLeft size={12} />
-                </QueueDrawerArea>
-              )}
-
-              {drawer && (
-                <QueueDrawer
-                  key="queue-drawer"
-                  animate="open"
-                  exit="closed"
-                  initial="closed"
-                  variants={queueDrawerVariants}
-                  onMouseLeave={() => {
-                    // The drawer will close due to the delay when setting isReorderingQueue
-                    setTimeout(() => {
-                      if (useAppStore.getState().isReorderingQueue) return;
-                      drawerHandler.close();
-                    }, 50);
-                  }}
-                >
-                  <DrawerPlayQueue />
-                </QueueDrawer>
-              )}
-            </AnimatePresence>
-            <AnimatePresence
-              key="queue-sidebar"
-              presenceAffectsLayout
-              initial={false}
-              mode="wait"
-            >
-              {showSideQueue && (
-                <>
-                  {sideQueueType === 'sideQueue' ? (
-                    <RightSidebarContainer
-                      key="queue-sidebar"
-                      animate="open"
-                      exit="closed"
-                      id="sidebar-queue"
-                      initial="closed"
-                      variants={queueSidebarVariants}
-                    >
-                      <ResizeHandle
-                        ref={rightSidebarRef}
-                        isResizing={isResizingRight}
-                        placement="left"
-                        onMouseDown={(e) => {
-                          e.preventDefault();
-                          startResizing('right');
-                        }}
-                      />
-                      <SidebarPlayQueue />
-                    </RightSidebarContainer>
-                  ) : (
-                    <QueueDrawer
-                      key="queue-drawer"
-                      animate="open"
-                      exit="closed"
-                      id="drawer-queue"
-                      initial="closed"
-                      variants={queueDrawerVariants}
-                      onMouseLeave={() => {
-                        // The drawer will close due to the delay when setting isReorderingQueue
-                        setTimeout(() => {
-                          if (useAppStore.getState().isReorderingQueue) return;
-                          drawerHandler.close();
-                        }, 50);
-                      }}
-                    >
-                      <DrawerPlayQueue />
-                    </QueueDrawer>
-                  )}
-                </>
-              )}
-            </AnimatePresence>
-          </>
-        )}
-        <Suspense fallback={<></>}>
-          <Outlet />
-        </Suspense>
-      </MainContentContainer>
-      <PlayerbarContainer id="player-bar">
-        <Playerbar />
-      </PlayerbarContainer>
-    </Layout>
+        {windowBarStyle !== Platform.WEB && <WindowBar />}
+        <MainContent shell={shell} />
+        <PlayerBar />
+      </Layout>
+    </>
   );
 };
 
diff --git a/src/renderer/layouts/default-layout/main-content.tsx b/src/renderer/layouts/default-layout/main-content.tsx
new file mode 100644
index 00000000..39bc7dca
--- /dev/null
+++ b/src/renderer/layouts/default-layout/main-content.tsx
@@ -0,0 +1,345 @@
+import { useDisclosure, useTimeout } from '@mantine/hooks';
+import { motion, AnimatePresence, Variants } from 'framer-motion';
+import { throttle } from 'lodash';
+import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { TbArrowBarLeft } from 'react-icons/tb';
+import { Outlet, useLocation } from 'react-router';
+import styled from 'styled-components';
+import { DrawerPlayQueue, SidebarPlayQueue } from '/@/renderer/features/now-playing';
+import { FullScreenPlayer } from '/@/renderer/features/player/components/full-screen-player';
+import { Sidebar } from '/@/renderer/features/sidebar/components/sidebar';
+import { AppRoute } from '/@/renderer/router/routes';
+import { useAppStore, useAppStoreActions, useFullScreenPlayerStore } from '/@/renderer/store';
+import { useGeneralSettings } from '/@/renderer/store/settings.store';
+import { Platform } from '/@/renderer/types';
+import { constrainSidebarWidth, constrainRightSidebarWidth } from '/@/renderer/utils';
+
+const MainContentContainer = styled.div<{
+  leftSidebarWidth: string;
+  rightExpanded?: boolean;
+  rightSidebarWidth?: string;
+  shell?: boolean;
+}>`
+  position: relative;
+  display: ${(props) => (props.shell ? 'flex' : 'grid')};
+  grid-area: main-content;
+  grid-template-areas: 'sidebar . right-sidebar';
+  grid-template-rows: 1fr;
+  grid-template-columns: ${(props) => props.leftSidebarWidth} 1fr ${(props) =>
+      props.rightExpanded && props.rightSidebarWidth};
+  gap: 0;
+  background: var(--main-bg);
+`;
+
+const SidebarContainer = styled.aside`
+  position: relative;
+  grid-area: sidebar;
+  background: var(--sidebar-bg);
+  border-right: var(--sidebar-border);
+`;
+
+const RightSidebarContainer = styled(motion.aside)`
+  position: relative;
+  grid-area: right-sidebar;
+  height: 100%;
+  background: var(--sidebar-bg);
+  border-left: var(--sidebar-border);
+`;
+
+const ResizeHandle = styled.div<{
+  isResizing: boolean;
+  placement: 'top' | 'left' | 'bottom' | 'right';
+}>`
+  position: absolute;
+  top: ${(props) => props.placement === 'top' && 0};
+  right: ${(props) => props.placement === 'right' && 0};
+  bottom: ${(props) => props.placement === 'bottom' && 0};
+  left: ${(props) => props.placement === 'left' && 0};
+  z-index: 90;
+  width: 2px;
+  height: 100%;
+  background-color: var(--sidebar-handle-bg);
+  cursor: ew-resize;
+  opacity: ${(props) => (props.isResizing ? 1 : 0)};
+
+  &:hover {
+    opacity: 0.5;
+  }
+`;
+
+const QueueDrawer = styled(motion.div)`
+  background: var(--main-bg);
+  border: 3px solid var(--generic-border-color);
+  border-radius: 10px;
+`;
+
+const QueueDrawerArea = styled(motion.div)`
+  position: absolute;
+  top: 50%;
+  right: 25px;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  width: 20px;
+  height: 30px;
+  user-select: none;
+`;
+
+const queueDrawerVariants: Variants = {
+  closed: (windowBarStyle) => ({
+    height: windowBarStyle !== Platform.WEB ? 'calc(100vh - 205px)' : 'calc(100vh - 175px)',
+    position: 'absolute',
+    right: 0,
+    top: '75px',
+    transition: {
+      duration: 0.4,
+      ease: 'anticipate',
+    },
+    width: '450px',
+    x: '50vw',
+  }),
+  open: (windowBarStyle) => ({
+    boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.8)',
+    height: windowBarStyle !== Platform.WEB ? 'calc(100vh - 205px)' : 'calc(100vh - 175px)',
+    position: 'absolute',
+    right: '20px',
+    top: '75px',
+    transition: {
+      damping: 10,
+      delay: 0,
+      duration: 0.4,
+      ease: 'anticipate',
+      mass: 0.5,
+    },
+    width: '450px',
+    x: 0,
+    zIndex: 120,
+  }),
+};
+
+const queueDrawerButtonVariants: Variants = {
+  hidden: {
+    opacity: 0,
+    transition: { duration: 0.2 },
+    x: 100,
+  },
+  visible: {
+    opacity: 0.5,
+    transition: { duration: 0.1, ease: 'anticipate' },
+    x: 0,
+  },
+};
+
+const queueSidebarVariants: Variants = {
+  closed: (rightWidth) => ({
+    transition: { duration: 0.5 },
+    width: rightWidth,
+    x: 1000,
+    zIndex: 120,
+  }),
+  open: (rightWidth) => ({
+    transition: {
+      duration: 0.5,
+      ease: 'anticipate',
+    },
+    width: rightWidth,
+    x: 0,
+    zIndex: 120,
+  }),
+};
+
+export const MainContent = ({ shell }: { shell?: boolean }) => {
+  const sidebar = useAppStore((state) => state.sidebar);
+  const { setSideBar } = useAppStoreActions();
+  const [drawer, drawerHandler] = useDisclosure(false);
+  const location = useLocation();
+  const { sideQueueType, showQueueDrawerButton } = useGeneralSettings();
+  const { windowBarStyle } = useGeneralSettings();
+
+  const sidebarRef = useRef<HTMLDivElement | null>(null);
+  const rightSidebarRef = useRef<HTMLDivElement | null>(null);
+  const [isResizing, setIsResizing] = useState(false);
+  const [isResizingRight, setIsResizingRight] = useState(false);
+
+  const drawerTimeout = useTimeout(() => drawerHandler.open(), 500);
+
+  const handleEnterDrawerButton = useCallback(() => {
+    drawerTimeout.start();
+  }, [drawerTimeout]);
+
+  const handleLeaveDrawerButton = useCallback(() => {
+    drawerTimeout.clear();
+  }, [drawerTimeout]);
+
+  const isQueueDrawerButtonVisible =
+    showQueueDrawerButton &&
+    !sidebar.rightExpanded &&
+    !drawer &&
+    location.pathname !== AppRoute.NOW_PLAYING;
+
+  const showSideQueue = sidebar.rightExpanded && location.pathname !== AppRoute.NOW_PLAYING;
+  const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
+
+  const startResizing = useCallback((position: 'left' | 'right') => {
+    if (position === 'left') return setIsResizing(true);
+    return setIsResizingRight(true);
+  }, []);
+
+  const stopResizing = useCallback(() => {
+    setIsResizing(false);
+    setIsResizingRight(false);
+  }, []);
+
+  const resize = useCallback(
+    (mouseMoveEvent: any) => {
+      if (isResizing) {
+        const width = `${constrainSidebarWidth(mouseMoveEvent.clientX)}px`;
+        setSideBar({ leftWidth: width });
+      }
+      if (isResizingRight) {
+        const start = Number(sidebar.rightWidth.split('px')[0]);
+        const { left } = rightSidebarRef!.current!.getBoundingClientRect();
+        const width = `${constrainRightSidebarWidth(start + left - mouseMoveEvent.clientX)}px`;
+        setSideBar({ rightWidth: width });
+      }
+    },
+    [isResizing, isResizingRight, setSideBar, sidebar.rightWidth],
+  );
+
+  const throttledResize = useMemo(() => throttle(resize, 50), [resize]);
+
+  useEffect(() => {
+    window.addEventListener('mousemove', throttledResize);
+    window.addEventListener('mouseup', stopResizing);
+    return () => {
+      window.removeEventListener('mousemove', throttledResize);
+      window.removeEventListener('mouseup', stopResizing);
+    };
+  }, [throttledResize, stopResizing]);
+
+  return (
+    <MainContentContainer
+      id="main-content"
+      leftSidebarWidth={sidebar.leftWidth}
+      rightExpanded={showSideQueue && sideQueueType === 'sideQueue'}
+      rightSidebarWidth={sidebar.rightWidth}
+      shell={shell}
+    >
+      {!shell && (
+        <>
+          <AnimatePresence
+            initial={false}
+            mode="wait"
+          >
+            {isFullScreenPlayerExpanded && <FullScreenPlayer />}
+          </AnimatePresence>
+          <SidebarContainer id="sidebar">
+            <ResizeHandle
+              ref={sidebarRef}
+              isResizing={isResizing}
+              placement="right"
+              onMouseDown={(e) => {
+                e.preventDefault();
+                startResizing('left');
+              }}
+            />
+            <Sidebar />
+          </SidebarContainer>
+          <AnimatePresence
+            initial={false}
+            mode="wait"
+          >
+            {isQueueDrawerButtonVisible && (
+              <QueueDrawerArea
+                key="queue-drawer-button"
+                animate="visible"
+                exit="hidden"
+                initial="hidden"
+                variants={queueDrawerButtonVariants}
+                whileHover={{ opacity: 1, scale: 2, transition: { duration: 0.5 } }}
+                onMouseEnter={handleEnterDrawerButton}
+                onMouseLeave={handleLeaveDrawerButton}
+              >
+                <TbArrowBarLeft size={12} />
+              </QueueDrawerArea>
+            )}
+
+            {drawer && (
+              <QueueDrawer
+                key="queue-drawer"
+                animate="open"
+                exit="closed"
+                initial="closed"
+                variants={queueDrawerVariants}
+                onMouseLeave={() => {
+                  // The drawer will close due to the delay when setting isReorderingQueue
+                  setTimeout(() => {
+                    if (useAppStore.getState().isReorderingQueue) return;
+                    drawerHandler.close();
+                  }, 50);
+                }}
+              >
+                <DrawerPlayQueue />
+              </QueueDrawer>
+            )}
+          </AnimatePresence>
+          <AnimatePresence
+            key="queue-sidebar"
+            presenceAffectsLayout
+            initial={false}
+            mode="wait"
+          >
+            {showSideQueue && (
+              <>
+                {sideQueueType === 'sideQueue' ? (
+                  <RightSidebarContainer
+                    key="queue-sidebar"
+                    animate="open"
+                    custom={sidebar.rightWidth}
+                    exit="closed"
+                    id="sidebar-queue"
+                    initial="closed"
+                    variants={queueSidebarVariants}
+                  >
+                    <ResizeHandle
+                      ref={rightSidebarRef}
+                      isResizing={isResizingRight}
+                      placement="left"
+                      onMouseDown={(e) => {
+                        e.preventDefault();
+                        startResizing('right');
+                      }}
+                    />
+                    <SidebarPlayQueue />
+                  </RightSidebarContainer>
+                ) : (
+                  <QueueDrawer
+                    key="queue-drawer"
+                    animate="open"
+                    custom={windowBarStyle}
+                    exit="closed"
+                    id="drawer-queue"
+                    initial="closed"
+                    variants={queueDrawerVariants}
+                    onMouseLeave={() => {
+                      // The drawer will close due to the delay when setting isReorderingQueue
+                      setTimeout(() => {
+                        if (useAppStore.getState().isReorderingQueue) return;
+                        drawerHandler.close();
+                      }, 50);
+                    }}
+                  >
+                    <DrawerPlayQueue />
+                  </QueueDrawer>
+                )}
+              </>
+            )}
+          </AnimatePresence>
+        </>
+      )}
+      <Suspense fallback={<></>}>
+        <Outlet />
+      </Suspense>
+    </MainContentContainer>
+  );
+};
diff --git a/src/renderer/layouts/default-layout/player-bar.tsx b/src/renderer/layouts/default-layout/player-bar.tsx
new file mode 100644
index 00000000..dc31901a
--- /dev/null
+++ b/src/renderer/layouts/default-layout/player-bar.tsx
@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import { Playerbar } from '/@/renderer/features/player';
+
+const PlayerbarContainer = styled.footer`
+  z-index: 100;
+  grid-area: player;
+  background: var(--playerbar-bg);
+  filter: drop-shadow(0 -3px 1px rgba(0, 0, 0, 10%));
+`;
+
+export const PlayerBar = () => {
+  return (
+    <PlayerbarContainer id="player-bar">
+      <Playerbar />
+    </PlayerbarContainer>
+  );
+};
diff --git a/src/renderer/layouts/window-bar.tsx b/src/renderer/layouts/window-bar.tsx
new file mode 100644
index 00000000..361015a3
--- /dev/null
+++ b/src/renderer/layouts/window-bar.tsx
@@ -0,0 +1,251 @@
+import { useCallback, useState } from 'react';
+import isElectron from 'is-electron';
+import { RiCheckboxBlankLine, RiCloseLine, RiSubtractLine } from 'react-icons/ri';
+import styled from 'styled-components';
+import { useCurrentStatus, useQueueStatus } from '/@/renderer/store';
+import { useGeneralSettings } from '/@/renderer/store/settings.store';
+import { Platform, PlayerStatus } from '/@/renderer/types';
+import appIcon from '../../../assets/icon.svg';
+import macCloseHover from './assets/close-mac-hover.png';
+import macClose from './assets/close-mac.png';
+import macMaxHover from './assets/max-mac-hover.png';
+import macMax from './assets/max-mac.png';
+import macMinHover from './assets/min-mac-hover.png';
+import macMin from './assets/min-mac.png';
+
+const WindowsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--window-bar-fg);
+  background-color: var(--window-bar-bg);
+  -webkit-app-region: drag;
+`;
+
+const WindowsButtonGroup = styled.div`
+  display: flex;
+  width: 130px;
+  height: 100%;
+  -webkit-app-region: no-drag;
+`;
+
+const WindowsButton = styled.div<{ $exit?: boolean }>`
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  -webkit-app-region: no-drag;
+  width: 50px;
+  height: 30px;
+
+  img {
+    width: 35%;
+    height: 50%;
+  }
+
+  &:hover {
+    background: ${({ $exit }) => ($exit ? 'var(--danger-color)' : 'rgba(125, 125, 125, 30%)')};
+  }
+`;
+
+const PlayerStatusContainer = styled.div`
+  display: flex;
+  gap: 0.5rem;
+  max-width: 45vw;
+  padding-left: 1rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+const browser = isElectron() ? window.electron.browser : null;
+const close = () => browser.exit();
+const minimize = () => browser.minimize();
+const maximize = () => browser.maximize();
+const unmaximize = () => browser.unmaximize();
+
+interface WindowBarControlsProps {
+  controls: {
+    handleClose: () => void;
+    handleMaximize: () => void;
+    handleMinimize: () => void;
+  };
+  title: string;
+}
+
+const WindowsControls = ({ controls, title }: WindowBarControlsProps) => {
+  const { handleClose, handleMaximize, handleMinimize } = controls;
+
+  return (
+    <WindowsContainer>
+      <PlayerStatusContainer>
+        <img
+          alt=""
+          height={18}
+          src={appIcon}
+          width={18}
+        />
+        {title}
+      </PlayerStatusContainer>
+      <WindowsButtonGroup>
+        <WindowsButton
+          role="button"
+          onClick={handleMinimize}
+        >
+          <RiSubtractLine size={19} />
+        </WindowsButton>
+        <WindowsButton
+          role="button"
+          onClick={handleMaximize}
+        >
+          <RiCheckboxBlankLine size={13} />
+        </WindowsButton>
+        <WindowsButton
+          $exit
+          role="button"
+          onClick={handleClose}
+        >
+          <RiCloseLine size={19} />
+        </WindowsButton>
+      </WindowsButtonGroup>
+    </WindowsContainer>
+  );
+};
+
+const MacOsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  -webkit-app-region: drag;
+`;
+
+const MacOsButtonGroup = styled.div`
+  position: absolute;
+  top: 5px;
+  left: 0.5rem;
+  display: grid;
+  grid-template-columns: repeat(3, 20px);
+  height: 100%;
+
+  -webkit-app-region: no-drag;
+`;
+
+export const MacOsButton = styled.div<{
+  maxButton?: boolean;
+  minButton?: boolean;
+  restoreButton?: boolean;
+}>`
+  grid-row: 1 / span 1;
+  grid-column: ${(props) => (props.minButton ? 2 : props.maxButton || props.restoreButton ? 3 : 1)};
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+
+  img {
+    width: 18px;
+    height: 18px;
+  }
+`;
+
+const MacOsControls = ({ controls, title }: WindowBarControlsProps) => {
+  const { handleClose, handleMaximize, handleMinimize } = controls;
+
+  const [hoverMin, setHoverMin] = useState(false);
+  const [hoverMax, setHoverMax] = useState(false);
+  const [hoverClose, setHoverClose] = useState(false);
+
+  return (
+    <MacOsContainer>
+      <MacOsButtonGroup>
+        <MacOsButton
+          minButton
+          className="button"
+          id="min-button"
+          onClick={handleMinimize}
+          onMouseLeave={() => setHoverMin(false)}
+          onMouseOver={() => setHoverMin(true)}
+        >
+          <img
+            alt=""
+            className="icon"
+            draggable="false"
+            src={hoverMin ? macMinHover : macMin}
+          />
+        </MacOsButton>
+        <MacOsButton
+          maxButton
+          className="button"
+          id="max-button"
+          onClick={handleMaximize}
+          onMouseLeave={() => setHoverMax(false)}
+          onMouseOver={() => setHoverMax(true)}
+        >
+          <img
+            alt=""
+            className="icon"
+            draggable="false"
+            src={hoverMax ? macMaxHover : macMax}
+          />
+        </MacOsButton>
+        <MacOsButton
+          className="button"
+          id="close-button"
+          onClick={handleClose}
+          onMouseLeave={() => setHoverClose(false)}
+          onMouseOver={() => setHoverClose(true)}
+        >
+          <img
+            alt=""
+            className="icon"
+            draggable="false"
+            src={hoverClose ? macCloseHover : macClose}
+          />
+        </MacOsButton>
+      </MacOsButtonGroup>
+      <PlayerStatusContainer>{title}</PlayerStatusContainer>
+    </MacOsContainer>
+  );
+};
+
+export const WindowBar = () => {
+  const playerStatus = useCurrentStatus();
+  const { currentSong, index, length } = useQueueStatus();
+  const { windowBarStyle } = useGeneralSettings();
+
+  const statusString = playerStatus === PlayerStatus.PAUSED ? '(Paused) ' : '';
+  const queueString = length ? `(${index + 1} / ${length}) ` : '';
+  const title = length ? `${statusString}${queueString}${currentSong?.name}` : 'Feishin';
+
+  const [max, setMax] = useState(false);
+
+  const handleMinimize = () => minimize();
+
+  const handleMaximize = useCallback(() => {
+    if (max) {
+      unmaximize();
+    } else {
+      maximize();
+    }
+    setMax(!max);
+  }, [max]);
+
+  const handleClose = useCallback(() => close(), []);
+
+  return (
+    <>
+      {windowBarStyle === Platform.WINDOWS ? (
+        <WindowsControls
+          controls={{ handleClose, handleMaximize, handleMinimize }}
+          title={title}
+        />
+      ) : (
+        <MacOsControls
+          controls={{ handleClose, handleMaximize, handleMinimize }}
+          title={title}
+        />
+      )}
+    </>
+  );
+};
diff --git a/src/renderer/router/titlebar-outlet.tsx b/src/renderer/router/titlebar-outlet.tsx
index 54377ad7..95e22825 100644
--- a/src/renderer/router/titlebar-outlet.tsx
+++ b/src/renderer/router/titlebar-outlet.tsx
@@ -1,6 +1,8 @@
 import { Outlet } from 'react-router';
 import styled from 'styled-components';
 import { Titlebar } from '/@/renderer/features/titlebar/components/titlebar';
+import { useGeneralSettings } from '/@/renderer/store/settings.store';
+import { Platform } from '/@/renderer/types';
 
 const TitlebarContainer = styled.header`
   position: absolute;
@@ -13,11 +15,15 @@ const TitlebarContainer = styled.header`
 `;
 
 export const TitlebarOutlet = () => {
+  const { windowBarStyle } = useGeneralSettings();
+
   return (
     <>
-      <TitlebarContainer>
-        <Titlebar />
-      </TitlebarContainer>
+      {windowBarStyle === Platform.WEB && (
+        <TitlebarContainer>
+          <Titlebar />
+        </TitlebarContainer>
+      )}
       <Outlet />
     </>
   );
diff --git a/src/renderer/store/app.store.ts b/src/renderer/store/app.store.ts
index a438a1e2..319c7e4d 100644
--- a/src/renderer/store/app.store.ts
+++ b/src/renderer/store/app.store.ts
@@ -33,8 +33,8 @@ export interface AppState {
 export interface AppSlice extends AppState {
   actions: {
     setAppStore: (data: Partial<AppSlice>) => void;
-    setSidebar: (options: Partial<SidebarProps>) => void;
-    setTitlebar: (options: Partial<TitlebarProps>) => void;
+    setSideBar: (options: Partial<SidebarProps>) => void;
+    setTitleBar: (options: Partial<TitlebarProps>) => void;
   };
 }
 
@@ -46,12 +46,12 @@ export const useAppStore = create<AppSlice>()(
           setAppStore: (data) => {
             set({ ...get(), ...data });
           },
-          setSidebar: (options) => {
+          setSideBar: (options) => {
             set((state) => {
               state.sidebar = { ...state.sidebar, ...options };
             });
           },
-          setTitlebar: (options) => {
+          setTitleBar: (options) => {
             set((state) => {
               state.titlebar = { ...state.titlebar, ...options };
             });
@@ -89,6 +89,6 @@ export const useSidebarStore = () => useAppStore((state) => state.sidebar);
 
 export const useSidebarRightExpanded = () => useAppStore((state) => state.sidebar.rightExpanded);
 
-export const useSetTitlebar = () => useAppStore((state) => state.actions.setTitlebar);
+export const useSetTitlebar = () => useAppStore((state) => state.actions.setTitleBar);
 
 export const useTitlebarStore = () => useAppStore((state) => state.titlebar);
diff --git a/src/renderer/store/player.store.ts b/src/renderer/store/player.store.ts
index b82141cf..41cf42b7 100644
--- a/src/renderer/store/player.store.ts
+++ b/src/renderer/store/player.store.ts
@@ -49,6 +49,7 @@ export interface PlayerData {
 
 export interface QueueData {
   current?: QueueSong;
+  length: number;
   next?: QueueSong;
   previous?: QueueSong;
 }
@@ -318,6 +319,7 @@ export const usePlayerStore = create<PlayerSlice>()(
                   player2,
                   queue: {
                     current,
+                    length: get().queue.default.length || 0,
                     next,
                     previous,
                   },
@@ -377,6 +379,7 @@ export const usePlayerStore = create<PlayerSlice>()(
                 player2,
                 queue: {
                   current: queue[currentIndex],
+                  length: get().queue.default.length || 0,
                   next: nextSongIndex !== undefined ? queue[nextSongIndex] : undefined,
                   previous: queue[currentIndex - 1],
                 },
@@ -386,6 +389,7 @@ export const usePlayerStore = create<PlayerSlice>()(
               const queue = get().queue.default;
               return {
                 current: queue[get().current.index],
+                length: queue.length || 0,
                 next: queue[get().current.index + 1],
                 previous: queue[get().current.index - 1],
               };
@@ -895,7 +899,9 @@ export const useCurrentSong = () => usePlayerStore((state) => state.current.song
 export const usePlayerData = () =>
   usePlayerStore(
     (state) => state.actions.getPlayerData(),
-    (a, b) => a.current.nextIndex === b.current.nextIndex,
+    (a, b) => {
+      return a.current.nextIndex === b.current.nextIndex;
+    },
   );
 
 export const useCurrentPlayer = () => usePlayerStore((state) => state.current.player);
@@ -920,3 +926,13 @@ export const useSetQueueRating = () => usePlayerStore((state) => state.actions.s
 
 export const useIncrementQueuePlayCount = () =>
   usePlayerStore((state) => state.actions.incrementPlayCount);
+
+export const useQueueStatus = () =>
+  usePlayerStore(
+    (state) => ({
+      currentSong: state.current.song,
+      index: state.current.index,
+      length: state.queue.default.length,
+    }),
+    shallow,
+  );
diff --git a/src/renderer/store/settings.store.ts b/src/renderer/store/settings.store.ts
index d9ec7a36..fef354a9 100644
--- a/src/renderer/store/settings.store.ts
+++ b/src/renderer/store/settings.store.ts
@@ -4,6 +4,7 @@ import merge from 'lodash/merge';
 import create from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
+import shallow from 'zustand/shallow';
 import { AppTheme } from '/@/renderer/themes/types';
 import {
   TableColumn,
@@ -12,6 +13,7 @@ import {
   PlaybackStyle,
   PlaybackType,
   TableType,
+  Platform,
 } from '/@/renderer/types';
 
 export type PersistedTableColumn = {
@@ -38,6 +40,7 @@ export interface SettingsState {
     themeDark: AppTheme;
     themeLight: AppTheme;
     volumeWheelStep: number;
+    windowBarStyle: Platform;
   };
   player: {
     audioDeviceId?: string | null;
@@ -93,6 +96,7 @@ export const useSettingsStore = create<SettingsSlice>()(
           themeDark: AppTheme.DEFAULT_DARK,
           themeLight: AppTheme.DEFAULT_LIGHT,
           volumeWheelStep: 5,
+          windowBarStyle: Platform.WEB,
         },
         player: {
           audioDeviceId: undefined,
@@ -244,21 +248,21 @@ export const useSettingsStore = create<SettingsSlice>()(
         return merge(currentState, persistedState);
       },
       name: 'store_settings',
-      version: 3,
+      version: 4,
     },
   ),
 );
 
 export const useSettingsStoreActions = () => useSettingsStore((state) => state.actions);
 
-export const usePlayerSettings = () => useSettingsStore((state) => state.player);
+export const usePlayerSettings = () => useSettingsStore((state) => state.player, shallow);
 
 export const useTableSettings = (type: TableType) =>
   useSettingsStore((state) => state.tables[type]);
 
-export const useGeneralSettings = () => useSettingsStore((state) => state.general);
+export const useGeneralSettings = () => useSettingsStore((state) => state.general, shallow);
 
-export const usePlayerType = () => useSettingsStore((state) => state.player.type);
+export const usePlayerType = () => useSettingsStore((state) => state.player.type, shallow);
 
 export const usePlayButtonBehavior = () =>
-  useSettingsStore((state) => state.player.playButtonBehavior);
+  useSettingsStore((state) => state.player.playButtonBehavior, shallow);
diff --git a/src/renderer/styles/ag-grid.scss b/src/renderer/styles/ag-grid.scss
index b6abd1fe..771f0dfc 100644
--- a/src/renderer/styles/ag-grid.scss
+++ b/src/renderer/styles/ag-grid.scss
@@ -10,6 +10,10 @@
   transition: position 0.2s ease-in-out;
 }
 
+.window-frame {
+  top: 95px;
+}
+
 .ag-header-transparent {
   --ag-header-background-color: rgba(0, 0, 0, 0%) !important;
 }
diff --git a/src/renderer/themes/default.scss b/src/renderer/themes/default.scss
index 44acc802..18987894 100644
--- a/src/renderer/themes/default.scss
+++ b/src/renderer/themes/default.scss
@@ -13,15 +13,18 @@
   --main-fg: rgb(245, 245, 245);
   --main-fg-secondary: rgb(150, 150, 150);
 
+  --window-bar-bg: rgb(24, 24, 24);
+  --window-bar-fg: rgb(255, 255, 255);
+
   --titlebar-fg: rgb(255, 255, 255);
-  --titlebar-bg: rgb(24, 24, 24);
+  --titlebar-bg: rgb(12, 12, 12);
   --titlebar-controls-bg: rgba(0, 0, 0, 0);
 
   --sidebar-bg: rgb(0, 0, 0);
   --sidebar-fg: rgb(210, 210, 210);
   --sidebar-fg-hover: rgb(255, 255, 255);
   --sidebar-handle-bg: #4d4d4d;
-  --sidebar-border: none;
+  --sidebar-border: 2px rgba(18, 18, 18, 0.7) solid;
 
   --playerbar-bg: rgb(24, 24, 24);
   --playerbar-btn-main-fg: rgb(0, 0, 0);