From 92431b4de95b9dbbc07437cce196fbf0b9428942 Mon Sep 17 00:00:00 2001
From: cylewaitforit <cyle@cylewaitfor.it>
Date: Tue, 14 Apr 2026 07:43:11 -0500
Subject: [PATCH] docs(ui): add stories for PDS page

---
 .storybook/handlers.ts   | 34 ++++++++++++++++++++++++++++++++++
 app/pages/pds.stories.ts | 30 ++++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+)
 create mode 100644 app/pages/pds.stories.ts

diff --git a/.storybook/handlers.ts b/.storybook/handlers.ts
index 42531f6f1d..fa5544eced 100644
--- a/.storybook/handlers.ts
+++ b/.storybook/handlers.ts
@@ -57,3 +57,37 @@ export const contributorsHandler = http.get('/api/contributors', () => {
     },
   ])
 })
+
+export const pdsUsersHandler = http.get('/api/atproto/pds-users', () => {
+  return HttpResponse.json([
+    {
+      did: 'did:plc:mock0001',
+      handle: 'patak.dog',
+      displayName: 'Patak Dog',
+      avatar:
+        'https://cdn.bsky.app/img/avatar/plain/did:plc:zjfptjaegvgc7r2axkkyyzqn/bafkreihrcqhp575f6dph4uztbeyxfrmfnbv7x2gvovrgu4idgdsdw7wety',
+    },
+    {
+      did: 'did:plc:mock0002',
+      handle: 'patakllama.mockpmx.social',
+      displayName: 'Patak Llama',
+      avatar: 'https://api.dicebear.com/9.x/initials/svg?seed=llama',
+    },
+    {
+      did: 'did:plc:mock0003',
+      handle: 'patak.horse',
+      displayName: 'Patak Horse',
+      avatar:
+        'https://cdn.bsky.app/img/avatar/plain/did:plc:vqh7id7sddkrfkhgt7tstlpd/bafkreifodkgqszgpt2qnoyljnbafokr6eujqwztj2kxo473adv5b57hjse',
+    },
+    {
+      did: 'did:plc:mock0004',
+      handle: 'patakcatapiller.mockpmx.social',
+    },
+    {
+      did: 'did:plc:mock0005',
+      handle: 'patakgoat.mockpmx.social',
+      displayName: 'Patak Goat',
+    },
+  ])
+})
diff --git a/app/pages/pds.stories.ts b/app/pages/pds.stories.ts
new file mode 100644
index 0000000000..5bdd02a839
--- /dev/null
+++ b/app/pages/pds.stories.ts
@@ -0,0 +1,30 @@
+import Pds from './pds.vue'
+import type { Meta, StoryObj } from '@storybook-vue/nuxt'
+import { pageDecorator } from '../../.storybook/decorators'
+import { pdsUsersHandler } from '../../.storybook/handlers'
+
+const meta = {
+  component: Pds,
+  parameters: {
+    layout: 'fullscreen',
+    msw: {
+      handlers: [pdsUsersHandler],
+    },
+  },
+  decorators: [pageDecorator],
+} satisfies Meta<typeof Pds>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** `/api/atproto/pds-users` is intercepted by MSW so the community section displays both avatar images and text-only entries. */
+export const Default: Story = {}
+
+/** Community section shows an empty/loading state with no API response. */
+export const WithoutUsers: Story = {
+  parameters: {
+    msw: {
+      handlers: [],
+    },
+  },
+}