feat(collections/list): checkboxes for expand depth

apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx

@@ -116,20 +116,13 @@ function SplitButtonPropertyView({ note, property }: { note: FNote, property: Sp
         triggerCommand: parentComponent.triggerCommand.bind(parentComponent)
     };
 
+    const ItemsComponent = property.items;
     return <SplitButton
         text={property.label}
         icon={property.icon}
         onClick={() => clickContext && property.onClick(clickContext)}
     >
-        {clickContext && property.items.map(subproperty => {
+        {parentComponent && <ItemsComponent note={note} parentComponent={parentComponent} />}
-            if ("type" in subproperty && subproperty) {
-                return <FormDropdownDivider />
-            }
-
-            return (
-                <FormListItem onClick={() => clickContext && subproperty.onClick(clickContext)}>{subproperty.label}</FormListItem>
-            );
-        })}
     </SplitButton>
 }
 

apps/client/src/widgets/ribbon/collection-properties-config.tsx

@@ -6,6 +6,10 @@ import { DEFAULT_MAP_LAYER_NAME, MAP_LAYERS, type MapLayer } from "../collection
 import { ViewTypeOptions } from "../collections/interface";
 import { FilterLabelsByType } from "@triliumnext/commons";
 import { DEFAULT_THEME, getPresentationThemes } from "../collections/presentation/themes";
+import { VNode } from "preact";
+import { useNoteLabel } from "../react/hooks";
+import { FormDropdownDivider, FormListItem } from "../react/FormList";
+import Component from "../../components/component";
 
 interface BookConfig {
     properties: BookProperty[];
@@ -27,12 +31,7 @@ export interface ButtonProperty {
 
 export interface SplitButtonProperty extends Omit<ButtonProperty, "type"> {
     type: "split-button";
-    items: ({
+    items({ note, parentComponent }: { note: FNote, parentComponent: Component }): VNode;
-        label: string;
-        onClick(context: BookContext): void;
-    } | {
-        type: "separator"
-    })[];
 }
 
 export interface NumberProperty {
@@ -100,34 +99,7 @@ export const bookPropertiesConfig: Record<ViewTypeOptions, BookConfig> = {
                 type: "split-button",
                 icon: "bx bx-move-vertical",
                 onClick: buildExpandListHandler(1),
-                items: [
+                items: ListExpandDepth
-                    {
-                        label: "Expand 1 level",
-                        onClick: buildExpandListHandler(1)
-                    },
-                    { type: "separator" },
-                    {
-                        label: "Expand 2 levels",
-                        onClick: buildExpandListHandler(2),
-                    },
-                    {
-                        label: "Expand 3 levels",
-                        onClick: buildExpandListHandler(3),
-                    },
-                    {
-                        label: "Expand 4 levels",
-                        onClick: buildExpandListHandler(4),
-                    },
-                    {
-                        label: "Expand 5 levels",
-                        onClick: buildExpandListHandler(5),
-                    },
-                    { type: "separator" },
-                    {
-                        label: "Expand all children",
-                        onClick: buildExpandListHandler("all"),
-                    }
-                ]
             }
         ]
     },
@@ -217,6 +189,33 @@ function buildMapLayer([ id, layer ]: [ string, MapLayer ]): ComboBoxItem {
     };
 }
 
+function ListExpandDepth(context: { note: FNote, parentComponent: Component }) {
+    const [ currentDepth ] = useNoteLabel(context.note, "expanded");
+
+    return (
+        <>
+            <ListExpandDepthButton label="Expand 1 level" depth={1} {...context} checked={currentDepth === ""} />
+            <FormDropdownDivider />
+            {Array.from({ length: 4 }, (_, i) => i + 2).map(depth => [
+                <ListExpandDepthButton label={`Expand ${depth} levels`} depth={depth} {...context} checked={!!currentDepth && parseInt(currentDepth, 10) === depth} />
+            ])}
+            <FormDropdownDivider />
+            <ListExpandDepthButton label="Expand all levels" depth="all" checked={currentDepth === "all"} {...context} />
+        </>
+    )
+}
+
+function ListExpandDepthButton({ label, depth, note, parentComponent, checked }: { label: string, depth: number | "all", note: FNote, parentComponent: Component, checked?: boolean }) {
+    const handler = buildExpandListHandler(depth);
+
+    return (
+        <FormListItem
+            onClick={() => handler({ note, triggerCommand: parentComponent.triggerCommand.bind(parentComponent) })}
+            checked={checked}
+        >{label}</FormListItem>
+    );
+}
+
 function buildExpandListHandler(depth: number | "all") {
     return async ({ note, triggerCommand }: BookContext) => {
         const { noteId } = note;