refactor: Minor UI refactoring

Author: becem-gharbi

components/Account/Profile.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ImageUpload
+    <UploadImage
       ref="uploadRef"
       class="mx-auto shadow hover:shadow-lg border-blue-300 border-2"
       :src="model.picture"

components/Account/Sessions.vue

@@ -1,48 +1,34 @@
 <template>
-  <n-list>
-    <n-list-item v-for="session of sessions" :key="session.id">
-      <n-thing>
-        <template #avatar>
+  <div class="flex flex-col gap-4">
+    <div v-for="session of sessions" :key="session.id" class="flex justify-between">
+      <TitleDate
+        :title=" [
+          session.ua && UAParser.UAParser(session.ua).browser.name,
+          session.ua && UAParser.UAParser(session.ua).os.name,
+          session.ua && UAParser.UAParser(session.ua).device.model
+        ]
+          .join(' ')"
+
+        :updated-at="session.updatedAt"
+      >
+        <template #icon>
           <n-tag size="small" :type="session.current ? 'success' : 'warning'">
             {{ session.current ? 'Current' : 'Active' }}
           </n-tag>
         </template>
-
-        <template #header>
-          <n-text strong class="text-base">
-            {{
-              [
-                session.ua && UAParser.UAParser(session.ua).browser.name,
-                session.ua && UAParser.UAParser(session.ua).os.name,
-                session.ua && UAParser.UAParser(session.ua).device.model
-              ]
-                .join(' ')
-            }}
-          </n-text>
-
-          <n-text depth="3" class="text-base">
-            • <n-time
-              :time="new Date(session.updatedAt)"
-              type="relative"
-            />
-          </n-text>
-        </template>
-
-        <template #header-extra>
-          <TooltipIconButton
-            name="ph:trash"
-            size="small"
-            type="error"
-            secondary
-            :disabled="session.current"
-            message="Delete session"
-            circle
-            @click="() => handleSessionRevoke(session.id)"
-          />
-        </template>
-      </n-thing>
-    </n-list-item>
-  </n-list>
+      </TitleDate>
+
+      <TooltipIconButton
+        name="ph:trash"
+        type="error"
+        secondary
+        :disabled="session.current"
+        message="Delete session"
+        circle
+        @click="() => handleSessionRevoke(session.id)"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">

components/Device/Card.vue

@@ -1,17 +1,17 @@
 <template>
   <nuxt-link :to="`/devices/${device.id}`">
-    <n-card :title="device.name" size="small" hoverable class="h-full">
-      <n-text depth="3">
-        Created <n-time :time="new Date(device.createdAt)" type="relative" />
-      </n-text>
-      <br>
-      <n-text depth="3">
-        {{ device.description || 'no description' }}
-      </n-text>
+    <n-card size="small" hoverable class="h-full">
+      <template #header>
+        <TitleDate :title="device.name" :created-at="device.createdAt" />
+      </template>
 
       <template #header-extra>
         <DeviceStatus :device="device" :size="24" />
       </template>
+
+      <n-text depth="3">
+        {{ device.description || 'no description' }}
+      </n-text>
     </n-card>
   </nuxt-link>
 </template>

components/Project/Card.vue

@@ -1,10 +1,10 @@
 <template>
   <nuxt-link :to="`/projects/${project.id}`">
-    <n-card :title="project.name" size="small" hoverable class="h-full">
-      <n-text depth="3">
-        Created <n-time :time="new Date(project.createdAt)" type="relative" />
-      </n-text>
-      <br>
+    <n-card size="small" hoverable class="h-full">
+      <template #header>
+        <TitleDate :title="project.name" :created-at="project.createdAt" />
+      </template>
+
       <n-text depth="3">
         {{ project.description || 'no description' }}
       </n-text>

components/Project/Releases.vue

@@ -30,18 +30,7 @@
         :name="release.version"
       >
         <template #header>
-          <n-text strong>
-            {{ release.version }}
-          </n-text>
-          <n-text class="mx-2">
-            •
-          </n-text>
-          <n-text depth="3" class="text-base">
-            Created <n-time
-              :time="new Date(release.createdAt)"
-              type="relative"
-            />
-          </n-text>
+          <TitleDate :title="release.version" :created-at="release.createdAt" />
         </template>
 
         <LazyReleaseCard

components/Title/Date.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="flex gap-2 items-center">
+    <naive-icon v-if="icon" :name="icon" />
+
+    <slot name="icon" />
+
+    <n-text>
+      {{ title }}
+    </n-text>
+
+    <n-text v-if="createdAt" depth="3" class="text-base font-normal">
+      • Created <n-time :time="new Date(createdAt)" type="relative" />
+    </n-text>
+
+    <n-text v-if="updatedAt" depth="3" class="text-base font-normal">
+      • Updated <n-time :time="new Date(updatedAt)" type="relative" />
+    </n-text>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{title:string, icon?:string, createdAt?: string, updatedAt?:string}>()
+</script>