feat: impl. pds-wide and per-profile post views

src/components/AccountList/AccountItem.vue

···
 <style lang="css" scoped>
 .account {
   background: hsla(var(--mantle) / 1);
-  border: 1px solid hsla(var(--overlay0) / 0.2);
+  border: 1px solid var(--border);
   border-radius: 0.5rem;
   cursor: pointer;
   overflow: hidden;

src/components/PageHeader.vue

···
 
 defineProps<{
   title: string
-  caption: string | string[]
+  caption?: string | string[]
 }>()
 </script>
 
···
 <style scoped>
 header {
   padding: 0.5rem;
-  border-bottom: 1px solid hsla(var(--overlay0) / 0.2);
+  border-bottom: 1px solid var(--border);
 }
 
 .title-row {
   display: flex;
   align-items: center;
   gap: 0.25rem;
-  margin-bottom: 0.25rem;
 }
 
 .title-row__button {
···
   overflow: hidden;
 }
 
-header .hint {
+.hint {
+  margin-top: 0.25rem;
+
   display: flex;
   gap: 0.25rem;
   margin: 0;

src/components/PostItem.vue

···
+<script setup lang="ts">
+import { useProfilesStore } from '@/stores/profiles'
+import type { Post } from '@/stores/posts'
+import { APP_CONFIG } from '@/config'
+import { computed } from 'vue'
+const props = defineProps<{ p: Post }>()
+
+const profileStore = useProfilesStore()
+const profile = computed(
+  () =>
+    profileStore.profiles.find((pr) => pr.did === props.p.authorDid)?.profile,
+)
+
+function timeAgo(input: string | Date | number): string {
+  const date = input instanceof Date ? input : new Date(input)
+  if (isNaN(date.getTime())) return 'invalid date'
+
+  const now = new Date()
+  let seconds = Math.floor((now.getTime() - date.getTime()) / 1000)
+  const isFuture = seconds < 0
+  seconds = Math.abs(seconds)
+
+  if (seconds < 5) return 'just now'
+  const units = [
+    { sec: 31536000, name: 'year' },
+    { sec: 2592000, name: 'month' },
+    { sec: 86400, name: 'day' },
+    { sec: 3600, name: 'hour' },
+    { sec: 60, name: 'minute' },
+    { sec: 1, name: 'second' },
+  ]
+
+  for (const { sec, name } of units) {
+    const count = Math.floor(seconds / sec)
+    if (count >= 1) {
+      const plural = count > 1 ? 's' : ''
+      return isFuture
+        ? `in ${count} ${name}${plural}`
+        : `${count} ${name}${plural} ago`
+    }
+  }
+
+  return 'just now'
+}
+
+const postUrl = computed(
+  () =>
+    `${APP_CONFIG.bskyClient}/profile/${props.p.authorDid}/post/${props.p.rkey}`,
+)
+const replyTo = computed(() => {
+  const parentUri = props.p.value.reply?.parent?.uri
+  if (!parentUri) return null
+
+  const m = parentUri.match(/^at:\/\/([^/]+)\/[^/]+\/([^/?#]+)(?:[/?#].*)?$/)
+  if (!m) return null
+  const authorDid = m[1]
+  const rkey = m[2]
+  return {
+    did: authorDid,
+    profile:
+      profileStore.profiles.find((pr) => pr.did === authorDid)?.profile || null,
+    url: `${APP_CONFIG.bskyClient}/profile/${authorDid}/post/${rkey}`,
+  }
+})
+</script>
+
+<template>
+  <article class="post" @click="console.log(p)" v-if="profile">
+    <div class="author-avatar">
+      <img
+        v-if="profile.avatar"
+        :src="profile.avatar"
+        alt="Avatar"
+        width="40"
+        height="40"
+        aria-hidden="true"
+      />
+    </div>
+    <div class="post-main">
+      <div class="post-head">
+        <div class="post-author">
+          <RouterLink :to="`/profile/${p.authorDid}`" class="author-did">{{
+            profile.displayName || profile.handle
+          }}</RouterLink>
+          <span class="post-date">{{ timeAgo(p.createdAt) }}</span>
+          <p>
+            <small v-if="replyTo">
+              replying to
+              <RouterLink :to="`/profile/${replyTo.did}`">{{
+                replyTo.profile
+                  ? replyTo.profile.displayName || `@${replyTo.profile.handle}`
+                  : replyTo.did
+              }}</RouterLink>
+            </small>
+          </p>
+        </div>
+      </div>
+      <div class="post-body">
+        <p v-if="p.value.text">{{ p.value.text }}</p>
+        <p v-else class="no-text">[no text]</p>
+      </div>
+      <div class="post-footer">
+        <a :href="postUrl" target="_blank" rel="noopener noreferrer">
+          view post
+        </a>
+        <a
+          v-if="replyTo"
+          :href="replyTo.url"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          view thread
+        </a>
+      </div>
+    </div>
+  </article>
+</template>
+
+<style scoped>
+.post {
+  border-bottom: 1px dashed var(--border-strong);
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
+
+.author-avatar {
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+  background-color: hsla(var(--overlay0) / 0.1);
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    display: block;
+  }
+}
+
+.post-head {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.25rem;
+  .post-author {
+    font-weight: 700;
+    font-size: 0.85rem;
+    color: hsla(var(--subtext1) / 1);
+    display: flex;
+    gap: 0.5rem;
+    align-items: baseline;
+  }
+  .post-date {
+    font-weight: 500;
+    font-size: 0.75rem;
+    color: hsla(var(--subtext0) / 1);
+  }
+}
+.post-body {
+  color: hsla(var(--text) / 1);
+  min-width: 0;
+
+  p {
+    margin: 0;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .no-text {
+    color: hsla(var(--subtext0) / 1);
+    font-style: italic;
+  }
+}
+.post-footer {
+  margin-top: 0.5rem;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+
+  a {
+    font-size: 0.75rem;
+    color: hsla(var(--blue) / 1);
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+</style>

src/components/ThemeSwitcher.vue

···
   gap: 0.25rem;
 
   background: hsla(var(--base) / 1);
-  border: 1px solid hsla(var(--overlay0) / 0.15);
+  border: 1px solid var(--border-light);
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
 

src/config/schema.ts

···
   bskyService: z.url().default('https://public.api.bsky.app'),
   appName: z.string().default('pds-landing'),
   mode: z.enum(['development', 'production']).default('development'),
+  bskyClient: z.url().default('https://bsky.app'),
   description: z
     .string()
     .default(

src/css/base.css

···
   background-color: hsl(var(--overlay0));
   color: hsl(var(--text));
 }
+
+body {
+  --border-raw: var(--overlay0);
+  --border-light: hsla(var(--overlay0) / 0.1);
+  --border: hsla(var(--overlay0) / 0.2);
+  --border-strong: hsla(var(--overlay0) / 0.3);
+}

src/pages/HomeView.vue

···
 import AccountSection from '@/components/Sections/AccountSection.vue'
 import { APP_CONFIG } from '@/config'
 import { useProfilesStore } from '@/stores/profiles'
+import { usePostsStore } from '@/stores/posts'
 
+const postsStore = usePostsStore()
 const profilesStore = useProfilesStore()
 
 onMounted(async () => {
+  if (adminConfig?.did) {
+    profilesStore
+      .fetchDid(adminConfig.did as Did)
+      .then((profile) => {
+        adminProfile.value = profile?.profile ?? null
+      })
+      .catch(() => {
+        adminProfile.value = null
+      })
+  }
+
   await profilesStore.init()
+  await postsStore.loadFeedFromDids(profilesStore.dids)
 })
 
 const appName = APP_CONFIG?.appName ?? 'pds-landing'
···
 
 const select = (did: string | null) => profilesStore.selectDid(did)
 
-onMounted(async () => {
-  if (adminConfig?.did) {
-    const res = await profilesStore.fetchDid(adminConfig.did as Did)
-    adminProfile.value = res.profile
-  }
-})
-
 watch(
   isMobile,
   (mobile) => {
···
 watch(
   () => route.path,
   (p) => {
-    currentTab.value = tabFromRoutePath(p)
+    currentTab.value = tabFromRoutePath(p as unknown as string)
   },
   { immediate: true },
 )
 watch(currentTab, (tab) => {
   const routeTab = tabFromRoutePath(route.path)
-  if (routeTab !== tab) router.push({ path: `/${tab}` }).catch(() => {})
+  if (routeTab !== tab.value) router.push({ path: `/${tab}` }).catch(() => {})
 })
 </script>
 
···
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
-    border: 1px solid hsla(var(--overlay0) / 0.2);
+    border: 1px solid var(--border);
     border-radius: 0.5rem;
     background: hsla(var(--base) / 1);
 
     section {
       margin-top: 0.5rem;
-      border-top: 1px dashed hsla(var(--overlay0) / 0.5);
+      border-top: 1px dashed var(--border-strong);
       padding-top: 0.5rem;
       h3 {
         font-size: 0.85rem;
···
 .main {
   flex: 1 1 auto;
   overflow-y: auto;
-  border: 1px solid hsla(var(--overlay0) / 0.2);
+  border: 1px solid var(--border);
   border-radius: 0.5rem;
   background: hsla(var(--base) / 1);
 }
···
 
 .admin {
   margin-top: 0.5rem;
-  border-top: 1px dashed hsla(var(--overlay0) / 0.5);
   padding-top: 0.5rem;
 
   .admin-extra {

src/pages/PostsView.vue

···
 <script setup lang="ts">
 import PageHeader from '@/components/PageHeader.vue'
+import PostItem from '@/components/PostItem.vue'
+
+import { usePostsStore } from '@/stores/posts'
+const postsStore = usePostsStore()
 </script>
 
 <template>
   <PageHeader title="posts." caption="posts from users on this pds!" />
+  <section class="block posts-list">
+    <div v-if="postsStore.loading" class="loading">loading posts...</div>
+    <div v-else-if="postsStore.error" class="error">{{ postsStore.error }}</div>
+
+    <div
+      v-if="!postsStore.loading && postsStore.feed.length === 0"
+      class="empty"
+    >
+      no posts found.
+    </div>
+
+    <template v-if="!postsStore.loading">
+      <div v-for="p in postsStore.feed" :key="p.uri + p.cid">
+        <PostItem :p="p" />
+      </div>
+    </template>
+  </section>
 </template>
+
+<style scoped>
+.posts-list {
+  padding: 0.5rem;
+}
+.loading,
+.error,
+.empty {
+  padding: 0.5rem;
+  color: hsla(var(--subtext0) / 1);
+}
+</style>

src/pages/ProfileView.vue

···
 <script setup lang="ts">
 import PageHeader from '@/components/PageHeader.vue'
+import PostItem from '@/components/PostItem.vue'
 
 import { useRoute } from 'vue-router'
-import { watch, computed } from 'vue'
-import type { Did } from '@atcute/lexicons'
+import { watch, computed, ref } from 'vue'
 
 import { useProfilesStore } from '@/stores/profiles'
 import { onUnmounted } from 'vue'
+import { type Post, usePostsStore } from '@/stores/posts'
+import { APP_CONFIG } from '@/config'
 
 const profilesStore = useProfilesStore()
+const postsStore = usePostsStore()
+
 const selectedProfile = computed(() => profilesStore.selectedProfile)
+const selectedDid = ref<string | null>(null)
+const profileUrl = computed(() => {
+  return `${APP_CONFIG.bskyClient}/profile/${selectedDid.value}`
+})
 
 const route = useRoute()
+const posts = ref<Post[]>([])
 
 watch(
   () => route.params.did,
-  (newDid) => {
-    if (newDid) profilesStore.selectDid(newDid as Did)
+  async (newDid) => {
+    if (newDid) {
+      const did = Array.isArray(newDid) ? newDid[0] : newDid
+      selectedDid.value = did
+      profilesStore.selectDid(did)
+      const userPosts = await postsStore.loadUserPosts(did, 100)
+      posts.value = userPosts
+    } else {
+      posts.value = []
+    }
     window.scrollTo(0, 0)
   },
   { immediate: true },
···
 </script>
 
 <template>
-  <PageHeader
-    :title="`${selectedProfile?.profile?.displayName || selectedProfile?.profile?.handle}'s profile`"
-    :caption="stats"
-  />
-  <div
-    :class="{ profile: true, 'no-banner': !selectedProfile?.profile?.banner }"
-  >
-    <div class="profile-banner">
-      <img
-        v-if="selectedProfile?.profile?.banner"
-        :src="selectedProfile?.profile?.banner"
-        class="banner-image"
-        alt="profile banner"
-        aria-hidden="true"
-      />
-      <div class="profile-avatar">
+  <template v-if="selectedProfile">
+    <PageHeader
+      :title="`${selectedProfile?.profile?.displayName || selectedProfile?.profile?.handle}'s profile`"
+      :caption="stats"
+    />
+    <div
+      :class="{ profile: true, 'no-banner': !selectedProfile?.profile?.banner }"
+    >
+      <div class="profile-banner">
         <img
-          v-if="selectedProfile?.profile?.avatar"
-          :src="selectedProfile?.profile?.avatar"
-          alt="profile avatar"
+          v-if="selectedProfile?.profile?.banner"
+          :src="selectedProfile?.profile?.banner"
+          class="banner-image"
+          alt="profile banner"
           aria-hidden="true"
         />
+        <div class="profile-avatar">
+          <img
+            v-if="selectedProfile?.profile?.avatar"
+            :src="selectedProfile?.profile?.avatar"
+            alt="profile avatar"
+            aria-hidden="true"
+          />
+        </div>
       </div>
+
+      <section class="block profile-info">
+        <h2 class="profile-name">
+          {{
+            selectedProfile?.profile?.displayName ||
+            `@${selectedProfile?.profile?.handle}`
+          }}
+        </h2>
+        <a
+          :href="`https://${selectedProfile?.profile?.handle}`"
+          class="profile-handle"
+        >
+          @{{ selectedProfile?.profile?.handle }}
+        </a>
+        <p v-if="selectedProfile?.profile?.description" class="profile-bio">
+          {{ selectedProfile?.profile?.description }}
+        </p>
+
+        <a :href="profileUrl" rel="noopener noreferrer" target="_blank">
+          view on bluesky
+        </a>
+      </section>
+
+      <section class="block profile-posts">
+        <div v-if="postsStore.loading" class="loading">loading posts...</div>
+        <div v-if="postsStore.error" class="error">{{ postsStore.error }}</div>
+        <div v-if="!postsStore.loading && posts.length === 0" class="empty">
+          no posts.
+        </div>
+
+        <template v-if="!postsStore.loading">
+          <PostItem :p="p" v-for="p in posts" :key="p.rkey" />
+        </template>
+      </section>
     </div>
+  </template>
+  <template v-else>
+    <PageHeader title="profile." />
+    <div class="no-profile">
+      <h2>no profile found</h2>
+      <p>this profile couldn't be found on this pds.</p>
 
-    <section class="block profile-info">
-      <h2 class="profile-name">
-        {{
-          selectedProfile?.profile?.displayName ||
-          `@${selectedProfile?.profile?.handle}`
-        }}
-      </h2>
-      <a
-        :href="`https://${selectedProfile?.profile?.handle}`"
-        class="profile-handle"
-      >
-        @{{ selectedProfile?.profile?.handle }}
+      <a :href="profileUrl" rel="noopener noreferrer" target="_blank">
+        view on bluesky
       </a>
-      <p v-if="selectedProfile?.profile?.description" class="profile-bio">
-        {{ selectedProfile?.profile?.description }}
-      </p>
-    </section>
-  </div>
+    </div>
+  </template>
 </template>
 
 <style scoped>
···
       left: 1rem;
       width: 8rem;
       height: 8rem;
-      border: 3px solid hsla(var(--overlay0) / 0.5);
+      border: 3px solid var(--border-strong);
       border-radius: 50%;
       overflow: hidden;
       background: hsla(var(--surface0) / 1);
···
       word-break: break-word;
     }
   }
+}
+
+.profile-posts {
+  width: 100%;
+  padding: 0.5rem;
+  border-top: 1px solid var(--border);
+}
+
+.no-profile {
+  padding: 1rem;
+
+  h2 {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: hsla(var(--text) / 1);
+  }
+
+  p {
+    font-size: 1rem;
+    color: hsla(var(--subtext0) / 1);
+  }
+
+  a {
+    display: inline-block;
+    margin-top: 1rem;
+    font-size: 1rem;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.loading,
+.error,
+.empty {
+  padding: 0.5rem;
+  color: hsla(var(--subtext0) / 1);
 }
 </style>

src/stores/posts.ts

···
+import type { ComAtprotoRepoListRecords } from '@atcute/atproto'
+import type { AppBskyFeedPost } from '@atcute/bluesky'
+import type { Did } from '@atcute/lexicons'
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { pdsClient } from '@/api/clients'
+
+export type Post = {
+  uri: string
+  cid: string
+  value: AppBskyFeedPost.Main
+  createdAt: string
+  rkey: string
+  authorDid: Did
+}
+
+export const usePostsStore = defineStore('posts', () => {
+  const feed = ref<Post[]>([])
+  const userPosts = ref<Record<Did, Post[]>>({})
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  async function fetchPostsFromRepo(did: Did, limit = 50, cursor?: string) {
+    try {
+      const { ok, data } = await pdsClient.get('com.atproto.repo.listRecords', {
+        params: {
+          repo: did,
+          collection: 'app.bsky.feed.post',
+          limit,
+          cursor,
+        },
+      })
+
+      if (!ok)
+        throw new Error(
+          `failed to fetch posts for ${did}: ${data.error ?? 'unknown'}`,
+        )
+
+      const typed = data as ComAtprotoRepoListRecords.$output
+
+      const records = Array.isArray(typed.records) ? typed.records : []
+
+      const posts = records
+        .map((rec) => {
+          const val = rec.value as AppBskyFeedPost.Main
+          return {
+            uri: rec.uri,
+            cid: rec.cid,
+            value: val,
+            createdAt: val.createdAt,
+            rkey: rec.uri.split('/').pop() ?? '',
+            authorDid: did,
+          } as Post
+        })
+        .filter(Boolean)
+
+      return {
+        posts,
+        cursor: typed.cursor ?? null,
+      }
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : String(err)
+      throw new Error(msg)
+    }
+  }
+
+  async function loadUserPosts(did: Did, limit = 100) {
+    loading.value = true
+    error.value = null
+    try {
+      const { posts } = await fetchPostsFromRepo(did, limit)
+      userPosts.value = {
+        ...userPosts.value,
+        [did]: posts,
+      }
+      return posts
+    } catch (err: unknown) {
+      error.value = err instanceof Error ? err.message : String(err)
+      userPosts.value[did] = []
+      return []
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function loadFeedFromDids(dids: Did[], perUserLimit = 100) {
+    loading.value = true
+    error.value = null
+    try {
+      const promises = dids.map(async (did) => {
+        try {
+          const { posts } = await fetchPostsFromRepo(did, perUserLimit)
+          return posts
+        } catch {
+          return [] as Post[]
+        }
+      })
+
+      const results = await Promise.all(promises)
+      const aggregated = results.flat()
+
+      aggregated.sort((a, b) => {
+        const ta = Date.parse(a.createdAt)
+        const tb = Date.parse(b.createdAt)
+        return tb - ta
+      })
+
+      feed.value = aggregated
+      return aggregated
+    } catch (err: unknown) {
+      error.value = err instanceof Error ? err.message : String(err)
+      feed.value = []
+      return []
+    } finally {
+      loading.value = false
+    }
+  }
+
+  function clearFeed() {
+    feed.value = []
+  }
+
+  function clearUserPosts(did?: Did) {
+    if (did) {
+      delete userPosts.value[did]
+      return
+    }
+    userPosts.value = {}
+  }
+
+  return {
+    feed,
+    userPosts,
+    loading,
+    error,
+    fetchPostsFromRepo,
+    loadUserPosts,
+    loadFeedFromDids,
+    clearFeed,
+    clearUserPosts,
+  }
+})