From e9ba0418c391e0153c68e2de4c492cdabe75efdd Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Tue, 3 Mar 2026 08:17:48 -0600
Subject: [PATCH] feat(ui): sync browser title with current page breadcrumbs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Every page already sets breadcrumbs via BreadcrumbContext. This adds a
useEffect in the provider that updates document.title to reflect the
current page, e.g. "Issue Title · Issues · Paperclip".

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 ui/src/context/BreadcrumbContext.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/ui/src/context/BreadcrumbContext.tsx b/ui/src/context/BreadcrumbContext.tsx
index 4d7c563b..c3a478a3 100644
--- a/ui/src/context/BreadcrumbContext.tsx
+++ b/ui/src/context/BreadcrumbContext.tsx
@@ -1,4 +1,4 @@
-import { createContext, useCallback, useContext, useState, type ReactNode } from "react";
+import { createContext, useCallback, useContext, useEffect, useState, type ReactNode } from "react";
 
 export interface Breadcrumb {
   label: string;
@@ -19,6 +19,15 @@ export function BreadcrumbProvider({ children }: { children: ReactNode }) {
     setBreadcrumbsState(crumbs);
   }, []);
 
+  useEffect(() => {
+    if (breadcrumbs.length === 0) {
+      document.title = "Paperclip";
+    } else {
+      const parts = [...breadcrumbs].reverse().map((b) => b.label);
+      document.title = `${parts.join(" · ")} · Paperclip`;
+    }
+  }, [breadcrumbs]);
+
   return (
     <BreadcrumbContext.Provider value={{ breadcrumbs, setBreadcrumbs }}>
       {children}