refactor phase 6

frontend/src/components/header/SiteSwitcher.tsx

@@ -1,11 +1,12 @@
 import { useState, useEffect, useRef } from "react";
-import { useLocation } from "react-router";
+import { useLocation, useNavigate } from "react-router";
 import { Dropdown } from "../ui/dropdown/Dropdown";
 import { DropdownItem } from "../ui/dropdown/DropdownItem";
 import { fetchSites, Site, setActiveSite as apiSetActiveSite } from "../../services/api";
 import { useToast } from "../ui/toast/ToastContainer";
 import { useSiteStore } from "../../store/siteStore";
 import { useAuthStore } from "../../store/authStore";
+import Button from "../ui/button/Button";
 
 /**
  * SiteSwitcher Component
@@ -45,6 +46,7 @@ interface SiteSwitcherProps {
 
 export default function SiteSwitcher({ hiddenPaths }: SiteSwitcherProps) {
   const location = useLocation();
+  const navigate = useNavigate();
   const toast = useToast();
   const { activeSite, setActiveSite, loadActiveSite } = useSiteStore();
   const { user, refreshUser, isAuthenticated } = useAuthStore();
@@ -131,9 +133,22 @@ export default function SiteSwitcher({ hiddenPaths }: SiteSwitcherProps) {
     return null;
   }
 
-  // Don't render if loading or no sites
-  if (loading || sites.length === 0) {
-    return null;
+  const noSitesAvailable = !loading && sites.length === 0;
+
+  if (loading && sites.length === 0) {
+    return (
+      <div className="text-xs font-medium text-gray-500 dark:text-gray-400 px-3 py-2 border border-dashed border-gray-300 rounded-lg">
+        Loading sites...
+      </div>
+    );
+  }
+
+  if (noSitesAvailable) {
+    return (
+      <Button size="sm" variant="outline" onClick={() => navigate('/sites')}>
+        Create Site
+      </Button>
+    );
   }
 
   return (