69 lines
2.7 KiB
PHP
69 lines
2.7 KiB
PHP
|
<div
|
||
|
|
x-data
|
||
|
|
x-cloak
|
||
|
|
x-show="$store.conversations.start"
|
||
|
|
x-translation:enter="dropdown-enter"
|
||
|
|
x-transition:leave="dropdown-leave"
|
||
|
|
class="conversations"
|
||
|
|
@click.outside="$store.conversations.close()"
|
||
|
|
@keydown.escape.window="$store.conversations.close()"
|
||
|
|
>
|
||
|
|
<div class="notifications-header">
|
||
|
|
<span class="notifications-header-title">Private Messages</span>
|
||
|
|
<div class="notifications-header-actions">
|
||
|
|
<a href="{{ xfRoute('direct-messages/add') }}" class="btn">
|
||
|
|
<i data-lucide="plus" size="14"></i>
|
||
|
|
</a>
|
||
|
|
<a href="{{ xfRoute('direct-messages') }}" class="btn">
|
||
|
|
<i data-lucide="external-link" size="14"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<template x-if="$store.conversations.loading">
|
||
|
|
<div class="notifications-loading">
|
||
|
|
<i data-lucide="loader-2" class="spin"></i>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template x-if="$store.conversations.error">
|
||
|
|
<div class="notifications-empty">
|
||
|
|
<i data-lucide="alert-circle" size="24"></i>
|
||
|
|
<span>Failed to load messages.</span>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template x-if="$store.conversations.data && !$store.conversations.loading">
|
||
|
|
<div>
|
||
|
|
|
||
|
|
<template x-if="$store.conversations.data.length === 0">
|
||
|
|
<div class="notifications-empty">
|
||
|
|
<i data-lucide="mail-off" size="24"></i>
|
||
|
|
<span>No new conversations.</span>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template x-for="conv in $store.conversations.data" :key="conv.conversation_id">
|
||
|
|
<a :href="`{{ xfRoute('direct-messages')}}/${conv.conversation_id}/#convMessage-${conv.last_message_id}`" class="notifications-item" :class="{ 'unread': conv.is_unread }">
|
||
|
|
<div class="notifications-avatar">
|
||
|
|
<template x-if="conv.Starter?.avatar_urls?.s">
|
||
|
|
<img :src="conv.Starter.avatar_urls.s" :alt="conv.username">
|
||
|
|
</template>
|
||
|
|
<template x-if="!conv.Starter?.avatar_urls?.s">
|
||
|
|
<span x-text="conv.username?.charAt(0).toUpperCase()"></span>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="notifications-content">
|
||
|
|
<span class="notifications-text" x-text="conv.title"></span>
|
||
|
|
<span class="notifications-date" x-text="new Date(conv.last_message_date * 1000).toLocaleDateString()"></span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="notifications-unread-dot" x-show="conv.is_unread"></div>
|
||
|
|
</a>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</div>
|