diff --git a/frontend/src/pages/Sites/List.tsx b/frontend/src/pages/Sites/List.tsx index d2c942e7..6b5a9b8b 100644 --- a/frontend/src/pages/Sites/List.tsx +++ b/frontend/src/pages/Sites/List.tsx @@ -66,12 +66,13 @@ type ViewType = 'table' | 'grid'; export default function SiteList() { const navigate = useNavigate(); const toast = useToast(); - const { toggleGuide, isGuideVisible } = useOnboardingStore(); + const { toggleGuide, isGuideVisible, showGuide, dismissGuide } = useOnboardingStore(); const [sites, setSites] = useState([]); const [filteredSites, setFilteredSites] = useState([]); const [loading, setLoading] = useState(true); const [viewType, setViewType] = useState('grid'); const [showFilters, setShowFilters] = useState(false); + const [previousSiteCount, setPreviousSiteCount] = useState(0); // Site Management Modals const [selectedSite, setSelectedSite] = useState(null); @@ -91,6 +92,19 @@ export default function SiteList() { loadSites(); }, []); + // Auto-show guide when no sites, auto-hide ONLY when first site is added + useEffect(() => { + if (sites.length === 0) { + // Always show guide when no sites exist + showGuide(); + } else if (previousSiteCount === 0 && sites.length > 0 && isGuideVisible) { + // Auto-collapse guide ONLY when transitioning from 0 to 1+ sites + dismissGuide(); + } + // Update previous count + setPreviousSiteCount(sites.length); + }, [sites.length]); + const loadUserPreferences = async () => { // User preferences are now loaded from site/account data, not from a separate endpoint // This function is kept for backward compatibility but does nothing @@ -547,8 +561,8 @@ export default function SiteList() { - {/* Welcome Guide - Shows when user clicks Add New Website button OR when no sites exist */} - {(isGuideVisible || sites.length === 0) && ( + {/* Welcome Guide - Shows when no sites exist (always) OR when user toggles it (when sites exist) */} + {(sites.length === 0 || (sites.length > 0 && isGuideVisible)) && (
{