@dxos/plugin-navtree 0.8.1-staging.391c573 → 0.8.1-staging.9eaf14f

package/src/components/L0Menu.tsx

@@ -30,13 +30,13 @@ import {
 import type { StackItemRearrangeHandler } from '@dxos/react-ui-stack';
 import { Tabs } from '@dxos/react-ui-tabs';
 import { mx } from '@dxos/react-ui-theme';
-import { arrayMove } from '@dxos/util';
+import { arrayMove, getFirstTwoRenderableChars } from '@dxos/util';
 
 import { useNavTreeContext } from './NavTreeContext';
-import { NotchStart } from './NotchStart';
+import { UserAccountAvatar } from './UserAccountAvatar';
 import { useLoadDescendents } from '../hooks';
 import { NAVTREE_PLUGIN } from '../meta';
-import { getFirstTwoRenderableChars, l0ItemType } from '../util';
+import { l0ItemType } from '../util';
 
 type L0ItemData = { id: L0ItemProps['item']['id']; type: 'l0Item' };
 
@@ -45,6 +45,7 @@ type L0ItemProps = {
   parent?: Node<any>;
   path: string[];
   pinned?: boolean;
+  userAccount?: boolean;
   onRearrange?: StackItemRearrangeHandler<L0ItemData>;
 };
 
@@ -95,7 +96,7 @@ const l0Breakpoints: Record<string, string> = {
   lg: 'hidden lg:grid',
 };
 
-const L0Item = ({ item, parent, path, pinned, onRearrange }: L0ItemProps) => {
+const L0Item = ({ item, parent, path, pinned, userAccount, onRearrange }: L0ItemProps) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
   const itemElement = useRef<HTMLElement | null>(null);
   const [closestEdge, setEdge] = useState<Edge | null>(null);
@@ -184,31 +185,40 @@ const L0Item = ({ item, parent, path, pinned, onRearrange }: L0ItemProps) => {
       )}
       ref={itemElement}
     >
-      <div
-        role='none'
-        data-frame={true}
-        className={mx(
-          'absolute grid dx-focus-ring-group-indicator transition-colors',
-          type === 'tab' || pinned ? 'rounded' : 'rounded-full',
-          pinned
-            ? 'bg-transparent group-hover/l0i:bg-groupSurface inset-inline-3 inset-block-0.5'
-            : 'bg-groupSurface inset-inline-3 inset-block-2',
-        )}
-        {...(hue && { style: { background: `var(--dx-${hue}Surface)` } })}
-      >
-        {(item.properties.icon && (
-          <Icon icon={item.properties.icon} size={pinned ? 5 : 7} classNames='place-self-center' {...hueFgStyle} />
-        )) ||
-          (type === 'tab' && item.properties.disposition !== 'pin-end' ? (
-            <span role='img' className='place-self-center text-3xl font-light' {...hueFgStyle}>
-              {avatarValue}
-            </span>
-          ) : (
-            item.properties.icon && (
-              <Icon icon='ph--planet--regular' size={pinned ? 5 : 7} classNames='place-self-center' {...hueFgStyle} />
-            )
-          ))}
-      </div>
+      {userAccount ? (
+        <UserAccountAvatar
+          userId={item.properties.userId}
+          hue={item.properties.hue}
+          emoji={item.properties.emoji}
+          status={item.properties.status}
+        />
+      ) : (
+        <div
+          role='none'
+          data-frame={true}
+          className={mx(
+            'absolute grid dx-focus-ring-group-indicator transition-colors',
+            type === 'tab' || pinned ? 'rounded' : 'rounded-full',
+            pinned
+              ? 'bg-transparent group-hover/l0i:bg-groupSurface inset-inline-3 inset-block-0.5'
+              : 'bg-groupSurface inset-inline-3 inset-block-2',
+          )}
+          {...(hue && { style: { background: `var(--dx-${hue}Surface)` } })}
+        >
+          {(item.properties.icon && (
+            <Icon icon={item.properties.icon} size={pinned ? 5 : 7} classNames='place-self-center' {...hueFgStyle} />
+          )) ||
+            (type === 'tab' && item.properties.disposition !== 'pin-end' ? (
+              <span role='img' className='place-self-center text-3xl font-light' {...hueFgStyle}>
+                {avatarValue}
+              </span>
+            ) : (
+              item.properties.icon && (
+                <Icon icon='ph--planet--regular' size={pinned ? 5 : 7} classNames='place-self-center' {...hueFgStyle} />
+              )
+            ))}
+        </div>
+      )}
       <div
         role='none'
         className='hidden group-aria-selected/l0i:block absolute inline-start-0 inset-block-4 is-1 bg-accentSurface rounded-ie'
@@ -280,11 +290,13 @@ const L0Collection = ({ item, path, parent }: L0ItemProps) => {
 export const L0Menu = ({
   topLevelItems,
   pinnedItems,
+  userAccountItem,
   parent,
   path,
 }: {
   topLevelItems: Node<any>[];
   pinnedItems: Node<any>[];
+  userAccountItem: Node<any>;
   parent?: Node<any>;
   path: string[];
 }) => {
@@ -316,9 +328,11 @@ export const L0Menu = ({
             <L0Item key={item.id} item={item} parent={parent} path={path} pinned />
           ))}
       </div>
-      <div role='none' className='grid p-2 app-no-drag'>
-        <NotchStart />
-      </div>
+      {userAccountItem && (
+        <div role='none' className='grid py-2 app-no-drag'>
+          <L0Item key={userAccountItem.id} item={userAccountItem} parent={parent} path={path} userAccount />
+        </div>
+      )}
       <div
         role='none'
         className='hidden [body[data-platform="darwin"]_&]:block absolute block-start-0 is-[calc(var(--l0-size)-1px)] bs-[calc(40px+0.25rem)]'

package/src/components/L1Panels.tsx

@@ -6,7 +6,7 @@ import React, { useMemo } from 'react';
 
 import { useLayout } from '@dxos/app-framework';
 import { type Node } from '@dxos/app-graph';
-import { IconButton, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Button, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { Tree } from '@dxos/react-ui-list';
 import { Tabs } from '@dxos/react-ui-tabs';
 import { hoverableControlItem, hoverableOpenControlItem, mx } from '@dxos/react-ui-theme';
@@ -36,24 +36,20 @@ const L1Panel = ({ item, path, currentItemId, onBack }: L1PanelProps) => {
     >
       {item.id === currentItemId && (
         <>
-          <h2 className='flex items-center border-be border-separator pis-4 app-drag'>
-            {item.properties.disposition === 'pin-end' && (
-              <IconButton
-                label={t('back label')}
-                iconOnly
-                icon='ph--caret-left--regular'
-                size={5}
-                density='fine'
-                variant='ghost'
-                classNames={mx(
-                  'shrink-0 mie-2 !p-0',
-                  'pointer-fine:pli-1',
-                  hoverableControlItem,
-                  hoverableOpenControlItem,
-                )}
-                onClick={onBack}
-              />
-            )}
+          <h2 className='flex items-center border-be border-separator app-drag'>
+            <Button
+              variant='ghost'
+              density='fine'
+              classNames={mx(
+                'is-6 pli-0 dx-focus-ring-inset',
+                !item.id.startsWith('!') && 'invisible',
+                hoverableControlItem,
+                hoverableOpenControlItem,
+              )}
+              onClick={onBack}
+            >
+              <Icon icon='ph--caret-left--regular' size={3} />
+            </Button>
             <span className='flex-1 truncate cursor-default'>{toLocalizedString(item.properties.label, t)}</span>
             <NavTreeItemColumns path={path} item={item} open />
           </h2>

package/src/components/NavTree.tsx

@@ -26,7 +26,11 @@ export const NavTree = ({ id, root }: NavTreeProps) => {
     [topLevelActions, topLevelCollections, topLevelWorkspaces, topLevelNavigation],
   );
   const pinnedItems = getItems(root, 'pin-end').toSorted((a, b) => byPosition(a.properties, b.properties));
-  const topLevelItems = useMemo(() => [...l0Items, ...pinnedItems], [l0Items, pinnedItems]);
+  const userAccountItem = getItems(root, 'user-account')[0];
+  const topLevelItems = useMemo(
+    () => [...l0Items, ...pinnedItems, userAccountItem],
+    [l0Items, pinnedItems, userAccountItem],
+  );
 
   useLoadDescendents(root);
   const path = useMemo(() => [id], [id]);
@@ -34,7 +38,13 @@ export const NavTree = ({ id, root }: NavTreeProps) => {
   return (
     // NOTE(thure): 74px (rather than rem) is intentional in order to match the size of macOS windowing controls
     <Tabs.Root value={tab} orientation='vertical' verticalVariant='stateless' classNames='relative'>
-      <L0Menu topLevelItems={l0Items} pinnedItems={pinnedItems} path={path} parent={root} />
+      <L0Menu
+        topLevelItems={l0Items}
+        pinnedItems={pinnedItems}
+        userAccountItem={userAccountItem}
+        path={path}
+        parent={root}
+      />
       <L1Panels topLevelItems={topLevelItems} path={path} currentItemId={tab} onBack={onBack} />
     </Tabs.Root>
   );

package/src/components/NavTreeContainer.tsx

@@ -17,6 +17,7 @@ import {
   useLayout,
 } from '@dxos/app-framework';
 import { isAction, isActionLike, type Node } from '@dxos/app-graph';
+import { PLANK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
 import { isEchoObject, isSpace } from '@dxos/react-client/echo';
 import { useMediaQuery } from '@dxos/react-ui';
 import { isTreeData, type TreeData, type PropsFromTreeItem } from '@dxos/react-ui-list';
@@ -45,6 +46,9 @@ const renderItemEnd = ({ node, open }: { node: Node; open: boolean }) => (
   <Surface role='navtree-item-end' data={{ id: node.id, subject: node.data, open }} limit={1} />
 );
 
+const getChildrenFilter = (node: Node): node is Node =>
+  untracked(() => !isActionLike(node) && node.type !== PLANK_COMPANION_TYPE);
+
 export type NavTreeContainerProps = {
   popoverAnchorId?: string;
   topbar?: boolean;
@@ -64,12 +68,14 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
       return graph.nodes(node ?? graph.root, {
         filter: (node): node is Node => {
           return untracked(() => {
-            const action = isAction(node);
-            if (!disposition) {
+            if (node.properties.disposition === 'hidden') {
+              return false;
+            } else if (!disposition) {
+              const action = isAction(node);
               return !action || node.properties.disposition === 'item';
+            } else {
+              return node.properties.disposition === disposition;
             }
-
-            return node.properties.disposition === disposition;
           });
         },
       });
@@ -79,7 +85,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
 
   const getProps = useCallback(
     (node: Node, path: string[]): PropsFromTreeItem => {
-      const children = getChildren(graph, node, undefined, path);
+      const children = getChildren(graph, node, getChildrenFilter, path);
       const parentOf =
         children.length > 0 ? children.map(({ id }) => id) : node.properties.role === 'branch' ? [] : undefined;
       return {

package/src/components/NavTreeItemColumns.tsx

@@ -22,10 +22,10 @@ export const NavTreeItemColumns = memo(({ path, item, open }: NavTreeItemColumns
 
   const { actions: _actions, groupedActions } = getActions(item);
   const [primaryAction, ...secondaryActions] = _actions.toSorted((a, b) =>
-    a.properties?.disposition === 'toolbar' ? -1 : 1,
+    a.properties?.disposition === 'list-item-primary' ? -1 : 1,
   );
 
-  const actions = (primaryAction?.properties?.disposition === 'toolbar' ? secondaryActions : _actions)
+  const actions = (primaryAction?.properties?.disposition === 'list-item-primary' ? secondaryActions : _actions)
     .flatMap((action) => (isAction(action) ? [action] : []))
     .filter((action) => !action.properties?.hidden);
 
@@ -36,7 +36,7 @@ export const NavTreeItemColumns = memo(({ path, item, open }: NavTreeItemColumns
 
   return (
     <div role='none' className='contents app-no-drag'>
-      {primaryAction?.properties?.disposition === 'toolbar' && !primaryAction?.properties?.disabled ? (
+      {primaryAction?.properties?.disposition === 'list-item-primary' && !primaryAction?.properties?.disabled ? (
         <NavTreeItemAction
           testId={primaryAction.properties?.testId}
           label={toLocalizedString(primaryAction.properties?.label, t)}

package/src/components/UserAccountAvatar.stories.tsx

@@ -0,0 +1,21 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta } from '@storybook/react';
+import React from 'react';
+
+import { UserAccountAvatar } from './UserAccountAvatar';
+
+export const Default = (props: any) => {
+  return <UserAccountAvatar {...props} />;
+};
+
+const meta: Meta<typeof UserAccountAvatar> = {
+  title: 'plugins/plugin-navtree/UserAccountAvatar',
+  component: UserAccountAvatar,
+};
+
+export default meta;

package/src/components/UserAccountAvatar.tsx

@@ -0,0 +1,35 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { Avatar, type AvatarStatus, type Size } from '@dxos/react-ui';
+import { hexToFallback } from '@dxos/util';
+
+export type UserAccountAvatarProps = {
+  size?: Size;
+  userId?: string;
+  hue?: string;
+  emoji?: string;
+  status?: AvatarStatus;
+};
+
+export const UserAccountAvatar = (props: UserAccountAvatarProps) => {
+  const fallbackValue = hexToFallback(props.userId ?? '0');
+
+  return (
+    <div className='grid place-items-center' data-joyride='welcome/account'>
+      <Avatar.Root>
+        <Avatar.Content
+          variant='circle'
+          size={props.size ?? 12}
+          status={props.status ?? 'active'}
+          hue={props.hue || fallbackValue.hue}
+          fallback={props.emoji || fallbackValue.emoji}
+          data-testid='treeview.userAccount'
+        />
+      </Avatar.Root>
+    </div>
+  );
+};

package/src/components/index.ts

@@ -8,5 +8,4 @@ export * from './NavTree';
 export * from './NavTreeContainer';
 export * from './NavTreeContext';
 export * from './NavTreeDocumentTitle';
-export * from './NotchStart';
 export * from './types';

package/src/meta.ts

@@ -11,6 +11,7 @@ export const KEY_BINDING = 'KeyBinding';
 // TODO(wittjosiah): Factor out.
 export const COMMANDS_DIALOG = `${NAVTREE_PLUGIN}/CommandsDialog`;
 
-export const meta = {
+export const meta: PluginMeta = {
   id: NAVTREE_PLUGIN,
-} satisfies PluginMeta;
+  name: 'Navtree',
+};

package/src/testing/generator.ts

@@ -15,12 +15,12 @@ import { range } from '@dxos/util';
 export type TestItem = { id: string; type: string } & Record<string, any>;
 
 type ObjectDataGenerator = {
-  createSchema?: () => S.Schema<any>;
+  createSchema?: () => S.Schema.AnyNoContext;
   createData: () => any;
 };
 
 type ObjectFactory<T extends ReactiveObject<any>> = {
-  schema?: S.Schema<any>; // TODO(burdon): Support both typed and expando schema.
+  schema?: S.Schema.AnyNoContext; // TODO(burdon): Support both typed and expando schema.
   createObject: () => T;
 };
 
@@ -87,7 +87,7 @@ export class TestObjectGenerator {
       }, {});
   }
 
-  get schema(): S.Schema<any>[] {
+  get schema(): S.Schema.AnyNoContext[] {
     return Object.values(this.factories).map((f) => f.schema!);
   }
 

package/src/util.ts

@@ -75,7 +75,7 @@ export const sortActions = (actions: Action[]): Action[] =>
       return 0;
     }
 
-    if (a.properties.disposition === 'toolbar') {
+    if (a.properties.disposition === 'list-item-primary') {
       return -1;
     }
 
@@ -139,44 +139,3 @@ export const l0ItemType = (item: Node<any>) => {
     return 'tab';
   }
 };
-
-// Regular expression to match renderable characters
-// Excludes control characters, combining marks, and other non-renderable characters
-const renderableCharRegex =
-  /^(?![\p{Control}\p{Mark}\p{Separator}\p{Surrogate}\p{Unassigned}])[\p{L}\p{N}\p{P}\p{S}\p{Emoji}]$/u;
-
-/**
- * Returns the first two renderable characters from a string that are separated by non-word characters.
- * Handles Unicode characters correctly.
- *
- * @param {string} label - The input string to process
- * @returns {[string, string]} Array containing the two characters, or empty strings if not found
- */
-export const getFirstTwoRenderableChars = (label: string) => {
-  // Convert string to array of Unicode characters
-  const characters = Array.from(label);
-
-  // Keep track of found renderable characters
-  const result = ['', ''];
-  let foundFirst = false;
-
-  for (let i = 0; i < characters.length; i++) {
-    const char = characters[i];
-
-    if (renderableCharRegex.test(char)) {
-      if (!foundFirst) {
-        result[0] = char;
-        foundFirst = true;
-      } else {
-        // Check if there's at least one non-word character between the first and current char
-        const textBetween = characters.slice(result[0].length, i).join('');
-        if (/[^\p{L}\p{N}_]/u.test(textBetween)) {
-          result[1] = char;
-          break;
-        }
-      }
-    }
-  }
-
-  return result;
-};