Function AppHeader

app/src/components/AppHeader.tsx:65–709

({
  authState,
  isUsingObServer: externalIsUsingObServer,
  setIsUsingObServer: externalSetIsUsingObServer,
  hostingContext = 'self-hosted',
  getToken,
  onUpgradeClick,
  quotaInfo,
  setQuotaInfo,
  onToggleMobileMenu,
  isDarkMode,
  onToggleDarkMode,
})

const AppHeader: React.FC<AppHeaderProps> = ({
  authState,
  isUsingObServer: externalIsUsingObServer,
  setIsUsingObServer: externalSetIsUsingObServer,
  hostingContext = 'self-hosted',
  getToken,
  onUpgradeClick,
  quotaInfo,
  setQuotaInfo,
  onToggleMobileMenu,
  isDarkMode,
  onToggleDarkMode,
}) => {
  const [localServerOnline, setLocalServerOnline] = useState(false);
  const [customServers, setCustomServers] = useState<CustomServer[]>([]);
  const [appInferenceUrl, setAppInferenceUrl] = useState<string | null>(null);

  const [internalIsUsingObServer, setInternalIsUsingObServer] = useState(false);
  const [isLoadingQuota, setIsLoadingQuota] = useState(false);
  const [isPermissionsModalOpen, setIsPermissionsModalOpen] = useState(false);
  const [showLoginMessage, setShowLoginMessage] = useState(false);
  const [isSessionExpired, setIsSessionExpired] = useState(false);
  const [isQuotaHovered, setIsQuotaHovered] = useState(false);
  const [has70PercentWarningBeenShown, setHas70PercentWarningBeenShown] = useState(false);

  // --- NEW --- State to control the visibility of the new settings modal
  const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
  const [isStartupDialogOpen, setIsStartupDialogOpen] = useState(false);
  const [isAccountModalOpen, setIsAccountModalOpen] = useState(false);
  const [autoDownloadPreset, setAutoDownloadPreset] = useState<import('@utils/modelPresets').ModelPreset | undefined>(undefined);
  const [isModelDownloading] = useState(false);
  const [isModelLoading, setIsModelLoading] = useState(false);

  useEffect(() => {
    const handleOpenModelHub = (e: Event) => {
      const detail = (e as CustomEvent).detail;
      if (detail?.autoDownloadPreset) setAutoDownloadPreset(detail.autoDownloadPreset);
      setIsSettingsModalOpen(true);
    };
    window.addEventListener('openModelHub', handleOpenModelHub);
    return () => window.removeEventListener('openModelHub', handleOpenModelHub);
  }, []);

  const [isNativeLoading, setIsNativeLoading] = useState(false);
  const [isNativeDownloading, setIsNativeDownloading] = useState(false);

  // Track Transformers.js model loading state
  useEffect(() => {
    const manager = GemmaModelManager.getInstance();
    const unsubscribe = manager.onStateChange((state) => {
      setIsModelLoading(state.status === 'loading');
    });
    const initial = manager.getState();
    setIsModelLoading(initial.status === 'loading');
    return unsubscribe;
  }, []);

  // Track llama.cpp download/loading state (Tauri only)