Use call link color in create, update, show

ts/components/CallLinkAddNameModal.tsx

@@ -8,6 +8,7 @@ import { Button, ButtonVariant } from './Button';
 import { Avatar, AvatarSize } from './Avatar';
 import { Input } from './Input';
 import type { CallLinkType } from '../types/CallLink';
+import { getColorForCallLink } from '../util/getColorForCallLink';
 
 export type CallLinkAddNameModalProps = Readonly<{
   i18n: LocalizerType;
@@ -68,6 +69,7 @@ export function CallLinkAddNameModal({
         <Avatar
           i18n={i18n}
           badge={undefined}
+          color={getColorForCallLink(callLink.rootKey)}
           conversationType="callLink"
           size={AvatarSize.SIXTY_FOUR}
           acceptedMessageRequest

ts/components/CallLinkDetails.tsx

@@ -16,6 +16,7 @@ import { drop } from '../util/drop';
 import { Avatar, AvatarSize } from './Avatar';
 import { Button, ButtonSize, ButtonVariant } from './Button';
 import { copyCallLink } from '../util/copyLinksWithToast';
+import { getColorForCallLink } from '../util/getColorForCallLink';
 
 function toUrlWithoutProtocol(url: URL): string {
   return `${url.hostname}${url.pathname}${url.search}${url.hash}`;
@@ -46,6 +47,7 @@ export function CallLinkDetails({
           className="CallLinkDetails__HeaderAvatar"
           i18n={i18n}
           badge={undefined}
+          color={getColorForCallLink(callLink.rootKey)}
           conversationType="callLink"
           size={AvatarSize.SIXTY_FOUR}
           acceptedMessageRequest

ts/components/CallLinkEditModal.tsx

@@ -15,6 +15,7 @@ import { Select } from './Select';
 import { linkCallRoute } from '../util/signalRoutes';
 import { Button, ButtonSize, ButtonVariant } from './Button';
 import { Avatar, AvatarSize } from './Avatar';
+import { getColorForCallLink } from '../util/getColorForCallLink';
 
 const CallLinkEditModalRowIconClasses = {
   Edit: 'CallLinkEditModal__RowIcon--Edit',
@@ -113,6 +114,7 @@ export function CallLinkEditModal({
         <Avatar
           i18n={i18n}
           badge={undefined}
+          color={getColorForCallLink(callLink.rootKey)}
           conversationType="callLink"
           size={AvatarSize.SIXTY_FOUR}
           acceptedMessageRequest

ts/components/CallingAdhocCallInfo.tsx

@@ -16,7 +16,7 @@ import type { ConversationType } from '../state/ducks/conversations';
 import { ModalHost } from './ModalHost';
 import { isInSystemContacts } from '../util/isInSystemContacts';
 import type { RemoveClientType } from '../state/ducks/calling';
-import { AvatarColors } from '../types/Colors';
+import { AVATAR_COLOR_COUNT, AvatarColors } from '../types/Colors';
 import { Button } from './Button';
 import { Modal } from './Modal';
 import { Theme } from '../util/theme';
@@ -72,7 +72,7 @@ function UnknownContacts({
     }) => {
       const colorIndex = participant.serviceId
         ? (parseInt(participant.serviceId.slice(-4), 16) || 0) %
-          AvatarColors.length
+          AVATAR_COLOR_COUNT
         : 0;
       return (
         <Avatar

ts/types/Colors.ts

@@ -90,6 +90,8 @@ export const AvatarColorMap = new Map([
 
 export const AvatarColors = Array.from(AvatarColorMap.keys());
 
+export const AVATAR_COLOR_COUNT = AvatarColors.length;
+
 export const ConversationColors = [
   'ultramarine',
   'crimson',

ts/util/callLinks.ts

@@ -30,7 +30,7 @@ import {
 } from '../types/CallLink';
 import type { LocalizerType } from '../types/Util';
 import { isTestOrMockEnvironment } from '../environment';
-import { AvatarColors } from '../types/Colors';
+import { getColorForCallLink } from './getColorForCallLink';
 
 export const CALL_LINK_DEFAULT_STATE = {
   name: '',
@@ -105,21 +105,6 @@ export function callLinkToConversation(
     badges: [],
   };
 }
-// See https://github.com/signalapp/ringrtc/blob/49b4b8a16f997c7fa9a429e96aa83f80b2065c63/src/rust/src/lite/call_links/base16.rs#L8
-const BASE_16_CONSONANT_ALPHABET = 'bcdfghkmnpqrstxz';
-
-// See https://github.com/signalapp/ringrtc/blob/49b4b8a16f997c7fa9a429e96aa83f80b2065c63/src/rust/src/lite/call_links/base16.rs#L127-L139
-export function getColorForCallLink(rootKey: string): string {
-  const rootKeyStart = rootKey.slice(0, 2);
-
-  const upper = BASE_16_CONSONANT_ALPHABET.indexOf(rootKeyStart[0]) || 0 * 16;
-  const lower = BASE_16_CONSONANT_ALPHABET.indexOf(rootKeyStart[1]) || 0;
-  const firstByte = upper + lower;
-
-  const index = firstByte % 12;
-
-  return AvatarColors[index];
-}
 
 export function getPlaceholderCallLinkConversation(
   roomId: string,

ts/util/getColorForCallLink.ts

@@ -0,0 +1,20 @@
+// Copyright 2024 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { AVATAR_COLOR_COUNT, AvatarColors } from '../types/Colors';
+
+// See https://github.com/signalapp/ringrtc/blob/49b4b8a16f997c7fa9a429e96aa83f80b2065c63/src/rust/src/lite/call_links/base16.rs#L8
+const BASE_16_CONSONANT_ALPHABET = 'bcdfghkmnpqrstxz';
+
+// See https://github.com/signalapp/ringrtc/blob/49b4b8a16f997c7fa9a429e96aa83f80b2065c63/src/rust/src/lite/call_links/base16.rs#L127-L139
+export function getColorForCallLink(rootKey: string): string {
+  const rootKeyStart = rootKey.slice(0, 2);
+
+  const upper = BASE_16_CONSONANT_ALPHABET.indexOf(rootKeyStart[0]) || 0 * 16;
+  const lower = BASE_16_CONSONANT_ALPHABET.indexOf(rootKeyStart[1]) || 0;
+  const firstByte = upper + lower;
+
+  const index = firstByte % AVATAR_COLOR_COUNT;
+
+  return AvatarColors[index];
+}

ts/util/migrateColor.ts

@@ -3,7 +3,7 @@
 
 import { sample } from 'lodash';
 
-import { AvatarColors } from '../types/Colors';
+import { AVATAR_COLOR_COUNT, AvatarColors } from '../types/Colors';
 import type { ConversationAttributesType } from '../model-types';
 import type { AvatarColorType, CustomColorType } from '../types/Colors';
 import type { ServiceIdString } from '../types/ServiceId';
@@ -22,7 +22,7 @@ export function migrateColor(
     return sample(AvatarColors) || AvatarColors[0];
   }
 
-  const index = (parseInt(serviceId.slice(-4), 16) || 0) % AvatarColors.length;
+  const index = (parseInt(serviceId.slice(-4), 16) || 0) % AVATAR_COLOR_COUNT;
   return AvatarColors[index];
 }