feat: gestión de amigos y mejora visual del dropdown de búsqueda
- FriendshipController: carga también amigos aceptados con su friendship - friendships/index: tabs con 'Mis amigos' (tabla con Mensaje/Quitar) y 'Solicitudes' - Notificaciones de solicitud abren directamente la pestaña de solicitudes (#solicitudes) - Dropdown de búsqueda: bordes redondeados, sombra suave, margen superior, hover en items, etiqueta de sección y separadores finos Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,47 +1,156 @@
|
||||
@extends('layouts.landing')
|
||||
@section('title', 'Solicitudes de Amistad')
|
||||
@section('title', 'Amigos')
|
||||
|
||||
@section('content')
|
||||
<div class="container" style="max-width:680px">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header bg-white font-weight-bold">
|
||||
<i class="fas fa-user-friends mr-2 text-primary"></i> Solicitudes de amistad
|
||||
<div class="container" style="max-width:760px">
|
||||
|
||||
@if(session('success'))
|
||||
<div class="alert alert-success alert-dismissible fade show py-2">
|
||||
{{ session('success') }}
|
||||
<button type="button" class="close" data-dismiss="alert"><span>×</span></button>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
@forelse($requests as $friendship)
|
||||
<div class="d-flex align-items-center p-3 border-bottom">
|
||||
<a href="{{ route('social.profile', $friendship->sender) }}">
|
||||
<img src="{{ $friendship->sender->profile_photo_url }}"
|
||||
class="rounded-circle mr-3" width="50" height="50" style="object-fit:cover">
|
||||
@endif
|
||||
|
||||
<div class="card shadow-sm">
|
||||
|
||||
{{-- Tabs --}}
|
||||
<div class="card-header bg-white p-0">
|
||||
<ul class="nav nav-tabs border-0" id="friendTabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active font-weight-bold px-4 py-3" data-toggle="tab" href="#tab-friends">
|
||||
<i class="fas fa-user-check mr-1 text-success"></i>
|
||||
Mis amigos
|
||||
<span class="badge badge-secondary ml-1">{{ $friends->count() }}</span>
|
||||
</a>
|
||||
<div class="flex-grow-1">
|
||||
<a href="{{ route('social.profile', $friendship->sender) }}" class="font-weight-bold text-dark">
|
||||
{{ $friendship->sender->name }} {{ $friendship->sender->apellidoPaterno }}
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link font-weight-bold px-4 py-3" data-toggle="tab" href="#tab-requests">
|
||||
<i class="fas fa-user-plus mr-1 text-primary"></i>
|
||||
Solicitudes
|
||||
@if($requests->count())
|
||||
<span class="badge badge-danger ml-1">{{ $requests->count() }}</span>
|
||||
@endif
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tab-content">
|
||||
|
||||
{{-- ── Tab: Mis amigos ── --}}
|
||||
<div class="tab-pane fade show active" id="tab-friends">
|
||||
@if($friends->isEmpty())
|
||||
<div class="text-center text-muted py-5">
|
||||
<i class="fas fa-user-friends fa-3x mb-3 d-block"></i>
|
||||
<p class="mb-2">Aún no tienes amigos agregados.</p>
|
||||
<a href="{{ route('feed') }}" class="btn btn-primary btn-sm">
|
||||
<i class="fas fa-search mr-1"></i> Buscar personas
|
||||
</a>
|
||||
<div class="text-muted small">{{ $friendship->created_at->diffForHumans() }}</div>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<form action="{{ route('friendships.accept', $friendship) }}" method="POST" class="mr-2">
|
||||
@csrf
|
||||
<button class="btn btn-primary btn-sm">
|
||||
<i class="fas fa-check mr-1"></i> Aceptar
|
||||
</button>
|
||||
</form>
|
||||
<form action="{{ route('friendships.destroy', $friendship) }}" method="POST">
|
||||
@csrf @method('DELETE')
|
||||
<button class="btn btn-outline-secondary btn-sm">
|
||||
<i class="fas fa-times mr-1"></i> Rechazar
|
||||
</button>
|
||||
</form>
|
||||
@else
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead class="thead-light">
|
||||
<tr>
|
||||
<th style="width:48px"></th>
|
||||
<th>Nombre</th>
|
||||
<th class="d-none d-md-table-cell text-muted small">Amigos desde</th>
|
||||
<th class="text-right">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($friends as $friend)
|
||||
<tr>
|
||||
<td class="py-2">
|
||||
<a href="{{ route('social.profile', $friend) }}">
|
||||
<img src="{{ $friend->profile_photo_url }}"
|
||||
class="rounded-circle"
|
||||
width="40" height="40" style="object-fit:cover">
|
||||
</a>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<a href="{{ route('social.profile', $friend) }}"
|
||||
class="font-weight-bold text-dark">
|
||||
{{ $friend->name }} {{ $friend->apellidoPaterno }}
|
||||
</a>
|
||||
<div class="text-muted small">{{ $friend->email }}</div>
|
||||
</td>
|
||||
<td class="py-2 d-none d-md-table-cell text-muted small">
|
||||
{{ $friend->friendship->updated_at->format('d M Y') }}
|
||||
</td>
|
||||
<td class="py-2 text-right">
|
||||
<a href="{{ route('chat.show', $friend) }}"
|
||||
class="btn btn-sm btn-outline-primary mr-1"
|
||||
title="Enviar mensaje">
|
||||
<i class="fas fa-comment"></i>
|
||||
<span class="d-none d-md-inline ml-1">Mensaje</span>
|
||||
</a>
|
||||
<form action="{{ route('friendships.destroy', $friend->friendship) }}"
|
||||
method="POST" class="d-inline"
|
||||
onsubmit="return confirm('¿Quitar a {{ addslashes($friend->name) }} de tus amigos?')">
|
||||
@csrf @method('DELETE')
|
||||
<button class="btn btn-sm btn-outline-danger" title="Quitar amigo">
|
||||
<i class="fas fa-user-times"></i>
|
||||
<span class="d-none d-md-inline ml-1">Quitar</span>
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="text-center text-muted py-5">
|
||||
<i class="fas fa-user-check fa-3x mb-3 d-block text-success"></i>
|
||||
No tienes solicitudes pendientes.
|
||||
</div>
|
||||
@endforelse
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- ── Tab: Solicitudes pendientes ── --}}
|
||||
<div class="tab-pane fade" id="tab-requests">
|
||||
@forelse($requests as $friendship)
|
||||
<div class="d-flex align-items-center p-3 border-bottom">
|
||||
<a href="{{ route('social.profile', $friendship->sender) }}">
|
||||
<img src="{{ $friendship->sender->profile_photo_url }}"
|
||||
class="rounded-circle mr-3" width="48" height="48" style="object-fit:cover">
|
||||
</a>
|
||||
<div class="flex-grow-1">
|
||||
<a href="{{ route('social.profile', $friendship->sender) }}"
|
||||
class="font-weight-bold text-dark d-block">
|
||||
{{ $friendship->sender->name }} {{ $friendship->sender->apellidoPaterno }}
|
||||
</a>
|
||||
<small class="text-muted">{{ $friendship->created_at->diffForHumans() }}</small>
|
||||
</div>
|
||||
<div class="d-flex" style="gap:.4rem">
|
||||
<form action="{{ route('friendships.accept', $friendship) }}" method="POST">
|
||||
@csrf
|
||||
<button class="btn btn-primary btn-sm">
|
||||
<i class="fas fa-check mr-1"></i> Aceptar
|
||||
</button>
|
||||
</form>
|
||||
<form action="{{ route('friendships.destroy', $friendship) }}" method="POST">
|
||||
@csrf @method('DELETE')
|
||||
<button class="btn btn-outline-secondary btn-sm">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="text-center text-muted py-5">
|
||||
<i class="fas fa-check-circle fa-3x mb-3 d-block text-success"></i>
|
||||
No tienes solicitudes pendientes.
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
<script>
|
||||
// Abrir tab de solicitudes si viene de notificación
|
||||
if (window.location.hash === '#solicitudes') {
|
||||
document.querySelector('[href="#tab-requests"]')?.click();
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
|
||||
Reference in New Issue
Block a user