feat: add layout header which ensure title of page is correct

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';

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" /> */}

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')({