Add dedicated OS window bars (#22)

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 (

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

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',

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);

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