feat : new ui et message discord

components/DiagramStorage.vue

@@ -1,35 +1,48 @@
 <template>
-  <section class="flex flex-col items-center p-4">
-    <template v-if="loading">
-      <TextSkeleton custom-class="h-7 w-40" />
-      <CircleSkeleton custom-class="mt-2 h-[140px] w-[140px]" />
-      <BlockSkeleton custom-class="mt-2 h-5 w-36" />
+  <section class="storage-card">
+    <template v-if="item.loading">
+      <TextSkeleton custom-class="h-5 w-28" />
+      <CircleSkeleton custom-class="mt-3 h-[120px] w-[120px]" />
+      <BlockSkeleton custom-class="mt-3 h-4 w-32" />
     </template>
 
     <template v-else>
-      <p class="text-center text-xl font-semibold uppercase">{{ hostName }}</p>
-      <div class="relative h-[140px] w-[140px]" :class="statusColorClass">
-        <svg class="h-full w-full -rotate-90" viewBox="0 0 120 120" aria-label="Pourcentage restant">
+      <p class="font-mono text-[11px] font-medium uppercase tracking-[0.2em] text-white/60">
+        {{ item.hostName }}
+      </p>
+
+      <div class="chart-wrapper" :class="item.statusColorClass">
+        <svg class="chart-svg" viewBox="0 0 120 120" aria-label="Pourcentage restant">
           <circle
-            class="fill-none stroke-[rgba(255,255,255,0.22)] [stroke-width:10]"
-            cx="60"
-            cy="60"
-            :r="chartRadius"
+              class="track"
+              cx="60" cy="60"
+              :r="item.chartRadius"
           />
           <circle
-            class="fill-none stroke-[currentColor] [stroke-linecap:round] [stroke-width:10] transition-[stroke-dashoffset] duration-300"
-            cx="60"
-            cy="60"
-            :r="chartRadius"
-            :style="{ strokeDasharray: `${chartCircumference}`, strokeDashoffset: `${chartOffset}` }"
+              class="progress"
+              cx="60" cy="60"
+              :r="item.chartRadius"
+              :style="{
+              strokeDasharray: `${item.chartCircumference}`,
+              strokeDashoffset: `${item.chartOffset}`
+            }"
           />
         </svg>
-        <div class="absolute inset-0 flex flex-col items-center justify-center">
-          <strong class="text-2xl leading-none">{{ remainingPercentText }}</strong>
+        <div class="chart-label">
+          <strong class="font-mono text-2xl font-bold leading-none">
+            {{ item.remainingPercentText }}
+          </strong>
+          <span class="mt-1 font-mono text-[9px] uppercase tracking-widest text-m-muted">
+            libre
+          </span>
         </div>
       </div>
 
-      <p class="mt-1 text-center text-sm font-semibold">{{ usedText }} / {{ totalText }}</p>
+      <p class="font-mono text-xs font-medium text-m-muted/80">
+        {{ item.usedText }}
+        <span class="mx-0.5 text-m-muted/40">/</span>
+        {{ item.totalText }}
+      </p>
     </template>
   </section>
 </template>
@@ -40,24 +53,69 @@ import BlockSkeleton from "~/components/skeleton/BlockSkeleton.vue"
 import TextSkeleton from "~/components/skeleton/TextSkeleton.vue"
 
 defineProps<{
-  loading: boolean
-  hostName: string
-  statusColorClass: string
-  chartRadius: number
-  chartCircumference: number
-  chartOffset: number
-  remainingPercentText: string
-  usedText: string
-  totalText: string
+  item: {
+    loading: boolean
+    hostName: string
+    statusColorClass: string
+    chartRadius: number
+    chartCircumference: number
+    chartOffset: number
+    remainingPercentText: string
+    usedText: string
+    totalText: string
+  }
 }>()
 </script>
 
 <style scoped>
-.m-success {
+.storage-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1.25rem 1rem;
+  gap: 0.25rem;
+}
+
+.chart-wrapper {
+  position: relative;
+  width: 120px;
+  height: 120px;
+}
+
+.chart-svg {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+
+.track {
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.06);
+  stroke-width: 8;
+}
+
+.progress {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 8;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.chart-label {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.status-success {
   color: rgb(var(--m-success));
 }
 
-.m-error {
+.status-error {
   color: rgb(var(--m-error));
 }
 </style>