From 120df2d8b59c50ca104e83f264193af2aacdd125 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Mon, 22 Apr 2024 00:01:18 +0800
Subject: [PATCH] feat: add layout header which ensure title of page is correct

---
 src/client/pages/Layout/Header.tsx | 18 ++++++++++++++++++
 src/client/routes/__root.tsx       |  3 +++
 src/client/routes/status/$slug.tsx |  1 -
 3 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 src/client/pages/Layout/Header.tsx

diff --git a/src/client/pages/Layout/Header.tsx b/src/client/pages/Layout/Header.tsx
new file mode 100644
index 0000000..e399a9c
--- /dev/null
+++ b/src/client/pages/Layout/Header.tsx
@@ -0,0 +1,18 @@
+import { useUserInfo } from '@/store/user';
+import React from 'react';
+import { Helmet } from 'react-helmet';
+
+export const LayoutHeader: React.FC = React.memo(() => {
+  const userInfo = useUserInfo();
+  let title = 'Tianji - Insight into everything';
+  if (userInfo) {
+    title = userInfo.currentWorkspace.name + ' | ' + title;
+  }
+
+  return (
+    <Helmet>
+      <title>{title}</title>
+    </Helmet>
+  );
+});
+LayoutHeader.displayName = 'LayoutHeader';
diff --git a/src/client/routes/__root.tsx b/src/client/routes/__root.tsx
index 70ab131..6f0f9d0 100644
--- a/src/client/routes/__root.tsx
+++ b/src/client/routes/__root.tsx
@@ -1,3 +1,4 @@
+import { LayoutHeader } from '@/pages/Layout/Header';
 import { createRootRouteWithContext, Outlet } from '@tanstack/react-router';
 // import { TanStackRouterDevtools } from '@tanstack/router-devtools';
 import { Suspense } from 'react';
@@ -12,6 +13,8 @@ export const Route = createRootRouteWithContext<RouterContext>()({
     return (
       // https://github.com/TanStack/router/issues/857
       <Suspense fallback={null}>
+        <LayoutHeader />
+
         <Outlet />
 
         {/* <TanStackRouterDevtools position="bottom-right" /> */}
diff --git a/src/client/routes/status/$slug.tsx b/src/client/routes/status/$slug.tsx
index 65b24b6..88dce9d 100644
--- a/src/client/routes/status/$slug.tsx
+++ b/src/client/routes/status/$slug.tsx
@@ -3,7 +3,6 @@ import { ErrorTip } from '@/components/ErrorTip';
 import { Loading } from '@/components/Loading';
 import { NotFoundTip } from '@/components/NotFoundTip';
 import { MonitorStatusPage } from '@/components/monitor/StatusPage';
-import { Button } from '@/components/ui/button';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/status/$slug')({