✨ 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="

app/composables/usePostList.ts

@@ -123,17 +123,24 @@ export const usePostList = (params: PostListParams = {}) => {
 
   const loadMore = async (options?: {
     side: string
-    done: (status: "empty" | "loading" | "error") => void
+    done: (status: "empty" | "loading" | "error" | "ok") => void
   }) => {
-    if (!state.value.hasMore || state.value.loading) {
+    if (!state.value.hasMore) {
       options?.done("empty")
       return
     }
 
+    if (state.value.loading) {
+      options?.done("loading")
+      return
+    }
+
     const result = await fetchPosts(state.value.cursor, true)
 
     if (result.hasReachedEnd) {
       options?.done("empty")
+    } else {
+      options?.done("ok")
     }
   }
 

app/composables/useRepliesList.ts

@@ -108,11 +108,16 @@ export const useRepliesList = (params: RepliesListParams | Ref<RepliesListParams
     side: string
     done: (status: "empty" | "loading" | "error" | "ok") => void
   }) => {
-    if (!state.value.hasMore || state.value.loading) {
+    if (!state.value.hasMore) {
       options?.done("empty")
       return
     }
 
+    if (state.value.loading) {
+      options?.done("loading")
+      return
+    }
+
     const result = await fetchReplies(state.value.cursor, true)
 
     if (result.hasReachedEnd) {

app/pages/accounts/[name].vue

@@ -302,7 +302,7 @@ function getOffsetUTCString(targetTimeZone: string): string {
 }
 
 definePageMeta({
-  alias: ["/@:name()"]
+  alias: ["/@:name()", "/u/:name()"]
 })
 
 useHead({

app/pages/publishers/[name].vue

@@ -0,0 +1,195 @@
+<template>
+  <div v-if="user">
+    <img
+      :src="userBackground"
+      class="object-cover w-full max-h-48 mb-8"
+      style="aspect-ratio: 16/7"
+    />
+
+    <v-container>
+      <div class="layout">
+        <div class="main">
+          <post-list :params="{ pubName: username }" />
+        </div>
+        <div class="sidebar flex flex-col gap-3">
+          <v-card class="w-full">
+            <v-card-text>
+              <div class="flex items-center gap-4 mb-4">
+                <v-avatar size="60" rounded="circle" :image="userPicture" />
+                <div>
+                  <div class="text-xl font-bold">
+                    {{ user.nick || user.name }}
+                  </div>
+                  <div class="text-body-2 text-medium-emphasis">@{{ user.name }}</div>
+                </div>
+              </div>
+              <div v-if="htmlBio" class="bio-prose" v-html="htmlBio"></div>
+            </v-card-text>
+          </v-card>
+        </div>
+      </div>
+    </v-container>
+  </div>
+  <div v-else-if="notFound" class="flex justify-center items-center h-full">
+    <v-empty-state
+      icon="mdi-account-off"
+      title="User not found"
+      text="The user profile you're trying to access is not found."
+    />
+  </div>
+  <div v-else class="flex justify-center items-center h-full">
+    <v-progress-circular indeterminate size="64" color="primary" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue"
+import { useMarkdownProcessor } from "~/composables/useMarkdownProcessor"
+import type { SnPublisher } from "~/types/api"
+
+import PostList from "~/components/Post/PostList.vue"
+
+const route = useRoute()
+
+const notFound = ref<boolean>(false)
+const user = ref<SnPublisher | null>(null)
+
+const username = computed(() => {
+  const nameStr = route.params.name?.toString()
+  if (nameStr?.startsWith("@")) return nameStr.substring(1)
+  return nameStr
+})
+
+// Use useFetch with the correct API URL to avoid router conflicts
+const apiBase = useSolarNetworkUrl()
+const apiBaseServer = useSolarNetworkUrl()
+
+try {
+  const { data, error } = await useFetch<SnPublisher>(
+    `${apiBaseServer}/sphere/publishers/${username.value}`,
+    { server: true }
+  )
+
+  if (error.value) {
+    console.error("Failed to fetch user:", error.value)
+    notFound.value = true
+  } else if (data.value) {
+    user.value = data.value
+  }
+} catch (err) {
+  console.error("Failed to fetch user:", err)
+  notFound.value = true
+}
+
+const { render } = useMarkdownProcessor()
+
+const htmlBio = ref<string | undefined>(undefined)
+
+watch(
+  user,
+  (value) => {
+    htmlBio.value = value?.bio
+      ? render(value.bio)
+      : undefined
+  },
+  { immediate: true, deep: true }
+)
+
+const userBackground = computed(() => {
+  return user.value?.background
+    ? `${apiBase}/drive/files/${user.value.background.id}?original=true`
+    : undefined
+})
+const userPicture = computed(() => {
+  return user.value?.picture
+    ? `${apiBase}/drive/files/${user.value.picture.id}`
+    : undefined
+})
+
+definePageMeta({
+  alias: ["/p/:name()"]
+})
+
+useHead({
+  title: computed(() => {
+    if (notFound.value) {
+      return "User not found"
+    }
+    if (user.value) {
+      return user.value.nick || user.value.name
+    }
+    return "Loading user..."
+  }),
+  meta: computed(() => {
+    if (user.value) {
+      const description = `View the profile of ${
+        user.value.nick || user.value.name
+      } on Solar Network.`
+      return [{ name: "description", content: description }]
+    }
+    return []
+  })
+})
+
+defineOgImage({
+  component: "ImageCard",
+  title: computed(() =>
+    user.value ? user.value.nick || user.value.name : "Publisher Profile"
+  ),
+  description: computed(() =>
+    user.value
+      ? `View the profile of ${
+          user.value.nick || user.value.name
+        } on Solar Network.`
+      : ""
+  ),
+  avatarUrl: computed(() => userPicture.value),
+  backgroundImage: computed(() => userBackground.value)
+})
+</script>
+
+<style scoped>
+.bio-prose img {
+  display: inline !important;
+  margin: 0 !important;
+}
+
+.layout {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
+
+.main {
+  order: 2;
+  min-width: 0;
+}
+
+.sidebar {
+  order: 1;
+  overflow-y: auto;
+  height: auto;
+  max-height: 100vh;
+}
+
+@media (min-width: 960px) {
+  .layout {
+    grid-template-columns: 2fr 1fr;
+  }
+
+  .main {
+    order: unset;
+  }
+
+  .sidebar {
+    order: unset;
+  }
+}
+
+@media (min-width: 1280px) {
+  .sidebar {
+    position: sticky;
+    top: calc(68px + 8px);
+  }
+}
+</style>

app/types/api/publisher.ts

@@ -1,4 +1,5 @@
 import type { SnCloudFile } from "./post"
+import type { SnAccount } from "./user"
 
 // Verification interface
 export interface SnVerification {
@@ -20,7 +21,7 @@ export interface SnPublisher {
   verification: SnVerification | null
   accountId: string
   realmId: string | null
-  account: unknown | null
+  account: SnAccount | null
   resourceIdentifier: string
   createdAt: string
   updatedAt: string