From 028e870f5ffa3d054d1e6a94b6de117001de3b1c Mon Sep 17 00:00:00 2001
From: styppo <mail@styp-rekowsky.de>
Date: Fri, 23 Dec 2022 21:49:26 +0000
Subject: [PATCH] Basic 'Replying to' in Posts

---
 src/components/MainMenu/Item.vue |  2 +-
 src/components/Post/index.vue    | 23 ++++++++++++++++++++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/MainMenu/Item.vue b/src/components/MainMenu/Item.vue
index abbb5f8..7495125 100644
--- a/src/components/MainMenu/Item.vue
+++ b/src/components/MainMenu/Item.vue
@@ -46,7 +46,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import 'assets/theme/colors.scss';
 
 a {
diff --git a/src/components/Post/index.vue b/src/components/Post/index.vue
index 85a3a08..dae6889 100644
--- a/src/components/Post/index.vue
+++ b/src/components/Post/index.vue
@@ -13,6 +13,9 @@
           <span>&#183;</span>
           <span class="created-at">{{ moment(post.createdAt).fromNow() }}</span>
         </p>
+        <p v-if="post.inReplyTo" class="in-reply-to">
+          Replying to <a @click.stop="toEvent(post.inReplyTo)">{{ shorten(post.inReplyTo) }}</a>
+        </p>
       </div>
       <div class="post-content-body">
         <p>
@@ -84,11 +87,15 @@ function countRepliesRecursive(event) {
 
 function postFromEvents(events) {
   const event = events[0]
+  if (event.interpolated.replyEvents.length) {
+    console.log(event.content, event.interpolated.replyEvents)
+  }
   return {
     id: event.id,
     author: event.pubkey,
     createdAt: event.created_at * 1000,
     content: event.content,
+    inReplyTo: event.interpolated.replyEvents[event.interpolated.replyEvents.length - 1],
     images: [],
     stats: {
       comments: countRepliesRecursive(event),
@@ -153,8 +160,22 @@ export default {
     margin-left: 12px;
     flex-grow: 1;
     &-header {
+      .in-reply-to {
+        color: $color-dark-gray;
+        a {
+          color: $color-blue;
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
       p {
-        margin: 0 0 8px;
+        &:first-child {
+          margin: 0;
+        }
+        &:last-child {
+          margin: 0 0 8px;
+        }
         > span {
           color: $color-dark-gray;
           &:first-child {