From 70025e1e71929e04f3d448b477f54e47fc0670c2 Mon Sep 17 00:00:00 2001
From: Anders Olsson <anders.e.olsson@gmail.com>
Date: Sun, 7 Jun 2026 17:12:41 +0200
Subject: [PATCH] feat(web): useDocumentTitle hook (restores prior title on
 unmount) (#57)

---
 web/src/lib/use-document-title.test.tsx | 37 +++++++++++++++++++++++++
 web/src/lib/use-document-title.ts       | 19 +++++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 web/src/lib/use-document-title.test.tsx
 create mode 100644 web/src/lib/use-document-title.ts

diff --git a/web/src/lib/use-document-title.test.tsx b/web/src/lib/use-document-title.test.tsx
new file mode 100644
index 0000000..5ffe5a6
--- /dev/null
+++ b/web/src/lib/use-document-title.test.tsx
@@ -0,0 +1,37 @@
+import { afterEach, expect, test } from "vitest";
+import { render } from "@testing-library/react";
+import "../i18n";
+import { ConfigProvider } from "../config/config-provider";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useDocumentTitle } from "./use-document-title";
+
+function Titled({ page }: { page: string }) {
+  useDocumentTitle(page);
+  return null;
+}
+
+function wrap(ui: React.ReactElement) {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={qc}>
+      <ConfigProvider>{ui}</ConfigProvider>
+    </QueryClientProvider>,
+  );
+}
+
+afterEach(() => {
+  document.title = "";
+});
+
+test("sets document.title to '{page} | {app_name}'", () => {
+  wrap(<Titled page="Objects" />);
+  expect(document.title).toMatch(/^Objects \| .+/);
+});
+
+test("restores the previous title on unmount", () => {
+  document.title = "Prev";
+  const { unmount } = wrap(<Titled page="Objects" />);
+  expect(document.title).toMatch(/^Objects \| /);
+  unmount();
+  expect(document.title).toBe("Prev");
+});
diff --git a/web/src/lib/use-document-title.ts b/web/src/lib/use-document-title.ts
new file mode 100644
index 0000000..e0e413f
--- /dev/null
+++ b/web/src/lib/use-document-title.ts
@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+
+import { useConfig } from "../config/config-context";
+
+export function useDocumentTitle(page: string): void {
+  const { app_name } = useConfig();
+
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+
+    const previous = document.title;
+
+    document.title = `${page} | ${app_name}`;
+
+    return () => {
+      document.title = previous;
+    };
+  }, [page, app_name]);
+}