Add dedicated OS window bars (#22)

2023-03-28 23:59:51 -07:00 · 2023-03-28 23:59:51 -07:00 · 58c7370536
commit 58c7370536
parent ececc394e2
25 changed files with 823 additions and 462 deletions
--- 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();
--- 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}
    />
--- 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 };
 };
--- 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 (
--- 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
--- 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',
--- 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);
--- 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
--- 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;
 };
--- a/src/renderer/layouts/assets/close-mac-hover.png
+++ b/src/renderer/layouts/assets/close-mac-hover.png
--- a/src/renderer/layouts/assets/close-mac.png
+++ b/src/renderer/layouts/assets/close-mac.png
--- a/src/renderer/layouts/assets/max-mac-hover.png
+++ b/src/renderer/layouts/assets/max-mac-hover.png
--- a/src/renderer/layouts/assets/max-mac.png
+++ b/src/renderer/layouts/assets/max-mac.png
--- a/src/renderer/layouts/assets/min-mac-hover.png
+++ b/src/renderer/layouts/assets/min-mac-hover.png
--- a/src/renderer/layouts/assets/min-mac.png
+++ b/src/renderer/layouts/assets/min-mac.png
--- 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>
+    </>
  );
 };

--- a/src/renderer/layouts/default-layout/main-content.tsx
+++ 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>
+  );
+};
--- a/src/renderer/layouts/default-layout/player-bar.tsx
+++ 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>
+  );
+};
--- a/src/renderer/layouts/window-bar.tsx
+++ 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}
+        />
+      )}
+    </>
+  );
+};
--- 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 />
    </>
  );
--- 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);
--- 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,
+  );
--- 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);
--- 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;
 }
--- 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);