117 lines
4.4 KiB
TypeScript
117 lines
4.4 KiB
TypeScript
import { useOnlineStatus, usePendingPostsCount, useSyncPendingPosts } from '@/hooks/useOfflineCache';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
|
import { Wifi, WifiOff, Cloud, CloudOff, Loader2 } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
import { useTranslation } from '@/contexts/language';
|
|
|
|
interface OfflineIndicatorProps {
|
|
className?: string;
|
|
showWhenOnline?: boolean;
|
|
}
|
|
|
|
export function OfflineIndicator({ className, showWhenOnline = false }: OfflineIndicatorProps) {
|
|
const { t } = useTranslation();
|
|
const isOnline = useOnlineStatus();
|
|
const { data: pendingCount } = usePendingPostsCount();
|
|
const { isSyncing } = useSyncPendingPosts();
|
|
|
|
// Don't show when online (unless explicitly requested or there are pending posts)
|
|
if (isOnline && !showWhenOnline && !pendingCount && !isSyncing) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className={cn(
|
|
'gap-2 h-8 px-3 font-medium',
|
|
isOnline
|
|
? 'text-green-400 hover:text-green-300 hover:bg-green-500/10'
|
|
: 'text-orange-400 hover:text-orange-300 hover:bg-orange-500/10 animate-pulse',
|
|
className
|
|
)}
|
|
>
|
|
{isSyncing ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : isOnline ? (
|
|
<Wifi className="h-4 w-4" />
|
|
) : (
|
|
<WifiOff className="h-4 w-4" />
|
|
)}
|
|
{!isOnline && <span className="text-xs">{t('miscUi.offline')}</span>}
|
|
{pendingCount !== undefined && pendingCount > 0 && (
|
|
<Badge variant="secondary" className="h-5 px-1.5 text-xs bg-orange-500/20 text-orange-400">
|
|
{pendingCount}
|
|
</Badge>
|
|
)}
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent align="end" className="w-72 bg-black border-gray-700">
|
|
<div className="space-y-4">
|
|
{/* Connection Status */}
|
|
<div className="flex items-center gap-3">
|
|
<div className={cn(
|
|
'w-10 h-10 rounded-full flex items-center justify-center',
|
|
isOnline ? 'bg-green-500/20' : 'bg-orange-500/20'
|
|
)}>
|
|
{isOnline ? (
|
|
<Cloud className="h-5 w-5 text-green-400" />
|
|
) : (
|
|
<CloudOff className="h-5 w-5 text-orange-400" />
|
|
)}
|
|
</div>
|
|
<div>
|
|
<p className="font-bold text-white">
|
|
{isOnline ? t('miscUi.connected') : t('miscUi.offlineMode')}
|
|
</p>
|
|
<p className="text-xs text-gray-400">
|
|
{isOnline
|
|
? t('miscUi.allFeaturesAvailable')
|
|
: t('miscUi.browsingCachedSpots')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pending Posts */}
|
|
{pendingCount !== undefined && pendingCount > 0 && (
|
|
<div className="p-3 rounded-lg bg-orange-500/10 border border-orange-500/30">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-orange-400 font-medium">
|
|
{t('miscUi.queuedActions', { count: pendingCount })}
|
|
</span>
|
|
{isSyncing && (
|
|
<Badge className="bg-orange-500 text-white text-xs">
|
|
<Loader2 className="h-3 w-3 mr-1 animate-spin" />
|
|
{t('miscUi.syncing')}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<p className="text-xs text-gray-400 mt-1">
|
|
{isOnline
|
|
? t('miscUi.publishingWhenStable')
|
|
: t('miscUi.willPublishOnline')}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Offline Features Info */}
|
|
{!isOnline && (
|
|
<div className="text-xs text-gray-400 space-y-1">
|
|
<p className="font-medium text-gray-300">{t('miscUi.availableOffline')}</p>
|
|
<ul className="list-disc list-inside space-y-0.5">
|
|
<li>{t('miscUi.offlineBrowseSpots')}</li>
|
|
<li>{t('miscUi.offlineViewDetails')}</li>
|
|
<li>{t('miscUi.offlineKeepActing')}</li>
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
}
|