feat: add check backup

2026-03-16 11:30:34 +01:00
parent 3f00c229cb
commit 5495e18173
10 changed files with 678 additions and 95 deletions
--- a/pages/backup.vue
+++ b/pages/backup.vue
@@ -13,10 +13,19 @@
          </p>
        </div>
      </header>
-      <div class="dashboard-grid">
-        <section class="grid-left" aria-label="Commandes de sauvegarde">
+
+      <section
+        class="status-strip animate-fade-in-up"
+        style="animation-delay: 100ms"
+        aria-label="Statut des sauvegardes"
+      >
+        <StatusBackup />
+      </section>
+
+      <div class="workspace-grid">
+        <section class="workspace-sidebar" aria-label="Commandes de sauvegarde">
          <BackupButtonSee
-            class="animate-fade-in-up backup-selector"
+            class="animate-fade-in-up"
            style="animation-delay: 120ms"
            @select="selectedBackup = $event"
          />
@@ -27,24 +36,27 @@
          />
        </section>

-        <section class="grid-middle" aria-labelledby="backup-files-title">
+        <section class="workspace-main" aria-labelledby="backup-files-title">
          <div class="files-panel animate-fade-in-up" style="animation-delay: 240ms">
            <div class="files-panel-header">
-              <div>
+              <div class="files-panel-copy">
                <p class="section-kicker">Fichiers</p>
                <h2 id="backup-files-title" class="files-panel-title">
                  Historique des sauvegardes
                </h2>
+                <p class="files-panel-description">
+                  Consultez les archives disponibles et telechargez le dernier backup du dossier selectionne.
+                </p>
              </div>
-              <p class="files-panel-meta">
-                {{ selectedBackup ? `Source ${selectedBackup}` : "En attente de selection" }}
-              </p>
+              <span
+                class="selection-pill"
+                :class="{ 'selection-pill-active': selectedBackup }"
+              >
+                {{ selectedBackup ? `Source ${selectedBackup}` : "Selection requise" }}
+              </span>
            </div>

-            <BackupList
-              class="backup-list-mobile"
-              :folder="selectedBackup"
-            />
+            <BackupList :folder="selectedBackup" />
          </div>

          <section
@@ -53,9 +65,12 @@
            aria-labelledby="backup-output-title"
          >
            <div class="files-panel-header">
-              <div>
+              <div class="files-panel-copy">
                <p class="section-kicker">Execution</p>
                <h2 id="backup-output-title" class="files-panel-title">Resultat du script</h2>
+                <p class="files-panel-description">
+                  Le retour du script apparait ici apres execution avec un etat clair en succes ou en erreur.
+                </p>
              </div>
              <span
                class="panel-badge"
@@ -170,15 +185,12 @@ const handleScriptResult = async (payload: ScriptResult) => {
 }

 .dashboard-header {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
-  gap: 1.5rem;
-  align-items: end;
  margin-bottom: 1.5rem;
 }

 .header-copy {
  min-width: 0;
+  max-width: 70ch;
 }

 .section-kicker {
@@ -197,26 +209,37 @@ const handleScriptResult = async (payload: ScriptResult) => {
  line-height: 1.65;
 }

-.dashboard-grid {
+.status-strip {
+  margin-bottom: 1.5rem;
+}
+
+.workspace-grid {
  display: grid;
-  grid-template-columns: 300px minmax(0, 1fr);
+  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
 }

-.grid-left,
-.grid-middle {
+.workspace-sidebar,
+.workspace-main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
 }

+.workspace-sidebar {
+  position: sticky;
+  top: 2rem;
+}
+
 .files-panel {
  padding: 1.25rem;
  border-radius: 20px;
-  background: rgb(var(--m-secondary) / 0.4);
-  border: 1px solid rgb(var(--m-accent) / 0.08);
+  background:
+    linear-gradient(180deg, rgb(var(--m-secondary) / 0.76), rgb(var(--m-secondary) / 0.92));
+  border: 1px solid rgb(var(--m-border) / 0.32);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
 }

 .output-panel {
@@ -225,12 +248,16 @@ const handleScriptResult = async (payload: ScriptResult) => {

 .files-panel-header {
  display: flex;
-  align-items: end;
+  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
 }

+.files-panel-copy {
+  min-width: 0;
+}
+
 .files-panel-title {
  margin: 0;
  font-family: var(--font-display);
@@ -239,19 +266,41 @@ const handleScriptResult = async (payload: ScriptResult) => {
  color: rgb(var(--m-text));
 }

-.files-panel-meta {
-  margin: 0;
+.files-panel-description {
+  margin: 0.5rem 0 0;
+  max-width: 54ch;
+  color: rgb(var(--m-muted));
+  line-height: 1.6;
+}
+
+.selection-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.25rem;
+  border-radius: 999px;
+  border: 1px solid rgb(var(--m-border) / 0.36);
+  background: rgb(var(--m-tertiary) / 0.45);
+  padding: 0.45rem 0.8rem;
  font-family: var(--font-mono);
-  font-size: 0.75rem;
+  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--m-muted));
-  text-align: right;
+  text-align: center;
+}
+
+.selection-pill-active {
+  border-color: rgb(var(--m-accent) / 0.2);
+  background: rgb(var(--m-accent) / 0.08);
+  color: rgb(var(--m-accent));
 }

 .panel-badge {
  display: inline-flex;
  align-items: center;
+  justify-content: center;
+  min-height: 2.25rem;
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font-family: var(--font-mono);
@@ -327,18 +376,22 @@ const handleScriptResult = async (payload: ScriptResult) => {
 }

@media (max-width: 1180px) {
-  .dashboard-header,
-  .dashboard-grid {
+  .workspace-grid {
    grid-template-columns: 1fr;
  }

+  .workspace-sidebar {
+    position: static;
+  }
+
  .files-panel-header {
    align-items: flex-start;
    flex-direction: column;
  }

-  .files-panel-meta {
-    text-align: left;
+  .selection-pill,
+  .panel-badge {
+    width: 100%;
  }
 }

@@ -350,5 +403,9 @@ const handleScriptResult = async (payload: ScriptResult) => {
  .files-panel {
    padding: 1rem;
  }
+
+  .files-panel-title {
+    font-size: 1.2rem;
+  }
 }
 </style>
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,9 +3,13 @@
    <div class="dashboard-container">
      <header class="dashboard-header">
        <div>
+          <p class="section-kicker">Operations</p>
          <h1 class="font-display text-3xl font-bold tracking-tight text-m-text">
            Monitoring
          </h1>
+          <p class="header-description">
+            Visualisez l'etat des applications, des sauvegardes et des ressources systeme depuis une vue unique.
+          </p>
        </div>
      </header>

@@ -221,8 +225,24 @@ onBeforeUnmount(() => {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
-  padding-bottom: 1.5rem;
-  border-bottom: 1px solid rgba(80, 140, 255, 0.08);
+  padding-bottom: 1.25rem;
+  border-bottom: 1px solid rgba(80, 140, 255, 0.1);
+}
+
+.section-kicker {
+  margin: 0 0 0.45rem;
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: rgb(var(--m-accent));
+}
+
+.header-description {
+  max-width: 62ch;
+  margin-top: 0.9rem;
+  color: rgb(var(--m-muted));
+  line-height: 1.65;
 }

 .storage-section {
@@ -240,9 +260,11 @@ onBeforeUnmount(() => {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
-  border-radius: 12px;
-  background: rgb(var(--m-secondary));
-  padding: 0.75rem;
+  border-radius: 18px;
+  background:
+    linear-gradient(180deg, rgb(var(--m-secondary) / 0.78), rgb(var(--m-secondary) / 0.92));
+  border: 1px solid rgb(var(--m-border) / 0.32);
+  padding: 0.85rem;
 }

 .content-grid {
@@ -281,6 +303,7 @@ onBeforeUnmount(() => {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
+  min-width: 0;
 }

@media (max-width: 1180px) {