From e673de297ad2ce3a1c85880f67880e2cad3df636 Mon Sep 17 00:00:00 2001
From: Oliver Sauter <oli@worldbrain.io>
Date: Sat, 11 May 2024 10:33:08 +0200
Subject: [PATCH] add button to close sidebar in dashboard

---
 external/@worldbrain/memex-common                 |  2 +-
 .../header/search-bar/index.tsx                   |  2 ++
 src/dashboard-refactor/index.tsx                  | 15 ++++++++++++++-
 src/overview/help-btn/components/help-btn.tsx     |  8 ++++++--
 4 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/external/@worldbrain/memex-common b/external/@worldbrain/memex-common
index 141f5e8ed9..b7ece4a97c 160000
--- a/external/@worldbrain/memex-common
+++ b/external/@worldbrain/memex-common
@@ -1 +1 @@
-Subproject commit 141f5e8ed940e9f0f55999b47fbc2b25561d9429
+Subproject commit b7ece4a97c8c52bb50e6095f352137183a3517cc
diff --git a/src/dashboard-refactor/header/search-bar/index.tsx b/src/dashboard-refactor/header/search-bar/index.tsx
index 0b2ab8eb0b..349dcb181f 100644
--- a/src/dashboard-refactor/header/search-bar/index.tsx
+++ b/src/dashboard-refactor/header/search-bar/index.tsx
@@ -149,6 +149,8 @@ export default class SearchBar extends PureComponent<SearchBarProps, State> {
                     <TutorialBox
                         tutorialId="savePages"
                         getRootElement={this.props.getRootElement}
+                        iconPadding={'6px'}
+                        iconSize="22px"
                     />
                 </ActionButtons>
                 {!this.props.inPageMode && <Placeholder />}
diff --git a/src/dashboard-refactor/index.tsx b/src/dashboard-refactor/index.tsx
index ef36f65796..5fdfba3be2 100644
--- a/src/dashboard-refactor/index.tsx
+++ b/src/dashboard-refactor/index.tsx
@@ -70,6 +70,7 @@ import CopyPaster from 'src/copy-paster/components/CopyPaster'
 import { PageSearchCopyPaster } from 'src/copy-paster'
 import BulkEditCopyPaster from 'src/copy-paster/BulkEditCopyPaster'
 import { OverlayModals } from '@worldbrain/memex-common/lib/common-ui/components/overlay-modals'
+import IconBox from '@worldbrain/memex-common/lib/common-ui/components/icon-box'
 
 export type Props = DashboardDependencies & {
     getRootElement: () => HTMLElement
@@ -526,7 +527,6 @@ export class DashboardContainer extends StatefulUIElement<
                                         },
                                     )
                                 }
-                                label={'Sync Status'}
                                 size={'medium'}
                                 icon={getSyncStatusIcon(syncStatusIconState)}
                                 type={'tertiary'}
@@ -550,6 +550,16 @@ export class DashboardContainer extends StatefulUIElement<
                             filePath={icons.settings}
                         />
                         {this.renderStatusMenu(syncStatusIconState)}
+                        {this.state.isNoteSidebarShown && (
+                            <Icon
+                                icon="arrowRight"
+                                heightAndWidth="22px"
+                                padding="6px"
+                                onClick={() =>
+                                    this.notesSidebarRef.current.hideSidebar()
+                                }
+                            />
+                        )}
                     </>
                 </RightHeader>
             </HeaderContainer>
@@ -1949,6 +1959,7 @@ export class DashboardContainer extends StatefulUIElement<
                                 )
                             }
                             onNotesSidebarClose={() => {
+                                console.log('onnotes close')
                                 this.processEvent('toggleNoteSidebarOff', null)
                                 this.processEvent('setActivePage', {
                                     activeDay: undefined,
@@ -1990,6 +2001,8 @@ export class DashboardContainer extends StatefulUIElement<
                             this.processEvent('toggleTheme', null)
                         }
                         getRootElement={this.props.getRootElement}
+                        padding={'4px'}
+                        iconSize="22px"
                     />
                     {/* {this.state.listsSidebar.draggedListId != null ||
                         (this.state.searchResults.draggedPageId != null && ( */}
diff --git a/src/overview/help-btn/components/help-btn.tsx b/src/overview/help-btn/components/help-btn.tsx
index 3edb5ea782..4442d3af8b 100644
--- a/src/overview/help-btn/components/help-btn.tsx
+++ b/src/overview/help-btn/components/help-btn.tsx
@@ -12,6 +12,8 @@ export interface Props {
     theme: MemexThemeVariant
     toggleTheme: () => void
     getRootElement: () => HTMLElement
+    padding?: string
+    iconSize?: string
 }
 export interface State {
     isOpen: boolean
@@ -194,7 +196,7 @@ export class HelpBtn extends React.PureComponent<Props, State> {
                 {this.renderMenu()}
                 {window.location.href.includes('/overview') && (
                     <Icon
-                        heightAndWidth="24px"
+                        heightAndWidth={this.props.iconSize || '24px'}
                         color={
                             this.props.theme === 'dark'
                                 ? 'greyScale5'
@@ -202,13 +204,15 @@ export class HelpBtn extends React.PureComponent<Props, State> {
                         }
                         filePath={this.props.theme === 'dark' ? 'moon' : 'sun'}
                         onClick={() => this.props.toggleTheme()}
+                        padding={this.props.padding}
                     />
                 )}
                 <Icon
                     filePath={icons.helpIcon}
-                    heightAndWidth={'24px'}
+                    heightAndWidth={this.props.iconSize || '24px'}
                     onClick={this.handleClick}
                     containerRef={this.helpButtonRef}
+                    padding={this.props.padding}
                 />
             </HelpIconPosition>
         )