+ {replyIcon()}
+ {repostIcon()}
+ {reactionIcon()}
+ {powIcon()}
+ {tipButton()}
+ setTip(false)} show={tip} note={ev.id} allocatePool={true} />
+
);
}
diff --git a/packages/app/src/Components/Event/Thread.css b/packages/app/src/Components/Event/Thread.css
index a11f6a24..8002a39f 100644
--- a/packages/app/src/Components/Event/Thread.css
+++ b/packages/app/src/Components/Event/Thread.css
@@ -12,10 +12,6 @@
line-height: 27px;
}
-.thread-root.note > .footer {
- padding-left: 0;
-}
-
.thread-root.note {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
@@ -26,8 +22,6 @@
border: 0;
}
-.thread-note.note .zaps-summary,
-.thread-note.note .footer,
.thread-note.note .body {
margin-left: 61px;
}
diff --git a/packages/app/src/Components/Event/Zap.css b/packages/app/src/Components/Event/Zap.css
index cf89f1e1..b41db458 100644
--- a/packages/app/src/Components/Event/Zap.css
+++ b/packages/app/src/Components/Event/Zap.css
@@ -44,15 +44,6 @@
color: var(--font-secondary-color);
}
-.zaps-summary {
- display: flex;
- flex-direction: row;
-}
-
-.note.thread-root .zaps-summary {
- margin-left: 14px;
-}
-
.top-zap {
font-size: 14px;
border: none;
diff --git a/packages/app/src/Components/Event/ZapsSummary.tsx b/packages/app/src/Components/Event/ZapsSummary.tsx
index bfb6d91a..962212d1 100644
--- a/packages/app/src/Components/Event/ZapsSummary.tsx
+++ b/packages/app/src/Components/Event/ZapsSummary.tsx
@@ -1,50 +1,31 @@
import { ParsedZap } from "@snort/system";
import { useMemo } from "react";
-import { FormattedMessage, useIntl } from "react-intl";
-import messages from "@/Components/messages";
-import ProfileImage from "@/Components/User/ProfileImage";
+import { AvatarGroup } from "@/Components/User/AvatarGroup";
+import { dedupe } from "@/Utils";
interface ZapsSummaryProps {
zaps: ParsedZap[];
}
export const ZapsSummary = ({ zaps }: ZapsSummaryProps) => {
- const { formatMessage } = useIntl();
- const sortedZaps = useMemo(() => {
+ const sortedZappers = useMemo(() => {
const pub = [...zaps.filter(z => z.sender && z.valid)];
const priv = [...zaps.filter(z => !z.sender && z.valid)];
pub.sort((a, b) => b.amount - a.amount);
- return pub.concat(priv);
+ return dedupe(pub.concat(priv).map(z => z.sender)).slice(0, 3);
}, [zaps]);
if (zaps.length === 0) {
return null;
}
- const [topZap, ...restZaps] = sortedZaps;
- const { sender, amount, anonZap } = topZap;
-
return (
- {amount && (
-
-
- {sender && (
-
- )}
- {restZaps.length > 0 ? (
-
- ) : (
-
- )}{" "}
-
-
+
);
};
diff --git a/packages/app/src/Components/User/AvatarGroup.tsx b/packages/app/src/Components/User/AvatarGroup.tsx
new file mode 100644
index 00000000..ce0f63bb
--- /dev/null
+++ b/packages/app/src/Components/User/AvatarGroup.tsx
@@ -0,0 +1,12 @@
+import { HexKey } from "@snort/system";
+import React from "react";
+
+import ProfileImage from "@/Components/User/ProfileImage";
+
+export function AvatarGroup({ ids }: { ids: HexKey[] }) {
+ return ids.map((a, index) => (
+
0 ? "-ml-5" : ""}`} key={a} style={{ zIndex: ids.length - index }}>
+
+
+ ));
+}
diff --git a/packages/app/src/Components/User/FollowedBy.tsx b/packages/app/src/Components/User/FollowedBy.tsx
index 1f15b833..a33d9053 100644
--- a/packages/app/src/Components/User/FollowedBy.tsx
+++ b/packages/app/src/Components/User/FollowedBy.tsx
@@ -2,9 +2,9 @@ import { HexKey, socialGraphInstance } from "@snort/system";
import React, { Fragment, useMemo } from "react";
import { FormattedMessage } from "react-intl";
+import { AvatarGroup } from "@/Components/User/AvatarGroup";
import DisplayName from "@/Components/User/DisplayName";
import FollowDistanceIndicator from "@/Components/User/FollowDistanceIndicator";
-import ProfileImage from "@/Components/User/ProfileImage";
import { ProfileLink } from "@/Components/User/ProfileLink";
const MAX_FOLLOWED_BY_FRIENDS = 3;
@@ -19,17 +19,6 @@ export default function FollowedBy({ pubkey }: { pubkey: HexKey }) {
};
}, [pubkey, followDistance]);
- const renderFollowedByFriends = () => {
- return followedByFriendsArray.map((a, index) => (
-
0 ? "-ml-5" : ""}`}
- key={a}
- style={{ zIndex: followedByFriendsArray.length - index }}>
-
-
- ));
- };
-
const renderFollowedByFriendsLinks = () => {
return followedByFriendsArray.map((a, index) => (
@@ -45,7 +34,7 @@ export default function FollowedBy({ pubkey }: { pubkey: HexKey }) {
- {renderFollowedByFriends()}
+
{totalFollowedByFriends > 0 && (
diff --git a/packages/app/src/index.css b/packages/app/src/index.css
index cf6a17b7..5717e5d5 100644
--- a/packages/app/src/index.css
+++ b/packages/app/src/index.css
@@ -218,11 +218,6 @@ a.ext {
margin-bottom: -8px;
}
-.card > .footer {
- display: flex;
- flex-direction: row;
-}
-
.card .card-title {
font-size: x-large;
font-weight: bold;