@dxos/plugin-space 0.8.4-main.84f28bd → 0.8.4-main.937b3ca

package/src/components/{SpacePresence.tsx → SpacePresence/SpacePresence.tsx}

@@ -2,35 +2,34 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Option } from 'effect';
+import * as Option from 'effect/Option';
 import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 
-import { useAppGraph, useCapability } from '@dxos/app-framework';
+import { useAppGraph, useAtomCapability } from '@dxos/app-framework/react';
 import { generateName } from '@dxos/display-name';
-import { type Type } from '@dxos/echo';
-import { PublicKey, useClient } from '@dxos/react-client';
-import { getSpace, useMembers, type SpaceMember, fullyQualifiedId } from '@dxos/react-client/echo';
+import { type Key, Obj } from '@dxos/echo';
+import { PublicKey } from '@dxos/react-client';
+import { type SpaceMember, useMembers, useSpace } from '@dxos/react-client/echo';
 import { type Identity, useIdentity } from '@dxos/react-client/halo';
 import {
   Avatar,
   type AvatarContentProps,
+  type DxAvatar,
+  List,
+  ListItem,
+  Popover,
   type Size,
   type ThemedClassName,
   Tooltip,
-  Popover,
-  useTranslation,
-  List,
-  ListItem,
   useDefaultValue,
-  type DxAvatar,
+  useTranslation,
 } from '@dxos/react-ui';
-import { AttentionGlyph, useAttended, useAttention, type AttentionGlyphProps } from '@dxos/react-ui-attention';
+import { AttentionGlyph, type AttentionGlyphProps, useAttended, useAttention } from '@dxos/react-ui-attention';
 import { ComplexMap, keyToFallback } from '@dxos/util';
 
-import { SpaceCapabilities } from '../capabilities';
-import { usePath } from '../hooks';
-import { SPACE_PLUGIN } from '../meta';
-import type { ObjectViewerProps } from '../types';
+import { usePath } from '../../hooks';
+import { meta } from '../../meta';
+import { type ObjectViewerProps, SpaceCapabilities } from '../../types';
 
 // TODO(thure): Get/derive these values from protocol
 const REFRESH_INTERVAL = 5000;
@@ -42,13 +41,17 @@ const noViewers = new ComplexMap<PublicKey, ObjectViewerProps>(PublicKey.hash);
 // TODO(wittjosiah): Factor out?
 const getName = (identity: Identity) => identity.profile?.displayName ?? generateName(identity.identityKey.toHex());
 
-export const SpacePresence = ({ object, spaceKey }: { object: Type.Expando; spaceKey?: PublicKey }) => {
-  // TODO(wittjosiah): Doesn't need to be mutable but readonly type messes with ComplexMap.
-  const spaceState = useCapability(SpaceCapabilities.MutableState);
-  const client = useClient();
+export type SpacePresenceProps = {
+  object: Obj.Unknown;
+  spaceId?: Key.SpaceId;
+};
+
+export const SpacePresence = ({ object, spaceId }: SpacePresenceProps) => {
+  const ephemeral = useAtomCapability(SpaceCapabilities.EphemeralState);
   const identity = useIdentity();
-  const space = spaceKey ? client.spaces.get(spaceKey) : getSpace(object);
-  const spaceMembers = useMembers(space?.key);
+  const db = Obj.getDatabase(object);
+  const space = useSpace(spaceId ?? db?.spaceId);
+  const spaceMembers = useMembers(spaceId ?? db?.spaceId);
 
   const [_moment, setMoment] = useState(Date.now());
 
@@ -66,11 +69,11 @@ export const SpacePresence = ({ object, spaceKey }: { object: Type.Expando; spac
 
   // TODO(thure): Could it be a smell to return early when there are interactions with `deepSignal` later, since it
   //  prevents reactivity?
-  if (!identity || !spaceState || !space) {
+  if (!identity || !ephemeral || !space) {
     return null;
   }
 
-  const currentObjectViewers = spaceState.viewersByObject[fullyQualifiedId(object)] ?? noViewers;
+  const currentObjectViewers = ephemeral.viewersByObject[Obj.getDXN(object).toString()] ?? noViewers;
 
   const membersForObject = spaceMembers
     .filter((member) => memberOnline(member) && memberIsNotSelf(member))
@@ -254,7 +257,7 @@ export type SmallPresenceProps = {
 } & Pick<AttentionGlyphProps, 'attended' | 'containsAttended'>;
 
 export const SmallPresence = ({ count = 0, attended, containsAttended }: SmallPresenceProps) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
+  const { t } = useTranslation(meta.id);
 
   return (
     <Tooltip.Trigger asChild content={t('presence label', { count })} side='bottom'>

package/src/components/SpacePresence/index.ts

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

package/src/components/{PopoverRenameSpace.tsx → SpaceRenamePopover/SpaceRenamePopover.tsx}

@@ -4,29 +4,29 @@
 
 import React, { useCallback, useRef, useState } from 'react';
 
-import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
-import { type Space } from '@dxos/react-client/echo';
+import { Common } from '@dxos/app-framework';
+import { useOperationInvoker } from '@dxos/app-framework/react';
+import { type Space } from '@dxos/client/echo';
+import { Obj } from '@dxos/echo';
 import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
+import { osTranslations } from '@dxos/ui-theme';
 
-import { SPACE_PLUGIN } from '../meta';
+import { meta } from '../../meta';
 
-export const POPOVER_RENAME_SPACE = `${SPACE_PLUGIN}/PopoverRenameSpace`;
+export const SPACE_RENAME_POPOVER = `${meta.id}/SpaceRenamePopover`;
 
-export const PopoverRenameSpace = ({ space }: { space: Space }) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
+export const SpaceRenamePopover = ({ space }: { space: Space }) => {
+  const { t } = useTranslation(meta.id);
   const doneButton = useRef<HTMLButtonElement>(null);
   const [name, setName] = useState(space.properties.name ?? '');
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
 
   const handleDone = useCallback(() => {
-    space.properties.name = name;
-    void dispatch(
-      createIntent(LayoutAction.UpdatePopover, {
-        part: 'popover',
-        options: { variant: 'react', anchorId: '', state: false },
-      }),
-    );
-  }, [space, name]);
+    Obj.change(space.properties, (p) => {
+      p.name = name;
+    });
+    void invokePromise(Common.LayoutOperation.UpdatePopover, { anchorId: '', state: false });
+  }, [space, name, invokePromise]);
 
   // TODO(thure): Why does the input value need to be uncontrolled to work?
   return (
@@ -46,7 +46,7 @@ export const PopoverRenameSpace = ({ space }: { space: Space }) => {
       </div>
       <Popover.Close asChild>
         <Button ref={doneButton} classNames='self-stretch' onClick={handleDone}>
-          {t('done label', { ns: 'os' })}
+          {t('done label', { ns: osTranslations })}
         </Button>
       </Popover.Close>
     </div>

package/src/components/SpaceRenamePopover/index.ts

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

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

@@ -2,37 +2,45 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/storybook-utils';
+import { OperationPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { SpaceSettingsContainer, type SpaceSettingsContainerProps } from './SpaceSettingsContainer';
 import { translations } from '../../translations';
 
-const Story = (args: Partial<SpaceSettingsContainerProps>) => {
-  const { space } = useClientProvider();
+import { SpaceSettingsContainer, type SpaceSettingsContainerProps } from './SpaceSettingsContainer';
+
+const Story = (props: Partial<SpaceSettingsContainerProps>) => {
+  const { space } = useClientStory();
   return (
     <div role='none' className='p-2 border border-primary-500 rounded'>
-      <SpaceSettingsContainer {...args} space={space!} />
+      <SpaceSettingsContainer {...props} space={space!} />
     </div>
   );
 };
 
-const meta: Meta = {
+const meta = {
   title: 'plugins/plugin-space/SpaceSettingsContainer',
   component: SpaceSettingsContainer,
   render: Story,
-  decorators: [withClientProvider({ createIdentity: true, createSpace: true }), withTheme],
+  decorators: [
+    withTheme,
+    withClientProvider({ createIdentity: true, createSpace: true }),
+    // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
+    withPluginManager({ plugins: [OperationPlugin()] }),
+  ],
   parameters: {
     translations,
     layout: 'centered',
   },
-};
+} satisfies Meta<typeof SpaceSettingsContainer>;
 
 export default meta;
 
+type Story = StoryObj<typeof meta>;
+
 export const Default: StoryObj<typeof SpaceSettingsContainer> = {};

package/src/components/SpaceSettings/SpaceSettingsContainer.tsx

@@ -2,31 +2,37 @@
 // Copyright 2024 DXOS.org
 //
 
-import { pipe, Schema } from 'effect';
-import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
+import * as Schema from 'effect/Schema';
+import React, { type ChangeEvent, forwardRef, useCallback, useMemo, useState } from 'react';
 
-import { chain, createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { Common } from '@dxos/app-framework';
+import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/react';
+import { Obj } from '@dxos/echo';
 import { log } from '@dxos/log';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { useClient } from '@dxos/react-client';
-import { SpaceState, type Space } from '@dxos/react-client/echo';
-import { Button, Input, useMulticastObservable, useTranslation } from '@dxos/react-ui';
+import { type Space, SpaceState } from '@dxos/react-client/echo';
+import { Button, Input, useFileDownload, useMulticastObservable, useTranslation } from '@dxos/react-ui';
 import {
-  Form,
-  type InputComponent,
   ControlItem,
   ControlItemInput,
-  ControlSection,
   ControlPage,
+  ControlSection,
+  Form,
+  type FormFieldMap,
 } from '@dxos/react-ui-form';
+import { Layout } from '@dxos/react-ui-mosaic';
 import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
-import { StackItem } from '@dxos/react-ui-stack';
 
-import { SPACE_PLUGIN } from '../../meta';
-import { SpaceAction, SpaceForm } from '../../types';
+import { meta } from '../../meta';
+import { SpaceCapabilities, SpaceForm, SpaceOperation } from '../../types';
 
-const FormSchema = SpaceForm.pipe(
-  Schema.extend(Schema.Struct({ archived: Schema.Boolean.annotations({ title: 'Archive space' }) })),
+const SpaceFormSchema = SpaceForm.pipe(
+  Schema.extend(
+    Schema.Struct({
+      archived: Schema.Boolean.annotations({ title: 'Archive Space' }),
+    }),
+  ),
 );
 
 export type SpaceSettingsContainerProps = {
@@ -34,151 +40,181 @@ export type SpaceSettingsContainerProps = {
 };
 
 // TODO(wittjosiah): Handle space migrations here?
-export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const client = useClient();
-  const archived = useMulticastObservable(space.state) === SpaceState.SPACE_INACTIVE;
-  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: unknown) => {
-          log.catch(err);
-          setEdgeReplication(!next);
-        });
-    },
-    [space],
-  );
+export const SpaceSettingsContainer = forwardRef<HTMLDivElement, SpaceSettingsContainerProps>(
+  ({ space }, forwardedRef) => {
+    const { t } = useTranslation(meta.id);
+    const { invokePromise } = useOperationInvoker();
+    const client = useClient();
+    const archived = useMulticastObservable(space.state) === SpaceState.SPACE_INACTIVE;
+    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: unknown) => {
+            log.catch(err);
+            setEdgeReplication(!next);
+          });
+      },
+      [space],
+    );
 
-  const handleSave = useCallback(
-    (properties: Schema.Schema.Type<typeof FormSchema>) => {
-      void toggleEdgeReplication(properties.edgeReplication);
-      if (properties.name !== space.properties.name) {
-        space.properties.name = properties.name;
-      }
-      if (properties.icon !== space.properties.icon) {
-        space.properties.icon = properties.icon;
-      }
-      if (properties.hue !== space.properties.hue) {
-        space.properties.hue = properties.hue;
-      }
-      if (properties.archived && !archived) {
-        void dispatch(
-          pipe(
-            createIntent(SpaceAction.Close, { space }),
-            chain(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: client.spaces.default.id }),
-          ),
-        );
-      } else if (!properties.archived && archived) {
-        void dispatch(createIntent(SpaceAction.Open, { space }));
-      }
-    },
-    [space, toggleEdgeReplication, archived],
-  );
+    const handleSave = useCallback(
+      (properties: Schema.Schema.Type<typeof SpaceFormSchema>) => {
+        void toggleEdgeReplication(properties.edgeReplication ?? false);
+        const nameChanged = properties.name !== space.properties.name;
+        const iconChanged = properties.icon !== space.properties.icon;
+        const hueChanged = properties.hue !== space.properties.hue;
+        if (nameChanged || iconChanged || hueChanged) {
+          Obj.change(space.properties, (p) => {
+            if (nameChanged) {
+              p.name = properties.name;
+            }
+            if (iconChanged) {
+              p.icon = properties.icon;
+            }
+            if (hueChanged) {
+              p.hue = properties.hue;
+            }
+          });
+        }
+        if (properties.archived && !archived) {
+          void (async () => {
+            await invokePromise(SpaceOperation.Close, { space });
+            await invokePromise(Common.LayoutOperation.SwitchWorkspace, { subject: client.spaces.default.id });
+          })();
+        } else if (!properties.archived && archived) {
+          void invokePromise(SpaceOperation.Open, { space });
+        }
+      },
+      [space, toggleEdgeReplication, archived],
+    );
 
-  const values = useMemo(
-    () => ({
-      name: space.properties.name,
-      icon: space.properties.icon,
-      hue: space.properties.hue,
-      edgeReplication,
-      archived,
-    }),
-    [space.properties.name, space.properties.icon, space.properties.hue, edgeReplication, archived],
-  );
+    const values = useMemo(
+      () => ({
+        name: space.properties.name,
+        icon: space.properties.icon,
+        hue: space.properties.hue,
+        edgeReplication,
+        archived,
+      }),
+      [space.properties.name, space.properties.icon, space.properties.hue, edgeReplication, archived],
+    );
 
-  const customElements: Partial<Record<string, InputComponent>> = useMemo(
-    () => ({
-      name: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback(
-          ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onValueChange(type, value),
-          [onValueChange, type],
-        );
-        return (
-          <ControlItemInput title={label} description={t('display name description')}>
-            <Input.TextInput
-              value={getValue()}
-              onChange={handleChange}
-              placeholder={t('display name input placeholder')}
-              classNames='min-is-64'
-            />
-          </ControlItemInput>
-        );
-      },
-      icon: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback((nextEmoji: string) => onValueChange(type, nextEmoji), [onValueChange, type]);
-        const handleEmojiReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
-        return (
-          <ControlItem title={label} description={t('icon description')}>
-            <IconPicker
-              value={getValue()}
-              onChange={handleChange}
-              onReset={handleEmojiReset}
-              classNames='justify-self-end'
-              iconSize={5}
-            />
-          </ControlItem>
-        );
-      },
-      hue: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
-        const handleHueReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
-        return (
-          <ControlItem title={label} description={t('hue description')}>
-            <HuePicker
-              value={getValue()}
-              onChange={handleChange}
-              onReset={handleHueReset}
-              classNames='[--hue-preview-size:1.25rem] justify-self-end'
-            />
-          </ControlItem>
-        );
-      },
-      edgeReplication: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback((checked: boolean) => onValueChange(type, checked), [onValueChange, type]);
-        return (
-          <ControlItemInput title={label} description={t('edge replication description')}>
-            <Input.Switch checked={getValue()} onCheckedChange={handleChange} classNames='justify-self-end' />
-          </ControlItemInput>
-        );
-      },
-      archived: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback(() => onValueChange(type, !getValue()), [onValueChange, type, getValue]);
-        return (
-          <ControlItemInput title={label} description={t('archive space description')}>
-            <Button disabled={space === client.spaces.default} onClick={handleChange}>
-              {getValue() ? t('unarchive space label') : t('archive space label')}
-            </Button>
-          </ControlItemInput>
-        );
-      },
-    }),
-    [t, space],
-  );
+    const fieldMap = useMemo<FormFieldMap>(
+      () => ({
+        name: ({ type, label, getValue, onValueChange }) => {
+          const handleChange = useCallback(
+            ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onValueChange(type, value),
+            [onValueChange, type],
+          );
+          return (
+            <ControlItemInput title={label} description={t('display name description')}>
+              <Input.TextInput
+                value={getValue()}
+                onChange={handleChange}
+                placeholder={t('display name input placeholder')}
+                classNames='min-is-64'
+              />
+            </ControlItemInput>
+          );
+        },
+        icon: ({ type, label, getValue, onValueChange }) => {
+          const handleChange = useCallback((icon: string) => onValueChange(type, icon), [onValueChange, type]);
+          const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+          return (
+            <ControlItem title={label} description={t('icon description')}>
+              <IconPicker
+                value={getValue()}
+                onChange={handleChange}
+                onReset={handleReset}
+                classNames='justify-self-end'
+              />
+            </ControlItem>
+          );
+        },
+        hue: ({ type, label, getValue, onValueChange }) => {
+          const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
+          const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+          return (
+            <ControlItem title={label} description={t('hue description')}>
+              <HuePicker
+                value={getValue()}
+                onChange={handleChange}
+                onReset={handleReset}
+                classNames='justify-self-end'
+              />
+            </ControlItem>
+          );
+        },
+        edgeReplication: ({ type, label, getValue, onValueChange }) => {
+          const handleChange = useCallback((checked: boolean) => onValueChange(type, checked), [onValueChange, type]);
+          return (
+            <ControlItemInput title={label} description={t('edge replication description')}>
+              <Input.Switch checked={getValue()} onCheckedChange={handleChange} classNames='justify-self-end' />
+            </ControlItemInput>
+          );
+        },
+        archived: ({ type, label, getValue, onValueChange }) => {
+          const handleChange = useCallback(() => onValueChange(type, !getValue()), [onValueChange, type, getValue]);
+          return (
+            <ControlItemInput title={label} description={t('archive space description')}>
+              <Button
+                disabled={space === client.spaces.default}
+                variant={getValue() ? 'default' : 'destructive'}
+                onClick={handleChange}
+              >
+                {getValue() ? t('unarchive space label') : t('archive space label')}
+              </Button>
+            </ControlItemInput>
+          );
+        },
+      }),
+      [t, space],
+    );
 
-  return (
-    <StackItem.Content classNames='block overflow-y-auto pli-2'>
-      <ControlPage>
-        <ControlSection
-          title={t('space properties settings verbose label', { ns: SPACE_PLUGIN })}
-          description={t('space properties settings description', { ns: SPACE_PLUGIN })}
-        >
-          <Form
-            schema={FormSchema}
-            values={values}
-            autoSave
-            onSave={handleSave}
-            Custom={customElements}
-            outerSpacing={false}
-            classNames='container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-4'
-          />
-        </ControlSection>
-      </ControlPage>
-    </StackItem.Content>
-  );
-};
+    const download = useFileDownload();
+    const handleBackup = useCallback(async () => {
+      const archive = await space.internal.export();
+      download(new Blob([archive.contents as Uint8Array<ArrayBuffer>]), archive.filename);
+    }, [space, download]);
+
+    const repairs = useCapabilities(SpaceCapabilities.Repair);
+    const handleRepair = useCallback(async () => {
+      await Promise.all(repairs.map((repair) => repair({ space, isDefault: client.spaces.default === space })));
+    }, [client, space, repairs]);
+
+    return (
+      <Layout.Container scrollable ref={forwardedRef}>
+        <ControlPage>
+          <ControlSection
+            title={t('space properties settings verbose label')}
+            description={t('space properties settings description', {
+              ns: meta.id,
+            })}
+          >
+            <Form.Root fieldMap={fieldMap} schema={SpaceFormSchema} values={values} autoSave onSave={handleSave}>
+              <Form.FieldSet />
+            </Form.Root>
+          </ControlSection>
+
+          <ControlSection title={t('space controls title')} description={t('space controls description')}>
+            <div role='none' className='container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]'>
+              <ControlItemInput title={t('backup space title')} description={t('backup space description')}>
+                <Button onClick={handleBackup}>{t('download backup label')}</Button>
+              </ControlItemInput>
+              <ControlItemInput title={t('repair space title')} description={t('repair space description')}>
+                <Button onClick={handleRepair}>{t('repair space label')}</Button>
+              </ControlItemInput>
+            </div>
+          </ControlSection>
+        </ControlPage>
+      </Layout.Container>
+    );
+  },
+);
+
+SpaceSettingsContainer.displayName = 'SpaceSettingsContainer';