diff --git a/frontend/src/components/common/PageHeader.tsx b/frontend/src/components/common/PageHeader.tsx index b0b3be25..31414bdf 100644 --- a/frontend/src/components/common/PageHeader.tsx +++ b/frontend/src/components/common/PageHeader.tsx @@ -8,7 +8,7 @@ import { useSiteStore } from '../../store/siteStore'; import { useSectorStore } from '../../store/sectorStore'; import { trackLoading } from './LoadingStateMonitor'; import { useErrorHandler } from '../../hooks/useErrorHandler'; -import { usePageContext } from '../../context/PageContext'; +import { usePageContext, SelectorVisibility } from '../../context/PageContext'; interface PageHeaderProps { title: string; @@ -28,6 +28,13 @@ interface PageHeaderProps { workflowInsights?: any[]; // Kept for backwards compat but not rendered /** Right-side actions slot */ actions?: ReactNode; + /** + * Controls site/sector selector visibility in AppHeader per audit Section 1: + * - 'both': Show both site and sector selectors (Planner, Writer pages) - DEFAULT + * - 'site-only': Show only site selector (Automation page) + * - 'none': Hide both selectors (Account, Billing, Thinker pages) + */ + selectorVisibility?: SelectorVisibility; } export default function PageHeader({ @@ -42,6 +49,7 @@ export default function PageHeader({ badge, hideSiteSector = false, actions, + selectorVisibility = 'both', }: PageHeaderProps) { const { activeSite } = useSiteStore(); const { loadSectorsForSite } = useSectorStore(); @@ -54,9 +62,9 @@ export default function PageHeader({ const parentModule = parent || breadcrumb; // Update page context with title and badge info for AppHeader - const pageInfoKey = useMemo(() => `${title}|${parentModule}`, [title, parentModule]); + const pageInfoKey = useMemo(() => `${title}|${parentModule}|${selectorVisibility}`, [title, parentModule, selectorVisibility]); useEffect(() => { - setPageInfo({ title, parent: parentModule, badge }); + setPageInfo({ title, parent: parentModule, badge, selectorVisibility }); return () => setPageInfo(null); }, [pageInfoKey, badge?.color]); diff --git a/frontend/src/context/PageContext.tsx b/frontend/src/context/PageContext.tsx index 7615925c..f1b5bc45 100644 --- a/frontend/src/context/PageContext.tsx +++ b/frontend/src/context/PageContext.tsx @@ -1,9 +1,19 @@ /** * Page Context - Shares current page info with header * Allows pages to set title, parent module, badge for display in AppHeader + * Also controls page-specific visibility of site/sector selectors */ import React, { createContext, useContext, useState, ReactNode } from 'react'; +/** + * Selector visibility configuration per audit Section 1 requirements: + * - 'both': Show both site and sector selectors (Planner, Writer pages) + * - 'site-only': Show only site selector (Automation page) + * - 'none': Hide both selectors (Account, Billing, Thinker pages) + * Default: 'both' (for backward compatibility) + */ +export type SelectorVisibility = 'both' | 'site-only' | 'none'; + interface PageInfo { title: string; parent?: string; // Parent module name (e.g., "Planner", "Writer") @@ -11,6 +21,8 @@ interface PageInfo { icon: ReactNode; color: 'blue' | 'green' | 'purple' | 'orange' | 'red' | 'indigo' | 'yellow' | 'pink' | 'emerald' | 'cyan' | 'amber' | 'teal'; }; + /** Controls site/sector selector visibility in AppHeader. Default: 'both' */ + selectorVisibility?: SelectorVisibility; } interface PageContextType { diff --git a/frontend/src/layout/AppHeader.tsx b/frontend/src/layout/AppHeader.tsx index 2b4f275c..a3653116 100644 --- a/frontend/src/layout/AppHeader.tsx +++ b/frontend/src/layout/AppHeader.tsx @@ -117,10 +117,14 @@ const AppHeader: React.FC = () => { {/* Header Metrics */} - {/* Site and Sector Selector - Desktop */} -
- -
+ {/* Site and Sector Selector - Desktop (visibility controlled by page context) */} + {pageInfo?.selectorVisibility !== 'none' && ( +
+ +
+ )} {/* Search Icon */}