@dxos/shell 0.7.5-main.ff8607b → 0.7.5-staging.b81e783

package/src/panels/IdentityPanel/IdentityPanel.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Key, Plugs, PlugsConnected } from '@phosphor-icons/react';
+import { IdentificationCard, Plugs, PlugsConnected } from '@phosphor-icons/react';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { generateName } from '@dxos/display-name';
@@ -12,9 +12,9 @@ import { type Identity, useIdentity, useDevices, useHaloInvitations } from '@dxo
 import { useInvitationStatus } from '@dxos/react-client/invitations';
 import { type CancellableInvitationObservable } from '@dxos/react-client/invitations';
 import { useNetworkStatus, ConnectionState } from '@dxos/react-client/mesh';
-import { Avatar, Input, Toolbar, Tooltip, useClipboard, useId, useTranslation } from '@dxos/react-ui';
-import { EmojiPickerToolbarButton, HuePickerToolbarButton } from '@dxos/react-ui-pickers';
-import { getSize } from '@dxos/react-ui-theme';
+import { Avatar, Clipboard, Input, Toolbar, Tooltip, useId, useTranslation } from '@dxos/react-ui';
+import { EmojiPickerToolbarButton, HuePicker } from '@dxos/react-ui-pickers';
+import { errorText, getSize } from '@dxos/react-ui-theme';
 import { hexToEmoji, hexToHue, keyToFallback } from '@dxos/util';
 
 import {
@@ -44,15 +44,13 @@ const IdentityHeading = ({
   onUpdateProfile,
   connectionState,
   onChangeConnectionState,
+  onManageCredentials,
 }: IdentityPanelHeadingProps) => {
   const fallbackValue = keyToFallback(identity.identityKey);
   const { t } = useTranslation('os');
   const [displayName, setDisplayName] = useState(identity.profile?.displayName ?? '');
   const [emoji, setEmojiDirectly] = useState<string>(getEmojiValue(identity));
   const [hue, setHueDirectly] = useState<string>(getHueValue(identity));
-  const { textValue, setTextValue } = useClipboard();
-  const identityHex = identity.identityKey.toHex();
-  const publicKeyCopied = textValue === identityHex;
 
   const setEmoji = (nextEmoji: string) => {
     setEmojiDirectly(nextEmoji);
@@ -94,31 +92,33 @@ const IdentityHeading = ({
 
         <Toolbar.Root classNames='flex justify-center items-center gap-1 pt-3'>
           <EmojiPickerToolbarButton emoji={emoji} onChangeEmoji={setEmoji} classNames='bs-[--rail-action]' />
-          <HuePickerToolbarButton hue={hue} onChangeHue={setHue} classNames='bs-[--rail-action]' />
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <Toolbar.Button
-                classNames='bs-[--rail-action]'
-                data-testid='update-profile-form-copy-key'
-                onClick={() => setTextValue(identityHex)}
-              >
-                <span className='sr-only'>
-                  {t(publicKeyCopied ? 'copy success label' : 'copy self public key label')}
-                </span>
-                <Key className={getSize(5)} />
-              </Toolbar.Button>
-            </Tooltip.Trigger>
-            <Tooltip.Portal>
-              <Tooltip.Content side='bottom'>
-                {t(publicKeyCopied ? 'copy success label' : 'copy self public key label')}
-                <Tooltip.Arrow />
-              </Tooltip.Content>
-            </Tooltip.Portal>
-          </Tooltip.Root>
+          <HuePicker value={hue} onChange={setHue} classNames='bs-[--rail-action]' />
+          <Clipboard.IconButton
+            classNames='bs-[--rail-action]'
+            data-testid='update-profile-form-copy-key'
+            label={t('copy self did label')}
+            value={identity.did}
+          />
+          {onManageCredentials && (
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <Toolbar.Button classNames='bs-[--rail-action]' onClick={onManageCredentials}>
+                  <span className='sr-only'>{t('manage credentials label')}</span>
+                  <IdentificationCard className={getSize(5)} />
+                </Toolbar.Button>
+              </Tooltip.Trigger>
+              <Tooltip.Portal>
+                <Tooltip.Content side='bottom'>
+                  {t('manage credentials label')}
+                  <Tooltip.Arrow />
+                </Tooltip.Content>
+              </Tooltip.Portal>
+            </Tooltip.Root>
+          )}
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
               <Toolbar.Button
-                classNames={['bs-[--rail-action]', !isConnected && 'text-error-500']}
+                classNames={['bs-[--rail-action]', !isConnected && errorText]}
                 onClick={() =>
                   onChangeConnectionState?.(isConnected ? ConnectionState.OFFLINE : ConnectionState.ONLINE)
                 }
@@ -154,6 +154,7 @@ export const IdentityPanelImpl = (props: IdentityPanelImplProps) => {
     connectionState,
     onChangeConnectionState,
     onDone,
+    onManageCredentials,
     ...rest
   } = props;
   const { t } = useTranslation('os');
@@ -181,6 +182,7 @@ export const IdentityPanelImpl = (props: IdentityPanelImplProps) => {
           onUpdateProfile,
           connectionState,
           onChangeConnectionState,
+          onManageCredentials,
         }}
       />
       <Viewport.Root activeView={activeView}>

package/src/panels/IdentityPanel/IdentityPanelProps.ts

@@ -29,6 +29,7 @@ export type IdentityPanelImplProps = {
   connectionState?: ConnectionState;
   onChangeConnectionState?: (nextState: ConnectionState) => Promise<void>;
   onUpdateProfile?: (profile: NonNullable<Identity['profile']>) => Promise<void>;
+  onManageCredentials?: () => Promise<void>;
   onResetStorage?: () => Promise<void>;
   onRecover?: () => Promise<void>;
   onJoinNewIdentity?: () => Promise<void>;
@@ -46,7 +47,13 @@ export type IdentityPanelProps = Partial<Omit<IdentityPanelImplProps, 'send' | '
 
 export type IdentityPanelHeadingProps = Pick<
   IdentityPanelImplProps,
-  'titleId' | 'identity' | 'onDone' | 'onUpdateProfile' | 'connectionState' | 'onChangeConnectionState'
+  | 'titleId'
+  | 'identity'
+  | 'onDone'
+  | 'onUpdateProfile'
+  | 'connectionState'
+  | 'onChangeConnectionState'
+  | 'onManageCredentials'
 > & {
   title: string;
 };

package/src/panels/IdentityPanel/steps/ProfileForm.tsx

@@ -8,7 +8,7 @@ import { type Event, type SingleOrArray } from 'xstate';
 import { log } from '@dxos/log';
 import { type Identity } from '@dxos/react-client/halo';
 import { useClipboard, useTranslation } from '@dxos/react-ui';
-import { EmojiPickerBlock, HuePickerBlock } from '@dxos/react-ui-pickers';
+import { EmojiPickerBlock, HuePicker } from '@dxos/react-ui-pickers';
 import { hexToEmoji, hexToHue } from '@dxos/util';
 
 import { Action, Actions, StepHeading, Input } from '../../../components';
@@ -75,12 +75,7 @@ const ProfileFormImpl = (props: ProfileFormImplProps) => {
             disabled={disabled}
             onClickClear={() => setEmoji(getEmojiValue(identity))}
           />
-          <HuePickerBlock
-            hue={hue}
-            onChangeHue={setHue}
-            disabled={disabled}
-            onClickClear={() => setHue(getHueValue(identity))}
-          />
+          <HuePicker disabled={disabled} value={hue} onChange={setHue} onReset={() => setHue(getHueValue(identity))} />
         </div>
       </div>
       <Actions>

package/src/panels/JoinPanel/steps/IdentityInput.tsx

@@ -31,7 +31,7 @@ export const IdentityInput = (props: IdentityInputProps) => {
   const [validationMessage, setValidationMessage] = useState('');
   const handleConfirm = async (value: string) => {
     if (isRecover) {
-      await client.halo.recoverIdentity({ seedphrase: value }).then(
+      await client.halo.recoverIdentity({ recoveryCode: value }).then(
         (identity) => {
           send?.({ type: 'selectIdentity' as const, identity });
         },

package/src/panels/SpacePanel/SpacePanel.stories.tsx

@@ -6,7 +6,7 @@ import '@dxos-theme';
 
 import React from 'react';
 
-import { PublicKey } from '@dxos/keys';
+import { IdentityDid, PublicKey } from '@dxos/keys';
 import { HaloSpaceMember, SpaceMember } from '@dxos/react-client/echo';
 import { Invitation } from '@dxos/react-client/invitations';
 import { withTheme } from '@dxos/storybook-utils';
@@ -179,6 +179,7 @@ export const SpaceManagerWithMember = () => {
                       presence: SpaceMember.PresenceState.ONLINE,
                       role: HaloSpaceMember.Role.ADMIN,
                       identity: {
+                        did: IdentityDid.random(),
                         identityKey: PublicKey.random(),
                       },
                     },
@@ -212,6 +213,7 @@ export const SpaceManagerWithMembers = () => {
                       presence: SpaceMember.PresenceState.ONLINE,
                       role: HaloSpaceMember.Role.ADMIN,
                       identity: {
+                        did: IdentityDid.random(),
                         identityKey: PublicKey.random(),
                         profile: {
                           displayName: 'John Doe',
@@ -252,6 +254,7 @@ export const SpaceManagerWithMoreMembers = () => {
                       presence: SpaceMember.PresenceState.ONLINE,
                       role: HaloSpaceMember.Role.ADMIN,
                       identity: {
+                        did: IdentityDid.random(),
                         identityKey: PublicKey.random(),
                         profile: {
                           displayName: 'John Doe',
@@ -262,6 +265,7 @@ export const SpaceManagerWithMoreMembers = () => {
                       presence: SpaceMember.PresenceState.OFFLINE,
                       role: HaloSpaceMember.Role.ADMIN,
                       identity: {
+                        did: IdentityDid.random(),
                         identityKey: PublicKey.random(),
                         profile: {
                           displayName: 'Alice Wong',
@@ -272,6 +276,7 @@ export const SpaceManagerWithMoreMembers = () => {
                       presence: SpaceMember.PresenceState.OFFLINE,
                       role: HaloSpaceMember.Role.ADMIN,
                       identity: {
+                        did: IdentityDid.random(),
                         identityKey: PublicKey.random(),
                         profile: {
                           displayName: 'Steel Nickels',

package/src/testing/fixtures/identities.ts

@@ -2,12 +2,14 @@
 // Copyright 2023 DXOS.org
 //
 
+import { IdentityDid } from '@dxos/keys';
 import { PublicKey } from '@dxos/react-client';
 import { HaloSpaceMember, SpaceMember } from '@dxos/react-client/echo';
 
 export const alice: SpaceMember = {
   role: HaloSpaceMember.Role.ADMIN,
   identity: {
+    did: IdentityDid.random(),
     identityKey: PublicKey.random(),
     profile: {
       displayName: 'Alice',

package/src/translations/locales/en-US.ts

@@ -8,7 +8,7 @@ export const os = {
   'sidebar label': 'DXOS sidebar',
   'copy invitation code label': 'Copy URL',
   'copy success label': 'Copied',
-  'copy self public key label': 'Copy public key',
+  'copy self did label': 'Copy DID',
   'open share panel label': 'View QR code',
   'joining space heading': 'Joining space',
   'join space heading': 'Enter space invitation',
@@ -118,6 +118,8 @@ export const os = {
   'select emoji label': 'Avatar emoji',
   'select hue label': 'Avatar background color',
   'resetting message': 'One moment while the device is reset…',
+
+  // TODO(burdon): Factor out.
   'red label': 'Red',
   'orange label': 'Orange',
   'amber label': 'Amber',
@@ -135,6 +137,10 @@ export const os = {
   'fuchsia label': 'Fuchsia',
   'pink label': 'Pink',
   'rose label': 'Rose',
+
+  'select a hue label': 'Select color',
+  'hue label': 'Hue',
+  'icon label': 'Icon',
   'current device tag label': 'This device',
   'device name placeholder': '{{platform}} on {{os}}',
   'more options label': 'More options',