From dba89cc4e40f93d278ac99a9db1fee79f4466b65 Mon Sep 17 00:00:00 2001
From: Psychotoxical <dev@psysonic.app>
Date: Mon, 13 Apr 2026 17:52:17 +0200
Subject: [PATCH] fix(offline): replace blocking overlay with slim banner; add
 server settings link (#170)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When offline with no cached content, the full-screen OfflineOverlay blocked
all navigation including Settings, making it impossible to fix a broken
server config. Replace it with the same slim banner used in offline-cache mode.

- OfflineBanner now handles both cases: cache (existing) and no-cache (new)
- No-cache banner shows server name and a direct link to Settings → Server tab
- OfflineOverlay component is no longer used (import removed from App.tsx)
- All 8 locales: added offlineNoCacheBanner and serverSettings keys

Fixes #170

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/App.tsx                      | 12 ++----------
 src/components/OfflineBanner.tsx | 22 +++++++++++++++++++---
 src/locales/de.ts                |  2 ++
 src/locales/en.ts                |  2 ++
 src/locales/es.ts                |  2 ++
 src/locales/fr.ts                |  2 ++
 src/locales/nb.ts                |  2 ++
 src/locales/nl.ts                |  2 ++
 src/locales/ru.ts                |  2 ++
 src/locales/zh.ts                |  2 ++
 10 files changed, 37 insertions(+), 13 deletions(-)

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 ? <PanelRightClose size={18} /> : <PanelRight size={18} />}
           </button>
         </header>
-        {connStatus === 'disconnected' && hasOfflineContent && (
-          <OfflineBanner onRetry={connRetry} isChecking={connRetrying} />
+        {connStatus === 'disconnected' && (
+          <OfflineBanner onRetry={connRetry} isChecking={connRetrying} showSettingsLink={!hasOfflineContent} serverName={serverName} />
         )}
         <div className="content-body" style={{ padding: 0, position: 'relative' }}>
-          {connStatus === 'disconnected' && !hasOfflineContent && (
-            <OfflineOverlay
-              serverName={serverName}
-              onRetry={connRetry}
-              isChecking={connRetrying}
-            />
-          )}
           <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/albums" element={<Albums />} />
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 (
     <div className="offline-banner">
       <WifiOff size={14} />
-      <span>{t('connection.offlineModeBanner')}</span>
+      <span>{message}</span>
+      {showSettingsLink && (
+        <button
+          className="offline-banner-retry"
+          onClick={() => navigate('/settings', { state: { tab: 'server' } })}
+        >
+          <Settings size={12} />
+          {t('connection.serverSettings')}
+        </button>
+      )}
       <button
         className="offline-banner-retry"
         onClick={onRetry}
diff --git a/src/locales/de.ts b/src/locales/de.ts
index b3891b3d..d9363d69 100644
--- a/src/locales/de.ts
+++ b/src/locales/de.ts
@@ -337,6 +337,7 @@ export const deTranslation = {
     offlineTitle: 'Keine Serververbindung',
     offlineSubtitle: '{{server}} ist nicht erreichbar. Prüfe Netzwerk oder Server.',
     offlineModeBanner: 'Offline-Modus — Wiedergabe aus lokalem Cache',
+    offlineNoCacheBanner: 'Keine Serververbindung — {{server}} nicht erreichbar',
     offlineLibraryTitle: 'Offline-Bibliothek',
     offlineLibraryEmpty: 'Noch keine Alben gecacht. Online gehen, Album öffnen und "Offline verfügbar machen" klicken.',
     offlineAlbumCount: '{{n}} Album',
@@ -346,6 +347,7 @@ export const deTranslation = {
     offlineFilterPlaylists: 'Playlists',
     offlineFilterArtists: 'Diskografien',
     retry: 'Erneut versuchen',
+    serverSettings: 'Server-Einstellungen',
     lastfmConnected: 'Last.fm verbunden als @{{user}}',
     lastfmSessionInvalid: 'Session ungültig — klicken zum Neu-Verbinden',
   },
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 5dd4f821..82ffeae9 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -338,6 +338,7 @@ export const enTranslation = {
     offlineTitle: 'No server connection',
     offlineSubtitle: 'Cannot reach {{server}}. Check your network or server.',
     offlineModeBanner: 'Offline Mode — playing from local cache',
+    offlineNoCacheBanner: 'No server connection — cannot reach {{server}}',
     offlineLibraryTitle: 'Offline Library',
     offlineLibraryEmpty: 'No albums cached yet. Go online, open an album and click "Make available offline".',
     offlineAlbumCount: '{{n}} album',
@@ -347,6 +348,7 @@ export const enTranslation = {
     offlineFilterPlaylists: 'Playlists',
     offlineFilterArtists: 'Discographies',
     retry: 'Retry',
+    serverSettings: 'Server Settings',
     lastfmConnected: 'Last.fm connected as @{{user}}',
     lastfmSessionInvalid: 'Session invalid — click to re-connect',
   },
diff --git a/src/locales/es.ts b/src/locales/es.ts
index 5d74386a..9212c07f 100644
--- a/src/locales/es.ts
+++ b/src/locales/es.ts
@@ -339,6 +339,7 @@ export const esTranslation = {
     offlineTitle: 'Sin conexión al servidor',
     offlineSubtitle: 'No se puede alcanzar {{server}}. Verifica tu red o servidor.',
     offlineModeBanner: 'Modo Offline — reproduciendo desde caché local',
+    offlineNoCacheBanner: 'Sin conexión al servidor — no se puede acceder a {{server}}',
     offlineLibraryTitle: 'Biblioteca Offline',
     offlineLibraryEmpty: 'No hay álbumes en caché aún. Conéctate, abre un álbum y click en "Disponible offline".',
     offlineAlbumCount: '{{n}} álbum',
@@ -348,6 +349,7 @@ export const esTranslation = {
     offlineFilterPlaylists: 'Listas',
     offlineFilterArtists: 'Discografías',
     retry: 'Reintentar',
+    serverSettings: 'Configuración del servidor',
     lastfmConnected: 'Last.fm conectado como @{{user}}',
     lastfmSessionInvalid: 'Sesión inválida — click para reconectar',
   },
diff --git a/src/locales/fr.ts b/src/locales/fr.ts
index 90aeedef..6eb2cae0 100644
--- a/src/locales/fr.ts
+++ b/src/locales/fr.ts
@@ -337,6 +337,7 @@ export const frTranslation = {
     offlineTitle: 'Pas de connexion au serveur',
     offlineSubtitle: 'Impossible d\'atteindre {{server}}. Vérifiez votre réseau ou le serveur.',
     offlineModeBanner: 'Mode hors ligne — lecture depuis le cache local',
+    offlineNoCacheBanner: 'Pas de connexion au serveur — {{server}} inaccessible',
     offlineLibraryTitle: 'Bibliothèque hors ligne',
     offlineLibraryEmpty: 'Aucun album en cache. Connectez-vous, ouvrez un album et cliquez sur "Rendre disponible hors ligne".',
     offlineAlbumCount: '{{n}} album',
@@ -346,6 +347,7 @@ export const frTranslation = {
     offlineFilterPlaylists: 'Playlists',
     offlineFilterArtists: 'Discographies',
     retry: 'Réessayer',
+    serverSettings: 'Paramètres serveur',
     lastfmConnected: 'Last.fm connecté en tant que @{{user}}',
     lastfmSessionInvalid: 'Session invalide — cliquez pour vous reconnecter',
   },
diff --git a/src/locales/nb.ts b/src/locales/nb.ts
index 0556bfc7..09d77783 100644
--- a/src/locales/nb.ts
+++ b/src/locales/nb.ts
@@ -337,6 +337,7 @@ export const nbTranslation = {
     offlineTitle: 'Ingen tjenertilkobling',
     offlineSubtitle: 'Kan ikke nå {{server}}. Sjekk nettverket eller tjeneren din.',
     offlineModeBanner: 'Frakoblet modus - spiller fra lokal hurtigbuffer',
+    offlineNoCacheBanner: 'Ingen servertilkobling — kan ikke nå {{server}}',
     offlineLibraryTitle: 'Frakoblet bibliotek',
     offlineLibraryEmpty: 'Ingen album bufret ennå. Kobl deg til nettverket, åpne et album og klikk "Gjør tilgjengelig frakoblet".',
     offlineAlbumCount: '{{n}} album',
@@ -346,6 +347,7 @@ export const nbTranslation = {
     offlineFilterPlaylists: 'Spillelister',
     offlineFilterArtists: 'Diskografier',
     retry: 'Prøv igjen',
+    serverSettings: 'Serverinnstillinger',
     lastfmConnected: 'Last.fm tilkoblet som bruker @{{user}}',
     lastfmSessionInvalid: 'Sesjonen er ugyldig - klikk her for å koble til på nytt',
   },
diff --git a/src/locales/nl.ts b/src/locales/nl.ts
index 8979e68c..0c29e68c 100644
--- a/src/locales/nl.ts
+++ b/src/locales/nl.ts
@@ -336,6 +336,7 @@ export const nlTranslation = {
     offlineTitle: 'Geen serververbinding',
     offlineSubtitle: 'Kan {{server}} niet bereiken. Controleer je netwerk of server.',
     offlineModeBanner: 'Offline modus — afspelen vanuit lokale cache',
+    offlineNoCacheBanner: 'Geen serververbinding — {{server}} niet bereikbaar',
     offlineLibraryTitle: 'Offline bibliotheek',
     offlineLibraryEmpty: 'Nog geen albums gecached. Ga online, open een album en klik op "Offline beschikbaar maken".',
     offlineAlbumCount: '{{n}} album',
@@ -345,6 +346,7 @@ export const nlTranslation = {
     offlineFilterPlaylists: 'Afspeellijsten',
     offlineFilterArtists: 'Discografieën',
     retry: 'Opnieuw proberen',
+    serverSettings: 'Serverinstellingen',
     lastfmConnected: 'Last.fm verbonden als @{{user}}',
     lastfmSessionInvalid: 'Sessie ongeldig — klik om opnieuw te verbinden',
   },
diff --git a/src/locales/ru.ts b/src/locales/ru.ts
index 442ea9eb..7770df73 100644
--- a/src/locales/ru.ts
+++ b/src/locales/ru.ts
@@ -348,6 +348,7 @@ export const ruTranslation = {
     offlineTitle: 'Нет связи с сервером',
     offlineSubtitle: 'Сервер {{server}} недоступен. Проверьте сеть и адрес.',
     offlineModeBanner: 'Офлайн — воспроизведение из локального кэша',
+    offlineNoCacheBanner: 'Нет соединения с сервером — {{server}} недоступен',
     offlineLibraryTitle: 'Офлайн-библиотека',
     offlineLibraryEmpty:
       'Пока ничего не сохранено. Подключитесь к сети, откройте альбом и нажмите «Сохранить офлайн».',
@@ -360,6 +361,7 @@ export const ruTranslation = {
     offlineFilterPlaylists: 'Плейлисты',
     offlineFilterArtists: 'Дискографии',
     retry: 'Повторить',
+    serverSettings: 'Настройки сервера',
     lastfmConnected: 'Last.fm: @{{user}}',
     lastfmSessionInvalid: 'Сессия недействительна — подключите снова',
   },
diff --git a/src/locales/zh.ts b/src/locales/zh.ts
index bf51c166..50ab9901 100644
--- a/src/locales/zh.ts
+++ b/src/locales/zh.ts
@@ -336,11 +336,13 @@ export const zhTranslation = {
     offlineTitle: '无服务器连接',
     offlineSubtitle: '无法连接到 {{server}}。请检查您的网络或服务器。',
     offlineModeBanner: '离线模式 — 正在从本地缓存播放',
+    offlineNoCacheBanner: '无服务器连接 — 无法访问 {{server}}',
     offlineLibraryTitle: '离线音乐库',
     offlineLibraryEmpty: '尚未缓存任何专辑。请联网，打开专辑并点击"设为离线可用"。',
     offlineAlbumCount_one: '{{n}} 张专辑',
     offlineAlbumCount_plural: '{{n}} 张专辑',
     retry: '重试',
+    serverSettings: '服务器设置',
     lastfmConnected: 'Last.fm 已连接为 @{{user}}',
     lastfmSessionInvalid: '会话无效 — 点击重新连接',
   },