Following mark

packages/app/src/Element/Avatar.css

@@ -29,3 +29,24 @@
   border-radius: 50%;
   background-color: rgba(0, 0, 0, 0.4);
 }
+
+.avatar .icons {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform-origin: center;
+  transform: rotate(-135deg) translateY(50%);
+}
+
+.avatar .icons > .icon-circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform-origin: center;
+  padding: 4px;
+  border-radius: 100%;
+  background-color: var(--gray-superdark);
+  transform: rotate(135deg);
+}

packages/app/src/Element/Avatar.tsx

@@ -14,8 +14,10 @@ interface AvatarProps {
   size?: number;
   image?: string;
   imageOverlay?: ReactNode;
+  icons?: ReactNode;
 }
-const Avatar = ({ pubkey, user, size, onClick, image, imageOverlay }: AvatarProps) => {
+
+const Avatar = ({ pubkey, user, size, onClick, image, imageOverlay, icons }: AvatarProps) => {
   const [url, setUrl] = useState("");
   const { proxy } = useImgProxy();
 
@@ -39,6 +41,7 @@ const Avatar = ({ pubkey, user, size, onClick, image, imageOverlay }: AvatarProp
       className={`avatar${imageOverlay ? " with-overlay" : ""}`}
       data-domain={domain?.toLowerCase()}
       title={getDisplayName(user, "")}>
+      {icons && <div className="icons">{icons}</div>}
       {imageOverlay && <div className="overlay">{imageOverlay}</div>}
     </div>
   );

packages/app/src/Element/Following.css

@@ -0,0 +1,7 @@
+span.following {
+    padding: 2px 4px;
+    border-radius: 4px;
+    font-size: 11px;
+    color: var(--font-secondary-color);
+    background-color: var(--gray-superdark);
+}

packages/app/src/Element/Following.tsx

@@ -0,0 +1,15 @@
+import "./Following.css";
+import useLogin from "Hooks/useLogin";
+import Icon from "Icons/Icon";
+import { FormattedMessage } from "react-intl";
+
+export function FollowingMark({ pubkey }: { pubkey: string }) {
+    const { follows } = useLogin();
+    const doesFollow = follows.item.includes(pubkey);
+    if (!doesFollow) return;
+
+    return <span className="following flex g4">
+        <Icon name="check" className="success" size={12} />
+        <FormattedMessage defaultMessage="following" />
+    </span>
+}

packages/app/src/Element/ProfileImage.tsx

@@ -8,6 +8,8 @@ import { useUserProfile } from "@snort/system-react";
 import { hexToBech32, profileLink } from "SnortUtils";
 import Avatar from "Element/Avatar";
 import Nip05 from "Element/Nip05";
+import useLogin from "Hooks/useLogin";
+import Icon from "Icons/Icon";
 
 export interface ProfileImageProps {
   pubkey: HexKey;
@@ -22,6 +24,8 @@ export interface ProfileImageProps {
   size?: number;
   onClick?: (e: React.MouseEvent) => void;
   imageOverlay?: ReactNode;
+  showFollowingMark?: boolean;
+  icons?: ReactNode
 }
 
 export default function ProfileImage({
@@ -37,9 +41,13 @@ export default function ProfileImage({
   size,
   imageOverlay,
   onClick,
+  showFollowingMark = true,
+  icons
 }: ProfileImageProps) {
   const user = useUserProfile(profile ? "" : pubkey) ?? profile;
   const nip05 = defaultNip ? defaultNip : user?.nip05;
+  const { follows } = useLogin();
+  const doesFollow = follows.item.includes(pubkey);
 
   const name = useMemo(() => {
     return overrideUsername ?? getDisplayName(user, pubkey);
@@ -56,7 +64,12 @@ export default function ProfileImage({
     return (
       <>
         <div className="avatar-wrapper">
-          <Avatar pubkey={pubkey} user={user} size={size} imageOverlay={imageOverlay} />
+          <Avatar pubkey={pubkey} user={user} size={size} imageOverlay={imageOverlay} icons={((doesFollow && showFollowingMark) || icons) ? <>
+            {icons}
+            {showFollowingMark && <div className="icon-circle">
+              <Icon name="check" className="success" size={10} />
+            </div>}
+          </> : undefined} />
         </div>
         {showUsername && (
           <div className="f-ellipsis">

packages/app/src/Element/ProfilePreview.css

@@ -18,4 +18,4 @@
 
 .profile-preview button {
   min-width: 98px;
-}
+}

packages/app/src/Element/Zap.tsx

@@ -63,6 +63,7 @@ export const ZapsSummary = ({ zaps }: ZapsSummaryProps) => {
             {sender && (
               <ProfileImage
                 pubkey={anonZap ? "" : sender}
+                showFollowingMark={false}
                 overrideUsername={anonZap ? formatMessage({ defaultMessage: "Anonymous" }) : undefined}
               />
             )}