Remove global titlebar

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

@@ -27,7 +27,7 @@ import { SidebarItem } from './sidebar-item';
 
 const SidebarContainer = styled.div`
   height: 100%;
-  max-height: calc(100vh - 120px); // Account for titlebar and playerbar
+  max-height: calc(100vh - 90px); // Account for and playerbar
   user-select: none;
 `;
 
@@ -54,6 +54,10 @@ const SidebarImage = styled.img`
   background: var(--placeholder-bg);
 `;
 
+const ActionsContainer = styled(Grid)`
+  -webkit-app-region: drag;
+`;
+
 export const Sidebar = () => {
   const navigate = useNavigate();
   const sidebar = useSidebarStore();
@@ -74,7 +78,7 @@ export const Sidebar = () => {
             maxHeight: showImage ? `calc(100% - ${sidebar.leftWidth})` : '100%',
           }}
         >
-          <Grid p={10}>
+          <ActionsContainer p={10}>
             <Grid.Col span={8}>
               <SpotlightProvider actions={[]}>
                 <TextInput
@@ -110,7 +114,7 @@ export const Sidebar = () => {
                 </Button>
               </Group>
             </Grid.Col>
-          </Grid>
+          </ActionsContainer>
           <Stack
             spacing={0}
             sx={{ overflowY: 'auto' }}

packages/renderer/src/features/titlebar/components/app-menu.tsx

@@ -1,12 +1,12 @@
 import { Group } from '@mantine/core';
 import { openModal, closeAllModals } from '@mantine/modals';
 import {
-  RiMenu3Fill,
   RiSearch2Line,
   RiSettings2Fill,
   RiSettings2Line,
   RiEdit2Line,
   RiLockLine,
+  RiMenuFill,
 } from 'react-icons/ri';
 import { Button, DropdownMenu, Text } from '/@/components';
 import { ServerList } from '/@/features/servers';
@@ -72,7 +72,7 @@ export const AppMenu = () => {
           size="xs"
           variant="subtle"
         >
-          <RiMenu3Fill
+          <RiMenuFill
             color="var(--titlebar-fg)"
             size={15}
           />

packages/renderer/src/features/titlebar/components/titlebar.tsx

@@ -11,36 +11,31 @@ interface TitlebarProps {
 const TitlebarContainer = styled.div`
   display: flex;
   flex-direction: row;
-  gap: 1rem;
   align-items: center;
   justify-content: space-between;
-  width: 100%;
-  height: 100%;
   color: var(--titlebar-fg);
 
   button {
     -webkit-app-region: no-drag;
-
-    svg {
-      transform: scaleX(1);
-    }
   }
 `;
 
-const Left = styled.div`
+// const Left = styled.div`
-  display: flex;
+//   display: flex;
-  flex: 1/3;
+//   flex: 1/3;
-  justify-content: center;
+//   justify-content: center;
-  height: 100%;
+//   height: 100%;
-  padding-left: 1rem;
+//   padding-left: 1rem;
-`;
+//   opacity: 0;
+// `;
 
-const Center = styled.div`
+// const Center = styled.div`
-  display: flex;
+//   display: flex;
-  flex: 1/3;
+//   flex: 1/3;
-  justify-content: center;
+//   justify-content: center;
-  height: 100%;
+//   height: 100%;
-`;
+//   opacity: 0;
+// `;
 
 const Right = styled.div`
   display: flex;
@@ -53,10 +48,6 @@ export const Titlebar = ({ children }: TitlebarProps) => {
   return (
     <>
       <TitlebarContainer>
-        <Left>
-          <Group>Feishin</Group>
-        </Left>
-        <Center />
         <Right>
           {children}
           <Group spacing="xs">

packages/renderer/src/layouts/default-layout.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { 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';
@@ -7,16 +7,15 @@ import throttle from 'lodash/throttle';
 import { TbArrowBarLeft } from 'react-icons/tb';
 import { Outlet, useLocation } from 'react-router';
 import styled from 'styled-components';
-import { PlayQueue } from '/@/features/now-playing/';
-import { Titlebar } from '/@/features/titlebar/components/titlebar';
 import { AppRoute } from '/@/router/routes';
 import { useAppStore } from '/@/store';
 import { useSettingsStore } from '/@/store/settings.store';
 import { PlaybackType } from '/@/types';
 import { constrainRightSidebarWidth, constrainSidebarWidth } from '/@/utils';
-import { Playerbar } from '../features/player';
+import { Playerbar } from '/@/features/player';
-import { Sidebar } from '../features/sidebar/components/sidebar';
+import { Sidebar } from '/@/features/sidebar/components/sidebar';
-import { useAppStoreActions } from '../store/app.store';
+import { useAppStoreActions } from '/@/store/app.store';
+import { PlayQueue } from '/@/features/now-playing';
 
 if (!isElectron()) {
   useSettingsStore.getState().setSettings({
@@ -30,21 +29,14 @@ if (!isElectron()) {
 const Layout = styled.div`
   display: grid;
   grid-template-areas:
-    'header'
     'main'
     'player';
-  grid-template-rows: 30px 1fr 90px;
+  grid-template-rows: 1fr 90px;
   grid-template-columns: 1fr;
   gap: 0;
   height: 100%;
 `;
 
-const TitlebarContainer = styled.header`
-  grid-area: header;
-  background: var(--titlebar-bg);
-  -webkit-app-region: drag;
-`;
-
 const MainContainer = styled.main<{
   leftSidebarWidth: string;
   rightExpanded?: boolean;
@@ -178,10 +170,11 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
 
   const queueDrawerVariants: Variants = {
     closed: {
-      height: 'calc(100% - 120px)',
+      height: 'calc(100vh - 150px)',
       minWidth: '400px',
       position: 'absolute',
       right: 0,
+      top: '50px',
       transition: {
         duration: 0.3,
         ease: 'anticipate',
@@ -190,10 +183,14 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
       x: '50vw',
     },
     open: {
-      height: 'calc(100% - 120px)',
+      boxShadow: '4px 4px 10px 0px rgba(0,0,0,.75)',
+      height: 'calc(100vh - 150px)',
       minWidth: '400px',
+      opacity: 0.98,
       position: 'absolute',
-      right: 0,
+      right: '20px',
+      top: '50px',
+
       transition: {
         damping: 10,
         delay: 0,
@@ -265,9 +262,6 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
   return (
     <>
       <Layout>
-        <TitlebarContainer>
-          <Titlebar />
-        </TitlebarContainer>
         <MainContainer
           leftSidebarWidth={sidebar.leftWidth}
           rightExpanded={showSideQueue}
@@ -358,7 +352,9 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
               </AnimatePresence>
             </>
           )}
-          <Outlet />
+          <Suspense fallback={<></>}>
+            <Outlet />
+          </Suspense>
         </MainContainer>
         <PlayerbarContainer>
           <Playerbar />