✨ Basis of publisher page

app/components/Post/PostHeader.vue

@@ -1,16 +1,22 @@
 <template>
-  <div class="flex gap-3 items-center">
-    <v-avatar :image="publisherAvatar" size="40" />
-    <div class="flex-grow-1 flex flex-col">
-      <p class="flex gap-1 items-baseline">
+  <div :class="['flex gap-3 items-center', { 'gap-2': compact }]">
+    <v-avatar :image="publisherAvatar" :size="compact ? 24 : 40" :border="compact" />
+    <div class="grow flex flex-col">
+      <p v-if="compact" class="flex gap-1 items-baseline text-sm">
         <span class="font-bold">{{ props.item.publisher.nick }}</span>
-        <span class="text-xs">@{{ props.item.publisher.name }}</span>
-      </p>
-      <p class="text-xs flex gap-1">
-        <span>{{ DateTime.fromISO(props.item.createdAt).toRelative() }}</span>
-        <span class="font-bold">·</span>
-        <span>{{ DateTime.fromISO(props.item.createdAt).toLocaleString() }}</span>
+        <span class="text-xs opacity-80">{{ DateTime.fromISO(props.item.createdAt).toRelative() }}</span>
       </p>
+      <template v-else>
+        <p class="flex gap-1 items-baseline">
+          <span class="font-bold">{{ props.item.publisher.nick }}</span>
+          <span class="text-xs">@{{ props.item.publisher.name }}</span>
+        </p>
+        <p class="text-xs flex gap-1">
+          <span>{{ DateTime.fromISO(props.item.createdAt).toRelative() }}</span>
+          <span class="font-bold">·</span>
+          <span>{{ DateTime.fromISO(props.item.createdAt).toLocaleString() }}</span>
+        </p>
+      </template>
     </div>
   </div>
 </template>
@@ -20,7 +26,7 @@ import { computed } from 'vue'
 import { DateTime } from 'luxon'
 import type { SnPost } from '~/types/api';
 
-const props = defineProps<{ item: SnPost }>()
+const props = withDefaults(defineProps<{ item: SnPost, compact?: boolean }>(), { compact: false })
 
 const apiBase = useSolarNetworkUrl();
 const publisherAvatar = computed(() =>

app/components/Post/PostItem.vue

@@ -1,8 +1,8 @@
 <template>
-  <v-card>
-    <v-card-text>
-      <div class="flex flex-col gap-3">
-        <post-header :item="props.item" />
+  <v-card :flat="props.flat">
+    <v-card-text :style="props.slim ? 'padding: 0' : null">
+      <div :class="['flex flex-col', compact ? 'gap-1' : 'gap-3']">
+        <post-header :item="props.item" :compact="compact" />
 
         <div v-if="props.item.title || props.item.description">
           <h2 v-if="props.item.title" class="text-lg">
@@ -20,13 +20,62 @@
           <div v-html="htmlContent" />
         </article>
 
+        <template v-if="showReferenced">
+          <div v-if="props.item.repliedPost || props.item.repliedGone">
+            <v-card
+              title="Replying to"
+              prepend-icon="mdi-reply"
+              density="compact"
+              flat
+              border
+            >
+              <div v-if="props.item.repliedGone" class="px-4 pb-3 text-sm opacity-60">
+                Post unavailable
+              </div>
+              <post-item
+                v-else-if="props.item.repliedPost"
+                class="px-4 pb-3"
+                :item="props.item.repliedPost"
+                slim
+                compact
+                flat
+                @react="handleReaction"
+              />
+            </v-card>
+          </div>
+
+          <div v-if="props.item.forwardedPost || props.item.forwardedGone">
+            <v-card
+              title="Forwarded"
+              prepend-icon="mdi-forward"
+              density="compact"
+              flat
+              border
+            >
+              <div v-if="props.item.forwardedGone" class="px-4 pb-3 text-sm opacity-60">
+                Post unavailable
+              </div>
+              <post-item
+                v-else-if="props.item.forwardedPost"
+                class="px-4 pb-3"
+                :item="props.item.forwardedPost"
+                slim
+                compact
+                flat
+                @react="handleReaction"
+              />
+            </v-card>
+          </div>
+        </template>
+
         <attachment-list
+          v-if="!compact"
           :attachments="props.item.attachments"
           :max-height="640"
         />
 
         <v-lazy
-          v-if="props.item.repliesCount"
+          v-if="props.item.repliesCount && !compact"
           :options="{ threshold: 0.5 }"
           transition="fade-transition"
         >
@@ -45,7 +94,7 @@
         </div>
 
         <!-- Post Reactions -->
-        <div @click.stop>
+        <div v-if="!compact" @click.stop>
           <post-reaction-list
             :parent-id="props.item.id"
             :reactions="props.item.reactionsCount"
@@ -64,7 +113,16 @@ import { ref, watch } from "vue"
 import { useMarkdownProcessor } from "~/composables/useMarkdownProcessor"
 import type { SnPost } from "~/types/api"
 
-const props = defineProps<{ item: SnPost }>()
+const props = withDefaults(
+  defineProps<{
+    item: SnPost
+    showReferenced?: boolean
+    compact?: boolean
+    flat?: boolean
+    slim?: boolean
+  }>(),
+  { showReferenced: true, compact: false, flat: false, slim: false }
+)
 const emit = defineEmits<{
   react: [symbol: string, attitude: number, delta: number]
 }>()
@@ -81,7 +139,12 @@ function handleReaction(symbol: string, attitude: number, delta: number) {
   emit("react", symbol, attitude, delta)
 }
 
-function handleReplyReaction(postId: string, symbol: string, attitude: number, delta: number) {
+function handleReplyReaction(
+  postId: string,
+  symbol: string,
+  attitude: number,
+  delta: number
+) {
   emit("react", symbol, attitude, delta)
 }
 

app/components/Post/PostList.vue

@@ -14,13 +14,15 @@
     <!-- Posts List -->
     <v-infinite-scroll
       height="auto"
-      class="space-y-4"
+      class="space-y-4 overflow-y-hidden"
+      side="end"
       @load="loadMore"
     >
       <template v-for="item in posts" :key="item.id">
         <post-item
           :item="item"
           @react="(symbol, attitude, delta) => $emit('react', item.id, symbol, attitude, delta)"
+          @click="router.push('/posts/' + item.id)"
         />
       </template>
 
@@ -39,18 +41,6 @@
         </div>
       </template>
     </v-infinite-scroll>
-
-    <!-- Refresh Button -->
-    <div class="flex justify-center mt-4">
-      <v-btn
-        variant="outlined"
-        :loading="isLoading"
-        prepend-icon="mdi-refresh"
-        @click="refresh"
-      >
-        Refresh
-      </v-btn>
-    </div>
   </div>
 </template>
 
@@ -60,6 +50,8 @@ import type { PostListParams } from "~/composables/usePostList"
 
 import PostItem from "./PostItem.vue"
 
+const router = useRouter()
+
 const props = defineProps<{
   params?: PostListParams
 }>()
@@ -68,6 +60,12 @@ defineEmits<{
   react: [postId: string, symbol: string, attitude: number, delta: number]
 }>()
 
-const { posts, isLoading, hasError, error, loadMore, refresh } =
+const { posts, hasError, error, loadMore, refresh } =
   usePostList(props.params)
 </script>
+
+<style>
+.post-list .v-infinite-scroll .v-infinite-scroll__side:first-child {
+  display: none;
+}
+</style>

app/components/Post/RepliesList.vue

@@ -23,6 +23,7 @@
     >
       <template v-for="item in replies" :key="item.id">
         <post-item
+          :show-referenced="false"
           :item="item"
           @click="router.push('/posts/' + item.id)"
           @react="