Feature/collapse expand

src/dashboard/App.tsx

@@ -1,53 +1,55 @@
-import {renderLabel, Session} from 'alinea/core'
+import {DashboardProvider, useDashboard} from './hook/UseDashboard.js'
+import {DraftsProvider, DraftsStatus, useDrafts} from './hook/UseDrafts.js'
 import {
   ErrorBoundary,
   FavIcon,
   Loader,
   PreferencesProvider,
   Statusbar,
-  useObservable,
-  Viewport
+  Viewport,
+  useObservable
 } from 'alinea/ui'
-import {IcRoundCheck} from 'alinea/ui/icons/IcRoundCheck'
-import {IcRoundEdit} from 'alinea/ui/icons/IcRoundEdit'
-import {IcRoundInsertDriveFile} from 'alinea/ui/icons/IcRoundInsertDriveFile'
-import {IcRoundRotateLeft} from 'alinea/ui/icons/IcRoundRotateLeft'
-import {MdiSourceBranch} from 'alinea/ui/icons/MdiSourceBranch'
+import {Fragment, Suspense, useMemo, useState} from 'react'
+import {
+  QueryClient,
+  QueryClientProvider as ReactQueryClientProvider
+} from 'react-query'
 import {
   Routes,
   useLocation,
   useMatch,
   useParams
 } from 'alinea/ui/util/HashRouter'
-import {Fragment, Suspense, useMemo, useState} from 'react'
-import {
-  QueryClient,
-  QueryClientProvider as ReactQueryClientProvider
-} from 'react-query'
-import {DashboardOptions} from './Dashboard.js'
-import {CurrentDraftProvider} from './hook/UseCurrentDraft.js'
-import {DashboardProvider, useDashboard} from './hook/UseDashboard.js'
-import {useDraft} from './hook/UseDraft.js'
-import {DraftsProvider, DraftsStatus, useDrafts} from './hook/UseDrafts.js'
-import {useDraftsList} from './hook/UseDraftsList.js'
-import {useEntryLocation} from './hook/UseEntryLocation.js'
-import {EntrySummaryProvider} from './hook/UseEntrySummary.js'
-import {useLocale} from './hook/UseLocale.js'
-import {useNav} from './hook/UseNav.js'
-import {useRoot} from './hook/UseRoot.js'
-import {SessionProvider} from './hook/UseSession.js'
-import {useWorkspace} from './hook/UseWorkspace.js'
-import {Head} from './util/Head.js'
+import {Session, renderLabel} from 'alinea/core'
+
 import {ContentTree} from './view/ContentTree.js'
+import {CurrentDraftProvider} from './hook/UseCurrentDraft.js'
+import {DashboardOptions} from './Dashboard.js'
 import {DraftsOverview} from './view/DraftsOverview.js'
 import {EditMode} from './view/entry/EditMode.js'
+import {EntryEdit} from './view/EntryEdit.js'
+import {EntrySummaryProvider} from './hook/UseEntrySummary.js'
+import {Head} from './util/Head.js'
+import {IcRoundCheck} from 'alinea/ui/icons/IcRoundCheck'
+import {IcRoundEdit} from 'alinea/ui/icons/IcRoundEdit'
+import {IcRoundInsertDriveFile} from 'alinea/ui/icons/IcRoundInsertDriveFile'
+import {IcRoundRotateLeft} from 'alinea/ui/icons/IcRoundRotateLeft'
+import {MdiSourceBranch} from 'alinea/ui/icons/MdiSourceBranch'
 import {NewEntry} from './view/entry/NewEntry.js'
 import {RootHeader} from './view/entry/RootHeader.js'
-import {EntryEdit} from './view/EntryEdit.js'
 import {RootOverview} from './view/RootOverview.js'
 import {SearchBox} from './view/SearchBox.js'
+import {SessionProvider} from './hook/UseSession.js'
 import {Sidebar} from './view/Sidebar.js'
 import {Toolbar} from './view/Toolbar.js'
+import {useContentTree} from './hook/UseContentTree.js'
+import {useDraft} from './hook/UseDraft.js'
+import {useDraftsList} from './hook/UseDraftsList.js'
+import {useEntryLocation} from './hook/UseEntryLocation.js'
+import {useLocale} from './hook/UseLocale.js'
+import {useNav} from './hook/UseNav.js'
+import {useRoot} from './hook/UseRoot.js'
+import {useWorkspace} from './hook/UseWorkspace.js'
 
 const Router = {
   Entry() {
@@ -204,16 +206,33 @@ function EntryRoute({id}: EntryRouteProps) {
     .concat(draft?.alinea.parents)
     .concat(draft?.id)
     .filter(Boolean) as Array<string>
+  const {
+    isTreeOpen,
+    showToggle,
+    toggleTree,
+    locale: currentLocale,
+    ...contentTree
+  } = useContentTree({
+    locale,
+    workspace: workspace.name,
+    root: root.name,
+    select
+  })
   return (
     <CurrentDraftProvider value={draft}>
       <Sidebar.Tree>
         <SearchBox />
-        <RootHeader />
+        <RootHeader
+          showToggle={showToggle}
+          toggleTree={() => toggleTree(isTreeOpen)}
+          isTreeOpen={isTreeOpen}
+        />
         <ContentTree
           key={workspace.name}
           locale={locale}
           select={select}
           redirectToRoot={!id}
+          {...contentTree}
         />
       </Sidebar.Tree>
       {search === '?new' && (

src/dashboard/hook/UseContentTree.ts

@@ -1,6 +1,7 @@
 import {Entry, EntryMeta, Label, Outcome} from 'alinea/core'
 import {Cursor, Functions} from 'alinea/store'
 import {useCallback, useEffect, useMemo, useState} from 'react'
+
 import {useQuery} from 'react-query'
 import {useRoot} from '../hook/UseRoot.js'
 import {useSession} from '../hook/UseSession.js'
@@ -25,10 +26,9 @@ export interface ContentTreeEntry {
   alinea: EntryMeta
 }
 
-function query({workspace, root, locale, open, visible}: QueryParams) {
+function query({workspace, root, locale, visible}: QueryParams) {
   const Parent = Entry.as('Parent')
   const id = locale ? Entry.i18n.id : Entry.id
-  const parent = locale ? Entry.i18n.parent : Entry.parent
   const summary = {
     id: Entry.id,
     type: Entry.type,
@@ -41,24 +41,23 @@ function query({workspace, root, locale, open, visible}: QueryParams) {
       parents: Entry.parents
     },
     childrenCount: Parent.where(
-      (locale ? Parent.alinea.i18n.parent : Parent.alinea.parent).is(Entry.id)
+      (locale ? Parent.alinea.i18n.parent : Parent.alinea.parent).is(id)
     )
       .select(Functions.count())
       .first()
   }
-  let openEntries = parent.isIn(open).or(id.isIn(open)).or(parent.isNull())
-  let condition = openEntries
+  let entries = Entry.take(undefined)
   if (locale) {
-    condition = condition.and(Entry.i18n.locale.is(locale))
+    entries = entries.where(Entry.i18n.locale.is(locale))
   }
-  let query = Entry.where(condition)
+  let query = entries
     .where(Entry.workspace.is(workspace))
     .where(Entry.root.is(root))
     .where(Entry.type.isIn(visible))
     .select(summary)
   if (locale) {
-    const translatedCondition = openEntries
-      .and(Entry.i18n.locale.isNot(locale))
+    const translatedCondition = Entry.i18n.locale
+      .isNot(locale)
       .and(Entry.i18n.id.isNotIn(query.select(Entry.i18n.id)))
     query = query.union(
       Entry.where(translatedCondition)
@@ -91,10 +90,7 @@ export function useContentTree({
   const [open, setOpen] = useState(() => {
     const stored = window?.localStorage?.getItem(persistenceId)
     const opened = stored && JSON.parse(stored)
-    return new Set<string>([
-      ...select,
-      ...(Array.isArray(opened) ? opened : [])
-    ])
+    return new Set<string>([...(Array.isArray(opened) ? opened : [])])
   })
   const isOpen = useCallback((id: string) => open.has(id), [open])
   const toggleOpen = useCallback(
@@ -151,9 +147,38 @@ export function useContentTree({
       true
     )
   })
+  const parentEntryOpen = (entry: ContentTreeEntry) =>
+    entry.childrenCount > 0 && isOpen(entry.id)
+  const isTreeOpen = entries.some(parentEntryOpen)
+  const parentEntry = (entry: ContentTreeEntry) => entry.childrenCount > 0
+  const showToggle = entries.some(parentEntry)
+  const toggleTree = useCallback(
+    (open: boolean) => {
+      if (open) {
+        window?.localStorage?.setItem(persistenceId, JSON.stringify([]))
+        setOpen(new Set([]))
+      }
+      if (!open) {
+        const entryIds = results.map(entry => entry.id)
+        window?.localStorage?.setItem(persistenceId, JSON.stringify(entryIds))
+        setOpen(new Set(entryIds))
+      }
+    },
+    [setOpen]
+  )
 
   useEffect(() => {
     setOpen(current => new Set([...current, ...select]))
   }, [select.join('.')])
-  return {locale, entries, isOpen, toggleOpen, refetch, index}
+  return {
+    locale,
+    entries,
+    isOpen,
+    toggleOpen,
+    refetch,
+    index,
+    isTreeOpen,
+    showToggle,
+    toggleTree
+  }
 }

src/dashboard/view/ContentTree.tsx

@@ -16,20 +16,20 @@ import {
   sortableKeyboardCoordinates,
   verticalListSortingStrategy
 } from '@dnd-kit/sortable'
+import {fromModule, usePreferences} from 'alinea/ui'
+import {useMemo, useRef, useState} from 'react'
+import {TreeNode, TreeNodeSortable} from './tree/TreeNode.js'
+
 import useSize from '@react-hook/size'
 import {Entry} from 'alinea/core/Entry'
 import {generateKeyBetween} from 'alinea/core/util/FractionalIndexing'
-import {fromModule, usePreferences} from 'alinea/ui'
-import {useMemo, useRef, useState} from 'react'
 import VirtualList from 'react-tiny-virtual-list'
-import {ContentTreeEntry, useContentTree} from '../hook/UseContentTree.js'
+import {ContentTreeEntry} from '../hook/UseContentTree.js'
 import {useDashboard} from '../hook/UseDashboard.js'
 import {useDrafts} from '../hook/UseDrafts.js'
 import {useNav} from '../hook/UseNav.js'
 import {useRoot} from '../hook/UseRoot.js'
-import {useWorkspace} from '../hook/UseWorkspace.js'
 import css from './ContentTree.module.scss'
-import {TreeNode, TreeNodeSortable} from './tree/TreeNode.js'
 
 const styles = fromModule(css)
 
@@ -83,29 +83,25 @@ export type ContentTreeProps = {
   locale: string | undefined
   select?: Array<string>
   redirectToRoot?: boolean
+  entries: ContentTreeEntry[]
+  index: Map<string, ContentTreeEntry>
+  toggleOpen: (id: string) => void
+  isOpen: (id: string) => boolean
+  refetch: () => void
 }
 
 export function ContentTree({
-  locale: currentLocale,
+  locale,
   select = [],
-  redirectToRoot
+  redirectToRoot,
+  entries: treeEntries,
+  index,
+  toggleOpen,
+  isOpen,
+  refetch
 }: ContentTreeProps) {
   const {schema} = useDashboard().config
-  const {name: workspace} = useWorkspace()
   const root = useRoot()
-  const {
-    locale,
-    entries: treeEntries,
-    isOpen,
-    toggleOpen,
-    refetch,
-    index
-  } = useContentTree({
-    locale: currentLocale,
-    workspace,
-    root: root.name,
-    select
-  })
   const drafts = useDrafts()
   const [moves, setMoves] = useState<Array<Move>>([])
   const entries = sortByIndex(index, applyMoves(treeEntries, moves))

src/dashboard/view/entry/RootHeader.tsx

@@ -1,18 +1,38 @@
-import {Listbox} from '@headlessui/react'
-import {Create, fromModule, HStack, Icon, TextLabel} from 'alinea/ui'
-import {IcRoundUnfoldMore} from 'alinea/ui/icons/IcRoundUnfoldMore'
+import {
+  Create,
+  HStack,
+  Icon,
+  IconButton,
+  TextLabel,
+  fromModule
+} from 'alinea/ui'
 import {link, useNavigate} from 'alinea/ui/util/HashRouter'
-import {useState} from 'react'
+
+import IcRoundKeyboardArrowDown from 'alinea/ui/icons/IcRoundKeyboardArrowDown'
+import IcRoundKeyboardArrowUp from 'alinea/ui/icons/IcRoundKeyboardArrowUp'
+import {IcRoundUnfoldMore} from 'alinea/ui/icons/IcRoundUnfoldMore'
+import {Listbox} from '@headlessui/react'
+import css from './RootHeader.module.scss'
 import {useCurrentDraft} from '../../hook/UseCurrentDraft.js'
 import {useLocale} from '../../hook/UseLocale.js'
 import {useNav} from '../../hook/UseNav.js'
 import {useRoot} from '../../hook/UseRoot.js'
+import {useState} from 'react'
 import {useWorkspace} from '../../hook/UseWorkspace.js'
-import css from './RootHeader.module.scss'
 
 const styles = fromModule(css)
 
-export function RootHeader() {
+export type RootHeaderProps = {
+  showToggle: boolean
+  toggleTree: () => void
+  isTreeOpen: boolean
+}
+
+export function RootHeader({
+  showToggle,
+  toggleTree,
+  isTreeOpen
+}: RootHeaderProps) {
   const nav = useNav()
   const root = useRoot()
   const {name: workspace} = useWorkspace()
@@ -28,6 +48,15 @@ export function RootHeader() {
         </a>
         {root.i18n && <Langswitch />}
         <Create.Link href={nav.create({workspace, root: root.name})} />
+        {showToggle && (
+          <IconButton
+            icon={
+              isTreeOpen ? IcRoundKeyboardArrowUp : IcRoundKeyboardArrowDown
+            }
+            onClick={toggleTree}
+            size={12}
+          />
+        )}
       </div>
     </div>
   )

src/ui/IconButton.module.scss

@@ -24,7 +24,6 @@
   &:focus {
     outline: none;
     color: inherit;
-    background: var(--alinea-background);
     box-shadow: 0 0 0 2px var(--alinea-fields-focus);
   }