✨ Filtered on publisher page

app/components/Attachment/AttachmentList.vue

@@ -14,7 +14,7 @@
         class="carousel-container rounded-lg overflow-hidden"
         :style="carouselStyle"
       >
-        <v-card width="100%" class="transition-all duration-300" border>
+        <v-card width="100%" height="100%" class="transition-all duration-300" border>
           <v-carousel
             height="100%"
             hide-delimiter-background
@@ -25,10 +25,12 @@
             <v-carousel-item
               v-for="attachment in attachments"
               :key="attachment.id"
+              height="100%"
               cover
             >
               <attachment-item
                 original
+                class="h-full"
                 :item="attachment"
               />
             </v-carousel-item>

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,426 @@
+<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">
+          <!-- Filter Section -->
+          <v-card class="mb-4">
+            <v-tabs
+              v-model="activeCategoryTab"
+              color="primary"
+              class="mb-2"
+              grow
+            >
+              <v-tab value="all">All</v-tab>
+              <v-tab value="posts">Posts</v-tab>
+              <v-tab value="articles">Articles</v-tab>
+            </v-tabs>
+
+            <v-row>
+              <v-col cols="12" sm="6">
+                <v-checkbox
+                  :model-value="includeReplies"
+                  label="Include replies"
+                  :indeterminate="includeReplies === null"
+                  density="compact"
+                  prepend-icon="mdi-reply"
+                  hide-details
+                  class="px-4"
+                  @update:model-value="cycleIncludeReplies"
+                />
+              </v-col>
+              <v-col cols="12" sm="6">
+                <v-checkbox
+                  v-model="mediaOnly"
+                  label="Media only"
+                  density="compact"
+                  hide-details
+                  class="px-4"
+                  prepend-icon="mdi-attachment"
+                />
+              </v-col>
+            </v-row>
+
+            <v-checkbox
+              v-model="orderDesc"
+              label="Descending order"
+              density="compact"
+              prepend-icon="mdi-sort"
+              class="px-4"
+              hide-details
+            />
+
+            <v-divider class="my-1" />
+
+            <v-list-item
+              title="Advanced filters"
+              prepend-icon="mdi-filter-variant"
+              @click="showAdvancedFilters = !showAdvancedFilters"
+            >
+              <template #append>
+                <v-icon>
+                  {{
+                    showAdvancedFilters ? "mdi-chevron-up" : "mdi-chevron-down"
+                  }}
+                </v-icon>
+              </template>
+            </v-list-item>
+
+            <v-expand-transition>
+              <div v-if="showAdvancedFilters" class="my-3 px-4">
+                <v-text-field
+                  v-model="queryTerm"
+                  hide-details
+                  label="Search"
+                  placeholder="Search posts"
+                  prepend-inner-icon="mdi-magnify"
+                  variant="outlined"
+                  density="comfortable"
+                  class="mb-3"
+                />
+
+                <v-select
+                  v-model="order"
+                  hide-details
+                  label="Sort by"
+                  :items="[
+                    { title: 'Date', value: 'date' },
+                    { title: 'Popularity', value: 'popularity' }
+                  ]"
+                  variant="outlined"
+                  density="comfortable"
+                  class="mb-3"
+                />
+
+                <v-row>
+                  <v-col cols="12" sm="6">
+                    <v-text-field
+                      :model-value="periodStartFormatted"
+                      hide-details
+                      label="From date"
+                      prepend-inner-icon="mdi-calendar"
+                      variant="outlined"
+                      density="comfortable"
+                      readonly
+                      @click="openDatePicker('start')"
+                    />
+                  </v-col>
+                  <v-col cols="12" sm="6">
+                    <v-text-field
+                      :model-value="periodEndFormatted"
+                      hide-details
+                      label="To date"
+                      prepend-inner-icon="mdi-calendar"
+                      variant="outlined"
+                      density="comfortable"
+                      readonly
+                      @click="openDatePicker('end')"
+                    />
+                  </v-col>
+                </v-row>
+              </div>
+            </v-expand-transition>
+          </v-card>
+
+          <post-list :key="filterKey" :params="postListParams" />
+
+          <!-- Date Picker Dialog -->
+          <v-dialog v-model="datePickerDialog" max-width="400">
+            <v-card>
+              <v-card-title>{{
+                datePickerType === "start" ? "From date" : "To date"
+              }}</v-card-title>
+              <v-card-text>
+                <v-date-picker
+                  v-model="tempDate"
+                  :max="new Date().toISOString().split('T')[0]"
+                />
+              </v-card-text>
+              <v-card-actions>
+                <v-spacer />
+                <v-btn @click="datePickerDialog = false">Cancel</v-btn>
+                <v-btn color="primary" @click="confirmDatePicker">OK</v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-dialog>
+        </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 type { PostListParams } from "~/composables/usePostList"
+
+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
+})
+
+// Filter state
+const activeCategoryTab = ref("all")
+const includeReplies = ref<boolean | null>(null)
+const mediaOnly = ref(false)
+const orderDesc = ref(true)
+const showAdvancedFilters = ref(false)
+const queryTerm = ref("")
+const order = ref<string | undefined>(undefined)
+const periodStart = ref<number | undefined>(undefined)
+const periodEnd = ref<number | undefined>(undefined)
+
+// Date picker dialog
+const datePickerDialog = ref(false)
+const datePickerType = ref<"start" | "end">("start")
+const tempDate = ref<Date | undefined>(undefined)
+
+const postListParams = computed<PostListParams>(() => {
+  const params: PostListParams = {
+    pubName: username.value,
+    includeReplies: includeReplies.value ?? undefined,
+    mediaOnly: mediaOnly.value,
+    orderDesc: orderDesc.value,
+    queryTerm: queryTerm.value || undefined,
+    order: order.value,
+    periodStart: periodStart.value,
+    periodEnd: periodEnd.value
+  }
+
+  // Set type based on active tab
+  if (activeCategoryTab.value === "posts") {
+    params.type = 0 // Assuming 0 is for posts
+  } else if (activeCategoryTab.value === "articles") {
+    params.type = 1 // Assuming 1 is for articles
+  }
+  // 'all' means no type filter
+
+  return params
+})
+
+const periodStartFormatted = computed(() => {
+  return periodStart.value
+    ? new Date(periodStart.value * 1000).toISOString().split("T")[0]
+    : ""
+})
+
+const periodEndFormatted = computed(() => {
+  return periodEnd.value
+    ? new Date(periodEnd.value * 1000).toISOString().split("T")[0]
+    : ""
+})
+
+// Create a key that changes when filters change to force PostList re-mount
+const filterKey = computed(() => {
+  return JSON.stringify(postListParams.value)
+})
+
+const cycleIncludeReplies = () => {
+  if (includeReplies.value === null) {
+    includeReplies.value = false
+  } else if (includeReplies.value === false) {
+    includeReplies.value = true
+  } else {
+    includeReplies.value = null
+  }
+}
+
+const openDatePicker = (type: "start" | "end") => {
+  datePickerType.value = type
+  tempDate.value =
+    type === "start"
+      ? periodStart.value
+        ? new Date(periodStart.value * 1000)
+        : new Date()
+      : periodEnd.value
+      ? new Date(periodEnd.value * 1000)
+      : new Date()
+  datePickerDialog.value = true
+}
+
+const confirmDatePicker = () => {
+  if (tempDate.value) {
+    const timestamp = Math.floor(tempDate.value.getTime() / 1000)
+    if (datePickerType.value === "start") {
+      periodStart.value = timestamp
+    } else {
+      periodEnd.value = timestamp
+    }
+  }
+  datePickerDialog.value = false
+}
+
+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