fix: update document title and favicon in client side

web/app/activate/activateForm.tsx

@@ -7,8 +7,10 @@ import Button from '@/app/components/base/button'
 
 import { invitationCheck } from '@/service/common'
 import Loading from '@/app/components/base/loading'
+import useDocumentTitle from '@/hooks/use-document-title'
 
 const ActivateForm = () => {
+  useDocumentTitle('')
   const router = useRouter()
   const { t } = useTranslation()
   const searchParams = useSearchParams()

web/app/forgot-password/page.tsx

@@ -6,8 +6,10 @@ import Header from '../signin/_header'
 import style from '../signin/page.module.css'
 import ForgotPasswordForm from './ForgotPasswordForm'
 import ChangePasswordForm from '@/app/forgot-password/ChangePasswordForm'
+import useDocumentTitle from '@/hooks/use-document-title'
 
 const ForgotPassword = () => {
+  useDocumentTitle('')
   const searchParams = useSearchParams()
   const token = searchParams.get('token')
 

web/app/init/InitPasswordPopup.tsx

@@ -7,8 +7,10 @@ import Loading from '../components/base/loading'
 import Button from '@/app/components/base/button'
 import { fetchInitValidateStatus, initValidate } from '@/service/common'
 import type { InitValidateStatusResponse } from '@/models/common'
+import useDocumentTitle from '@/hooks/use-document-title'
 
 const InitPasswordPopup = () => {
+  useDocumentTitle('')
   const [password, setPassword] = useState('')
   const [loading, setLoading] = useState(true)
   const [validated, setValidated] = useState(false)

web/app/install/installForm.tsx

@@ -15,6 +15,7 @@ import Button from '@/app/components/base/button'
 
 import { fetchInitValidateStatus, fetchSetupStatus, setup } from '@/service/common'
 import type { InitValidateStatusResponse, SetupStatusResponse } from '@/models/common'
+import useDocumentTitle from '@/hooks/use-document-title'
 
 const validPassword = /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/
 
@@ -32,6 +33,7 @@ const accountFormSchema = z.object({
 type AccountFormValues = z.infer<typeof accountFormSchema>
 
 const InstallForm = () => {
+  useDocumentTitle('')
   const { t } = useTranslation()
   const router = useRouter()
   const [showPassword, setShowPassword] = React.useState(false)

web/app/layout.tsx

@@ -7,9 +7,6 @@ import { TanstackQueryIniter } from '@/context/query-client'
 import './styles/globals.css'
 import './styles/markdown.scss'
 import GlobalPublicStoreProvider from '@/context/global-public-context'
-import type { SystemFeatures } from '@/types/feature'
-import { defaultSystemFeatures } from '@/types/feature'
-import { API_PREFIX } from '@/config'
 
 export const viewport: Viewport = {
   width: 'device-width',
@@ -18,22 +15,9 @@ export const viewport: Viewport = {
   viewportFit: 'cover',
   userScalable: false,
 }
-
-export async function generateMetadata(): Promise<Metadata> {
-  const ret = await fetch(`${API_PREFIX}/system-features`, { cache: 'no-cache' }).then(res => res.json())
-  const config: SystemFeatures = { ...defaultSystemFeatures, ...ret.data }
-  if (config.branding.enabled) {
-    return {
-      title: { template: `%s - ${config.branding.application_title}`, default: config.branding.application_title },
-      icons: config.branding.favicon,
-    }
-  }
-  return {
-    title: {
-      template: '%s - Dify',
-      default: 'Dify',
-    },
-  }
+export const metadata: Metadata = {
+  title: ' ',
+  icons: 'data:',
 }
 
 const LocaleLayout = ({

web/app/reset-password/page.tsx

@@ -12,9 +12,11 @@ import Input from '@/app/components/base/input'
 import Toast from '@/app/components/base/toast'
 import { sendResetPasswordCode } from '@/service/common'
 import I18NContext from '@/context/i18n'
+import useDocumentTitle from '@/hooks/use-document-title'
 
 export default function CheckCode() {
   const { t } = useTranslation()
+  useDocumentTitle('')
   const searchParams = useSearchParams()
   const router = useRouter()
   const [email, setEmail] = useState('')

web/app/signin/layout.tsx

@@ -4,9 +4,11 @@ import style from './page.module.css'
 
 import cn from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
+import useDocumentTitle from '@/hooks/use-document-title'
 
 export default function SignInLayout({ children }: any) {
   const { systemFeatures } = useGlobalPublicStore()
+  useDocumentTitle('')
   return <>
     <div className={cn(
       style.background,

web/hooks/use-document-title.ts

@@ -5,9 +5,14 @@ import { useGlobalPublicStore } from '@/context/global-public-context'
 export default function useDocumentTitle(title: string) {
   const { systemFeatures } = useGlobalPublicStore()
   useLayoutEffect(() => {
-    if (systemFeatures.branding.enabled)
-      document.title = `${title} - ${systemFeatures.branding.application_title}`
-    else
-      document.title = `${title} - Dify`
+    const prefix = title ? `${title} - ` : ''
+    if (systemFeatures.branding.enabled) {
+      document.title = `${prefix}${systemFeatures.branding.application_title}`
+      const faviconEle = document.querySelector('link[rel*=\'icon\']') as HTMLLinkElement
+      faviconEle.href = systemFeatures.branding.favicon
+    }
+    else {
+      document.title = `${prefix}Dify`
+    }
   }, [systemFeatures, title])
 }