From d35753c4aebaf1a04145e90bb0ef8979583a340a Mon Sep 17 00:00:00 2001
From: Tuur Lievens <tuur.lievens@hotmail.com>
Date: Sat, 23 Oct 2021 21:32:34 +0200
Subject: [PATCH 1/2] Add show note in tree button

---
 components/note-nav.tsx | 37 ++++++++++++++++------
 libs/web/state/tree.ts  | 68 +++++++++++++++++++++++++++++++++--------
 2 files changed, 83 insertions(+), 22 deletions(-)

diff --git a/components/note-nav.tsx b/components/note-nav.tsx
index 7ea41753a..bfcd884ef 100644
--- a/components/note-nav.tsx
+++ b/components/note-nav.tsx
@@ -12,6 +12,7 @@ import PortalState from 'libs/web/state/portal'
 import { NOTE_SHARED } from 'libs/shared/meta'
 import useI18n from 'libs/web/hooks/use-i18n'
 import NavButtonGroup from './nav-button-group'
+import { EyeIcon } from '@heroicons/react/outline'
 
 const MenuButton = () => {
   const { sidebar } = UIState.useContainer()
@@ -37,7 +38,7 @@ const NoteNav = () => {
   const { t } = useI18n()
   const { note, loading } = NoteState.useContainer()
   const { ua } = UIState.useContainer()
-  const { getPaths } = NoteTreeState.useContainer()
+  const { getPaths, showItem, checkItemIsShown } = NoteTreeState.useContainer()
   const { share, menu } = PortalState.useContainer()
 
   const handleClickShare = useCallback(
@@ -58,6 +59,11 @@ const NoteNav = () => {
     [note, menu]
   )
 
+  const handleClickOpenInTree = useCallback(() => {
+    if (!note) return
+    showItem(note);
+  }, [note, showItem])
+
   return (
     <nav
       className={classNames(
@@ -92,14 +98,27 @@ const NoteNav = () => {
                   </div>
                 </Tooltip>
               ))}
-            <Tooltip title={note.title}>
-              <span
-                className="title block text-gray-600 text-sm truncate select-none"
-                aria-current="page"
-              >
-                {note.title}
-              </span>
-            </Tooltip>
+            <span>
+              <Tooltip title={note.title}>
+                <span
+                  className="title inline-block text-gray-600 text-sm truncate select-none align-middle"
+                  aria-current="page"
+                >
+                  {note.title}
+                </span>
+              </Tooltip>
+              {!checkItemIsShown(note) && (
+                <Tooltip title={t('Show note in tree')}>
+                  <span>
+                    <EyeIcon
+                      width="20"
+                      className="inline-block cursor-pointer ml-1"
+                      onClick={handleClickOpenInTree}
+                    />
+                  </span>
+                </Tooltip>
+              )}
+            </span>
           </Breadcrumbs>
         )}
         <style jsx>
diff --git a/libs/web/state/tree.ts b/libs/web/state/tree.ts
index 48810ee18..49e4910b4 100644
--- a/libs/web/state/tree.ts
+++ b/libs/web/state/tree.ts
@@ -1,4 +1,4 @@
-import { cloneDeep, forEach, isEmpty, map } from 'lodash'
+import { cloneDeep, forEach, isEmpty, map, reduce } from 'lodash'
 import { genId } from 'libs/shared/id'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createContainer } from 'unstated-next'
@@ -19,6 +19,23 @@ import { uiCache } from '../cache'
 
 const TREE_CACHE_KEY = 'tree'
 
+const findParentTreeItems = (tree: TreeModel, note: NoteModel) => {
+  const parents = [] as TreeItemModel[]
+
+  let tempNote = note
+  while (tempNote.pid && tempNote.pid !== ROOT_ID) {
+    const curData = tree.items[tempNote.pid]
+    if (curData?.data) {
+      tempNote = curData.data
+      parents.push(curData)
+    } else {
+      break
+    }
+  }
+
+  return parents
+}
+
 const useNoteTree = (initData: TreeModel = DEFAULT_TREE) => {
   const { mutate, loading, fetch: fetchTree } = useTreeAPI()
   const [tree, setTree] = useState<TreeModel>(initData)
@@ -146,20 +163,43 @@ const useNoteTree = (initData: TreeModel = DEFAULT_TREE) => {
 
   const getPaths = useCallback((note: NoteModel) => {
     const tree = treeRef.current
-    const paths = [] as NoteModel[]
-
-    while (note.pid && note.pid !== ROOT_ID) {
-      const curData = tree.items[note.pid]?.data
-      if (curData) {
-        note = curData
-        paths.push(note)
-      } else {
-        break
+    return findParentTreeItems(tree, note).map((listItem) => listItem.data!)
+  }, [])
+
+  const showItem = useCallback(
+    async (note: NoteModel) => {
+      const tree = treeRef.current
+      const parents = findParentTreeItems(tree, note)
+
+      const newTree = reduce(
+        parents,
+        (tempTree, item) =>
+          TreeActions.mutateItem(tempTree, item.id, { isExpanded: true }),
+        tree
+      )
+      setTree(newTree)
+
+      for (const parent of parents) {
+        await mutate({
+          action: 'mutate',
+          data: {
+            isExpanded: true,
+            id: parent.id,
+          },
+        })
       }
-    }
+    },
+    [mutate]
+  )
 
-    return paths
-  }, [])
+  const checkItemIsShown = useCallback(
+    (note: NoteModel) => {
+      const tree = treeRef.current
+      const parents = findParentTreeItems(tree, note)
+      return reduce(parents, (value, item) => value && !!item.isExpanded, true)
+    },
+    [mutate]
+  )
 
   const pinnedTree = useMemo(() => {
     const items = cloneDeep(tree.items)
@@ -197,6 +237,8 @@ const useNoteTree = (initData: TreeModel = DEFAULT_TREE) => {
     restoreItem,
     deleteItem,
     getPaths,
+    showItem,
+    checkItemIsShown,
     loading,
     initLoaded,
   }

From a0e457f9ae9d0577ee1e0c91710a9d108f363d02 Mon Sep 17 00:00:00 2001
From: Tuur Lievens <tuur.lievens@hotmail.com>
Date: Sun, 24 Oct 2021 14:42:35 +0200
Subject: [PATCH 2/2] Add collapse all button

---
 components/icon-button.tsx          |  2 ++
 components/sidebar/sidebar-list.tsx | 10 ++++++-
 libs/web/state/tree.ts              | 41 ++++++++++++++++++-----------
 3 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/components/icon-button.tsx b/components/icon-button.tsx
index a42d57b5b..48ebfc48a 100644
--- a/components/icon-button.tsx
+++ b/components/icon-button.tsx
@@ -18,6 +18,7 @@ import {
   ExternalLinkIcon,
   BookmarkAltIcon,
   PuzzleIcon,
+  ChevronDoubleUpIcon
 } from '@heroicons/react/outline'
 
 export const ICONS = {
@@ -38,6 +39,7 @@ export const ICONS = {
   ExternalLink: ExternalLinkIcon,
   BookmarkAlt: BookmarkAltIcon,
   Puzzle: PuzzleIcon,
+  ChevronDoubleUp: ChevronDoubleUpIcon,
 }
 
 const IconButton = forwardRef<
diff --git a/components/sidebar/sidebar-list.tsx b/components/sidebar/sidebar-list.tsx
index d3f1c11d7..996874c96 100644
--- a/components/sidebar/sidebar-list.tsx
+++ b/components/sidebar/sidebar-list.tsx
@@ -6,7 +6,7 @@ import router from 'next/router'
 import HotkeyTooltip from 'components/hotkey-tooltip'
 import IconButton from 'components/icon-button'
 import useI18n from 'libs/web/hooks/use-i18n'
-import { CircularProgress } from '@material-ui/core'
+import { CircularProgress, Tooltip } from '@material-ui/core'
 import { Favorites } from './favorites'
 
 const SideBarList = () => {
@@ -16,6 +16,7 @@ const SideBarList = () => {
     moveItem,
     mutateItem,
     initLoaded,
+    collapseAllItems
   } = NoteTreeState.useContainer()
 
   const onExpand = useCallback(
@@ -66,6 +67,13 @@ const SideBarList = () => {
             <CircularProgress className="ml-4" size="14px" color="inherit" />
           )}
         </div>
+        <Tooltip title={t('Collapse all pages')}>
+          <IconButton
+            icon="ChevronDoubleUp"
+            onClick={collapseAllItems}
+            className="text-gray-700 w-5 h-5 md:w-5 md:h-5"
+          ></IconButton>
+        </Tooltip>
         <HotkeyTooltip
           text={t('Create page')}
           commandKey
diff --git a/libs/web/state/tree.ts b/libs/web/state/tree.ts
index 49e4910b4..472b93863 100644
--- a/libs/web/state/tree.ts
+++ b/libs/web/state/tree.ts
@@ -166,25 +166,22 @@ const useNoteTree = (initData: TreeModel = DEFAULT_TREE) => {
     return findParentTreeItems(tree, note).map((listItem) => listItem.data!)
   }, [])
 
-  const showItem = useCallback(
-    async (note: NoteModel) => {
-      const tree = treeRef.current
-      const parents = findParentTreeItems(tree, note)
-
+  const setItemsExpandState = useCallback(
+    async (items: TreeItemModel[], newValue: boolean) => {
       const newTree = reduce(
-        parents,
+        items,
         (tempTree, item) =>
-          TreeActions.mutateItem(tempTree, item.id, { isExpanded: true }),
-        tree
+          TreeActions.mutateItem(tempTree, item.id, { isExpanded: newValue }),
+        treeRef.current
       )
       setTree(newTree)
 
-      for (const parent of parents) {
+      for (const item of items) {
         await mutate({
           action: 'mutate',
           data: {
-            isExpanded: true,
-            id: parent.id,
+            isExpanded: newValue,
+            id: item.id,
           },
         })
       }
@@ -192,15 +189,26 @@ const useNoteTree = (initData: TreeModel = DEFAULT_TREE) => {
     [mutate]
   )
 
-  const checkItemIsShown = useCallback(
+  const showItem = useCallback(
     (note: NoteModel) => {
-      const tree = treeRef.current
-      const parents = findParentTreeItems(tree, note)
-      return reduce(parents, (value, item) => value && !!item.isExpanded, true)
+      const parents = findParentTreeItems(treeRef.current, note)
+      setItemsExpandState(parents, true)
     },
-    [mutate]
+    [setItemsExpandState]
   )
 
+  const checkItemIsShown = useCallback((note: NoteModel) => {
+    const parents = findParentTreeItems(treeRef.current, note)
+    return reduce(parents, (value, item) => value && !!item.isExpanded, true)
+  }, [])
+
+  const collapseAllItems = useCallback(() => {
+    const expandedItems = TreeActions.flattenTree(treeRef.current).filter(
+      (item) => item.isExpanded
+    )
+    setItemsExpandState(expandedItems, false)
+  }, [setItemsExpandState])
+
   const pinnedTree = useMemo(() => {
     const items = cloneDeep(tree.items)
     const pinnedIds: string[] = []
@@ -239,6 +247,7 @@ const useNoteTree = (initData: TreeModel = DEFAULT_TREE) => {
     getPaths,
     showItem,
     checkItemIsShown,
+    collapseAllItems,
     loading,
     initLoaded,
   }