Merge pull request #738 from redjex/show-peer-ids

Add an option to show peer IDs in profiles

Author: morethanwords

src/components/peerProfile.tsx

@@ -8,6 +8,8 @@ import {useChat, usePeer} from '@stores/peers';
 import {BusinessWorkHours, Chat, ChatFull, GeoPoint, GroupCall, HelpTimezonesList, InputGroupCall, Photo, StoryItem, Document, MessageMedia, Timezone, User, UserFull, UserStatus} from '@layer';
 import getAudioTitles from '@appManagers/utils/docs/getAudioTitles';
 import {useFullPeer} from '@stores/fullPeers';
+import {appSettings} from '@stores/appSettings';
+import getPeerPhoto from '@appManagers/utils/peers/getPeerPhoto';
 import {useHotReloadGuard} from '@lib/solidjs/hotReloadGuard';
 import {bindManagersToSession} from '@lib/accounts/bindManagersToAccount';
 import createMiddleware from '@helpers/solid/createMiddleware';
@@ -18,7 +20,7 @@ import classNames from '@helpers/string/classNames';
 import Row from '@components/rowTsx';
 import formatUserPhone from '@components/wrappers/formatUserPhone';
 import {copyTextToClipboard} from '@helpers/clipboard';
-import {copyPhoneNumber, copyUsername} from '@helpers/copyContact';
+import {copyPeerId, copyPhoneNumber, copyUsername} from '@helpers/copyContact';
 import safeWindowOpen from '@helpers/dom/safeWindowOpen';
 import anchorCopy from '@helpers/dom/anchorCopy';
 import getServerMessageId from '@appManagers/utils/messageId/getServerMessageId';
@@ -965,6 +967,50 @@ PeerProfile.ContactNote = () => {
   );
 };
 
+PeerProfile.PeerId = () => {
+  const context = useContext(PeerProfileContext);
+  const {i18n} = useHotReloadGuard();
+  const peerId = createMemo(() => {
+    if(!appSettings.showPeerIds || !context.canBeDetailed() || context.isTopic) {
+      return;
+    }
+
+    return '' + Math.abs(context.peerId);
+  });
+
+  const dcId = createMemo(() => {
+    const photo = getPeerPhoto(context.peer as User | Chat);
+    if(photo?._ === 'userProfilePhoto' && photo.pFlags.personal) {
+      return ((context.fullPeer as UserFull.userFull)?.profile_photo as Photo.photo)?.dc_id;
+    }
+
+    return photo?.dc_id;
+  });
+
+  const onClick = () => copyPeerId(peerId());
+
+  return (
+    <Show when={peerId()}>
+      <Row
+        clickable={onClick}
+        contextMenu={{
+          buttons: [{
+            icon: 'copy',
+            text: 'Text.CopyLabel_Id',
+            onClick
+          }]
+        }}
+      >
+        <Row.Icon icon="tag_alt_filled" text="ID" />
+        <Row.Title><span dir="ltr">{peerId()}</span></Row.Title>
+        <Row.Subtitle subtitleRight={dcId() && i18n('PeerInfo.DataCenter', [dcId()])}>
+          {i18n('PeerInfo.Id')}
+        </Row.Subtitle>
+      </Row>
+    </Show>
+  );
+};
+
 PeerProfile.Location = () => {
   const context = useContext(PeerProfileContext);
   const {i18n} = useHotReloadGuard();
@@ -2018,6 +2064,7 @@ PeerProfile.MainSection = () => {
       <PeerProfile.Username />
       <PeerProfile.Location />
       <PeerProfile.Bio />
+      <PeerProfile.PeerId />
       <PeerProfile.Link />
       <PeerProfile.Birthday />
       <PeerProfile.ContactNote />

src/components/rowTsx.tsx

@@ -418,6 +418,7 @@ Row.Subtitle = (props: {
 
 Row.Icon = (props: {
   icon: Icon,
+  text?: string,
   class?: string,
   noBackground?: boolean
 }) => {
@@ -433,7 +434,9 @@ Row.Icon = (props: {
         'background-image': getRowIconBackgroundImage(props.icon)
       }}
     >
-      <IconTsx icon={props.icon} class="row-icon-icon" />
+      {props.text ?
+        <span class="row-icon-text">{props.text}</span> :
+        <IconTsx icon={props.icon} class="row-icon-icon" />}
     </span>
   ));
 };

src/components/sidebarLeft/tabs/generalSettings.tsx

@@ -348,13 +348,28 @@ const TimeFormatSection = () => {
 // Tab root
 // ─────────────────────────────────────────────────────────────────────────────
 
+const PeerIdsSection = () => {
+  return (
+    <Section>
+      <Row>
+        <Row.CheckboxFieldToggle>
+          <CheckboxFieldTsx stateKey={joinDeepPath('settings', 'showPeerIds')} toggle />
+        </Row.CheckboxFieldToggle>
+        <Row.Title>{i18n('GeneralSettings.ShowPeerIds')}</Row.Title>
+        <Row.Subtitle>{i18n('GeneralSettings.ShowPeerIdsInfo')}</Row.Subtitle>
+      </Row>
+    </Section>
+  );
+};
+
 const GeneralSettings = () => {
   return (
     <>
       <SettingsSection />
       <ThemeSection />
       {IS_GEOLOCATION_SUPPORTED && <DistanceUnitsSection />}
       <TimeFormatSection />
+      <PeerIdsSection />
     </>
   );
 };

src/config/state.ts

@@ -128,6 +128,7 @@ export type StateSettings = {
   savedAsForum: boolean,
   notifyAllAccounts: boolean,
   tabsInSidebar: boolean,
+  showPeerIds: boolean,
   /** Ids of the settings-search results picked last, most recent first. */
   settingsSearchRecent: string[],
   seenTooltips: {
@@ -558,6 +559,7 @@ export const SETTINGS_INIT: StateSettings = {
   savedAsForum: false,
   notifyAllAccounts: true,
   tabsInSidebar: false,
+  showPeerIds: false,
   settingsSearchRecent: [],
   playbackParams: {
     volume: 1,

src/helpers/copyContact.ts

@@ -25,3 +25,8 @@ export function copyPhoneNumber(phone: string) {
   copyTextToClipboard(phone.replace(/\s/g, ''));
   toastNew({langPackKey: 'PhoneCopied'});
 }
+
+export function copyPeerId(id: string) {
+  copyTextToClipboard(id);
+  toastNew({langPackKey: 'IdCopied'});
+}

src/lang.ts

@@ -1924,6 +1924,7 @@ const lang = {
   'ContactDetails.Organization': 'Organization',
   'ContactDetails.Name': 'Name',
   'UsernameCopied': 'Username copied to clipboard.',
+  'IdCopied': 'ID copied to clipboard.',
   // "HashtagCopied": "Hashtag copied to clipboard.",
   'BioCopied': 'Bio copied to clipboard.',
   'UserBio': 'Bio',
@@ -4951,11 +4952,17 @@ const lang = {
   'Text.CopyLabel_Username': 'Copy Username',
   'Text.CopyLabel_ShareLink': 'Copy Share Link',
   'Text.CopyLabel_Note': 'Copy Note',
+  'Text.CopyLabel_Id': 'Copy ID',
   'GeneralSettings.BigEmoji': 'Large Emoji',
   'GeneralSettings.EmojiPrediction': 'Suggest Emoji',
   'GeneralSettings.IncreaseContrast': 'Increase Contrast',
   'GeneralSettings.IncreaseContrastInfo': 'Make text and buttons easier to see.',
   'GeneralSettings.IncreaseContrast.SearchKeywords': 'accessibility, a11y, high contrast, readability, colors',
+  'GeneralSettings.ShowPeerIds': 'Show Peer IDs',
+  'GeneralSettings.ShowPeerIdsInfo': 'Show the ID and data center of users, bots, groups and channels in their profiles.',
+  'GeneralSettings.ShowPeerIds.SearchKeywords': 'id, user id, chat id, channel id, dc, data center, developer',
+  'PeerInfo.Id': 'ID',
+  'PeerInfo.DataCenter': 'DC %d',
   'GroupPermission.Delete': 'Delete Exception',
   'Search.Confirm.ClearHistory': 'Are you sure you want to clear your search history?',
   'SecureId.Identity.Placeholder.ExpiryDate': 'Expiry Date',

src/lib/settingsSearch/generated.ts

@@ -202,6 +202,7 @@ const generated: GeneratedSettingsSearchData = {
     {id: 'AppGeneralSettingsTab:General.TimeFormat.h12', sectionId: 'AppGeneralSettingsTab', kind: 'option', titleLangKey: 'General.TimeFormat.h12'},
     {id: 'AppGeneralSettingsTab:General.TimeFormat.h23', sectionId: 'AppGeneralSettingsTab', kind: 'option', titleLangKey: 'General.TimeFormat.h23'},
     {id: 'AppGeneralSettingsTab:GeneralSettings.IncreaseContrast', sectionId: 'AppGeneralSettingsTab', kind: 'toggle', titleLangKey: 'GeneralSettings.IncreaseContrast'},
+    {id: 'AppGeneralSettingsTab:GeneralSettings.ShowPeerIds', sectionId: 'AppGeneralSettingsTab', kind: 'toggle', titleLangKey: 'GeneralSettings.ShowPeerIds'},
     {id: 'AppGeneralSettingsTab:LiteMode.EnableText', sectionId: 'AppGeneralSettingsTab', kind: 'row', titleLangKey: 'LiteMode.EnableText'},
     {id: 'AppGeneralSettingsTab:Settings', sectionId: 'AppGeneralSettingsTab', kind: 'subsection', titleLangKey: 'Settings'},
     {id: 'AppGeneralSettingsTab:TextSize', sectionId: 'AppGeneralSettingsTab', kind: 'row', titleLangKey: 'TextSize'},

src/scss/partials/_row.scss

@@ -267,6 +267,12 @@ $row-border-radius: $border-radius-medium;
         color: #fff;
       }
 
+      &-text {
+        font-size: .875rem;
+        font-weight: var(--font-weight-bold);
+        letter-spacing: .02em;
+      }
+
       &-premium-color {
         color: var(--primary-color);
       }