fix: align backup ui and downloads

components/BackupRun.vue

@@ -1,15 +1,31 @@
 <template>
-  <div class="backup-card card-glow">
+  <div
+    class="backup-card card-glow"
+    :class="{
+      'card-glow-success': message && !isError,
+      'card-glow-error': message && isError
+    }"
+  >
     <div class="card-header">
       <h2 class="card-title">Run Script</h2>
       <span class="font-mono text-[10px] text-m-muted tracking-widest uppercase">Scripts</span>
     </div>
 
-    <div v-if="loading" class="status-box">
+    <div
+      v-if="loading"
+      class="status-box"
+      role="status"
+      aria-live="polite"
+      aria-busy="true"
+    >
       Chargement des scripts...
     </div>
 
-    <div v-else class="backup-list">
+    <div
+      v-else-if="scripts.length"
+      class="backup-list"
+      :aria-busy="runningKey !== null"
+    >
       <button
         v-for="item in scripts"
         :key="item.key"
@@ -17,6 +33,8 @@
         class="backup-btn"
         :class="{ 'backup-btn-active': active === item.key }"
         :disabled="runningKey !== null"
+        :aria-pressed="active === item.key"
+        :aria-label="`Executer ${item.label}`"
         @click="runScript(item.key)"
       >
         <div class="flex items-center gap-2.5">
@@ -36,10 +54,25 @@
       </button>
     </div>
 
-    <div v-if="message" class="status-box" :class="statusClass">
-      <p class="status-title">{{ message }}</p>
-      <pre v-if="output" class="status-output">{{ output }}</pre>
+    <div
+      v-else
+      class="status-box status-empty"
+      role="status"
+      aria-live="polite"
+    >
+      Aucun script disponible.
     </div>
+
+    <div
+      v-if="message"
+      class="status-box"
+      :class="statusClass"
+      role="status"
+      :aria-live="isError ? 'assertive' : 'polite'"
+    >
+      <p class="status-title">{{ message }}</p>
+    </div>
+
   </div>
 </template>
 
@@ -51,6 +84,7 @@ type BackupScript = {
   key: string
   label: string
   icon: string
+  downloadFolders?: string[]
 }
 
 type BackupScriptListResponse = {
@@ -61,27 +95,58 @@ type BackupScriptRunResponse = {
   ok: boolean
   key: string
   label: string
+  downloadFolders?: string[]
   output: string
 }
 
+type ScriptResult = {
+  key: string | null
+  label: string
+  output: string
+  isError: boolean
+  downloadFolders: string[]
+}
+
+const emit = defineEmits<{
+  result: [payload: ScriptResult]
+}>()
+
 const active = ref<string | null>(null)
 const loading = ref(true)
 const runningKey = ref<string | null>(null)
 const scripts = ref<BackupScript[]>([])
-const output = ref("")
-const message = ref("")
+const output = ref<string>("")
+const message = ref<string>("")
 const isError = ref(false)
 
 const statusClass = computed(() => (isError.value ? "status-error" : "status-success"))
 
 const loadScripts = async () => {
   loading.value = true
+  message.value = ""
+  output.value = ""
+  isError.value = false
+  emit("result", {
+    key: null,
+    label: "",
+    output: "",
+    isError: false,
+    downloadFolders: []
+  })
   try {
     const data = await $fetch<BackupScriptListResponse>("/api/backup-script")
     scripts.value = data.scripts
   } catch (error) {
+    scripts.value = []
     isError.value = true
     message.value = `Erreur chargement scripts: ${error instanceof Error ? error.message : String(error)}`
+    emit("result", {
+      key: null,
+      label: "",
+      output: "",
+      isError: true,
+      downloadFolders: []
+    })
   } finally {
     loading.value = false
   }
@@ -99,12 +164,26 @@ const runScript = async (key: string) => {
       method: "POST",
       body: { key }
     })
-    message.value = `${data.label} execute`
-    output.value = data.output
+    message.value = `${data.label} execute avec succes`
+    output.value = data.output || "Aucune sortie retournee."
+    emit("result", {
+      key: data.key,
+      label: data.label,
+      output: output.value,
+      isError: false,
+      downloadFolders: data.downloadFolders || []
+    })
   } catch (error: any) {
     isError.value = true
     message.value = error?.data?.statusMessage || "Erreur execution script"
     output.value = ""
+    emit("result", {
+      key,
+      label: scripts.value.find((item) => item.key === key)?.label || key,
+      output: "",
+      isError: true,
+      downloadFolders: []
+    })
   } finally {
     runningKey.value = null
   }
@@ -154,6 +233,11 @@ onMounted(loadScripts)
   color: rgb(var(--m-text));
 }
 
+.backup-btn:focus-visible {
+  outline: 2px solid rgb(var(--m-accent) / 0.7);
+  outline-offset: 2px;
+}
+
 .backup-btn:disabled {
   cursor: wait;
   opacity: 0.7;
@@ -188,14 +272,12 @@ onMounted(loadScripts)
   border: 1px solid rgb(255 99 99 / 0.3);
 }
 
-.status-title {
-  margin: 0;
-}
-
-.status-output {
-  margin: 0.75rem 0 0;
-  white-space: pre-wrap;
-  word-break: break-word;
+.status-empty {
   color: rgb(var(--m-muted));
 }
+
+.status-title {
+  margin: 0;
+  line-height: 1.5;
+}
 </style>