Finish Notifications -> Conversation

This commit is contained in:
2026-05-25 09:55:47 +02:00
parent a778222564
commit 250509055b
11 changed files with 238 additions and 8 deletions

View File

@@ -0,0 +1,68 @@
<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>

View File

@@ -14,7 +14,7 @@
<button type="button" class="btn" x-show="$store.notifications.unread > 0" @click="$store.notifications.markAllRead()" title="Mark all as read">
<i data-lucide="check-circle" size="14"></i>
</button>
<a href="{{ xfRoute('account.alerts') }}" class="btn">
<a href="{{ xfRoute('account/alerts') }}" class="btn">
<i data-lucide="external-link" size="14"></i>
</a>
</div>

View File

@@ -62,9 +62,19 @@
@include('components.notifications')
</div>
<button class="btn">
<i data-lucide="mail" size="18"></i>
</button>
<div x-data x-init="$store.conversations.unviewed = {{ \Auth::user()->conversations_unread }}" style="position:relative">
<button type="button" class="btn" :class="{ 'active': $store.conversations.start }" @click="$store.conversations.open($el)" @click.outside="$store.conversations.close()">
<i data-lucide="mail" size="18"></i>
<span
class="topbar-badge"
:class="$store.conversations.unread > 9 ? 'topbar-badge--overflow' : ''"
x-show="$store.conversations.unread > 0"
x-text="$store.conversations.unread > 99 ? '99+' : $store.conversations.unread"
></span>
</button>
@include('components.conversations')
</div>
@endif
<button class="btn">
<i data-lucide="settings" size="18"></i>