screaming

src/stores/counter.ts

@@ -1,12 +0,0 @@
-import { ref, computed } from "vue";
-import { defineStore } from "pinia";
-
-export const useCounterStore = defineStore("counter", () => {
-	const count = ref(0);
-	const doubleCount = computed(() => count.value * 2);
-	function increment() {
-		count.value++;
-	}
-
-	return { count, doubleCount, increment };
-});

src/stores/instance.ts

@@ -0,0 +1,18 @@
+import apiFetch from "@/lib/api-fetch";
+import type Instance from "@/lib/api/entities/instance";
+import { defineStore } from "pinia";
+
+export const useInstanceStore = defineStore("instance", {
+	state: () => ({
+		instance: undefined as Instance | undefined,
+	}),
+	actions: {
+		async fetchInstance() {
+			const resp = await apiFetch<Instance>("/api/v1/instance");
+			this.instance = resp;
+		},
+	},
+	getters: {
+		instanceName: (state) => state.instance?.title || "Akkoma",
+	},
+});

src/stores/title.ts

@@ -0,0 +1,17 @@
+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 },
+	);
+}