245 lines
15 KiB
PHP
245 lines
15 KiB
PHP
@extends('layouts.nova')
|
|
|
|
@section('content')
|
|
<x-nova-page-header
|
|
section="Dashboard"
|
|
title="Received Comments"
|
|
icon="fa-comments"
|
|
:breadcrumbs="collect([
|
|
(object) ['name' => 'Dashboard', 'url' => '/dashboard'],
|
|
(object) ['name' => 'Comments', 'url' => route('dashboard.comments.received')],
|
|
])"
|
|
description="A clean inbox for feedback on your artworks, with quick scanning, filtering, and direct artwork context."
|
|
>
|
|
<x-slot name="actions">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<a href="{{ route('community.activity') }}"
|
|
class="inline-flex items-center gap-2 rounded-lg border border-white/[0.08] bg-white/[0.04] px-4 py-2 text-sm font-medium text-white/70 transition-colors hover:bg-white/[0.08] hover:text-white">
|
|
<i class="fa-solid fa-wave-square text-xs"></i>
|
|
Community activity
|
|
</a>
|
|
</div>
|
|
</x-slot>
|
|
</x-nova-page-header>
|
|
|
|
<div class="px-6 pb-16 pt-8 md:px-10">
|
|
<div class="mb-6 flex flex-wrap items-center gap-2 rounded-2xl border border-white/[0.06] bg-white/[0.025] p-2 shadow-[0_12px_30px_rgba(0,0,0,0.14)]">
|
|
<a href="{{ route('dashboard.comments.received') }}"
|
|
class="inline-flex items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium transition {{ request()->routeIs('dashboard.comments.received') ? 'bg-sky-500/15 text-sky-200 ring-1 ring-sky-400/20' : 'text-white/60 hover:bg-white/[0.05] hover:text-white' }}">
|
|
<i class="fa-solid fa-inbox"></i>
|
|
Received
|
|
</a>
|
|
<a href="{{ route('messages.index') }}"
|
|
class="inline-flex items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium text-white/60 transition hover:bg-white/[0.05] hover:text-white">
|
|
<i class="fa-solid fa-envelope"></i>
|
|
Messages
|
|
</a>
|
|
<a href="{{ route('dashboard.notifications') }}"
|
|
class="inline-flex items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium text-white/60 transition hover:bg-white/[0.05] hover:text-white">
|
|
<i class="fa-solid fa-bell"></i>
|
|
Notifications
|
|
</a>
|
|
</div>
|
|
|
|
@if(($freshlyClearedCount ?? 0) > 0)
|
|
<div class="mb-6 rounded-2xl border border-emerald-400/20 bg-emerald-500/10 px-5 py-4 text-sm text-emerald-100 shadow-[0_12px_30px_rgba(16,185,129,0.12)]">
|
|
Marked {{ number_format((int) $freshlyClearedCount) }} new {{ (int) $freshlyClearedCount === 1 ? 'comment' : 'comments' }} as read when you opened this inbox.
|
|
</div>
|
|
@endif
|
|
|
|
<div class="mb-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
|
|
<div class="rounded-2xl border border-sky-400/20 bg-sky-500/10 p-5 shadow-[0_18px_45px_rgba(10,132,255,0.10)]">
|
|
<p class="text-xs font-semibold uppercase tracking-[0.22em] text-sky-200/75">Total comments</p>
|
|
<p class="mt-3 text-3xl font-semibold text-white">{{ number_format((int) ($stats['total'] ?? 0)) }}</p>
|
|
<p class="mt-2 text-sm text-sky-100/70">All comments on your approved artworks.</p>
|
|
</div>
|
|
|
|
<div class="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 p-5">
|
|
<p class="text-xs font-semibold uppercase tracking-[0.22em] text-emerald-200/75">Last 7 days</p>
|
|
<p class="mt-3 text-3xl font-semibold text-white">{{ number_format((int) ($stats['recent'] ?? 0)) }}</p>
|
|
<p class="mt-2 text-sm text-emerald-100/70">Recent conversation momentum.</p>
|
|
</div>
|
|
|
|
<div class="rounded-2xl border border-violet-400/20 bg-violet-500/10 p-5">
|
|
<p class="text-xs font-semibold uppercase tracking-[0.22em] text-violet-200/75">Unique commenters</p>
|
|
<p class="mt-3 text-3xl font-semibold text-white">{{ number_format((int) ($stats['commenters'] ?? 0)) }}</p>
|
|
<p class="mt-2 text-sm text-violet-100/70">Distinct people engaging with your work.</p>
|
|
</div>
|
|
|
|
<div class="rounded-2xl border border-amber-400/20 bg-amber-500/10 p-5">
|
|
<p class="text-xs font-semibold uppercase tracking-[0.22em] text-amber-200/75">Active artworks</p>
|
|
<p class="mt-3 text-3xl font-semibold text-white">{{ number_format((int) ($stats['artworks'] ?? 0)) }}</p>
|
|
<p class="mt-2 text-sm text-amber-100/70">Artworks that received comments.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-6 rounded-[26px] border border-white/[0.07] bg-white/[0.03] p-4 shadow-[0_18px_45px_rgba(0,0,0,0.18)] md:p-5">
|
|
<form method="GET" action="{{ route('dashboard.comments.received') }}" class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
|
<div class="flex flex-1 flex-col gap-3 sm:flex-row">
|
|
<label class="relative flex-1">
|
|
<span class="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-white/30">
|
|
<i class="fa-solid fa-magnifying-glass"></i>
|
|
</span>
|
|
<input
|
|
type="search"
|
|
name="q"
|
|
value="{{ $search }}"
|
|
placeholder="Search comment text, artwork title, or username"
|
|
class="w-full rounded-2xl border border-white/[0.08] bg-black/20 py-3 pl-11 pr-4 text-sm text-white placeholder:text-white/30 outline-none transition focus:border-sky-400/40 focus:bg-black/30"
|
|
>
|
|
</label>
|
|
|
|
<select
|
|
name="sort"
|
|
class="rounded-2xl border border-white/[0.08] bg-black/20 px-4 py-3 text-sm text-white outline-none transition focus:border-sky-400/40 focus:bg-black/30"
|
|
>
|
|
<option value="newest" @selected($sort === 'newest')>Newest first</option>
|
|
<option value="oldest" @selected($sort === 'oldest')>Oldest first</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
type="submit"
|
|
class="inline-flex items-center gap-2 rounded-2xl bg-sky-500 px-4 py-3 text-sm font-semibold text-white transition hover:bg-sky-400"
|
|
>
|
|
<i class="fa-solid fa-sliders"></i>
|
|
Apply
|
|
</button>
|
|
|
|
@if($search !== '' || $sort !== 'newest')
|
|
<a
|
|
href="{{ route('dashboard.comments.received') }}"
|
|
class="inline-flex items-center gap-2 rounded-2xl border border-white/[0.08] bg-white/[0.03] px-4 py-3 text-sm font-medium text-white/65 transition hover:bg-white/[0.07] hover:text-white"
|
|
>
|
|
<i class="fa-solid fa-rotate-left"></i>
|
|
Reset
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
@if($comments->isEmpty())
|
|
<div class="rounded-[28px] border border-white/[0.07] bg-white/[0.025] px-8 py-16 text-center shadow-[0_18px_45px_rgba(0,0,0,0.18)]">
|
|
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full border border-white/[0.08] bg-white/[0.03] text-white/35">
|
|
<i class="fa-regular fa-comments text-2xl"></i>
|
|
</div>
|
|
<h2 class="mt-5 text-2xl font-semibold text-white">No comments found</h2>
|
|
<p class="mx-auto mt-3 max-w-xl text-sm leading-6 text-white/45">
|
|
@if($search !== '')
|
|
Nothing matched your current search. Try a shorter phrase, a username, or reset the filters.
|
|
@else
|
|
When members comment on your artworks, they will appear here with artwork previews and quick context.
|
|
@endif
|
|
</p>
|
|
</div>
|
|
@else
|
|
<div class="grid gap-5 lg:grid-cols-2 2xl:grid-cols-3">
|
|
@foreach($comments as $comment)
|
|
@php
|
|
$author = $comment->user;
|
|
$artwork = $comment->artwork;
|
|
$profileUrl = !empty($author?->username)
|
|
? '/@' . $author->username
|
|
: '/profile/' . (int) ($author?->id ?? 0);
|
|
$artworkUrl = $artwork
|
|
? '/art/' . (int) $artwork->id . '/' . \Illuminate\Support\Str::slug($artwork->title ?? $artwork->name ?? 'artwork')
|
|
: null;
|
|
@endphp
|
|
|
|
<article class="group flex h-full flex-col overflow-hidden rounded-[28px] border border-white/[0.07] bg-white/[0.025] shadow-[0_18px_45px_rgba(0,0,0,0.18)] transition hover:border-sky-400/20 hover:bg-white/[0.035]">
|
|
<div class="border-b border-white/[0.06] bg-black/20">
|
|
@if($artwork)
|
|
<a href="{{ $artworkUrl }}" class="block">
|
|
<img
|
|
src="{{ $artwork->thumb_url ?? $artwork->thumb }}"
|
|
alt="{{ $artwork->title ?? $artwork->name ?? 'Artwork' }}"
|
|
class="h-52 w-full object-cover transition duration-500 group-hover:scale-[1.02]"
|
|
>
|
|
</a>
|
|
@else
|
|
<div class="flex h-52 items-center justify-center text-white/25">
|
|
<i class="fa-regular fa-image text-4xl"></i>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="flex flex-1 flex-col p-5 md:p-6">
|
|
<div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
|
|
<div class="flex min-w-0 items-center gap-3">
|
|
<a href="{{ $profileUrl }}" class="shrink-0">
|
|
<img
|
|
src="{{ \App\Support\AvatarUrl::forUser((int) ($author?->id ?? 0), $author?->profile?->avatar_hash, 64) }}"
|
|
alt="{{ $author?->name ?? $author?->username ?? 'Member' }}"
|
|
class="h-12 w-12 rounded-full object-cover ring-1 ring-white/[0.10]"
|
|
>
|
|
</a>
|
|
<div class="min-w-0">
|
|
<div class="flex flex-wrap items-center gap-x-2 gap-y-1">
|
|
<a href="{{ $profileUrl }}" class="truncate text-base font-semibold text-white transition hover:text-sky-300">
|
|
{{ $author?->name ?? $author?->username ?? 'Unknown member' }}
|
|
</a>
|
|
@if(!empty($author?->username))
|
|
<span class="truncate text-xs font-medium uppercase tracking-[0.18em] text-white/30">{{ '@' . $author->username }}</span>
|
|
@endif
|
|
</div>
|
|
<p class="mt-1 text-sm text-white/45">
|
|
{{ optional($comment->created_at)->diffForHumans() ?? 'Unknown time' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap items-center gap-2 text-xs font-medium">
|
|
<span class="inline-flex items-center gap-1.5 rounded-full border border-white/[0.08] bg-white/[0.03] px-3 py-1 text-white/60">
|
|
<i class="fa-solid fa-message"></i>
|
|
Comment #{{ $comment->id }}
|
|
</span>
|
|
@if($artworkUrl)
|
|
<a href="{{ $artworkUrl }}" class="inline-flex items-center gap-1.5 rounded-full border border-sky-400/20 bg-sky-500/10 px-3 py-1 text-sky-200 transition hover:bg-sky-500/20">
|
|
<i class="fa-solid fa-arrow-up-right-from-square"></i>
|
|
Open artwork
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5 rounded-2xl border border-white/[0.06] bg-black/20 p-4 md:p-5">
|
|
<div class="prose prose-invert prose-sm max-w-none prose-p:text-white/80 prose-a:text-sky-300 prose-strong:text-white prose-code:text-sky-200">
|
|
{!! $comment->getDisplayHtml() !!}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-auto pt-5">
|
|
<div class="flex flex-col gap-3 border-t border-white/[0.06] pt-4 md:flex-row md:items-center md:justify-between">
|
|
<div class="min-w-0">
|
|
<p class="text-xs font-semibold uppercase tracking-[0.18em] text-white/30">Artwork</p>
|
|
@if($artwork)
|
|
<a href="{{ $artworkUrl }}" class="mt-1 block truncate text-sm font-medium text-white/80 transition hover:text-sky-300">
|
|
{{ $artwork->title ?? $artwork->name ?? 'Untitled artwork' }}
|
|
</a>
|
|
@else
|
|
<p class="mt-1 text-sm text-white/35">This artwork is no longer available.</p>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="flex flex-wrap items-center gap-2 text-xs text-white/45">
|
|
<span class="inline-flex items-center gap-1.5 rounded-full bg-white/[0.03] px-3 py-1">
|
|
<i class="fa-regular fa-clock"></i>
|
|
{{ optional($comment->created_at)->format('M j, Y H:i') ?? 'Unknown date' }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="mt-8 flex justify-center">
|
|
{{ $comments->links() }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endsection
|