chore: set project name in title tag for session detail page

2025-12-27 18:24:23 +01:00 · 2025-10-31 01:40:22 +09:00
parent 2ae3123cef
commit d09797d7ed
4 changed files with 73 additions and 15 deletions
--- a/package.json
+++ b/package.json
@@ -76,6 +76,7 @@
    "react": "19.2.0",
    "react-dom": "19.2.0",
    "react-error-boundary": "6.0.0",
+    "react-helmet-async": "^2.0.5",
    "react-markdown": "10.1.0",
    "react-syntax-highlighter": "15.6.6",
    "remark-gfm": "4.0.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -116,6 +116,9 @@ importers:
      react-error-boundary:
        specifier: 6.0.0
        version: 6.0.0(react@19.2.0)
+      react-helmet-async:
+        specifier: ^2.0.5
+        version: 2.0.5(react@19.2.0)
      react-markdown:
        specifier: 10.1.0
        version: 10.1.0(@types/react@19.2.2)(react@19.2.0)
@@ -2922,6 +2925,9 @@ packages:
      '@types/node':
        optional: true

+  invariant@2.2.4:
+    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
+
  ip-address@10.0.1:
    resolution: {integrity: sha512-NWv9YLW4PoW2B7xtzaS3NCot75m6nK7Icdv0o3lfMceJVRfSoQwqD4wEH5rLwoKJwUiZ/rfpiVBhnaF0FK4HoA==}
    engines: {node: '>= 12'}
@@ -3239,6 +3245,10 @@ packages:
  longest-streak@3.1.0:
    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}

+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
  lowlight@1.20.0:
    resolution: {integrity: sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==}

@@ -3775,6 +3785,14 @@ packages:
    peerDependencies:
      react: '>=16.13.1'

+  react-fast-compare@3.2.2:
+    resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
+
+  react-helmet-async@2.0.5:
+    resolution: {integrity: sha512-rYUYHeus+i27MvFE+Jaa4WsyBKGkL6qVgbJvSBoX8mbsWoABJXdEO0bZyi0F6i+4f0NuIb8AvqPMj3iXFHkMwg==}
+    peerDependencies:
+      react: ^16.6.0 || ^17.0.0 || ^18.0.0
+
  react-is@18.3.1:
    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}

@@ -3954,6 +3972,9 @@ packages:
    resolution: {integrity: sha512-RbcPH1n5cfwKrru7v7+zrZvjLurgHhGyso3HTyGtRivGWgYjbOmGuivCQaORNELjNONoK35nj28EoWul9sb1zQ==}
    engines: {node: '>=10'}

+  shallowequal@1.1.0:
+    resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==}
+
  shebang-command@2.0.0:
    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
    engines: {node: '>=8'}
@@ -7193,6 +7214,10 @@ snapshots:
    optionalDependencies:
      '@types/node': 24.9.1

+  invariant@2.2.4:
+    dependencies:
+      loose-envify: 1.4.0
+
  ip-address@10.0.1: {}

  is-alphabetical@1.0.4: {}
@@ -7421,6 +7446,10 @@ snapshots:

  longest-streak@3.1.0: {}

+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
  lowlight@1.20.0:
    dependencies:
      fault: 1.0.4
@@ -8183,6 +8212,15 @@ snapshots:
      '@babel/runtime': 7.28.4
      react: 19.2.0

+  react-fast-compare@3.2.2: {}
+
+  react-helmet-async@2.0.5(react@19.2.0):
+    dependencies:
+      invariant: 2.2.4
+      react: 19.2.0
+      react-fast-compare: 3.2.2
+      shallowequal: 1.1.0
+
  react-is@18.3.1: {}

  react-markdown@10.1.0(@types/react@19.2.2)(react@19.2.0):
@@ -8438,6 +8476,8 @@ snapshots:

  seroval@1.3.2: {}

+  shallowequal@1.1.0: {}
+
  shebang-command@2.0.0:
    dependencies:
      shebang-regex: 3.0.0
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -1,4 +1,5 @@
 import { createRootRoute, Outlet } from "@tanstack/react-router";
+import { HelmetProvider } from "react-helmet-async";
 import { RootErrorBoundary } from "../app/components/RootErrorBoundary";
 import { SSEEventListeners } from "../app/components/SSEEventListeners";
 import { SyncSessionProcess } from "../app/components/SyncSessionProcess";
@@ -10,17 +11,19 @@ import { SSEProvider } from "../lib/sse/components/SSEProvider";
 export const Route = createRootRoute({
  component: () => (
    <RootErrorBoundary>
-      <ThemeProvider>
-        <LinguiClientProvider>
-          <SSEProvider>
-            <SSEEventListeners>
-              <SyncSessionProcess>
-                <Outlet />
-              </SyncSessionProcess>
-            </SSEEventListeners>
-          </SSEProvider>
-        </LinguiClientProvider>
-      </ThemeProvider>
+      <HelmetProvider>
+        <ThemeProvider>
+          <LinguiClientProvider>
+            <SSEProvider>
+              <SSEEventListeners>
+                <SyncSessionProcess>
+                  <Outlet />
+                </SyncSessionProcess>
+              </SSEEventListeners>
+            </SSEProvider>
+          </LinguiClientProvider>
+        </ThemeProvider>
+      </HelmetProvider>
      <Toaster position="top-right" />
    </RootErrorBoundary>
  ),
--- a/src/routes/projects/$projectId/sessions/$sessionId/index.tsx
+++ b/src/routes/projects/$projectId/sessions/$sessionId/index.tsx
@@ -1,5 +1,7 @@
 import { Trans } from "@lingui/react";
 import { createFileRoute } from "@tanstack/react-router";
+import { Helmet } from "react-helmet-async";
+import { useProject } from "../../../../../app/projects/[projectId]/hooks/useProject";
 import { SessionPageContent } from "../../../../../app/projects/[projectId]/sessions/[sessionId]/components/SessionPageContent";
 import { NotFound } from "../../../../../components/NotFound";

@@ -24,10 +26,22 @@ export const Route = createFileRoute(

 function RouteComponent() {
  const params = Route.useParams();
+  const { data } = useProject(params.projectId);
+  const projectName = data.pages[0]?.project.meta.projectName;
+
+  const title = projectName
+    ? `${projectName} - Claude Code Viewer`
+    : "Claude Code Viewer";
+
  return (
-    <SessionPageContent
-      projectId={params.projectId}
-      sessionId={params.sessionId}
-    />
+    <>
+      <Helmet>
+        <title>{title}</title>
+      </Helmet>
+      <SessionPageContent
+        projectId={params.projectId}
+        sessionId={params.sessionId}
+      />
+    </>
  );
 }