Kieran
/
snort
5
14
Fork 14
Code Issues 53 Pull Requests 1 Packages Projects Releases 24 Wiki Activity

ProfileCard: FollowedBy, fix tab selector z-index
continuous-integration/drone/push Build is failing Details

This commit is contained in:
Martti Malmi 2023-11-29 14:25:14 +02:00
parent 3acb2d4d34
commit 51e68b1288
4 changed files with 60 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
packages/app/src/Element/User/FollowedBy.tsx Normal file
View File

@ -0,0 +1,54 @@
import FollowDistanceIndicator from "@/Element/User/FollowDistanceIndicator";
import ProfileImage from "@/Element/User/ProfileImage";
import { FormattedMessage } from "react-intl";
import { Fragment } from "react";
import { ProfileLink } from "@/Element/User/ProfileLink";
import DisplayName from "@/Element/User/DisplayName";
import { socialGraphInstance } from "@snort/system";
const MAX_FOLLOWED_BY_FRIENDS = 3;
export default function FollowedBy({ pubkey }: { pubkey: string }) {
const followedByFriends = socialGraphInstance.followedByFriends(pubkey);
const followedByFriendsArray = Array.from(followedByFriends).slice(0, MAX_FOLLOWED_BY_FRIENDS);
return (
<div className="flex flex-row items-center">
<div className="flex flex-row items-center">
<FollowDistanceIndicator className="p-2" pubkey={pubkey} />
{followedByFriendsArray.map((a, index) => {
const zIndex = followedByFriendsArray.length - index;
return (
<div className={`inline-block ${index > 0 ? "-ml-5" : ""}`} key={a} style={{ zIndex }}>
<ProfileImage showFollowDistance={false} pubkey={a} size={24} showUsername={false} />
</div>
);
})}
</div>
{followedByFriends.size > 0 && (
<div className="text-gray-light">
<span className="mr-1">
<FormattedMessage defaultMessage="Followed by" id="6mr8WU" />
</span>
{followedByFriendsArray.map((a, index) => (
<Fragment key={a}>
<ProfileLink pubkey={a} className="link inline">
<DisplayName user={undefined} pubkey={a} />
</ProfileLink>
{index < followedByFriendsArray.length - 1 && ","}{" "}
</Fragment>
))}
{followedByFriends.size > MAX_FOLLOWED_BY_FRIENDS && (
<span>
<FormattedMessage
defaultMessage="and {count} others you follow"
id="CYkOCI"
values={{ count: followedByFriends.size - MAX_FOLLOWED_BY_FRIENDS }}
/>
</span>
)}
</div>
)}
</div>
);
}

2
packages/app/src/Element/User/ProfileCard.tsx
View File

@ -9,6 +9,7 @@ import { UserWebsiteLink } from "./UserWebsiteLink";
import Text from "@/Element/Text";
import { useEffect, useState } from "react";
import useLogin from "../../Hooks/useLogin";
import FollowedBy from "@/Element/User/FollowedBy";
export function ProfileCard({
pubkey,
@ -68,6 +69,7 @@ export function ProfileCard({
truncate={250}
/>
<UserWebsiteLink user={user} />
<FollowedBy pubkey={pubkey} />
</div>
</ControlledMenu>
);

48
packages/app/src/Pages/Profile/ProfilePage.tsx
View File

@ -1,5 +1,5 @@
import "./ProfilePage.css";
import { Fragment, useEffect, useState } from "react";
import { useEffect, useState } from "react";
import { FormattedMessage } from "react-intl";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import {
@ -9,7 +9,6 @@ import {
MetadataCache,
NostrLink,
NostrPrefix,
socialGraphInstance,
TLVEntryType,
tryParseNostrLink,
} from "@snort/system";
@ -60,8 +59,7 @@ import { UserWebsiteLink } from "@/Element/User/UserWebsiteLink";
import { useMuteList, usePinList } from "@/Hooks/useLists";
import messages from "../messages";
import FollowDistanceIndicator from "@/Element/User/FollowDistanceIndicator";
import { ProfileLink } from "@/Element/User/ProfileLink";
import FollowedBy from "@/Element/User/FollowedBy";
interface ProfilePageProps {
id?: string;
@ -154,9 +152,6 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) {
}
function username() {
const followedByFriends = user?.pubkey ? socialGraphInstance.followedByFriends(user.pubkey) : new Set<string>();
const MAX_FOLLOWED_BY_FRIENDS = 3;
const followedByFriendsArray = Array.from(followedByFriends).slice(0, MAX_FOLLOWED_BY_FRIENDS);
return (
<>
<div className="flex flex-col g4">
@ -165,44 +160,7 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) {
<FollowsYou followsMe={follows.includes(loginPubKey ?? "")} />
</h2>
{user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
<div className="flex flex-row items-center">
<div className="flex flex-row items-center">
{user?.pubkey && <FollowDistanceIndicator className="p-2" pubkey={user.pubkey} />}
{followedByFriendsArray.map((a, index) => {
const zIndex = followedByFriendsArray.length - index;
return (
<div className={`inline-block ${index > 0 ? "-ml-5" : ""}`} key={a} style={{ zIndex }}>
<ProfileImage showFollowDistance={false} pubkey={a} size={24} showUsername={false} />
</div>
);
})}
</div>
{followedByFriends.size > 0 && (
<div className="text-gray-light">
<span className="mr-1">
<FormattedMessage defaultMessage="Followed by" id="6mr8WU" />
</span>
{followedByFriendsArray.map((a, index) => (
<Fragment key={a}>
<ProfileLink pubkey={a} className="link inline">
<DisplayName user={undefined} pubkey={a} />
</ProfileLink>
{index < followedByFriendsArray.length - 1 && ","}{" "}
</Fragment>
))}
{followedByFriends.size > MAX_FOLLOWED_BY_FRIENDS && (
<span>
<FormattedMessage
defaultMessage="and {count} others you follow"
id="CYkOCI"
values={{ count: followedByFriends.size - MAX_FOLLOWED_BY_FRIENDS }}
/>
</span>
)}
</div>
)}
</div>
{user?.pubkey && <FollowedBy pubkey={user.pubkey} />}
</div>
{showBadges && <BadgeList badges={badges} />}
{showStatus && <>{musicStatus()}</>}

2
packages/app/src/Pages/Root.tsx
View File

@ -31,7 +31,7 @@ interface RelayOption {
export default function RootPage() {
return (
<>
<div className="main-content p sticky top-0">
<div className="main-content p">
<RootTabs base="" />
</div>
<div className="main-content">