@dxos/plugin-space 0.8.4-main.c85a9c8dae → 0.8.4-main.d9fc60f731

package/src/containers/SpacePresence/SpacePresence.tsx

@@ -2,11 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-import * as Option from 'effect/Option';
 import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 
 import { useAtomCapability } from '@dxos/app-framework/ui';
-import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { generateName } from '@dxos/display-name';
 import { type Key, Obj } from '@dxos/echo';
 import { PublicKey } from '@dxos/react-client';
@@ -25,12 +23,11 @@ import {
   useDefaultValue,
   useTranslation,
 } from '@dxos/react-ui';
-import { AttentionGlyph, type AttentionGlyphProps, useAttended, useAttention } from '@dxos/react-ui-attention';
+import { AttentionGlyph, type AttentionGlyphProps, useAttention } from '@dxos/react-ui-attention';
 import { ComplexMap, keyToFallback } from '@dxos/util';
 
-import { usePath } from '../../hooks';
-import { meta } from '../../meta';
-import { type ObjectViewerProps, SpaceCapabilities } from '../../types';
+import { meta } from '#meta';
+import { type ObjectViewerProps, SpaceCapabilities } from '#types';
 
 // TODO(thure): Get/derive these values from protocol
 const REFRESH_INTERVAL = 5000;
@@ -74,7 +71,7 @@ export const SpacePresence = ({ object, spaceId }: SpacePresenceProps) => {
     return null;
   }
 
-  const currentObjectViewers = ephemeral.viewersByObject[Obj.getDXN(object).toString()] ?? noViewers;
+  const currentObjectViewers = ephemeral.viewersByObject[Obj.getURI(object)] ?? noViewers;
 
   const membersForObject = spaceMembers
     .filter((member) => memberOnline(member) && memberIsNotSelf(member))
@@ -220,17 +217,8 @@ export type SmallPresenceLiveProps = {
 
 export const SmallPresenceLive = ({ id, open, viewers }: SmallPresenceLiveProps) => {
   const { hasAttention, isAncestor, isRelated } = useAttention(id);
-  const isAttended = hasAttention || isAncestor || isRelated;
-
-  // TODO(wittjosiah): If the attended node is deep in the graph and the graph is not fully loaded
-  //   this will result in an empty path until the graph is connected.
-  // TODO(wittjosiah): Consider using this indicator for all open nodes instead of just attended.
-  const { graph } = useAppGraph();
-  const attended = useAttended();
-  const startOfAttention = attended.at(-1);
-  const path = usePath(graph, startOfAttention);
-  const containsAttended = !open && !isAttended && id && Option.isSome(path) ? path.value.includes(id) : false;
-
+  const attended = hasAttention || isRelated;
+  const containsAttended = isAncestor && !open;
   const getActiveViewers = (viewers: ComplexMap<PublicKey, ObjectViewerProps>): ObjectViewerProps[] => {
     const moment = Date.now();
     return Array.from<ObjectViewerProps>(viewers.values()).filter(
@@ -250,7 +238,7 @@ export const SmallPresenceLive = ({ id, open, viewers }: SmallPresenceLiveProps)
     }
   }, [viewers]);
 
-  return <SmallPresence count={activeViewers.length} attended={isAttended} containsAttended={containsAttended} />;
+  return <SmallPresence count={activeViewers.length} attended={attended} containsAttended={containsAttended} />;
 };
 
 export type SmallPresenceProps = {
@@ -261,7 +249,7 @@ export const SmallPresence = ({ count = 0, attended, containsAttended }: SmallPr
   const { t } = useTranslation(meta.id);
 
   return (
-    <Tooltip.Trigger asChild content={t('presence label', { count })} side='bottom'>
+    <Tooltip.Trigger asChild content={t('presence.label', { count })} side='bottom'>
       <AttentionGlyph
         attended={attended}
         containsAttended={containsAttended}

package/src/containers/SpacePresence/index.ts

@@ -2,6 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-import { SpacePresence } from './SpacePresence';
-
-export default SpacePresence;
+export { SpacePresence, SmallPresenceLive } from './SpacePresence';
+export { SpacePresence as default } from './SpacePresence';

package/src/containers/SpaceRenamePopover/SpaceRenamePopover.tsx

@@ -11,9 +11,9 @@ import { Obj } from '@dxos/echo';
 import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
 import { osTranslations } from '@dxos/ui-theme';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
-export const SPACE_RENAME_POPOVER = `${meta.id}/SpaceRenamePopover`;
+export const SPACE_RENAME_POPOVER = `${meta.id}.SpaceRenamePopover`;
 
 export const SpaceRenamePopover = ({ space }: { space: Space }) => {
   const { t } = useTranslation(meta.id);
@@ -22,21 +22,21 @@ export const SpaceRenamePopover = ({ space }: { space: Space }) => {
   const { invokePromise } = useOperationInvoker();
 
   const handleDone = useCallback(() => {
-    Obj.change(space.properties, (p) => {
-      p.name = name;
+    Obj.update(space.properties, (obj) => {
+      obj.name = name;
     });
     void invokePromise(LayoutOperation.UpdatePopover, { anchorId: '', state: false });
   }, [space, name, invokePromise]);
 
   // TODO(thure): Why does the input value need to be uncontrolled to work?
   return (
-    <div role='none' className='p-2 flex gap-2'>
-      <div role='none' className='flex-1'>
+    <div className='p-2 flex gap-2'>
+      <div className='flex-1'>
         <Input.Root>
-          <Input.Label srOnly>{t('space name label')}</Input.Label>
+          <Input.Label srOnly>{t('space-name.label')}</Input.Label>
           <Input.TextInput
             defaultValue={space.properties.name ?? ''}
-            placeholder={t('unnamed space label')}
+            placeholder={t('unnamed-space.label')}
             onChange={({ target: { value } }) => setName(value)}
             // TODO(wittjosiah): Ideally this should access the popover context to close the popover.
             //   Currently this is not possible because Radix does not expose the popover context.
@@ -46,7 +46,7 @@ export const SpaceRenamePopover = ({ space }: { space: Space }) => {
       </div>
       <Popover.Close asChild>
         <Button ref={doneButton} classNames='self-stretch' onClick={handleDone}>
-          {t('done label', { ns: osTranslations })}
+          {t('done.label', { ns: osTranslations })}
         </Button>
       </Popover.Close>
     </div>

package/src/containers/SpaceRenamePopover/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-import { SpaceRenamePopover } from './SpaceRenamePopover';
-
-export default SpaceRenamePopover;
+export { SpaceRenamePopover as default } from './SpaceRenamePopover';

package/src/containers/SpaceSettingsContainer/SpaceSettingsContainer.stories.tsx

@@ -5,22 +5,23 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { OperationPlugin } from '@dxos/app-framework';
+import { ProcessManagerPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/react-ui/testing';
+import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
 
-import { SpaceSettingsContainer, type SpaceSettingsContainerProps } from './SpaceSettingsContainer';
+import { SpaceSettingsContainer } from './SpaceSettingsContainer';
 
-const Story = (props: Partial<SpaceSettingsContainerProps>) => {
+const Story = (props: Partial<AppSurface.SpaceArticleProps>) => {
   const { space } = useClientStory();
-  return (
-    <div role='none' className='p-2 border border-primary-500 rounded-sm'>
-      <SpaceSettingsContainer {...props} space={space!} />
-    </div>
-  );
+  if (!space) {
+    return <Loading />;
+  }
+
+  return <SpaceSettingsContainer role='article' attendableId={space.id} {...props} space={space} />;
 };
 
 const meta = {
@@ -29,13 +30,14 @@ const meta = {
   render: Story,
   decorators: [
     withTheme(),
+    withLayout({ layout: 'fullscreen' }),
     withClientProvider({ createIdentity: true, createSpace: true }),
     // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
-    withPluginManager({ plugins: [OperationPlugin()] }),
+    withPluginManager({ plugins: [ProcessManagerPlugin()] }),
   ],
   parameters: {
     translations,
-    layout: 'centered',
+    layout: 'fullscreen',
   },
 } satisfies Meta<typeof SpaceSettingsContainer>;
 

package/src/containers/SpaceSettingsContainer/SpaceSettingsContainer.tsx

@@ -6,37 +6,28 @@ import * as Schema from 'effect/Schema';
 import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
 
 import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
-import { LayoutOperation } from '@dxos/app-toolkit';
+import { getPersonalSpace, getSpacePath, isPersonalSpace, LayoutOperation } from '@dxos/app-toolkit';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
 import { log } from '@dxos/log';
+import { SpaceArchive } from '@dxos/protocols/proto/dxos/client/services';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { useClient } from '@dxos/react-client';
-import { type Space, SpaceState } from '@dxos/react-client/echo';
-import { Button, Input, useFileDownload, useMulticastObservable, useTranslation } from '@dxos/react-ui';
+import { Button, Dialog, DropdownMenu, Icon, IconButton, Input, useTranslation } from '@dxos/react-ui';
 import { Form, type FormFieldMap, Settings } from '@dxos/react-ui-form';
 import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
 
-import { meta } from '../../meta';
-import { SpaceCapabilities, SpaceForm, SpaceOperation } from '../../types';
+import { meta } from '#meta';
+import { SpaceOperation } from '#operations';
+import { SpaceCapabilities, SpaceForm } from '#types';
 
-const SpaceFormSchema = SpaceForm.pipe(
-  Schema.extend(
-    Schema.Struct({
-      archived: Schema.Boolean.annotations({ title: 'Archive Space' }),
-    }),
-  ),
-);
-
-export type SpaceSettingsContainerProps = {
-  space: Space;
-};
+const SpaceFormSchema = SpaceForm;
 
 // TODO(wittjosiah): Handle space migrations here?
-export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) => {
+export const SpaceSettingsContainer = ({ space }: AppSurface.SpaceArticleProps) => {
   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,
   );
@@ -61,81 +52,75 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
       }
 
       if (changed['name'] || changed['icon'] || changed['hue']) {
-        Obj.change(space.properties, (p) => {
+        Obj.update(space.properties, (obj) => {
           if (changed['name'] && newValues.name !== undefined) {
-            p.name = newValues.name;
+            obj.name = newValues.name;
           }
           if (changed['icon']) {
-            p.icon = newValues.icon;
+            obj.icon = newValues.icon;
           }
           if (changed['hue']) {
-            p.hue = newValues.hue;
+            obj.hue = newValues.hue;
           }
         });
       }
-
-      if (changed['archived']) {
-        if (newValues.archived && !archived) {
-          void invokePromise(SpaceOperation.Close, { space });
-          void invokePromise(LayoutOperation.SwitchWorkspace, {
-            subject: client.spaces.default.id,
-          });
-        } else if (!newValues.archived && archived) {
-          void invokePromise(SpaceOperation.Open, { space });
-        }
-      }
     },
-    [space, client, archived, invokePromise, toggleEdgeReplication],
+    [space, toggleEdgeReplication],
   );
 
-  const values = useMemo(
+  const defaultValues = 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],
+    [space.properties.name, space.properties.icon, space.properties.hue, edgeReplication],
   );
 
+  const personal = isPersonalSpace(space);
+
   const fieldMap = useMemo<FormFieldMap>(
     () => ({
-      name: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback(
-          ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onValueChange(type, value),
-          [onValueChange, type],
-        );
-        return (
-          <Settings.ItemInput title={label} description={t('display name description')}>
-            <Input.TextInput
-              value={getValue()}
-              onChange={handleChange}
-              placeholder={t('display name input placeholder')}
-              classNames='min-w-64'
-            />
-          </Settings.ItemInput>
-        );
-      },
-      icon: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback((icon: string) => onValueChange(type, icon), [onValueChange, type]);
-        const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
-        return (
-          <Settings.Item title={label} description={t('icon description')}>
-            <IconPicker
-              value={getValue()}
-              onChange={handleChange}
-              onReset={handleReset}
-              classNames='justify-self-end'
-            />
-          </Settings.Item>
-        );
-      },
+      name: personal
+        ? () => null
+        : ({ type, label, getValue, onValueChange }) => {
+            const handleChange = useCallback(
+              ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onValueChange(type, value),
+              [onValueChange, type],
+            );
+            return (
+              <Settings.Item title={label} description={t('display-name.description')}>
+                <Input.TextInput
+                  value={getValue()}
+                  onChange={handleChange}
+                  placeholder={t('display-name-input.placeholder')}
+                  classNames='min-w-64'
+                />
+              </Settings.Item>
+            );
+          },
+      icon: personal
+        ? () => null
+        : ({ type, label, getValue, onValueChange }) => {
+            const handleChange = useCallback((icon: string) => onValueChange(type, icon), [onValueChange, type]);
+            const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+            return (
+              <Settings.Item title={label} description={t('icon.description')}>
+                <IconPicker
+                  value={getValue()}
+                  onChange={handleChange}
+                  onReset={handleReset}
+                  classNames='justify-self-end'
+                />
+              </Settings.Item>
+            );
+          },
       hue: ({ type, label, getValue, onValueChange }) => {
         const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
         const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
         return (
-          <Settings.Item title={label} description={t('hue description')}>
+          <Settings.Item title={label} description={t('hue.description')}>
             <HuePicker value={getValue()} onChange={handleChange} onReset={handleReset} classNames='justify-self-end' />
           </Settings.Item>
         );
@@ -143,59 +128,140 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
       edgeReplication: ({ type, label, getValue, onValueChange }) => {
         const handleChange = useCallback((checked: boolean) => onValueChange(type, checked), [onValueChange, type]);
         return (
-          <Settings.ItemInput title={label} description={t('edge replication description')}>
+          <Settings.Item title={label} description={t('edge-replication.description')}>
             <Input.Switch checked={getValue()} onCheckedChange={handleChange} classNames='justify-self-end' />
-          </Settings.ItemInput>
-        );
-      },
-      archived: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback(() => onValueChange(type, !getValue()), [onValueChange, type, getValue]);
-        return (
-          <Settings.ItemInput 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>
-          </Settings.ItemInput>
+          </Settings.Item>
         );
       },
     }),
-    [t, space, client],
+    [t, space, personal],
   );
 
-  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 handleBackupBinary = useCallback(async () => {
+    await invokePromise(SpaceOperation.ExportSpace, { space, format: SpaceArchive.Format.BINARY });
+  }, [space, invokePromise]);
+  const handleBackupJson = useCallback(async () => {
+    await invokePromise(SpaceOperation.ExportSpace, { space, format: SpaceArchive.Format.JSON });
+  }, [space, invokePromise]);
 
   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]);
+    await Promise.all(repairs.map((repair) => repair({ space, isDefault: isPersonalSpace(space) })));
+  }, [space, repairs]);
+
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
+  // Wired to an onClick handler: must resolve (never reject) so it can't trigger an unhandled rejection.
+  const handleDelete = useCallback(async () => {
+    try {
+      await invokePromise(SpaceOperation.Delete, { space });
+      setDeleteConfirmOpen(false);
+      const personalSpace = getPersonalSpace(client);
+      if (personalSpace) {
+        void invokePromise(LayoutOperation.SwitchWorkspace, { subject: getSpacePath(personalSpace.id) });
+      }
+    } catch (err) {
+      log.catch(err, { stage: 'delete: invocation rejected', spaceId: space.id });
+      setDeleteConfirmOpen(false);
+      void invokePromise(LayoutOperation.AddToast, {
+        id: `${space.id}-delete-failed`,
+        title: t('delete-space-failed.message'),
+        icon: 'ph--warning--regular',
+      });
+    }
+  }, [space, client, invokePromise, t]);
 
   return (
-    <Settings.Root>
+    <Settings.Viewport>
       <Settings.Section
-        title={t('space properties settings verbose label')}
-        description={t('space properties settings description', { ns: meta.id })}
+        title={t('space-properties-settings-verbose.label')}
+        description={t('space-properties-settings.description', { ns: meta.id })}
       >
-        <Form.Root fieldMap={fieldMap} schema={SpaceFormSchema} values={values} onValuesChanged={handleValuesChanged}>
+        <Form.Root
+          key={space.id}
+          fieldMap={fieldMap}
+          schema={SpaceFormSchema}
+          defaultValues={defaultValues}
+          onValuesChanged={handleValuesChanged}
+        >
           <Form.FieldSet />
         </Form.Root>
       </Settings.Section>
-      <Settings.Section title={t('space controls title')} description={t('space controls description')}>
-        <Settings.ItemInput title={t('backup space title')} description={t('backup space description')}>
-          <Button onClick={handleBackup}>{t('download backup label')}</Button>
-        </Settings.ItemInput>
-        <Settings.ItemInput title={t('repair space title')} description={t('repair space description')}>
-          <Button onClick={handleRepair}>{t('repair space label')}</Button>
-        </Settings.ItemInput>
+
+      <Settings.Section title={t('space-controls.title')} description={t('space-controls.description')}>
+        <Settings.Item title={t('space-key.title')} description={t('space-key.description')}>
+          <div className='flex items-center gap-2'>
+            <Input.Root>
+              <Input.TextInput value={space.key.toHex()} disabled classNames='flex-1 font-mono text-xs' />
+            </Input.Root>
+            <IconButton
+              icon='ph--copy--regular'
+              iconOnly
+              label={t('copy-space-key.label')}
+              onClick={() => {
+                void navigator.clipboard.writeText(space.key.toHex());
+              }}
+            />
+          </div>
+        </Settings.Item>
+        <Settings.Item title={t('backup-space.title')} description={t('backup-space.description')}>
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger asChild>
+              <Button>
+                {t('download-backup.label')}
+                <Icon icon='ph--caret-down--regular' size={4} classNames='mis-2' />
+              </Button>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content>
+              <DropdownMenu.Viewport>
+                <DropdownMenu.Item onClick={handleBackupBinary}>{t('download-backup-binary.label')}</DropdownMenu.Item>
+                <DropdownMenu.Item onClick={handleBackupJson}>{t('download-backup-json.label')}</DropdownMenu.Item>
+              </DropdownMenu.Viewport>
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        </Settings.Item>
+        <Settings.Item title={t('repair-space.title')} description={t('repair-space.description')}>
+          <Button onClick={handleRepair}>{t('repair-space.label')}</Button>
+        </Settings.Item>
+      </Settings.Section>
+
+      <Settings.Section title={t('danger-zone.title')} description={t('danger-zone.description')}>
+        {!personal && (
+          <Settings.Item title={t('delete-space.title')} description={t('delete-space.description')}>
+            <Dialog.Root open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>
+              <Dialog.Trigger asChild>
+                <Button variant='destructive' data-testid='spaceSettings.deleteSpace'>
+                  {t('delete-space.label')}
+                </Button>
+              </Dialog.Trigger>
+              <Dialog.Portal>
+                <Dialog.Overlay>
+                  <Dialog.Content>
+                    <Dialog.Header>
+                      <Dialog.Title>{t('delete-space-confirm.title')}</Dialog.Title>
+                    </Dialog.Header>
+                    <Dialog.Body>
+                      <Dialog.Description>{t('delete-space-confirm.description')}</Dialog.Description>
+                      <div className='flex justify-end gap-2 mbs-4'>
+                        <Dialog.Close asChild>
+                          <Button>{t('cancel.label')}</Button>
+                        </Dialog.Close>
+                        <Button
+                          variant='destructive'
+                          onClick={handleDelete}
+                          data-testid='spaceSettings.deleteSpaceConfirm'
+                        >
+                          {t('delete-space.label')}
+                        </Button>
+                      </div>
+                    </Dialog.Body>
+                  </Dialog.Content>
+                </Dialog.Overlay>
+              </Dialog.Portal>
+            </Dialog.Root>
+          </Settings.Item>
+        )}
       </Settings.Section>
-    </Settings.Root>
+    </Settings.Viewport>
   );
 };
 

package/src/containers/SpaceSettingsContainer/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-import { SpaceSettingsContainer } from './SpaceSettingsContainer';
-
-export default SpaceSettingsContainer;
+export { SpaceSettingsContainer as default } from './SpaceSettingsContainer';

package/src/containers/SyncStatus/SyncStatus.stories.tsx

@@ -7,7 +7,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
 
 import { SyncStatusIndicator } from './SyncStatus';