@dxos/plugin-navtree 0.7.5-main.9d26e3a → 0.7.5-main.9d2a38b

package/src/capabilities/state.ts

@@ -0,0 +1,100 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { effect } from '@preact/signals-core';
+
+import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
+import { type ReactiveObject, create } from '@dxos/live-object';
+import { Path } from '@dxos/react-ui-mosaic';
+
+import { NavTreeCapabilities } from './capabilities';
+import { NAVTREE_PLUGIN } from '../meta';
+
+const KEY = `${NAVTREE_PLUGIN}/state`;
+
+const getInitialState = () => {
+  const stringified = localStorage.getItem(KEY);
+  if (!stringified) {
+    return;
+  }
+
+  try {
+    const cached: [string, { open: boolean; current: boolean }][] = JSON.parse(stringified);
+    return cached.map(
+      ([key, value]): [
+        string,
+        ReactiveObject<{
+          open: boolean;
+          current: boolean;
+        }>,
+      ] => [key, create({ open: value.open, current: false })],
+    );
+  } catch {}
+};
+
+export default (context: PluginsContext) => {
+  // TODO(wittjosiah): This currently needs to be not a ReactiveObject at the root.
+  //   If it is a ReactiveObject then React errors when initializing new paths because of state change during render.
+  //   Ideally this could be a ReactiveObject but be able to access and update the root level without breaking render.
+  //   Wrapping accesses and updates in `untracked` didn't seem to work in all cases.
+  const state = new Map<string, ReactiveObject<{ open: boolean; current: boolean }>>(
+    getInitialState() ?? [
+      // TODO(thure): Initialize these dynamically.
+      ['root', create({ open: true, current: false })],
+      ['root~dxos.org/plugin/space-spaces', create({ open: true, current: false })],
+      ['root~dxos.org/plugin/files', create({ open: true, current: false })],
+    ],
+  );
+
+  const getItem = (_path: string[]) => {
+    const path = Path.create(..._path);
+    const value = state.get(path) ?? create({ open: false, current: false });
+    if (!state.has(path)) {
+      state.set(path, value);
+    }
+
+    return value;
+  };
+
+  const setItem = (path: string[], key: 'open' | 'current', next: boolean) => {
+    const value = getItem(path);
+    value[key] = next;
+
+    localStorage.setItem(KEY, JSON.stringify(Array.from(state.entries())));
+  };
+
+  const isOpen = (path: string[]) => getItem(path).open;
+  const isCurrent = (path: string[]) => getItem(path).current;
+
+  const location = context.requestCapability(Capabilities.Location);
+  const layout = context.requestCapability(Capabilities.Layout);
+
+  let previous: string[] = [];
+  const unsubscribe = effect(() => {
+    const part = layout.layoutMode === 'solo' ? 'solo' : 'main';
+    const current = location.active[part]?.map(({ id }) => id) ?? [];
+    const removed = previous.filter((id) => !current.includes(id));
+    previous = current;
+
+    // TODO(wittjosiah): This is setTimeout because there's a race between the keys be initialized.
+    //   This could be avoided if the location was a path as well and not just an id.
+    setTimeout(() => {
+      removed.forEach((id) => {
+        const keys = Array.from(state.keys()).filter((key) => Path.last(key) === id);
+        keys.forEach((key) => {
+          setItem(Path.parts(key), 'current', false);
+        });
+      });
+
+      current.forEach((id) => {
+        const keys = Array.from(new Set([...state.keys(), id])).filter((key) => Path.last(key) === id);
+        keys.forEach((key) => {
+          setItem(Path.parts(key), 'current', true);
+        });
+      });
+    });
+  });
+
+  return contributes(NavTreeCapabilities.State, { state, getItem, setItem, isOpen, isCurrent }, () => unsubscribe());
+};

package/src/components/CommandsTrigger.tsx

@@ -17,7 +17,7 @@ export const CommandsTrigger = () => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
   return (
     <Button
-      classNames='w-full h-full !rounded-none'
+      classNames='m-1 !pli-1 lg:!pli-2'
       onClick={() =>
         dispatch(
           createIntent(LayoutAction.SetLayout, {

package/src/components/NavTree.tsx

@@ -23,15 +23,13 @@ export type NavTreeProps = Omit<
 
 export const NavTree = ({ getActions, loadDescendents, renderItemEnd, popoverAnchorId, ...props }: NavTreeProps) => {
   const renderColumns = useCallback<NonNullable<TreeProps<NavTreeItemGraphNode>['renderColumns']>>(
-    ({ item, path, open, menuOpen, setMenuOpen }) => {
+    ({ item, path, open }) => {
       return (
         <NavTreeColumns
           path={path}
           node={item}
           getActions={getActions}
           open={open}
-          menuOpen={menuOpen}
-          setMenuOpen={setMenuOpen}
           loadDescendents={loadDescendents}
           renderItemEnd={renderItemEnd}
           popoverAnchorId={popoverAnchorId}
@@ -56,8 +54,6 @@ type NavTreeColumnsProps = {
   node: Node;
   getActions: (node: Node) => FlattenedActions;
   open: boolean;
-  menuOpen: boolean;
-  setMenuOpen: (open: boolean) => void;
   loadDescendents?: (node: Node) => MaybePromise<void>;
   renderItemEnd?: FC<{ node: Node; open: boolean }>;
   popoverAnchorId?: string;
@@ -68,8 +64,6 @@ const NavTreeColumns = ({
   node,
   getActions,
   open,
-  menuOpen,
-  setMenuOpen,
   loadDescendents,
   renderItemEnd: ItemEnd,
   popoverAnchorId,
@@ -126,8 +120,6 @@ const NavTreeColumns = ({
             menuActions={actions}
             menuType='dropdown'
             caller={NAV_TREE_ITEM}
-            menuOpen={menuOpen}
-            onChangeMenuOpen={setMenuOpen}
           />
         ) : (
           <Treegrid.Cell />

package/src/components/NavTreeContainer.tsx

@@ -7,7 +7,7 @@ import { extractInstruction, type Instruction } from '@atlaskit/pragmatic-drag-a
 import { untracked } from '@preact/signals-core';
 import React, { memo, useCallback, useEffect } from 'react';
 
-import { createIntent, LayoutAction, NavigationAction, Surface, useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent, LayoutAction, NavigationAction, useIntentDispatcher, Surface } from '@dxos/app-framework';
 import { isAction, isActionLike, type Node } from '@dxos/app-graph';
 import { useGraph } from '@dxos/plugin-graph';
 import { isEchoObject, isSpace } from '@dxos/react-client/echo';
@@ -17,7 +17,6 @@ import { mx } from '@dxos/react-ui-theme';
 import { arrayMove } from '@dxos/util';
 
 import { NAV_TREE_ITEM, NavTree, type NavTreeProps } from './NavTree';
-import { NavTreeFooter } from './NavTreeFooter';
 import { NAVTREE_PLUGIN } from '../meta';
 import { type NavTreeItemGraphNode } from '../types';
 import {
@@ -202,31 +201,20 @@ export const NavTreeContainer = memo(({ isCurrent, popoverAnchorId, ...props }:
     });
   }, [graph]);
 
+  // TODO(thure): What gives this an inline `overflow: initial`?
   return (
-    <div role='none' className='grid grid-cols-1 grid-rows-[var(--rail-size)_1fr_min-content] bs-full overflow-hidden'>
-      {/* TODO(wittjosiah): Factor out surfaces to layout? */}
-      <div role='none' className='border-be border-separator'>
-        <Surface role='search-input' limit={1} />
-      </div>
-
-      {/* TODO(thure): What gives this an inline `overflow: initial`? */}
-      <div role='none' className='border-be border-separator !overflow-y-auto'>
-        <NavTree
-          id={graph.root.id}
-          getActions={getActions}
-          getItems={getItems}
-          getProps={getProps}
-          isCurrent={isCurrent}
-          loadDescendents={loadDescendents}
-          renderItemEnd={renderItemEnd}
-          popoverAnchorId={popoverAnchorId}
-          canDrop={canDrop}
-          onSelect={handleSelect}
-          {...props}
-        />
-      </div>
-
-      <NavTreeFooter />
-    </div>
+    <NavTree
+      id={graph.root.id}
+      getActions={getActions}
+      getItems={getItems}
+      getProps={getProps}
+      isCurrent={isCurrent}
+      loadDescendents={loadDescendents}
+      renderItemEnd={renderItemEnd}
+      popoverAnchorId={popoverAnchorId}
+      canDrop={canDrop}
+      onSelect={handleSelect}
+      {...props}
+    />
   );
 });

package/src/components/NavTreeFooter.tsx

@@ -2,17 +2,15 @@
 // Copyright 2024 DXOS.org
 //
 
-import { ArrowSquareOut, GearSix, Warning } from '@phosphor-icons/react';
 import { formatDistance } from 'date-fns/formatDistance';
 import React from 'react';
 
 import {
   type LayoutPart,
   SettingsAction,
-  parseNavigationPlugin,
-  useResolvePlugin,
   useIntentDispatcher,
   createIntent,
+  usePluginManager,
 } from '@dxos/app-framework';
 import { useConfig } from '@dxos/react-client';
 import {
@@ -25,13 +23,15 @@ import {
   useDefaultValue,
   useSidebars,
   useTranslation,
+  Icon,
+  IconButton,
 } from '@dxos/react-ui';
 import { LayoutControls } from '@dxos/react-ui-stack';
-import { getSize, mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/react-ui-theme';
 
 import { NAVTREE_PLUGIN } from '../meta';
 
-const buttonStyles = 'pli-1.5 text-xs font-normal';
+const buttonStyles = '!pli-1.5 text-xs font-normal';
 
 const repo = 'https://github.com/dxos/dxos';
 
@@ -44,7 +44,7 @@ export const NavTreeFooter = (props: { layoutPart?: LayoutPart }) => {
   const { navigationSidebarOpen } = useSidebars(NAVTREE_PLUGIN);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { version, timestamp, commitHash } = config.values.runtime?.app?.build ?? {};
-  const navigationPlugin = useResolvePlugin(parseNavigationPlugin);
+  const manager = usePluginManager();
   const [_, v] = version?.match(VERSION_REGEX) ?? [];
 
   const releaseUrl =
@@ -58,7 +58,7 @@ export const NavTreeFooter = (props: { layoutPart?: LayoutPart }) => {
     <div
       role='none'
       className={mx(
-        'flex bs-[--rail-size] pbe-[env(safe-area-inset-bottom)] box-content justify-end',
+        'flex pbe-[env(safe-area-inset-bottom)] box-content justify-end',
         layoutPart === 'complementary' && 'md:justify-end flex-row-reverse',
       )}
     >
@@ -76,7 +76,7 @@ export const NavTreeFooter = (props: { layoutPart?: LayoutPart }) => {
           >
             <Message.Root valence='warning' className='rounded-be-none p-5'>
               <Message.Title>
-                <Warning weight='duotone' className='inline mie-2 is-6 bs-6' />
+                <Icon icon='ph--warning--duotone' size={6} classNames='inline mie-2' />
                 <span>{t('warning title')}</span>
               </Message.Title>
               <Message.Body>
@@ -84,7 +84,7 @@ export const NavTreeFooter = (props: { layoutPart?: LayoutPart }) => {
                 <br />
                 <Link href={previewUrl} target='_blank' rel='noreferrer' variant='neutral'>
                   {t('learn more label')}
-                  <ArrowSquareOut className='inline mis-1' weight='bold' />
+                  <Icon icon='ph--arrow-square-out--bold' classNames='inline mis-1' />
                 </Link>
               </Message.Body>
             </Message.Root>
@@ -97,7 +97,7 @@ export const NavTreeFooter = (props: { layoutPart?: LayoutPart }) => {
                   <br />
                   <Link href={releaseUrl} target='_blank' rel='noreferrer' variant='neutral'>
                     {t('see release label')}
-                    <ArrowSquareOut className='inline mis-1' weight='bold' />
+                    <Icon icon='ph--arrow-square-out--bold' classNames='inline mis-1' />
                   </Link>
                 </p>
               )}
@@ -121,17 +121,19 @@ export const NavTreeFooter = (props: { layoutPart?: LayoutPart }) => {
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
           {/* TODO(burdon): Reconcile with action created by LayoutPlugin. */}
-          <Button
+          <IconButton
+            icon='ph--gear-six--regular'
+            iconOnly
+            label={t('open settings label')}
+            size={4}
             variant='ghost'
             classNames={buttonStyles}
             data-testid='treeView.openSettings'
             data-joyride='welcome/settings'
             {...(!navigationSidebarOpen && { tabIndex: -1 })}
+            iconClassNames='rotate-90'
             onClick={() => dispatch(createIntent(SettingsAction.Open))}
-          >
-            <span className='sr-only'>{t('open settings label')}</span>
-            <GearSix className={mx(getSize(5), 'rotate-90')} />
-          </Button>
+          />
         </Tooltip.Trigger>
         <Tooltip.Portal>
           <Tooltip.Content classNames='z-[12]'>
@@ -142,7 +144,7 @@ export const NavTreeFooter = (props: { layoutPart?: LayoutPart }) => {
       </Tooltip.Root>
 
       {/* NOTE(thure): Unpinning from the NavTree’s default position in Deck is temporarily disabled. */}
-      {navigationPlugin?.meta.id === 'dxos.org/plugin/deck' && (
+      {manager.enabled.includes('dxos.org/plugin/deck') && (
         <LayoutControls
           variant='hide-disabled'
           capabilities={{

package/src/components/NavTreeItemAction.stories.tsx

@@ -53,5 +53,3 @@ export default {
 };
 
 export const Default = {};
-
-export const SearchList = { args: { menuType: 'searchList' } };