From 4590b7b8aa19a6160d462c07db9714ad382bd0c0 Mon Sep 17 00:00:00 2001
From: sam <sam@sleepycat.moe>
Date: Wed, 20 Dec 2023 17:45:01 +0100
Subject: [PATCH] fix watchTitle

---
 src/lib/title.ts         | 26 ++++++++++++++++++++++++++
 src/stores/instance.ts   |  2 +-
 src/stores/title.ts      | 17 -----------------
 src/views/HomeView.vue   | 11 ++---------
 src/views/LoginView.vue  |  3 +++
 src/views/StatusView.vue | 22 ++--------------------
 6 files changed, 34 insertions(+), 47 deletions(-)
 create mode 100644 src/lib/title.ts
 delete mode 100644 src/stores/title.ts

diff --git a/src/lib/title.ts b/src/lib/title.ts
new file mode 100644
index 0000000..df34d30
--- /dev/null
+++ b/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;
diff --git a/src/stores/instance.ts b/src/stores/instance.ts
index c035ec6..4c3902c 100644
--- a/src/stores/instance.ts
+++ b/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",
 	},
 });
diff --git a/src/stores/title.ts b/src/stores/title.ts
deleted file mode 100644
index e05e9b6..0000000
--- a/src/stores/title.ts
+++ /dev/null
@@ -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 },
-	);
-}
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 0efeacd..e4ba00a 100644
--- a/src/views/HomeView.vue
+++ b/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();
-
-watch(
-	() => instanceStore.instanceName,
-	(name) => document.title = `Home - ${name}`,
-	{ immediate: true },
-)
+watchTitle(() => "Home");
 </script>
 
 <template>
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 9d90a42..5d27720 100644
--- a/src/views/LoginView.vue
+++ b/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>
diff --git a/src/views/StatusView.vue b/src/views/StatusView.vue
index 600dc86..da3e6fc 100644
--- a/src/views/StatusView.vue
+++ b/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 "@/stores/title";
+import watchTitle from "@/lib/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);
-
-// 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 },
-// );
+}, data);
 </script>
 
 <template>