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

package/src/SpacePlugin.tsx

@@ -34,8 +34,8 @@ import { type Node, createExtension, memoize, toSignal } from '@dxos/plugin-grap
 import { ObservabilityAction } from '@dxos/plugin-observability/meta';
 import { type Client, PublicKey } from '@dxos/react-client';
 import {
-  Expando,
   type EchoReactiveObject,
+  Expando,
   Filter,
   type PropertiesTypeProps,
   type Space,
@@ -47,7 +47,7 @@ import {
   isEchoObject,
   isSpace,
   loadObjectReferences,
-  parseFullyQualifiedId,
+  parseId,
 } from '@dxos/react-client/echo';
 import { Dialog } from '@dxos/react-ui';
 import { ClipboardProvider, InvitationManager, type InvitationManagerProps, osTranslations } from '@dxos/shell/react';
@@ -68,6 +68,7 @@ import {
   SmallPresenceLive,
   SpacePresence,
   SpaceSettings,
+  SpaceSettingsPanel,
   SyncStatus,
 } from './components';
 import meta, { SPACE_PLUGIN, SpaceAction } from './meta';
@@ -128,6 +129,7 @@ export const SpacePlugin = ({
     awaiting: undefined,
     spaceNames: {},
     viewersByObject: {},
+    // TODO(wittjosiah): Stop using (Complex)Map inside reactive object.
     viewersByIdentity: new ComplexMap(PublicKey.hash),
     sdkMigrationRunning: {},
   });
@@ -284,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);
@@ -375,12 +368,19 @@ export const SpacePlugin = ({
                   {...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;
             case 'complementary--settings':
-              return isEchoObject(data.subject) ? <DefaultObjectSettings object={data.subject} /> : null;
+              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 (
@@ -390,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} />;
               }
@@ -401,12 +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': {
@@ -423,6 +426,7 @@ export const SpacePlugin = ({
                   ? (space?.properties[CollectionType.typename] as CollectionType)
                   : undefined
                 : data.object;
+
               return space && object
                 ? {
                     node: (
@@ -440,10 +444,10 @@ 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 (
@@ -468,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 [];
           }
 
@@ -503,7 +506,6 @@ export const SpacePlugin = ({
                     type: SPACES,
                     properties: {
                       label: ['spaces label', { ns: SPACE_PLUGIN }],
-                      palette: 'teal',
                       testId: 'spacePlugin.spaces',
                       role: 'branch',
                       childrenPersistenceClass: 'echo',
@@ -553,8 +555,9 @@ export const SpacePlugin = ({
                   properties: {
                     label: ['create space label', { ns: SPACE_PLUGIN }],
                     icon: 'ph--plus--regular',
-                    disposition: 'toolbar',
+                    disposition: 'item',
                     testId: 'spacePlugin.createSpace',
+                    className: 'pbs-4',
                   },
                 },
                 {
@@ -573,7 +576,9 @@ export const SpacePlugin = ({
                   properties: {
                     label: ['join space label', { ns: SPACE_PLUGIN }],
                     icon: 'ph--sign-in--regular',
+                    disposition: 'item',
                     testId: 'spacePlugin.joinSpace',
+                    className: 'pbe-4',
                   },
                 },
               ],
@@ -727,9 +732,33 @@ export const SpacePlugin = ({
                   return;
                 }
 
+                const type = 'orphan-settings-for-subject';
+                const icon = 'ph--gear--regular';
+
                 const [subjectId] = id.split('~');
-                const [spaceId, objectId] = parseFullyQualifiedId(subjectId);
+                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 () => {
@@ -753,10 +782,10 @@ export const SpacePlugin = ({
 
                 return {
                   id,
-                  type: 'orphan-settings-for-subject',
+                  type,
                   data: null,
                   properties: {
-                    icon: 'ph--gear--regular',
+                    icon,
                     label,
                     object,
                   },
@@ -1286,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

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { type EchoReactiveObject } from '@dxos/client/echo';
+import { type EchoReactiveObject } from '@dxos/react-client/echo';
 import { Input, useTranslation } from '@dxos/react-ui';
 
 import { SPACE_PLUGIN } from '../meta';
@@ -15,13 +15,14 @@ export type DefaultObjectSettingsProps = {
 
 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}
+          value={object.name ?? ''}
           onChange={(event) => {
             object.name = event.target.value;
           }}

package/src/components/SpacePresence.tsx

@@ -17,13 +17,12 @@ import {
   type Size,
   type ThemedClassName,
   Tooltip,
-  useDensityContext,
   useTranslation,
   List,
   ListItem,
   useDefaultValue,
 } from '@dxos/react-ui';
-import { AttentionGlyph } from '@dxos/react-ui-attention';
+import { AttentionGlyph, useAttention } from '@dxos/react-ui-attention';
 import { ComplexMap, keyToFallback } from '@dxos/util';
 
 import { SPACE_PLUGIN } from '../meta';
@@ -40,7 +39,6 @@ const noViewers = new ComplexMap<PublicKey, ObjectViewerProps>(PublicKey.hash);
 const getName = (identity: Identity) => identity.profile?.displayName ?? generateName(identity.identityKey.toHex());
 
 export const SpacePresence = ({ object, spaceKey }: { object: Expando; spaceKey?: PublicKey }) => {
-  const density = useDensityContext();
   const spacePlugin = usePlugin<SpacePluginProvides>(SPACE_PLUGIN);
   const client = useClient();
   const identity = useIdentity();
@@ -86,11 +84,7 @@ export const SpacePresence = ({ object, spaceKey }: { object: Expando; spaceKey?
     })
     .toSorted((a, b) => a.lastSeen - b.lastSeen);
 
-  return density === 'fine' ? (
-    <SmallPresence count={membersForObject.length} />
-  ) : (
-    <FullPresence members={membersForObject} />
-  );
+  return <FullPresence members={membersForObject} />;
 };
 
 export type Member = SpaceMember & {
@@ -200,28 +194,45 @@ const PrensenceAvatar = ({ identity, showName, match, group, index, onClick }: P
   );
 };
 
-export const SmallPresenceLive = ({ viewers }: { viewers?: ComplexMap<PublicKey, ObjectViewerProps> }) => {
-  const [moment, setMoment] = useState(Date.now());
+export const SmallPresenceLive = ({
+  id,
+  viewers,
+}: {
+  id?: string;
+  viewers?: ComplexMap<PublicKey, ObjectViewerProps>;
+}) => {
+  const getActiveViewers = (viewers: ComplexMap<PublicKey, ObjectViewerProps>): ObjectViewerProps[] => {
+    const moment = Date.now();
+    return Array.from(viewers.values()).filter(({ lastSeen }) => moment - lastSeen < ACTIVITY_DURATION);
+  };
 
-  // NOTE(thure): This is necessary so Presence updates without any underlying data updating.
-  useEffect(() => {
-    const interval = setInterval(() => setMoment(Date.now()), REFRESH_INTERVAL);
-    return () => clearInterval(interval);
-  }, []);
-
-  const activeViewers = viewers
-    ? Array.from(viewers.values()).filter(({ lastSeen }) => moment - lastSeen < ACTIVITY_DURATION)
-    : [];
+  const [activeViewers, setActiveViewers] = useState(viewers ? getActiveViewers(viewers) : []);
 
-  return <SmallPresence count={activeViewers.length} />;
+  useEffect(() => {
+    if (viewers) {
+      setActiveViewers(getActiveViewers(viewers));
+      const interval = setInterval(() => {
+        setActiveViewers(getActiveViewers(viewers));
+      }, REFRESH_INTERVAL);
+      return () => clearInterval(interval);
+    }
+  }, [viewers]);
+
+  return <SmallPresence id={id} count={activeViewers.length} />;
 };
 
-export const SmallPresence = ({ count }: { count: number }) => {
+export const SmallPresence = ({ id, count }: { id?: string; count: number }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
+  const { hasAttention, isAncestor, isRelated } = useAttention(id);
+  const attention = hasAttention || isAncestor || isRelated;
+
   return (
     <Tooltip.Root>
       <Tooltip.Trigger asChild>
-        <AttentionGlyph presence={count > 1 ? 'many' : count === 1 ? 'one' : 'none'} classNames='self-center mie-1' />
+        {/* TODO(wittjosiah): Don't depend on data attribute just pass prop to AttentionGlyph. */}
+        <div role='none' className='flex' data-attention={attention}>
+          <AttentionGlyph presence={count > 1 ? 'many' : count === 1 ? 'one' : 'none'} classNames='self-center mie-1' />
+        </div>
       </Tooltip.Trigger>
       <Tooltip.Portal>
         <Tooltip.Content side='bottom' classNames='z-[70]'>

package/src/components/SpaceSettings.tsx

@@ -5,8 +5,8 @@
 import React from 'react';
 
 import { useIntentDispatcher, useResolvePlugins } from '@dxos/app-framework';
-import { SettingsValue } from '@dxos/plugin-settings';
 import { Input, Select, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { FormInput } from '@dxos/react-ui-data';
 
 import { SpaceAction, SPACE_PLUGIN } from '../meta';
 import { parseSpaceInitPlugin, type SpaceSettingsProps } from '../types';
@@ -18,7 +18,7 @@ export const SpaceSettings = ({ settings }: { settings: SpaceSettingsProps }) =>
 
   return (
     <>
-      <SettingsValue label={t('show hidden spaces label')}>
+      <FormInput label={t('show hidden spaces label')}>
         <Input.Switch
           checked={settings.showHidden}
           onCheckedChange={(checked) =>
@@ -29,9 +29,9 @@ export const SpaceSettings = ({ settings }: { settings: SpaceSettingsProps }) =>
             })
           }
         />
-      </SettingsValue>
+      </FormInput>
 
-      <SettingsValue label={t('default on space create label')}>
+      <FormInput label={t('default on space create label')}>
         <Select.Root
           value={settings.onSpaceCreate}
           onValueChange={(value) => {
@@ -57,7 +57,7 @@ export const SpaceSettings = ({ settings }: { settings: SpaceSettingsProps }) =>
             </Select.Content>
           </Select.Portal>
         </Select.Root>
-      </SettingsValue>
+      </FormInput>
     </>
   );
 };

package/src/components/SpaceSettingsPanel.tsx

@@ -0,0 +1,59 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback, useState } from 'react';
+
+import { log } from '@dxos/log';
+import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
+import { type Space } from '@dxos/react-client/echo';
+import { Input, useTranslation } from '@dxos/react-ui';
+
+import { SPACE_PLUGIN } from '../meta';
+
+export type SpaceSettingsPanelProps = {
+  space: Space;
+};
+
+export const SpaceSettingsPanel = ({ space }: SpaceSettingsPanelProps) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const [edgeReplication, setEdgeReplication] = useState(
+    space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED,
+  );
+
+  const toggleEdgeReplication = useCallback(
+    async (next: boolean) => {
+      setEdgeReplication(next);
+      await space?.internal
+        .setEdgeReplicationPreference(next ? EdgeReplicationSetting.ENABLED : EdgeReplicationSetting.DISABLED)
+        .catch((err) => {
+          log.catch(err);
+          setEdgeReplication(!next);
+        });
+    },
+    [space],
+  );
+
+  return (
+    <div role='form' className='flex flex-col w-full p-2 gap-4'>
+      <Input.Root>
+        <div role='none' className='flex flex-col gap-1'>
+          <Input.Label>{t('name label')}</Input.Label>
+          <Input.TextInput
+            placeholder={t('name placeholder')}
+            value={space.properties.name}
+            onChange={(event) => {
+              space.properties.name = event.target.value;
+            }}
+          />
+        </div>
+      </Input.Root>
+      <Input.Root>
+        <div role='none' className='flex justify-between'>
+          <Input.Label>{t('edge replication label')}</Input.Label>
+          <Input.Switch checked={edgeReplication} onCheckedChange={toggleEdgeReplication} />
+        </div>
+      </Input.Root>
+    </div>
+  );
+};

package/src/components/SyncStatus/SyncStatus.tsx

@@ -63,7 +63,7 @@ export const SyncStatusIndicator = ({ state }: { state: SpaceSyncStateMap }) =>
             classNames={classNames}
           />
         </Popover.Trigger>
-        <Popover.Content>
+        <Popover.Content sideOffset={16}>
           <SyncStatusDetail state={state} summary={summary} debug={false} />
         </Popover.Content>
       </Popover.Root>

package/src/components/index.ts

@@ -15,5 +15,6 @@ export * from './ShareSpaceButton';
 export * from './SpaceMain';
 export * from './SpacePresence';
 export * from './SpaceSettings';
+export * from './SpaceSettingsPanel';
 export * from './SaveStatus';
 export * from './SyncStatus';

package/src/translations.ts

@@ -10,8 +10,8 @@ export default [
       [SPACE_PLUGIN]: {
         'plugin name': 'Spaces',
         'first run message': 'Nothing selected.',
-        'create space label': 'Create a new space',
-        'join space label': 'Join a space',
+        'create space label': 'Create space',
+        'join space label': 'Join space',
         'empty space message': 'No documents',
         'empty tree message': 'No spaces',
         'unnamed space label': 'New space',
@@ -92,6 +92,8 @@ export default [
         'join success label': 'Successfully joined space',
         'name label': 'Name',
         'name placeholder': 'Name',
+        'unnamed object settings label': 'Settings',
+        'edge replication label': 'Enable EDGE Replication',
       },
     },
   },

package/src/types/types.ts

@@ -15,6 +15,7 @@ import type {
 import { type Expando } from '@dxos/echo-schema';
 import { type SchemaProvides } from '@dxos/plugin-client';
 import { type PublicKey } from '@dxos/react-client';
+import { type Space } from '@dxos/react-client/echo';
 import { type Label } from '@dxos/react-ui';
 import { type ComplexMap } from '@dxos/util';
 
@@ -99,7 +100,8 @@ export interface TypedObjectSerializer<T extends Expando = Expando> {
 
   /**
    * @param params.content
+   * @param params.space Space to use for deserializing schema references.
    * @param params.newId Generate new ID for deserialized object.
    */
-  deserialize(params: { content: string; newId?: boolean }): Promise<T>;
+  deserialize(params: { content: string; space: Space; newId?: boolean }): Promise<T>;
 }

package/src/util.tsx

@@ -154,7 +154,7 @@ const getCollectionGraphNodePartials = ({
     },
     onCopy: async (child: Node<EchoReactiveObject<any>>, index?: number) => {
       // Create clone of child and add to destination space.
-      const newObject = await cloneObject(child.data, resolve);
+      const newObject = await cloneObject(child.data, resolve, space);
       space.db.add(newObject);
       if (typeof index !== 'undefined') {
         collection.objects.splice(index, 0, newObject);
@@ -596,12 +596,12 @@ export const getNestedObjects = async (
  * @deprecated Workaround for ECHO not supporting clone.
  */
 // TODO(burdon): Remove.
-export const cloneObject = async (object: Expando, resolve: MetadataResolver): Promise<Expando> => {
+export const cloneObject = async (object: Expando, resolve: MetadataResolver, newSpace: Space): Promise<Expando> => {
   const schema = getSchema(object);
   const typename = schema ? getObjectAnnotation(schema)?.typename ?? EXPANDO_TYPENAME : EXPANDO_TYPENAME;
   const metadata = resolve(typename);
   const serializer = metadata.serializer;
   invariant(serializer, `No serializer for type: ${typename}`);
   const content = await serializer.serialize({ object });
-  return serializer.deserialize({ content, newId: true });
+  return serializer.deserialize({ content, space: newSpace, newId: true });
 };