@dxos/plugin-space 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446

package/src/components/MembersContainer.tsx

@@ -3,16 +3,15 @@
 //
 
 import { Check, X } from '@phosphor-icons/react';
-import React, { type Dispatch, type SetStateAction, useCallback, useMemo, useState } from 'react';
+import React, { type Dispatch, type SetStateAction, useMemo, useState } from 'react';
 import { QR } from 'react-qr-rounded';
 
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { log } from '@dxos/log';
 import { useConfig } from '@dxos/react-client';
 import { fullyQualifiedId, useSpaceInvitations, type Space } from '@dxos/react-client/echo';
 import { type CancellableInvitationObservable, Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
-import { Button, Clipboard, Icon, Input, useId, useTranslation } from '@dxos/react-ui';
-import { ControlPage, ControlSection, ControlFrame, ControlFrameItem, ControlItemInput } from '@dxos/react-ui-form';
+import { Button, Clipboard, Icon, useId, useTranslation } from '@dxos/react-ui';
+import { ControlSection, ControlFrame, ControlFrameItem } from '@dxos/react-ui-form';
 import { StackItem } from '@dxos/react-ui-stack';
 import { getSize, mx } from '@dxos/react-ui-theme';
 import {
@@ -28,8 +27,7 @@ import {
 import { hexToEmoji } from '@dxos/util';
 
 import { SPACE_PLUGIN } from '../meta';
-import { CollectionType, SpaceAction } from '../types';
-import { COMPOSER_SPACE_LOCK } from '../util';
+import { CollectionType } from '../types';
 
 // TODO(wittjosiah): Copied from Shell.
 const activeActionKey = 'dxos:react-shell/space-manager/active-action';
@@ -49,9 +47,8 @@ export const MembersContainer = ({
   space: Space;
   createInvitationUrl: (invitationCode: string) => string;
 }) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
+  const { t } = useTranslation('os');
   const config = useConfig();
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const invitations = useSpaceInvitations(space.key);
   const visibleInvitations = invitations?.filter(
     (invitation) => ![Invitation.State.CANCELLED].includes(invitation.get().state),
@@ -67,28 +64,20 @@ export const MembersContainer = ({
   // TODO(wittjosiah): Track which was the most recently viewed object.
   const target = space.properties[CollectionType.typename]?.target?.objects[0]?.target;
 
-  const locked = space.properties[COMPOSER_SPACE_LOCK];
-  const handleChangeLocked = useCallback(() => {
-    space.properties[COMPOSER_SPACE_LOCK] = !locked;
-  }, [locked, space]);
-
   const inviteActions = useMemo(
     (): Record<string, ActionMenuItem> => ({
       inviteOne: {
-        label: t('invite one label', { ns: 'os' }),
-        description: t('invite one description', { ns: 'os' }),
+        label: t('invite one label'),
+        description: t('invite one description'),
         icon: () => <Icon icon='ph--user-plus--regular' size={5} />,
         testId: 'membersContainer.inviteOne',
-        onClick: async () => {
-          const { data: invitation } = await dispatch(
-            createIntent(SpaceAction.Share, {
-              space,
-              type: Invitation.Type.INTERACTIVE,
-              authMethod: Invitation.AuthMethod.SHARED_SECRET,
-              multiUse: false,
-              target: target && fullyQualifiedId(target),
-            }),
-          );
+        onClick: () => {
+          const invitation = space.share?.({
+            type: Invitation.Type.INTERACTIVE,
+            authMethod: Invitation.AuthMethod.SHARED_SECRET,
+            multiUse: false,
+            target: target && fullyQualifiedId(target),
+          });
           if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {
             const subscription: ZenObservable.Subscription = invitation.subscribe((invitation) =>
               handleInvitationEvent(invitation, subscription),
@@ -97,20 +86,17 @@ export const MembersContainer = ({
         },
       },
       inviteMany: {
-        label: t('invite many label', { ns: 'os' }),
-        description: t('invite many description', { ns: 'os' }),
+        label: t('invite many label'),
+        description: t('invite many description'),
         icon: () => <Icon icon='ph--users-three--regular' size={5} />,
         testId: 'membersContainer.inviteMany',
-        onClick: async () => {
-          const { data: invitation } = await dispatch(
-            createIntent(SpaceAction.Share, {
-              space,
-              type: Invitation.Type.DELEGATED,
-              authMethod: Invitation.AuthMethod.KNOWN_PUBLIC_KEY,
-              multiUse: true,
-              target: target && fullyQualifiedId(target),
-            }),
-          );
+        onClick: () => {
+          const invitation = space.share?.({
+            type: Invitation.Type.DELEGATED,
+            authMethod: Invitation.AuthMethod.KNOWN_PUBLIC_KEY,
+            multiUse: true,
+            target: target && fullyQualifiedId(target),
+          });
           if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {
             const subscription: ZenObservable.Subscription = invitation.subscribe((invitation) =>
               handleInvitationEvent(invitation, subscription),
@@ -132,50 +118,38 @@ export const MembersContainer = ({
 
   return (
     <Clipboard.Provider>
-      <StackItem.Content classNames='block overflow-y-auto'>
-        <ControlPage>
-          <ControlSection title={t('members verbose label')} description={t('members description')}>
-            <ControlFrame>
-              <ControlFrameItem title={t('members label')}>
-                <SpaceMemberList spaceKey={space.key} includeSelf />
-              </ControlFrameItem>
-              {locked && (
-                <ControlFrameItem title={t('invitations label')}>
-                  <p className='text-description mbe-2'>{t('locked space description')}</p>
-                </ControlFrameItem>
-              )}
-              {!locked && (
-                <ControlFrameItem title={t('invitations label')}>
-                  {selectedInvitation && <InvitationSection {...selectedInvitation} onBack={handleBack} />}
-                  {!selectedInvitation && (
-                    <>
-                      <p className='text-description mbe-2'>{t('space invitation description')}</p>
-                      <InvitationList
-                        className='mb-2'
-                        send={handleSend}
-                        invitations={visibleInvitations ?? []}
-                        onClickRemove={(invitation) => invitation.cancel()}
-                        createInvitationUrl={createInvitationUrl}
-                      />
-                      <BifurcatedAction
-                        actions={inviteActions}
-                        activeAction={activeAction}
-                        onChangeActiveAction={setActiveAction as Dispatch<SetStateAction<string>>}
-                        data-testid='membersContainer.createInvitation'
-                      />
-                    </>
-                  )}
-                </ControlFrameItem>
+      <StackItem.Content classNames='p-2 block overflow-y-auto'>
+        <ControlSection
+          title={t('members verbose label', { ns: SPACE_PLUGIN })}
+          description={t('members description', { ns: SPACE_PLUGIN })}
+        >
+          <ControlFrame>
+            <ControlFrameItem title={t('members label', { ns: SPACE_PLUGIN })}>
+              <SpaceMemberList spaceKey={space.key} includeSelf />
+            </ControlFrameItem>
+            <ControlFrameItem title={t('invitations label', { ns: SPACE_PLUGIN })}>
+              {selectedInvitation && <InvitationSection {...selectedInvitation} onBack={handleBack} />}
+              {!selectedInvitation && (
+                <>
+                  <p className='text-description mbe-2'>{t('space invitation description', { ns: SPACE_PLUGIN })}</p>
+                  <InvitationList
+                    className='mb-2'
+                    send={handleSend}
+                    invitations={visibleInvitations ?? []}
+                    onClickRemove={(invitation) => invitation.cancel()}
+                    createInvitationUrl={createInvitationUrl}
+                  />
+                  <BifurcatedAction
+                    actions={inviteActions}
+                    activeAction={activeAction}
+                    onChangeActiveAction={setActiveAction as Dispatch<SetStateAction<string>>}
+                    data-testid='membersContainer.createInvitation'
+                  />
+                </>
               )}
-            </ControlFrame>
-            {/* TODO(wittjosiah): Make ControlItemInput & ControlFrame compatible. */}
-            <div className='justify-center gap-4 p-0 mbs-4 container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]'>
-              <ControlItemInput title={t('space locked label')} description={t('space locked description')}>
-                <Input.Switch checked={locked} onCheckedChange={handleChangeLocked} classNames='justify-self-end' />
-              </ControlItemInput>
-            </div>
-          </ControlSection>
-        </ControlPage>
+            </ControlFrameItem>
+          </ControlFrame>
+        </ControlSection>
       </StackItem.Content>
     </Clipboard.Provider>
   );

package/src/components/MenuFooter.tsx

@@ -5,14 +5,14 @@
 import { Planet } from '@phosphor-icons/react';
 import React from 'react';
 
-import { type AnyLiveObject, getSpace } from '@dxos/client/echo';
+import { type ReactiveEchoObject, getSpace } from '@dxos/client/echo';
 import { useClient } from '@dxos/react-client';
 import { DropdownMenu, toLocalizedString, useTranslation } from '@dxos/react-ui';
 
 import { SPACE_PLUGIN } from '../meta';
 import { getSpaceDisplayName } from '../util';
 
-export const MenuFooter = ({ object }: { object: AnyLiveObject<any> }) => {
+export const MenuFooter = ({ object }: { object: ReactiveEchoObject<any> }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const client = useClient();
   const space = getSpace(object);

package/src/components/{ObjectSettings → ObjectSettingsContainer}/AdvancedObjectSettings.tsx

@@ -5,7 +5,7 @@
 import React, { useCallback, useState } from 'react';
 
 import { type ForeignKey, ForeignKeySchema } from '@dxos/echo-schema';
-import { getMeta, type AnyLiveObject } from '@dxos/react-client/echo';
+import { getMeta, type ReactiveEchoObject } from '@dxos/react-client/echo';
 import { IconButton, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 
@@ -18,7 +18,7 @@ const initialValues = {
 };
 
 export type AdvancedObjectSettingsProps = {
-  object: AnyLiveObject<any>;
+  object: ReactiveEchoObject<any>;
 };
 
 export const AdvancedObjectSettings = ({ object }: AdvancedObjectSettingsProps) => {

package/src/components/{ObjectSettings → ObjectSettingsContainer}/BaseObjectSettings.tsx

@@ -4,7 +4,7 @@
 
 import React, { type PropsWithChildren, useRef } from 'react';
 
-import { type AnyLiveObject } from '@dxos/react-client/echo';
+import { type ReactiveEchoObject } from '@dxos/react-client/echo';
 import { Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
@@ -12,7 +12,7 @@ import { meta } from '../../meta';
 
 export type BaseObjectSettingsProps = ThemedClassName<
   PropsWithChildren<{
-    object: AnyLiveObject<any>;
+    object: ReactiveEchoObject<any>;
   }>
 >;
 

package/src/components/{ObjectSettings → ObjectSettingsContainer}/ObjectSettingsContainer.tsx

@@ -5,14 +5,15 @@
 import React, { useMemo } from 'react';
 
 import { Surface } from '@dxos/app-framework';
-import { type AnyLiveObject } from '@dxos/react-client/echo';
+import { type ReactiveEchoObject } from '@dxos/react-client/echo';
 import { Clipboard } from '@dxos/react-ui';
 import { StackItem } from '@dxos/react-ui-stack';
 
+import { AdvancedObjectSettings } from './AdvancedObjectSettings';
 import { BaseObjectSettings } from './BaseObjectSettings';
 
 export type ObjectSettingsContainerProps = {
-  object: AnyLiveObject<any>;
+  object: ReactiveEchoObject<any>;
   role: string;
 };
 
@@ -27,8 +28,7 @@ export const ObjectSettingsContainer = ({ object, role }: ObjectSettingsContaine
             <Surface role='base-object-settings' data={data} />
           </BaseObjectSettings>
           <Surface role='object-settings' data={data} />
-          {/* TODO(wittjosiah): Remove? */}
-          {/* <AdvancedObjectSettings object={object} /> */}
+          <AdvancedObjectSettings object={object} />
         </div>
       </StackItem.Content>
     </Clipboard.Provider>

package/src/components/PersistenceStatus.tsx

@@ -68,17 +68,20 @@ export const PersistenceStatus = ({ db }: { db: EchoDatabase }) => {
     case Status.PERSISTED_LOCALLY:
     default:
       return (
-        <Tooltip.Trigger
-          delayDuration={400}
-          role='status'
-          content={t('persisted locally message')}
-          className='flex items-center'
-        >
-          <CheckCircle className={mx(getSize(4), 'me-1')} />
-          {displayMessage && (
-            <span className={mx('text-sm', staticPlaceholderText)}>{t('persisted locally label')}</span>
-          )}
-        </Tooltip.Trigger>
+        <Tooltip.Root delayDuration={400}>
+          <Tooltip.Trigger role='status' className='flex items-center'>
+            <CheckCircle className={mx(getSize(4), 'me-1')} />
+            {displayMessage && (
+              <span className={mx('text-sm', staticPlaceholderText)}>{t('persisted locally label')}</span>
+            )}
+          </Tooltip.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content>
+              {t('persisted locally message')}
+              <Tooltip.Arrow />
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
       );
   }
 };

package/src/components/PopoverAddSpace.tsx

@@ -0,0 +1,46 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { IconButton, useTranslation } from '@dxos/react-ui';
+
+import { SPACE_PLUGIN } from '../meta';
+import { SpaceAction } from '../types';
+
+export const POPOVER_ADD_SPACE = `${SPACE_PLUGIN}/PopoverRenameSpace`;
+
+export const PopoverAddSpace = () => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  return (
+    <div role='none' className='grid grid-cols-1 gap-1 [&>button]:justify-start'>
+      <IconButton
+        variant='ghost'
+        label={t('create space label')}
+        icon='ph--plus--regular'
+        onClick={() => {
+          void dispatch(createIntent(SpaceAction.OpenCreateSpace));
+          void dispatch(
+            createIntent(LayoutAction.UpdatePopover, { part: 'popover', options: { anchorId: '', state: false } }),
+          );
+        }}
+        data-testid='spacePlugin.createSpace'
+      />
+      <IconButton
+        variant='ghost'
+        label={t('join space label')}
+        icon='ph--sign-in--regular'
+        onClick={() => {
+          void dispatch(createIntent(SpaceAction.Join));
+          void dispatch(
+            createIntent(LayoutAction.UpdatePopover, { part: 'popover', options: { anchorId: '', state: false } }),
+          );
+        }}
+        data-testid='spacePlugin.joinSpace'
+      />
+    </div>
+  );
+};

package/src/components/PopoverRenameObject.tsx

@@ -4,23 +4,21 @@
 
 import React, { useCallback, useRef, useState } from 'react';
 
-import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
-import { type Live } from '@dxos/live-object';
+import { type ReactiveObject } from '@dxos/live-object';
 import { log } from '@dxos/log';
-import { Button, Input, useTranslation } from '@dxos/react-ui';
+import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
 
 import { SPACE_PLUGIN } from '../meta';
 
 export const POPOVER_RENAME_OBJECT = `${SPACE_PLUGIN}/PopoverRenameObject`;
 
-export const PopoverRenameObject = ({ object: obj }: { object: Live<any> }) => {
+export const PopoverRenameObject = ({ object: obj }: { object: ReactiveObject<any> }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const doneButton = useRef<HTMLButtonElement>(null);
   // TODO(wittjosiah): Use schema here.
   const object = obj as any;
   // TODO(burdon): Field should not be hardcoded field.
   const [name, setName] = useState(object.name || object.title || '');
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
 
   const handleDone = useCallback(() => {
     try {
@@ -32,12 +30,6 @@ export const PopoverRenameObject = ({ object: obj }: { object: Live<any> }) => {
         log.error('Failed to rename object', { err });
       }
     }
-    void dispatch(
-      createIntent(LayoutAction.UpdatePopover, {
-        part: 'popover',
-        options: { variant: 'react', anchorId: '', state: false },
-      }),
-    );
   }, [object, name]);
 
   return (
@@ -54,9 +46,11 @@ export const PopoverRenameObject = ({ object: obj }: { object: Live<any> }) => {
           />
         </Input.Root>
       </div>
-      <Button ref={doneButton} classNames='self-stretch' onClick={handleDone}>
-        {t('done label', { ns: 'os' })}
-      </Button>
+      <Popover.Close asChild>
+        <Button ref={doneButton} classNames='self-stretch' onClick={handleDone}>
+          {t('done label', { ns: 'os' })}
+        </Button>
+      </Popover.Close>
     </div>
   );
 };

package/src/components/PopoverRenameSpace.tsx

@@ -4,7 +4,6 @@
 
 import React, { useCallback, useRef, useState } from 'react';
 
-import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
 import { type Space } from '@dxos/react-client/echo';
 import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
 
@@ -16,16 +15,9 @@ export const PopoverRenameSpace = ({ space }: { space: Space }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const doneButton = useRef<HTMLButtonElement>(null);
   const [name, setName] = useState(space.properties.name ?? '');
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
 
   const handleDone = useCallback(() => {
     space.properties.name = name;
-    void dispatch(
-      createIntent(LayoutAction.UpdatePopover, {
-        part: 'popover',
-        options: { variant: 'react', anchorId: '', state: false },
-      }),
-    );
   }, [space, name]);
 
   // TODO(thure): Why does the input value need to be uncontrolled to work?

package/src/components/ShareSpaceButton.stories.tsx

@@ -0,0 +1,27 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta } from '@storybook/react';
+
+import { withTheme } from '@dxos/storybook-utils';
+
+import { ShareSpaceButtonImpl } from './ShareSpaceButton';
+import translations from '../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/ShareSpaceButton.tsx

@@ -0,0 +1,32 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { type Space } from '@dxos/react-client/echo';
+import { IconButton, useTranslation } from '@dxos/react-ui';
+
+import { SPACE_PLUGIN } from '../meta';
+import { SpaceAction } from '../types';
+
+export const ShareSpaceButton = ({ space }: { space: Space }) => {
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+
+  return <ShareSpaceButtonImpl onClick={() => dispatch(createIntent(SpaceAction.Share, { space }))} />;
+};
+
+// TODO(wittjosiah): Better way to name pure/impure components?
+export const ShareSpaceButtonImpl = ({ onClick }: { onClick: () => void }) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+
+  return (
+    <IconButton
+      data-testid='spacePlugin.shareSpaceButton'
+      icon='ph--users--regular'
+      label={t('share space label')}
+      onClick={onClick}
+    />
+  );
+};

package/src/components/SpacePluginSettings.tsx

@@ -4,45 +4,20 @@
 
 import React from 'react';
 
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { useClient } from '@dxos/react-client';
-import { useSpaces } from '@dxos/react-client/echo';
-import { Input, toLocalizedString, useTranslation, List, ListItem, Button } from '@dxos/react-ui';
+import { Input, useTranslation } from '@dxos/react-ui';
 import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
 
 import { SPACE_PLUGIN } from '../meta';
-import { SpaceAction, type SpaceSettingsProps } from '../types';
-import { getSpaceDisplayName } from '../util';
+import { type SpaceSettingsProps } from '../types';
 
 export const SpacePluginSettings = ({ settings }: { settings: SpaceSettingsProps }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const client = useClient();
-  const spaces = useSpaces({ all: settings.showHidden });
 
-  // TODO(wittjosiah): Migrate to new form container.
   return (
     <DeprecatedFormContainer>
       <DeprecatedFormInput label={t('show hidden spaces label')}>
         <Input.Switch checked={settings.showHidden} onCheckedChange={(checked) => (settings.showHidden = !!checked)} />
       </DeprecatedFormInput>
-      <div role='none'>
-        <h2 className='text-xl my-4'>Space Settings</h2>
-        <List classNames='max-w-md mx-auto'>
-          {spaces.map((space) => (
-            <ListItem.Root key={space.id}>
-              <ListItem.Heading classNames='flex flex-col grow truncate mbe-2'>
-                {toLocalizedString(getSpaceDisplayName(space, { personal: space === client.spaces.default }), t)}
-              </ListItem.Heading>
-              <ListItem.Endcap>
-                <Button onClick={() => dispatch(createIntent(SpaceAction.OpenSettings, { space }))}>
-                  {t('open space settings label')}
-                </Button>
-              </ListItem.Endcap>
-            </ListItem.Root>
-          ))}
-        </List>
-      </div>
     </DeprecatedFormContainer>
   );
 };

package/src/components/SpacePresence.stories.tsx

@@ -100,7 +100,7 @@ export const Small = () => {
 
 const meta: Meta = {
   title: 'plugins/plugin-space/SpacePresence',
-  decorators: [withTheme, withLayout()],
+  decorators: [withTheme, withLayout({ tooltips: true })],
   parameters: { translations },
 };