final polish phase 1

frontend/src/layout/AppHeader.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import { usePageContext } from "../context/PageContext";
 import { useSidebar } from "../context/SidebarContext";
 import { ThemeToggleButton } from "../components/common/ThemeToggleButton";
@@ -8,8 +8,26 @@ import UserDropdown from "../components/header/UserDropdown";
 import { HeaderMetrics } from "../components/header/HeaderMetrics";
 import SearchModal from "../components/common/SearchModal";
 import SiteAndSectorSelector from "../components/common/SiteAndSectorSelector";
+import SingleSiteSelector from "../components/common/SingleSiteSelector";
+import SiteWithAllSitesSelector from "../components/common/SiteWithAllSitesSelector";
 import React from "react";
 
+// Route patterns for selector visibility
+const SITE_AND_SECTOR_ROUTES = [
+  '/planner',           // All planner pages
+  '/writer',            // All writer pages  
+  '/setup/add-keywords', // Add keywords page
+];
+
+const SINGLE_SITE_ROUTES = [
+  '/automation',
+  '/account/content-settings',  // Content settings and sub-pages
+];
+
+const SITE_WITH_ALL_SITES_ROUTES = [
+  '/',  // Home dashboard only (exact match)
+];
+
 // Badge color mappings for light versions
 const badgeColors: Record<string, { bg: string; light: string }> = {
   blue: { bg: 'bg-blue-600 dark:bg-blue-500', light: 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300' },
@@ -31,6 +49,31 @@ const AppHeader: React.FC = () => {
   const [isSearchOpen, setIsSearchOpen] = useState(false);
   const { pageInfo } = usePageContext();
   const { isExpanded, toggleSidebar } = useSidebar();
+  const location = useLocation();
+
+  // Determine which selector to show based on current route
+  const getSelectorType = (): 'site-and-sector' | 'single-site' | 'site-with-all' | 'none' => {
+    const path = location.pathname;
+    
+    // Check for home dashboard (exact match)
+    if (path === '/' && pageInfo?.onSiteFilterChange) {
+      return 'site-with-all';
+    }
+    
+    // Check for site + sector selector routes
+    if (SITE_AND_SECTOR_ROUTES.some(route => path.startsWith(route))) {
+      return 'site-and-sector';
+    }
+    
+    // Check for single site selector routes
+    if (SINGLE_SITE_ROUTES.some(route => path.startsWith(route))) {
+      return 'single-site';
+    }
+    
+    return 'none';
+  };
+
+  const selectorType = getSelectorType();
 
   const toggleApplicationMenu = () => {
     setApplicationMenuOpen(!isApplicationMenuOpen);
@@ -117,10 +160,25 @@ const AppHeader: React.FC = () => {
               {/* Header Metrics */}
               <HeaderMetrics />
               
-              {/* Site and Sector Selector - Desktop */}
-              <div className="hidden lg:flex items-center">
-                <SiteAndSectorSelector />
-              </div>
+              {/* Site/Sector Selector - Conditional based on route */}
+              {selectorType === 'site-and-sector' && (
+                <div className="hidden lg:flex items-center">
+                  <SiteAndSectorSelector />
+                </div>
+              )}
+              {selectorType === 'single-site' && (
+                <div className="hidden lg:flex items-center">
+                  <SingleSiteSelector />
+                </div>
+              )}
+              {selectorType === 'site-with-all' && pageInfo?.onSiteFilterChange && (
+                <div className="hidden lg:flex items-center">
+                  <SiteWithAllSitesSelector 
+                    siteFilter={pageInfo.siteFilter}
+                    onSiteFilterChange={pageInfo.onSiteFilterChange}
+                  />
+                </div>
+              )}
               
               {/* Search Icon */}
               <button