feat : new ui et message discord

components/BackupList.vue

@@ -1,44 +1,58 @@
 <template>
-  <div class="bg-m-secondary w-[507px] h-[367px] rounded-md mx-4 shadow-md/50 shadow-black">
-    <p class="font-bold text-3xl text-m-tertiary my-1 mx-3">
-      {{ title }}
-    </p>
+  <div class="backup-list-card card-glow">
+    <div class="card-header">
+      <h2 class="card-title">{{ title }}</h2>
+    </div>
 
-    <div v-if="loading">
+    <div v-if="!folder" class="empty-state">
+      <IconifyIcon icon="mdi:folder-open-outline" class="text-3xl text-m-muted/40" />
+      <p class="mt-2 font-mono text-xs text-m-muted/50">
+        Selectionnez un dossier
+      </p>
+    </div>
+
+    <div v-else-if="loading" class="file-list">
       <div
         v-for="n in 6"
         :key="`backup-skeleton-${n}`"
-        class="relative w-[483px] h-[39px] mx-3 mb-[10px]"
+        class="file-row animate-shimmer"
       >
-        <ButtonSkeleton custom-class="h-full w-full" />
-        <div class="absolute inset-0 flex items-center justify-between px-3">
-          <TextSkeleton custom-class="h-5 w-[260px]" />
-          <CircleSkeleton custom-class="h-6 w-6 rounded-md" />
-        </div>
+        <TextSkeleton custom-class="h-4 w-48" />
+        <CircleSkeleton custom-class="h-5 w-5 rounded" />
       </div>
     </div>
 
-    <button
-        v-else
+    <div v-else-if="backups.length === 0" class="empty-state">
+      <IconifyIcon icon="mdi:file-hidden" class="text-3xl text-m-muted/40" />
+      <p class="mt-2 font-mono text-xs text-m-muted/50">
+        Aucun backup trouve
+      </p>
+    </div>
+
+    <div v-else class="file-list">
+      <button
         v-for="file in backups"
         :key="file"
-        class="bg-m-tertiary w-[483px] h-[39px] rounded-md shadow-md/50 shadow-m-black mx-3 mb-[10px] flex items-center justify-between cursor-pointer"
+        class="file-row"
         @click="downloadBackup(file)"
-    >
-      <p class="text-xl ml-3 truncate max-w-[400px]">
-        {{ file }}
-      </p>
-
-      <IconifyIcon
+      >
+        <div class="flex min-w-0 items-center gap-2.5">
+          <IconifyIcon icon="mdi:file-document-outline" class="text-base text-m-accent flex-shrink-0" />
+          <span class="truncate font-mono text-xs text-m-text">
+            {{ file }}
+          </span>
+        </div>
+        <IconifyIcon
           icon="mdi:download"
-          class="text-black text-2xl mr-3"
-      />
-    </button>
+          class="text-base text-m-muted flex-shrink-0 transition-colors duration-200"
+        />
+      </button>
+    </div>
   </div>
 </template>
+
 <script setup lang="ts">
 import {Icon as IconifyIcon} from "@iconify/vue"
-import ButtonSkeleton from "~/components/skeleton/ButtonSkeleton.vue"
 import CircleSkeleton from "~/components/skeleton/CircleSkeleton.vue"
 import TextSkeleton from "~/components/skeleton/TextSkeleton.vue"
 
@@ -49,8 +63,8 @@ const props = defineProps<{
 const backups = ref<string[]>([])
 const loading = ref(false)
 const title = computed(() => {
-  if (!props.folder) return "Backup"
-  return `Liste des backup de ${props.folder.toUpperCase()}`
+  if (!props.folder) return "Fichiers"
+  return `Backup — ${props.folder.toUpperCase()}`
 })
 
 const downloadBackup = (file: string) => {
@@ -78,3 +92,59 @@ watch(() => props.folder, async (folder) => {
   }
 })
 </script>
+
+<style scoped>
+.backup-list-card {
+  background: rgb(var(--m-secondary));
+  border-radius: 12px;
+  padding: 1.25rem;
+  transition: background-color 0.4s ease;
+}
+
+.card-header {
+  margin-bottom: 0.75rem;
+}
+
+.card-title {
+  font-family: var(--font-display);
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: rgb(var(--m-text));
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2.5rem 1rem;
+}
+
+.file-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.file-row {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.625rem 0.875rem;
+  border-radius: 8px;
+  background: rgb(var(--m-tertiary));
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.file-row:hover {
+  border-color: rgb(var(--m-accent) / 0.15);
+  background: rgb(var(--m-accent) / 0.06);
+}
+
+.file-row:hover .text-m-muted {
+  color: rgb(var(--m-accent));
+}
+</style>