klevze/SkinbaseNova
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Gregor Klevže
2026-03-20 21:17:26 +01:00
parent 1a62fcb81d
commit 29c3ff8572
229 changed files with 13147 additions and 2577 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
resources/views/dashboard/comments.blade.php
View File

@@ -3,27 +3,241 @@
@section('content')
<x-nova-page-header
section="Dashboard"
title="Comments"
title="Received Comments"
icon="fa-comments"
:breadcrumbs="collect([
(object) ['name' => 'Dashboard', 'url' => '/dashboard'],
(object) ['name' => 'Comments', 'url' => route('dashboard.comments')],
(object) ['name' => 'Comments', 'url' => route('dashboard.comments.received')],
])"
description="Comments across your dashboard activity and conversations."
/>
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">
@if(empty($comments))
<div class="rounded-xl border border-white/[0.06] bg-white/[0.02] px-8 py-12 text-center">
<p class="text-sm text-white/40">No comments to show.</p>
<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="rounded-xl border border-white/[0.06] bg-white/[0.02] p-6">
<ul class="space-y-2">
@foreach($comments as $c)
<li class="text-sm text-white/75">{{ $c }}</li>
@endforeach
</ul>
<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>

187
resources/views/dashboard/notifications.blade.php Normal file
View File

@@ -0,0 +1,187 @@
@extends('layouts.nova')
@section('content')
<x-nova-page-header
section="Dashboard"
title="Notifications"
icon="fa-bell"
:breadcrumbs="collect([
(object) ['name' => 'Dashboard', 'url' => '/dashboard'],
(object) ['name' => 'Notifications', 'url' => route('dashboard.notifications')],
])"
description="A dedicated feed for follows, likes, comments, and system events so you can triage account activity quickly."
>
<x-slot name="actions">
<form id="mark-all-notifications-read-form" class="contents">
<button
type="button"
id="mark-all-notifications-read"
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-check-double text-xs"></i>
Mark all read
</button>
</form>
</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 text-white/60 transition 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 transition {{ request()->routeIs('dashboard.notifications') ? '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-bell"></i>
Notifications
</a>
</div>
<div class="mb-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
<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">Unread</p>
<p class="mt-3 text-3xl font-semibold text-white">{{ number_format($unreadCount) }}</p>
<p class="mt-2 text-sm text-sky-100/70">Notifications that still need attention.</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">Loaded</p>
<p class="mt-3 text-3xl font-semibold text-white">{{ number_format($notifications->count()) }}</p>
<p class="mt-2 text-sm text-violet-100/70">Items shown on this page.</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">Total feed</p>
<p class="mt-3 text-3xl font-semibold text-white">{{ number_format((int) ($notificationsMeta['total'] ?? 0)) }}</p>
<p class="mt-2 text-sm text-amber-100/70">All notifications stored for your account.</p>
</div>
</div>
@if($notifications->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-bell text-2xl"></i>
</div>
<h2 class="mt-5 text-2xl font-semibold text-white">No notifications yet</h2>
<p class="mx-auto mt-3 max-w-xl text-sm leading-6 text-white/45">
Follows, comments, likes, and system notices will appear here as your account becomes more active.
</p>
</div>
@else
<div class="space-y-4">
@foreach($notifications as $item)
@php
$isUnread = !($item['read'] ?? false);
$actor = $item['actor'] ?? null;
$destination = $item['url'] ?: route('dashboard.comments.received');
@endphp
<a
href="{{ $destination }}"
class="block rounded-[24px] border p-5 transition hover:bg-white/[0.04] {{ $isUnread ? 'border-sky-400/20 bg-sky-500/[0.08]' : 'border-white/[0.07] bg-white/[0.025]' }}"
data-notification-link
data-notification-id="{{ $item['id'] }}"
data-notification-read="{{ ($item['read'] ?? false) ? '1' : '0' }}"
>
<div class="flex items-start gap-4">
<img
src="{{ $actor['avatar_url'] ?? 'https://files.skinbase.org/default/avatar_default.webp' }}"
alt="{{ $actor['name'] ?? 'Notification' }}"
class="h-12 w-12 rounded-full object-cover ring-1 ring-white/10"
>
<div class="min-w-0 flex-1">
<div class="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
<div class="min-w-0">
<p class="text-sm font-semibold text-white/90">{{ $item['message'] ?? 'New activity' }}</p>
<div class="mt-1 flex flex-wrap items-center gap-2 text-xs uppercase tracking-[0.16em] text-white/30">
<span>{{ $item['type'] ?? 'notification' }}</span>
<span>{{ $item['time_ago'] ?? '' }}</span>
@if(!empty($actor['username']))
<span>{{ '@' . $actor['username'] }}</span>
@endif
</div>
</div>
<div class="flex items-center gap-2">
@if($isUnread)
<span class="inline-flex items-center gap-1.5 rounded-full border border-sky-400/25 bg-sky-500/12 px-3 py-1 text-xs font-semibold text-sky-200">
<i class="fa-solid fa-circle text-[8px]"></i>
Unread
</span>
@else
<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-xs font-semibold text-white/50">
Read
</span>
@endif
</div>
</div>
</div>
</div>
</a>
@endforeach
</div>
@if(($notificationsMeta['last_page'] ?? 1) > 1)
<div class="mt-8 flex flex-wrap justify-center gap-2">
@for($page = 1; $page <= (int) ($notificationsMeta['last_page'] ?? 1); $page++)
<a
href="{{ route('dashboard.notifications', ['page' => $page]) }}"
class="inline-flex h-10 min-w-10 items-center justify-center rounded-xl border px-3 text-sm font-medium transition {{ (int) ($notificationsMeta['current_page'] ?? 1) === $page ? 'border-sky-400/30 bg-sky-500/15 text-sky-200' : 'border-white/[0.08] bg-white/[0.03] text-white/60 hover:bg-white/[0.06] hover:text-white' }}"
>
{{ $page }}
</a>
@endfor
</div>
@endif
@endif
</div>
@push('scripts')
<script>
(function () {
var csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
var markAllButton = document.getElementById('mark-all-notifications-read');
async function postJson(url) {
return fetch(url, {
method: 'POST',
headers: {
Accept: 'application/json',
'X-CSRF-TOKEN': csrfToken,
},
credentials: 'same-origin',
});
}
if (markAllButton) {
markAllButton.addEventListener('click', async function () {
markAllButton.disabled = true;
try {
await postJson('/api/notifications/read-all');
window.location.reload();
} catch (_error) {
markAllButton.disabled = false;
}
});
}
document.querySelectorAll('[data-notification-link]').forEach(function (link) {
link.addEventListener('click', async function (event) {
if (link.dataset.notificationRead === '1') return;
event.preventDefault();
try {
await postJson('/api/notifications/' + link.dataset.notificationId + '/read');
} catch (_error) {
// Navigate even if mark-read fails.
}
window.location.assign(link.href);
});
});
})();
</script>
@endpush
@endsection