Последняя версия с сервера прошлого разработчика

resources/js/Shared/Messanger/BoardRoomList.vue

@@ -0,0 +1,81 @@
+<template>
+  <div :class="{
+         'bg-purple': !room.is_my_message && !room.is_reading
+       }" class="relative flex items-center px-2 xl:px-8 hover:bg-indigo-300 cursor-pointer transition-colors"
+       @click="selectRoom(room)"
+  >
+    <div v-if="!room.is_reading && !room.is_my_message" class="absolute bottom-1 right-3 text-xxs text-white">
+      <span>не прочитано</span>
+    </div>
+    <div v-if="room.is_my_message" class="absolute bottom-0 right-3">
+      <div v-show="!room.is_reading" class="flex relative w-[30px] h-[24px] text-gray-light">
+        <svg xmlns="http://www.w3.org/2000/svg"
+             width="16"
+             height="16" viewBox="0 0 24 24"
+             fill="none" stroke="currentColor"
+             stroke-width="2" stroke-linecap="round"
+             stroke-linejoin="round" class="absolute top-0 right-0"
+        ><polyline points="20 6 9 17 4 12"></polyline></svg>
+      </div>
+      <div v-show="room.is_reading" class="flex relative w-[30px] h-[24px] text-orange">
+        <svg xmlns="http://www.w3.org/2000/svg"
+             width="16"
+             height="16" viewBox="0 0 24 24"
+             fill="none" stroke="currentColor"
+             stroke-width="2" stroke-linecap="round"
+             stroke-linejoin="round" class="absolute top-0 right-[5px]"
+        ><polyline points="20 6 9 17 4 12"></polyline></svg>
+        <svg xmlns="http://www.w3.org/2000/svg"
+             width="16"
+             height="16" viewBox="0 0 24 24"
+             fill="none" stroke="currentColor"
+             stroke-width="2" stroke-linecap="round"
+             stroke-linejoin="round" class="absolute top-0 right-0"
+        ><polyline points="20 6 9 17 4 12"></polyline></svg>
+      </div>
+    </div>
+
+    <div class="absolute top-2 right-2 text-xxs lg:text-xs text-gray-light">
+      {{ room.updated_at_human }}
+    </div>
+    <user-avatar :user="room.correspond" size="small"
+                 class="flex-shrink-0 w-10 h-10 lg:w-12 lg:h-12 xl:w-14 xl:h-14 text-sm xl:text-lg"
+    />
+    <div class="ml-3 flex flex-col w-4/5 overflow-hidden">
+      <span class="text-sm lg:text-base block text-white">{{ room.correspond.name }}</span>
+      <span class="text-xs lg:text-sm truncate text-gray-light">
+        <span v-if="room.is_my_message" class="text-orange">Вы:</span>
+        {{ room.message }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import UserAvatar from '@/Shared/Misc/UserAvatar.vue'
+export default {
+    components: {
+        UserAvatar,
+    },
+    props: {
+        room: {
+            type: Object,
+            default: () => {}
+        },
+    },
+    emits:{
+        'select-room': null
+    },
+
+    setup(props, {emit}){
+        const selectRoom = (room) => {
+            emit('select-room', room)
+        }
+
+        return {
+            selectRoom
+        }
+    },
+
+}
+</script>