From 6089a109ffde47327435b6a7b13b48d657db7b1d Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Fri, 20 Feb 2026 11:52:28 +0100
Subject: [PATCH] refactor: extract PublicNoteList shared component

Move the duplicated <ul> + infinite scroll + note row markup into a
new PublicNoteList component with a #meta scoped slot. Both list views
now delegate rendering to it, supplying only their view-specific
author/date markup via the slot.
---
 src/components/PublicNoteList.vue     | 65 ++++++++++++++++++++
 src/views/PublicNoteListByDidView.vue | 60 ++++---------------
 src/views/PublicNoteListView.vue      | 86 +++++++--------------------
 3 files changed, 99 insertions(+), 112 deletions(-)
 create mode 100644 src/components/PublicNoteList.vue

diff --git a/src/components/PublicNoteList.vue b/src/components/PublicNoteList.vue
new file mode 100644
index 0000000..952f98b
--- /dev/null
+++ b/src/components/PublicNoteList.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { PublicNoteListItem } from "@/modules/note/models/Note"
+import { slugify } from "@/utils/slugify"
+import { vInfiniteScroll } from "@vueuse/components"
+
+defineProps<{
+  notes: PublicNoteListItem[]
+  canLoadMore: boolean
+  onLoadMore: () => Promise<void>
+}>()
+
+defineSlots<{
+  meta(props: { note: PublicNoteListItem }): unknown
+}>()
+</script>
+
+<template>
+  <ul
+    class="list rounded-box shadow-sm"
+    v-infinite-scroll="[onLoadMore, { canLoadMore: () => canLoadMore }]"
+  >
+    <li v-for="note in notes" class="list-row">
+      <div class="list-col">
+        <router-link
+          :to="{
+            name: 'PublicNoteView',
+            params: {
+              did: note.did,
+              rkey: note.rkey,
+              slug: slugify(note.title),
+            },
+          }"
+          class="btn btn-link"
+          >{{ note.title }}</router-link
+        >
+        <div class="text-xs opacity-80 alias">
+          <slot name="meta" :note="note" />
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<style scoped lang="scss">
+li {
+  display: flex;
+
+  .list-col {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  a {
+    display: inline;
+    text-align: left;
+  }
+
+  .alias {
+    text-align: right;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>
diff --git a/src/views/PublicNoteListByDidView.vue b/src/views/PublicNoteListByDidView.vue
index 5f0b488..360ef86 100644
--- a/src/views/PublicNoteListByDidView.vue
+++ b/src/views/PublicNoteListByDidView.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import BackButton from "@/components/BackButton.vue"
+import PublicNoteList from "@/components/PublicNoteList.vue"
 import { usePublicNoteList } from "@/hooks/usePublicNoteList.hook"
 import { getAuthor } from "@/modules/atproto/getAuthor"
-import { slugify } from "@/utils/slugify"
 import { computedAsync } from "@vueuse/core"
 import { computed } from "vue"
-import { vInfiniteScroll } from "@vueuse/components"
 
 const props = defineProps<{ did: string }>()
 const did = computed(() => props.did)
@@ -23,33 +22,17 @@ const author = computedAsync(async () => getAuthor(did.value))
     </div>
     <div v-if="isLoading"></div>
     <div v-else>
-      <ul
-        class="list rounded-box shadow-sm"
-        v-infinite-scroll="[onLoadMore, { canLoadMore: () => canLoadMore }]"
+      <PublicNoteList
+        :notes="notes"
+        :can-load-more="canLoadMore"
+        :on-load-more="onLoadMore"
       >
-        <li v-for="note in notes" class="list-row">
-          <div class="list-col">
-            <router-link
-              :to="{
-                name: 'PublicNoteView',
-                params: {
-                  did: note.did,
-                  rkey: note.rkey,
-                  slug: slugify(note.title),
-                },
-              }"
-              class="btn btn-link"
-              >{{ note.title }}</router-link
-            >
-
-            <div class="text-xs opacity-80 alias">
-              <span v-if="note.publishedAt">
-                {{ new Date(note.publishedAt).toLocaleDateString() }}
-              </span>
-            </div>
-          </div>
-        </li>
-      </ul>
+        <template #meta="{ note }">
+          <span v-if="note.publishedAt">
+            {{ new Date(note.publishedAt).toLocaleDateString() }}
+          </span>
+        </template>
+      </PublicNoteList>
     </div>
   </main>
 </template>
@@ -81,27 +64,6 @@ const author = computedAsync(async () => getAuthor(did.value))
     align-items: center;
   }
 
-  li {
-    display: flex;
-
-    .list-col {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-    }
-
-    a {
-      display: inline;
-      text-align: left;
-    }
-
-    .alias {
-      text-align: right;
-      display: flex;
-      justify-content: flex-end;
-    }
-  }
-
   @media screen and (min-width: 769px) {
     overflow-y: auto;
   }
diff --git a/src/views/PublicNoteListView.vue b/src/views/PublicNoteListView.vue
index 1d7db0a..90d39d4 100644
--- a/src/views/PublicNoteListView.vue
+++ b/src/views/PublicNoteListView.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import BackButton from "@/components/BackButton.vue"
+import PublicNoteList from "@/components/PublicNoteList.vue"
 import { usePublicNoteList } from "@/hooks/usePublicNoteList.hook"
-import { slugify } from "@/utils/slugify"
-import { vInfiniteScroll } from "@vueuse/components"
 
 const { notes, isLoading, canLoadMore, onLoadMore, getAuthor } =
   usePublicNoteList()
@@ -16,48 +15,30 @@ const { notes, isLoading, canLoadMore, onLoadMore, getAuthor } =
     </div>
     <div v-if="isLoading"></div>
     <div v-else>
-      <ul
-        class="list rounded-box shadow-sm"
-        v-infinite-scroll="[onLoadMore, { canLoadMore: () => canLoadMore }]"
+      <PublicNoteList
+        :notes="notes"
+        :can-load-more="canLoadMore"
+        :on-load-more="onLoadMore"
       >
-        <li v-for="note in notes" class="list-row">
-          <div class="list-col">
-            <router-link
-              :to="{
-                name: 'PublicNoteView',
-                params: {
-                  did: note.did,
-                  rkey: note.rkey,
-                  slug: slugify(note.title),
-                },
-              }"
-              class="btn btn-link"
-              >{{ note.title }}</router-link
-            >
+        <template #meta="{ note }">
+          <router-link
+            v-if="getAuthor(note.did)"
+            :to="{
+              name: 'PublicNoteListByDidView',
+              params: { did: note.did },
+            }"
+            class="link link-hover"
+          >
+            {{ getAuthor(note.did) }}
+          </router-link>
 
-            <div class="text-xs opacity-80 alias">
-              <router-link
-                v-if="getAuthor(note.did)"
-                :to="{
-                  name: 'PublicNoteListByDidView',
-                  params: { did: note.did },
-                }"
-                class="link link-hover"
-              >
-                {{ getAuthor(note.did) }}
-              </router-link>
-
-              <template v-if="note.publishedAt">
-                <span>&nbsp;•&nbsp;</span>
-                <span>{{
-                  new Date(note.publishedAt).toLocaleDateString()
-                }}</span>
-              </template>
-              <div v-else class="skeleton h-4 w-20"></div>
-            </div>
-          </div>
-        </li>
-      </ul>
+          <template v-if="note.publishedAt">
+            <span>&nbsp;•&nbsp;</span>
+            <span>{{ new Date(note.publishedAt).toLocaleDateString() }}</span>
+          </template>
+          <div v-else class="skeleton h-4 w-20"></div>
+        </template>
+      </PublicNoteList>
     </div>
   </main>
 </template>
@@ -89,27 +70,6 @@ const { notes, isLoading, canLoadMore, onLoadMore, getAuthor } =
     align-items: center;
   }
 
-  li {
-    display: flex;
-
-    .list-col {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-    }
-
-    a {
-      display: inline;
-      text-align: left;
-    }
-
-    .alias {
-      text-align: right;
-      display: flex;
-      justify-content: flex-end;
-    }
-  }
-
   @media screen and (min-width: 769px) {
     overflow-y: auto;
   }