Add upvotes/downvotes

README.md

@@ -59,6 +59,7 @@ Arguments:
    - Useful for notifying the author of a website (http anchor)
  - `disable`: comma-separated string of features to disable, all enabled by default
    - `likes`
+   - `votes`
    - `zaps`
    - `reply` (when disabled the component becomes read-only)
    - `publish` (when disabled does not send event to relays, useful for testing)
@@ -106,6 +107,9 @@ document.querySelector('zap-threads').shadowRoot.appendChild(style);
 
 Any questions or ideas, please open an issue!
 
+## Icons
+- [Font Awesome](https://fontawesome.com/license/free)
+
 ## LICENSE
 
 This is free and unencumbered software released into the public domain.
@@ -131,4 +135,4 @@ OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
 ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 OTHER DEALINGS IN THE SOFTWARE.
 
-For more information, please refer to <http://unlicense.org/>
+For more information, please refer to <http://unlicense.org/>

src/index.tsx

@@ -11,7 +11,7 @@ import { clear as clearCache, find, findAll, save, watchAll } from "./util/db.ts
 import { decode } from "nostr-tools/nip19";
 import { finalizeEvent, getPublicKey } from "nostr-tools/pure";
 import { Filter } from "nostr-tools/filter";
-import { AggregateEvent, NoteEvent, eventToNoteEvent } from "./util/models.ts";
+import { AggregateEvent, NoteEvent, eventToNoteEvent, eventToReactionEvent, voteKind } from "./util/models.ts";
 import { SubCloser } from "nostr-tools";
 
 const ZapThreads = (props: { [key: string]: string; }) => {
@@ -225,6 +225,12 @@ const ZapThreads = (props: { [key: string]: string; }) => {
             }
           } else if (e.kind === 7) {
             newLikeIds.add(e.id);
+            if (e.content.trim()) {
+              const reactionEvent = eventToReactionEvent(e, _anchor.value);
+              if (voteKind(reactionEvent) !== 0) { // remove this condition if you want to track all reactions
+                save('reactions', reactionEvent);
+              }
+            }
           } else if (e.kind === 9735) {
             const invoiceTag = e.tags.find(t => t[0] === "bolt11");
             invoiceTag && invoiceTag[1] && (newZaps[e.id] = invoiceTag[1]);
@@ -369,6 +375,9 @@ const ZapThreads = (props: { [key: string]: string; }) => {
     return nestedEvents().reduce((acc, n) => acc + totalChildren(n), nestedEvents().length);
   };
 
+  const reactions = watchAll(() => ['reactions', anchor().value, { index: 'a' }]);
+  const votes = createMemo(() => reactions().filter(r => voteKind(r) !== 0));
+
   const [showAdvanced, setShowAdvanced] = createSignal(false);
 
   return <>
@@ -388,7 +397,7 @@ const ZapThreads = (props: { [key: string]: string; }) => {
         <h2 id="ztr-title">
           {commentsLength() > 0 && `${commentsLength()} comment${commentsLength() == 1 ? '' : 's'}`}
         </h2>
-        <Thread nestedEvents={nestedEvents} articles={articles} />
+        <Thread nestedEvents={nestedEvents} articles={articles} votes={votes} />
       </>}
 
       <div style="float:right; opacity: 0.2;" onClick={() => setShowAdvanced(!showAdvanced())}>{ellipsisSvg()}</div>

src/reply.tsx

@@ -1,4 +1,4 @@
-import { defaultPicture, generateTags, satsAbbrev, shortenEncodedId, updateProfiles } from "./util/ui.ts";
+import { currentTime, defaultPicture, generateTags, satsAbbrev, shortenEncodedId, updateProfiles } from "./util/ui.ts";
 import { Show, createEffect, createSignal } from "solid-js";
 import { UnsignedEvent, Event } from "nostr-tools/core";
 import { EventSigner, pool, signersStore, store } from "./util/stores.ts";
@@ -100,7 +100,7 @@ export const ReplyEditor = (props: { replyTo?: string; onDone?: Function; }) =>
 
     const unsignedEvent: UnsignedEvent = {
       kind: 1,
-      created_at: Math.round(Date.now() / 1000),
+      created_at: currentTime(),
       content: content,
       pubkey: signer.pk,
       tags: generateTags(content),
@@ -140,7 +140,7 @@ export const ReplyEditor = (props: { replyTo?: string; onDone?: Function; }) =>
         const url = normalizeURL(anchor().value);
         const unsignedRootEvent: UnsignedEvent = {
           pubkey: signer.pk,
-          created_at: Math.round(Date.now() / 1000),
+          created_at: currentTime(),
           kind: 8812,
           tags: [['r', url]],
           content: `Comments on ${url} ↴`
@@ -277,4 +277,4 @@ export const RootComment = () => {
       <ReplyEditor />
     </div>
   </div>;
-};
+};

src/styles/index.css

@@ -187,16 +187,21 @@ ul.ztr-comment-actions,
   align-items: center;
   list-style: none;
   margin: 0;
-  padding: 0 0 0 3.5em;
+  padding: 0 0 0 2.625em;
   font-weight: 600;
   user-select: none;
 }
 
+ul.ztr-comment-actions {
+  margin-top: -1em;
+}
+
 ul.ztr-comment-actions li {
   display: inline-flex;
   align-items: center;
   text-align: center;
-  padding: 0 2em 0 0;
+  padding: 1em;
+  margin: -0.125em;
   cursor: pointer;
 }
 
@@ -211,6 +216,31 @@ svg {
   height: 1.1em;
 }
 
+li.ztr-comment-action-upvote {
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+}
+
+li.ztr-comment-action-downvote {
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+}
+
+li.ztr-comment-action-reply {
+  margin-left: 0.7em;
+  margin-right: 0.7em;
+}
+
+li.ztr-comment-action-zap {
+  margin-left: 0.7em;
+  margin-right: 0.7em;
+}
+
+li.ztr-comment-action-like {
+  margin-left: 0.7em;
+  margin-right: 0.7em;
+}
+
 .ztr-comment-action-reply:hover svg {
   fill: #92379c;
 }
@@ -235,6 +265,43 @@ svg {
   color: #e35428;
 }
 
+.ztr-comment-action-upvote:hover svg {
+  fill: #0288d1;
+}
+
+.ztr-comment-action-upvote:hover span {
+  color: #0288d1;
+}
+
+.ztr-comment-action-upvote.selected {
+  svg {
+    fill: #0288d1;
+  }
+}
+
+.ztr-comment-action-downvote:hover svg {
+  fill: #0288d1;
+}
+
+.ztr-comment-action-downvote:hover span {
+  color: #0288d1;
+}
+
+.ztr-comment-action-downvote.selected {
+  svg {
+    fill: #0288d1;
+  }
+}
+
+li.ztr-comment-action-votes {
+  justify-content: center;
+  span {
+    margin-left: -0.7em;
+    margin-right: -0.7em;
+    font-size: 0.85em;
+  }
+}
+
 .ztr-reply-form {
   padding: 0 0.5em 0 3.5em;
 }
@@ -401,4 +468,4 @@ svg {
   .ztr-comment-action-reply:hover span {
     color: #96609c;
   }
-}
+}