@dxos/react-ui 0.1.26 → 0.1.27-next.a0dff21

package/src/layouts/PanelDialog/PanelDialog.tsx

@@ -0,0 +1,39 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as Dialog from '@radix-ui/react-dialog';
+import React, { ComponentPropsWithoutRef, PropsWithChildren } from 'react';
+
+import { mx } from '@dxos/react-components';
+
+import { defaultDialogContent, defaultOverlay } from '../../styles';
+
+export interface PanelDialogSlots {
+  root: ComponentPropsWithoutRef<typeof Dialog.Root>;
+  overlay: ComponentPropsWithoutRef<typeof Dialog.Overlay>;
+  content: ComponentPropsWithoutRef<typeof Dialog.Content>;
+  trigger: ComponentPropsWithoutRef<typeof Dialog.Trigger>;
+}
+
+export type PanelDialogProps = PropsWithChildren<{
+  titleId: string;
+  slots?: Partial<PanelDialogSlots>;
+}>;
+
+export const PanelDialog = ({ titleId, slots = {}, children }: PanelDialogProps) => {
+  return (
+    <Dialog.Root defaultOpen {...slots.root}>
+      {slots.trigger && <Dialog.Trigger {...slots.trigger} />}
+      <Dialog.Overlay {...slots.overlay} className={mx(defaultOverlay, 'z-40', slots.overlay?.className)}>
+        <Dialog.Content
+          {...slots.content}
+          aria-labelledby={titleId}
+          className={mx(defaultDialogContent, slots.content?.className)}
+        >
+          {children}
+        </Dialog.Content>
+      </Dialog.Overlay>
+    </Dialog.Root>
+  );
+};

package/src/layouts/PanelDialog/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './PanelDialog';

package/src/layouts/PanelSidebar/PanelSidebar.tsx

@@ -82,7 +82,7 @@ export const PanelSidebarProvider = ({ children, slots }: PropsWithChildren<Pane
           onCloseAutoFocus={(event) => isLg && event.preventDefault()}
           {...slots?.content}
           className={mx(
-            'fixed block-start-0 block-end-0 is-sidebar z-50 overscroll-contain overflow-x-hidden overflow-y-auto',
+            'fixed block-start-0 block-end-0 is-sidebar z-30 overscroll-contain overflow-x-hidden overflow-y-auto',
             'transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out',
             transitionShow ? 'inline-start-0' : '-inline-start-sidebar',
             slots?.content?.className

package/src/layouts/index.ts

@@ -5,3 +5,4 @@
 export * from './PanelPopover';
 export * from './PanelSidebar';
 export * from './PanelAlertDialog';
+export * from './PanelDialog';

package/src/panels/DevicesPanel/DevicesPanel.tsx

@@ -0,0 +1,101 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { UserPlus, X } from 'phosphor-react';
+import React, { cloneElement, useReducer } from 'react';
+
+import { useClient, useDevices, useHaloInvitations, useIdentity } from '@dxos/react-client';
+import { Button, DensityProvider, getSize, mx, Tooltip, useTranslation } from '@dxos/react-components';
+
+import { DeviceList, InvitationList, PanelSeparator } from '../../components';
+import { defaultSurface, subduedSurface } from '../../styles';
+
+export type DevicesPanelProps = {
+  titleId?: string;
+  createInvitationUrl: (invitationCode: string) => string;
+  doneActionParent?: Parameters<typeof cloneElement>[0];
+  onDone?: () => void;
+};
+
+export type DevicesView = 'device list';
+
+const DeviceListView = ({ createInvitationUrl, titleId, onDone, doneActionParent }: DevicesPanelProps) => {
+  const { t } = useTranslation('os');
+  const client = useClient();
+  const identity = useIdentity();
+  const devices = useDevices();
+  const invitations = useHaloInvitations();
+  const displayName = identity?.profile?.displayName;
+
+  if (!identity) {
+    return null;
+  }
+
+  const doneButton = (
+    <Button variant='ghost' onClick={() => onDone?.()} data-testid='show-all-spaces'>
+      <X className={getSize(4)} weight='bold' />
+    </Button>
+  );
+
+  return (
+    <div role='none' className='flex flex-col'>
+      <div role='none' className={mx(subduedSurface, 'rounded-bs-md flex items-center p-2 gap-2')}>
+        {/* TODO(wittjosiah): Label this as the identity panel. */}
+        <h2 id={titleId} className={mx('grow font-system-medium', !displayName && 'font-mono')}>
+          {displayName ?? identity.identityKey.truncate()}
+        </h2>
+        <Tooltip content={t('close label')} zIndex='z-50'>
+          {doneActionParent ? cloneElement(doneActionParent, {}, doneButton) : doneButton}
+        </Tooltip>
+      </div>
+      <div role='region' className={mx(defaultSurface, 'rounded-be-md p-2')}>
+        <InvitationList
+          invitations={invitations}
+          onClickRemove={({ invitation }) => invitation && client.halo.removeInvitation(invitation.invitationId!)}
+          createInvitationUrl={createInvitationUrl}
+        />
+        <Button
+          className='is-full flex gap-2 mbs-2'
+          onClick={() => client.halo.createInvitation()}
+          data-testid='create-space-invitation'
+        >
+          <span>{t('create space invitation label')}</span>
+          <UserPlus className={getSize(4)} weight='bold' />
+        </Button>
+        <PanelSeparator />
+        <DeviceList devices={devices} />
+      </div>
+    </div>
+  );
+};
+
+type DevicesPanelState = {
+  activeView: DevicesView;
+};
+
+type DevicesPanelAction = {
+  type: null;
+};
+
+// TODO(wittjosiah): Rename identity panel and include other views?
+export const DevicesPanel = (props: DevicesPanelProps) => {
+  const reducer = (state: DevicesPanelState, action: DevicesPanelAction) => {
+    const nextState = { ...state };
+    switch (action.type) {
+      case null:
+    }
+    return nextState;
+  };
+
+  const [panelState] = useReducer(reducer, {
+    activeView: 'device list'
+  });
+
+  // TODO(wittjosiah): Use ViewState or similar.
+  return (
+    <DensityProvider density='fine'>
+      {panelState.activeView === 'device list' ? <DeviceListView {...props} /> : null}
+    </DensityProvider>
+  );
+};

package/src/panels/DevicesPanel/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './DevicesPanel';

package/src/panels/IdentityPanel/IdentityPanel.tsx

@@ -3,7 +3,7 @@
 //
 import React from 'react';
 
-import type { Profile } from '@dxos/client';
+import type { Identity } from '@dxos/client';
 import { useClient } from '@dxos/react-client';
 import { Avatar, Button, ThemeContext, useTranslation } from '@dxos/react-components';
 
@@ -11,7 +11,7 @@ export const IdentityPanel = ({
   identity,
   onClickManageProfile
 }: {
-  identity: Profile;
+  identity: Identity;
   onClickManageProfile?: () => void;
 }) => {
   const { t } = useTranslation('os');
@@ -22,15 +22,15 @@ export const IdentityPanel = ({
     tab?.focus();
   };
   return (
-    <ThemeContext.Provider value={{ themeVariant: 'os' }}>
+    <ThemeContext.Provider value={{ themeVariant: 'os', rootDensity: 'fine' }}>
       <div className='flex flex-col gap-2 justify-center items-center'>
         <Avatar
           size={16}
           variant='circle'
           fallbackValue={identity.identityKey.toHex()}
-          label={identity.displayName ?? ''}
+          label={identity.profile?.displayName ?? ''}
         />
-        <Button compact onClick={onClickManageProfile ?? defaultManageProfile} className='is-full'>
+        <Button onClick={onClickManageProfile ?? defaultManageProfile} className='is-full'>
           {t('manage profile label')}
         </Button>
       </div>

package/src/panels/JoinPanel/JoinHeading.tsx

@@ -9,25 +9,35 @@ import { useSpace } from '@dxos/react-client';
 import { Avatar, Button, getSize, Heading, mx, Trans, useId, useTranslation } from '@dxos/react-components';
 
 import { subduedSurface } from '../../styles';
+import { JoinPanelMode } from './JoinPanelProps';
 
 export interface JoinSpaceHeadingProps {
+  mode?: JoinPanelMode;
   titleId: string;
   invitation?: AuthenticatingInvitationObservable;
   onExit?: () => void;
   exitActionParent?: Parameters<typeof cloneElement>[0];
+  preventExit?: boolean;
 }
 
 export const JoinHeading = forwardRef(
-  ({ titleId, invitation, onExit, exitActionParent }: JoinSpaceHeadingProps, ref: ForwardedRef<HTMLDivElement>) => {
+  (
+    { mode, titleId, invitation, onExit, exitActionParent, preventExit }: JoinSpaceHeadingProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
     const { t } = useTranslation('os');
 
     const space = useSpace(invitation?.invitation?.spaceKey);
-    const spaceTitle = space?.properties.name ?? '(Space not available)';
+    const name = mode === 'halo-only' ? '(Unknown identity)' : space?.properties.name ?? '(Space name not available)';
+    const nameId = useId(mode === 'halo-only' ? 'identityDisplayName' : 'spaceDisplayName');
 
-    const nameId = useId('spaceDisplayName');
+    const invitationKey =
+      mode === 'halo-only'
+        ? invitation?.invitation?.identityKey?.toHex()
+        : invitation?.invitation?.identityKey?.toHex();
 
     const exitButton = (
-      <Button compact variant='ghost' {...(onExit && { onClick: onExit })} className='grow-0 shrink-0'>
+      <Button variant='ghost' {...(onExit && { onClick: onExit })} className='grow-0 shrink-0' data-testid='join-exit'>
         <ProhibitInset className={getSize(5)} />
         <span className='sr-only'>{t('exit label')}</span>
       </Button>
@@ -36,20 +46,32 @@ export const JoinHeading = forwardRef(
     return (
       <div role='none' className={mx(subduedSurface, 'p-2 rounded-bs-md')} ref={ref}>
         <div role='group' className='flex items-center gap-2'>
-          <Avatar fallbackValue={invitation?.invitation?.spaceKey?.toHex() ?? ''} labelId={nameId} />
+          {invitationKey ? (
+            <Avatar fallbackValue={invitationKey} labelId={nameId} />
+          ) : (
+            <span role='none' className={mx(getSize(10), 'bg-neutral-300 dark:bg-neutral-700 rounded-full')} />
+          )}
           <Heading level={1} className='font-body font-normal text-base grow' id={titleId}>
-            <Trans
-              {...{
-                defaults: t('join space heading'),
-                components: {
-                  small: <span className='block leading-none mbe-1 font-system-medium text-sm' />,
-                  large: <span className='block leading-none' id={nameId} />
-                },
-                values: { spaceTitle }
-              }}
-            />
+            {invitation ? (
+              <Trans
+                {...{
+                  defaults: t('joining heading'),
+                  components: {
+                    small: <span className='block leading-none mbe-1 font-system-medium text-sm' />,
+                    large: <span className='block leading-none' id={nameId} />
+                  },
+                  values: { name }
+                }}
+              />
+            ) : (
+              <span className='block leading-none font-system-medium text-sm'>
+                {mode === 'halo-only' ? t('halo heading') : t('join space heading')}
+              </span>
+            )}
           </Heading>
-          {exitActionParent ? cloneElement(exitActionParent, {}, exitButton) : exitButton}
+          {!preventExit &&
+            mode !== 'halo-only' &&
+            (exitActionParent ? cloneElement(exitActionParent, {}, exitButton) : exitButton)}
         </div>
       </div>
     );

package/src/panels/JoinPanel/JoinPanel.tsx

@@ -1,12 +1,12 @@
 //
 // Copyright 2023 DXOS.org
 //
-import React, { useEffect, useReducer } from 'react';
+import React, { useEffect, useReducer, useState } from 'react';
 
 import { InvitationEncoder } from '@dxos/client';
 import { log } from '@dxos/log';
 import { useClient, useIdentity } from '@dxos/react-client';
-import { useId } from '@dxos/react-components';
+import { DensityProvider, useId } from '@dxos/react-components';
 
 import { JoinHeading } from './JoinHeading';
 import { JoinAction, JoinPanelProps, JoinState } from './JoinPanelProps';
@@ -22,18 +22,20 @@ import {
 } from './view-states';
 
 export const JoinPanel = ({
+  mode,
   initialInvitationCode,
   titleId: propsTitleId,
   exitActionParent,
   onExit,
   doneActionParent,
-  onDone
+  onDone,
+  preventExit
 }: JoinPanelProps) => {
   const client = useClient();
   const internalTitleId = useId('joinPanel__title');
   const titleId = propsTitleId ?? internalTitleId;
   const identity = useIdentity();
-
+  const [prevIdentity, setPrevIdentity] = useState(identity);
   const availableIdentities = identity ? [identity] : [];
 
   const reducer = (state: JoinState, action: JoinAction) => {
@@ -50,7 +52,7 @@ export const JoinPanel = ({
         if (action.method === 'accept device invitation') {
           nextState.activeView = 'halo invitation acceptor';
           if (state.unredeemedHaloInvitationCode) {
-            nextState.haloInvitation = client.echo.acceptInvitation(
+            nextState.haloInvitation = client.halo.acceptInvitation(
               InvitationEncoder.decode(state.unredeemedHaloInvitationCode)
             );
             nextState.unredeemedHaloInvitationCode = undefined;
@@ -120,13 +122,14 @@ export const JoinPanel = ({
         nextState[action.from === 'halo' ? 'haloViewState' : 'spaceViewState'] = 'invitation input';
         break;
     }
-    log.debug('[join panel reducer]', { action, nextState });
+    log('[join panel reducer]', { action, nextState });
     return nextState;
   };
 
+  const unredeemedHaloInvitationCode = mode === 'halo-only' ? initialInvitationCode : undefined;
   const [joinState, dispatch] = useReducer(reducer, {
-    unredeemedHaloInvitationCode: undefined,
-    unredeemedSpaceInvitationCode: initialInvitationCode,
+    unredeemedHaloInvitationCode,
+    unredeemedSpaceInvitationCode: mode === 'halo-only' ? undefined : initialInvitationCode,
     spaceInvitation: undefined,
     haloInvitation: undefined,
     activeView: availableIdentities.length > 0 ? 'identity selector' : 'addition method selector',
@@ -136,6 +139,17 @@ export const JoinPanel = ({
     haloViewState: 'invitation input'
   });
 
+  if (identity !== prevIdentity) {
+    setPrevIdentity(identity);
+    identity && !prevIdentity && dispatch({ type: 'added identity', identity });
+  }
+
+  useEffect(() => {
+    if (unredeemedHaloInvitationCode) {
+      dispatch({ type: 'select addition method', method: 'accept device invitation' });
+    }
+  }, [unredeemedHaloInvitationCode]);
+
   useEffect(() => {
     // TODO (thure): Validate if this is sufficiently synchronous for iOS to move focus. It might not be!
     const attrValue =
@@ -146,7 +160,7 @@ export const JoinPanel = ({
         : joinState.activeView === 'halo invitation acceptor'
         ? `${joinState.activeView}; ${joinState.haloViewState}`
         : joinState.activeView;
-    log.debug('[autofocus value]', { attrValue });
+    log('[autofocus value]', { attrValue });
     const $nextAutofocus: HTMLElement | null = document.querySelector(`[data-autofocus="${attrValue}"]`);
     if ($nextAutofocus) {
       $nextAutofocus.focus();
@@ -176,8 +190,10 @@ export const JoinPanel = ({
   }, [joinState.haloInvitation]);
 
   return (
-    <>
-      <JoinHeading {...{ titleId, invitation: joinState.spaceInvitation, onExit, exitActionParent }} />
+    <DensityProvider density='fine'>
+      <JoinHeading
+        {...{ mode, titleId, invitation: joinState.spaceInvitation, onExit, exitActionParent, preventExit }}
+      />
       <div role='none' className='is-full overflow-hidden'>
         <div role='none' className='flex is-[1300%]' aria-live='polite'>
           <IdentitySelector
@@ -240,14 +256,19 @@ export const JoinPanel = ({
               active:
                 joinState.activeView === 'halo invitation acceptor' &&
                 joinState.haloViewState === 'invitation accepted',
-              invitationType: 'halo'
+              invitationType: 'halo',
+              doneActionParent,
+              onDone
             }}
           />
           <IdentityAdded
             {...{
+              mode,
               dispatch,
               addedIdentity: joinState.selectedIdentity,
-              active: joinState.activeView === 'identity added'
+              active: joinState.activeView === 'identity added',
+              doneActionParent,
+              onDone
             }}
           />
           <InvitationInput
@@ -298,6 +319,6 @@ export const JoinPanel = ({
           />
         </div>
       </div>
-    </>
+    </DensityProvider>
   );
 };

package/src/panels/JoinPanel/JoinPanelProps.ts

@@ -4,22 +4,18 @@
 
 import { cloneElement, Dispatch } from 'react';
 
-import type {
-  AuthenticatingInvitationObservable,
-  Profile as NaturalProfile,
-  Space as NaturalSpace
-} from '@dxos/client';
+import type { AuthenticatingInvitationObservable, Identity } from '@dxos/client';
 import { InvitationResult } from '@dxos/react-client';
 
-export type Space = Pick<NaturalSpace, 'properties'>;
-
-export type Profile = Pick<NaturalProfile, 'displayName' | 'identityKey'>;
+export type JoinPanelMode = 'default' | 'halo-only';
 
 export interface JoinPanelProps {
+  mode?: JoinPanelMode;
   initialInvitationCode?: string;
   titleId?: string;
   exitActionParent?: Parameters<typeof cloneElement>[0];
   onExit?: () => void;
+  preventExit?: boolean;
   doneActionParent?: Parameters<typeof cloneElement>[0];
   onDone?: (result: InvitationResult | null) => void;
   parseInvitationCodeInput?: (invitationCodeInput: string) => string;
@@ -27,7 +23,7 @@ export interface JoinPanelProps {
 
 export interface IdentityAction {
   type: 'select identity' | 'added identity';
-  identity: Profile;
+  identity: Identity;
 }
 
 export interface EmptyJoinAction {
@@ -89,6 +85,6 @@ export interface JoinState {
   haloInvitation?: AuthenticatingInvitationObservable;
   haloViewState: InvitationView;
   haloInvitationAnnotation?: 'authenticating' | 'authentication failed';
-  selectedIdentity?: Profile;
+  selectedIdentity?: Identity;
   additionMethod?: AdditionMethodAction['method'];
 }

package/src/panels/JoinPanel/view-states/AdditionMethodSelector.tsx

@@ -5,13 +5,13 @@
 import { CaretLeft, CaretRight, Plus, QrCode, Textbox } from 'phosphor-react';
 import React from 'react';
 
+import type { Identity } from '@dxos/client';
 import { Button, CompoundButton, getSize, mx, useTranslation } from '@dxos/react-components';
 
-import { Profile } from '../JoinPanelProps';
 import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
 
 export interface AdditionMethodSelectorProps extends ViewStateProps {
-  availableIdentities: Profile[];
+  availableIdentities: Identity[];
 }
 
 export const AdditionMethodSelector = ({ availableIdentities, ...viewStateProps }: AdditionMethodSelectorProps) => {
@@ -36,6 +36,7 @@ export const AdditionMethodSelector = ({ availableIdentities, ...viewStateProps
           before={<Plus className={getSize(6)} />}
           onClick={() => dispatch({ type: 'select addition method', method: 'create identity' })}
           data-autofocus='addition method selector'
+          data-testid='create-identity'
         >
           {t('create identity label')}
         </CompoundButton>
@@ -44,14 +45,18 @@ export const AdditionMethodSelector = ({ availableIdentities, ...viewStateProps
           description={t('join identity description')}
           before={<QrCode className={getSize(6)} />}
           onClick={() => dispatch({ type: 'select addition method', method: 'accept device invitation' })}
+          data-testid='join-identity'
         >
           {t('join identity label')}
         </CompoundButton>
         <CompoundButton
           {...sharedButtonProps}
+          // TODO(mykola): Implement recover.
+          disabled={true}
           description={t('recover identity description')}
           before={<Textbox className={getSize(6)} />}
           onClick={() => dispatch({ type: 'select addition method', method: 'recover identity' })}
+          data-testid='recover-identity'
         >
           {t('recover identity label')}
         </CompoundButton>
@@ -59,6 +64,7 @@ export const AdditionMethodSelector = ({ availableIdentities, ...viewStateProps
       <Button
         disabled={disabled || availableIdentities.length < 1}
         onClick={() => dispatch({ type: 'deselect identity' })}
+        data-testid='deselect-identity'
       >
         <CaretLeft className={getSize(4)} weight='bold' />
         <span className='grow'>{t('deselect identity label')}</span>

package/src/panels/JoinPanel/view-states/IdentityAdded.tsx

@@ -2,19 +2,54 @@
 // Copyright 2023 DXOS.org
 //
 
-import { CaretLeft, CaretRight } from 'phosphor-react';
-import React from 'react';
+import { CaretLeft, CaretRight, Check } from 'phosphor-react';
+import React, { cloneElement } from 'react';
 
-import type { Profile } from '@dxos/client';
+import type { Identity } from '@dxos/client';
+import { InvitationResult } from '@dxos/react-client';
 import { Avatar, Button, getSize, mx, useTranslation } from '@dxos/react-components';
 
+import { JoinPanelMode } from '../JoinPanelProps';
 import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
 
-export interface IdentityAddedProps extends ViewStateProps {
-  addedIdentity?: Profile;
+export interface IdentityAddedProps extends ViewStateProps, DoneProps {
+  mode?: JoinPanelMode;
+  addedIdentity?: Identity;
 }
 
-export const IdentityAdded = ({ addedIdentity, ...viewStateProps }: IdentityAddedProps) => {
+export interface DoneProps extends ViewStateProps {
+  doneActionParent?: Parameters<typeof cloneElement>[0];
+  onDone?: (result: InvitationResult | null) => void;
+}
+
+const Done = ({ onDone, doneActionParent, active }: DoneProps) => {
+  const disabled = !active;
+  const { t } = useTranslation('os');
+
+  const doneButton = (
+    <Button
+      {...(onDone && { onClick: () => onDone(null) })}
+      disabled={disabled}
+      className='grow flex items-center gap-2 pli-2'
+      data-autofocus='identity added'
+      data-testid='identity-added-done'
+    >
+      <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
+      <span className='grow'>{t('done label')}</span>
+      <Check weight='bold' className={getSize(4)} />
+    </Button>
+  );
+
+  return doneActionParent ? cloneElement(doneActionParent, {}, doneButton) : doneButton;
+};
+
+export const IdentityAdded = ({
+  mode,
+  addedIdentity,
+  onDone,
+  doneActionParent,
+  ...viewStateProps
+}: IdentityAddedProps) => {
   const disabled = !viewStateProps.active;
   const { dispatch } = viewStateProps;
   const { t } = useTranslation('os');
@@ -27,34 +62,38 @@ export const IdentityAdded = ({ addedIdentity, ...viewStateProps }: IdentityAdde
           size={20}
           fallbackValue={addedIdentity?.identityKey.toHex() ?? ''}
           label={
-            <p className={mx('text-lg', !addedIdentity?.displayName && 'font-mono')}>
-              {addedIdentity?.displayName ?? addedIdentity?.identityKey.truncate() ?? ' '}
+            <p className={mx('text-lg', !addedIdentity?.profile?.displayName && 'font-mono')}>
+              {addedIdentity?.profile?.displayName ?? addedIdentity?.identityKey.truncate() ?? ' '}
             </p>
           }
           variant='circle'
           status='active'
         />
       </div>
-      <div className='flex gap-2'>
-        <Button
-          disabled={disabled || !addedIdentity}
-          className='grow flex items-center gap-2 pli-2 order-2'
-          onClick={() => addedIdentity && dispatch({ type: 'select identity', identity: addedIdentity })}
-          data-autofocus='identity added'
-        >
-          <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
-          <span className='grow'>{t('continue label')}</span>
-          <CaretRight weight='bold' className={getSize(4)} />
-        </Button>
-        <Button
-          disabled={disabled}
-          onClick={() => dispatch({ type: 'deselect identity' })}
-          className='flex items-center gap-2 pis-2 pie-4'
-        >
-          <CaretLeft weight='bold' className={getSize(4)} />
-          <span>{t('deselect identity label')}</span>
-        </Button>
-      </div>
+      {mode === 'halo-only' ? (
+        <Done onDone={onDone} doneActionParent={doneActionParent} {...viewStateProps} />
+      ) : (
+        <div className='flex gap-2'>
+          <Button
+            disabled={disabled || !addedIdentity}
+            className='grow flex items-center gap-2 pli-2 order-2'
+            onClick={() => addedIdentity && dispatch({ type: 'select identity', identity: addedIdentity })}
+            data-autofocus='identity added'
+          >
+            <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
+            <span className='grow'>{t('continue label')}</span>
+            <CaretRight weight='bold' className={getSize(4)} />
+          </Button>
+          <Button
+            disabled={disabled}
+            onClick={() => dispatch({ type: 'deselect identity' })}
+            className='flex items-center gap-2 pis-2 pie-4'
+          >
+            <CaretLeft weight='bold' className={getSize(4)} />
+            <span>{t('deselect identity label')}</span>
+          </Button>
+        </div>
+      )}
     </ViewState>
   );
 };