Notification summary

packages/app/src/Cache/index.ts

@@ -1,4 +1,6 @@
 import { UserProfileCache, UserRelaysCache, RelayMetricCache } from "@snort/system";
+import { SnortSystemDb } from "@snort/system-web";
+
 import { EventInteractionCache } from "./EventInteractionCache";
 import { ChatCache } from "./ChatCache";
 import { Payments } from "./PaymentsCache";
@@ -6,9 +8,11 @@ import { GiftWrapCache } from "./GiftWrapCache";
 import { NotificationsCache } from "./Notifications";
 import { FollowsFeedCache } from "./FollowsFeed";
 
-export const UserCache = new UserProfileCache();
-export const UserRelays = new UserRelaysCache();
-export const RelayMetrics = new RelayMetricCache();
+export const SystemDb = new SnortSystemDb();
+export const UserCache = new UserProfileCache(SystemDb.users);
+export const UserRelays = new UserRelaysCache(SystemDb.userRelays);
+export const RelayMetrics = new RelayMetricCache(SystemDb.relayMetrics);
+
 export const Chats = new ChatCache();
 export const PaymentsCache = new Payments();
 export const InteractionCache = new EventInteractionCache();

packages/app/src/Element/Event/Reactions.css

@@ -1,6 +1,6 @@
 .reactions-modal .modal-body {
   padding: 24px 32px;
-  background-color: #1b1b1b;
+  background-color: var(--gray-superdark);
   border-radius: 16px;
   position: relative;
   min-height: 33vh;

packages/app/src/Element/Tabs.css

@@ -34,7 +34,7 @@
   border-radius: 100px;
   font-weight: 600;
   font-size: 16px;
-  padding: 10px 16px;
+  padding: 6px 12px;
   display: flex;
   align-items: center;
   justify-items: center;

packages/app/src/Element/Tabs.tsx

@@ -31,7 +31,7 @@ export const TabElement = ({ t, tab, setTab }: TabElementProps) => {
 const Tabs = ({ tabs, tab, setTab }: TabsProps) => {
   const horizontalScroll = useHorizontalScroll();
   return (
-    <div className="tabs p" ref={horizontalScroll}>
+    <div className="tabs" ref={horizontalScroll}>
       {tabs.map(t => (
         <TabElement tab={tab} setTab={setTab} t={t} />
       ))}

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);
+}

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 (
     <div className="main-content">
+      <NotificationSummary evs={notifications as TaggedNostrEvent[]} />
+
       {login.publicKey &&
         [...timeGrouped.entries()].map(([k, g]) => <NotificationGroup key={k} evs={g} onClick={onClick} />)}
     </div>
   );
 }
 
+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<TaggedNostrEvent> }) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [period, setPeriod] = useState(NotificationSummaryPeriod.Daily);
+  const [filter, setFilter] = useState(NotificationSummaryFilter.All);
+
+  const periodTabs = [
+    {
+      value: NotificationSummaryPeriod.Daily,
+      text: <FormattedMessage defaultMessage="Daily" />,
+    },
+    {
+      value: NotificationSummaryPeriod.Weekly,
+      text: <FormattedMessage defaultMessage="Weekly" />,
+    },
+  ] as Array<Tab>;
+
+  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<string, StatSlot>,
+      );
+  }, [evs, period]);
+
+  const filterIcon = (f: NotificationSummaryFilter, icon: string, iconActiveClass?: string) => {
+    const active = hasFlag(filter, f);
+    return (
+      <div className={`summary-icon${active ? " active" : ""}`} onClick={() => setFilter(v => v ^ f)}>
+        <Icon name={icon} className={active ? iconActiveClass : undefined} />
+      </div>
+    );
+  };
+
+  return (
+    <div className="flex-column g12 p bb">
+      <div className="flex f-space">
+        <h2>
+          <FormattedMessage defaultMessage="Summary" description="Notifications summary" />
+        </h2>
+        <div className="flex g8">
+          {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")}
+        </div>
+      </div>
+      <Tabs tabs={periodTabs} tab={unwrap(periodTabs.find(a => a.value === period))} setTab={t => setPeriod(t.value)} />
+      <div ref={ref}>
+        <BarChart
+          width={ref.current?.clientWidth}
+          height={200}
+          data={Object.values(stats)}
+          margin={{ left: 0, right: 0 }}
+          style={{ userSelect: "none" }}>
+          <XAxis dataKey="time" />
+          <YAxis />
+          {hasFlag(filter, NotificationSummaryFilter.Reactions) && (
+            <Bar dataKey="reactions" fill="var(--heart)" stackId="" />
+          )}
+          {hasFlag(filter, NotificationSummaryFilter.Reposts) && (
+            <Bar dataKey="reposts" fill="var(--repost)" stackId="" />
+          )}
+          {hasFlag(filter, NotificationSummaryFilter.Mentions) && (
+            <Bar dataKey="mentions" fill="var(--mention)" stackId="" />
+          )}
+          {hasFlag(filter, NotificationSummaryFilter.Zaps) && <Bar dataKey="zaps" fill="var(--zap)" stackId="" />}
+          <Tooltip
+            cursor={{ fill: "rgba(255,255,255,0.2)" }}
+            content={({ active, payload }) => {
+              if (active && payload && payload.length) {
+                return (
+                  <div className="summary-tooltip">
+                    <div className="flex-column g12">
+                      <Icon name="heart-solid" className="text-heart" />
+                      {formatShort(payload.find(a => a.name === "reactions")?.value as number)}
+                    </div>
+                    <div className="flex-column g12">
+                      <Icon name="zap-solid" className="text-zap" />
+                      {formatShort(payload.find(a => a.name === "zaps")?.value as number)}
+                    </div>
+                    <div className="flex-column g12">
+                      <Icon name="reverse-left" className="text-repost" />
+                      {formatShort(payload.find(a => a.name === "reposts")?.value as number)}
+                    </div>
+                    <div className="flex-column g12">
+                      <Icon name="at-sign" className="text-mention" />
+                      {formatShort(payload.find(a => a.name === "mentions")?.value as number)}
+                    </div>
+                  </div>
+                );
+              }
+              return null;
+            }}
+          />
+        </BarChart>
+      </div>
+    </div>
+  );
+}
+
 function NotificationGroup({ evs, onClick }: { evs: Array<TaggedNostrEvent>; onClick?: (link: NostrLink) => void }) {
   const { ref, inView } = useInView({ triggerOnce: true });
   const { formatMessage } = useIntl();

packages/app/src/SnortUtils/index.ts

@@ -328,6 +328,10 @@ export function orderDescending<T>(arr: Array<T & { created_at: number }>) {
   return arr.sort((a, b) => (b.created_at > a.created_at ? 1 : -1));
 }
 
+export function orderAscending<T>(arr: Array<T & { created_at: number }>) {
+  return arr.sort((a, b) => (b.created_at > a.created_at ? -1 : 1));
+}
+
 export interface Magnet {
   dn?: string | string[];
   tr?: string | string[];

packages/app/src/index.css

@@ -15,6 +15,8 @@
   --live: #f83838;
   --heart: #ef4444;
   --zap: #ff710a;
+  --mention: #961ee1;
+  --repost: #1ecbe1;
   --gray-superlight: #eee;
   --bg-secondary: #2a2a2a;
   --gray-light: #999;
@@ -137,6 +139,10 @@ code {
   border: 1px solid var(--border-color);
 }
 
+.bb {
+  border-bottom: 1px solid var(--border-color);
+}
+
 .bg-primary {
   background: var(--primary-gradient);
 }
@@ -149,6 +155,10 @@ code {
   padding: 12px 16px;
 }
 
+.p4 {
+  padding: 4px;
+}
+
 .p24 {
   padding: 24px;
 }
@@ -619,6 +629,38 @@ div.form-col {
   background-color: var(--success);
 }
 
+.bg-zap {
+  background-color: var(--zap);
+}
+
+.bg-heart {
+  background-color: var(--heart);
+}
+
+.bg-mention {
+  background-color: var(--mention);
+}
+
+.bg-repost {
+  background-color: var(--repost);
+}
+
+.text-zap {
+  color: var(--zap);
+}
+
+.text-heart {
+  color: var(--heart);
+}
+
+.text-mention {
+  color: var(--mention);
+}
+
+.text-repost {
+  color: var(--repost);
+}
+
 .tweet {
   display: flex;
   align-items: center;
@@ -664,11 +706,6 @@ div.form-col {
   font-weight: 600;
   font-size: 26px;
   line-height: 36px;
-  margin: 12px 0 0 0;
-}
-
-.main-content .h4 {
-  margin-bottom: 25px;
 }
 
 .main-content .profile-preview {

packages/app/src/index.tsx

@@ -42,7 +42,7 @@ import { SubscribeRoutes } from "Pages/subscribe";
 import ZapPoolPage from "Pages/ZapPool";
 import DebugPage from "Pages/Debug";
 import { db } from "Db";
-import { preload, RelayMetrics, UserCache, UserRelays } from "Cache";
+import { preload, RelayMetrics, SystemDb, UserCache, UserRelays } from "Cache";
 import { LoginStore } from "Login";
 import { SnortDeckLayout } from "Pages/DeckLayout";
 import FreeNostrAddressPage from "./Pages/FreeNostrAddressPage";
@@ -77,6 +77,7 @@ export const System = new NostrSystem({
   profileCache: UserCache,
   relayMetrics: RelayMetrics,
   queryOptimizer: WasmQueryOptimizer,
+  db: SystemDb,
   authHandler: async (c, r) => {
     const { id } = LoginStore.snapshot();
     const pub = LoginStore.getPublisher(id);

packages/app/src/lang.json

@@ -42,6 +42,9 @@
   "/Xf4UW": {
     "defaultMessage": "Send anonymous usage metrics"
   },
+  "/clOBU": {
+    "defaultMessage": "Weekly"
+  },
   "/d6vEc": {
     "defaultMessage": "Make your profile easier to find and share"
   },
@@ -704,6 +707,10 @@
   "PCSt5T": {
     "defaultMessage": "Preferences"
   },
+  "PJeJFc": {
+    "defaultMessage": "Summary",
+    "description": "Notifications summary"
+  },
   "PLSbmL": {
     "defaultMessage": "Your mnemonic phrase"
   },
@@ -1508,5 +1515,8 @@
   },
   "zwb6LR": {
     "defaultMessage": "<b>Mint:</b> {url}"
+  },
+  "zxvhnE": {
+    "defaultMessage": "Daily"
   }
 }

packages/app/src/translations/en.json

@@ -13,6 +13,7 @@
   "/PCavi": "Public",
   "/RD0e2": "Nostr uses digital signature technology to provide tamper proof notes which can safely be replicated to many relays to provide redundant storage of your content.",
   "/Xf4UW": "Send anonymous usage metrics",
+  "/clOBU": "Weekly",
   "/d6vEc": "Make your profile easier to find and share",
   "/n5KSF": "{n} ms",
   "00LcfG": "Load more",
@@ -231,6 +232,7 @@
   "P7FD0F": "System (Default)",
   "P7nJT9": "Total today (UTC): {amount} sats",
   "PCSt5T": "Preferences",
+  "PJeJFc": "Summary",
   "PLSbmL": "Your mnemonic phrase",
   "PaN7t3": "Preview on {site}",
   "PamNxw": "Unknown file header: {name}",
@@ -493,5 +495,6 @@
   "zjJZBd": "You're ready!",
   "zonsdq": "Failed to load LNURL service",
   "zvCDao": "Automatically show latest notes",
-  "zwb6LR": "<b>Mint:</b> {url}"
+  "zwb6LR": "<b>Mint:</b> {url}",
+  "zxvhnE": "Daily"
 }