@dxos/plugin-space 0.6.13 → 0.6.14-main.69511f5

package/src/SpacePlugin.tsx

@@ -2,74 +2,78 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type IconProps, Plus, SignIn, CardsThree, Warning } from '@phosphor-icons/react';
-import { effect, signal } from '@preact/signals-core';
+import { signal } from '@preact/signals-core';
 import React from 'react';
 
 import {
   type IntentDispatcher,
   type IntentPluginProvides,
   LayoutAction,
-  Surface,
   type LocationProvides,
   NavigationAction,
   type Plugin,
   type PluginDefinition,
-  openIds,
+  Surface,
   firstIdInPart,
+  openIds,
+  parseGraphPlugin,
   parseIntentPlugin,
-  parseNavigationPlugin,
   parseMetadataResolverPlugin,
+  parseNavigationPlugin,
   resolvePlugin,
-  parseGraphPlugin,
 } from '@dxos/app-framework';
 import { EventSubscriptions, type Trigger, type UnsubscribeCallback } from '@dxos/async';
-import { type Identifiable, isReactiveObject, type EchoReactiveObject } from '@dxos/echo-schema';
+import { type HasId, isReactiveObject } from '@dxos/echo-schema';
+import { scheduledEffect } from '@dxos/echo-signals/core';
 import { LocalStorageStore } from '@dxos/local-storage';
 import { log } from '@dxos/log';
 import { Migrations } from '@dxos/migrations';
 import { type AttentionPluginProvides, parseAttentionPlugin } from '@dxos/plugin-attention';
 import { type ClientPluginProvides, parseClientPlugin } from '@dxos/plugin-client';
-import { createExtension, isGraphNode, memoize, type Node, toSignal } from '@dxos/plugin-graph';
+import { type Node, createExtension, memoize, toSignal } from '@dxos/plugin-graph';
 import { ObservabilityAction } from '@dxos/plugin-observability/meta';
 import { type Client, PublicKey } from '@dxos/react-client';
 import {
+  type EchoReactiveObject,
+  Expando,
+  Filter,
   type PropertiesTypeProps,
   type Space,
+  SpaceState,
   create,
-  Expando,
-  Filter,
   fullyQualifiedId,
   getSpace,
   getTypename,
   isEchoObject,
   isSpace,
   loadObjectReferences,
-  SpaceState,
+  parseId,
 } from '@dxos/react-client/echo';
 import { Dialog } from '@dxos/react-ui';
-import { InvitationManager, type InvitationManagerProps, osTranslations, ClipboardProvider } from '@dxos/shell/react';
+import { ClipboardProvider, InvitationManager, type InvitationManagerProps, osTranslations } from '@dxos/shell/react';
 import { ComplexMap, nonNullable, reduceGroupBy } from '@dxos/util';
 
 import {
   AwaitingObject,
   CollectionMain,
   CollectionSection,
-  EmptySpace,
-  EmptyTree,
+  DefaultObjectSettings,
   MenuFooter,
   MissingObject,
   PopoverRenameObject,
   PopoverRenameSpace,
+  SaveStatus,
   ShareSpaceButton,
   SmallPresence,
   SmallPresenceLive,
   SpacePresence,
   SpaceSettings,
+  SpaceSettingsPanel,
+  SyncStatus,
 } from './components';
 import meta, { SPACE_PLUGIN, SpaceAction } from './meta';
 import translations from './translations';
-import { CollectionType, type SpacePluginProvides, type SpaceSettingsProps, type PluginState } from './types';
+import { CollectionType, type PluginState, type SpacePluginProvides, type SpaceSettingsProps } from './types';
 import {
   COMPOSER_SPACE_LOCK,
   SHARED,
@@ -118,11 +122,14 @@ export const SpacePlugin = ({
   firstRun,
   onFirstRun,
 }: SpacePluginOptions = {}): PluginDefinition<SpacePluginProvides> => {
-  const settings = new LocalStorageStore<SpaceSettingsProps>(SPACE_PLUGIN);
+  const settings = new LocalStorageStore<SpaceSettingsProps>(SPACE_PLUGIN, {
+    onSpaceCreate: 'dxos.org/plugin/markdown/action/create',
+  });
   const state = new LocalStorageStore<PluginState>(SPACE_PLUGIN, {
     awaiting: undefined,
     spaceNames: {},
     viewersByObject: {},
+    // TODO(wittjosiah): Stop using (Complex)Map inside reactive object.
     viewersByIdentity: new ComplexMap(PublicKey.hash),
     sdkMigrationRunning: {},
   });
@@ -171,9 +178,10 @@ export const SpacePlugin = ({
           .filter((space) => space.state.get() === SpaceState.SPACE_READY)
           .forEach((space) => {
             subscriptions.add(
-              effect(() => {
-                state.values.spaceNames[space.id] = space.properties.name;
-              }),
+              scheduledEffect(
+                () => ({ name: space.properties.name }),
+                ({ name }) => (state.values.spaceNames[space.id] = name),
+              ),
             );
           });
       }).unsubscribe,
@@ -181,54 +189,56 @@ export const SpacePlugin = ({
 
     // Broadcast active node to other peers in the space.
     subscriptions.add(
-      effect(() => {
-        const send = () => {
-          const spaces = client.spaces.get();
-          const identity = client.halo.identity.get();
-          if (identity && location.active) {
-            const ids = openIds(location.active);
-
-            // Group parts by space for efficient messaging.
-            const idsBySpace = reduceGroupBy(ids, (id) => {
-              const [spaceId] = id.split(':'); // TODO(burdon): Factor out.
-              return spaceId;
-            });
-
-            // NOTE: Ensure all spaces are included so that we send the correct `removed` object arrays.
-            for (const space of spaces) {
-              if (!idsBySpace.has(space.id)) {
-                idsBySpace.set(space.id, []);
+      scheduledEffect(
+        () => ({
+          ids: openIds(location.active),
+          removed: location.closed ? [location.closed].flat() : [],
+        }),
+        ({ ids, removed }) => {
+          const send = () => {
+            const spaces = client.spaces.get();
+            const identity = client.halo.identity.get();
+            if (identity && location.active) {
+              // Group parts by space for efficient messaging.
+              const idsBySpace = reduceGroupBy(ids, (id) => {
+                const [spaceId] = id.split(':'); // TODO(burdon): Factor out.
+                return spaceId;
+              });
+
+              // NOTE: Ensure all spaces are included so that we send the correct `removed` object arrays.
+              for (const space of spaces) {
+                if (!idsBySpace.has(space.id)) {
+                  idsBySpace.set(space.id, []);
+                }
               }
-            }
 
-            for (const [spaceId, ids] of idsBySpace) {
-              const space = spaces.find((space) => space.id === spaceId);
-              if (!space) {
-                continue;
-              }
+              for (const [spaceId, ids] of idsBySpace) {
+                const space = spaces.find((space) => space.id === spaceId);
+                if (!space) {
+                  continue;
+                }
 
-              const removed = location.closed ? [location.closed].flat() : [];
-
-              void space
-                .postMessage('viewing', {
-                  identityKey: identity.identityKey.toHex(),
-                  attended: attention.attended ? [...attention.attended] : [],
-                  added: ids,
-                  // TODO(Zan): When we re-open a part, we should remove it from the removed list in the navigation plugin.
-                  removed: removed.filter((id) => !ids.includes(id)),
-                })
-                // TODO(burdon): This seems defensive; why would this fail? Backoff interval.
-                .catch((err) => {
-                  log.warn('Failed to broadcast active node for presence.', { err: err.message });
-                });
+                void space
+                  .postMessage('viewing', {
+                    identityKey: identity.identityKey.toHex(),
+                    attended: attention.attended ? [...attention.attended] : [],
+                    added: ids,
+                    // TODO(Zan): When we re-open a part, we should remove it from the removed list in the navigation plugin.
+                    removed: removed.filter((id) => !ids.includes(id)),
+                  })
+                  // TODO(burdon): This seems defensive; why would this fail? Backoff interval.
+                  .catch((err) => {
+                    log.warn('Failed to broadcast active node for presence.', { err: err.message });
+                  });
+              }
             }
-          }
-        };
+          };
 
-        send();
-        const interval = setInterval(() => send(), ACTIVE_NODE_BROADCAST_INTERVAL);
-        return () => clearInterval(interval);
-      }),
+          send();
+          const interval = setInterval(() => send(), ACTIVE_NODE_BROADCAST_INTERVAL);
+          return () => clearInterval(interval);
+        },
+      ),
     );
 
     // Listen for active nodes from other peers in the space.
@@ -276,17 +286,8 @@ export const SpacePlugin = ({
   return {
     meta,
     ready: async (plugins) => {
-      settings.prop({
-        key: 'showHidden',
-        storageKey: 'show-hidden',
-        type: LocalStorageStore.bool({ allowUndefined: true }),
-      });
-
-      state.prop({
-        key: 'spaceNames',
-        storageKey: 'space-names',
-        type: LocalStorageStore.json<Record<string, string>>(),
-      });
+      settings.prop({ key: 'showHidden', type: LocalStorageStore.bool({ allowUndefined: true }) });
+      state.prop({ key: 'spaceNames', type: LocalStorageStore.json<Record<string, string>>() });
 
       navigationPlugin = resolvePlugin(plugins, parseNavigationPlugin);
       attentionPlugin = resolvePlugin(plugins, parseAttentionPlugin);
@@ -340,8 +341,7 @@ export const SpacePlugin = ({
         records: {
           [CollectionType.typename]: {
             placeholder: ['unnamed collection label', { ns: SPACE_PLUGIN }],
-            icon: (props: IconProps) => <CardsThree {...props} />,
-            iconSymbol: 'ph--cards-three--regular',
+            icon: 'ph--cards-three--regular',
             // TODO(wittjosiah): Move out of metadata.
             loadReferences: (collection: CollectionType) =>
               loadObjectReferences(collection, (collection) => [
@@ -362,22 +362,25 @@ export const SpacePlugin = ({
             case 'main':
               // TODO(wittjosiah): Need to avoid shotgun parsing space state everywhere.
               return isSpace(primary) && primary.state.get() === SpaceState.SPACE_READY ? (
-                <Surface data={{ active: primary.properties[CollectionType.typename] }} role={role} {...rest} />
+                <Surface
+                  data={{ active: primary.properties[CollectionType.typename], id: primary.id }}
+                  role={role}
+                  {...rest}
+                />
               ) : primary instanceof CollectionType ? (
-                { node: <CollectionMain collection={primary} />, disposition: 'fallback' }
+                {
+                  node: <CollectionMain collection={primary} />,
+                  disposition: 'fallback',
+                }
               ) : typeof primary === 'string' && primary.length === OBJECT_ID_LENGTH ? (
                 <MissingObject id={primary} />
               ) : null;
-            // TODO(burdon): Add role name syntax to minimal plugin docs.
-            case 'tree--empty':
-              switch (true) {
-                case data.plugin === SPACE_PLUGIN:
-                  return <EmptyTree />;
-                case isGraphNode(data.activeNode) && isSpace(data.activeNode.data):
-                  return <EmptySpace />;
-                default:
-                  return null;
-              }
+            case 'complementary--settings':
+              return isSpace(data.subject) ? (
+                <SpaceSettingsPanel space={data.subject} />
+              ) : isEchoObject(data.subject) ? (
+                { node: <DefaultObjectSettings object={data.subject} />, disposition: 'fallback' }
+              ) : null;
             case 'dialog':
               if (data.component === 'dxos.org/plugin/space/InvitationManagerDialog') {
                 return (
@@ -387,10 +390,9 @@ export const SpacePlugin = ({
                     </ClipboardProvider>
                   </Dialog.Content>
                 );
-              } else {
-                return null;
               }
-            case 'popover':
+              return null;
+            case 'popover': {
               if (data.component === 'dxos.org/plugin/space/RenameSpacePopover' && isSpace(data.subject)) {
                 return <PopoverRenameSpace space={data.subject} />;
               }
@@ -398,11 +400,16 @@ export const SpacePlugin = ({
                 return <PopoverRenameObject object={data.subject} />;
               }
               return null;
+            }
+            // TODO(burdon): Add role name syntax to minimal plugin docs.
             case 'presence--glyph': {
               return isReactiveObject(data.object) ? (
-                <SmallPresenceLive viewers={state.values.viewersByObject[fullyQualifiedId(data.object)]} />
+                <SmallPresenceLive
+                  id={data.id as string}
+                  viewers={state.values.viewersByObject[fullyQualifiedId(data.object)]}
+                />
               ) : (
-                <SmallPresence count={0} />
+                <SmallPresence id={data.id as string} count={0} />
               );
             }
             case 'navbar-start': {
@@ -419,6 +426,7 @@ export const SpacePlugin = ({
                   ? (space?.properties[CollectionType.typename] as CollectionType)
                   : undefined
                 : data.object;
+
               return space && object
                 ? {
                     node: (
@@ -436,11 +444,19 @@ export const SpacePlugin = ({
             case 'settings':
               return data.plugin === meta.id ? <SpaceSettings settings={settings.values} /> : null;
             case 'menu-footer':
-              if (!isEchoObject(data.object)) {
-                return null;
-              } else {
+              if (isEchoObject(data.object)) {
                 return <MenuFooter object={data.object} />;
+              } else {
+                return null;
               }
+            case 'status': {
+              return (
+                <>
+                  <SyncStatus />
+                  <SaveStatus />
+                </>
+              );
+            }
             default:
               return null;
           }
@@ -456,8 +472,7 @@ export const SpacePlugin = ({
           const dispatch = intentPlugin?.provides.intent.dispatch;
           const resolve = metadataPlugin?.provides.metadata.resolver;
           const graph = graphPlugin?.provides.graph;
-
-          if (!graph || !dispatch || !resolve || !client) {
+          if (!client || !dispatch || !resolve || !graph) {
             return [];
           }
 
@@ -491,7 +506,6 @@ export const SpacePlugin = ({
                     type: SPACES,
                     properties: {
                       label: ['spaces label', { ns: SPACE_PLUGIN }],
-                      palette: 'teal',
                       testId: 'spacePlugin.spaces',
                       role: 'branch',
                       childrenPersistenceClass: 'echo',
@@ -540,10 +554,10 @@ export const SpacePlugin = ({
                   },
                   properties: {
                     label: ['create space label', { ns: SPACE_PLUGIN }],
-                    icon: (props: IconProps) => <Plus {...props} />,
-                    iconSymbol: 'ph--plus--regular',
-                    disposition: 'toolbar',
+                    icon: 'ph--plus--regular',
+                    disposition: 'item',
                     testId: 'spacePlugin.createSpace',
+                    className: 'pbs-4',
                   },
                 },
                 {
@@ -561,9 +575,10 @@ export const SpacePlugin = ({
                   },
                   properties: {
                     label: ['join space label', { ns: SPACE_PLUGIN }],
-                    icon: (props: IconProps) => <SignIn {...props} />,
-                    iconSymbol: 'ph--sign-in--regular',
+                    icon: 'ph--sign-in--regular',
+                    disposition: 'item',
                     testId: 'spacePlugin.joinSpace',
+                    className: 'pbe-4',
                   },
                 },
               ],
@@ -707,6 +722,76 @@ export const SpacePlugin = ({
                   .filter(nonNullable);
               },
             }),
+
+            // Create nodes for object settings.
+            createExtension({
+              id: `${SPACE_PLUGIN}/settings-for-subject`,
+              resolver: ({ id }) => {
+                // TODO(Zan): Find util (or make one).
+                if (!id.endsWith('~settings')) {
+                  return;
+                }
+
+                const type = 'orphan-settings-for-subject';
+                const icon = 'ph--gear--regular';
+
+                const [subjectId] = id.split('~');
+                const { spaceId, objectId } = parseId(subjectId);
+                const space = client.spaces.get().find((space) => space.id === spaceId);
+                if (!objectId) {
+                  const label = space
+                    ? space.properties.name || ['unnamed space label', { ns: SPACE_PLUGIN }]
+                    : ['unnamed object settings label', { ns: SPACE_PLUGIN }];
+
+                  // TODO(wittjosiah): Support comments for arbitrary subjects.
+                  //   This is to ensure that the comments panel is not stuck on an old object.
+                  return {
+                    id,
+                    type,
+                    data: null,
+                    properties: {
+                      icon,
+                      label,
+                      showResolvedThreads: false,
+                      object: null,
+                      space,
+                    },
+                  };
+                }
+
+                const object = toSignal(
+                  (onChange) => {
+                    const timeout = setTimeout(async () => {
+                      await space?.db.loadObjectById(objectId);
+                      onChange();
+                    });
+
+                    return () => clearTimeout(timeout);
+                  },
+                  () => space?.db.getObjectById(objectId),
+                  subjectId,
+                );
+                if (!object || !subjectId) {
+                  return;
+                }
+
+                const meta = resolve(getTypename(object) ?? '');
+                const label = meta.label?.(object) ||
+                  object.name ||
+                  meta.placeholder || ['unnamed object settings label', { ns: SPACE_PLUGIN }];
+
+                return {
+                  id,
+                  type,
+                  data: null,
+                  properties: {
+                    icon,
+                    label,
+                    object,
+                  },
+                };
+              },
+            }),
           ];
         },
         serializer: (plugins) => {
@@ -802,9 +887,21 @@ export const SpacePlugin = ({
               }
 
               return {
-                data: { space, id: space.id, activeParts: { main: [space.id] } },
-
+                data: {
+                  space,
+                  id: space.id,
+                  activeParts: { main: [space.id] },
+                },
                 intents: [
+                  ...(settings.values.onSpaceCreate
+                    ? [
+                        [
+                          { action: settings.values.onSpaceCreate, data: { space } },
+                          { action: SpaceAction.ADD_OBJECT, data: { target: space } },
+                          { action: NavigationAction.EXPOSE },
+                        ],
+                      ]
+                    : []),
                   [
                     {
                       action: ObservabilityAction.SEND_EVENT,
@@ -825,9 +922,26 @@ export const SpacePlugin = ({
                 const { space } = await client.shell.joinSpace({ invitationCode: intent.data?.invitationCode });
                 if (space) {
                   return {
-                    data: { space, id: space.id, activeParts: { main: [space.id] } },
-
+                    data: {
+                      space,
+                      id: space.id,
+                      activeParts: { main: [space.id] },
+                    },
                     intents: [
+                      [
+                        {
+                          action: LayoutAction.SET_LAYOUT,
+                          data: {
+                            element: 'toast',
+                            subject: {
+                              id: `${SPACE_PLUGIN}/join-success`,
+                              duration: 10_000,
+                              title: translations[0]['en-US'][SPACE_PLUGIN]['join success label'],
+                              closeLabel: translations[0]['en-US'][SPACE_PLUGIN]['dismiss label'],
+                            },
+                          },
+                        },
+                      ],
                       [
                         {
                           action: ObservabilityAction.SEND_EVENT,
@@ -1020,8 +1134,7 @@ export const SpacePlugin = ({
                             title: translations[0]['en-US'][SPACE_PLUGIN]['space limit label'],
                             description: translations[0]['en-US'][SPACE_PLUGIN]['space limit description'],
                             duration: 5_000,
-                            icon: (props: IconProps) => <Warning {...props} />,
-                            iconSymbol: 'ph--warning--regular',
+                            icon: 'ph--warning--regular',
                             actionLabel: translations[0]['en-US'][SPACE_PLUGIN]['remove deleted objects label'],
                             actionAlt: translations[0]['en-US'][SPACE_PLUGIN]['remove deleted objects alt'],
                             // TODO(wittjosiah): Use OS namespace.
@@ -1047,20 +1160,20 @@ export const SpacePlugin = ({
               }
 
               if (intent.data?.target instanceof CollectionType) {
-                intent.data?.target.objects.push(object as Identifiable);
+                intent.data?.target.objects.push(object as HasId);
               } else if (isSpace(intent.data?.target)) {
                 const collection = space.properties[CollectionType.typename];
                 if (collection instanceof CollectionType) {
-                  collection.objects.push(object as Identifiable);
+                  collection.objects.push(object as HasId);
                 } else {
                   // TODO(wittjosiah): Can't add non-echo objects by including in a collection because of types.
-                  const collection = create(CollectionType, { objects: [object as Identifiable], views: {} });
+                  const collection = create(CollectionType, { objects: [object as HasId], views: {} });
                   space.properties[CollectionType.typename] = collection;
                 }
               }
 
               return {
-                data: { id: object.id, object, activeParts: { main: [fullyQualifiedId(object)] } },
+                data: { id: fullyQualifiedId(object), object, activeParts: { main: [fullyQualifiedId(object)] } },
                 intents: [
                   [
                     {
@@ -1115,7 +1228,6 @@ export const SpacePlugin = ({
                       activeParts: {
                         main: deletionData.wasActive,
                         sidebar: deletionData.wasActive,
-                        complementary: deletionData.wasActive,
                       },
                     },
                   });
@@ -1203,11 +1315,12 @@ export const SpacePlugin = ({
             case SpaceAction.DUPLICATE_OBJECT: {
               const originalObject = intent.data?.object ?? intent.data?.result;
               const resolve = resolvePlugin(plugins, parseMetadataResolverPlugin)?.provides.metadata.resolver;
-              if (!isEchoObject(originalObject) || !resolve) {
+              const space = isSpace(intent.data?.target) ? intent.data?.target : getSpace(intent.data?.target);
+              if (!isEchoObject(originalObject) || !resolve || !space) {
                 return;
               }
 
-              const newObject = await cloneObject(originalObject, resolve);
+              const newObject = await cloneObject(originalObject, resolve, space);
               return {
                 intents: [
                   [{ action: SpaceAction.ADD_OBJECT, data: { object: newObject, target: intent.data?.target } }],

package/src/components/DefaultObjectSettings.tsx

@@ -0,0 +1,33 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { type EchoReactiveObject } from '@dxos/react-client/echo';
+import { Input, useTranslation } from '@dxos/react-ui';
+
+import { SPACE_PLUGIN } from '../meta';
+
+export type DefaultObjectSettingsProps = {
+  object: EchoReactiveObject<any>;
+};
+
+export const DefaultObjectSettings = ({ object }: DefaultObjectSettingsProps) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  // TODO(burdon): Standardize forms.
+  return (
+    <div role='form' className='flex flex-col w-full p-2 gap-1'>
+      <Input.Root>
+        <Input.Label>{t('name label')}</Input.Label>
+        <Input.TextInput
+          placeholder={t('name placeholder')}
+          value={object.name ?? ''}
+          onChange={(event) => {
+            object.name = event.target.value;
+          }}
+        />
+      </Input.Root>
+    </div>
+  );
+};

package/src/components/MenuFooter.tsx

@@ -1,11 +1,11 @@
 //
 // Copyright 2024 DXOS.org
 //
+
 import { Planet } from '@phosphor-icons/react';
 import React from 'react';
 
-import { getSpace } from '@dxos/client/echo';
-import type { EchoReactiveObject } from '@dxos/echo-schema';
+import { type EchoReactiveObject, getSpace } from '@dxos/client/echo';
 import { useClient } from '@dxos/react-client';
 import { DropdownMenu, toLocalizedString, useTranslation } from '@dxos/react-ui';