@dxos/shell 0.4.6 → 0.4.7-main.0a4f1cd

package/src/panels/IdentityPanel/IdentityPanel.tsx

@@ -9,7 +9,8 @@ import { useClient } from '@dxos/react-client';
 import { type Identity, useIdentity, useDevices, useHaloInvitations } from '@dxos/react-client/halo';
 import { useInvitationStatus } from '@dxos/react-client/invitations';
 import type { CancellableInvitationObservable } from '@dxos/react-client/invitations';
-import { Avatar, DensityProvider, useId, useJdenticonHref, useTranslation } from '@dxos/react-ui';
+import { Avatar, DensityProvider, useId, useTranslation } from '@dxos/react-ui';
+import { keyToFallback } from '@dxos/util';
 
 import {
   type IdentityPanelHeadingProps,
@@ -25,12 +26,12 @@ import { InvitationManager } from '../../steps';
 const viewStyles = 'pbs-1 pbe-3 pli-3';
 
 const IdentityHeading = ({ titleId, title, identity, onDone }: IdentityPanelHeadingProps) => {
-  const fallbackHref = useJdenticonHref(identity.identityKey.toHex(), 12);
+  const fallbackValue = keyToFallback(identity.identityKey);
   return (
     <Heading titleId={titleId} title={title} corner={<CloseButton onDone={onDone} />}>
-      <Avatar.Root size={12} variant='circle' status='active'>
+      <Avatar.Root size={12} variant='circle' status='active' hue={identity.profile?.data?.hue || fallbackValue.hue}>
         <Avatar.Frame classNames='block mbs-4 mbe-2 mli-auto chromatic-ignore'>
-          <Avatar.Fallback href={fallbackHref} />
+          <Avatar.Fallback text={identity.profile?.data?.emoji || fallbackValue.emoji} />
         </Avatar.Frame>
         <Avatar.Label classNames='block text-center font-light text-xl' data-testid='identityHeading.displayName'>
           {identity.profile?.displayName ?? generateName(identity.identityKey.toHex())}

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

@@ -8,8 +8,9 @@ import { type Event, type SingleOrArray } from 'xstate';
 import { log } from '@dxos/log';
 import { type Identity } from '@dxos/react-client/halo';
 import { useTranslation } from '@dxos/react-ui';
+import { hexToEmoji, hexToHue } from '@dxos/util';
 
-import { Action, Actions, StepHeading, Input, useClipboardContext } from '../../../components';
+import { Action, Actions, StepHeading, Input, useClipboardContext, EmojiPicker, HuePicker } from '../../../components';
 import { type IdentityPanelStepProps } from '../IdentityPanelProps';
 import { type IdentityEvent } from '../identityMachine';
 
@@ -36,13 +37,20 @@ export const ProfileForm = (props: ProfileFormProps) => {
   return <ProfileFormImpl {...props} onUpdateProfile={handleUpdateProfile} validationMessage={validationMessage} />;
 };
 
+const getHueValue = (identity?: Identity) =>
+  identity?.profile?.data?.hue || hexToHue(identity?.identityKey.toHex() ?? '0');
+const getEmojiValue = (identity?: Identity) =>
+  identity?.profile?.data?.emoji || hexToEmoji(identity?.identityKey.toHex() ?? '0');
+
 // TODO(zhenyasav): impl shouldn't need send()
 const ProfileFormImpl = (props: ProfileFormImplProps) => {
   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 [displayName, setDisplayName] = useState(profile?.displayName ?? '');
+  const [hue, setHue] = useState<string>(getHueValue(identity));
+  const [emoji, setEmoji] = useState<string>(getEmojiValue(identity));
   const { textValue, setTextValue } = useClipboardContext();
   const identityHex = identity?.identityKey.toHex();
   const copied = textValue === identityHex;
@@ -51,14 +59,28 @@ const ProfileFormImpl = (props: ProfileFormImplProps) => {
       <div role='none' className='grow flex flex-col justify-center'>
         <Input
           {...{ validationMessage }}
-          label={<StepHeading>{t('display name input label')}</StepHeading>}
+          label={<StepHeading className='m-0'>{t('display name input label')}</StepHeading>}
           disabled={disabled}
           data-testid='display-name-input'
           placeholder={t('display name input placeholder')}
-          value={inputValue}
-          onChange={({ target: { value } }) => setInputValue(value)}
-          onKeyDown={({ key }) => key === 'Enter' && onUpdateProfile?.({ displayName: inputValue })}
+          value={displayName}
+          onChange={({ target: { value } }) => setDisplayName(value)}
         />
+        <StepHeading className='mbe-2'>{t('emoji and color label')}</StepHeading>
+        <div role='none' className='grid grid-cols-[1fr_min-content] gap-y-2'>
+          <EmojiPicker
+            emoji={emoji}
+            onChangeEmoji={setEmoji}
+            disabled={disabled}
+            onClickClear={() => setEmoji(getEmojiValue(identity))}
+          />
+          <HuePicker
+            hue={hue}
+            onChangeHue={setHue}
+            disabled={disabled}
+            onClickClear={() => setHue(getHueValue(identity))}
+          />
+        </div>
       </div>
       <Actions>
         <Action
@@ -84,7 +106,7 @@ const ProfileFormImpl = (props: ProfileFormImplProps) => {
         <Action
           variant='primary'
           disabled={disabled}
-          onClick={() => onUpdateProfile?.({ displayName: inputValue })}
+          onClick={() => onUpdateProfile?.({ displayName, data: { emoji, hue } })}
           data-testid='update-profile-form-continue'
         >
           {t('done label')}

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

@@ -6,8 +6,9 @@ import React, { cloneElement } from 'react';
 
 import { generateName } from '@dxos/display-name';
 import type { Identity } from '@dxos/react-client/halo';
-import { Avatar, useId, useJdenticonHref, useTranslation } from '@dxos/react-ui';
+import { Avatar, useId, useTranslation } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
+import { hexToFallback } from '@dxos/util';
 
 import { Action, Actions, StepHeading } from '../../../components';
 import { type JoinPanelMode, type JoinStepProps } from '../JoinPanelProps';
@@ -22,11 +23,10 @@ export const IdentityAdded = (props: IdentityAddedProps) => {
   const disabled = !active;
   const { t } = useTranslation('os');
 
-  const fallbackValue = addedIdentity?.identityKey.toHex();
+  const addedIdentityHex = addedIdentity?.identityKey.toHex() ?? '0';
+  const fallbackValue = hexToFallback(addedIdentityHex);
   const labelId = useId('identityListItem__label');
-  const jdenticon = useJdenticonHref(fallbackValue ?? '', 12);
-  const displayName =
-    addedIdentity?.profile?.displayName ?? (addedIdentity && generateName(addedIdentity?.identityKey.toHex()));
+  const displayName = addedIdentity?.profile?.displayName ?? (addedIdentity && generateName(addedIdentityHex));
 
   const doneAction = (
     <Action
@@ -43,9 +43,9 @@ export const IdentityAdded = (props: IdentityAddedProps) => {
     <>
       <StepHeading>{t('identity added label')}</StepHeading>
       <div role='none' className='grow flex flex-col items-center justify-center text-center gap-2'>
-        <Avatar.Root status='active' labelId={labelId}>
+        <Avatar.Root status='active' labelId={labelId} hue={addedIdentity?.profile?.data?.hue || fallbackValue.hue}>
           <Avatar.Frame>
-            <Avatar.Fallback href={jdenticon} />
+            <Avatar.Fallback text={addedIdentity?.profile?.data?.emoji || fallbackValue.emoji} />
           </Avatar.Frame>
           <Avatar.Label classNames={mx('text-lg truncate', !addedIdentity?.profile?.displayName && 'font-mono')}>
             {displayName}

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

@@ -5,9 +5,9 @@
 import React, { type ChangeEvent, useState } from 'react';
 
 import { Input, useTranslation } from '@dxos/react-ui';
+import { hexToEmoji } from '@dxos/util';
 
 import { Actions, Action, Emoji, StepHeading } from '../../../components';
-import { toEmoji } from '../../../util';
 import { type JoinStepProps } from '../JoinPanelProps';
 
 const pinLength = 6;
@@ -45,7 +45,7 @@ export const InvitationAuthenticator = ({
   return (
     <>
       <div role='none' className='grow flex flex-col justify-center'>
-        {invitationId && <Emoji text={toEmoji(invitationId)} />}
+        {invitationId && <Emoji text={hexToEmoji(invitationId)} />}
         <Input.Root
           {...(failed && {
             validationValence: 'error',

package/src/steps/InvitationManager.tsx

@@ -9,6 +9,7 @@ import { QR } from 'react-qr-rounded';
 import { type InvitationStatus, Invitation } from '@dxos/react-client/invitations';
 import { useId, useTranslation } from '@dxos/react-ui';
 import { descriptionText, getSize, mx } from '@dxos/react-ui-theme';
+import { hexToEmoji } from '@dxos/util';
 
 import { type StepProps } from './StepProps';
 import {
@@ -22,7 +23,7 @@ import {
   CopyButton,
   Centered,
 } from '../components';
-import { invitationStatusValue, toEmoji } from '../util';
+import { invitationStatusValue } from '../util';
 
 export type InvitationManagerProps = StepProps &
   Partial<InvitationStatus> & {
@@ -44,13 +45,13 @@ export const InvitationManager = ({
   status,
   type,
   authCode,
-  id,
+  id = '0',
 }: InvitationManagerProps) => {
   const { t } = useTranslation('os');
   const qrLabel = useId('invitation-manager__qr-code');
   const statusValue = type === Invitation.Type.MULTIUSE ? 0 : invitationStatusValue.get(status!) ?? 0;
   const showAuthCode = statusValue === 3;
-  const emoji = toEmoji(id ?? '');
+  const emoji = hexToEmoji(id);
   const activeView = useMemo(() => {
     switch (true) {
       case statusValue === 5:

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

@@ -106,4 +106,25 @@ export const os = {
   'join new identity label': 'Join a new identity',
   'reset device label': 'Reset device',
   'reset device confirm message': 'Are you sure you want to reset your device? All data will be lost.',
+  'emoji and color label': 'Emoji and color',
+  'clear label': 'Use default',
+  'select emoji label': 'Choose an emoji to use in your avatar',
+  'select hue label': 'Choose a hue to use in your avatar',
+  'red label': 'Red',
+  'orange label': 'Orange',
+  'amber label': 'Amber',
+  'yellow label': 'Yellow',
+  'lime label': 'Lime',
+  'green label': 'Green',
+  'emerald label': 'Emerald',
+  'teal label': 'Teal',
+  'cyan label': 'Cyan',
+  'sky label': 'Sky',
+  'blue label': 'Blue',
+  'indigo label': 'Indigo',
+  'violet label': 'Violet',
+  'purple label': 'Purple',
+  'fuchsia label': 'Fuchsia',
+  'pink label': 'Pink',
+  'rose label': 'Rose',
 };

package/src/util/index.ts

@@ -3,4 +3,3 @@
 //
 
 export * from './invitationStatusValue';
-export * from './toEmoji';

package/dist/types/src/util/toEmoji.d.ts

@@ -1,2 +0,0 @@
-export declare const toEmoji: (keyAsHex: string) => string;
-//# sourceMappingURL=toEmoji.d.ts.map

package/dist/types/src/util/toEmoji.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"toEmoji.d.ts","sourceRoot":"","sources":["../../../../src/util/toEmoji.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,OAAO,aAAc,MAAM,WAAiD,CAAC"}

package/dist/types/src/util/toEmoji.js

@@ -1,26 +0,0 @@
-"use strict";
-//
-// Copyright 2023 DXOS.org
-//
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.toEmoji = void 0;
-const lodash_toarray_1 = __importDefault(require("lodash.toarray"));
-const emoji = (0, lodash_toarray_1.default)(
-// When changing this set, please check the result in a console or e.g. RunKit (https://runkit.com/thure/642214441dd6ae000855a8de)
-// Emoji sometimes use a combination of code points, and some code points aren't visible on their own, so by adding or deleting you may unintentionally create non-visible items.
-// This set was chosen from the characters in Unicode Emoji v15.0 based on the following criteria:
-// – not people or isolated anthropomorphic faces
-// – not flags
-// – more concrete than abstract
-// – less culturally specific
-// – less easily confused with another emoji in the set
-// – requires less special knowledge to identify
-// – less likely to evoke negative feelings (no meat, no drugs, no weapons, etc)
-// – less common as a signifier in UX
-'👹👻👽🤖🎃🦾🦿🦷👣👁️🧶👑🐒🦆🦉🐴🦄🐝🦋🐞🪲🐢🦎🦕🦑🦀🐠🐬🐋🦭🐅🐆🦓🦍🦧🐘🐫🦒🦘🦬🐖🐏🦌🐕🐈🐓🦚🦜🦢🦩🦦🐁🐿️🌵🌲🌳🪵🌱🍁🪺🍄🐚🪸🪨🌾🌷🌻☀️🌙🪐⭐️⚡️☄️🔥🌈☁️💧⛱️🌊🍎🍋🍉🍇🫐🍈🍒🍑🥭🍍🥥🥝🥑🌶️🌽🥕🍬🥜🫖☕️🍵🧊🧂🏔️⚓️🛟🏝️🛶🚀🛰️⛲️🏰🚲⛺️🎙️🧲⚙️🔩🔮🔭🔬🧬🌡️🧺🛎️🔑🪑🧸🎈🎀🎊♻️🎵');
-const toEmoji = (keyAsHex) => emoji[parseInt(keyAsHex, 16) % emoji.length];
-exports.toEmoji = toEmoji;
-//# sourceMappingURL=toEmoji.js.map

package/dist/types/src/util/toEmoji.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"toEmoji.js","sourceRoot":"","sources":["../../../../src/util/toEmoji.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;AAEF,oEAAqC;AAErC,MAAM,KAAK,GAAG,IAAA,wBAAO;AACnB,kIAAkI;AAClI,iLAAiL;AACjL,kGAAkG;AAClG,iDAAiD;AACjD,cAAc;AACd,gCAAgC;AAChC,6BAA6B;AAC7B,uDAAuD;AACvD,gDAAgD;AAChD,gFAAgF;AAChF,qCAAqC;AACrC,mRAAmR,CACpR,CAAC;AAEK,MAAM,OAAO,GAAG,CAAC,QAAgB,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;AAA7E,QAAA,OAAO,WAAsE"}

package/src/util/toEmoji.ts

@@ -1,22 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import toArray from 'lodash.toarray';
-
-const emoji = toArray(
-  // When changing this set, please check the result in a console or e.g. RunKit (https://runkit.com/thure/642214441dd6ae000855a8de)
-  // Emoji sometimes use a combination of code points, and some code points aren't visible on their own, so by adding or deleting you may unintentionally create non-visible items.
-  // This set was chosen from the characters in Unicode Emoji v15.0 based on the following criteria:
-  // – not people or isolated anthropomorphic faces
-  // – not flags
-  // – more concrete than abstract
-  // – less culturally specific
-  // – less easily confused with another emoji in the set
-  // – requires less special knowledge to identify
-  // – less likely to evoke negative feelings (no meat, no drugs, no weapons, etc)
-  // – less common as a signifier in UX
-  '👹👻👽🤖🎃🦾🦿🦷👣👁️🧶👑🐒🦆🦉🐴🦄🐝🦋🐞🪲🐢🦎🦕🦑🦀🐠🐬🐋🦭🐅🐆🦓🦍🦧🐘🐫🦒🦘🦬🐖🐏🦌🐕🐈🐓🦚🦜🦢🦩🦦🐁🐿️🌵🌲🌳🪵🌱🍁🪺🍄🐚🪸🪨🌾🌷🌻☀️🌙🪐⭐️⚡️☄️🔥🌈☁️💧⛱️🌊🍎🍋🍉🍇🫐🍈🍒🍑🥭🍍🥥🥝🥑🌶️🌽🥕🍬🥜🫖☕️🍵🧊🧂🏔️⚓️🛟🏝️🛶🚀🛰️⛲️🏰🚲⛺️🎙️🧲⚙️🔩🔮🔭🔬🧬🌡️🧺🛎️🔑🪑🧸🎈🎀🎊♻️🎵',
-);
-
-export const toEmoji = (keyAsHex: string) => emoji[parseInt(keyAsHex, 16) % emoji.length];