@dxos/plugin-space 0.7.4 → 0.7.5-main.9cb18ac

package/src/components/SpaceSettings/SpaceSettingsDialog.tsx

@@ -13,6 +13,8 @@ import { SpaceSettingsPanel, type SpaceSettingsPanelProps } from './SpaceSetting
 import { SPACE_PLUGIN } from '../../meta';
 import { COMPOSER_SPACE_LOCK, getSpaceDisplayName } from '../../util';
 
+export const SPACE_SETTINGS_DIALOG = `${SPACE_PLUGIN}/SpaceSettingsDialog`;
+
 export type SpaceSettingsTab = 'members' | 'settings';
 
 export type SpaceSettingsDialogProps = {
@@ -39,7 +41,7 @@ export const SpaceSettingsDialog = ({
     // TODO(wittjosiah): The tablist dialog pattern is copied from @dxos/plugin-manager.
     //  Consider factoring it out to the tabs package.
     <Dialog.Content classNames='p-0 bs-content min-bs-[15rem] max-bs-full md:max-is-[40rem] overflow-hidden'>
-      <div role='none' className='flex justify-between pbs-3 pis-2 pie-3 @md:pbs-4 @md:pis-4 @md:pie-5'>
+      <div role='none' className='flex justify-between pbs-2 pis-2 pie-2 @md:pbs-4 @md:pis-4 @md:pie-4'>
         <Dialog.Title
           onClick={() => setTabsActivePart('list')}
           aria-description={t('click to return to tablist description')}

package/src/components/SpaceSettings/SpaceSettingsPanel.stories.tsx

@@ -7,16 +7,15 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React from 'react';
 
-import { useStoryClientData, withClientProvider } from '@dxos/react-client/testing';
+import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { SpaceSettingsPanel, type SpaceSettingsPanelProps } from './SpaceSettingsPanel';
 import translations from '../../translations';
 
 const Story = (args: Partial<SpaceSettingsPanelProps>) => {
-  const { space } = useStoryClientData();
-
-  return <SpaceSettingsPanel {...args} space={space!} />;
+  const { space } = useClientProvider();
+  return <SpaceSettingsPanel {...args} space={space!} classNames='p-2 border border-primary-500 rounded' />;
 };
 
 const meta: Meta = {
@@ -24,7 +23,10 @@ const meta: Meta = {
   component: SpaceSettingsPanel,
   render: Story,
   decorators: [withClientProvider({ createIdentity: true, createSpace: true }), withTheme],
-  parameters: { translations },
+  parameters: {
+    translations,
+    layout: 'centered',
+  },
 };
 
 export default meta;

package/src/components/SpaceSettings/SpaceSettingsPanel.tsx

@@ -8,16 +8,17 @@ import { log } from '@dxos/log';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
-import { Input, useTranslation } from '@dxos/react-ui';
+import { type ThemedClassName, Input, useTranslation } from '@dxos/react-ui';
 import { DeprecatedFormInput } from '@dxos/react-ui-form';
+import { mx } from '@dxos/react-ui-theme';
 
 import { SPACE_PLUGIN } from '../../meta';
 
-export type SpaceSettingsPanelProps = {
+export type SpaceSettingsPanelProps = ThemedClassName<{
   space: Space;
-};
+}>;
 
-export const SpaceSettingsPanel = ({ space }: SpaceSettingsPanelProps) => {
+export const SpaceSettingsPanel = ({ classNames, space }: SpaceSettingsPanelProps) => {
   const { t } = useTranslation(SPACE_PLUGIN);
 
   const client = useClient();
@@ -40,7 +41,7 @@ export const SpaceSettingsPanel = ({ space }: SpaceSettingsPanelProps) => {
   );
 
   return (
-    <div role='form' className='flex flex-col'>
+    <div role='form' className={mx('flex flex-col', classNames)}>
       <DeprecatedFormInput label={t('name label')}>
         <Input.TextInput
           placeholder={t('unnamed space label')}

package/src/components/SyncStatus/InlineSyncStatus.tsx

@@ -2,15 +2,18 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type CSSProperties, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
+import { useGraph } from '@dxos/plugin-graph';
 import { QueryEdgeStatusResponse } from '@dxos/protocols/proto/dxos/client/services';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
-import { Icon, useTranslation } from '@dxos/react-ui';
+import { Tooltip, useTranslation } from '@dxos/react-ui';
+import { AttentionGlyph, useAttended, useAttention } from '@dxos/react-ui-attention';
 
 import { useSpaceSyncState } from './sync-state';
+import { usePath } from '../../hooks';
 import { SPACE_PLUGIN } from '../../meta';
 
 const useEdgeStatus = (): QueryEdgeStatusResponse.EdgeStatus => {
@@ -26,36 +29,43 @@ const useEdgeStatus = (): QueryEdgeStatusResponse.EdgeStatus => {
   return status;
 };
 
-export const InlineSyncStatus = ({ space }: { space: Space }) => {
+export const InlineSyncStatus = ({ space, open }: { space: Space; open?: boolean }) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const id = space.id;
+  const { hasAttention, isAncestor, isRelated } = useAttention(id);
+  const isAttended = hasAttention || isAncestor || isRelated;
+
+  // TODO(wittjosiah): If the attended node is deep in the graph and the graph is not fully loaded
+  //   this will result in an empty path until the graph is connected.
+  // TODO(wittjosiah): Consider using this indicator for all open nodes instead of just attended.
+  const { graph } = useGraph();
+  const attended = useAttended();
+  const startOfAttention = attended.at(-1);
+  const path = usePath(graph, startOfAttention);
+  const containsAttended = !open && !isAttended && id && path ? path.includes(id) : false;
+
   const connectedToEdge = useEdgeStatus() === QueryEdgeStatusResponse.EdgeStatus.CONNECTED;
   // TODO(wittjosiah): This is not reactive.
   const edgeSyncEnabled = space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED;
   const syncState = useSpaceSyncState(space);
-  if (!connectedToEdge || !edgeSyncEnabled || !syncState || syncState.missingOnLocal === 0) {
-    return null;
-  }
-
-  return <InlineSyncStatusIndicator />;
-};
-
-export const InlineSyncStatusIndicator = () => {
-  const { t } = useTranslation(SPACE_PLUGIN);
-  const animationProps = useMemo<CSSProperties>(
-    () => ({
-      // Synchronize animations.
-      animationDelay: `-${Date.now() % 2_000}ms`,
-    }),
-    [],
-  );
+  const syncing = connectedToEdge && edgeSyncEnabled && syncState && syncState.missingOnLocal > 0;
 
   return (
-    <div role='status' aria-label={t('syncing message')} className='flex items-center'>
-      <Icon
-        icon='ph--circle-notch--regular'
-        size={3}
-        style={animationProps}
-        classNames='text-subdued animate-[spin_2s_linear_infinite]'
-      />
-    </div>
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <AttentionGlyph
+          syncing={syncing}
+          attended={isAttended}
+          containsAttended={containsAttended}
+          classNames='self-center mie-1'
+        />
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content side='bottom' classNames='z-[70]'>
+          <span>{t('syncing label')}</span>
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
   );
 };

package/src/components/SyncStatus/SyncStatusDetail.stories.tsx

@@ -5,10 +5,13 @@
 import '@dxos-theme';
 
 import { type Meta, type StoryObj } from '@storybook/react';
-import React from 'react';
+import React, { useState } from 'react';
 
+import { type Client } from '@dxos/client';
 import { faker } from '@dxos/random';
-import { useStoryClientData, withClientProvider } from '@dxos/react-client/testing';
+import { useClient } from '@dxos/react-client';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { useAsyncEffect } from '@dxos/react-ui';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { SyncStatusDetail } from './SyncStatus';
@@ -17,56 +20,47 @@ import translations from '../../translations';
 
 const random = ({ min, max }: { min: number; max: number }) => min + Math.floor(Math.random() * (max - min));
 
-const meta: Meta = {
-  title: 'plugins/plugin-space/SyncStatusDetail',
-  component: SyncStatusDetail,
-  render: (args) => {
-    const { state } = useStoryClientData<{ state: SpaceSyncStateMap }>();
+const createSpaceSyncStateMap = async (client: Client): Promise<SpaceSyncStateMap> => {
+  const spaces = await Promise.all(
+    Array.from({ length: 10 }).map(() => client.spaces.create({ name: faker.company.name() })),
+  );
 
-    return <SyncStatusDetail {...args} state={state} summary={getSyncSummary(state)} />;
-  },
-  decorators: [
-    withTheme,
-    withLayout({ fullscreen: true }),
-    withClientProvider({
-      createIdentity: true,
-      onIdentityCreated: async ({ client }) => {
-        const spaces = await Promise.all(
-          Array.from({ length: 10 }).map(() => client.spaces.create({ name: faker.company.name() })),
-        );
+  return spaces.reduce<SpaceSyncStateMap>((map, space, i) => {
+    if (i > 4) {
+      const total = random({ min: 10, max: 500 });
+      map[space.id] = {
+        localDocumentCount: total,
+        remoteDocumentCount: total,
+        missingOnLocal: 0,
+        missingOnRemote: 0,
+        differentDocuments: 0,
+      };
+      return map;
+    }
 
-        const state: SpaceSyncStateMap = spaces.reduce<SpaceSyncStateMap>((map, space, i) => {
-          if (i > 4) {
-            const total = random({ min: 10, max: 500 });
-            map[space.id] = {
-              localDocumentCount: total,
-              remoteDocumentCount: total,
-              missingOnLocal: 0,
-              missingOnRemote: 0,
-              differentDocuments: 0,
-            };
-            return map;
-          }
+    const total = random({ min: 10, max: 500 });
+    const haveLocal = random({ min: 0, max: total });
+    const haveRemote = random({ min: 0, max: total });
+    map[space.id] = {
+      localDocumentCount: haveLocal,
+      remoteDocumentCount: haveRemote,
+      missingOnLocal: total - haveLocal,
+      missingOnRemote: total - haveRemote,
+      differentDocuments: 0,
+    };
 
-          const total = random({ min: 10, max: 500 });
-          const haveLocal = random({ min: 0, max: total });
-          const haveRemote = random({ min: 0, max: total });
-          map[space.id] = {
-            localDocumentCount: haveLocal,
-            remoteDocumentCount: haveRemote,
-            missingOnLocal: total - haveLocal,
-            missingOnRemote: total - haveRemote,
-            differentDocuments: 0,
-          };
-
-          return map;
-        }, {});
+    return map;
+  }, {});
+};
 
-        return { state };
-      },
-    }),
-  ],
-  parameters: { translations },
+const meta: Meta<typeof SyncStatusDetail> = {
+  title: 'plugins/plugin-space/SyncStatusDetail',
+  component: SyncStatusDetail,
+  decorators: [withTheme, withLayout(), withClientProvider({ createIdentity: true })],
+  parameters: {
+    translations,
+    layout: 'centered',
+  },
   args: {
     classNames: 'm-2 border border-separator rounded-md',
   },
@@ -76,10 +70,20 @@ export default meta;
 
 type Story = StoryObj<typeof SyncStatusDetail>;
 
-export const Default: Story = {};
-
-export const Empty: Story = {
+export const Default: Story = {
   render: (args) => {
     return <SyncStatusDetail {...args} state={{}} />;
   },
 };
+
+export const Sync: Story = {
+  render: (args) => {
+    const client = useClient();
+    const [state, setState] = useState<SpaceSyncStateMap>({});
+    useAsyncEffect(async () => {
+      setState(await createSpaceSyncStateMap(client));
+    });
+
+    return <SyncStatusDetail {...args} state={state} summary={getSyncSummary(state)} />;
+  },
+};

package/src/hooks/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './usePath';

package/src/hooks/usePath.ts

@@ -0,0 +1,44 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useEffect, useState } from 'react';
+
+import { type Graph } from '@dxos/plugin-graph';
+
+/**
+ * React hook to get a path from the graph.
+ *
+ * @param graph Graph to find the node in.
+ * @param id Id of the node to find a path to.
+ * @param timeout Optional timeout in milliseconds to wait for the node to be found.
+ * @returns Path if found, undefined otherwise.
+ */
+// TODO(wittjosiah): Factor out.
+export const usePath = (graph: Graph, id?: string, timeout?: number): string[] | undefined => {
+  const [pathState, setPathState] = useState<string[] | undefined>(id ? graph.getPath({ target: id }) : undefined);
+
+  useEffect(() => {
+    if (!id && pathState) {
+      setPathState(undefined);
+    }
+
+    if (pathState?.at(-1) === id || !id) {
+      return;
+    }
+
+    // Set timeout did not seem to effectively not block the UI thread.
+    const frame = requestAnimationFrame(async () => {
+      try {
+        const path = await graph.waitForPath({ target: id }, { timeout });
+        if (path) {
+          setPathState(path);
+        }
+      } catch {}
+    });
+
+    return () => cancelAnimationFrame(frame);
+  }, [graph, id, timeout, pathState]);
+
+  return pathState;
+};

package/src/meta.ts

@@ -12,29 +12,3 @@ export default {
   shortId: SPACE_PLUGIN_SHORT_ID,
   name: 'Spaces',
 } satisfies PluginMeta;
-
-const SPACE_ACTION = `${SPACE_PLUGIN}/action`;
-export enum SpaceAction {
-  OPEN_CREATE_SPACE = `${SPACE_ACTION}/open-create-space`,
-  CREATE = `${SPACE_ACTION}/create`,
-  JOIN = `${SPACE_ACTION}/join`,
-  SHARE = `${SPACE_ACTION}/share`,
-  LOCK = `${SPACE_ACTION}/lock`,
-  UNLOCK = `${SPACE_ACTION}/unlock`,
-  RENAME = `${SPACE_ACTION}/rename`,
-  OPEN = `${SPACE_ACTION}/open`,
-  CLOSE = `${SPACE_ACTION}/close`,
-  MIGRATE = `${SPACE_ACTION}/migrate`,
-  OPEN_CREATE_OBJECT = `${SPACE_ACTION}/open-create-object`,
-  ADD_OBJECT = `${SPACE_ACTION}/add-object`,
-  REMOVE_OBJECTS = `${SPACE_ACTION}/remove-objects`,
-  RENAME_OBJECT = `${SPACE_ACTION}/rename-object`,
-  DUPLICATE_OBJECT = `${SPACE_ACTION}/duplicate-object`,
-  WAIT_FOR_OBJECT = `${SPACE_ACTION}/wait-for-object`,
-  TOGGLE_HIDDEN = `${SPACE_ACTION}/toggle-hidden`,
-  OPEN_SETTINGS = `${SPACE_ACTION}/open-settings`,
-}
-
-export enum CollectionAction {
-  CREATE = 'dxos.org/plugin/collection/action/create',
-}

package/src/translations.ts

@@ -108,7 +108,7 @@ export default [
         'open space settings label': 'Space Settings',
         'members tab label': 'Members',
         'settings tab label': 'Settings',
-        'syncing message': 'Space syncing',
+        'syncing label': 'Space syncing',
         'show all label': 'Show all',
         'no sync status label': 'No space with missing objects.',
         'create space dialog title': 'Create Space',
@@ -116,9 +116,10 @@ export default [
         'space input placeholder': 'Select space',
         'schema input placeholder': 'Select object type',
         'creating object type label': 'Type',
-        'creating in space label': 'In Space',
+        'creating in space label': 'Location',
         'creating in collection label': 'In Collection',
         'clear input label': 'Clear',
+        'expose object label': 'Expose in navtree',
       },
     },
   },

package/src/types/collection.ts

@@ -2,15 +2,15 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Expando, ref, S, TypedObject } from '@dxos/echo-schema';
+import { Expando, Ref, S, TypedObject } from '@dxos/echo-schema';
 
 export class CollectionType extends TypedObject({ typename: 'dxos.org/type/Collection', version: '0.1.0' })({
   name: S.optional(S.String),
-  objects: S.mutable(S.Array(ref(Expando))),
+  objects: S.mutable(S.Array(Ref(Expando))),
   // Key is schema typename and value is reference to a view object of the associated schema.
   // Having collection reference the views rather than vice versa ensures that the state converges to a single view per key (i.e. type).
   // This also leaves open a future where this key could be changed to allow for multiple stack views per section.
   // TODO(wittjosiah): Any way to make this more type safe?
   // TODO(wittjosiah): Should the views be separate objects or just be schemas for view data in this record?
-  views: S.mutable(S.Record({ key: S.String, value: ref(Expando) })),
+  views: S.mutable(S.Record({ key: S.String, value: Ref(Expando) })),
 }) {}

package/src/types/thread.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Expando, ref, S, TypedObject } from '@dxos/echo-schema';
+import { Expando, Ref, S, TypedObject } from '@dxos/echo-schema';
 
 // TODO(wittjosiah): These types were placed here rather than in @dxos/plugin-thread
 //   in order to avoid a circular dependency between threads and other objects that use threads.
@@ -22,7 +22,7 @@ export class ContactType extends TypedObject({ typename: 'dxos.org/type/Contact'
 
 export const ActorSchema = S.mutable(
   S.Struct({
-    contact: S.optional(ref(ContactType)),
+    contact: S.optional(Ref(ContactType)),
     // TODO(wittjosiah): Should the below fields just be the contact schema?
     //  i.e. it should either be a reference to an existing contact or an inline contact schema.
     identityKey: S.optional(S.String),
@@ -51,7 +51,7 @@ export class MessageType extends TypedObject({ typename: 'dxos.org/type/Message'
   /** Text content of the message. */
   text: S.String,
   /** Non-text content sent with a message (e.g., files, polls, etc.) */
-  parts: S.optional(S.mutable(S.Array(ref(Expando)))),
+  parts: S.optional(S.mutable(S.Array(Ref(Expando)))),
   /** Custom properties for specific message types (e.g. email subject or cc fields). */
   properties: S.optional(S.mutable(S.Record({ key: S.String, value: S.Any }))),
   // TODO(wittjosiah): Add read status:
@@ -59,7 +59,7 @@ export class MessageType extends TypedObject({ typename: 'dxos.org/type/Message'
   //  - Read receipts don't need to be added to schema until they being implemented.
   /** Context of the application when message was created. */
   // TODO(burdon): Evolve "attention object" to be current UX state? E.g., of Deck?
-  context: S.optional(ref(Expando)),
+  context: S.optional(Ref(Expando)),
 }) {}
 
 export const ThreadStatus = S.Union(S.Literal('staged'), S.Literal('active'), S.Literal('resolved'));
@@ -69,10 +69,10 @@ export class ThreadType extends TypedObject({ typename: 'dxos.org/type/Thread',
   /** AM cursor-range: 'from:to'. */
   anchor: S.optional(S.String),
   status: S.optional(ThreadStatus),
-  messages: S.mutable(S.Array(ref(MessageType))),
+  messages: S.mutable(S.Array(Ref(MessageType))),
 }) {}
 
 export class ChannelType extends TypedObject({ typename: 'dxos.org/type/Channel', version: '0.1.0' })({
   name: S.optional(S.String),
-  threads: S.mutable(S.Array(ref(ThreadType))),
+  threads: S.mutable(S.Array(Ref(ThreadType))),
 }) {}