From f0fda145d9b27cc843798fb443b53503a47c79ff Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Fri, 10 Apr 2026 09:59:41 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20set=20explicit?=
 =?UTF-8?q?=20document=20title=20on=20recording=20download=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

RecordingDownload now updates the tab title per state
---
 CHANGELOG.md                                  |  1 +
 .../recording/routes/RecordingDownload.tsx    | 19 +++++++++++++++++++
 2 files changed, 20 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5f3bfd15..e2efddd1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,7 @@ and this project adheres to
 - 🥅(backend) refine Twirp error handling for participant operations
 - ✨(summary) allow more file extensions #1265
 - ♿️(frontend) refocus reactions toolbar with ctrl+shift+e is activated #1262
+- ♿️(frontend) set an explicit document title on recording download page #1261
 
 ### Fixed
 
diff --git a/src/frontend/src/features/recording/routes/RecordingDownload.tsx b/src/frontend/src/features/recording/routes/RecordingDownload.tsx
index 3974158e..e6f872b9 100644
--- a/src/frontend/src/features/recording/routes/RecordingDownload.tsx
+++ b/src/frontend/src/features/recording/routes/RecordingDownload.tsx
@@ -3,6 +3,8 @@ import { useQuery } from '@tanstack/react-query'
 import { Center, VStack } from '@/styled-system/jsx'
 import { css } from '@/styled-system/css'
 import { useTranslation } from 'react-i18next'
+import { useTitle } from 'hoofd'
+import { useMemo } from 'react'
 import { mediaUrl } from '@/api/mediaUrl'
 import { UserAware, useUser } from '@/features/auth'
 import { Screen } from '@/layout/Screen'
@@ -14,6 +16,8 @@ import { fetchRecording } from '../api/fetchRecording'
 import { RecordingStatus } from '@/features/recording'
 import { useConfig } from '@/api/useConfig'
 
+const APP_TITLE = import.meta.env.VITE_APP_TITLE ?? ''
+
 const BetaBadge = () => (
   <span
     className={css({
@@ -49,6 +53,21 @@ export const RecordingDownload = () => {
     enabled: !!recordingId,
   })
 
+  const isSaved =
+    data?.status === RecordingStatus.Saved ||
+    data?.status === RecordingStatus.NotificationSucceed ||
+    data?.status === RecordingStatus.FailedToStop
+
+  const pageTitle = useMemo(() => {
+    if (isError) return `${APP_TITLE} - ${t('error.title')}`
+    if (data && !isSaved) return `${APP_TITLE} - ${t('unsaved.title')}`
+    if (data?.is_expired) return `${APP_TITLE} - ${t('expired.title')}`
+    if (data && isSaved) return `${APP_TITLE} - ${t('success.title')}`
+    return APP_TITLE
+  }, [isError, data, isSaved, t])
+
+  useTitle(pageTitle)
+
   if (isLoggedIn === undefined || isAuthLoading) {
     return <LoadingScreen />
   }