@dxos/plugin-navtree 0.8.4-main.f9ba587 → 0.8.4-main.fcfe5033a5

package/src/meta.ts

@@ -2,16 +2,19 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type PluginMeta } from '@dxos/app-framework';
+import { type Plugin } from '@dxos/app-framework';
+import { trim } from '@dxos/util';
 
-export const NAVTREE_PLUGIN = 'dxos.org/plugin/navtree';
+export const meta: Plugin.Meta = {
+  id: 'org.dxos.plugin.navtree',
+  name: 'Navtree',
+  description: trim`
+    Hierarchical navigation tree for browsing spaces, folders, and objects.
+    Provides sidebar navigation with collapsible sections and quick access to workspace content.
+  `,
+};
 
 // TODO(wittjosiah): Factor out.
 export const KEY_BINDING = 'KeyBinding';
 // TODO(wittjosiah): Factor out.
-export const COMMANDS_DIALOG = `${NAVTREE_PLUGIN}/CommandsDialog`;
-
-export const meta: PluginMeta = {
-  id: NAVTREE_PLUGIN,
-  name: 'Navtree',
-};
+export const COMMANDS_DIALOG = `${meta.id}.commands-dialog`;

package/src/operations/expose.ts

@@ -0,0 +1,42 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import * as Option from 'effect/Option';
+
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
+import { log } from '@dxos/log';
+import { Operation } from '@dxos/operation';
+import { Graph } from '@dxos/plugin-graph';
+import { expandAttendableId } from '@dxos/react-ui-attention';
+
+import { NavTreeCapabilities } from '../types';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.Expose> = LayoutOperation.Expose.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* ({ subject }) {
+      const { graph } = yield* Capability.get(AppCapabilities.AppGraph);
+      const { getItem, setItem } = yield* Capability.get(NavTreeCapabilities.State);
+
+      const prefixes = expandAttendableId(subject);
+
+      for (const qualifiedId of prefixes) {
+        Graph.expand(graph, qualifiedId, 'child');
+
+        const treePath = prefixes.slice(0, prefixes.indexOf(qualifiedId) + 1);
+        const state = getItem(treePath);
+        if (!state.open) {
+          setItem(treePath, 'open', true);
+        }
+      }
+
+      if (Option.isNone(Graph.getNode(graph, subject))) {
+        log('Node not found after expansion', { subject });
+      }
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { OperationHandlerSet } from '@dxos/operation';
+
+export const NavTreeOperationHandlerSet = OperationHandlerSet.lazy(() => import('./expose'));

package/src/testing/app-graph-builder.ts

@@ -2,15 +2,15 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
-import { Option, pipe } from 'effect';
+import { Atom } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
 
-import { type PluginContext } from '@dxos/app-framework';
+import { type BuilderExtensions } from '@dxos/app-graph';
 import { log } from '@dxos/log';
-import { createExtension, ROOT_ID, type BuilderExtensions } from '@dxos/plugin-graph';
-import { faker } from '@dxos/random';
+import { GraphBuilder, Node, NodeMatcher } from '@dxos/plugin-graph';
+import { random } from '@dxos/random';
 
-export const storybookGraphBuilders = (context: PluginContext): BuilderExtensions => {
+export const storybookGraphBuilders = (): BuilderExtensions => {
   const propertiesCache = new Map<string, Record<string, unknown>>();
   const getProperties = (id: string, defaults: Record<string, unknown>) => {
     const cached = propertiesCache.get(id);
@@ -22,249 +22,178 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
     return defaults;
   };
 
-  return [
-    // Create app menu actions.
-    createExtension({
-      id: 'app-menu',
-      actions: (node) =>
-        Rx.make((get) =>
-          pipe(
-            get(node),
-            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
-            Option.map((node) => {
-              return [
-                ...Array.from({ length: 5 }, (_, i) => ({
-                  id: `${node.id}/action-${i}`,
-                  data: () => {
-                    log.info('action', { id: node.id, index: i });
-                  },
-                  properties: {
-                    label: `Action ${i}`,
-                    icon: faker.properties.icon(),
-                    disposition: 'menu',
-                  },
-                })),
-              ];
-            }),
-            Option.getOrElse(() => []),
+  return Effect.runSync(
+    Effect.all([
+      // Create app menu actions.
+      GraphBuilder.createExtension({
+        id: 'app-menu',
+        match: NodeMatcher.whenRoot,
+        actions: () =>
+          Effect.succeed(
+            Array.from({ length: 5 }, (_, i) => ({
+              id: `action-${i}`,
+              data: Effect.fnUntraced(function* () {
+                log.info('action', { id: 'app-menu', index: i });
+              }),
+              properties: {
+                label: `Action ${i}`,
+                icon: random.properties.icon(),
+                disposition: 'menu',
+              },
+            })),
           ),
-        ),
-    }),
-    // Create user account node.
-    createExtension({
-      id: 'user-account',
-      connector: (node) =>
-        Rx.make((get) =>
-          pipe(
-            get(node),
-            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
-            Option.map(() => {
-              return [
-                {
-                  id: 'user-account',
-                  type: 'user-account',
+      }),
+      // Create user account node.
+      GraphBuilder.createExtension({
+        id: 'user-account',
+        match: NodeMatcher.whenRoot,
+        connector: () =>
+          Effect.succeed([
+            Node.make({
+              id: 'user-account',
+              type: 'user-account',
+              properties: {
+                label: 'User profile',
+                icon: 'ph--user--regular',
+                disposition: 'user-account',
+                userId: '1234567890ABCDEF',
+                hue: random.properties.hue(),
+                emoji: random.properties.emoji(),
+                status: 'active',
+              },
+              nodes: [
+                Node.make({
+                  id: 'profile',
+                  type: 'profile',
                   properties: {
-                    label: 'User Account',
+                    label: 'Profile',
                     icon: 'ph--user--regular',
-                    disposition: 'user-account',
-                    userId: '1234567890ABCDEF',
-                    hue: faker.properties.hue(),
-                    emoji: faker.properties.emoji(),
-                    status: 'active',
                   },
-                  nodes: [
-                    {
-                      id: 'profile',
-                      type: 'profile',
-                      properties: {
-                        label: 'Profile',
-                        icon: 'ph--user--regular',
-                      },
-                    },
-                    {
-                      id: 'devices',
-                      type: 'devices',
-                      properties: {
-                        label: 'Devices',
-                        icon: 'ph--devices--regular',
-                      },
-                    },
-                    {
-                      id: 'security',
-                      type: 'security',
-                      properties: {
-                        label: 'Security',
-                        icon: 'ph--key--regular',
-                      },
-                    },
-                  ],
-                },
-              ];
-            }),
-            Option.getOrElse(() => []),
-          ),
-        ),
-    }),
-    // TODO(wittjosiah): This group node probably is unnecessary now with the flat L0 structure.
-    // Create spaces group node.
-    createExtension({
-      id: 'spaces-root',
-      position: 'hoist',
-      connector: (node) =>
-        Rx.make((get) =>
-          pipe(
-            get(node),
-            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
-            Option.map(() => {
-              return [
-                {
-                  id: 'spaces-root',
-                  type: 'spaces-root',
+                }),
+                Node.make({
+                  id: 'devices',
+                  type: 'devices',
+                  properties: {
+                    label: 'Devices',
+                    icon: 'ph--devices--regular',
+                  },
+                }),
+                Node.make({
+                  id: 'security',
+                  type: 'security',
                   properties: {
-                    label: 'Spaces',
-                    icon: 'ph--planet--regular',
-                    role: 'branch',
-                    disposition: 'collection',
+                    label: 'Security',
+                    icon: 'ph--key--regular',
                   },
-                },
-              ];
+                }),
+              ],
             }),
-            Option.getOrElse(() => []),
-          ),
-        ),
-    }),
-    // Create space nodes.
-    createExtension({
-      id: 'spaces',
-      connector: (node) => {
-        const count = Rx.make((get) => {
-          let value = 3;
-          const interval = setInterval(() => {
-            if (value >= 10) {
-              clearInterval(interval);
-              return;
-            }
+          ]),
+      }),
+      // Create space (workspace) nodes directly under root.
+      GraphBuilder.createExtension({
+        id: 'spaces',
+        match: NodeMatcher.whenRoot,
+        connector: (_, get) =>
+          Effect.sync(() => {
+            const count = Atom.make((get) => {
+              let value = 3;
+              const interval = setInterval(() => {
+                if (value >= 10) {
+                  clearInterval(interval);
+                  return;
+                }
 
-            value++;
-            get.setSelf(value);
-          }, 5000);
-          get.addFinalizer(() => clearInterval(interval));
-          return value;
-        });
+                value++;
+                get.setSelf(value);
+              }, 5000);
+              get.addFinalizer(() => clearInterval(interval));
+              return value;
+            });
 
-        return Rx.make((get) =>
-          pipe(
-            get(node),
-            Option.flatMap((node) => (node.id === 'spaces-root' ? Option.some(node) : Option.none())),
-            Option.map(() => {
-              return [
-                ...Array.from({ length: get(count) }, (_, i) => ({
-                  id: `space-${i}`,
-                  type: 'space',
-                  properties: getProperties(`space-${i}`, {
-                    label: `Space ${i}`,
-                    icon: faker.properties.icon(),
-                    hue: faker.properties.hue(),
-                  }),
-                })),
-              ];
-            }),
-            Option.getOrElse(() => []),
-          ),
-        );
-      },
-    }),
-    // Create space actions.
-    createExtension({
-      id: 'space-actions',
-      actions: (node) =>
-        Rx.make((get) =>
-          pipe(
-            get(node),
-            Option.flatMap((node) => (node.type === 'space' ? Option.some(node) : Option.none())),
-            Option.map((node) => {
-              return [
-                ...Array.from({ length: 5 }, (_, i) => ({
-                  id: `${node.id}/action-${i}`,
-                  data: () => {
-                    log.info('action', { id: node.id, index: i });
-                  },
-                  properties: getProperties(`${node.id}/action-${i}`, {
-                    label: `Action ${i}`,
-                    icon: faker.properties.icon(),
-                  }),
-                })),
-              ];
-            }),
-            Option.getOrElse(() => []),
+            return Array.from({ length: get(count) }, (_, i) =>
+              Node.make({
+                id: `space-${i}`,
+                type: 'space',
+                properties: getProperties(`space-${i}`, {
+                  label: `Space ${i}`,
+                  icon: random.properties.icon(),
+                  hue: random.properties.hue(),
+                  disposition: 'workspace',
+                }),
+              }),
+            );
+          }),
+      }),
+      // Create space actions.
+      GraphBuilder.createExtension({
+        id: 'space-actions',
+        match: NodeMatcher.whenNodeType('space'),
+        actions: () =>
+          Effect.succeed(
+            Array.from({ length: 5 }, (_, i) => ({
+              id: `action-${i}`,
+              data: Effect.fnUntraced(function* () {
+                log.info('action', { id: 'space-actions', index: i });
+              }),
+              properties: getProperties(`action-${i}`, {
+                label: `Action ${i}`,
+                icon: random.properties.icon(),
+              }),
+            })),
           ),
-        ),
-    }),
-    // Create object nodes.
-    createExtension({
-      id: 'objects',
-      connector: (node) => {
-        const count = Rx.make((get) => {
-          let value = 3;
-          const interval = setInterval(() => {
-            if (value >= 20) {
-              clearInterval(interval);
-              return;
-            }
+      }),
+      // Create object nodes.
+      GraphBuilder.createExtension({
+        id: 'objects',
+        match: NodeMatcher.whenNodeType('space'),
+        connector: (_, get) =>
+          Effect.sync(() => {
+            const count = Atom.make((get) => {
+              let value = 3;
+              const interval = setInterval(() => {
+                if (value >= 20) {
+                  clearInterval(interval);
+                  return;
+                }
 
-            value++;
-            get.setSelf(value);
-          }, 5000);
-          get.addFinalizer(() => clearInterval(interval));
-          return value;
-        });
+                value++;
+                get.setSelf(value);
+              }, 5000);
+              get.addFinalizer(() => clearInterval(interval));
+              return value;
+            });
 
-        return Rx.make((get) =>
-          pipe(
-            get(node),
-            Option.flatMap((node) => (node.type === 'space' ? Option.some(node) : Option.none())),
-            Option.map((node) => {
-              return [
-                ...Array.from({ length: get(count) }, (_, i) => ({
-                  id: `${node.id}/object-${i}`,
-                  type: 'object',
-                  properties: getProperties(`${node.id}/object-${i}`, {
-                    label: `Object ${i}`,
-                    icon: faker.properties.icon(),
-                  }),
-                })),
-              ];
-            }),
-            Option.getOrElse(() => []),
-          ),
-        );
-      },
-    }),
-    // Create object actions.
-    createExtension({
-      id: 'object-actions',
-      actions: (node) =>
-        Rx.make((get) =>
-          pipe(
-            get(node),
-            Option.flatMap((node) => (node.type === 'object' ? Option.some(node) : Option.none())),
-            Option.map((node) => {
-              return [
-                ...Array.from({ length: 5 }, (_, i) => ({
-                  id: `${node.id}/action-${i}`,
-                  data: () => {
-                    log.info('action', { id: node.id, index: i });
-                  },
-                  properties: getProperties(`${node.id}/action-${i}`, {
-                    label: `Action ${i}`,
-                    icon: faker.properties.icon(),
-                  }),
-                })),
-              ];
-            }),
-            Option.getOrElse(() => []),
+            return Array.from({ length: get(count) }, (_, i) =>
+              Node.make({
+                id: `object-${i}`,
+                type: 'object',
+                properties: getProperties(`object-${i}`, {
+                  label: `Object ${i}`,
+                  icon: random.properties.icon(),
+                }),
+              }),
+            );
+          }),
+      }),
+      // Create object actions.
+      GraphBuilder.createExtension({
+        id: 'object-actions',
+        match: NodeMatcher.whenNodeType('object'),
+        actions: () =>
+          Effect.succeed(
+            Array.from({ length: 5 }, (_, i) => ({
+              id: `action-${i}`,
+              data: Effect.fnUntraced(function* () {
+                log.info('action', { id: 'object-actions', index: i });
+              }),
+              properties: getProperties(`action-${i}`, {
+                label: `Action ${i}`,
+                icon: random.properties.icon(),
+              }),
+            })),
           ),
-        ),
-    }),
-  ];
+      }),
+    ]),
+  );
 };