feat(frontend): show indicator in document title for background changes

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

frontend/src/hooks/common/use-is-document-visible.spec.tsx

@@ -0,0 +1,24 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { useIsDocumentVisible } from './use-is-document-visible'
+import { fireEvent, render } from '@testing-library/react'
+import React, { Fragment } from 'react'
+
+describe('use is document visible', () => {
+  const TestComponent: React.FC = () => {
+    const visible = useIsDocumentVisible()
+    return <Fragment>{String(visible)}</Fragment>
+  }
+
+  it('returns the correct value', () => {
+    const view = render(<TestComponent />)
+    expect(view.container.textContent).toBe('true')
+    fireEvent(window, new Event('blur'))
+    expect(view.container.textContent).toBe('false')
+    fireEvent(window, new Event('focus'))
+    expect(view.container.textContent).toBe('true')
+  })
+})

frontend/src/hooks/common/use-is-document-visible.ts

@@ -0,0 +1,28 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { useEffect, useState } from 'react'
+
+/**
+ * Uses the browsers visiblity API to determine if the tab is active or now.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
+ */
+export const useIsDocumentVisible = (): boolean => {
+  const [documentVisible, setDocumentVisible] = useState(true)
+
+  useEffect(() => {
+    const onFocus = () => setDocumentVisible(true)
+    const onBlur = () => setDocumentVisible(false)
+    window.addEventListener('focus', onFocus)
+    window.addEventListener('blur', onBlur)
+    return () => {
+      document.removeEventListener('focus', onFocus)
+      document.removeEventListener('blur', onBlur)
+    }
+  }, [])
+
+  return documentVisible
+}