✨ Post compact replies list

app/components/Post/PostItem.vue

@@ -25,13 +25,17 @@
           :max-height="640"
         />
 
-        <div
+        <v-lazy
           v-if="props.item.repliesCount"
-          class="flex gap-2 text-xs opacity-80"
+          :options="{ threshold: 0.5 }"
+          transition="fade-transition"
         >
-          <v-icon icon="mdi-comment-text-multiple" size="small" />
-          <p>{{ props.item.repliesCount }} replies</p>
-        </div>
+          <replies-compact-list
+            :params="{ postId: props.item.id }"
+            :hide-quick-reply="true"
+            @react="handleReplyReaction"
+          />
+        </v-lazy>
         <div
           v-if="props.item.isTruncated"
           class="flex gap-2 text-xs opacity-80"
@@ -77,6 +81,10 @@ function handleReaction(symbol: string, attitude: number, delta: number) {
   emit("react", symbol, attitude, delta)
 }
 
+function handleReplyReaction(postId: string, symbol: string, attitude: number, delta: number) {
+  emit("react", symbol, attitude, delta)
+}
+
 watch(
   () => props.item, // Watch the item prop directly
   (value) => {

app/components/Post/RepliesCompactList.vue

@@ -0,0 +1,82 @@
+<template>
+  <v-card
+    class="replies-compact-list"
+    flat
+    border
+    title="Replies"
+    prepend-icon="mdi-comment-text-multiple"
+    density="compact"
+  >
+    <!-- Error State -->
+    <v-alert
+      v-if="hasError"
+      type="error"
+      class="mb-4"
+      closable
+      @click:close="refresh"
+    >
+      {{ error }}
+    </v-alert>
+
+    <!-- Replies List -->
+    <div class="flex flex-col gap-2 pb-2.5">
+      <template v-for="item in replies" :key="item.id">
+        <v-sheet class="px-4" @click="router.push('/posts/' + item.id)">
+          <div class="flex gap-3">
+            <v-avatar :image="getPublisherAvatar(item)" size="24" border />
+            <article
+              v-if="getHtmlContent(item)"
+              class="prose prose-sm dark:prose-invert prose-slate prose-p:m-0 max-w-none flex-1"
+            >
+              <div v-html="getHtmlContent(item)" />
+            </article>
+          </div>
+        </v-sheet>
+      </template>
+
+      <!-- Empty State -->
+      <div v-if="!replies || replies.length === 0" class="text-center py-8 text-muted-foreground">
+        <v-icon
+          icon="mdi-comment-outline"
+          size="48"
+          class="mb-2 opacity-50"
+        />
+        <p>No replies yet</p>
+      </div>
+    </div>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+
+import { useRepliesList } from "~/composables/useRepliesList"
+import { useMarkdownProcessor } from "~/composables/useMarkdownProcessor"
+import type { RepliesListParams } from "~/composables/useRepliesList"
+import type { SnPost } from "~/types/api"
+
+const router = useRouter()
+
+const props = defineProps<{
+  params: RepliesListParams
+  hideQuickReply?: boolean
+}>()
+
+defineEmits<{
+  react: [postId: string, symbol: string, attitude: number, delta: number]
+}>()
+
+const { replies, hasError, error, refresh } = useRepliesList(props.params)
+
+const apiBase = useSolarNetworkUrl()
+const { render } = useMarkdownProcessor({ preserveEmptyLines: true })
+
+const getPublisherAvatar = (item: SnPost) => {
+  return item.publisher.picture
+    ? `${apiBase}/drive/files/${item.publisher.picture.id}`
+    : undefined
+}
+
+const getHtmlContent = (item: SnPost) => {
+  return item.content ? render(item.content) : ""
+}
+</script>

app/composables/useRepliesList.ts

@@ -14,7 +14,7 @@ export interface RepliesListState {
   total: number
 }
 
-export const useRepliesList = (params: RepliesListParams) => {
+export const useRepliesList = (params: RepliesListParams | Ref<RepliesListParams>) => {
   const api = useSolarNetwork()
   const pageSize = 20
 
@@ -32,6 +32,12 @@ export const useRepliesList = (params: RepliesListParams) => {
   const replies = computed(() => state.value.replies)
   const hasMore = computed(() => state.value.hasMore)
 
+  // Get the current postId, handling both direct params and reactive params
+  const currentPostId = computed(() => {
+    const p = isRef(params) ? params.value : params
+    return p.postId
+  })
+
   const buildQueryParams = (cursor: string | null = null) => {
     const offset = cursor ? parseInt(cursor) : 0
 
@@ -44,6 +50,11 @@ export const useRepliesList = (params: RepliesListParams) => {
   }
 
   const fetchReplies = async (cursor: string | null = null, append = false) => {
+    // Don't fetch if postId is empty
+    if (!currentPostId.value) {
+      return { hasReachedEnd: false }
+    }
+
     try {
       state.value.loading = true
       state.value.error = null
@@ -52,7 +63,7 @@ export const useRepliesList = (params: RepliesListParams) => {
 
       let total: number = 0
       const response = await api<SnPost[]>(
-        `/sphere/posts/${params.postId}/replies`,
+        `/sphere/posts/${currentPostId.value}/replies`,
         {
           method: "GET",
           query: queryParams,
@@ -113,8 +124,22 @@ export const useRepliesList = (params: RepliesListParams) => {
     fetchReplies(null, false)
   }
 
-  // Initial load
-  fetchReplies()
+  // Watch for postId changes and fetch when it becomes valid
+  watch(currentPostId, (newPostId, oldPostId) => {
+    if (newPostId && newPostId !== oldPostId) {
+      // Clear existing data when postId changes
+      state.value.replies = []
+      state.value.error = null
+      state.value.cursor = null
+      state.value.hasMore = true
+      fetchReplies()
+    }
+  })
+
+  // Initial load (only if postId is already valid)
+  if (currentPostId.value) {
+    fetchReplies()
+  }
 
   return {
     replies,