From 932e4c3343947a35ba26938e1b5113b079dd4519 Mon Sep 17 00:00:00 2001
From: ayumi-signal <143036029+ayumi-signal@users.noreply.github.com>
Date: Wed, 26 Jun 2024 10:35:48 -0700
Subject: [PATCH] Use call link color in create, update, show

---
 ts/components/CallLinkAddNameModal.tsx |  2 ++
 ts/components/CallLinkDetails.tsx      |  2 ++
 ts/components/CallLinkEditModal.tsx    |  2 ++
 ts/components/CallingAdhocCallInfo.tsx |  4 ++--
 ts/types/Colors.ts                     |  2 ++
 ts/util/callLinks.ts                   | 17 +----------------
 ts/util/getColorForCallLink.ts         | 20 ++++++++++++++++++++
 ts/util/migrateColor.ts                |  4 ++--
 8 files changed, 33 insertions(+), 20 deletions(-)
 create mode 100644 ts/util/getColorForCallLink.ts

diff --git a/ts/components/CallLinkAddNameModal.tsx b/ts/components/CallLinkAddNameModal.tsx
index 19735c76bd3..7b817a55e9a 100644
--- a/ts/components/CallLinkAddNameModal.tsx
+++ b/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
diff --git a/ts/components/CallLinkDetails.tsx b/ts/components/CallLinkDetails.tsx
index 8656cbc74da..92ad777c876 100644
--- a/ts/components/CallLinkDetails.tsx
+++ b/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
diff --git a/ts/components/CallLinkEditModal.tsx b/ts/components/CallLinkEditModal.tsx
index fe328e0e5e2..ad352439134 100644
--- a/ts/components/CallLinkEditModal.tsx
+++ b/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
diff --git a/ts/components/CallingAdhocCallInfo.tsx b/ts/components/CallingAdhocCallInfo.tsx
index 0b36e036d28..9aba9221c9a 100644
--- a/ts/components/CallingAdhocCallInfo.tsx
+++ b/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
diff --git a/ts/types/Colors.ts b/ts/types/Colors.ts
index 797532baaf2..936d0ffc235 100644
--- a/ts/types/Colors.ts
+++ b/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',
diff --git a/ts/util/callLinks.ts b/ts/util/callLinks.ts
index a75fbda4c5d..54a33ecee10 100644
--- a/ts/util/callLinks.ts
+++ b/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,
diff --git a/ts/util/getColorForCallLink.ts b/ts/util/getColorForCallLink.ts
new file mode 100644
index 00000000000..105afa1f159
--- /dev/null
+++ b/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];
+}
diff --git a/ts/util/migrateColor.ts b/ts/util/migrateColor.ts
index 2c8a27f94cf..89c99e9f47f 100644
--- a/ts/util/migrateColor.ts
+++ b/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];
 }