feat: record expansion state

package.json

@@ -1,6 +1,6 @@
 {
   "name": "logseq-plugin-favorite-tree",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "main": "dist/index.html",
   "logseq": {
     "id": "_sethyuan-logseq-favorite-tree",

src/comps/FavList.tsx

@@ -1,23 +1,38 @@
 import { produce } from "immer"
 import { createPortal } from "preact/compat"
-import { useEffect, useState } from "preact/hooks"
+import { useEffect, useRef, useState } from "preact/hooks"
 import { cls } from "reactutils"
+import {
+  readExpansionState,
+  readRootExpansionState,
+  writeExpansionState,
+  writeRootExpansionState,
+} from "../libs/storage"
 import { queryForSubItems } from "../libs/utils"
 import FavArrow from "./FavArrow"
 
 export default function FavList({
   items,
   arrowContainer,
+  name,
 }: {
   items: any[]
   arrowContainer: HTMLElement
+  name: string
 }) {
   const [expanded, setExpanded] = useState(false)
 
+  useEffect(() => {
+    ;(async () => {
+      setExpanded(await readRootExpansionState(name))
+    })()
+  }, [name])
+
   function toggleList(e: Event) {
     e.preventDefault()
     e.stopPropagation()
     setExpanded((v) => !v)
+    writeRootExpansionState(name, !expanded)
   }
 
   return (
@@ -26,13 +41,22 @@ export default function FavList({
         <FavArrow expanded={expanded} onToggle={toggleList} />,
         arrowContainer,
       )}
-      <SubList items={items} shown={expanded} />
+      <SubList items={items} shown={expanded} storageKey={name} />
     </>
   )
 }
 
-function SubList({ items, shown }: { items: any[]; shown: boolean }) {
+function SubList({
+  items,
+  shown,
+  storageKey,
+}: {
+  items: any[]
+  shown: boolean
+  storageKey: string
+}) {
   const [childrenData, setChildrenData] = useState<any>(null)
+  const expansionState = useRef<Record<string, boolean>>()
 
   useEffect(() => {
     setChildrenData(null)
@@ -41,19 +65,23 @@ function SubList({ items, shown }: { items: any[]; shown: boolean }) {
   useEffect(() => {
     if (shown && childrenData == null) {
       ;(async () => {
+        expansionState.current = await readExpansionState(storageKey)
         const data: any = {}
         for (const item of items) {
           if (item.filters) {
             if (item.subitems) {
               data[item.displayName] = {
-                expanded: false,
+                expanded: !!expansionState.current[item.displayName],
                 items: Object.values(item.subitems),
               }
             }
           } else {
             const subitems = await queryForSubItems(item["original-name"])
             if (subitems?.length > 0) {
-              data[item.name] = { expanded: false, items: subitems }
+              data[item.name] = {
+                expanded: !!expansionState.current[item.name],
+                items: subitems,
+              }
             }
           }
         }
@@ -106,6 +134,11 @@ function SubList({ items, shown }: { items: any[]; shown: boolean }) {
       draft[itemName].expanded = !draft[itemName].expanded
     })
     setChildrenData(newChildrenData)
+
+    if (expansionState.current) {
+      expansionState.current[itemName] = !childrenData[itemName].expanded
+      writeExpansionState(storageKey, expansionState.current)
+    }
   }
 
   function preventSideEffect(e: Event) {
@@ -154,7 +187,11 @@ function SubList({ items, shown }: { items: any[]; shown: boolean }) {
               )}
             </div>
             {data?.items?.length > 0 && (
-              <SubList items={data.items} shown={data.expanded} />
+              <SubList
+                items={data.items}
+                shown={data.expanded}
+                storageKey={`${storageKey}-${displayName}`}
+              />
             )}
           </div>
         )

src/libs/storage.ts

@@ -0,0 +1,31 @@
+const storage = logseq.Assets.makeSandboxStorage()
+
+export async function readExpansionState(key: string) {
+  key = `expansion-${key}.json`
+  const str = (await storage.hasItem(key))
+    ? (await storage.getItem(key))!
+    : "{}"
+  return JSON.parse(str) as Record<string, boolean>
+}
+
+export async function readRootExpansionState(key: string) {
+  key = `expansion-_${key}.json`
+  if (await storage.hasItem(key)) {
+    return JSON.parse((await storage.getItem(key))!) as boolean
+  } else {
+    return false
+  }
+}
+
+export async function writeRootExpansionState(key: string, value: boolean) {
+  key = `expansion-_${key}.json`
+  await storage.setItem(key, `${value}`)
+}
+
+export async function writeExpansionState(
+  key: string,
+  value: Record<string, boolean>,
+) {
+  key = `expansion-${key}.json`
+  await storage.setItem(key, JSON.stringify(value))
+}

src/plugin.tsx

@@ -214,13 +214,21 @@ async function injectList(el: HTMLElement, items: any[]) {
   }
 
   setTimeout(() => {
-    renderList(key, items, arrowContainer)
+    renderList(key, items, arrowContainer, el.dataset.ref!)
   }, 0)
 }
 
-function renderList(key: string, items: any[], arrowContainer: HTMLElement) {
+function renderList(
+  key: string,
+  items: any[],
+  arrowContainer: HTMLElement,
+  name: string,
+) {
   const el = parent.document.getElementById(key)!
-  render(<FavList items={items} arrowContainer={arrowContainer} />, el)
+  render(
+    <FavList items={items} arrowContainer={arrowContainer} name={name} />,
+    el,
+  )
 }
 
 async function onTransaction({ blocks, txData, txMeta }: any) {