0.2.78

admin-ui/src/lib/hooks.ts

@@ -154,3 +154,28 @@ export function useSorted<T>(
     });
   }, [rows, key, direction]);
 }
+
+/* The product name every tab is suffixed with. It is deliberately not "Memby admin", which
+ * is what the pre-mount title in index.html says: that one is a placeholder for the moment
+ * before the console knows which page it is on, and these are real page names that already
+ * say the console is what they belong to. */
+const TITLE_SUFFIX = 'Memby';
+
+/** useDocumentTitle names the browser tab after the page.
+ *
+ *  It is called from PageHead rather than from each page, because PageHead is already the
+ *  one component that states a page's name and every route renders exactly one of them —
+ *  so the tab and the heading cannot come apart, and a page added tomorrow is titled
+ *  without anybody remembering to do it. That also means the dynamic pages are named after
+ *  the thing they are about ("Kitchen TV | Memby") rather than after their route.
+ *
+ *  Nothing is restored on unmount: the next page's PageHead sets the title in the same
+ *  commit, and clearing it first would blink the product name into the tab between every
+ *  navigation. A blank name falls back to the suffix alone rather than printing a bare
+ *  separator. */
+export function useDocumentTitle(title: string): void {
+  useEffect(() => {
+    const name = title.trim();
+    document.title = name ? `${name} | ${TITLE_SUFFIX}` : TITLE_SUFFIX;
+  }, [title]);
+}