mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-22 07:15:47 +00:00
cucadmuh
08b6aeeb17
* fix(perf): skip Performance Probe CPU snapshot poll on Windows Windows has no Rust CPU/RSS sampler, but the probe still invoked performance_cpu_snapshot every 2s when the modal or overlay pins were active. Skip the IPC on unsupported platforms and only poll JS-side metrics; do not start overlay polling for CPU/memory pins alone. * fix(analysis): park backfill coordinator until Advanced is configured #881 started run_coordinator_forever at app init with a 2s sleep even when disabled, waking tokio on every platform for no work. Park on Notify instead; wake on configure (enable/disable) and library sync-idle. Long sleeps use select with wake so sync-idle can interrupt COMPLETED_RECHECK waits. Investigation branch — not for merge until periodic CPU root cause is confirmed. * fix(perf): stop probe overlay flicker on live poll updates Publish CPU samples only after a valid jiffies baseline, skip no-op snapshot emits, and sync sparkline history atomically in the store. Overlay uses wall-clock sparkline time and auto-scales low CPU values. * fix(perf): cut idle Rust CPU from probe scan, cover prefetch, and storage poll Move performance_cpu_snapshot /proc work to spawn_blocking so tokio workers are not charged with probe sampling. Stop lazy cover strategy from running route prefetch disk stats every 1.5s, and slow hot-cache size refresh on Settings → Storage to 15s. * fix(perf): stabilize probe sparkline clock between live poll ticks Track sampleAt separately from updatedAt so CPU rate history and overlay sparklines only advance on real % changes, not FPS re-renders or RSS-only poll ticks. Hold CPU sparkline Y scale with a peak ref to avoid scale jumps. * fix(cover): restore lazy route prefetch without idle disk stats poll Re-enable lazy cover registry warm-up so cached WebP paths reach diskSrcCache before cells mount. Skip cover_cache_stats on every 1.5s tick — drain batches via ensure only, poll full disk usage every 30s when the registry is idle. * docs: CHANGELOG and credits for PR #939 idle CPU perf fix * fix(cover): peek before route prefetch ensure to match main responsiveness Route prefetch moved batch drain ahead of cover_cache_stats for idle CPU, which removed the accidental throttle and flooded ensure invoke slots. Use warmCoverDiskSrcBatch first (cached hits skip ensure), ensure misses only, and yield while high-priority viewport work is queued.
418 lines
19 KiB
TypeScript
418 lines
19 KiB
TypeScript
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { invoke } from '@tauri-apps/api/core';
|
|
import { open as openDialog } from '@tauri-apps/plugin-dialog';
|
|
import { Download, FolderOpen, Trash2, X } from 'lucide-react';
|
|
import { useAuthStore } from '../../store/authStore';
|
|
import { useHotCacheStore } from '../../store/hotCacheStore';
|
|
import { useOfflineStore } from '../../store/offlineStore';
|
|
import { clearImageCache, getImageCacheSize } from '../../utils/imageCache';
|
|
import { formatBytes, snapHotCacheMb } from '../../utils/format/formatBytes';
|
|
import SettingsSubSection from '../SettingsSubSection';
|
|
import CoverCacheStrategySection from './CoverCacheStrategySection';
|
|
|
|
export function StorageTab() {
|
|
const { t } = useTranslation();
|
|
const auth = useAuthStore();
|
|
const serverId = auth.activeServerId ?? '';
|
|
const clearAllOffline = useOfflineStore(s => s.clearAll);
|
|
const clearHotCacheDisk = useHotCacheStore(s => s.clearAllDisk);
|
|
const hotCacheEntries = useHotCacheStore(s => s.entries);
|
|
const [imageCacheBytes, setImageCacheBytes] = useState<number | null>(null);
|
|
const [offlineCacheBytes, setOfflineCacheBytes] = useState<number | null>(null);
|
|
const [hotCacheBytes, setHotCacheBytes] = useState<number | null>(null);
|
|
const [showClearConfirm, setShowClearConfirm] = useState(false);
|
|
const [clearing, setClearing] = useState(false);
|
|
|
|
const hotCacheTrackCount = useMemo(() => {
|
|
const prefix = `${serverId}:`;
|
|
return Object.keys(hotCacheEntries).filter(k => k.startsWith(prefix)).length;
|
|
}, [hotCacheEntries, serverId]);
|
|
|
|
// Load all three size readouts on mount.
|
|
useEffect(() => {
|
|
getImageCacheSize().then(setImageCacheBytes);
|
|
invoke<number>('get_offline_cache_size', { customDir: auth.offlineDownloadDir || null }).then(setOfflineCacheBytes).catch(() => setOfflineCacheBytes(0));
|
|
invoke<number>('get_hot_cache_size', { customDir: auth.hotCacheDownloadDir || null }).then(setHotCacheBytes).catch(() => setHotCacheBytes(0));
|
|
}, [auth.offlineDownloadDir, auth.hotCacheDownloadDir]);
|
|
|
|
/** Live disk usage for hot cache (interval + refresh when index changes). */
|
|
useEffect(() => {
|
|
const customDir = auth.hotCacheDownloadDir || null;
|
|
const refresh = () => {
|
|
invoke<number>('get_hot_cache_size', { customDir })
|
|
.then(setHotCacheBytes)
|
|
.catch(() => setHotCacheBytes(0));
|
|
};
|
|
refresh();
|
|
if (!auth.hotCacheEnabled) return;
|
|
const interval = window.setInterval(refresh, 15_000);
|
|
return () => window.clearInterval(interval);
|
|
}, [auth.hotCacheEnabled, auth.hotCacheDownloadDir]);
|
|
|
|
useEffect(() => {
|
|
if (!auth.hotCacheEnabled) return;
|
|
const handle = window.setTimeout(() => {
|
|
invoke<number>('get_hot_cache_size', { customDir: auth.hotCacheDownloadDir || null })
|
|
.then(setHotCacheBytes)
|
|
.catch(() => setHotCacheBytes(0));
|
|
}, 400);
|
|
return () => window.clearTimeout(handle);
|
|
}, [hotCacheEntries, auth.hotCacheEnabled, auth.hotCacheDownloadDir]);
|
|
|
|
const handleClearCache = useCallback(async () => {
|
|
setClearing(true);
|
|
await clearImageCache();
|
|
await clearAllOffline(serverId);
|
|
const [imgBytes, offBytes] = await Promise.all([
|
|
getImageCacheSize(),
|
|
invoke<number>('get_offline_cache_size', { customDir: auth.offlineDownloadDir || null }).catch(() => 0),
|
|
]);
|
|
setImageCacheBytes(imgBytes);
|
|
setOfflineCacheBytes(offBytes);
|
|
setShowClearConfirm(false);
|
|
setClearing(false);
|
|
}, [clearAllOffline, serverId, auth.offlineDownloadDir]);
|
|
|
|
const pickOfflineDir = async () => {
|
|
const selected = await openDialog({ directory: true, multiple: false, title: t('settings.offlineDirChange') });
|
|
if (selected && typeof selected === 'string') {
|
|
auth.setOfflineDownloadDir(selected);
|
|
}
|
|
};
|
|
|
|
const pickHotCacheDir = async () => {
|
|
const selected = await openDialog({ directory: true, multiple: false, title: t('settings.hotCacheDirChange') });
|
|
if (selected && typeof selected === 'string') {
|
|
auth.setHotCacheDownloadDir(selected);
|
|
useHotCacheStore.setState({ entries: {} });
|
|
invoke<number>('get_hot_cache_size', { customDir: selected }).then(setHotCacheBytes).catch(() => setHotCacheBytes(0));
|
|
}
|
|
};
|
|
|
|
const pickDownloadFolder = async () => {
|
|
const selected = await openDialog({ directory: true, multiple: false, title: t('settings.pickFolderTitle') });
|
|
if (selected && typeof selected === 'string') {
|
|
auth.setDownloadFolder(selected);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/* Offline Library (In-App) — includes cache settings */}
|
|
<SettingsSubSection
|
|
title={t('settings.offlineDirTitle')}
|
|
icon={<Download size={16} />}
|
|
>
|
|
<div className="settings-card">
|
|
<div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 14, lineHeight: 1.5 }}>
|
|
{t('settings.offlineDirDesc')}
|
|
</div>
|
|
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
|
<input
|
|
className="input"
|
|
type="text"
|
|
readOnly
|
|
value={auth.offlineDownloadDir || t('settings.offlineDirDefault')}
|
|
style={{ flex: 1, fontSize: 13, color: auth.offlineDownloadDir ? 'var(--text-primary)' : 'var(--text-muted)', cursor: 'default' }}
|
|
/>
|
|
{auth.offlineDownloadDir && (
|
|
<button
|
|
className="btn btn-ghost"
|
|
onClick={() => auth.setOfflineDownloadDir('')}
|
|
data-tooltip={t('settings.offlineDirClear')}
|
|
style={{ color: 'var(--text-muted)', flexShrink: 0 }}
|
|
>
|
|
<X size={16} />
|
|
</button>
|
|
)}
|
|
<button className="btn btn-surface" onClick={pickOfflineDir} style={{ flexShrink: 0 }} id="settings-offline-dir-btn">
|
|
<FolderOpen size={16} /> {t('settings.offlineDirChange')}
|
|
</button>
|
|
</div>
|
|
{auth.offlineDownloadDir && (
|
|
<div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 8, lineHeight: 1.4 }}>
|
|
{t('settings.offlineDirHint')}
|
|
</div>
|
|
)}
|
|
|
|
<div style={{ borderTop: '1px solid var(--border)', margin: '16px 0' }} />
|
|
|
|
{(imageCacheBytes !== null || offlineCacheBytes !== null) && (
|
|
<div style={{ fontSize: 12, marginBottom: 12, display: 'flex', flexDirection: 'column', gap: 3 }}>
|
|
<div style={{ color: 'var(--text-secondary)' }}>
|
|
<span style={{ color: 'var(--text-muted)', marginRight: 4 }}>{t('settings.cacheUsedImages')}</span>
|
|
{imageCacheBytes !== null ? formatBytes(imageCacheBytes) : '…'}
|
|
</div>
|
|
<div style={{ color: 'var(--text-secondary)' }}>
|
|
<span style={{ color: 'var(--text-muted)', marginRight: 4 }}>{t('settings.cacheUsedOffline')}</span>
|
|
{offlineCacheBytes !== null ? formatBytes(offlineCacheBytes) : '…'}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
|
|
<span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>{t('settings.cacheMaxLabel')}</span>
|
|
<input
|
|
className="input"
|
|
type="number"
|
|
min={100}
|
|
max={50000}
|
|
step={100}
|
|
value={auth.maxCacheMb}
|
|
onChange={e => {
|
|
const v = Number(e.target.value);
|
|
if (v >= 100) auth.setMaxCacheMb(v);
|
|
}}
|
|
style={{ width: 80, padding: '4px 8px', fontSize: 13 }}
|
|
id="cache-size-input"
|
|
/>
|
|
<span style={{ fontSize: 13, color: 'var(--text-muted)' }}>MB</span>
|
|
</div>
|
|
|
|
{showClearConfirm ? (
|
|
<div style={{ background: 'color-mix(in srgb, var(--color-danger, #e53935) 10%, transparent)', borderRadius: 'var(--radius-sm)', padding: '10px 14px', fontSize: 13, lineHeight: 1.5 }}>
|
|
<div style={{ marginBottom: 8, color: 'var(--text-primary)' }}>{t('settings.cacheClearWarning')}</div>
|
|
<div style={{ display: 'flex', gap: 8 }}>
|
|
<button
|
|
className="btn btn-primary"
|
|
style={{ background: 'var(--color-danger, #e53935)', fontSize: 13 }}
|
|
onClick={handleClearCache}
|
|
disabled={clearing}
|
|
>
|
|
{t('settings.cacheClearConfirm')}
|
|
</button>
|
|
<button className="btn btn-ghost" style={{ fontSize: 13 }} onClick={() => setShowClearConfirm(false)} disabled={clearing}>
|
|
{t('settings.cacheClearCancel')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<button className="btn btn-ghost" style={{ fontSize: 13 }} onClick={() => setShowClearConfirm(true)}>
|
|
<Trash2 size={14} /> {t('settings.cacheClearBtn')}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</SettingsSubSection>
|
|
|
|
<CoverCacheStrategySection />
|
|
|
|
{/* Buffering */}
|
|
<SettingsSubSection
|
|
title={t('settings.nextTrackBufferingTitle')}
|
|
icon={<Download size={16} />}
|
|
>
|
|
<div className="settings-card">
|
|
<div style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.5, marginBottom: '0.75rem' }}>
|
|
{t('settings.preloadHotCacheMutualExclusive')}
|
|
</div>
|
|
|
|
{/* Preload mode */}
|
|
<div className="settings-toggle-row">
|
|
<div>
|
|
<div style={{ fontWeight: 500 }}>{t('settings.preloadMode')}</div>
|
|
<div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.preloadModeDesc')}</div>
|
|
</div>
|
|
<label className="toggle-switch" aria-label={t('settings.preloadMode')}>
|
|
<input
|
|
type="checkbox"
|
|
checked={auth.preloadMode !== 'off'}
|
|
onChange={e => {
|
|
if (e.target.checked) {
|
|
auth.setPreloadMode('balanced');
|
|
if (auth.hotCacheEnabled) auth.setHotCacheEnabled(false);
|
|
} else {
|
|
auth.setPreloadMode('off');
|
|
}
|
|
}}
|
|
/>
|
|
<span className="toggle-track" />
|
|
</label>
|
|
</div>
|
|
{auth.preloadMode !== 'off' && (
|
|
<>
|
|
<div style={{ paddingLeft: '1rem', marginTop: '0.5rem', display: 'flex', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap' }}>
|
|
{(['balanced', 'early', 'custom'] as const).map(mode => (
|
|
<button
|
|
key={mode}
|
|
className={`btn ${auth.preloadMode === mode ? 'btn-primary' : 'btn-surface'}`}
|
|
style={{ fontSize: 12, padding: '3px 12px' }}
|
|
onClick={() => auth.setPreloadMode(mode)}
|
|
>
|
|
{t(`settings.preload${mode.charAt(0).toUpperCase() + mode.slice(1)}` as any)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
{auth.preloadMode === 'custom' && (
|
|
<div style={{ paddingLeft: '1rem', marginTop: '0.5rem', display: 'flex', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap' }}>
|
|
<input
|
|
type="range"
|
|
min={5} max={120} step={5}
|
|
value={auth.preloadCustomSeconds}
|
|
onChange={e => auth.setPreloadCustomSeconds(parseInt(e.target.value))}
|
|
style={{ flex: 1, minWidth: 80, maxWidth: 200 }}
|
|
/>
|
|
<span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 36 }}>
|
|
{t('settings.preloadCustomSeconds', { n: auth.preloadCustomSeconds })}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
<div className="divider" />
|
|
|
|
{/* Hot Cache */}
|
|
<div className="settings-toggle-row">
|
|
<div>
|
|
<div style={{ fontWeight: 500 }}>{t('settings.hotCacheTitle')}</div>
|
|
<div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.hotCacheDisclaimer')}</div>
|
|
</div>
|
|
<label className="toggle-switch" aria-label={t('settings.hotCacheEnabled')}>
|
|
<input
|
|
type="checkbox"
|
|
checked={auth.hotCacheEnabled}
|
|
onChange={async e => {
|
|
const enabled = e.target.checked;
|
|
if (!enabled) {
|
|
await clearHotCacheDisk(auth.hotCacheDownloadDir || null);
|
|
setHotCacheBytes(0);
|
|
auth.setHotCacheEnabled(false);
|
|
} else {
|
|
auth.setHotCacheEnabled(true);
|
|
if (auth.preloadMode !== 'off') auth.setPreloadMode('off');
|
|
invoke<number>('get_hot_cache_size', { customDir: auth.hotCacheDownloadDir || null })
|
|
.then(setHotCacheBytes)
|
|
.catch(() => setHotCacheBytes(0));
|
|
}
|
|
}}
|
|
id="hot-cache-enabled-toggle"
|
|
/>
|
|
<span className="toggle-track" />
|
|
</label>
|
|
</div>
|
|
|
|
{auth.hotCacheEnabled && (
|
|
<div style={{ marginTop: '1.25rem' }}>
|
|
<div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
|
|
<input
|
|
className="input"
|
|
type="text"
|
|
readOnly
|
|
value={auth.hotCacheDownloadDir || t('settings.hotCacheDirDefault')}
|
|
style={{ flex: 1, minWidth: 0, fontSize: 13, color: auth.hotCacheDownloadDir ? 'var(--text-primary)' : 'var(--text-muted)', cursor: 'default' }}
|
|
/>
|
|
{auth.hotCacheDownloadDir && (
|
|
<button
|
|
type="button"
|
|
className="btn btn-ghost"
|
|
onClick={() => {
|
|
auth.setHotCacheDownloadDir('');
|
|
useHotCacheStore.setState({ entries: {} });
|
|
invoke<number>('get_hot_cache_size', { customDir: null }).then(setHotCacheBytes).catch(() => setHotCacheBytes(0));
|
|
}}
|
|
data-tooltip={t('settings.hotCacheDirClear')}
|
|
style={{ color: 'var(--text-muted)', flexShrink: 0 }}
|
|
>
|
|
<X size={16} />
|
|
</button>
|
|
)}
|
|
<button type="button" className="btn btn-surface" onClick={pickHotCacheDir} style={{ flexShrink: 0 }}>
|
|
<FolderOpen size={16} /> {t('settings.hotCacheDirChange')}
|
|
</button>
|
|
</div>
|
|
{auth.hotCacheDownloadDir && (
|
|
<div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 8, lineHeight: 1.4 }}>
|
|
{t('settings.hotCacheDirHint')}
|
|
</div>
|
|
)}
|
|
|
|
<div style={{ borderTop: '1px solid var(--border)', margin: '16px 0' }} />
|
|
|
|
<div style={{ fontSize: 12, marginBottom: 12, display: 'flex', flexDirection: 'column', gap: 3 }}>
|
|
<div style={{ color: 'var(--text-secondary)' }}>
|
|
<span style={{ color: 'var(--text-muted)', marginRight: 4 }}>{t('settings.cacheUsedHot')}</span>
|
|
{hotCacheBytes !== null ? formatBytes(hotCacheBytes) : '…'}
|
|
</div>
|
|
<div style={{ color: 'var(--text-secondary)' }}>
|
|
<span style={{ color: 'var(--text-muted)', marginRight: 4 }}>{t('settings.hotCacheTrackCount')}</span>
|
|
{hotCacheTrackCount}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div style={{ fontWeight: 500, marginBottom: 6 }}>{t('settings.hotCacheMaxMb')}</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
|
|
<input type="range" min={32} max={20000} step={32} value={snapHotCacheMb(auth.hotCacheMaxMb)} onChange={e => auth.setHotCacheMaxMb(parseInt(e.target.value, 10))} style={{ flex: 1, minWidth: 80, maxWidth: 200 }} id="hot-cache-max-mb-slider" />
|
|
<span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 60 }}>{snapHotCacheMb(auth.hotCacheMaxMb)} MB</span>
|
|
</div>
|
|
</div>
|
|
<div style={{ marginTop: '0.75rem' }}>
|
|
<div style={{ fontWeight: 500, marginBottom: 6 }}>{t('settings.hotCacheDebounce')}</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
|
|
<input type="range" min={0} max={600} step={1} value={Math.min(600, Math.max(0, auth.hotCacheDebounceSec))} onChange={e => auth.setHotCacheDebounceSec(parseInt(e.target.value, 10))} style={{ flex: 1, minWidth: 80, maxWidth: 200 }} id="hot-cache-debounce-slider" />
|
|
<span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 80 }}>
|
|
{Math.min(600, Math.max(0, auth.hotCacheDebounceSec)) === 0
|
|
? t('settings.hotCacheDebounceImmediate')
|
|
: t('settings.hotCacheDebounceSeconds', { n: Math.min(600, Math.max(0, auth.hotCacheDebounceSec)) })}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ borderTop: '1px solid var(--border)', margin: '16px 0' }} />
|
|
<button
|
|
type="button"
|
|
className="btn btn-ghost"
|
|
style={{ fontSize: 13 }}
|
|
onClick={async () => {
|
|
await clearHotCacheDisk(auth.hotCacheDownloadDir || null);
|
|
const b = await invoke<number>('get_hot_cache_size', { customDir: auth.hotCacheDownloadDir || null }).catch(() => 0);
|
|
setHotCacheBytes(b);
|
|
}}
|
|
>
|
|
<Trash2 size={14} /> {t('settings.hotCacheClearBtn')}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
</SettingsSubSection>
|
|
|
|
{/* ZIP Export & Archiving */}
|
|
<SettingsSubSection
|
|
title={t('settings.downloadsTitle')}
|
|
icon={<FolderOpen size={16} />}
|
|
>
|
|
<div className="settings-card">
|
|
<div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 14, lineHeight: 1.5 }}>
|
|
{t('settings.downloadsFolderDesc')}
|
|
</div>
|
|
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
|
<input
|
|
className="input"
|
|
type="text"
|
|
readOnly
|
|
value={auth.downloadFolder || t('settings.downloadsDefault')}
|
|
style={{ flex: 1, fontSize: 13, color: auth.downloadFolder ? 'var(--text-primary)' : 'var(--text-muted)', cursor: 'default' }}
|
|
/>
|
|
{auth.downloadFolder && (
|
|
<button
|
|
className="btn btn-ghost"
|
|
onClick={() => auth.setDownloadFolder('')}
|
|
aria-label={t('settings.clearFolder')}
|
|
data-tooltip={t('settings.clearFolder')}
|
|
style={{ color: 'var(--text-muted)', flexShrink: 0 }}
|
|
>
|
|
<X size={16} />
|
|
</button>
|
|
)}
|
|
<button className="btn btn-surface" onClick={pickDownloadFolder} style={{ flexShrink: 0 }} id="settings-download-folder-btn">
|
|
<FolderOpen size={16} /> {t('settings.pickFolder')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</SettingsSubSection>
|
|
</>
|
|
);
|
|
}
|