diff --git a/src/App.tsx b/src/App.tsx index 780ca57e..4e20cb79 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -45,7 +45,6 @@ import { DragDropProvider } from './contexts/DragDropContext'; import TooltipPortal from './components/TooltipPortal'; import ConnectionIndicator from './components/ConnectionIndicator'; import LastfmIndicator from './components/LastfmIndicator'; -import OfflineOverlay from './components/OfflineOverlay'; import OfflineBanner from './components/OfflineBanner'; import OfflineLibrary from './pages/OfflineLibrary'; import Genres from './pages/Genres'; @@ -341,17 +340,10 @@ function AppShell() { {isQueueVisible ? : } - {connStatus === 'disconnected' && hasOfflineContent && ( - + {connStatus === 'disconnected' && ( + )}
- {connStatus === 'disconnected' && !hasOfflineContent && ( - - )} } /> } /> diff --git a/src/components/OfflineBanner.tsx b/src/components/OfflineBanner.tsx index 225d98ce..6f08f559 100644 --- a/src/components/OfflineBanner.tsx +++ b/src/components/OfflineBanner.tsx @@ -1,18 +1,34 @@ import React from 'react'; -import { WifiOff, RefreshCw } from 'lucide-react'; +import { WifiOff, RefreshCw, Settings } from 'lucide-react'; import { useTranslation } from 'react-i18next'; +import { useNavigate } from 'react-router-dom'; interface Props { onRetry: () => void; isChecking: boolean; + showSettingsLink?: boolean; + serverName?: string; } -export default function OfflineBanner({ onRetry, isChecking }: Props) { +export default function OfflineBanner({ onRetry, isChecking, showSettingsLink, serverName }: Props) { const { t } = useTranslation(); + const navigate = useNavigate(); + const message = showSettingsLink + ? t('connection.offlineNoCacheBanner', { server: serverName }) + : t('connection.offlineModeBanner'); return (
- {t('connection.offlineModeBanner')} + {message} + {showSettingsLink && ( + + )}