feat: zaps in timeline

src/Element/Zap.css

@@ -1,12 +1,5 @@
 .zap {
-  background-color: var(--note-bg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  padding: 10px;
-  border-radius: 16px;
-  margin-bottom: 12px;
+  min-height: unset;
 }
 
 .zap .summary {
@@ -15,10 +8,6 @@
   justify-content: space-between;
 }
 
-.zap .body a {
-  color: var(--highlight);
-}
-
 .zap .amount {
   font-size: 18px;
 }
@@ -72,3 +61,11 @@
 .rest-zaps:before {
   content: ", ";
 }
+
+.note.zap > .header {
+  align-items: center;
+}
+
+.note.zap > .body {
+  margin-bottom: 0;
+}

src/Element/Zap.tsx

@@ -79,12 +79,13 @@ export function parseZap(zap: TaggedRawEvent): ParsedZap {
 }
 
 const Zap = ({ zap }: { zap: ParsedZap }) => {
-  const { amount, content, zapper, valid } = zap
+  const { amount, content, zapper, valid, p } = zap
 
   return valid ? (
-    <div className="zap">
-      <div className="summary">
+    <div className="zap note card">
+      <div className="header">
         {zapper && <ProfileImage pubkey={zapper} />}
+        <ProfileImage pubkey={p} />
         <div className="amount">
           <span className="amount-number">{formatShort(amount)}</span> sats
         </div>

src/Feed/TimelineFeed.ts

@@ -35,7 +35,7 @@ export default function useTimelineFeed(subject: TimelineSubject, options: Timel
 
         let sub = new Subscriptions();
         sub.Id = `timeline:${subject.type}:${subject.discriminator}`;
-        sub.Kinds = new Set([EventKind.TextNote, EventKind.Repost]);
+        sub.Kinds = new Set([EventKind.TextNote, EventKind.Repost, EventKind.ZapReceipt]);
         switch (subject.type) {
             case "pubkey": {
                 sub.Authors = new Set(subject.items);