add broken status page

src/components/status/VulStatus.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type Activity from "@/lib/api/entities/activity";
+
+defineProps<{ status: Activity }>();
+</script>
+
+<template>
+	<div class="flex flex-row">
+		<div class="flex flex-row flex-grow">
+			<RouterLink :to="`/@${status.account.acct}`">
+				<img
+					class="rounded-full m-2"
+					:src="status.account.avatar"
+					width="64"
+					alt="Avatar for {{ status.account.acct }}"
+					title="Avatar for {{ status.account.acct }}"
+				/>
+			</RouterLink>
+			<div class="flex flex-col my-1">
+				<h2 className="text-lg font-bold">
+					<RouterLink :to="`/@${status.account.acct}`">
+						{{ status.account.display_name }}
+					</RouterLink>
+				</h2>
+				<h3 className="text-base font-light">
+					<RouterLink :to="`/@${status.account.acct}`"> @{{ status.account.acct }} </RouterLink>
+				</h3>
+			</div>
+		</div>
+		<div class="my-1 flex flex-row">
+			<span>
+				<span title="{t(statusScopeKey(status))}" aria-hidden="true">
+					<!-- <StatusScopeIcon status="{status}" /> -->
+					Public
+				</span>
+				<span class="sr-only">{t(statusScopeKey(status))}</span>
+			</span>
+			<RouterLink :to="`/@${status.account.acct}/statuses/${status.id}`">
+				{humanizeDuration(time)}
+			</RouterLink>
+		</div>
+	</div>
+</template>

src/lib/api/entities/activity.ts

@@ -0,0 +1,25 @@
+import type { Account } from "./account";
+
+export default interface Activity {
+	id: string;
+	account: Account;
+	akkoma?: ActivityAkkoma;
+	created_at: string;
+
+	content: string | null;
+	spoiler_text: string | null;
+	visibility: "public" | "unlisted" | "private" | "direct";
+
+	reblogs_count: number;
+	favourites_count: number;
+	replies_count: number;
+}
+
+export interface ActivityAkkoma {
+	source: ActivityAkkomaSource;
+}
+
+export interface ActivityAkkomaSource {
+	content: string;
+	mediaType: string;
+}

src/router/index.ts

@@ -14,6 +14,11 @@ const router = createRouter({
 			name: "auth-login",
 			component: () => import("../views/LoginView.vue"),
 		},
+		{
+			path: "/@:username/statuses/:statusId",
+			name: "user-status",
+			component: () => import("../views/StatusView.vue"),
+		},
 	],
 });
 

src/views/StatusView.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import useSWRV from "swrv";
+import type Activity from "@/lib/api/entities/activity";
+import apiFetch from "@/lib/api-fetch";
+
+import { FwbSpinner } from "flowbite-vue";
+import VulStatus from "@/components/status/VulStatus.vue";
+
+const router = useRouter();
+const route = useRoute();
+const username = ref(route.params.username);
+const statusId = ref(route.params.statusId);
+
+const { data, error } = useSWRV(() => `/api/v1/statuses/${statusId.value}`, apiFetch<Activity>);
+
+watch(
+	() => [route.params.username, route.params.statusId],
+	([newUsername, newId]) => {
+		username.value = newUsername as string;
+		statusId.value = newId as string;
+	},
+);
+
+watch(
+	() => ({ activity: data.value, username: route.params.username }),
+	({ activity, username }) => {
+		if (activity && activity.account.acct !== username) {
+			router.push({
+				name: "user-status",
+				params: { username: activity.account.acct, statusId: activity.id },
+			});
+		}
+	},
+);
+</script>
+<template>
+	<div v-if="error">Failed to load: {{ error }}</div>
+	<FwbSpinner v-else-if="!data" size="10" />
+	<VulStatus v-else :status="data" />
+</template>