add option where to show pubkey color

src/components/user/user-avatar.tsx

@@ -11,6 +11,8 @@ import useCurrentAccount from "../../hooks/use-current-account";
 import { buildImageProxyURL } from "../../helpers/image";
 import UserDnsIdentityIcon from "./user-dns-identity-icon";
 import styled from "@emotion/styled";
+import useSubject from "../../hooks/use-subject";
+import localSettings from "../../services/local-settings";
 
 export const UserIdenticon = memo(({ pubkey }: { pubkey: string }) => {
   const { value: identicon } = useAsync(() => getIdenticon(pubkey), [pubkey]);
@@ -33,19 +35,9 @@ export type UserAvatarProps = Omit<MetadataAvatarProps, "pubkey" | "metadata"> &
 export const UserAvatar = forwardRef<HTMLDivElement, UserAvatarProps>(
   ({ pubkey, noProxy, relay, size, ...props }, ref) => {
     const metadata = useUserMetadata(pubkey, relay ? [relay] : undefined);
-    const color = "#" + pubkey.slice(0, 6); //useDnsIdentityColor(pubkey);
 
     return (
-      <MetadataAvatar
-        pubkey={pubkey}
-        metadata={metadata}
-        noProxy={noProxy}
-        ref={ref}
-        borderColor={size !== "xs" ? color : undefined}
-        borderStyle="none"
-        size={size}
-        {...props}
-      >
+      <MetadataAvatar pubkey={pubkey} metadata={metadata} noProxy={noProxy} ref={ref} size={size} {...props}>
         {size !== "xs" && (
           <UserDnsIdentityIcon
             pubkey={pubkey}
@@ -66,11 +58,16 @@ UserAvatar.displayName = "UserAvatar";
 const SquareAvatar = styled(Avatar)`
   img {
     border-radius: var(--chakra-radii-lg);
+  }
+`;
+const SquareAvatarWithBorder = styled(SquareAvatar)`
+  img {
     border-width: 0.18rem;
     border-color: inherit;
     border-style: solid;
   }
 `;
+
 export type MetadataAvatarProps = Omit<AvatarProps, "src"> & {
   metadata?: Kind0ParsedContent;
   pubkey?: string;
@@ -96,15 +93,22 @@ export const MetadataAvatar = forwardRef<HTMLDivElement, MetadataAvatarProps>(
       }
     }, [metadata?.picture, imageProxy, proxyUserMedia, hideUsernames, account]);
 
-    const AvatarComponent = square ? SquareAvatar : Avatar;
+    const showPubkeyColor = useSubject(localSettings.showPubkeyColor);
+    const color = pubkey ? "#" + pubkey.slice(0, 6) : undefined;
+
+    const showColor = showPubkeyColor === "avatar" && color !== undefined && props.size !== "xs";
+
+    const AvatarComponent = square ? (showColor ? SquareAvatarWithBorder : SquareAvatar) : Avatar;
 
     return (
       <AvatarComponent
+        ref={ref}
         src={picture}
         icon={pubkey ? <UserIdenticon pubkey={pubkey} /> : undefined}
         // overflow="hidden"
         title={getDisplayName(metadata, pubkey ?? "")}
-        ref={ref}
+        borderColor={showColor ? color : undefined}
+        borderStyle="none"
         {...props}
       >
         {children}

src/components/user/user-link.tsx

@@ -6,6 +6,8 @@ import { getDisplayName } from "../../helpers/nostr/user-metadata";
 import useUserMetadata from "../../hooks/use-user-metadata";
 import useAppSettings from "../../hooks/use-app-settings";
 import useCurrentAccount from "../../hooks/use-current-account";
+import useSubject from "../../hooks/use-subject";
+import localSettings from "../../services/local-settings";
 
 export type UserLinkProps = LinkProps & {
   pubkey: string;
@@ -18,8 +20,17 @@ export default function UserLink({ pubkey, showAt, tab, ...props }: UserLinkProp
   const account = useCurrentAccount();
   const { hideUsernames, removeEmojisInUsernames } = useAppSettings();
 
+  const showPubkeyColor = useSubject(localSettings.showPubkeyColor);
+  const color = "#" + pubkey.slice(0, 6);
+
   return (
-    <Link as={RouterLink} to={`/u/${nip19.npubEncode(pubkey)}` + (tab ? "/" + tab : "")} whiteSpace="nowrap" {...props}>
+    <Link
+      as={RouterLink}
+      to={`/u/${nip19.npubEncode(pubkey)}` + (tab ? "/" + tab : "")}
+      whiteSpace="nowrap"
+      textDecoration={showPubkeyColor === "underline" ? `underline ${color} solid 2px` : undefined}
+      {...props}
+    >
       {showAt && "@"}
       {hideUsernames && pubkey !== account?.pubkey ? "Anon" : getDisplayName(metadata, pubkey, removeEmojisInUsernames)}
     </Link>

src/services/local-settings.ts

@@ -9,6 +9,9 @@ import {
 } from "../classes/local-settings/types";
 import { LocalStorageEntry } from "../classes/local-settings/entry";
 
+// display
+const showPubkeyColor = new LocalStorageEntry("show-pubkey-color", "avatar"); // avatar, underline, none
+
 // local relay
 const idbMaxEvents = new NumberLocalStorageEntry("nostr-idb-max-events", 10_000);
 const wasmPersistForDays = new NullableNumberLocalStorageEntry("wasm-relay-oldest-event", 365);
@@ -51,6 +54,7 @@ const addClientTag = new BooleanLocalStorageEntry("add-client-tag", ENABLE_CLIEN
 const verifyEventMethod = new LocalStorageEntry("verify-event-method", "wasm"); // wasm, internal, none
 
 const localSettings = {
+  showPubkeyColor,
   idbMaxEvents,
   wasmPersistForDays,
   enableNoteThreadDrawer,

src/views/settings/display/index.tsx

@@ -23,6 +23,7 @@ export default function DisplaySettings() {
 
   const hideZapBubbles = useSubject(localSettings.hideZapBubbles);
   const enableNoteDrawer = useSubject(localSettings.enableNoteThreadDrawer);
+  const showPubkeyColor = useSubject(localSettings.showPubkeyColor);
 
   return (
     <VerticalPageLayout flex={1}>
@@ -69,6 +70,24 @@ export default function DisplaySettings() {
             <span>Setting this will restrict the width of app on desktop</span>
           </FormHelperText>
         </FormControl>
+        <FormControl>
+          <FormLabel htmlFor="maxPageWidth" mb="0">
+            Show user pubkey key color
+          </FormLabel>
+          <Select
+            id="maxPageWidth"
+            maxW="sm"
+            value={showPubkeyColor}
+            onChange={(e) => localSettings.showPubkeyColor.next(e.target.value)}
+          >
+            <option value="none">None</option>
+            <option value="avatar">Avatar</option>
+            <option value="underline">Underline</option>
+          </Select>
+          <FormHelperText>
+            <span>How the public key color should be shown on users</span>
+          </FormHelperText>
+        </FormControl>
         <FormControl>
           <Flex alignItems="center">
             <FormLabel htmlFor="blurImages" mb="0">