fix watchTitle

src/lib/title.ts

@@ -0,0 +1,26 @@
+import { watch, type Ref } from "vue";
+import { useInstanceStore } from "../stores/instance";
+
+const watchTitle = <T>(callback: (obj: T) => string | undefined, obj: Ref<T> | undefined = undefined) => {
+	const instanceStore = useInstanceStore();
+	if (obj) {
+		watch(
+			() => ({ obj: obj.value, instanceName: instanceStore.instanceName }),
+			({ obj, instanceName }) => {
+				const text = obj ? callback(obj) : undefined;
+				document.title = text ? `${text} - ${instanceName}` : instanceName;
+			},
+			{ immediate: true },
+		);
+	} else {
+		watch(
+			() => instanceStore.instanceName,
+			(name) => {
+				document.title = name;
+			},
+			{ immediate: true },
+		);
+	}
+};
+
+export default watchTitle;

src/stores/instance.ts

@@ -13,6 +13,6 @@ export const useInstanceStore = defineStore("instance", {
 		},
 	},
 	getters: {
-		instanceName: (state) => state.instance?.title || "Akkoma",
+		instanceName: (state) => state.instance?.title || "vulpine-fe",
 	},
 });

src/stores/title.ts

@@ -1,17 +0,0 @@
-import { watch } from "vue";
-import { useInstanceStore } from "./instance";
-
-export default function watchTitle<T extends object | undefined>(
-	callback: (obj: T | undefined) => string | undefined,
-	obj: T | undefined = undefined,
-) {
-	const instanceStore = useInstanceStore();
-	watch(
-		() => ({ obj, instanceName: instanceStore.instanceName }),
-		({ obj, instanceName }) => {
-			const text = callback(obj);
-			document.title = text ? `${text} - ${instanceName}` : instanceName;
-		},
-		{ immediate: true },
-	);
-}

src/views/HomeView.vue

@@ -1,15 +1,8 @@
 <script setup lang="ts">
-import { watch } from "vue";
 import { FwbDropdown, FwbListGroup, FwbListGroupItem } from "flowbite-vue";
-import { useInstanceStore } from "@/stores/instance";
+import watchTitle from "@/lib/title";
 
-const instanceStore = useInstanceStore();
+watchTitle(() => "Home");
-
-watch(
-	() => instanceStore.instanceName,
-	(name) => document.title = `Home - ${name}`,
-	{ immediate: true },
-)
 </script>
 
 <template>

src/views/LoginView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import watchTitle from "@/lib/title";
 import apiFetch from "@/lib/api-fetch";
 import { useAccountStore } from "@/stores/account";
 import { useAppStore } from "@/stores/application";
@@ -63,6 +64,8 @@ const verifyMfa = async () => {
 	userStore.setToken(token.access_token);
 	await userStore.fetchUser();
 };
+
+watchTitle(() => "Login");
 </script>
 
 <template>

src/views/StatusView.vue

@@ -7,10 +7,8 @@ import apiFetch from "@/lib/api-fetch";
 
 import { FwbSpinner } from "flowbite-vue";
 import VulStatus from "@/components/status/VulStatus.vue";
-import { useInstanceStore } from "@/stores/instance";
+import watchTitle from "@/lib/title";
-import watchTitle from "@/stores/title";
 
-const instanceStore = useInstanceStore();
 const router = useRouter();
 const route = useRoute();
 const username = ref(route.params.username);
@@ -45,23 +43,7 @@ watchTitle((activity) => {
 	const user = activity.account.display_name;
 	let text = activity.spoiler_text || activity.content || "N/A";
 	return `${user}: "${text.length > 29 ? text.slice(0, 30) + "…" : text}"`;
-}, data.value);
+}, data);
-
-// update page title based on the post's content
-// watch(
-// 	() => ({ activity: data.value, instanceName: instanceStore.instanceName }),
-// 	({ activity, instanceName }) => {
-// 		if (!activity) {
-// 			document.title = `Status - ${instanceName}`;
-// 			return;
-// 		}
-
-// 		const user = activity.account.display_name;
-// 		let text = activity.spoiler_text || activity.content || "N/A";
-// 		document.title = `${user}: "${text.length > 29 ? text.slice(0, 30) + "…" : text}" - ${instanceName}`;
-// 	},
-// 	{ immediate: true },
-// );
 </script>
 
 <template>