{tabs.map(t => (
))}
diff --git a/packages/app/src/Element/Text.css b/packages/app/src/Element/Text.css
index 8dbbbffe..238a2682 100644
--- a/packages/app/src/Element/Text.css
+++ b/packages/app/src/Element/Text.css
@@ -114,6 +114,9 @@
display: block;
}
-.gallery:not(:first-child), img:not(:first-child), video:not(:first-child), .link-preview-container:not(:first-child) {
+.gallery:not(:first-child),
+img:not(:first-child),
+video:not(:first-child),
+.link-preview-container:not(:first-child) {
margin-top: 10px;
-}
\ No newline at end of file
+}
diff --git a/packages/app/src/Element/Text.tsx b/packages/app/src/Element/Text.tsx
index 31fea6dc..fb31ad9b 100644
--- a/packages/app/src/Element/Text.tsx
+++ b/packages/app/src/Element/Text.tsx
@@ -11,6 +11,7 @@ import { ProxyImg } from "./ProxyImg";
import { SpotlightMediaModal } from "./Deck/SpotlightMedia";
import HighlightedText from "./HighlightedText";
import { useTextTransformer } from "Hooks/useTextTransformCache";
+import CodeBlock from "./CodeBlock";
export interface TextProps {
id: string;
@@ -247,13 +248,20 @@ export default function Text({
chunks.push(
);
}
if (element.type === "link" || (element.type === "media" && element.mimeType?.startsWith("unknown"))) {
- chunks.push(
-
,
- );
+ if (disableMedia ?? false) {
+ chunks.push(
);
+ } else {
+ chunks.push(
+
,
+ );
+ }
}
if (element.type === "custom_emoji") {
chunks.push(
);
}
+ if (element.type === "code_block") {
+ chunks.push(
);
+ }
if (element.type === "text") {
chunks.push(
diff --git a/packages/app/src/Element/User/FollowButton.css b/packages/app/src/Element/User/FollowButton.css
deleted file mode 100644
index 66f05526..00000000
--- a/packages/app/src/Element/User/FollowButton.css
+++ /dev/null
@@ -1,2 +0,0 @@
-.follow-button {
-}
diff --git a/packages/app/src/Element/User/FollowButton.tsx b/packages/app/src/Element/User/FollowButton.tsx
index 5952b7fd..89c7059a 100644
--- a/packages/app/src/Element/User/FollowButton.tsx
+++ b/packages/app/src/Element/User/FollowButton.tsx
@@ -1,4 +1,3 @@
-import "./FollowButton.css";
import FormattedMessage from "Element/FormattedMessage";
import { HexKey } from "@snort/system";
@@ -20,7 +19,7 @@ export default function FollowButton(props: FollowButtonProps) {
const publisher = useEventPublisher();
const { follows, relays, readonly } = useLogin(s => ({ follows: s.follows, relays: s.relays, readonly: s.readonly }));
const isFollowing = follows.item.includes(pubkey);
- const baseClassname = `${props.className ? ` ${props.className}` : ""}follow-button`;
+ const baseClassname = props.className ? `${props.className} ` : "";
async function follow(pubkey: HexKey) {
if (publisher) {
@@ -42,9 +41,12 @@ export default function FollowButton(props: FollowButtonProps) {
return (
(isFollowing ? unfollow(pubkey) : follow(pubkey))}>
+ onClick={e => {
+ e.stopPropagation();
+ isFollowing ? unfollow(pubkey) : follow(pubkey);
+ }}>
{isFollowing ? : }
);
diff --git a/packages/app/src/Element/User/ProfileImage.css b/packages/app/src/Element/User/ProfileImage.css
index 29d1c906..a6f28988 100644
--- a/packages/app/src/Element/User/ProfileImage.css
+++ b/packages/app/src/Element/User/ProfileImage.css
@@ -43,3 +43,15 @@ a.pfp {
background-color: var(--gray-superdark);
transform: rotate(135deg);
}
+
+.profile-card {
+ width: 360px;
+ border-radius: 16px;
+ background: var(--gray-superdark);
+ box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
+}
+
+.profile-card > div {
+ color: white;
+ padding: 8px 12px;
+}
diff --git a/packages/app/src/Element/User/ProfileImage.tsx b/packages/app/src/Element/User/ProfileImage.tsx
index 7fc6d6b1..1a7b97aa 100644
--- a/packages/app/src/Element/User/ProfileImage.tsx
+++ b/packages/app/src/Element/User/ProfileImage.tsx
@@ -1,9 +1,11 @@
import "./ProfileImage.css";
-import React, { ReactNode } from "react";
+import React, { ReactNode, useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { HexKey, UserMetadata } from "@snort/system";
import { useUserProfile } from "@snort/system-react";
+import { useHover } from "@uidotdev/usehooks";
+import { ControlledMenu } from "@szhsin/react-menu";
import { profileLink } from "SnortUtils";
import Avatar from "Element/User/Avatar";
@@ -11,6 +13,9 @@ import Nip05 from "Element/User/Nip05";
import useLogin from "Hooks/useLogin";
import Icon from "Icons/Icon";
import DisplayName from "./DisplayName";
+import Text from "Element/Text";
+import FollowButton from "Element/User/FollowButton";
+import { UserWebsiteLink } from "Element/User/UserWebsiteLink";
export interface ProfileImageProps {
pubkey: HexKey;
@@ -27,6 +32,7 @@ export interface ProfileImageProps {
imageOverlay?: ReactNode;
showFollowingMark?: boolean;
icons?: ReactNode;
+ showProfileCard?: boolean;
}
export default function ProfileImage({
@@ -44,11 +50,29 @@ export default function ProfileImage({
onClick,
showFollowingMark = true,
icons,
+ showProfileCard,
}: ProfileImageProps) {
const user = useUserProfile(profile ? "" : pubkey) ?? profile;
const nip05 = defaultNip ? defaultNip : user?.nip05;
const { follows } = useLogin();
const doesFollow = follows.item.includes(pubkey);
+ const [ref, hovering] = useHover
();
+ const [showProfileMenu, setShowProfileMenu] = useState(false);
+ const [t, setT] = useState>();
+
+ useEffect(() => {
+ if (hovering) {
+ const tn = setTimeout(() => {
+ setShowProfileMenu(true);
+ }, 1000);
+ setT(tn);
+ } else {
+ if (t) {
+ clearTimeout(t);
+ setT(undefined);
+ }
+ }
+ }, [hovering]);
function handleClick(e: React.MouseEvent) {
if (link === "") {
@@ -60,7 +84,7 @@ export default function ProfileImage({
function inner() {
return (
<>
-
+
setShowProfileMenu(false)}>
+
+
+ );
+ }
+ return null;
+ }
+
if (link === "") {
return (
-
- {inner()}
-
+ <>
+
+ {inner()}
+
+ {profileCard()}
+
);
} else {
return (
-
- {inner()}
-
+ <>
+
+ {inner()}
+
+ {profileCard()}
+
);
}
}
diff --git a/packages/app/src/Element/User/ProfilePreview.css b/packages/app/src/Element/User/ProfilePreview.css
index 00211cc0..67f7cc3e 100644
--- a/packages/app/src/Element/User/ProfilePreview.css
+++ b/packages/app/src/Element/User/ProfilePreview.css
@@ -15,7 +15,3 @@
overflow: hidden;
text-overflow: ellipsis;
}
-
-.profile-preview button {
- min-width: 98px;
-}
diff --git a/packages/app/src/Element/User/ProfilePreview.tsx b/packages/app/src/Element/User/ProfilePreview.tsx
index 1fd65517..19ba98b1 100644
--- a/packages/app/src/Element/User/ProfilePreview.tsx
+++ b/packages/app/src/Element/User/ProfilePreview.tsx
@@ -12,6 +12,7 @@ export interface ProfilePreviewProps {
options?: {
about?: boolean;
linkToProfile?: boolean;
+ profileCards?: boolean;
};
profile?: UserMetadata;
actions?: ReactNode;
@@ -45,6 +46,7 @@ export default function ProfilePreview(props: ProfilePreviewProps) {
profile={props.profile}
link={options.linkToProfile ?? true ? undefined : ""}
subHeader={options.about ? {user?.about}
: undefined}
+ showProfileCard={options.profileCards}
/>
{props.actions ?? (
diff --git a/packages/app/src/Element/User/UserWebsiteLink.css b/packages/app/src/Element/User/UserWebsiteLink.css
new file mode 100644
index 00000000..0f81ef93
--- /dev/null
+++ b/packages/app/src/Element/User/UserWebsiteLink.css
@@ -0,0 +1,13 @@
+.user-profile-link {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.user-profile-link a {
+ text-decoration: none;
+}
+
+.user-profile-link a:hover {
+ text-decoration: underline;
+}
diff --git a/packages/app/src/Element/User/UserWebsiteLink.tsx b/packages/app/src/Element/User/UserWebsiteLink.tsx
new file mode 100644
index 00000000..e5dbbd7a
--- /dev/null
+++ b/packages/app/src/Element/User/UserWebsiteLink.tsx
@@ -0,0 +1,29 @@
+import "./UserWebsiteLink.css";
+import { MetadataCache, UserMetadata } from "@snort/system";
+import Icon from "Icons/Icon";
+
+export function UserWebsiteLink({ user }: { user?: MetadataCache | UserMetadata }) {
+ const website_url =
+ user?.website && !user.website.startsWith("http") ? "https://" + user.website : user?.website || "";
+
+ function tryFormatWebsite(url: string) {
+ try {
+ const u = new URL(url);
+ return `${u.hostname}${u.pathname !== "/" ? u.pathname : ""}`;
+ } catch {
+ // ignore
+ }
+ return url;
+ }
+
+ if (user?.website) {
+ return (
+
+ );
+ }
+}
diff --git a/packages/app/src/Hooks/useTextTransformCache.tsx b/packages/app/src/Hooks/useTextTransformCache.tsx
index 07442043..4c562658 100644
--- a/packages/app/src/Hooks/useTextTransformCache.tsx
+++ b/packages/app/src/Hooks/useTextTransformCache.tsx
@@ -3,11 +3,14 @@ import { ParsedFragment, transformText } from "@snort/system";
const TextCache = new Map
>();
export function transformTextCached(id: string, content: string, tags: Array>) {
- const cached = TextCache.get(id);
- if (cached) return cached;
- const newCache = transformText(content, tags);
- TextCache.set(id, newCache);
- return newCache;
+ if (content.length > 0) {
+ const cached = TextCache.get(id);
+ if (cached) return cached;
+ const newCache = transformText(content, tags);
+ TextCache.set(id, newCache);
+ return newCache;
+ }
+ return [];
}
export function useTextTransformer(id: string, content: string, tags: Array>) {
diff --git a/packages/app/src/Pages/Notifications.css b/packages/app/src/Pages/Notifications.css
index e4ab399a..b5bb6904 100644
--- a/packages/app/src/Pages/Notifications.css
+++ b/packages/app/src/Pages/Notifications.css
@@ -52,3 +52,29 @@
max-width: 100%;
max-height: 300px; /* Cap images in notifications to 300px height */
}
+
+.summary-icon {
+ padding: 4px;
+ border-radius: 8px;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ color: var(--gray-light) !important;
+}
+
+.summary-icon:not(.active):hover {
+ background-color: var(--gray-dark);
+}
+
+.summary-icon.active {
+ background: rgba(255, 255, 255, 0.1);
+}
+
+.summary-tooltip {
+ display: flex;
+ gap: 12px;
+ padding: 12px 16px;
+ border-radius: 16px;
+ background: var(--gray-superdark);
+ box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
+}
diff --git a/packages/app/src/Pages/Notifications.tsx b/packages/app/src/Pages/Notifications.tsx
index a3784007..fbbc835e 100644
--- a/packages/app/src/Pages/Notifications.tsx
+++ b/packages/app/src/Pages/Notifications.tsx
@@ -1,16 +1,17 @@
import "./Notifications.css";
-import { useEffect, useMemo, useSyncExternalStore } from "react";
+import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
import { EventExt, EventKind, NostrEvent, NostrLink, NostrPrefix, TaggedNostrEvent, parseZap } from "@snort/system";
-import { unwrap } from "@snort/shared";
+import { unixNow, unwrap } from "@snort/shared";
import { useUserProfile } from "@snort/system-react";
import { useInView } from "react-intersection-observer";
import { FormattedMessage, useIntl } from "react-intl";
import { useNavigate } from "react-router-dom";
+import { Bar, BarChart, Tooltip, XAxis, YAxis } from "recharts";
import useLogin from "Hooks/useLogin";
import { markNotificationsRead } from "Login";
import { Notifications, UserCache } from "Cache";
-import { dedupe, findTag, orderDescending } from "SnortUtils";
+import { dedupe, findTag, orderAscending, orderDescending } from "SnortUtils";
import Icon from "Icons/Icon";
import ProfileImage from "Element/User/ProfileImage";
import useModeration from "Hooks/useModeration";
@@ -20,6 +21,8 @@ import { formatShort } from "Number";
import { LiveEvent } from "Element/LiveEvent";
import ProfilePreview from "Element/User/ProfilePreview";
import { getDisplayName } from "Element/User/DisplayName";
+import { Day } from "Const";
+import Tabs, { Tab } from "Element/Tabs";
function notificationContext(ev: TaggedNostrEvent) {
switch (ev.kind) {
@@ -93,12 +96,175 @@ export default function NotificationsPage({ onClick }: { onClick?: (link: NostrL
return (
+
+
{login.publicKey &&
[...timeGrouped.entries()].map(([k, g]) => )}
);
}
+interface StatSlot {
+ time: string;
+ reactions: number;
+ reposts: number;
+ quotes: number;
+ mentions: number;
+ zaps: number;
+}
+
+const enum NotificationSummaryPeriod {
+ Daily,
+ Weekly,
+}
+
+const enum NotificationSummaryFilter {
+ Reactions = 1,
+ Reposts = 2,
+ Mentions = 4,
+ Zaps = 8,
+ All = 255,
+}
+
+function NotificationSummary({ evs }: { evs: Array }) {
+ const ref = useRef(null);
+ const [period, setPeriod] = useState(NotificationSummaryPeriod.Daily);
+ const [filter, setFilter] = useState(NotificationSummaryFilter.All);
+
+ const periodTabs = [
+ {
+ value: NotificationSummaryPeriod.Daily,
+ text: ,
+ },
+ {
+ value: NotificationSummaryPeriod.Weekly,
+ text: ,
+ },
+ ] as Array;
+
+ const hasFlag = (v: number, f: NotificationSummaryFilter) => {
+ return (v & f) > 0;
+ };
+
+ const getWeek = (d: Date) => {
+ const onejan = new Date(d.getFullYear(), 0, 1);
+ const today = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+ const dayOfYear = (today.getTime() - onejan.getTime() + 86400000) / 86400000;
+ return Math.ceil(dayOfYear / 7);
+ };
+
+ const stats = useMemo(() => {
+ return orderAscending(evs)
+ .filter(a => (period === NotificationSummaryPeriod.Daily ? a.created_at > unixNow() - 14 * Day : true))
+ .reduce(
+ (acc, v) => {
+ const date = new Date(v.created_at * 1000);
+ const key =
+ period === NotificationSummaryPeriod.Daily
+ ? `${date.getMonth() + 1}/${date.getDate()}`
+ : getWeek(date).toString();
+ acc[key] ??= {
+ time: key,
+ reactions: 0,
+ reposts: 0,
+ quotes: 0,
+ mentions: 0,
+ zaps: 0,
+ };
+
+ if (v.kind === EventKind.Reaction) {
+ acc[key].reactions++;
+ } else if (v.kind === EventKind.Repost) {
+ acc[key].reposts++;
+ } else if (v.kind === EventKind.ZapReceipt) {
+ acc[key].zaps++;
+ }
+ if (v.kind === EventKind.TextNote) {
+ acc[key].mentions++;
+ }
+
+ return acc;
+ },
+ {} as Record,
+ );
+ }, [evs, period]);
+
+ const filterIcon = (f: NotificationSummaryFilter, icon: string, iconActiveClass?: string) => {
+ const active = hasFlag(filter, f);
+ return (
+ setFilter(v => v ^ f)}>
+
+
+ );
+ };
+
+ return (
+
+
+
+
+
+
+ {filterIcon(NotificationSummaryFilter.Reactions, "heart-solid", "text-heart")}
+ {filterIcon(NotificationSummaryFilter.Zaps, "zap-solid", "text-zap")}
+ {filterIcon(NotificationSummaryFilter.Reposts, "reverse-left", "text-repost")}
+ {filterIcon(NotificationSummaryFilter.Mentions, "at-sign", "text-mention")}
+
+
+
a.value === period))} setTab={t => setPeriod(t.value)} />
+
+
+
+
+ {hasFlag(filter, NotificationSummaryFilter.Reactions) && (
+
+ )}
+ {hasFlag(filter, NotificationSummaryFilter.Reposts) && (
+
+ )}
+ {hasFlag(filter, NotificationSummaryFilter.Mentions) && (
+
+ )}
+ {hasFlag(filter, NotificationSummaryFilter.Zaps) && }
+ {
+ if (active && payload && payload.length) {
+ return (
+
+
+
+ {formatShort(payload.find(a => a.name === "reactions")?.value as number)}
+
+
+
+ {formatShort(payload.find(a => a.name === "zaps")?.value as number)}
+
+
+
+ {formatShort(payload.find(a => a.name === "reposts")?.value as number)}
+
+
+
+ {formatShort(payload.find(a => a.name === "mentions")?.value as number)}
+
+
+
setShowLnQr(true)}>
@@ -305,7 +286,7 @@ export default function ProfilePage({ id: propId }: ProfilePageProps) {
setModalImage(user?.picture || "")} className="pointer" />
{renderIcons()}
- {!isMe && id && }
+ {!isMe && id && }