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

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.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { forwardRef, useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { useAppGraph, useCapability } from '@dxos/app-framework';
 import { generateName } from '@dxos/display-name';
@@ -20,7 +20,6 @@ import {
   List,
   ListItem,
   useDefaultValue,
-  type DxAvatar,
 } from '@dxos/react-ui';
 import { AttentionGlyph, useAttended, useAttention, type AttentionGlyphProps } from '@dxos/react-ui-attention';
 import { ComplexMap, keyToFallback } from '@dxos/util';
@@ -116,8 +115,8 @@ export const FullPresence = (props: MemberPresenceProps) => {
     <div className='dx-avatar-group' data-testid='spacePlugin.presence'>
       {members.slice(0, 3).map((member, i) => (
         <Tooltip.Root key={member.identity.identityKey.toHex()}>
-          <Tooltip.Trigger className='grid focus:outline-none'>
-            <PresenceAvatar
+          <Tooltip.Trigger>
+            <PrensenceAvatar
               identity={member.identity}
               match={member.currentlyAttended} // TODO(Zan): Match always true now we're showing 'members viewing current object'.
               index={members.length - i}
@@ -136,14 +135,13 @@ export const FullPresence = (props: MemberPresenceProps) => {
 
       {members.length > 3 && (
         <Tooltip.Root>
-          <Tooltip.Trigger className='grid focus:outline-none'>
+          <Tooltip.Trigger>
             <Avatar.Root>
               {/* TODO(wittjosiah): Make text fit. */}
               <Avatar.Content
                 status='inactive'
                 style={{ zIndex: members.length - 4 }}
                 fallback={`+${members.length - 3}`}
-                size={size}
               />
             </Avatar.Root>
           </Tooltip.Trigger>
@@ -159,7 +157,7 @@ export const FullPresence = (props: MemberPresenceProps) => {
                     data-testid='identity-list-item'
                   >
                     {/* TODO(Zan): Match always true now we're showing 'members viewing current object'. */}
-                    <PresenceAvatar identity={member.identity} size={size} showName match={member.currentlyAttended} />
+                    <PrensenceAvatar identity={member.identity} size={size} showName match={member.currentlyAttended} />
                   </ListItem.Root>
                 ))}
               </List>
@@ -179,28 +177,26 @@ type PresenceAvatarProps = Pick<AvatarContentProps, 'size'> & {
   onClick?: () => void;
 };
 
-const PresenceAvatar = forwardRef<DxAvatar, PresenceAvatarProps>(
-  ({ identity, showName, match, index, onClick, size }, forwardedRef) => {
-    const status = match ? 'current' : 'active';
-    const fallbackValue = keyToFallback(identity.identityKey);
-    return (
-      <Avatar.Root>
-        <Avatar.Content
-          status={status}
-          hue={identity.profile?.data?.hue || fallbackValue.hue}
-          data-testid='spacePlugin.presence.member'
-          data-status={status}
-          size={size}
-          {...(index ? { style: { zIndex: index } } : {})}
-          onClick={onClick}
-          fallback={identity.profile?.data?.emoji || fallbackValue.emoji}
-          ref={forwardedRef}
-        />
-        <Avatar.Label classNames={showName ? 'text-sm truncate pli-2' : 'sr-only'}>{getName(identity)}</Avatar.Label>
-      </Avatar.Root>
-    );
-  },
-);
+const PrensenceAvatar = ({ identity, showName, match, index, onClick, size }: PresenceAvatarProps) => {
+  const status = match ? 'current' : 'active';
+  const fallbackValue = keyToFallback(identity.identityKey);
+  return (
+    <Avatar.Root>
+      <Avatar.Content
+        status={status}
+        hue={identity.profile?.data?.hue || fallbackValue.hue}
+        data-testid='spacePlugin.presence.member'
+        data-status={status}
+        size={size}
+        classNames='mbs-2 mie-4'
+        {...(index ? { style: { zIndex: index } } : {})}
+        onClick={() => onClick?.()}
+        fallback={identity.profile?.data?.emoji || fallbackValue.emoji}
+      />
+      <Avatar.Label classNames={showName ? 'text-sm truncate pli-2' : 'sr-only'}>{getName(identity)}</Avatar.Label>
+    </Avatar.Root>
+  );
+};
 
 export type SmallPresenceLiveProps = {
   id?: string;

package/src/components/SpaceSettings/{SpaceSettingsContainer.stories.tsx → SpacePropertiesForm.stories.tsx}

@@ -10,21 +10,21 @@ import React from 'react';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { SpaceSettingsContainer, type SpaceSettingsContainerProps } from './SpaceSettingsContainer';
+import { SpacePropertiesForm, type SpacePropertiesFormProps } from './SpacePropertiesForm';
 import translations from '../../translations';
 
-const Story = (args: Partial<SpaceSettingsContainerProps>) => {
+const Story = (args: Partial<SpacePropertiesFormProps>) => {
   const { space } = useClientProvider();
   return (
     <div role='none' className='p-2 border border-primary-500 rounded'>
-      <SpaceSettingsContainer {...args} space={space!} />
+      <SpacePropertiesForm {...args} space={space!} />
     </div>
   );
 };
 
 const meta: Meta = {
-  title: 'plugins/plugin-space/SpaceSettingsContainer',
-  component: SpaceSettingsContainer,
+  title: 'plugins/plugin-space/SpacePropertiesForm',
+  component: SpacePropertiesForm,
   render: Story,
   decorators: [withClientProvider({ createIdentity: true, createSpace: true }), withTheme],
   parameters: {
@@ -35,4 +35,4 @@ const meta: Meta = {
 
 export default meta;
 
-export const Default: StoryObj<typeof SpaceSettingsContainer> = {};
+export const Default: StoryObj<typeof SpacePropertiesForm> = {};

package/src/components/SpaceSettings/SpacePropertiesForm.tsx

@@ -0,0 +1,136 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Schema as S } from 'effect';
+import React, { type ChangeEvent, useCallback, useMemo, 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 { Form, type InputComponent, ControlItem, ControlItemInput } from '@dxos/react-ui-form';
+import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
+
+import { SPACE_PLUGIN } from '../../meta';
+import { SpaceForm } from '../../types';
+
+export type SpacePropertiesFormProps = {
+  space: Space;
+};
+
+export const SpacePropertiesForm = ({ space }: SpacePropertiesFormProps) => {
+  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: unknown) => {
+          log.catch(err);
+          setEdgeReplication(!next);
+        });
+    },
+    [space],
+  );
+
+  const handleSave = useCallback(
+    (properties: S.Schema.Type<typeof SpaceForm>) => {
+      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;
+      }
+    },
+    [space, toggleEdgeReplication],
+  );
+
+  const values = useMemo(
+    () => ({
+      name: space.properties.name,
+      icon: space.properties.icon,
+      hue: space.properties.hue,
+      edgeReplication,
+    }),
+    [space.properties.name, space.properties.icon, space.properties.hue, edgeReplication],
+  );
+
+  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>
+        );
+      },
+    }),
+    [t],
+  );
+
+  return (
+    <Form
+      schema={SpaceForm}
+      values={values}
+      autoSave
+      onSave={handleSave}
+      Custom={customElements}
+      classNames='p-0 container-max-width [&_[role="form"]]:grid [&_[role="form"]]:grid-cols-1 md:[&_[role="form"]]:grid-cols-[1fr_min-content] [&_[role="form"]]:gap-4'
+    />
+  );
+};