@dxos/shell 0.4.4-main.fcf0b00 → 0.4.4-next.75bfacc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/shell",
-  "version": "0.4.4-main.fcf0b00",
+  "version": "0.4.4-next.75bfacc",
   "description": "DXOS’s OS experiences",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -39,19 +39,19 @@
     "react-qr-rounded": "^1.0.0",
     "url-join": "^5.0.0",
     "xstate": "^4.37.0",
-    "@dxos/async": "0.4.4-main.fcf0b00",
-    "@dxos/debug": "0.4.4-main.fcf0b00",
-    "@dxos/client-services": "0.4.4-main.fcf0b00",
-    "@dxos/client-protocol": "0.4.4-main.fcf0b00",
-    "@dxos/invariant": "0.4.4-main.fcf0b00",
-    "@dxos/display-name": "0.4.4-main.fcf0b00",
-    "@dxos/log": "0.4.4-main.fcf0b00",
-    "@dxos/react-client": "0.4.4-main.fcf0b00",
-    "@dxos/react-ui": "0.4.4-main.fcf0b00",
-    "@dxos/react-ui-theme": "0.4.4-main.fcf0b00",
-    "@dxos/react-ui-types": "0.4.4-main.fcf0b00",
-    "@dxos/rpc-tunnel": "0.4.4-main.fcf0b00",
-    "@dxos/util": "0.4.4-main.fcf0b00"
+    "@dxos/async": "0.4.4-next.75bfacc",
+    "@dxos/client-protocol": "0.4.4-next.75bfacc",
+    "@dxos/client-services": "0.4.4-next.75bfacc",
+    "@dxos/display-name": "0.4.4-next.75bfacc",
+    "@dxos/debug": "0.4.4-next.75bfacc",
+    "@dxos/invariant": "0.4.4-next.75bfacc",
+    "@dxos/log": "0.4.4-next.75bfacc",
+    "@dxos/react-client": "0.4.4-next.75bfacc",
+    "@dxos/react-ui": "0.4.4-next.75bfacc",
+    "@dxos/react-ui-types": "0.4.4-next.75bfacc",
+    "@dxos/rpc-tunnel": "0.4.4-next.75bfacc",
+    "@dxos/react-ui-theme": "0.4.4-next.75bfacc",
+    "@dxos/util": "0.4.4-next.75bfacc"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.0.5",
@@ -63,11 +63,11 @@
     "react-dom": "^18.2.0",
     "vite": "^5.0.12",
     "vite-plugin-turbosnap": "^1.0.2",
-    "@dxos/config": "0.4.4-main.fcf0b00",
-    "@dxos/random": "0.4.4-main.fcf0b00",
-    "@dxos/react-ui-theme": "0.4.4-main.fcf0b00",
-    "@dxos/react-async": "0.4.4-main.fcf0b00",
-    "@dxos/storybook-utils": "0.4.4-main.fcf0b00"
+    "@dxos/config": "0.4.4-next.75bfacc",
+    "@dxos/random": "0.4.4-next.75bfacc",
+    "@dxos/react-async": "0.4.4-next.75bfacc",
+    "@dxos/react-ui-theme": "0.4.4-next.75bfacc",
+    "@dxos/storybook-utils": "0.4.4-next.75bfacc"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",

package/src/components/Clipboard/CopyButton.tsx

@@ -30,11 +30,11 @@ export const CopyButton = ({ value, classNames, iconProps, ...props }: CopyButto
     >
       <div role='none' className={mx('flex gap-1 items-center', isCopied && inactiveLabelStyles)}>
         <span className='pli-1'>{t('copy invitation code label')}</span>
-        <Copy className={getSize(4)} weight='bold' {...iconProps} />
+        <Copy className={getSize(5)} {...iconProps} />
       </div>
       <div role='none' className={mx('flex gap-1 items-center', !isCopied && inactiveLabelStyles)}>
-        <span className='pli-1'>{t('copy invitation code success label')}</span>
-        <Check className={getSize(4)} weight='bold' {...iconProps} />
+        <span className='pli-1'>{t('copy success label')}</span>
+        <Check className={getSize(5)} {...iconProps} />
       </div>
     </Button>
   );
@@ -44,7 +44,7 @@ export const CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...p
   const { t } = useTranslation('os');
   const { textValue, setTextValue } = useClipboardContext();
   const isCopied = textValue === value;
-  const label = isCopied ? t('copy invitation code success label') : t('copy invitation code label');
+  const label = isCopied ? t('copy success label') : t('copy invitation code label');
   const [open, setOpen] = useState(false);
   return (
     <Tooltip.Root delayDuration={1500} open={open} onOpenChange={setOpen}>
@@ -62,7 +62,7 @@ export const CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...p
         asChild
       >
         <Button variant={variant} classNames={['inline-flex flex-col justify-center', classNames]}>
-          <Copy className={getSize(5)} weight='bold' {...iconProps} />
+          <Copy className={getSize(5)} {...iconProps} />
         </Button>
       </Tooltip.Trigger>
     </Tooltip.Root>

package/src/components/IdentityList/IdentityListItem.tsx

@@ -2,12 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { forwardRef } from 'react';
+import React, { type ComponentPropsWithoutRef, forwardRef } from 'react';
 
 import { generateName } from '@dxos/display-name';
 import { SpaceMember } from '@dxos/react-client/echo';
 import { type Identity } from '@dxos/react-client/halo';
-import { ListItem, Avatar, useJdenticonHref, useId } from '@dxos/react-ui';
+import { ListItem, Avatar, useJdenticonHref, useId, type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
 type IdentityListItemProps = {
@@ -16,27 +16,29 @@ type IdentityListItemProps = {
   onClick?: () => void;
 };
 
-export const IdentityListItem = forwardRef<HTMLLIElement, IdentityListItemProps>(
-  ({ identity, presence, onClick }: IdentityListItemProps, forwardedRef) => {
-    const fallbackValue = identity.identityKey.toHex();
-    const labelId = useId('identityListItem__label');
-    const jdenticon = useJdenticonHref(fallbackValue ?? '', 12);
-    const displayName = identity.profile?.displayName ?? generateName(identity.identityKey.toHex());
-    return (
-      <ListItem.Root
-        classNames={mx('flex gap-2 pis-3 pie-1 items-center', onClick && 'cursor-pointer')}
-        onClick={() => onClick?.()}
-        data-testid='identity-list-item'
-        labelId={labelId}
-        ref={forwardedRef}
-      >
-        <Avatar.Root status={presence === SpaceMember.PresenceState.ONLINE ? 'active' : 'inactive'} labelId={labelId}>
-          <Avatar.Frame>
-            <Avatar.Fallback href={jdenticon} />
-          </Avatar.Frame>
-          <Avatar.Label classNames='text-sm truncate pli-2'>{displayName}</Avatar.Label>
-        </Avatar.Root>
-      </ListItem.Root>
-    );
-  },
-);
+export const IdentityListItem = forwardRef<
+  HTMLLIElement,
+  ThemedClassName<ComponentPropsWithoutRef<'li'>> & IdentityListItemProps
+>(({ identity, presence, onClick, classNames, ...props }, forwardedRef) => {
+  const fallbackValue = identity.identityKey.toHex();
+  const labelId = useId('identityListItem__label');
+  const jdenticon = useJdenticonHref(fallbackValue ?? '', 12);
+  const displayName = identity.profile?.displayName ?? generateName(identity.identityKey.toHex());
+  return (
+    <ListItem.Root
+      {...props}
+      classNames={mx('flex gap-2 pis-3 pie-1 items-center', onClick && 'cursor-pointer', classNames)}
+      onClick={() => onClick?.()}
+      data-testid='identity-list-item'
+      labelId={labelId}
+      ref={forwardedRef}
+    >
+      <Avatar.Root status={presence === SpaceMember.PresenceState.ONLINE ? 'active' : 'inactive'} labelId={labelId}>
+        <Avatar.Frame classNames='place-self-center'>
+          <Avatar.Fallback href={jdenticon} />
+        </Avatar.Frame>
+        <Avatar.Label classNames='text-sm truncate pli-2'>{displayName}</Avatar.Label>
+      </Avatar.Root>
+    </ListItem.Root>
+  );
+});

package/src/components/InvitationList/InvitationListItem.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 import { X } from '@phosphor-icons/react';
-import React, { useCallback } from 'react';
+import React, { type ComponentPropsWithoutRef, useCallback } from 'react';
 
 import {
   type CancellableInvitationObservable,
@@ -18,6 +18,7 @@ import {
   useThemeContext,
   type AvatarRootProps,
   Tooltip,
+  type ThemedClassName,
 } from '@dxos/react-ui';
 import { focusRing, getSize, mx } from '@dxos/react-ui-theme';
 
@@ -26,14 +27,15 @@ import { toEmoji } from '../../util';
 import { AuthCode } from '../AuthCode';
 import { CopyButtonIconOnly } from '../Clipboard';
 
-export interface InvitationListItemProps extends SharedInvitationListProps {
+export type InvitationListItemProps = SharedInvitationListProps & {
   invitation: CancellableInvitationObservable;
   onClickRemove?: (invitation: CancellableInvitationObservable) => void;
-}
+  reverseEffects?: boolean;
+} & ThemedClassName<ComponentPropsWithoutRef<'li'>>;
 
-export interface InvitationListItemImplProps extends InvitationListItemProps {
+export type InvitationListItemImplProps = InvitationListItemProps & {
   invitationStatus: InvitationStatus;
-}
+};
 
 export const InvitationListItem = (props: InvitationListItemProps) => {
   const { invitation } = props;
@@ -43,13 +45,21 @@ export const InvitationListItem = (props: InvitationListItemProps) => {
 
 const avatarProps: Pick<AvatarRootProps, 'size' | 'variant'> = { size: 10, variant: 'circle' };
 
-const AvatarStackEffect = ({ animation, status }: Pick<AvatarRootProps, 'status' | 'animation'>) => {
+const AvatarStackEffect = ({
+  animation,
+  status,
+  reverseEffects,
+}: Pick<AvatarRootProps, 'status' | 'animation'> & Pick<InvitationListItemProps, 'reverseEffects'>) => {
   const { tx } = useThemeContext();
   return (
     <>
       <span
         role='none'
-        className={mx('absolute inline-start-1 inline-end-auto opacity-20', getSize(avatarProps.size!))}
+        className={mx(
+          'absolute inline-end-auto opacity-20',
+          reverseEffects ? 'inline-start-3' : 'inline-start-1',
+          getSize(avatarProps.size!),
+        )}
       >
         <span
           role='none'
@@ -59,7 +69,11 @@ const AvatarStackEffect = ({ animation, status }: Pick<AvatarRootProps, 'status'
       </span>
       <span
         role='none'
-        className={mx('absolute inline-start-2 inline-end-auto opacity-50', getSize(avatarProps.size!))}
+        className={mx(
+          'absolute inline-end-auto opacity-50',
+          reverseEffects ? 'inline-start-2' : 'inline-start-2',
+          getSize(avatarProps.size!),
+        )}
       >
         <span
           role='none'
@@ -77,6 +91,8 @@ export const InvitationListItemImpl = ({
   send,
   onClickRemove,
   createInvitationUrl,
+  reverseEffects,
+  ...props
 }: InvitationListItemImplProps) => {
   const { t } = useTranslation('os');
   const { cancel, status: invitationStatus, invitationCode, authCode, type } = propsInvitationStatus;
@@ -120,15 +136,21 @@ export const InvitationListItemImpl = ({
   const avatarStatus = avatarError ? 'error' : avatarGreen ? 'active' : 'inactive';
 
   return (
-    <ListItem.Root id={invitationCode} classNames='flex gap-2 pis-3 pie-1 items-center relative'>
+    <ListItem.Root
+      id={invitationCode}
+      {...props}
+      classNames={['flex gap-2 pis-3 pie-1 items-center relative', props.classNames]}
+    >
       <ListItem.Heading classNames='sr-only'>
         {t(type === Invitation.Type.MULTIUSE ? 'invite many list item label' : 'invite one list item label')}
       </ListItem.Heading>
-      {type === Invitation.Type.MULTIUSE && <AvatarStackEffect status={avatarStatus} animation={avatarAnimation} />}
+      {type === Invitation.Type.MULTIUSE && (
+        <AvatarStackEffect status={avatarStatus} animation={avatarAnimation} reverseEffects={reverseEffects} />
+      )}
       <Tooltip.Root>
         <Avatar.Root {...avatarProps} animation={avatarAnimation} status={avatarStatus}>
           <Tooltip.Trigger asChild>
-            <Avatar.Frame tabIndex={0} classNames={[focusRing, 'relative rounded-full']}>
+            <Avatar.Frame tabIndex={0} classNames={[focusRing, 'relative rounded-full place-self-center']}>
               <Avatar.Fallback text={toEmoji(invitationId)} />
             </Avatar.Frame>
           </Tooltip.Trigger>
@@ -168,14 +190,19 @@ export const InvitationListItemImpl = ({
         <span className='grow'> </span>
       )}
       {isCancellable ? (
-        <Button variant='ghost' classNames='flex gap-1' onClick={cancel} data-testid='cancel-invitation'>
+        <Button variant='ghost' classNames='flex gap-1 pli-0' onClick={cancel} data-testid='cancel-invitation'>
           <span className='sr-only'>{t('cancel invitation label')}</span>
-          <X className={getSize(5)} weight='bold' />
+          <X className={getSize(4)} />
         </Button>
       ) : (
-        <Button variant='ghost' classNames='flex gap-1' onClick={handleClickRemove} data-testid='remove-invitation'>
+        <Button
+          variant='ghost'
+          classNames='flex gap-1 pli-0'
+          onClick={handleClickRemove}
+          data-testid='remove-invitation'
+        >
           <span className='sr-only'>{t('remove invitation label')}</span>
-          <X className={getSize(5)} weight='bold' />
+          <X className={getSize(4)} />
         </Button>
       )}
     </ListItem.Root>

package/src/components/Panel/Action.tsx

@@ -66,14 +66,14 @@ export const BifurcatedAction = forwardRef<HTMLButtonElement, BifurcatedActionPr
         variant={variant}
         onClick={activeAction.onClick}
       >
-        {activeAction.icon && <activeAction.icon />}
+        {activeAction.icon && <activeAction.icon className={getSize(5)} />}
         <span>{activeAction.label}</span>
       </Button>
       <DropdownMenu.Root>
         <DropdownMenu.Trigger asChild>
           <Button classNames={['bs-11 flex-none rounded-is-none', classNames]}>
             <span className='sr-only'>{t('invite options label')}</span>
-            <CaretDown />
+            <CaretDown className={getSize(4)} />
           </Button>
         </DropdownMenu.Trigger>
         {/* TODO(thure): Putting `DropdownMenu.Portal` here breaks highlighting and focus. Why? */}
@@ -99,7 +99,7 @@ export const BifurcatedAction = forwardRef<HTMLButtonElement, BifurcatedActionPr
                     )}
                   </div>
                   <DropdownMenu.ItemIndicator asChild>
-                    <Check />
+                    <Check weight='bold' className={getSize(4)} />
                   </DropdownMenu.ItemIndicator>
                 </DropdownMenu.CheckboxItem>
               );

package/src/panels/IdentityPanel/IdentityPanel.tsx

@@ -87,7 +87,7 @@ export const IdentityPanelImpl = (props: IdentityPanelImplProps) => {
             <ProfileForm
               send={rest.send}
               active={activeView === 'update profile form'}
-              profile={identity.profile}
+              identity={identity}
               onUpdateProfile={onUpdateProfile}
             />
           </Viewport.View>

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

@@ -9,14 +9,14 @@ import { log } from '@dxos/log';
 import { type Identity } from '@dxos/react-client/halo';
 import { useTranslation } from '@dxos/react-ui';
 
-import { Action, Actions, StepHeading, Input } from '../../../components';
+import { Action, Actions, StepHeading, Input, useClipboardContext } from '../../../components';
 import { type IdentityPanelStepProps } from '../IdentityPanelProps';
 import { type IdentityEvent } from '../identityMachine';
 
 export interface ProfileFormProps extends Omit<IdentityPanelStepProps, 'send'> {
   send?: (event: SingleOrArray<Event<IdentityEvent>>) => void;
   onUpdateProfile?: (profile: NonNullable<Identity['profile']>) => Promise<void>;
-  profile?: Identity['profile'];
+  identity?: Identity;
 }
 
 export type ProfileFormImplProps = ProfileFormProps & {
@@ -38,10 +38,14 @@ export const ProfileForm = (props: ProfileFormProps) => {
 
 // TODO(zhenyasav): impl shouldn't need send()
 const ProfileFormImpl = (props: ProfileFormImplProps) => {
-  const { active, profile, send, onUpdateProfile, validationMessage } = props;
+  const { active, identity, send, onUpdateProfile, validationMessage } = props;
+  const profile = identity?.profile;
   const disabled = !active;
   const { t } = useTranslation('os');
   const [inputValue, setInputValue] = useState(profile?.displayName ?? '');
+  const { textValue, setTextValue } = useClipboardContext();
+  const identityHex = identity?.identityKey.toHex();
+  const copied = textValue === identityHex;
   return (
     <>
       <div role='none' className='grow flex flex-col justify-center'>
@@ -57,11 +61,23 @@ const ProfileFormImpl = (props: ProfileFormImplProps) => {
         />
       </div>
       <Actions>
+        <Action
+          variant='ghost'
+          disabled={disabled}
+          onClick={() => {
+            if (identityHex) {
+              void setTextValue(identityHex);
+            }
+          }}
+          data-testid='update-profile-form-copy-key'
+        >
+          {t(copied ? 'copy success label' : 'copy self public key label')}
+        </Action>
         <Action
           variant='ghost'
           disabled={disabled}
           onClick={() => send?.({ type: 'unchooseAction' })}
-          data-testid={'update-profile-form-back'}
+          data-testid='update-profile-form-back'
         >
           {t('back label')}
         </Action>
@@ -69,7 +85,7 @@ const ProfileFormImpl = (props: ProfileFormImplProps) => {
           variant='primary'
           disabled={disabled}
           onClick={() => onUpdateProfile?.({ displayName: inputValue })}
-          data-testid={'update-profile-form-continue'}
+          data-testid='update-profile-form-continue'
         >
           {t('done label')}
         </Action>

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

@@ -17,6 +17,7 @@ export type ResetIdentityProps = JoinStepProps & {
 
 export type ResetIdentityImplProps = {
   disabled?: boolean;
+  pending?: boolean;
   validationMessage?: string;
   onConfirm?: () => void;
 };
@@ -25,21 +26,29 @@ export const ResetIdentity = ({ send, active }: ResetIdentityProps) => {
   const client = useClient();
   const { t } = useTranslation('os');
   const [validationMessage, setValidationMessage] = useState('');
+  const [pending, setPending] = useState(false);
   const resetIdentity = () => {
+    setPending(true);
     void client.reset().then(
       () => send?.({ type: 'resetIdentity' }),
       (error) => {
         log.catch(error);
         setValidationMessage(t('failed to reset identity message'));
+        setPending(false);
       },
     );
   };
   return (
-    <ResetIdentityImpl disabled={!active} validationMessage={validationMessage} onConfirm={() => resetIdentity()} />
+    <ResetIdentityImpl
+      disabled={!active}
+      pending={pending}
+      validationMessage={validationMessage}
+      onConfirm={() => resetIdentity()}
+    />
   );
 };
 
-export const ResetIdentityImpl = ({ disabled, validationMessage, onConfirm }: ResetIdentityImplProps) => {
+export const ResetIdentityImpl = ({ disabled, pending, validationMessage, onConfirm }: ResetIdentityImplProps) => {
   const { t } = useTranslation('os');
   const confirmationValue = t('confirmation value');
   const [inputValue, setInputValue] = useState('');
@@ -59,11 +68,11 @@ export const ResetIdentityImpl = ({ disabled, validationMessage, onConfirm }: Re
         <Action
           // TODO(wittjosiah): Probably make this red?
           variant='primary'
-          disabled={disabled || inputValue !== confirmationValue}
+          disabled={disabled || pending || inputValue !== confirmationValue}
           onClick={() => onConfirm?.()}
           data-testid='reset-identity-input-confirm'
         >
-          {t('confirm label')}
+          {pending ? t('reset in progress label') : t('confirm label')}
         </Action>
       </Actions>
     </>

package/src/panels/SpacePanel/SpacePanel.tsx

@@ -27,7 +27,7 @@ const SpacePanelHeading = ({ titleId, space, onDone }: SpacePanelHeadingProps) =
       corner={<CloseButton data-testid='identity-panel-done' onDone={onDone} />}
     >
       <div role='none' className='flex gap-4 items-center justify-center mlb-4'>
-        <Planet size={32} />
+        <Planet size={32} weight='light' />
         <div className='block text-start font-light text-xl'>{name ?? space.key.truncate()}</div>
       </div>
     </Heading>

package/src/react.ts

@@ -5,5 +5,6 @@
 export * from './components';
 export * from './composites';
 export * from './panels';
+export * from './steps';
 export * from './styles';
 export * from './translations';

package/src/stories/Invitations.e2e-stories.tsx

@@ -219,7 +219,7 @@ export const Default = {
   render: (args: { id: number }) => (
     <ClipboardProvider>
       <Tooltip.Provider>
-        <ClientRepeater Component={Invitations} count={3} />
+        <ClientRepeater component={Invitations} count={3} />
       </Tooltip.Provider>
     </ClipboardProvider>
   ),

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

@@ -7,7 +7,8 @@ export const os = {
   'identity offline description': 'Offline',
   'sidebar label': 'DXOS sidebar',
   'copy invitation code label': 'Copy URL',
-  'copy invitation code success label': 'Copied',
+  'copy success label': 'Copied',
+  'copy self public key label': 'Copy public key',
   'open share panel label': 'View QR code',
   'joining space heading': 'Joining space',
   'join space heading': 'Enter space invitation',
@@ -94,6 +95,7 @@ export const os = {
   'invite many qr label': 'Multiple-use',
   'invite many list item label': 'Active multiple-use invitation',
   'invite options label': 'Change the active invite option.',
+  'reset in progress label': 'Resetting...',
   'confirm label': 'Confirm',
   'reset identity input label':
     'This will clear this device and all associated data. Type {{confirmationValue}} and confirm to continue.',