From 9e22f42a3d3a781f448ddac9d133292fe103bb8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?X=C3=AC=20G=C3=A0?= <vandug23@gmail.com>
Date: Fri, 27 Feb 2026 22:51:26 +0700
Subject: [PATCH] feat: update document title based on selected project (#448)

Show dynamic browser tab title based on selected project's name, post-fixed with "CloudCLI UI" when a project is selected, improving navigation across tabs.
---
 .../sidebar/view/subcomponents/SidebarProjectList.tsx  | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/sidebar/view/subcomponents/SidebarProjectList.tsx b/src/components/sidebar/view/subcomponents/SidebarProjectList.tsx
index 55710638..1e1dbd55 100644
--- a/src/components/sidebar/view/subcomponents/SidebarProjectList.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarProjectList.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import type { TFunction } from 'i18next';
 import type { LoadingProgress, Project, ProjectSession, SessionProvider } from '../../../../types/app';
 import type {
@@ -103,6 +104,15 @@ export default function SidebarProjectList({
     />
   );
 
+  useEffect(() => {
+    let baseTitle = 'CloudCLI UI';
+    const displayName = selectedProject?.displayName?.trim();
+    if (displayName) {
+      baseTitle = `${displayName} - ${baseTitle}`;
+    }
+    document.title = baseTitle;
+  }, [selectedProject]);
+
   const showProjects = !isLoading && projects.length > 0 && filteredProjects.length > 0;
 
   return (