feat(ui): add customizable HTML page title

internal/server/setting.go

@@ -48,6 +48,7 @@ type Customize struct {
 	DisableKillCount bool              `json:"disableKillCount" yaml:"disableKillCount"`
 	HeaderTitle      string            `json:"headerTitle" yaml:"headerTitle"`
 	HeaderSubtitle   string            `json:"headerSubtitle" yaml:"headerSubtitle"`
+	PageTitle        string            `json:"pageTitle" yaml:"pageTitle"`
 	CSSOverrides     map[string]string `json:"cssOverrides,omitempty" yaml:"cssOverrides"`
 }
 
@@ -108,6 +109,7 @@ func NewSetting() (setting Setting, err error) {
 	viper.SetDefault("customize.disableKillCount", false)
 	viper.SetDefault("customize.headerTitle", "")
 	viper.SetDefault("customize.headerSubtitle", "")
+	viper.SetDefault("customize.pageTitle", "")
 	viper.SetDefault("conversion.enabled", false)
 	viper.SetDefault("conversion.interval", "5m")
 	viper.SetDefault("conversion.batchSize", 1)

setting.json.example

@@ -15,6 +15,7 @@
 		"enabled": false,
 		"headerSubtitle": "",
 		"headerTitle": "",
+		"pageTitle": "",
 		"websiteLogo": "",
 		"websiteLogoSize": "32px",
 		"websiteURL": "",

ui/src/data/apiClient.ts

@@ -22,6 +22,7 @@ export interface CustomizeConfig {
   disableKillCount?: boolean;
   headerTitle?: string;
   headerSubtitle?: string;
+  pageTitle?: string;
   cssOverrides?: Record<string, string>;
 }
 

ui/src/hooks/__tests__/useCustomize.test.tsx

@@ -149,6 +149,105 @@ describe("useCustomize", () => {
     expect(parsed.websiteURL).toBeUndefined();
   });
 
+  it("applies pageTitle to document.title and restores on unmount", async () => {
+    const originalTitle = document.title;
+    document.title = "OCAP2";
+
+    mockGetCustomize.mockResolvedValue({
+      enabled: true,
+      pageTitle: "Custom Server Title",
+    });
+
+    const { unmount } = render(() => (
+      <CustomizeProvider>
+        <div>test</div>
+      </CustomizeProvider>
+    ));
+
+    await vi.waitFor(() => {
+      expect(document.title).toBe("Custom Server Title");
+    });
+
+    unmount();
+    expect(document.title).toBe("OCAP2");
+
+    document.title = originalTitle;
+  });
+
+  it("does not override document.title when pageTitle is empty", async () => {
+    const originalTitle = document.title;
+    document.title = "OCAP2";
+
+    mockGetCustomize.mockResolvedValue({
+      enabled: true,
+      pageTitle: "",
+    });
+
+    const { unmount } = render(() => (
+      <CustomizeProvider>
+        <div>test</div>
+      </CustomizeProvider>
+    ));
+
+    await new Promise((r) => setTimeout(r, 10));
+    expect(document.title).toBe("OCAP2");
+
+    unmount();
+    expect(document.title).toBe("OCAP2");
+
+    document.title = originalTitle;
+  });
+
+  it("does not mutate document.title if unmounted before API resolves", async () => {
+    const originalTitle = document.title;
+    document.title = "OCAP2";
+
+    let resolveCustomize: (value: CustomizeConfig) => void = () => {};
+    mockGetCustomize.mockReturnValue(
+      new Promise<CustomizeConfig>((resolve) => {
+        resolveCustomize = resolve;
+      }),
+    );
+
+    const { unmount } = render(() => (
+      <CustomizeProvider>
+        <div>test</div>
+      </CustomizeProvider>
+    ));
+
+    unmount();
+    resolveCustomize({ enabled: true, pageTitle: "Should Not Apply" });
+
+    await new Promise((r) => setTimeout(r, 10));
+    expect(document.title).toBe("OCAP2");
+
+    document.title = originalTitle;
+  });
+
+  it("does not apply cssOverrides if unmounted before API resolves", async () => {
+    let resolveCustomize: (value: CustomizeConfig) => void = () => {};
+    mockGetCustomize.mockReturnValue(
+      new Promise<CustomizeConfig>((resolve) => {
+        resolveCustomize = resolve;
+      }),
+    );
+
+    const { unmount } = render(() => (
+      <CustomizeProvider>
+        <div>test</div>
+      </CustomizeProvider>
+    ));
+
+    unmount();
+    resolveCustomize({
+      enabled: true,
+      cssOverrides: { "--accent-primary": "#ff0000" },
+    });
+
+    await new Promise((r) => setTimeout(r, 10));
+    expect(document.documentElement.style.getPropertyValue("--accent-primary")).toBe("");
+  });
+
   it("cleans up applied properties on unmount", async () => {
     mockGetCustomize.mockResolvedValue({
       enabled: true,

ui/src/hooks/useCustomize.tsx

@@ -14,11 +14,15 @@ export function CustomizeProvider(props: {
 }): JSX.Element {
   const [config, setConfig] = createSignal<CustomizeConfig>({});
   let appliedProps: string[] = [];
+  const originalTitle = document.title;
+  let titleOverridden = false;
+  let mounted = true;
 
   onMount(async () => {
     try {
       const api = new ApiClient();
       const data = await api.getCustomize();
+      if (!mounted) return;
       if (!data.enabled) {
         // disableKillCount is a privacy toggle, not a branding option, so
         // honor it even when customize itself is not enabled.
@@ -29,6 +33,11 @@ export function CustomizeProvider(props: {
       }
       setConfig(data);
 
+      if (data.pageTitle) {
+        document.title = data.pageTitle;
+        titleOverridden = true;
+      }
+
       // Apply CSS variable overrides to :root
       if (data.cssOverrides) {
         const style = document.documentElement.style;
@@ -45,11 +54,16 @@ export function CustomizeProvider(props: {
   });
 
   onCleanup(() => {
+    mounted = false;
     const style = document.documentElement.style;
     for (const prop of appliedProps) {
       style.removeProperty(prop);
     }
     appliedProps = [];
+    if (titleOverridden) {
+      document.title = originalTitle;
+      titleOverridden = false;
+    }
   });
 
   return (