enhance: add meta title for routes/pages

obot-platform · Dec 30, 2024 · 2f7ef32 · 2f7ef32
1 parent af3cce0
commit 2f7ef32
Show file tree

Hide file tree

Showing 12 changed files with 62 additions and 5 deletions.
diff --git a/ui/admin/app/routes/_auth.agents.$agent.tsx b/ui/admin/app/routes/_auth.agents.$agent.tsx
@@ -1,6 +1,7 @@
 import { useCallback } from "react";
 import {
     ClientLoaderFunctionArgs,
+    MetaFunction,
     redirect,
     useLoaderData,
     useMatch,
@@ -113,3 +114,7 @@ const AgentBreadcrumb = () => {
 export const handle: RouteHandle = {
     breadcrumb: () => [{ content: <AgentBreadcrumb /> }],
 };
+
+export const meta: MetaFunction<typeof clientLoader> = ({ data }) => {
+    return [{ title: `Obot | Agent "${data?.agent?.name}"` }];
+};
diff --git a/ui/admin/app/routes/_auth.agents._index.tsx b/ui/admin/app/routes/_auth.agents._index.tsx
@@ -2,7 +2,7 @@ import { PlusIcon } from "@radix-ui/react-icons";
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
 import { SquarePen } from "lucide-react";
 import { useMemo } from "react";
-import { useNavigate } from "react-router";
+import { MetaFunction, useNavigate } from "react-router";
 import { $path } from "safe-routes";
 import useSWR, { mutate, preload } from "swr";
 
@@ -174,3 +174,7 @@ export default function Agents() {
 }
 
 const columnHelper = createColumnHelper<Agent>();
+
+export const meta: MetaFunction = () => {
+    return [{ title: "Obot | Agents" }];
+};
diff --git a/ui/admin/app/routes/_auth.model-providers.tsx b/ui/admin/app/routes/_auth.model-providers.tsx
@@ -1,3 +1,4 @@
+import { MetaFunction } from "react-router";
 import { preload } from "swr";
 
 import { ModelProvider } from "~/lib/model/modelProviders";
@@ -92,3 +93,7 @@ export default function ModelProviders() {
 export const handle: RouteHandle = {
     breadcrumb: () => [{ content: "Model Providers" }],
 };
+
+export const meta: MetaFunction = () => {
+    return [{ title: `Obot | Model Providers` }];
+};
diff --git a/ui/admin/app/routes/_auth.oauth-apps.tsx b/ui/admin/app/routes/_auth.oauth-apps.tsx
@@ -1,3 +1,4 @@
+import { MetaFunction } from "react-router";
 import { preload } from "swr";
 
 import { OauthAppService } from "~/lib/service/api/oauthAppService";
@@ -38,3 +39,7 @@ export default function OauthApps() {
 export const handle: RouteHandle = {
     breadcrumb: () => [{ content: "OAuth Apps" }],
 };
+
+export const meta: MetaFunction = () => {
+    return [{ title: `Obot | Oauth Apps` }];
+};
diff --git a/ui/admin/app/routes/_auth.threads.$id.tsx b/ui/admin/app/routes/_auth.threads.$id.tsx
@@ -2,6 +2,7 @@ import { ArrowLeftIcon } from "lucide-react";
 import {
     ClientLoaderFunctionArgs,
     Link,
+    MetaFunction,
     redirect,
     useLoaderData,
     useMatch,
@@ -134,3 +135,7 @@ export const handle: RouteHandle = {
         { content: <ThreadBreadcrumb /> },
     ],
 };
+
+export const meta: MetaFunction<typeof clientLoader> = ({ data }) => {
+    return [{ title: `Obot | Thread "${data?.thread.id}"` }];
+};
diff --git a/ui/admin/app/routes/_auth.threads._index.tsx b/ui/admin/app/routes/_auth.threads._index.tsx
@@ -5,6 +5,7 @@ import { useMemo } from "react";
 import {
     ClientLoaderFunctionArgs,
     Link,
+    MetaFunction,
     useLoaderData,
     useNavigate,
     useSearchParams,
@@ -358,3 +359,7 @@ export const handle: RouteHandle = {
     breadcrumb: ({ search }) =>
         [getFromBreadcrumb(search), { content: "Threads" }].filter((x) => !!x),
 };
+
+export const meta: MetaFunction = () => {
+    return [{ title: `Obot | Threads` }];
+};
diff --git a/ui/admin/app/routes/_auth.tools._index.tsx b/ui/admin/app/routes/_auth.tools._index.tsx
@@ -1,5 +1,6 @@
 import { PlusIcon, SearchIcon } from "lucide-react";
 import { useState } from "react";
+import { MetaFunction } from "react-router";
 import useSWR, { preload } from "swr";
 
 import { ToolReferenceService } from "~/lib/service/api/toolreferenceService";
@@ -118,3 +119,7 @@ export default function Tools() {
 export const handle: RouteHandle = {
     breadcrumb: () => [{ content: "Tools" }],
 };
+
+export const meta: MetaFunction = () => {
+    return [{ title: `Obot | Tools` }];
+};
diff --git a/ui/admin/app/routes/_auth.users.tsx b/ui/admin/app/routes/_auth.users.tsx
@@ -1,5 +1,6 @@
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
 import { useMemo } from "react";
+import { MetaFunction } from "react-router";
 import { $path } from "safe-routes";
 import useSWR, { preload } from "swr";
 
@@ -117,3 +118,7 @@ const columnHelper = createColumnHelper<User>();
 export const handle: RouteHandle = {
     breadcrumb: () => [{ content: "Users" }],
 };
+
+export const meta: MetaFunction = () => {
+    return [{ title: `Obot | Users` }];
+};
diff --git a/ui/admin/app/routes/_auth.webhooks.$webhook.tsx b/ui/admin/app/routes/_auth.webhooks.$webhook.tsx
@@ -1,5 +1,6 @@
 import {
     ClientLoaderFunctionArgs,
+    MetaFunction,
     useLoaderData,
     useMatch,
 } from "react-router";
@@ -21,12 +22,12 @@ export async function clientLoader({
         params
     );
 
-    await preload(
+    const webhook = await preload(
         WebhookApiService.getWebhookById.key(pathParams.webhook),
         () => WebhookApiService.getWebhookById(pathParams.webhook)
     );
 
-    return { webhookId: pathParams.webhook };
+    return { webhookId: pathParams.webhook, webhook };
 }
 
 export default function Webhook() {
@@ -54,3 +55,7 @@ const WebhookBreadcrumb = () => {
 export const handle: RouteHandle = {
     breadcrumb: () => [{ content: <WebhookBreadcrumb /> }],
 };
+
+export const meta: MetaFunction<typeof clientLoader> = ({ data }) => {
+    return [{ title: `Obot | Webhook "${data?.webhook.name}"` }];
+};
diff --git a/ui/admin/app/routes/_auth.webhooks._index.tsx b/ui/admin/app/routes/_auth.webhooks._index.tsx
@@ -1,7 +1,7 @@
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
 import { PlusIcon } from "lucide-react";
 import { useMemo } from "react";
-import { useNavigate } from "react-router";
+import { MetaFunction, useNavigate } from "react-router";
 import { $path } from "safe-routes";
 import useSWR, { preload } from "swr";
 
@@ -100,3 +100,7 @@ export default function WebhooksPage() {
 }
 
 const columnHelper = createColumnHelper<Webhook>();
+
+export const meta: MetaFunction = () => {
+    return [{ title: `Obot | Webhooks` }];
+};
diff --git a/ui/admin/app/routes/_auth.workflows.$workflow.tsx b/ui/admin/app/routes/_auth.workflows.$workflow.tsx
@@ -1,6 +1,7 @@
 import { useCallback } from "react";
 import {
     ClientLoaderFunctionArgs,
+    MetaFunction,
     redirect,
     useLoaderData,
     useMatch,
@@ -105,3 +106,7 @@ const WorkflowBreadcrumb = () => {
 export const handle: RouteHandle = {
     breadcrumb: () => [{ content: <WorkflowBreadcrumb /> }],
 };
+
+export const meta: MetaFunction<typeof clientLoader> = ({ data }) => {
+    return [{ title: `Obot | Workflow "${data?.workflow.name}"` }];
+};
diff --git a/ui/admin/app/routes/_auth.workflows._index.tsx b/ui/admin/app/routes/_auth.workflows._index.tsx
@@ -1,7 +1,7 @@
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
 import { PenSquareIcon } from "lucide-react";
 import { useMemo } from "react";
-import { useNavigate } from "react-router";
+import { MetaFunction, useNavigate } from "react-router";
 import { $path } from "safe-routes";
 import useSWR, { mutate, preload } from "swr";
 
@@ -166,3 +166,7 @@ export default function Workflows() {
 }
 
 const columnHelper = createColumnHelper<Workflow>();
+
+export const meta: MetaFunction = () => {
+    return [{ title: `Obot | Workflows` }];
+};