frontend: polish app launch and release experience

neode-ui/src/views/settings/BackupSection.vue

@@ -27,6 +27,7 @@ const verifyingBackupId = ref<string | null>(null)
 const deletingBackupId = ref<string | null>(null)
 const backupStatusMsg = ref('')
 const backupStatusType = ref<'success' | 'error'>('success')
+const backupLoadError = ref('')
 
 function formatBackupSize(bytes: number): string {
   if (bytes < 1024) return `${bytes} B`
@@ -42,12 +43,15 @@ function showBackupStatus(msg: string, type: 'success' | 'error') {
 }
 
 async function loadBackups() {
+  const hadBackups = backupList.value.length > 0
   loadingBackups.value = true
+  backupLoadError.value = ''
   try {
     const res = await rpcClient.call<{ backups: BackupEntry[] }>({ method: 'backup.list' })
     backupList.value = res.backups || []
-  } catch {
-    backupList.value = []
+  } catch (e: unknown) {
+    backupLoadError.value = e instanceof Error ? e.message : t('settings.backupListFailed')
+    if (!hadBackups) backupList.value = []
   } finally {
     loadingBackups.value = false
   }
@@ -189,6 +193,8 @@ function copyChannelBackup() {
 }
 
 loadBackups()
+
+defineExpose({ loadBackups })
 </script>
 
 <template>
@@ -204,9 +210,19 @@ loadBackups()
         {{ t('settings.createBackup') }}
       </button>
     </div>
-    <div v-if="loadingBackups" class="text-sm text-white/40 py-4 text-center">{{ t('settings.loadingBackups') }}</div>
+    <div v-if="loadingBackups && backupList.length === 0" class="text-sm text-white/40 py-4 text-center">{{ t('settings.loadingBackups') }}</div>
     <div v-else-if="backupList.length === 0" class="text-sm text-white/40 py-4 text-center">{{ t('settings.noBackups') }}</div>
     <div v-else class="space-y-2">
+      <div v-if="loadingBackups" class="p-2 text-center text-white/45 text-xs flex items-center justify-center gap-2">
+        <svg class="animate-spin h-3.5 w-3.5" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+        Refreshing backups...
+      </div>
+      <div v-else-if="backupLoadError" class="p-2 rounded-lg border border-red-400/20 bg-red-500/10 text-red-200/85 text-xs">
+        {{ backupLoadError }}
+      </div>
       <div v-for="b in backupList" :key="b.id" class="flex flex-col sm:flex-row sm:items-center sm:justify-between p-3 bg-white/5 rounded-lg gap-2">
         <div class="min-w-0">
           <div class="text-sm text-white font-medium">{{ b.description || t('settings.systemBackup') }}</div>
@@ -235,7 +251,7 @@ loadBackups()
 
   <!-- Create Backup Modal -->
   <Teleport to="body">
-    <div v-if="showCreateBackupModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/10 backdrop-blur-md" @click.self="showCreateBackupModal = false">
+    <div v-if="showCreateBackupModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-md" @click.self="showCreateBackupModal = false">
       <div class="glass-card p-6 w-full max-w-md" role="dialog" aria-modal="true" aria-labelledby="create-backup-title">
         <h3 id="create-backup-title" class="text-lg font-semibold text-white mb-4">{{ t('settings.createEncryptedBackup') }}</h3>
         <div class="space-y-3">
@@ -260,7 +276,7 @@ loadBackups()
 
   <!-- Restore Backup Modal -->
   <Teleport to="body">
-    <div v-if="showRestoreModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/10 backdrop-blur-md" @click.self="showRestoreModal = false">
+    <div v-if="showRestoreModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-md" @click.self="showRestoreModal = false">
       <div class="glass-card p-6 w-full max-w-md" role="dialog" aria-modal="true" aria-labelledby="restore-backup-title">
         <h3 id="restore-backup-title" class="text-lg font-semibold text-white mb-2">{{ t('settings.restoreBackupTitle') }}</h3>
         <p class="text-sm text-red-400/80 mb-4">{{ t('settings.restoreWarning') }}</p>