feat: enhance backup import functionality with locking mechanism and checksum support

webapp/src/components/backup-center/RemoteBackupBrowser.tsx

@@ -1,4 +1,4 @@
-import { Download, FileArchive, FolderOpen, RefreshCw, RotateCcw, Trash2 } from 'lucide-preact';
+import { Download, FileArchive, FolderOpen, FolderUp, RefreshCw, RotateCcw, Trash2 } from 'lucide-preact';
 import type { RemoteBackupBrowserResponse } from '@/lib/api/backup';
 import { formatBytes, formatDateTime, isZipCandidate } from '@/lib/backup-center';
 import { t } from '@/lib/i18n';
@@ -38,14 +38,6 @@ export function RemoteBackupBrowser(props: RemoteBackupBrowserProps) {
 
       <div className="section-head">
         <h3>{t('txt_backup_remote_title')}</h3>
-        {props.canBrowse ? (
-          <div className="actions">
-            <button type="button" className="btn btn-secondary small" disabled={props.loadingRemoteBrowser || props.disableWhileBusy} onClick={props.onRefresh}>
-              <RefreshCw size={14} className="btn-icon" />
-              {t('txt_backup_remote_refresh')}
-            </button>
-          </div>
-        ) : null}
       </div>
 
       {!props.destinationIsSaved ? (
@@ -59,20 +51,28 @@ export function RemoteBackupBrowser(props: RemoteBackupBrowserProps) {
             <span>{props.remoteBrowser.currentPath ? `/${props.remoteBrowser.currentPath}` : '/'}</span>
           </div>
 
-          <div className="actions backup-browser-nav">
-            <button type="button" className="btn btn-secondary small" disabled={props.loadingRemoteBrowser || props.disableWhileBusy} onClick={() => props.onShowPath('')}>
-              <FolderOpen size={14} className="btn-icon" />
-              {t('txt_backup_remote_root')}
-            </button>
-            <button
-              type="button"
-              className="btn btn-secondary small"
-              disabled={props.loadingRemoteBrowser || props.disableWhileBusy || props.remoteBrowser.parentPath === null}
-              onClick={() => props.onShowPath(props.remoteBrowser?.parentPath || '')}
-            >
-              <RotateCcw size={14} className="btn-icon" />
-              {t('txt_backup_remote_up')}
-            </button>
+          <div className="backup-browser-nav">
+            <div className="actions backup-browser-nav-left">
+              <button type="button" className="btn btn-secondary small" disabled={props.loadingRemoteBrowser || props.disableWhileBusy} onClick={() => props.onShowPath('')}>
+                <FolderOpen size={14} className="btn-icon" />
+                {t('txt_backup_remote_root')}
+              </button>
+              <button
+                type="button"
+                className="btn btn-secondary small"
+                disabled={props.loadingRemoteBrowser || props.disableWhileBusy || props.remoteBrowser.parentPath === null}
+                onClick={() => props.onShowPath(props.remoteBrowser?.parentPath || '')}
+              >
+                <FolderUp size={14} className="btn-icon" />
+                {t('txt_backup_remote_up')}
+              </button>
+            </div>
+            {props.canBrowse ? (
+              <button type="button" className="btn btn-secondary small" disabled={props.loadingRemoteBrowser || props.disableWhileBusy} onClick={props.onRefresh}>
+                <RefreshCw size={14} className="btn-icon" />
+                {t('txt_backup_remote_refresh')}
+              </button>
+            ) : null}
           </div>
 
           {props.loadingRemoteBrowser ? (
@@ -80,6 +80,12 @@ export function RemoteBackupBrowser(props: RemoteBackupBrowserProps) {
           ) : props.remoteBrowser.items.length ? (
             <>
               <div className="backup-browser-list">
+                <div className="backup-browser-head" aria-hidden="true">
+                  <span>{t('txt_name')}</span>
+                  <span>{t('txt_backup_remote_modified')}</span>
+                  <span>{t('txt_backup_remote_size')}</span>
+                  <span>{t('txt_actions')}</span>
+                </div>
                 {props.visibleItems.map((item) => (
                   <div key={`${item.isDirectory ? 'd' : 'f'}:${item.path}`} className="backup-browser-row">
                     <button
@@ -92,10 +98,12 @@ export function RemoteBackupBrowser(props: RemoteBackupBrowserProps) {
                       {item.isDirectory ? <FolderOpen size={16} className="btn-icon" /> : <FileArchive size={16} className="btn-icon" />}
                       <span className="backup-browser-name">{item.name}</span>
                     </button>
-                    <div className="backup-browser-meta">
-                      <span>{item.modifiedAt ? formatDateTime(item.modifiedAt) : t('txt_backup_remote_unknown_time')}</span>
-                      <span>{item.isDirectory ? t('txt_backup_remote_folder') : formatBytes(item.size)}</span>
-                    </div>
+                    <span className="backup-browser-meta backup-browser-modified">
+                      {item.modifiedAt ? formatDateTime(item.modifiedAt) : t('txt_backup_remote_unknown_time')}
+                    </span>
+                    <span className="backup-browser-meta backup-browser-size">
+                      {item.isDirectory ? t('txt_backup_remote_folder') : formatBytes(item.size)}
+                    </span>
                     <div className="actions backup-browser-actions">
                       {item.isDirectory ? (
                         <button type="button" className="btn btn-secondary small" onClick={() => props.onShowPath(item.path)}>

webapp/src/lib/i18n/locales/en.ts

@@ -228,6 +228,8 @@ const en: Record<string, string> = {
   "txt_backup_remote_folder": "Folder",
   "txt_backup_remote_unknown_time": "Unknown time",
   "txt_backup_remote_current_path": "Current Folder",
+  "txt_backup_remote_modified": "Modified",
+  "txt_backup_remote_size": "Size",
   "txt_backup_remote_load_failed": "Loading remote backups failed",
   "txt_backup_remote_invalid_response": "Invalid remote backup response",
   "txt_backup_remote_download_failed": "Downloading remote backup failed",

webapp/src/lib/i18n/locales/es.ts

@@ -228,6 +228,8 @@ const es: Record<string, string> = {
   "txt_backup_remote_folder": "Carpeta",
   "txt_backup_remote_unknown_time": "Hora desconocida",
   "txt_backup_remote_current_path": "Carpeta actual",
+  "txt_backup_remote_modified": "Modificado",
+  "txt_backup_remote_size": "Tamaño",
   "txt_backup_remote_load_failed": "Error al cargar copias de seguridad remotas",
   "txt_backup_remote_invalid_response": "Respuesta de copia de seguridad remota no válida",
   "txt_backup_remote_download_failed": "Error al descargar copia de seguridad remota",

webapp/src/lib/i18n/locales/ru.ts

@@ -228,6 +228,8 @@ const ru: Record<string, string> = {
   "txt_backup_remote_folder": "Папка",
   "txt_backup_remote_unknown_time": "Неизвестное время",
   "txt_backup_remote_current_path": "Текущая папка",
+  "txt_backup_remote_modified": "Изменено",
+  "txt_backup_remote_size": "Размер",
   "txt_backup_remote_load_failed": "Не удалось загрузить удаленные резервные копии.",
   "txt_backup_remote_invalid_response": "Неверный ответ удаленного резервного копирования",
   "txt_backup_remote_download_failed": "Не удалось загрузить удаленную резервную копию.",

webapp/src/lib/i18n/locales/zh-CN.ts

@@ -228,6 +228,8 @@ const zhCN: Record<string, string> = {
   "txt_backup_remote_folder": "文件夹",
   "txt_backup_remote_unknown_time": "未知时间",
   "txt_backup_remote_current_path": "当前目录",
+  "txt_backup_remote_modified": "修改时间",
+  "txt_backup_remote_size": "大小",
   "txt_backup_remote_load_failed": "读取远端备份失败",
   "txt_backup_remote_invalid_response": "远端备份响应无效",
   "txt_backup_remote_download_failed": "下载远端备份失败",

webapp/src/lib/i18n/locales/zh-TW.ts

@@ -228,6 +228,8 @@ const zhTW: Record<string, string> = {
   "txt_backup_remote_folder": "文件夾",
   "txt_backup_remote_unknown_time": "未知時間",
   "txt_backup_remote_current_path": "當前目錄",
+  "txt_backup_remote_modified": "修改時間",
+  "txt_backup_remote_size": "大小",
   "txt_backup_remote_load_failed": "讀取遠端備份失敗",
   "txt_backup_remote_invalid_response": "遠端備份響應無效",
   "txt_backup_remote_download_failed": "下載遠端備份失敗",

webapp/src/styles/dark.css

@@ -340,6 +340,7 @@
 :root[data-theme='dark'] .backup-recommendation-step,
 :root[data-theme='dark'] .backup-recommendation-inline-note,
 :root[data-theme='dark'] .backup-recommendation-linked-item,
+:root[data-theme='dark'] .backup-browser-head,
 :root[data-theme='dark'] .backup-browser-meta,
 :root[data-theme='dark'] .backup-browser-empty,
 :root[data-theme='dark'] .backup-inline-note,
@@ -360,6 +361,10 @@
   color: var(--primary-strong);
 }
 
+:root[data-theme='dark'] .backup-browser-head {
+  background: var(--panel-subtle);
+}
+
 :root[data-theme='dark'] .restore-progress-overlay {
   background: var(--overlay-strong);
   backdrop-filter: blur(8px);

webapp/src/styles/management.css

@@ -363,16 +363,34 @@
 }
 
 .backup-browser-nav {
-  @apply mb-2.5;
+  @apply mb-2.5 flex items-center justify-between gap-2;
+}
+
+.backup-browser-nav-left {
+  @apply min-w-0;
 }
 
 .backup-browser-list {
-  @apply overflow-hidden rounded-xl border bg-white;
+  @apply overflow-hidden rounded-lg border bg-white;
   border: 1px solid var(--line);
 }
 
+.backup-browser-head {
+  @apply grid items-center gap-3 px-3 py-2 text-[11px] font-bold uppercase tracking-[0.08em];
+  grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.75fr) minmax(92px, 0.4fr) minmax(220px, auto);
+  border-bottom: 1px solid var(--line);
+  color: #64748b;
+  background: #f8fafc;
+}
+
+.backup-browser-head span:nth-child(2),
+.backup-browser-head span:nth-child(3),
+.backup-browser-head span:nth-child(4) {
+  text-align: right;
+}
+
 .backup-browser-pagination {
-  @apply mt-2.5 flex items-center justify-end gap-2.5;
+  @apply mt-2.5 flex items-center justify-center gap-2.5;
 }
 
 .backup-browser-page-indicator {
@@ -385,13 +403,15 @@
 }
 
 .backup-browser-row {
-  @apply grid items-center gap-2.5 px-3 py-2.5;
-  grid-template-columns: minmax(0, 1fr) auto auto;
+  @apply grid items-center gap-3 px-3 py-2;
+  grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.75fr) minmax(92px, 0.4fr) minmax(220px, auto);
+  min-height: 48px;
 }
 
 .backup-browser-entry {
   @apply inline-flex cursor-pointer items-center gap-2 border-0 bg-transparent p-0 text-left;
   color: #0f172a;
+  min-width: 0;
 }
 
 .backup-browser-entry.file {
@@ -404,12 +424,17 @@
 }
 
 .backup-browser-meta {
-  @apply grid justify-items-end gap-1 text-right text-[13px];
+  @apply block text-right text-[13px];
   color: #64748b;
 }
 
+.backup-browser-size {
+  font-variant-numeric: tabular-nums;
+}
+
 .backup-browser-actions {
   justify-content: flex-end;
+  flex-wrap: nowrap;
 }
 
 .backup-browser-empty {

webapp/src/styles/responsive.css

@@ -46,6 +46,24 @@
     grid-template-columns: 1fr;
   }
 
+  .backup-browser-head {
+    display: none;
+  }
+
+  .backup-browser-meta {
+    text-align: left;
+  }
+
+  .backup-browser-actions {
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .backup-browser-nav {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
   .settings-twofactor-grid {
     grid-template-columns: 1fr;
   }
@@ -1110,6 +1128,24 @@
     grid-template-columns: 1fr;
   }
 
+  .backup-browser-head {
+    display: none;
+  }
+
+  .backup-browser-meta {
+    text-align: left;
+  }
+
+  .backup-browser-actions {
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .backup-browser-nav {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
   .backup-grid {
     gap: 8px;
     padding: 0;