feat: basic conversations (#15)

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>

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>

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>

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 />

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()))
+  const el = path.find(el => ['A', 'BUTTON', 'P'].includes(el.tagName?.toUpperCase()))
-  if (hasButton)
+  if (!el || el.tagName.toUpperCase() === 'P')
-    return
-
-  if (path.find(i => i === el.value))
     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>
+        <AccountInlineInfo :account="rebloggedBy" />
-          <img :src="rebloggedBy.avatar" class="w-5 h-5 rounded">
-          {{ rebloggedBy.displayName }}
-        </a>
         reblogged
       </div>
     </div>

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>

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>