Improve guest help routing and loading

resources/js/guest/pages/HelpCenterPage.tsx

@@ -18,6 +18,7 @@ export default function HelpCenterPage() {
   const [query, setQuery] = React.useState('');
   const [state, setState] = React.useState<'idle' | 'loading' | 'ready' | 'error'>('loading');
   const [servedFromCache, setServedFromCache] = React.useState(false);
+  const [isOnline, setIsOnline] = React.useState(() => (typeof navigator !== 'undefined' ? navigator.onLine : true));
   const basePath = params.token ? `/e/${encodeURIComponent(params.token)}/help` : '/help';
 
   const loadArticles = React.useCallback(async (forceRefresh = false) => {
@@ -37,6 +38,24 @@ export default function HelpCenterPage() {
     loadArticles();
   }, [loadArticles]);
 
+  React.useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const handleOnline = () => setIsOnline(true);
+    const handleOffline = () => setIsOnline(false);
+    window.addEventListener('online', handleOnline);
+    window.addEventListener('offline', handleOffline);
+
+    return () => {
+      window.removeEventListener('online', handleOnline);
+      window.removeEventListener('offline', handleOffline);
+    };
+  }, []);
+
+  const showOfflineBadge = servedFromCache && !isOnline;
+
   const filteredArticles = React.useMemo(() => {
     if (!query.trim()) {
       return articles;
@@ -85,7 +104,7 @@ export default function HelpCenterPage() {
               )}
             </Button>
           </div>
-          {servedFromCache && (
+          {showOfflineBadge && (
             <div className="flex items-center gap-2 rounded-lg bg-amber-50/70 px-3 py-2 text-xs text-amber-900 dark:bg-amber-400/10 dark:text-amber-200">
               <Badge variant="secondary" className="bg-amber-200/80 text-amber-900 dark:bg-amber-500/40 dark:text-amber-100">
                 {t('help.center.offlineBadge')}