Fix draggable topbar

src/components/atoms/PageContainer.tsx

@@ -1,9 +1,9 @@
 import styled from '../../lib/styled'
 
 const PageContainer = styled.div`
-  padding: 1em;
-  height: 100%;
-  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 `
 
 export default PageContainer

src/components/atoms/PageDraggableHeader.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import styled from '../../lib/styled'
+import Icon from './Icon'
+import { borderBottom, flexCenter } from '../../lib/styled/styleFunctions'
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  -webkit-app-region: drag;
+  ${borderBottom}
+  height: 40px;
+
+  color: ${({ theme }) => theme.uiTextColor};
+`
+
+const IconContainer = styled.div`
+  font-size: 18px;
+  width: 24px;
+  height: 24px;
+  ${flexCenter}
+`
+
+const Label = styled.div`
+  font-weight: bold;
+`
+
+interface PageDraggableHeaderProps {
+  iconPath?: string
+  label: string
+}
+
+const PageDraggableHeader = ({ iconPath, label }: PageDraggableHeaderProps) => {
+  return (
+    <Container>
+      {iconPath != null && (
+        <IconContainer>
+          <Icon path={iconPath} />
+        </IconContainer>
+      )}
+      <Label>{label}</Label>
+    </Container>
+  )
+}
+
+export default PageDraggableHeader

src/components/atoms/PageScrollableContent.tsx

@@ -0,0 +1,9 @@
+import styled from '../../lib/styled'
+
+const PageScrollableContent = styled.div`
+  flex: 1;
+  overflow: auto;
+  padding: 1em;
+`
+
+export default PageScrollableContent

src/components/molecules/NoteDetailToolbar.tsx

@@ -27,6 +27,7 @@ import { usePreviewStyle } from '../../lib/preview'
 const NoteDetailToolbarContainer = styled.div`
   display: flex;
   height: 40px;
+  -webkit-app-region: drag;
   padding: 0 8px;
   ${borderBottom}
   align-items: center;

src/components/organisms/IdleNoteDetail.tsx

@@ -0,0 +1,100 @@
+import React from 'react'
+import Image from '../atoms/Image'
+import styled from '../../lib/styled'
+import { useTranslation } from 'react-i18next'
+import { borderBottom } from '../../lib/styled/styleFunctions'
+
+const Container = styled.div`
+  user-select: none;
+  position: relative;
+`
+
+const DraggableArea = styled.div`
+  height: 40px;
+  ${borderBottom}
+  -webkit-app-region: drag;
+`
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  img {
+    width: 310px;
+    max-width: 100%;
+    padding: 10px 40px;
+  }
+
+  section {
+    margin: auto;
+    display: flex;
+    width: 70%;
+    text-align: center;
+
+    div {
+      text-align: center;
+      margin: 0 auto;
+      display: block;
+    }
+  }
+
+  h2 {
+    font-weight: normal;
+
+    span {
+      margin: 5px auto;
+      padding: 5px 10px;
+      width: max-content;
+      background: #333;
+      border-radius: 8px;
+      box-shadow: 0 4px #404040;
+    }
+  }
+  h3 {
+    margin: 20px auto;
+    font-weight: normal;
+  }
+  h4 {
+    margin: 0;
+    font-weight: normal;
+  }
+
+  @media only screen and (max-width: 970px) {
+    section {
+      width: 100%;
+      display: block;
+    }
+  }
+`
+
+const IdleNoteDetail = () => {
+  const { t } = useTranslation()
+  return (
+    <Container>
+      <DraggableArea />
+      <Content>
+        <Image src={'/app/static/logo_index.svg'} />
+        <h3>{t('note.createkeymessage1')}</h3>
+        <section>
+          <div>
+            <h2>
+              <span>Ctrl</span> + <span>{t('note.createKey')}</span>
+            </h2>
+            <h4>{t('note.createKeyWinLin')}</h4>
+          </div>
+          <h3>{t('note.createKeyOr')}</h3>
+          <div>
+            <h2>
+              <span>⌘</span> + <span>{t('note.createKey')}</span>
+            </h2>
+            <h4>{t('note.createKeyMac')}</h4>
+          </div>
+        </section>
+      </Content>
+    </Container>
+  )
+}
+
+export default IdleNoteDetail

src/components/organisms/Navigator.tsx

@@ -7,7 +7,7 @@ import { useDialog, DialogIconTypes } from '../../lib/dialog'
 import { useContextMenu, MenuTypes } from '../../lib/contextMenu'
 import { usePreferences } from '../../lib/preferences'
 import StorageNavigatorFragment from '../molecules/StorageNavigatorFragment'
-import { mdiPlus, mdiHammerWrench } from '@mdi/js'
+import { mdiPlus, mdiHammerWrench, mdiBookPlusMultiple } from '@mdi/js'
 import NavigatorButton from '../atoms/NavigatorButton'
 import Spacer from '../atoms/Spacer'
 import { usePathnameWithoutNoteId } from '../../lib/router'
@@ -25,6 +25,7 @@ const TopControl = styled.div`
   align-items: center;
   height: 40px;
   ${borderBottom}
+  -webkit-app-region: drag;
 `
 
 const Empty = styled.button`
@@ -96,7 +97,7 @@ const Navigator = () => {
       <TopControl onContextMenu={openSideNavContextMenu}>
         <Spacer />
         <NavigatorButton
-          iconPath={mdiPlus}
+          iconPath={mdiBookPlusMultiple}
           title='New Storage'
           active={pathname === '/app/storages'}
           onClick={() => push('/app/storages')}

src/components/pages/AttachmentsPage.tsx

@@ -3,20 +3,14 @@ import { StorageAttachmentsRouteParams, useRouteParams } from '../../lib/router'
 import { useDb } from '../../lib/db'
 import styled from '../../lib/styled'
 import { getFileList } from '../../lib/dnd'
-import { borderBottom } from '../../lib/styled/styleFunctions'
 import AttachmentList from '../organisms/AttachmentList'
+import { mdiPaperclip } from '@mdi/js'
+import PageDraggableHeader from '../atoms/PageDraggableHeader'
 
 const Container = styled.div`
   height: 100%;
 `
 
-const Header = styled.div`
-  height: 40px;
-  padding: 10px;
-  width: 100%;
-  ${borderBottom}
-`
-
 const AttachmentsPage = () => {
   const routeParams = useRouteParams() as StorageAttachmentsRouteParams
   const { storageId } = routeParams
@@ -39,7 +33,11 @@ const AttachmentsPage = () => {
         addAttachments(storageId, files)
       }}
     >
-      <Header>Attachments in {storage.name}</Header>
+      <PageDraggableHeader
+        iconPath={mdiPaperclip}
+        label={`Attachments in ${storage.name}`}
+      />
+
       <AttachmentList storage={storage} />
     </Container>
   )

src/components/pages/NotePage.tsx

@@ -1,6 +1,5 @@
 import React, { useMemo, useCallback, useState, useEffect } from 'react'
 import NoteNavigator from '../organisms/NoteNavigator'
-import styled from '../../lib/styled'
 import NoteDetail from '../organisms/NoteDetail'
 import {
   useRouteParams,
@@ -13,7 +12,6 @@ import {
 } from '../../lib/router'
 import { useDb } from '../../lib/db'
 import TwoPaneLayout from '../atoms/TwoPaneLayout'
-import Image from '../atoms/Image'
 import { NoteDoc, NoteStorage } from '../../lib/db/types'
 import { useGeneralStatus, ViewModeType } from '../../lib/generalStatus'
 import { useDialog, DialogIconTypes } from '../../lib/dialog'
@@ -30,59 +28,7 @@ import {
   NoteSortingOptions,
 } from '../../lib/sort'
 import { values } from '../../lib/db/utils'
-
-export const StyledNoteDetailNoNote = styled.div`
-  text-align: center;
-  margin-top: 13%;
-  color: #a9a9a9;
-
-  img {
-    width: 310px;
-    max-width: 100%;
-    padding: 10px 40px;
-  }
-
-  section {
-    margin: auto;
-    display: flex;
-    width: 70%;
-    text-align: center;
-
-    div {
-      text-align: center;
-      margin: 0 auto;
-      display: block;
-    }
-  }
-
-  h2 {
-    font-weight: normal;
-
-    span {
-      margin: 5px auto;
-      padding: 5px 10px;
-      width: max-content;
-      background: #333;
-      border-radius: 8px;
-      box-shadow: 0 4px #404040;
-    }
-  }
-  h3 {
-    margin: 20px auto;
-    font-weight: normal;
-  }
-  h4 {
-    margin: 0;
-    font-weight: normal;
-  }
-
-  @media only screen and (max-width: 970px) {
-    section {
-      width: 100%;
-      display: block;
-    }
-  }
-`
+import IdleNoteDetail from '../organisms/IdleNoteDetail'
 
 interface NotePageProps {
   storage: NoteStorage
@@ -343,27 +289,7 @@ const NotePage = ({ storage }: NotePageProps) => {
       }
       right={
         currentNote == null ? (
-          <StyledNoteDetailNoNote>
-            <Image src={'/app/static/logo_index.svg'} />
-            <h3>{t('note.createkeymessage1')}</h3>
-            {/* Might need to be changed if custom keybinds is implemented */}
-            <section>
-              <div>
-                {/* 'note.createKey' differs in locales: N/Enter */}
-                <h2>
-                  <span>Ctrl</span> + <span>{t('note.createKey')}</span>
-                </h2>
-                <h4>{t('note.createKeyWinLin')}</h4>
-              </div>
-              <h3>{t('note.createKeyOr')}</h3>
-              <div>
-                <h2>
-                  <span>⌘</span> + <span>{t('note.createKey')}</span>
-                </h2>
-                <h4>{t('note.createKeyMac')}</h4>
-              </div>
-            </section>
-          </StyledNoteDetailNoNote>
+          <IdleNoteDetail />
         ) : (
           <NoteDetail
             storage={storage}