From 1aa81a3a0a067c32ce8bd691d752f7163d9d76d4 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Fri, 18 Nov 2022 10:37:22 +0100
Subject: [PATCH] feat: basic conversations (#15)

---
 components/account/AccountInlineInfo.vue      | 14 ++++++++++++
 components/conversation/ConversationCard.vue  | 17 ++++++++++++++
 .../ConversationPaginator.client.vue          | 21 ++++++++++++++++++
 components/nav/NavSide.vue                    |  4 ++--
 components/status/StatusCard.vue              | 12 +++-------
 pages/@[user]/[post].vue                      |  5 +++--
 pages/conversations.vue                       | 22 +++++++++++++++++++
 7 files changed, 82 insertions(+), 13 deletions(-)
 create mode 100644 components/account/AccountInlineInfo.vue
 create mode 100644 components/conversation/ConversationCard.vue
 create mode 100644 components/conversation/ConversationPaginator.client.vue
 create mode 100644 pages/conversations.vue

diff --git a/components/account/AccountInlineInfo.vue b/components/account/AccountInlineInfo.vue
new file mode 100644
index 00000000..8df90c90
--- /dev/null
+++ b/components/account/AccountInlineInfo.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { Account } from 'masto'
+
+defineProps<{
+  account: Account
+}>()
+</script>
+
+<template>
+  <a :href="`/@${account.acct}`" flex gap-2 font-bold items-center>
+    <img :src="account.avatar" class="w-5 h-5 rounded">
+    {{ account.displayName }}
+  </a>
+</template>
diff --git a/components/conversation/ConversationCard.vue b/components/conversation/ConversationCard.vue
new file mode 100644
index 00000000..cc8738c7
--- /dev/null
+++ b/components/conversation/ConversationCard.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { Conversation } from 'masto'
+
+const props = defineProps<{
+  conversation: Conversation
+}>()
+</script>
+
+<template>
+  <div flex flex-col gap-2>
+    <div flex gap-2>
+      With
+      <AccountInlineInfo v-for="account in conversation.accounts" :key="account.id" :account="account" />
+    </div>
+    <StatusCard v-if="conversation.lastStatus" :status="conversation.lastStatus" :actions="false" />
+  </div>
+</template>
diff --git a/components/conversation/ConversationPaginator.client.vue b/components/conversation/ConversationPaginator.client.vue
new file mode 100644
index 00000000..598da49c
--- /dev/null
+++ b/components/conversation/ConversationPaginator.client.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { Conversation, Paginator } from 'masto'
+
+const { paginator } = defineProps<{
+  paginator: Paginator<any, Conversation[]>
+}>()
+</script>
+
+<template>
+  <CommonPaginator
+    :paginator="paginator"
+    border="t border"
+  >
+    <template #default="{ item }">
+      <ConversationCard
+        :conversation="item"
+        border="b border" py-1
+      />
+    </template>
+  </CommonPaginator>
+</template>
diff --git a/components/nav/NavSide.vue b/components/nav/NavSide.vue
index 6fc573b3..3ca6a28a 100644
--- a/components/nav/NavSide.vue
+++ b/components/nav/NavSide.vue
@@ -27,9 +27,9 @@ const isLogin = useLoginState()
       <span>Federated</span>
     </NuxtLink>
     <template v-if="isLogin">
-      <NuxtLink flex gap2 items-center active-class="text-primary">
+      <NuxtLink flex gap2 items-center to="/conversations" active-class="text-primary">
         <div i-ri:at-line />
-        <span>Messages</span>
+        <span>Conversations</span>
       </NuxtLink>
       <NuxtLink flex gap2 items-center to="/favourites" active-class="text-primary">
         <div i-ri:heart-3-line />
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index d5cc7941..5beb4e61 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -24,11 +24,8 @@ const router = useRouter()
 
 function go(e: MouseEvent) {
   const path = e.composedPath() as HTMLElement[]
-  const hasButton = path.find(el => ['A', 'BUTTON', 'P'].includes(el.tagName.toUpperCase()))
-  if (hasButton)
-    return
-
-  if (path.find(i => i === el.value))
+  const el = path.find(el => ['A', 'BUTTON', 'P'].includes(el.tagName?.toUpperCase()))
+  if (!el || el.tagName.toUpperCase() === 'P')
     router.push(`/@${status.account.acct}/${status.id}`)
 }
 
@@ -70,10 +67,7 @@ const timeago = useTimeAgo(() => status.createdAt, {
     <div v-if="rebloggedBy" pl8>
       <div flex gap-1 items-center text-gray:75 text-sm>
         <div i-ri:repeat-fill mr-1 />
-        <a :href="`/@${rebloggedBy.acct}`" flex gap-2 font-bold items-center>
-          <img :src="rebloggedBy.avatar" class="w-5 h-5 rounded">
-          {{ rebloggedBy.displayName }}
-        </a>
+        <AccountInlineInfo :account="rebloggedBy" />
         reblogged
       </div>
     </div>
diff --git a/pages/@[user]/[post].vue b/pages/@[user]/[post].vue
index 9401c0aa..8d3171dd 100644
--- a/pages/@[user]/[post].vue
+++ b/pages/@[user]/[post].vue
@@ -12,10 +12,11 @@ const { data: context } = await useAsyncData(`${id}-context`, () => masto.status
 </script>
 
 <template>
+  <template v-for="comment of context?.ancestors" :key="comment.id">
+    <StatusCard :status="comment" border="t border" pt-4 />
+  </template>
   <StatusDetails :status="status" />
   <template v-for="comment of context?.descendants" :key="comment.id">
     <StatusCard :status="comment" border="t border" pt-4 />
   </template>
-  <pre>{{ status }}</pre>
-  <pre>{{ context }}</pre>
 </template>
diff --git a/pages/conversations.vue b/pages/conversations.vue
new file mode 100644
index 00000000..94bb7f38
--- /dev/null
+++ b/pages/conversations.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+definePageMeta({
+  middleware: 'auth',
+})
+
+const masto = await useMasto()
+const paginator = masto.conversations.getIterator()
+</script>
+
+<template>
+  <MainContent>
+    <template #title>
+      <div i-ri:at-line h-6 mr-1 /><span>Conversations</span>
+    </template>
+    <template #actions>
+      <div color-gray i-ri:equalizer-fill mr-1 h-6 />
+    </template>
+    <slot>
+      <ConversationPaginator :paginator="paginator" />
+    </slot>
+  </MainContent>
+</template>