fix: auto-refresh remote backup directory when cache is stale (#312)

When entering the cloud backup page, the remote backup directory list only showed cached data and required a manual click of the refresh button to see new backup files. This change adds a TTL-based auto-refresh that fetches fresh data when the cache is older than 5 minutes.

Changes:
- Added refreshedAt tracking per cache key in persisted state
- Added REMOTE_BROWSER_REFRESH_TTL_MS (5 min) constant
- Added useEffect that triggers auto-refresh when destination is selected and cached data is stale
- Stamped refresh timestamps after successful API responses
- Cleaned up timestamps on destination delete and settings save

webapp/src/components/BackupCenterPage.tsx

@@ -13,6 +13,7 @@ import {
 } from '@/lib/api/backup';
 import {
   REMOTE_BROWSER_ITEMS_PER_PAGE,
+  REMOTE_BROWSER_REFRESH_TTL_MS,
   compareRemoteItems,
   createDraftBackupSettings,
   createDraftDestinationRecord,
@@ -217,6 +218,7 @@ export default function BackupCenterPage(props: BackupCenterPageProps) {
   const [remoteBrowserCache, setRemoteBrowserCache] = useState<Record<string, RemoteBackupBrowserResponse>>(persistedRemoteState.cache);
   const [remoteBrowserPathByDestination, setRemoteBrowserPathByDestination] = useState<Record<string, string>>(persistedRemoteState.pathByDestination);
   const [remoteBrowserPageByKey, setRemoteBrowserPageByKey] = useState<Record<string, number>>(persistedRemoteState.pageByKey);
+  const [remoteBrowserRefreshedAt, setRemoteBrowserRefreshedAt] = useState<Record<string, number>>(persistedRemoteState.refreshedAt || {});
   const [showAddChooser, setShowAddChooser] = useState(false);
 
   const visibleDestinations = getVisibleDestinations(settings);
@@ -308,8 +310,22 @@ export default function BackupCenterPage(props: BackupCenterPageProps) {
       pathByDestination: remoteBrowserPathByDestination,
       pageByKey: remoteBrowserPageByKey,
       selectedDestinationId,
+      refreshedAt: remoteBrowserRefreshedAt,
     });
-  }, [props.currentUserId, remoteBrowserCache, remoteBrowserPageByKey, remoteBrowserPathByDestination, selectedDestinationId]);
+  }, [props.currentUserId, remoteBrowserCache, remoteBrowserPageByKey, remoteBrowserPathByDestination, remoteBrowserRefreshedAt, selectedDestinationId]);
+
+  useEffect(() => {
+    if (!savedSelectedDestination) return;
+    const destinationId = savedSelectedDestination.id;
+    const path = remoteBrowserPathByDestination[destinationId] || '';
+    const cacheKey = getRemoteBrowserCacheKey(destinationId, path);
+    const lastRefreshed = remoteBrowserRefreshedAt[cacheKey] || 0;
+    const isStale = Date.now() - lastRefreshed > REMOTE_BROWSER_REFRESH_TTL_MS;
+    if (isStale) {
+      void loadRemoteBrowser(destinationId, path, { force: true });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [savedSelectedDestination?.id]);
 
   useEffect(() => {
     if (!restoreProgress) {
@@ -398,6 +414,7 @@ export default function BackupCenterPage(props: BackupCenterPageProps) {
       };
       setRemoteBrowserCache((current) => ({ ...current, [cacheKey]: nextBrowser }));
       setRemoteBrowserPageByKey((current) => ({ ...current, [cacheKey]: 1 }));
+      setRemoteBrowserRefreshedAt((current) => ({ ...current, [cacheKey]: Date.now() }));
     } catch (error) {
       const message = error instanceof Error ? error.message : t('txt_backup_remote_load_failed');
       setLocalError(message);
@@ -543,6 +560,7 @@ export default function BackupCenterPage(props: BackupCenterPageProps) {
       ).cache);
       setRemoteBrowserPathByDestination((current) => Object.fromEntries(Object.entries(current).filter(([key]) => key !== destinationIdToDelete)));
       setRemoteBrowserPageByKey((current) => Object.fromEntries(Object.entries(current).filter(([key]) => !key.startsWith(`${destinationIdToDelete}:`))));
+      setRemoteBrowserRefreshedAt((current) => Object.fromEntries(Object.entries(current).filter(([key]) => !key.startsWith(`${destinationIdToDelete}:`))));
       setSelectedDestinationId(nextSelected);
       setConfirmDeleteDestinationOpen(false);
       props.onNotify('success', t('txt_backup_destination_deleted'));
@@ -670,6 +688,7 @@ export default function BackupCenterPage(props: BackupCenterPageProps) {
         setRemoteBrowserCache((current) => Object.fromEntries(Object.entries(current).filter(([key]) => !key.startsWith(`${destinationIdToInvalidate}:`))));
         setRemoteBrowserPathByDestination((current) => Object.fromEntries(Object.entries(current).filter(([key]) => key !== destinationIdToInvalidate)));
         setRemoteBrowserPageByKey((current) => Object.fromEntries(Object.entries(current).filter(([key]) => !key.startsWith(`${destinationIdToInvalidate}:`))));
+        setRemoteBrowserRefreshedAt((current) => Object.fromEntries(Object.entries(current).filter(([key]) => !key.startsWith(`${destinationIdToInvalidate}:`))));
       }
       setSelectedDestinationId(nextSelected);
       props.onNotify('success', t('txt_backup_settings_saved'));