Kieran/snort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add follow distance indicator to profile pages

Browse Source
This commit is contained in:
Martti Malmi
2023-11-26 12:07:41 +02:00
parent a592974b93
commit a612db65c7
3 changed files with 59 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/app/src/Element/User/FollowDistanceIndicator.tsx Normal file
View File

@ -0,0 +1,28 @@
import React from "react";
import { HexKey, socialGraphInstance } from "@snort/system";
import Icon from "@/Icons/Icon";
import classNames from "classnames";
interface FollowDistanceIndicatorProps {
pubkey: HexKey;
className?: string;
}
export default function FollowDistanceIndicator({ pubkey, className }: FollowDistanceIndicatorProps) {
const followDistance = socialGraphInstance.getFollowDistance(pubkey);
let followDistanceColor = "";
if (followDistance <= 1) {
followDistanceColor = "success";
} else if (followDistance === 2 && socialGraphInstance.followedByFriendsCount(pubkey) >= 10) {
followDistanceColor = "text-nostr-orange";
} else if (followDistance > 2) {
return null;
}
return (
<span className={classNames("icon-circle", className)}>
<Icon name="check" className={followDistanceColor} size={10} />
</span>
);
}

16
packages/app/src/Element/User/ProfileImage.tsx
View File

@ -11,6 +11,7 @@ import Icon from "@/Icons/Icon";
import DisplayName from "./DisplayName";
import { ProfileLink } from "./ProfileLink";
import { ProfileCard } from "./ProfileCard";
import FollowDistanceIndicator from "@/Element/User/FollowDistanceIndicator";
export interface ProfileImageProps {
pubkey: HexKey;
@ -49,7 +50,6 @@ export default function ProfileImage({
}: ProfileImageProps) {
const user = useUserProfile(profile ? "" : pubkey) ?? profile;
const nip05 = defaultNip ? defaultNip : user?.nip05;
const followDistance = socialGraphInstance.getFollowDistance(pubkey);
const [isHovering, setIsHovering] = useState(false);
const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
@ -72,12 +72,6 @@ export default function ProfileImage({
}
function inner() {
let followDistanceColor = "";
if (followDistance <= 1) {
followDistanceColor = "success";
} else if (followDistance === 2 && socialGraphInstance.followedByFriendsCount(pubkey) >= 10) {
followDistanceColor = "text-nostr-orange";
}
return (
<>
<div className="avatar-wrapper" onMouseEnter={handleMouseEnter}>
@ -87,14 +81,10 @@ export default function ProfileImage({
size={size}
imageOverlay={imageOverlay}
icons={
(followDistance <= 2 && showFollowDistance) || icons ? (
showFollowDistance || icons ? (
<>
{icons}
{showFollowDistance && (
<div className="icon-circle">
<Icon name="check" className={followDistanceColor} size={10} />
</div>
)}
{showFollowDistance && <FollowDistanceIndicator pubkey={pubkey} />}
</>
) : undefined
}