From 8dfe2098ce14e77898805093b5ce28c610f1b098 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Tue, 13 Aug 2024 18:27:56 +0200
Subject: [PATCH] feat(post): add user ID with color specific to user address

---
 src/components/post-desktop/post-desktop.tsx | 13 +++++++++++--
 src/components/post-mobile/post-mobile.tsx   | 13 +++++++++++--
 src/lib/utils/post-utils.ts                  | 18 ++++++++++++++++++
 src/views/post/post.module.css               |  7 +++++--
 4 files changed, 45 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/utils/post-utils.ts

diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx
index 96bdff11..be9a752b 100644
--- a/src/components/post-desktop/post-desktop.tsx
+++ b/src/components/post-desktop/post-desktop.tsx
@@ -5,6 +5,7 @@ import { Comment, useAccount, useAccountComments, useAuthorAvatar, useComment, u
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import styles from '../../views/post/post.module.css';
 import { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../lib/utils/media-utils';
+import { hashStringToColor, getTextColorForBackground } from '../../lib/utils/post-utils';
 import { getFormattedDate, getFormattedTimeAgo } from '../../lib/utils/time-utils';
 import { isValidURL } from '../../lib/utils/url-utils';
 import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
@@ -71,6 +72,9 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
   const handleUserAddressClick = useAuthorAddressClick();
   const numberOfPostsByAuthor = document.querySelectorAll(`[data-author-address="${shortAddress}"][data-post-cid="${postCid}"]`).length;
 
+  const userIDBackgroundColor = hashStringToColor(shortAddress || accountShortAddress);
+  const userIDTextColor = getTextColorForBackground(userIDBackgroundColor);
+
   return (
     <div className={styles.postInfo}>
       {!isHidden && <EditMenu isAccountCommentAuthor={isAccountCommentAuthor} isAccountMod={isAccountMod} isCommentAuthorMod={isCommentAuthorMod} post={post} />}
@@ -106,10 +110,15 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
                 <img src={avatarImageUrl} alt='' />
               </span>
             )}
-            (u/
+            (ID: {''}
             <Tooltip
               children={
-                <span title={t('highlight_posts')} className={styles.userAddress} onClick={() => handleUserAddressClick(shortAddress || accountShortAddress, postCid)}>
+                <span
+                  title={t('highlight_posts')}
+                  className={styles.userAddress}
+                  onClick={() => handleUserAddressClick(shortAddress || accountShortAddress, postCid)}
+                  style={{ backgroundColor: userIDBackgroundColor, color: userIDTextColor }}
+                >
                   {shortAddress || accountShortAddress}
                 </span>
               }
diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx
index 81f07724..0854ac03 100644
--- a/src/components/post-mobile/post-mobile.tsx
+++ b/src/components/post-mobile/post-mobile.tsx
@@ -5,6 +5,7 @@ import { Comment, useAccount, useAuthorAvatar, useComment, useEditedComment } fr
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import styles from '../../views/post/post.module.css';
 import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
+import { getTextColorForBackground, hashStringToColor } from '../../lib/utils/post-utils';
 import { getFormattedDate, getFormattedTimeAgo } from '../../lib/utils/time-utils';
 import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
 import useAuthorAddressClick from '../../hooks/use-author-address-click';
@@ -52,6 +53,9 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
   const handleUserAddressClick = useAuthorAddressClick();
   const numberOfPostsByAuthor = document.querySelectorAll(`[data-author-address="${shortAddress}"][data-post-cid="${postCid}"]`).length;
 
+  const userIDBackgroundColor = hashStringToColor(shortAddress || accountShortAddress);
+  const userIDTextColor = getTextColorForBackground(userIDBackgroundColor);
+
   return (
     <>
       <div className={styles.postInfo}>
@@ -79,10 +83,15 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
                   <img src={avatarImageUrl} alt='' />
                 </span>
               )}
-              (u/
+              (ID: {''}
               <Tooltip
                 children={
-                  <span title={t('highlight_posts')} className={styles.userAddress} onClick={() => handleUserAddressClick(shortAddress || accountShortAddress, postCid)}>
+                  <span
+                    title={t('highlight_posts')}
+                    className={styles.userAddress}
+                    onClick={() => handleUserAddressClick(shortAddress || accountShortAddress, postCid)}
+                    style={{ backgroundColor: userIDBackgroundColor, color: userIDTextColor }}
+                  >
                     {shortAddress || accountShortAddress}
                   </span>
                 }
diff --git a/src/lib/utils/post-utils.ts b/src/lib/utils/post-utils.ts
new file mode 100644
index 00000000..63a4188d
--- /dev/null
+++ b/src/lib/utils/post-utils.ts
@@ -0,0 +1,18 @@
+export function hashStringToColor(str: string): string {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+
+  const r = (hash >> 24) & 0xff;
+  const g = (hash >> 16) & 0xff;
+  const b = (hash >> 8) & 0xff;
+
+  return `rgb(${r}, ${g}, ${b})`;
+}
+
+export function getTextColorForBackground(rgb: string): string {
+  const [r, g, b] = rgb.match(/\d+/g)?.map(Number) || [0, 0, 0];
+  const brightness = r * 0.299 + g * 0.587 + b * 0.114;
+  return brightness > 125 ? 'black' : 'white';
+}
diff --git a/src/views/post/post.module.css b/src/views/post/post.module.css
index 14e78581..60bc1f02 100644
--- a/src/views/post/post.module.css
+++ b/src/views/post/post.module.css
@@ -73,11 +73,14 @@
 }
 
 .userAddress {
+  padding: 0 5px;
+  border-radius: 6px;
+  font-size: 0.8em;
   cursor: pointer;
 }
 
-.postDesktop .userAddress:hover {
-  color: var(--button-desktop-text-color-hover);
+.userAddress:hover {
+  color: var(--post-quotelink-text-color-hover) !important;
 }
 
 .postDesktop .subject {