feat: chat en tiempo real bidireccional funcionando con Reverb

2026-04-26 02:15:21 -06:00
parent 2de99b8cd2
commit ab967e8ba4
15 changed files with 352 additions and 392 deletions
@@ -0,0 +1,39 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-12">
+            <div class="card shadow" style="height:calc(100vh - 120px); display:flex; flex-direction:column;">
+                <div class="card-header bg-primary text-white">
+                    <h5 class="mb-0"><i class="fas fa-comments"></i> Chats</h5>
+                </div>
+                <div class="card-body p-0" style="overflow-y: auto;">
+                    @foreach($users as $user)
+                    <a href="{{ route('chat.show', $user) }}" class="text-decoration-none">
+                        <div class="d-flex align-items-center p-3 border-bottom chat-user-item">
+                            <img src="{{ $user->profile_photo_url }}"
+                                 class="rounded-circle mr-3"
+                                 width="45" height="45"
+                                 style="object-fit:cover">
+                            <div>
+                                <div class="font-weight-bold text-dark">{{ $user->name }}</div>
+                                <small class="text-muted">{{ $user->getRoleNames()->first() }}</small>
+                            </div>
+                        </div>
+                    </a>
+                    @endforeach
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
+
+@section('scripts')
+<style>
+    #content { overflow: hidden !important; }
+    .container-fluid { height: calc(100vh - 120px); }
+    .sticky-footer { display: none !important; }
+</style>
+@endsection