feat(browse): Implement dynamic tab titles for files and folders

packages/web/src/app/[domain]/browse/[...path]/page.tsx

@@ -3,6 +3,32 @@ import { getBrowseParamsFromPathParam } from "../hooks/utils";
 import { CodePreviewPanel } from "./components/codePreviewPanel";
 import { Loader2 } from "lucide-react";
 import { TreePreviewPanel } from "./components/treePreviewPanel";
+import { Metadata } from "next";
+import { parsePathForTitle} from "@/lib/utils";
+
+type Props = {
+  params: {
+    domain: string;
+    path: string[];
+  };
+};
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  let title = 'Browse'; // Default Fallback
+
+  try {
+    title = parsePathForTitle(params.path);
+
+  } catch (error) {
+    // TODO: Maybe I need to look into a better way of handling this error.
+    // for now, it is just a log, fallback tab title and prevents the app from crashing.
+    console.error("Failed to generate metadata title from path:", params.path, error);
+  }
+
+  return {
+    title,
+  };
+}
 
 interface BrowsePageProps {
     params: Promise<{
@@ -18,6 +44,7 @@ export default async function BrowsePage(props: BrowsePageProps) {
     } = params;
 
     const rawPath = _rawPath.join('/');
+    console.log("rawPath:", rawPath);
     const { repoName, revisionName, path, pathType } = getBrowseParamsFromPathParam(rawPath);
 
     return (

packages/web/src/app/layout.tsx

@@ -11,9 +11,15 @@ import { PlanProvider } from "@/features/entitlements/planProvider";
 import { getEntitlements } from "@sourcebot/shared";
 
 export const metadata: Metadata = {
-    title: "Sourcebot",
-    description: "Sourcebot is a self-hosted code understanding tool. Ask questions about your codebase and get rich Markdown answers with inline citations.",
-    manifest: "/manifest.json",
+  // Using the title.template will allow child pages to set the title
+  // while keeping a consistent suffix.
+  title: {
+    default: "Sourcebot",
+    template: "%s | Sourcebot",
+  },
+  description:
+    "Sourcebot is a self-hosted code understanding tool. Ask questions about your codebase and get rich Markdown answers with inline citations.",
+  manifest: "/manifest.json",
 };
 
 export default function RootLayout({

packages/web/src/lib/utils.ts

@@ -486,4 +486,63 @@ export const isHttpError = (error: unknown, status: number): boolean => {
         && typeof error === 'object'
         && 'status' in error 
         && error.status === status;
+}
+
+/**
+ * Parses the URL path to generate a descriptive title.
+ * It handles three cases:
+ * 1. File view (`blob`): "filename.ts - owner/repo"
+ * 2. Directory view (`tree`): "directory/ - owner/repo"
+ * 3. Repository root: "owner/repo"
+ *
+ * @param path The array of path segments from Next.js params.
+ * @returns A formatted title string.
+ */
+export const parsePathForTitle = (path: string[]): string => {
+  const delimiterIndex = path.indexOf('-');
+  if (delimiterIndex === -1 || delimiterIndex === 0) {
+    return 'Browse';
+  }
+
+  const repoParts = path.slice(1, delimiterIndex);
+  if (repoParts.length === 0) return 'Browse';
+
+  const lastPart = decodeURIComponent(repoParts.pop()!);
+  const [repoNamePart, revision = ''] = lastPart.split('@');
+  const ownerParts = repoParts;
+  const fullRepoName = [...ownerParts, repoNamePart].join('/');
+  const repoAndRevision = `${fullRepoName}${revision ? ` @ ${revision}` : ''}`;
+
+  // Check for file (`blob`) or directory (`tree`) view
+  const blobIndex = path.indexOf('blob');
+  const treeIndex = path.indexOf('tree');
+
+  // Case 1: Viewing a file
+  if (blobIndex !== -1 && path.length > blobIndex + 1) {
+    const encodedFilePath = path[blobIndex + 1];
+    const filePath = decodeURIComponent(encodedFilePath);
+
+    const fileName = filePath.split('/').pop() || filePath;
+
+    // Return a title like: "agents.ts - sourcebot-dev/sourcebot @ HEAD"
+    return `${fileName} - ${repoAndRevision}`;
+  }
+
+  // Case 2: Viewing a directory
+  if (treeIndex !== -1 && path.length > treeIndex + 1) {
+    const encodedDirPath = path[treeIndex + 1];
+    const dirPath = decodeURIComponent(encodedDirPath);
+
+    // If we're at the root of the tree, just show the repo name
+    if (dirPath === '/' || dirPath === '') {
+      return repoAndRevision;
+    }
+
+    // Otherwise, show the directory path
+    // Return a title like: "client/src/store/ - sourcebot-dev/sourcebot @ HEAD"
+    return `${dirPath.endsWith('/') ? dirPath : dirPath + '/'} - ${repoAndRevision}`;
+  }
+
+  // Case 3: Fallback to the repository root
+  return repoAndRevision;
 }