Start for Dev Branch

components/InboxList.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup >
 import { format, isToday } from 'date-fns'
 
 const props = defineProps({
@@ -12,15 +12,15 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue','emailSelected'])
 
-const mailsRefs = ref<Element[]>([])
+const mailsRefs = ref([])
 
 const selectedMail = computed({
   get() {
     return props.modelValue
   },
-  set(value: Mail | null) {
+  set(value) {
     emit('update:modelValue', value)
   }
 })
@@ -30,12 +30,17 @@ watch(selectedMail, () => {
     return
   }
 
-  const ref = mailsRefs.value[selectedMail.value.id]
-  if (ref) {
-    ref.scrollIntoView({ block: 'nearest' })
+  const ref1 = mailsRefs.value[selectedMail.value.id]
+  if (ref1) {
+    ref1.scrollIntoView({ block: 'nearest' })
   }
 })
 
+const changeMail = (mail) => {
+  selectedMail.value = mail
+  emit("emailSelected")
+}
+
 defineShortcuts({
   arrowdown: () => {
     const index = props.mails.findIndex((mail) => mail.id === selectedMail.value?.id)
@@ -59,15 +64,15 @@ defineShortcuts({
 </script>
 
 <template>
-  <UDashboardPanelContent class="p-0">
-    <div v-for="(mail, index) in mails" :key="index" :ref="el => { mailsRefs[mail.id] = el as Element }">
+  <div class="p-0 scrollCont overflow-scroll">
+    <div v-for="(mail, index) in mails" :key="index" :ref="el => { mailsRefs[mail.id] = el }">
       <div
           class="p-4 text-sm cursor-pointer border-l-2"
           :class="[
-          mail.unread ? 'text-gray-900 dark:text-white' : 'text-gray-600 dark:text-gray-300',
+          !mail.seen ? 'text-gray-900 dark:text-white' : 'text-gray-600 dark:text-gray-300',
           selectedMail && selectedMail.id === mail.id ? 'border-primary-500 dark:border-primary-400 bg-primary-100 dark:bg-primary-900/25' : 'border-white dark:border-gray-900 hover:border-primary-500/25 dark:hover:border-primary-400/25 hover:bg-primary-100/50 dark:hover:bg-primary-900/10'
         ]"
-          @click="selectedMail = mail"
+          @click="changeMail(mail)"
       >
         <div class="flex items-center justify-between" :class="[mail.unread && 'font-semibold']">
           <div class="flex items-center gap-3">
@@ -82,11 +87,17 @@ defineShortcuts({
           {{ mail.subject }}
         </p>
         <p class="text-gray-400 dark:text-gray-500 line-clamp-1">
-          {{ mail.body }}
+          {{ mail.text }}
         </p>
       </div>
 
       <UDivider />
     </div>
-  </UDashboardPanelContent>
-</template>
+  </div>
+</template>
+
+<style>
+.scrollCont {
+  height: 90vh;
+}
+</style>