add favicon

packages/frontend/src/composables/usePageTitle.ts

@@ -0,0 +1,32 @@
+import {
+  onActivated,
+  onMounted,
+  toValue,
+  watch,
+  type MaybeRefOrGetter,
+} from 'vue';
+import { APP_DISPLAY_NAME } from '@/config/app';
+import { faviconHrefFor, setFavicon } from '@/config/favicons';
+
+export function formatPageTitle(filename?: string | null): string {
+  const name = filename?.trim();
+  return name ? `${name} - ${APP_DISPLAY_NAME}` : APP_DISPLAY_NAME;
+}
+
+/**
+ * Sets `document.title` to `filename - Sejong Office` (or just the app name)
+ * and swaps the favicon by file extension (home icon when no file).
+ */
+export function usePageTitle(
+  filename: MaybeRefOrGetter<string | null | undefined> = null,
+) {
+  function apply() {
+    const name = toValue(filename);
+    document.title = formatPageTitle(name);
+    setFavicon(faviconHrefFor(name));
+  }
+
+  watch(() => toValue(filename), apply, { immediate: true });
+  onMounted(apply);
+  onActivated(apply);
+}