@dxos/plugin-client 0.8.4-main.f9ba587 → 0.8.4-main.fcfe5033a5

package/src/{components → containers/DevicesContainer}/DevicesContainer.tsx

@@ -2,121 +2,97 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Check, X } from '@phosphor-icons/react';
 import React, { useCallback, useEffect, useState } from 'react';
 import { QR } from 'react-qr-rounded';
 
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { log } from '@dxos/log';
 import { useClient, useMulticastObservable } from '@dxos/react-client';
 import { type Device, useDevices } from '@dxos/react-client/halo';
 import { type CancellableInvitationObservable, Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
 import { useNetworkStatus } from '@dxos/react-client/mesh';
-import { Button, Clipboard, IconButton, List, useId, useTranslation } from '@dxos/react-ui';
-import {
-  ControlFrame,
-  ControlFrameItem,
-  ControlGroup,
-  ControlItem,
-  ControlPage,
-  ControlSection,
-} from '@dxos/react-ui-form';
-import { StackItem } from '@dxos/react-ui-stack';
-import { getSize, mx } from '@dxos/react-ui-theme';
+import { Button, Clipboard, Icon, IconButton, List, useId, useTranslation } from '@dxos/react-ui';
+import { Settings } from '@dxos/react-ui-form';
 import { AuthCode, Centered, DeviceListItem, Emoji, Viewport } from '@dxos/shell/react';
+import { osTranslations } from '@dxos/ui-theme';
 import { hexToEmoji } from '@dxos/util';
 
-import { CLIENT_PLUGIN } from '../meta';
-import { ClientAction } from '../types';
+import { meta } from '#meta';
+import { ClientOperation } from '#operations';
 
 export type DevicesContainerProps = {
   createInvitationUrl?: (invitationCode: string) => string;
 };
 
 export const DevicesContainer = ({ createInvitationUrl }: DevicesContainerProps) => {
-  const { t } = useTranslation('os');
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
   const devices = useDevices();
   const { swarm: connectionState } = useNetworkStatus();
 
-  const handleResetStorage = useCallback(() => dispatch(createIntent(ClientAction.ResetStorage)), [dispatch]);
+  const handleResetStorage = useCallback(() => invokePromise(ClientOperation.ResetStorage, {}), [invokePromise]);
 
   const handleRecover = useCallback(
-    () => dispatch(createIntent(ClientAction.ResetStorage, { mode: 'recover' })),
-    [dispatch],
+    () => invokePromise(ClientOperation.ResetStorage, { mode: 'recover' }),
+    [invokePromise],
   );
 
   const handleJoinNewIdentity = useCallback(
-    () => dispatch(createIntent(ClientAction.ResetStorage, { mode: 'join new identity' })),
-    [dispatch],
+    () => invokePromise(ClientOperation.ResetStorage, { mode: 'join-new-identity' }),
+    [invokePromise],
   );
 
   return (
     <Clipboard.Provider>
-      <StackItem.Content classNames='block overflow-y-auto'>
-        <ControlPage>
-          <ControlSection
-            title={t('devices verbose label', { ns: CLIENT_PLUGIN })}
-            description={t('devices description', { ns: CLIENT_PLUGIN })}
+      <Settings.Viewport>
+        <Settings.Section
+          title={t('devices-verbose.label', { ns: meta.id })}
+          description={t('devices.description', { ns: meta.id })}
+        >
+          <Settings.Panel>
+            <div role='group' className='min-w-0'>
+              <h3 className='text-lg mb-2'>{t('devices.label', { ns: meta.id })}</h3>
+              <List>
+                {devices.map((device: Device) => (
+                  <DeviceListItem key={device.deviceKey.toHex()} device={device} connectionState={connectionState} />
+                ))}
+              </List>
+            </div>
+            {createInvitationUrl && (
+              <div role='group' className='min-w-0'>
+                <h3 className='text-lg mb-2'>{t('add-device.label')}</h3>
+                <DeviceInvitation createInvitationUrl={createInvitationUrl} />
+              </div>
+            )}
+          </Settings.Panel>
+        </Settings.Section>
+        <Settings.Section
+          title={t('danger-zone.title', { ns: meta.id })}
+          description={t('danger-zone.description', { ns: meta.id })}
+        >
+          <Settings.Item title={t('reset-device.label')} description={t('reset-device.description', { ns: meta.id })}>
+            <Button variant='destructive' onClick={handleResetStorage} data-testid='devicesContainer.reset'>
+              {t('reset-device.label')}
+            </Button>
+          </Settings.Item>
+          <Settings.Item
+            title={t('recover-identity.label')}
+            description={t('recover-identity.description', { ns: meta.id })}
           >
-            <ControlFrame>
-              <ControlFrameItem title={t('devices label', { ns: CLIENT_PLUGIN })}>
-                <List>
-                  {devices.map((device: Device) => {
-                    return (
-                      <DeviceListItem
-                        key={device.deviceKey.toHex()}
-                        device={device}
-                        connectionState={connectionState}
-                      />
-                    );
-                  })}
-                </List>
-              </ControlFrameItem>
-              {createInvitationUrl && (
-                <ControlFrameItem title='Add device'>
-                  <DeviceInvitation createInvitationUrl={createInvitationUrl} />
-                </ControlFrameItem>
-              )}
-            </ControlFrame>
-          </ControlSection>
-          <ControlSection
-            title={t('danger zone title', { ns: CLIENT_PLUGIN })}
-            description={t('danger zone description', { ns: CLIENT_PLUGIN })}
+            <Button variant='destructive' onClick={handleRecover} data-testid='devicesContainer.recover'>
+              {t('recover-identity.label')}
+            </Button>
+          </Settings.Item>
+          <Settings.Item
+            title={t('join-new-identity.label')}
+            description={t('join-new-identity.description', { ns: meta.id })}
           >
-            <ControlGroup>
-              <ControlItem
-                title={t('reset device label')}
-                description={t('reset device description', { ns: CLIENT_PLUGIN })}
-              >
-                <Button variant='destructive' onClick={handleResetStorage} data-testid='devicesContainer.reset'>
-                  {t('reset device label')}
-                </Button>
-              </ControlItem>
-              <ControlItem
-                title={t('recover identity label')}
-                description={t('recover identity description', { ns: CLIENT_PLUGIN })}
-              >
-                <Button variant='destructive' onClick={handleRecover} data-testid='devicesContainer.recover'>
-                  {t('recover identity label')}
-                </Button>
-              </ControlItem>
-              <ControlItem
-                title={t('join new identity label')}
-                description={t('join new identity description', { ns: CLIENT_PLUGIN })}
-              >
-                <Button
-                  variant='destructive'
-                  onClick={handleJoinNewIdentity}
-                  data-testid='devicesContainer.joinExisting'
-                >
-                  {t('join new identity label')}
-                </Button>
-              </ControlItem>
-            </ControlGroup>
-          </ControlSection>
-        </ControlPage>
-      </StackItem.Content>
+            <Button variant='destructive' onClick={handleJoinNewIdentity} data-testid='devicesContainer.joinExisting'>
+              {t('join-new-identity.label')}
+            </Button>
+          </Settings.Item>
+        </Settings.Section>
+      </Settings.Viewport>
     </Clipboard.Provider>
   );
 };
@@ -191,7 +167,7 @@ const InvitationSection = ({
   onInvitationDone = () => {},
   onInvitationCreate = () => {},
 }: InvitationComponentProps) => {
-  const { t } = useTranslation(CLIENT_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const activeView =
     state < 0
       ? 'init'
@@ -200,14 +176,15 @@ const InvitationSection = ({
         : state >= Invitation.State.READY_FOR_AUTHENTICATION && authCode
           ? 'auth-code'
           : 'qr-code';
+
   return activeView === 'init' ? (
     <>
-      <p className='text-description mbe-2'>{t('add device description')}</p>
+      <p className='text-description mb-2'>{t('add-device.description')}</p>
       <IconButton
         icon='ph--plus--regular'
-        label={t('create device invitation label')}
+        label={t('create-device-invitation.label')}
         disabled={state >= 0}
-        classNames='is-full'
+        classNames='w-full'
         data-testid='devicesContainer.createInvitation'
         onClick={onInvitationCreate}
       />
@@ -233,30 +210,32 @@ const InvitationSection = ({
 };
 
 const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel: () => void }) => {
-  const { t } = useTranslation('os');
+  const { t } = useTranslation(osTranslations);
   const qrLabel = useId('devices-container__qr-code');
   const emoji = hexToEmoji(id);
   return (
     <>
-      <p className='text-description'>{t('qr code description', { ns: CLIENT_PLUGIN })}</p>
-      <div role='group' className='grid grid-cols-[1fr_min-content] mlb-2 gap-2'>
-        <div role='none' className='is-full aspect-square relative text-description'>
-          <QR
-            rounding={100}
-            backgroundColor='transparent'
-            color='currentColor'
-            aria-labelledby={qrLabel}
-            errorCorrectionLevel='Q'
-            cutout={true}
-          >
-            {url ?? 'never'}
-          </QR>
-          <Centered>
-            <Emoji text={emoji} />
-          </Centered>
+      <p className='text-description'>{t('qr-code.description', { ns: meta.id })}</p>
+      <div role='group' className='grid grid-cols-[1fr_min-content]'>
+        <div className='flex justify-center py-4'>
+          <div role='none' className='w-full md:max-w-80 aspect-square relative text-description'>
+            <QR
+              rounding={100}
+              backgroundColor='transparent'
+              color='currentColor'
+              aria-labelledby={qrLabel}
+              errorCorrectionLevel='Q'
+              cutout={true}
+            >
+              {url ?? 'never'}
+            </QR>
+            <Centered>
+              <Emoji text={emoji} />
+            </Centered>
+          </div>
         </div>
         <span id={qrLabel} className='sr-only'>
-          {t('qr label')}
+          {t('qr.label')}
         </span>
       </div>
       {/* TODO(burdon): Factor out button bar */}
@@ -264,7 +243,7 @@ const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel
         <div className='flex gap-2'>
           <Clipboard.Button value={url ?? 'never'} />
           <Button variant='ghost' onClick={onCancel}>
-            {t('cancel label')}
+            {t('cancel.label')}
           </Button>
         </div>
       </div>
@@ -273,22 +252,26 @@ const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel
 };
 
 const InvitationAuthCode = ({ id, code, onCancel }: { id: string; code: string; onCancel: () => void }) => {
-  const { t } = useTranslation('os');
+  const { t } = useTranslation(osTranslations);
   const emoji = hexToEmoji(id);
 
   return (
     <>
-      <p className='text-description'>{t('auth other device emoji message')}</p>
-      {emoji && <Emoji text={emoji} className='mli-auto mlb-2 text-center' />}
-      <p className='text-description'>{t('auth code message')}</p>
-      <AuthCode code={code} large classNames='mli-auto mlb-2 text-center grow' />
+      <p className='text-description'>{t('auth-other-device-emoji.message')}</p>
+      {emoji && <Emoji text={emoji} className='mx-auto my-2 text-center' />}
+      <p className='text-description'>{t('auth-code.message')}</p>
+      <AuthCode code={code} large classNames='mx-auto my-2 text-center grow' />
       <Button variant='ghost' onClick={onCancel}>
-        {t('cancel label')}
+        {t('cancel.label')}
       </Button>
     </>
   );
 };
 
 const InvitationComplete = ({ statusValue }: { statusValue: number }) => {
-  return statusValue > 0 ? <Check className={mx('m-1.5', getSize(6))} /> : <X className={mx('m-1.5', getSize(6))} />;
+  return statusValue > 0 ? (
+    <Icon icon='ph--check--regular' size={6} classNames='m-1.5' />
+  ) : (
+    <Icon icon='ph--x--regular' size={6} classNames='m-1.5' />
+  );
 };

package/src/containers/DevicesContainer/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { DevicesContainer as default } from './DevicesContainer';

package/src/containers/JoinDialog/JoinDialog.stories.tsx

@@ -0,0 +1,42 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { corePlugins } from '@dxos/plugin-testing';
+import { Dialog } from '@dxos/react-ui';
+
+import { ClientPlugin } from '../../ClientPlugin';
+import { translations } from '../../translations';
+import { JoinDialog } from './JoinDialog';
+
+const DefaultStory = () => (
+  <Dialog.Root defaultOpen>
+    <Dialog.Overlay>
+      <JoinDialog />
+    </Dialog.Overlay>
+  </Dialog.Root>
+);
+
+const meta = {
+  title: 'plugins/plugin-client/containers/JoinDialog',
+  component: JoinDialog,
+  render: DefaultStory,
+  decorators: [
+    withPluginManager({
+      plugins: [...corePlugins(), ClientPlugin({})],
+    }),
+  ],
+  parameters: {
+    translations,
+  },
+} satisfies Meta<typeof JoinDialog>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/containers/JoinDialog/JoinDialog.tsx

@@ -0,0 +1,56 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { ObservabilityOperation } from '@dxos/plugin-observability/operations';
+import { type InvitationResult } from '@dxos/react-client/invitations';
+import { Dialog, useTranslation } from '@dxos/react-ui';
+import { JoinPanel, type JoinPanelProps } from '@dxos/shell/react';
+import { osTranslations } from '@dxos/ui-theme';
+
+import { meta } from '#meta';
+import { ClientOperation } from '#operations';
+
+export const JoinDialog = (props: JoinPanelProps) => {
+  const { invokePromise } = useOperationInvoker();
+  const { t } = useTranslation(meta.id);
+
+  const handleCancelResetStorage = useCallback(() => invokePromise(ClientOperation.ShareIdentity), [invokePromise]);
+
+  const handleDone = useCallback(
+    async (result: InvitationResult | null) => {
+      if (result?.identityKey) {
+        await Promise.all([
+          invokePromise(LayoutOperation.UpdateDialog, { state: false }),
+          invokePromise(ObservabilityOperation.SendEvent, {
+            name: props.initialDisposition === 'recover-identity' ? 'identity.recover' : 'identity.join',
+          }),
+        ]);
+      }
+    },
+    [invokePromise],
+  );
+
+  // TODO(burdon): Move JoinHeading into Dialog.Heading.
+  return (
+    <Dialog.Content>
+      <Dialog.Header>
+        <Dialog.Title classNames='sr-only'>{t('join-space.label', { ns: osTranslations })}</Dialog.Title>
+      </Dialog.Header>
+      <Dialog.Body>
+        <JoinPanel
+          {...props}
+          mode='halo-only'
+          exitActionParent={<Dialog.Close asChild />}
+          doneActionParent={<Dialog.Close asChild />}
+          onCancelResetStorage={handleCancelResetStorage}
+          onDone={handleDone}
+        />
+      </Dialog.Body>
+    </Dialog.Content>
+  );
+};

package/src/containers/JoinDialog/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { JoinDialog as default } from './JoinDialog';

package/src/containers/ProfileContainer/ProfileContainer.stories.tsx

@@ -0,0 +1,27 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { withClientProvider } from '@dxos/react-client/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '../../translations';
+import { ProfileContainer } from './ProfileContainer';
+
+const meta = {
+  title: 'plugins/plugin-client/containers/ProfileContainer',
+  component: ProfileContainer,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withClientProvider({ createIdentity: true })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof ProfileContainer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};