@dxos/plugin-space 0.6.13 → 0.6.14-main.2b6a0f3

package/src/SpacePlugin.tsx

@@ -2,74 +2,77 @@
 // 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 {
+  Expando,
+  type EchoReactiveObject,
+  Filter,
   type PropertiesTypeProps,
   type Space,
+  SpaceState,
   create,
-  Expando,
-  Filter,
   fullyQualifiedId,
   getSpace,
   getTypename,
   isEchoObject,
   isSpace,
   loadObjectReferences,
-  SpaceState,
+  parseFullyQualifiedId,
 } 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,
+  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,7 +121,9 @@ 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: {},
@@ -171,9 +176,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 +187,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.
@@ -340,8 +348,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 +369,18 @@ 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' }
               ) : 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 isEchoObject(data.subject) ? <DefaultObjectSettings object={data.subject} /> : null;
             case 'dialog':
               if (data.component === 'dxos.org/plugin/space/InvitationManagerDialog') {
                 return (
@@ -398,6 +401,7 @@ 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)]} />
@@ -441,6 +445,14 @@ export const SpacePlugin = ({
               } else {
                 return <MenuFooter object={data.object} />;
               }
+            case 'status': {
+              return (
+                <>
+                  <SyncStatus />
+                  <SaveStatus />
+                </>
+              );
+            }
             default:
               return null;
           }
@@ -540,8 +552,7 @@ export const SpacePlugin = ({
                   },
                   properties: {
                     label: ['create space label', { ns: SPACE_PLUGIN }],
-                    icon: (props: IconProps) => <Plus {...props} />,
-                    iconSymbol: 'ph--plus--regular',
+                    icon: 'ph--plus--regular',
                     disposition: 'toolbar',
                     testId: 'spacePlugin.createSpace',
                   },
@@ -561,8 +572,7 @@ 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',
                     testId: 'spacePlugin.joinSpace',
                   },
                 },
@@ -707,6 +717,52 @@ 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 [subjectId] = id.split('~');
+                const [spaceId, objectId] = parseFullyQualifiedId(subjectId);
+                const space = client.spaces.get().find((space) => space.id === spaceId);
+                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: 'orphan-settings-for-subject',
+                  data: null,
+                  properties: {
+                    icon: 'ph--gear--regular',
+                    label,
+                    object,
+                  },
+                };
+              },
+            }),
           ];
         },
         serializer: (plugins) => {
@@ -802,9 +858,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 +893,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 +1105,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 +1131,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 +1199,6 @@ export const SpacePlugin = ({
                       activeParts: {
                         main: deletionData.wasActive,
                         sidebar: deletionData.wasActive,
-                        complementary: deletionData.wasActive,
                       },
                     },
                   });

package/src/components/DefaultObjectSettings.tsx

@@ -0,0 +1,32 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { type EchoReactiveObject } from '@dxos/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);
+  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';
 

package/src/components/SaveStatus.tsx

@@ -0,0 +1,95 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useEffect, useState } from 'react';
+
+import { type UnsubscribeCallback } from '@dxos/async';
+import { type Client } from '@dxos/client';
+import { type Space, type SpaceId } from '@dxos/client/echo';
+import { Context } from '@dxos/context';
+import { StatusBar } from '@dxos/plugin-status-bar';
+import { useClient } from '@dxos/react-client';
+import { Icon, useTranslation } from '@dxos/react-ui';
+
+import { SPACE_PLUGIN } from '../meta';
+
+export const SaveStatus = () => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const client = useClient();
+  const [state, setState] = useState<'saved' | 'saving'>('saved');
+  useEffect(() => {
+    return createClientSaveTracker(client, (state) => {
+      setState(state);
+    });
+  }, []);
+
+  return (
+    <StatusBar.Item title={state === 'saving' ? t('saving label') : t('saved label')}>
+      <Icon icon={state === 'saving' ? 'ph--arrows-clockwise--regular' : 'ph--check-circle--regular'} size={4} />
+    </StatusBar.Item>
+  );
+};
+
+const createClientSaveTracker = (client: Client, cb: (state: 'saved' | 'saving') => void) => {
+  const unsubscribeCallbacks: Record<SpaceId, UnsubscribeCallback> = {};
+  const state: Record<SpaceId, 'saved' | 'saving'> = {};
+
+  const install = (spaces: Space[]) => {
+    for (const space of spaces) {
+      if (state[space.id]) {
+        continue;
+      }
+
+      state[space.id] = 'saved';
+      unsubscribeCallbacks[space.id] = createSpaceSaveTracker(space, (s) => {
+        state[space.id] = s;
+        cb(Object.values(state).some((s) => s === 'saving') ? 'saving' : 'saved');
+      });
+    }
+  };
+  client.spaces.subscribe((spaces) => {
+    install(spaces);
+  });
+  install(client.spaces.get());
+
+  return () => {
+    for (const unsubscribe of Object.values(unsubscribeCallbacks)) {
+      unsubscribe();
+    }
+  };
+};
+
+const createSpaceSaveTracker = (space: Space, cb: (state: 'saved' | 'saving') => void): UnsubscribeCallback => {
+  const ctx = new Context();
+
+  void space.waitUntilReady().then(() => {
+    if (ctx.disposed) {
+      return;
+    }
+
+    let hasUnsavedChanges = false;
+    let lastFlushPromise: Promise<void> | undefined;
+    space.crud.saveStateChanged.on(ctx, ({ unsavedDocuments }) => {
+      hasUnsavedChanges = unsavedDocuments.length > 0;
+    });
+    space.crud.saveStateChanged.debounce(500).on(ctx, () => {
+      if (hasUnsavedChanges) {
+        lastFlushPromise = undefined;
+        cb('saving');
+      } else {
+        const flushPromise = space.crud.flush();
+        lastFlushPromise = flushPromise;
+        void flushPromise.then(() => {
+          if (lastFlushPromise === flushPromise) {
+            cb('saved');
+          }
+        });
+      }
+    });
+  });
+
+  return () => {
+    void ctx.dispose();
+  };
+};

package/src/components/ShareSpaceButton.stories.tsx

@@ -4,20 +4,24 @@
 
 import '@dxos-theme';
 
+import { type Meta } from '@storybook/react';
+
 import { withTheme } from '@dxos/storybook-utils';
 
 import { ShareSpaceButtonImpl } from './ShareSpaceButton';
 import translations from '../translations';
 
-export default {
-  title: 'plugin-space/ShareSpaceButton',
-  component: ShareSpaceButtonImpl,
-  decorators: [withTheme],
-  parameters: { translations },
-};
-
 export const Default = {
   args: {
     onClick: () => console.log('clicked'),
   },
 };
+
+const meta: Meta = {
+  title: 'plugins/plugin-space/ShareSpaceButton',
+  component: ShareSpaceButtonImpl,
+  decorators: [withTheme],
+  parameters: { translations },
+};
+
+export default meta;

package/src/components/SpaceMain/SpaceMain.tsx

@@ -6,35 +6,14 @@ import { Command } from '@phosphor-icons/react';
 import React from 'react';
 
 import { Surface } from '@dxos/app-framework';
-import { type Action } from '@dxos/plugin-graph';
 import { SpaceState, type Space } from '@dxos/react-client/echo';
-import { Button, Main, useTranslation, toLocalizedString } from '@dxos/react-ui';
+import { Main, useTranslation } from '@dxos/react-ui';
 import { getSize, mx, topbarBlockPaddingStart } from '@dxos/react-ui-theme';
 import { ClipboardProvider } from '@dxos/shell/react';
 
 import { SpaceMembersSection } from './SpaceMembersSection';
 import { SPACE_PLUGIN } from '../../meta';
 
-const _InFlowSpaceActions = ({ actionsMap }: { actionsMap: Record<string, Action> }) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
-  return (
-    <section className='mbe-4 col-start-2 col-end-4 md:col-end-7 grid gap-2 auto-rows-min grid-cols-[repeat(auto-fill,minmax(8rem,1fr))]'>
-      {Object.entries(actionsMap)
-        .filter(([_, { properties }]) => properties?.mainAreaDisposition === 'in-flow')
-        .map(([actionId, { data: invoke, properties }]) => {
-          const Icon = properties?.icon;
-          const label = properties?.label;
-          return (
-            <Button key={actionId} classNames='block text-center plb-2 font-normal'>
-              {Icon && <Icon size={5} className='mli-auto' />}
-              <p>{toLocalizedString(label, t)}</p>
-            </Button>
-          );
-        })}
-    </section>
-  );
-};
-
 const KeyShortcuts = () => {
   const { t } = useTranslation(SPACE_PLUGIN);
   return (