fix(settings): show excluding state on library index exclude action

Flush UI before the async unbind, disable repeat clicks, cancel an active
sync when needed, and label the button "Excluding…" / localized equivalent.
This commit is contained in:
Maxim Isaev
2026-05-22 14:14:09 +03:00
parent 23f7ba02d6
commit 60aad12cd4
12 changed files with 68 additions and 8 deletions
@@ -1,4 +1,5 @@
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { flushSync } from 'react-dom';
import { useTranslation } from 'react-i18next';
import { DatabaseZap } from 'lucide-react';
import { useAuthStore } from '../../store/authStore';
@@ -18,7 +19,7 @@ import {
bootstrapIndexedServer,
type BindServerResult,
} from '../../utils/library/librarySession';
import { enqueueLibrarySync } from '../../utils/library/librarySyncQueue';
import { enqueueLibrarySync, waitForLibrarySyncIdle } from '../../utils/library/librarySyncQueue';
import { syncIngestDisplayCount } from '../../utils/library/libraryReady';
import { serverListDisplayLabel } from '../../utils/server/serverDisplayName';
import LibraryIndexServerRow, { type LibraryServerConnection } from './LibraryIndexServerRow';
@@ -58,6 +59,7 @@ export default function LibraryIndexSection() {
const [connectionByServer, setConnectionByServer] = useState<Record<string, LibraryServerConnection>>({});
const [progressByServer, setProgressByServer] = useState<Record<string, string | null>>({});
const [busyServerId, setBusyServerId] = useState<string | null>(null);
const [excludingServerId, setExcludingServerId] = useState<string | null>(null);
const [bootstrapping, setBootstrapping] = useState(false);
const pollTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -130,6 +132,7 @@ export default function LibraryIndexSection() {
setConnectionByServer({});
setProgressByServer({});
setBusyServerId(null);
setExcludingServerId(null);
return;
}
void runBootstrap();
@@ -263,8 +266,21 @@ export default function LibraryIndexSection() {
};
const handleExcludeServer = async (serverId: string) => {
setBootstrapping(true);
if (excludingServerId) return;
flushSync(() => setExcludingServerId(serverId));
try {
const syncing =
busyServerId === serverId ||
statusByServer[serverId]?.syncPhase === 'initial_sync' ||
statusByServer[serverId]?.syncPhase === 'probing';
if (syncing) {
try {
await librarySyncCancel();
await waitForLibrarySyncIdle(serverId);
} catch {
/* best-effort — proceed with unbind */
}
}
await librarySyncClearSession(serverId);
setServerSyncExcluded(serverId, true);
setStatusByServer(prev => {
@@ -277,10 +293,18 @@ export default function LibraryIndexSection() {
delete next[serverId];
return next;
});
setProgressByServer(prev => {
const next = { ...prev };
delete next[serverId];
return next;
});
if (busyServerId === serverId) {
setBusyServerId(null);
}
} catch (e) {
showToast(t('settings.libraryIndexBindError', { error: String(e) }), 5000, 'error');
} finally {
setBootstrapping(false);
setExcludingServerId(null);
}
};
@@ -292,7 +316,7 @@ export default function LibraryIndexSection() {
}
};
const globalBusy = bootstrapping || busyServerId != null;
const globalBusy = bootstrapping || busyServerId != null || excludingServerId != null;
return (
<SettingsSubSection
@@ -349,7 +373,10 @@ export default function LibraryIndexSection() {
connection={connectionByServer[srv.id] ?? 'unknown'}
progressLabel={progressByServer[srv.id] ?? null}
busy={busyServerId === srv.id}
actionsDisabled={globalBusy && busyServerId !== srv.id}
excluding={excludingServerId === srv.id}
actionsDisabled={
(globalBusy && busyServerId !== srv.id) || excludingServerId != null
}
onFullSync={() => void runServerAction(srv.id, 'full')}
onDeltaSync={() => void runServerAction(srv.id, 'delta')}
onVerify={() => void runServerAction(srv.id, 'verify')}
@@ -376,7 +403,7 @@ export default function LibraryIndexSection() {
type="button"
className="btn btn-surface"
style={{ fontSize: 12, padding: '4px 10px' }}
disabled={bootstrapping}
disabled={bootstrapping || excludingServerId != null}
onClick={() => void handleIncludeServer(srv.id)}
>
{t('settings.libraryIndexIncludeServer')}
@@ -18,6 +18,7 @@ interface LibraryIndexServerRowProps {
connection: LibraryServerConnection;
progressLabel: string | null;
busy: boolean;
excluding: boolean;
actionsDisabled: boolean;
onFullSync: () => void;
onDeltaSync: () => void;
@@ -33,6 +34,7 @@ export default function LibraryIndexServerRow({
connection,
progressLabel,
busy,
excluding,
actionsDisabled,
onFullSync,
onDeltaSync,
@@ -133,11 +135,14 @@ export default function LibraryIndexServerRow({
type="button"
className="btn btn-ghost"
style={{ fontSize: 12, padding: '4px 10px', color: 'var(--text-muted)' }}
disabled={actionsDisabled}
disabled={actionsDisabled || excluding}
aria-busy={excluding}
onClick={onExclude}
>
<Ban size={13} />
{t('settings.libraryIndexExcludeServer')}
{excluding
? t('settings.libraryIndexExcludingServer')
: t('settings.libraryIndexExcludeServer')}
</button>
</div>
</div>
+1
View File
@@ -261,6 +261,7 @@ export const settings = {
libraryIndexFullResync: 'Vollständige Neusynchronisation',
libraryIndexDeltaSync: 'Delta-Synchronisation',
libraryIndexExcludeServer: 'Von Synchronisation ausschließen',
libraryIndexExcludingServer: 'Wird ausgeschlossen…',
libraryIndexExcludedTitle: 'Von Synchronisation ausgeschlossen',
libraryIndexIncludeServer: 'Wieder einschließen',
libraryIndexStatus: 'Status',
+1
View File
@@ -264,6 +264,7 @@ export const settings = {
libraryIndexFullResync: 'Full resync',
libraryIndexDeltaSync: 'Delta sync',
libraryIndexExcludeServer: 'Exclude from sync',
libraryIndexExcludingServer: 'Excluding…',
libraryIndexExcludedTitle: 'Excluded from sync',
libraryIndexIncludeServer: 'Include again',
libraryIndexStatus: 'Status',
+1
View File
@@ -259,6 +259,7 @@ export const settings = {
libraryIndexFullResync: 'Resincronización completa',
libraryIndexDeltaSync: 'Sincronización delta',
libraryIndexExcludeServer: 'Excluir de la sincronización',
libraryIndexExcludingServer: 'Excluyendo…',
libraryIndexExcludedTitle: 'Excluidos de la sincronización',
libraryIndexIncludeServer: 'Incluir de nuevo',
libraryIndexStatus: 'Estado',
+1
View File
@@ -257,6 +257,7 @@ export const settings = {
libraryIndexFullResync: 'Resynchronisation complète',
libraryIndexDeltaSync: 'Synchronisation delta',
libraryIndexExcludeServer: 'Exclure de la synchronisation',
libraryIndexExcludingServer: 'Exclusion…',
libraryIndexExcludedTitle: 'Exclus de la synchronisation',
libraryIndexIncludeServer: 'Réinclure',
libraryIndexStatus: 'État',
+1
View File
@@ -256,6 +256,7 @@ export const settings = {
libraryIndexFullResync: 'Full resynkronisering',
libraryIndexDeltaSync: 'Delta-synkronisering',
libraryIndexExcludeServer: 'Ekskluder fra synkronisering',
libraryIndexExcludingServer: 'Ekskluderer…',
libraryIndexExcludedTitle: 'Ekskludert fra synkronisering',
libraryIndexIncludeServer: 'Inkluder igjen',
libraryIndexStatus: 'Status',
+1
View File
@@ -257,6 +257,7 @@ export const settings = {
libraryIndexFullResync: 'Volledige resync',
libraryIndexDeltaSync: 'Delta-sync',
libraryIndexExcludeServer: 'Uitsluiten van synchronisatie',
libraryIndexExcludingServer: 'Uitsluiten…',
libraryIndexExcludedTitle: 'Uitgesloten van synchronisatie',
libraryIndexIncludeServer: 'Weer opnemen',
libraryIndexStatus: 'Status',
+1
View File
@@ -263,6 +263,7 @@ export const settings = {
libraryIndexFullResync: 'Resincronizare completă',
libraryIndexDeltaSync: 'Sincronizare delta',
libraryIndexExcludeServer: 'Exclude din sincronizare',
libraryIndexExcludingServer: 'Se exclude…',
libraryIndexExcludedTitle: 'Excluse din sincronizare',
libraryIndexIncludeServer: 'Include din nou',
libraryIndexStatus: 'Stare',
+1
View File
@@ -269,6 +269,7 @@ export const settings = {
libraryIndexFullResync: 'Полная пересинхронизация',
libraryIndexDeltaSync: 'Быстрая дельта',
libraryIndexExcludeServer: 'Исключить из синхронизации',
libraryIndexExcludingServer: 'Отключается…',
libraryIndexExcludedTitle: 'Исключены из синхронизации',
libraryIndexIncludeServer: 'Включить снова',
libraryIndexStatus: 'Статус',
+1
View File
@@ -256,6 +256,7 @@ export const settings = {
libraryIndexFullResync: '完全重新同步',
libraryIndexDeltaSync: '增量同步',
libraryIndexExcludeServer: '排除同步',
libraryIndexExcludingServer: '正在排除…',
libraryIndexExcludedTitle: '已排除同步',
libraryIndexIncludeServer: '重新纳入',
libraryIndexStatus: '状态',
+19
View File
@@ -62,6 +62,25 @@ function waitForServerIdle(serverId: string): Promise<void> {
});
}
/** Wait until a server emits `library:sync-idle`, or time out (best-effort). */
export function waitForLibrarySyncIdle(serverId: string, timeoutMs = 15_000): Promise<void> {
return new Promise(resolve => {
let unlisten: (() => void) | undefined;
const timer = setTimeout(() => {
unlisten?.();
resolve();
}, timeoutMs);
void subscribeLibrarySyncIdle(p => {
if (p.serverId !== serverId) return;
clearTimeout(timer);
unlisten?.();
resolve();
}).then(fn => {
unlisten = fn;
});
});
}
async function invokeSync(serverId: string, kind: LibrarySyncQueueKind): Promise<void> {
if (kind === 'verify') {
await librarySyncVerifyIntegrity({ serverId });