feat(ui): sync browser title with current page breadcrumbs
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>
This commit is contained in:
parent
5769aaeca3
commit
e9ba0418c3
1 changed files with 10 additions and 1 deletions
|
|
@ -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 {
|
export interface Breadcrumb {
|
||||||
label: string;
|
label: string;
|
||||||
|
|
@ -19,6 +19,15 @@ export function BreadcrumbProvider({ children }: { children: ReactNode }) {
|
||||||
setBreadcrumbsState(crumbs);
|
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 (
|
return (
|
||||||
<BreadcrumbContext.Provider value={{ breadcrumbs, setBreadcrumbs }}>
|
<BreadcrumbContext.Provider value={{ breadcrumbs, setBreadcrumbs }}>
|
||||||
{children}
|
{children}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue