messages implemented

2026-02-26 21:12:32 +01:00
parent d0aefc5ddc
commit 15b7b77d20
168 changed files with 14728 additions and 6786 deletions
--- a/resources/js/components/messaging/ConversationList.jsx
+++ b/resources/js/components/messaging/ConversationList.jsx
@@ -0,0 +1,123 @@
+import React, { useMemo, useState } from 'react'
+
+/**
+ * Left panel: searchable, paginated list of conversations.
+ */
+export default function ConversationList({ conversations, loading, activeId, currentUserId, onSelect }) {
+  const [search, setSearch] = useState('')
+
+  const filtered = useMemo(() => {
+    const q = search.toLowerCase().trim()
+    if (!q) return conversations
+    return conversations.filter(conv => {
+      const label = convLabel(conv, currentUserId).toLowerCase()
+      const last  = (conv.latest_message?.[0]?.body ?? '').toLowerCase()
+      return label.includes(q) || last.includes(q)
+    })
+  }, [conversations, search, currentUserId])
+
+  return (
+    <div className="flex flex-col flex-1 overflow-hidden">
+      {/* Search */}
+      <div className="px-3 py-2 border-b border-gray-100 dark:border-gray-800">
+        <input
+          type="search"
+          placeholder="Search conversations…"
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          className="w-full rounded-lg bg-gray-100 dark:bg-gray-800 px-3 py-1.5 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+
+      {/* List */}
+      <ul className="flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800">
+        {loading && (
+          <li className="px-4 py-8 text-center text-sm text-gray-400">Loading…</li>
+        )}
+        {!loading && filtered.length === 0 && (
+          <li className="px-4 py-8 text-center text-sm text-gray-400">
+            {search ? 'No matches found.' : 'No conversations yet.'}
+          </li>
+        )}
+        {filtered.map(conv => (
+          <ConversationRow
+            key={conv.id}
+            conv={conv}
+            isActive={conv.id === activeId}
+            currentUserId={currentUserId}
+            onClick={() => onSelect(conv.id)}
+          />
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+function ConversationRow({ conv, isActive, currentUserId, onClick }) {
+  const label       = convLabel(conv, currentUserId)
+  const lastMsg     = Array.isArray(conv.latest_message) ? conv.latest_message[0] : conv.latest_message
+  const preview     = lastMsg ? truncate(lastMsg.body, 60) : 'No messages yet'
+  const unread      = conv.unread_count ?? 0
+  const myParticipant = conv.all_participants?.find(p => p.user_id === currentUserId)
+  const isArchived  = myParticipant?.is_archived ?? false
+  const isPinned    = myParticipant?.is_pinned ?? false
+
+  return (
+    <li>
+      <button
+        onClick={onClick}
+        className={`w-full text-left px-4 py-3 flex gap-3 hover:bg-gray-50 dark:hover:bg-gray-800/60 transition-colors ${isActive ? 'bg-blue-50 dark:bg-blue-900/30' : ''} ${isArchived ? 'opacity-60' : ''}`}
+      >
+        {/* Avatar placeholder */}
+        <div className="flex-shrink-0 w-10 h-10 rounded-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center text-white text-sm font-medium">
+          {label.charAt(0).toUpperCase()}
+        </div>
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center justify-between gap-1">
+            <div className="flex items-center gap-1 min-w-0">
+              {isPinned && <span className="text-xs" title="Pinned">📌</span>}
+              <span className={`text-sm font-medium truncate ${isActive ? 'text-blue-700 dark:text-blue-300' : 'text-gray-900 dark:text-gray-100'}`}>
+                {label}
+              </span>
+            </div>
+            {conv.last_message_at && (
+              <span className="text-xs text-gray-400 flex-shrink-0">
+                {relativeTime(conv.last_message_at)}
+              </span>
+            )}
+          </div>
+          <div className="flex items-center justify-between gap-1 mt-0.5">
+            <span className="text-xs text-gray-400 truncate">{preview}</span>
+            {unread > 0 && (
+              <span className="flex-shrink-0 min-w-[1.25rem] h-5 rounded-full bg-blue-500 text-white text-xs font-medium flex items-center justify-center px-1">
+                {unread > 99 ? '99+' : unread}
+              </span>
+            )}
+          </div>
+        </div>
+      </button>
+    </li>
+  )
+}
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+function convLabel(conv, currentUserId) {
+  if (conv.type === 'group') return conv.title ?? 'Group'
+  const other = conv.all_participants?.find(p => p.user_id !== currentUserId)
+  return other?.user?.username ?? 'Direct message'
+}
+
+function truncate(str, max) {
+  if (!str) return ''
+  return str.length > max ? str.slice(0, max) + '…' : str
+}
+
+function relativeTime(iso) {
+  const diff = (Date.now() - new Date(iso).getTime()) / 1000
+  if (diff < 60) return 'now'
+  if (diff < 3600) return `${Math.floor(diff / 60)}m`
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h`
+  return `${Math.floor(diff / 86400)}d`
+}