Rewrite PostRepliesList component in TS

src/components/misc/PostItem.vue

@@ -21,25 +21,20 @@
 				<PostAttachment v-for="(file, index) in post.attachments" :file="file" :key="index" />
 			</div>
 			<p v-if="post.text" v-html="parsedText" />
-			<ul class="replies" v-if="replies?.length">
-				Mentions:
-				<li v-for="reply of replies" :key="reply.href">
-					<RouterLink :to="reply.href">{{ reply.label }}</RouterLink>
-				</li>
-			</ul>
+			<PostRepliesList v-if="post?.replies?.length > 0" :replies="post.replies" />
 		</div>
 	</article>
 </template>
 
 <script setup>
 	import { computed, inject, ref, watch } from "vue"
+	import { PostAttachment, PostMenu } from "@/components/misc"
 	import { truncateString, renderMarkup, getPrettyTimeDelta } from "@/utils"
 	import { usePostMarksStore } from "@/stores/postMarks"
-	import { useRouter, useRoute } from "vue-router"
+	import { useRouter } from "vue-router"
 	import { useSettingsStore } from "@/stores/settings"
 	import { useStore } from "vuex"
-	import PostAttachment from "@/components/misc/PostAttachment"
-	import PostMenu from "@/components/misc/PostMenu"
+	import PostRepliesList from "./PostRepliesList"
 
 	const API = inject("API")
 	const props = defineProps({
@@ -54,7 +49,6 @@
 	})
 
 	const postMarksStore = usePostMarksStore()
-	const route = useRoute()
 	const router = useRouter()
 	const settings = useSettingsStore()
 	const store = useStore()
@@ -100,15 +94,6 @@
 	if (undefined === post.value) {
 		API.post.request({ postId: props.postId })
 	}
-
-	const replies = computed(() => (
-		post.value?.replies?.map(reply => ({
-			href: `/${reply.boardName}/${reply.threadId}`,
-			label: route.params.boardName === reply.boardName
-				? `#${reply.number}`
-				: `#/${reply.boardName}/${reply.number}`
-		}))
-	))
 </script>
 
 <style scoped lang="scss">
@@ -159,14 +144,5 @@
 			vertical-align: middle;
 			height: 1.3em;
 		}
-
-		.replies {
-			display: flex;
-			font-size: 0.85em;
-			gap: 0.5em;
-			list-style: none;
-			margin: 1em 0 0 0;
-			padding: 0;
-		}
 	}
 </style>

src/components/misc/PostRepliesList.vue

@@ -0,0 +1,40 @@
+<template>
+	<ul :class="$style.root">
+		Mentions:
+		<li v-for="reply of processedReplies" :key="reply.href">
+			<RouterLink :to="reply.href">{{ reply.label }}</RouterLink>
+		</li>
+	</ul>
+</template>
+
+<script setup lang="ts">
+	import { computed } from "vue"
+	import { firstFromStringArrayOrString } from "@/utils"
+	import { useRoute } from "vue-router"
+	import type { Post } from "@/store"
+
+	const props = defineProps<{ replies: Post["replies"] }>()
+	const route = useRoute()
+
+	const processedReplies = computed(() => {
+		const currentBoardName = firstFromStringArrayOrString(route.params.boardName)
+
+		return props.replies.map(({ boardName, threadId, number }) => ({
+			href: `/${boardName}/${threadId}`,
+			label: boardName === currentBoardName
+				? `#${number}`
+				: `#/${boardName}/${number}`
+		}))
+	})
+</script>
+
+<style module>
+	.root {
+		display: flex;
+		font-size: 0.85em;
+		gap: 0.5em;
+		list-style: none;
+		margin: 1em 0 0 0;
+		padding: 0;
+	}
+</style>

src/components/misc/index.ts

@@ -1,2 +1,4 @@
 export { default as ModalShell } from "./ModalShell.vue"
+export { default as PostAttachment } from "./PostAttachment.vue"
+export { default as PostMenu } from "./PostMenu.vue"
 export { default as ToggleSwitch } from "./ToggleSwitch.vue"

src/store/index.ts

@@ -15,6 +15,11 @@ export type Post = {
 	id: number
 	number: number
 	threadId: Thread["id"]
+	replies: Array<{
+		boardName: Board["name"]
+		number: Post["number"]
+		threadId: Thread["id"]
+	}>
 }
 
 export type StoreState = {