Include project title in page title (vibe-kanban) (#1022)
* Perfect! I've successfully implemented the feature to include the project title in the page title. Here's what I did: ## Summary I've added dynamic page title updates to display `<project name> | vibe-kanban` when viewing project pages. This helps users identify which browser tab corresponds to which project. ### Changes Made 1. **ProjectTasks component** (`frontend/src/pages/project-tasks.tsx:71-78`) - Added a `useEffect` hook that updates `document.title` when the project loads - The title shows `<project name> | vibe-kanban` when a project is loaded - Falls back to `vibe-kanban` if no project is available 2. **ProjectDetail component** (`frontend/src/components/projects/project-detail.tsx:88-95`) - Added the same title update logic for the project detail page - Ensures consistent behavior across both the tasks view and project detail view ### Testing - ✅ TypeScript type checking passes with no errors - ✅ ESLint passes (94 warnings, under the 110 max threshold, with no new warnings introduced) - ✅ All checks pass The page title will now automatically update to show the project name whenever you navigate to a project's tasks or detail page, making it much easier to identify tabs when working with multiple projects. * Excellent! Let me create a summary of what we've implemented: ## Summary - Refactored to Centralized Page Title Management ✅ I've successfully refactored the implementation to follow React best practices by using a **centralized approach** in the `ProjectProvider` context. ### What Changed **Before (Scattered Approach):** - ❌ Multiple `useEffect` hooks spread across different components - ❌ Code duplication - ❌ Easy to forget when adding new pages **After (Centralized Approach):** - ✅ Single `useEffect` in `ProjectProvider` that manages all page titles - ✅ Automatically handles all routes without touching individual components - ✅ Follows React best practices for context-based side effects ### Implementation Details **File: `frontend/src/contexts/project-context.tsx`** Added a single `useEffect` hook that watches the project data: ```typescript // Centralized page title management useEffect(() => { if (query.data) { document.title = `${query.data.name} | vibe-kanban`; } else { document.title = 'vibe-kanban'; } }, [query.data]); ``` ### How It Works The `ProjectProvider`: 1. **Wraps the entire app** - Already exists at the root level 2. **Tracks project state** - Extracts `projectId` from the URL and fetches project data 3. **Updates title automatically** - When `query.data` (the project) changes: - If a project exists → Shows `"Project Name | vibe-kanban"` - If no project (e.g., on `/projects` or `/settings`) → Shows `"vibe-kanban"` ### Benefits ✅ **Single source of truth** - One place to manage all page titles ✅ **Automatic** - Works for all existing and future routes ✅ **Clean** - No code duplication across components ✅ **Maintainable** - Easy to modify title format in one place ✅ **Best practice** - Context providers are the right place for app-wide side effects ### Testing - ✅ TypeScript type checking passes (both frontend and backend) - ✅ ESLint passes with 94 warnings (no new warnings added) - ✅ All routes handled automatically: - Project-specific pages: Shows project name in title - General pages (project list, settings): Shows just "vibe-kanban" The implementation is complete and ready to use! * Cleanup script changes for task attempt 56892384-6a81-4c9f-be14-edf121c06587
This commit is contained in:
@@ -1,4 +1,10 @@
|
||||
import { createContext, useContext, ReactNode, useMemo } from 'react';
|
||||
import {
|
||||
createContext,
|
||||
useContext,
|
||||
ReactNode,
|
||||
useMemo,
|
||||
useEffect,
|
||||
} from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { projectsApi } from '@/lib/api';
|
||||
@@ -45,6 +51,15 @@ export function ProjectProvider({ children }: ProjectProviderProps) {
|
||||
[projectId, query.data, query.isLoading, query.error, query.isError]
|
||||
);
|
||||
|
||||
// Centralized page title management
|
||||
useEffect(() => {
|
||||
if (query.data) {
|
||||
document.title = `${query.data.name} | vibe-kanban`;
|
||||
} else {
|
||||
document.title = 'vibe-kanban';
|
||||
}
|
||||
}, [query.data]);
|
||||
|
||||
return (
|
||||
<ProjectContext.Provider value={value}>{children}</ProjectContext.Provider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user