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

Auth: convert auth views and verification email to Nova layout

Browse Source
This commit is contained in:
Gregor Klevže
2026-02-21 07:37:08 +01:00
parent 93b009d42a
commit 795c7a835f
117 changed files with 5385 additions and 1291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
resources/views/forum/thread/components/attachment-list.blade.php Normal file
View File

@@ -0,0 +1,84 @@
@php
$attachments = collect($attachments ?? []);
$filesBaseUrl = rtrim((string) config('cdn.files_url', ''), '/');
$toUrl = function (?string $path) use ($filesBaseUrl): string {
$cleanPath = ltrim((string) $path, '/');
return $filesBaseUrl !== '' ? ($filesBaseUrl . '/' . $cleanPath) : ('/' . $cleanPath);
};
$formatBytes = function ($bytes): string {
$size = max((int) $bytes, 0);
if ($size < 1024) {
return $size . ' B';
}
$units = ['KB', 'MB', 'GB'];
$value = $size / 1024;
$unitIndex = 0;
while ($value >= 1024 && $unitIndex < count($units) - 1) {
$value /= 1024;
$unitIndex++;
}
return number_format($value, 1) . ' ' . $units[$unitIndex];
};
@endphp
@if ($attachments->isNotEmpty())
<div class="mt-4 space-y-3 border-t border-white/10 pt-4">
<h4 class="text-xs font-semibold uppercase tracking-wide text-zinc-400">Attachments</h4>
<ul class="grid grid-cols-1 gap-3 sm:grid-cols-2">
@foreach ($attachments as $attachment)
@php
$mime = (string) ($attachment->mime_type ?? '');
$isImage = str_starts_with($mime, 'image/');
$url = $toUrl($attachment->file_path ?? '');
$modalId = 'attachment-modal-' . (string) data_get($attachment, 'id', uniqid());
@endphp
<li class="rounded-lg border border-white/10 bg-slate-900/60 p-3">
@if ($isImage)
<a href="#{{ $modalId }}" class="block overflow-hidden rounded-md border border-white/10">
<img
src="{{ $url }}"
alt="Attachment preview"
loading="lazy"
decoding="async"
class="h-36 w-full object-cover"
/>
</a>
@endif
<div class="mt-2 flex items-center justify-between gap-3 text-xs">
<span class="truncate text-zinc-300">{{ basename((string) ($attachment->file_path ?? 'file')) }}</span>
<span class="text-zinc-500">{{ $formatBytes($attachment->file_size ?? 0) }}</span>
</div>
<a href="{{ $url }}" target="_blank" rel="noopener noreferrer" class="mt-2 inline-flex text-xs font-medium text-sky-300 hover:text-sky-200">
Download
</a>
@if ($isImage)
<div id="{{ $modalId }}" class="pointer-events-none fixed inset-0 z-50 hidden bg-black/80 p-4 target:pointer-events-auto target:block" role="dialog" aria-label="Attachment preview">
<div class="mx-auto flex h-full w-full max-w-5xl items-center justify-center">
<div class="w-full overflow-hidden rounded-xl border border-white/10 bg-slate-950/95">
<div class="flex items-center justify-between border-b border-white/10 px-4 py-2">
<span class="truncate text-xs text-zinc-300">{{ basename((string) ($attachment->file_path ?? 'file')) }}</span>
<a href="#" class="text-xs text-zinc-400 hover:text-zinc-200">Close</a>
</div>
<div class="max-h-[80vh] overflow-auto p-3">
<img src="{{ $url }}" alt="Attachment full preview" class="mx-auto h-auto max-h-[72vh] w-auto max-w-full object-contain" />
</div>
<div class="border-t border-white/10 px-4 py-2 text-right">
<a href="{{ $url }}" target="_blank" rel="noopener noreferrer" class="text-xs font-medium text-sky-300 hover:text-sky-200">Open original</a>
</div>
</div>
</div>
</div>
@endif
</li>
@endforeach
</ul>
</div>
@endif

32
resources/views/forum/thread/components/author-badge.blade.php Normal file
View File

@@ -0,0 +1,32 @@
@php
$user = $user ?? null;
$name = data_get($user, 'name', 'Anonymous');
$avatar = data_get($user, 'profile.avatar_url') ?? \App\Support\AvatarUrl::forUser((int) data_get($user, 'id', 0));
$role = strtolower((string) data_get($user, 'role', 'member'));
$roleLabel = match ($role) {
'admin' => 'Admin',
'moderator' => 'Moderator',
default => 'Member',
};
$roleClasses = match ($role) {
'admin' => 'bg-red-500/15 text-red-300',
'moderator' => 'bg-amber-500/15 text-amber-300',
default => 'bg-sky-500/15 text-sky-300',
};
@endphp
<div class="flex items-center gap-3">
<img
src="{{ $avatar }}"
alt="{{ $name }} avatar"
loading="lazy"
decoding="async"
class="h-10 w-10 rounded-full border border-white/10 object-cover"
/>
<div class="min-w-0">
<div class="truncate text-sm font-semibold text-zinc-100">{{ $name }}</div>
<span class="inline-flex rounded-full px-2 py-0.5 text-[11px] font-medium {{ $roleClasses }}">{{ $roleLabel }}</span>
</div>
</div>

30
resources/views/forum/thread/components/breadcrumbs.blade.php Normal file
View File

@@ -0,0 +1,30 @@
@php
$thread = $thread ?? null;
$category = $category ?? null;
@endphp
<nav class="text-sm text-zinc-400" aria-label="Breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
<ol class="flex flex-wrap items-center gap-2">
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="{{ url('/') }}" class="hover:text-zinc-200"><span itemprop="name">Home</span></a>
<meta itemprop="position" content="1">
</li>
<li aria-hidden="true">/</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="{{ route('forum.index') }}" class="hover:text-zinc-200"><span itemprop="name">Forum</span></a>
<meta itemprop="position" content="2">
</li>
<li aria-hidden="true">/</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="{{ isset($category) ? route('forum.category.show', ['category' => $category->slug]) : route('forum.index') }}" class="hover:text-zinc-200">
<span itemprop="name">{{ $category->name ?? 'Category' }}</span>
</a>
<meta itemprop="position" content="3">
</li>
<li aria-hidden="true">/</li>
<li class="text-zinc-200" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<span itemprop="name">{{ $thread->title ?? 'Thread' }}</span>
<meta itemprop="position" content="4">
</li>
</ol>
</nav>

71
resources/views/forum/thread/components/post-card.blade.php Normal file
View File

@@ -0,0 +1,71 @@
@php
$post = $post ?? null;
$thread = $thread ?? null;
$isOp = (bool) ($isOp ?? false);
$author = data_get($post, 'user');
$postedAt = data_get($post, 'created_at');
$editedAt = data_get($post, 'edited_at');
$content = (string) data_get($post, 'content', '');
$rendered = \App\Support\ForumPostContent::render($content);
@endphp
<article class="overflow-hidden rounded-xl border border-white/5 bg-slate-900/70 backdrop-blur" id="post-{{ data_get($post, 'id') }}">
<header class="border-b border-white/10 px-4 py-3 sm:px-5">
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<x-forum.thread.author-badge :user="$author" />
<div class="text-xs text-zinc-400">
@if ($postedAt)
<time datetime="{{ \Illuminate\Support\Carbon::parse($postedAt)->toIso8601String() }}">
{{ \Illuminate\Support\Carbon::parse($postedAt)->format('d.m.Y H:i') }}
</time>
@endif
@if ($isOp)
<span class="ml-2 rounded-full bg-cyan-500/15 px-2 py-0.5 text-[11px] font-medium text-cyan-300">OP</span>
@endif
</div>
</div>
</header>
<div class="px-4 py-4 sm:px-5">
<div class="prose prose-invert max-w-none text-sm leading-6 prose-pre:overflow-x-auto">
{!! $rendered !!}
</div>
@if (data_get($post, 'is_edited') && $editedAt)
<p class="mt-3 text-xs text-zinc-500">
Edited <time datetime="{{ \Illuminate\Support\Carbon::parse($editedAt)->toIso8601String() }}">{{ \Illuminate\Support\Carbon::parse($editedAt)->diffForHumans() }}</time>
</p>
@endif
<x-forum.thread.attachment-list :attachments="data_get($post, 'attachments', [])" />
</div>
<footer class="flex flex-wrap items-center gap-3 border-t border-white/10 px-4 py-3 text-xs text-zinc-400 sm:px-5">
<button type="button" disabled aria-disabled="true" title="Like coming soon" class="cursor-not-allowed rounded border border-white/10 px-2 py-0.5 text-zinc-500">Like</button>
@if (!empty(data_get($thread, 'id')))
<a href="{{ route('forum.thread.show', ['thread' => data_get($thread, 'id'), 'slug' => data_get($thread, 'slug'), 'quote' => data_get($post, 'id')]) }}#reply-content" class="hover:text-zinc-200">Quote</a>
@else
<a href="#post-{{ data_get($post, 'id') }}" class="hover:text-zinc-200">Quote</a>
@endif
@auth
@if ((int) data_get($post, 'user_id') !== (int) auth()->id())
<form method="POST" action="{{ route('forum.post.report', ['post' => data_get($post, 'id')]) }}" class="inline">
@csrf
<button type="submit" class="hover:text-zinc-200">Report</button>
</form>
@endif
@else
<a href="{{ route('login') }}" class="hover:text-zinc-200">Report</a>
@endauth
@auth
@if ((int) data_get($post, 'user_id') === (int) auth()->id() || Gate::allows('moderate-forum'))
<a href="{{ route('forum.post.edit', ['post' => data_get($post, 'id')]) }}" class="hover:text-zinc-200">Edit</a>
@endif
@endauth
@can('moderate-forum')
<span class="ml-auto text-amber-300">Moderation tools available</span>
@endcan
</footer>
</article>

124
resources/views/forum/thread/show.blade.php Normal file
View File

@@ -0,0 +1,124 @@
@extends('layouts.nova')
@section('content')
<main class="min-h-screen bg-slate-950 px-4 py-8" aria-labelledby="thread-title">
<div class="mx-auto max-w-5xl space-y-5">
<x-forum.thread.breadcrumbs :thread="$thread" :category="$category" />
@if (session('status'))
<div class="rounded-xl border border-emerald-500/20 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-300">
{{ session('status') }}
</div>
@endif
<section class="rounded-xl border border-white/5 bg-slate-900/70 p-5 backdrop-blur">
<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div>
<h1 id="thread-title" class="text-2xl font-semibold text-white">{{ $thread->title }}</h1>
<div class="mt-2 flex flex-wrap items-center gap-2 text-xs text-zinc-400">
<span>By {{ $author->name ?? 'Unknown' }}</span>
<span aria-hidden="true">•</span>
<time datetime="{{ optional($thread->created_at)?->toIso8601String() }}">{{ optional($thread->created_at)?->format('d.m.Y H:i') }}</time>
</div>
</div>
<div class="flex flex-wrap items-center gap-2 text-xs">
<span class="rounded-full bg-sky-500/15 px-2.5 py-1 text-sky-300">{{ number_format((int) ($thread->views ?? 0)) }} views</span>
<span class="rounded-full bg-cyan-500/15 px-2.5 py-1 text-cyan-300">{{ number_format((int) ($reply_count ?? 0)) }} replies</span>
@if ($thread->is_pinned)
<span class="rounded-full bg-amber-500/15 px-2.5 py-1 text-amber-300">Pinned</span>
@endif
@if ($thread->is_locked)
<span class="rounded-full bg-red-500/15 px-2.5 py-1 text-red-300">Locked</span>
@endif
</div>
</div>
@can('moderate-forum')
<div class="mt-4 flex flex-wrap items-center gap-2 border-t border-white/10 pt-3 text-xs">
@if ($thread->is_locked)
<form method="POST" action="{{ route('forum.thread.unlock', ['thread' => $thread->id]) }}">
@csrf
<button type="submit" class="rounded-md bg-red-500/15 px-2.5 py-1 text-red-300 hover:bg-red-500/25">Unlock thread</button>
</form>
@else
<form method="POST" action="{{ route('forum.thread.lock', ['thread' => $thread->id]) }}">
@csrf
<button type="submit" class="rounded-md bg-red-500/15 px-2.5 py-1 text-red-300 hover:bg-red-500/25">Lock thread</button>
</form>
@endif
@if ($thread->is_pinned)
<form method="POST" action="{{ route('forum.thread.unpin', ['thread' => $thread->id]) }}">
@csrf
<button type="submit" class="rounded-md bg-amber-500/15 px-2.5 py-1 text-amber-300 hover:bg-amber-500/25">Unpin thread</button>
</form>
@else
<form method="POST" action="{{ route('forum.thread.pin', ['thread' => $thread->id]) }}">
@csrf
<button type="submit" class="rounded-md bg-amber-500/15 px-2.5 py-1 text-amber-300 hover:bg-amber-500/25">Pin thread</button>
</form>
@endif
</div>
@endcan
</section>
@if (isset($opPost) && $opPost)
<x-forum.thread.post-card :post="$opPost" :thread="$thread" :is-op="true" />
@endif
<section class="space-y-4" aria-label="Replies">
@forelse ($posts as $post)
<x-forum.thread.post-card :post="$post" :thread="$thread" />
@empty
<div class="rounded-xl border border-white/10 bg-slate-900/60 px-4 py-6 text-center text-zinc-400">
No replies yet.
</div>
@endforelse
</section>
@if (method_exists($posts, 'links'))
<div class="sticky bottom-3 z-10 rounded-xl border border-white/10 bg-slate-900/80 p-2 backdrop-blur supports-[backdrop-filter]:bg-slate-900/70">
{{ $posts->withQueryString()->links() }}
</div>
@endif
@auth
@if (!$thread->is_locked)
<form method="POST" action="{{ route('forum.thread.reply', ['thread' => $thread->id]) }}" class="space-y-3 rounded-xl border border-white/5 bg-slate-900/70 p-4 backdrop-blur">
@csrf
<div class="flex items-center justify-between">
<label for="reply-content" class="text-sm font-medium text-zinc-200">Reply</label>
<span class="text-xs text-zinc-500">Minimum 2 characters</span>
</div>
<div class="rounded-lg border border-white/10 bg-slate-950 p-2">
<div class="mb-2 flex items-center gap-2 text-xs">
<button type="button" class="rounded bg-slate-800 px-2 py-1 text-zinc-200" aria-pressed="true">Write</button>
<span class="rounded bg-slate-900 px-2 py-1 text-zinc-500">Preview (coming soon)</span>
</div>
<textarea id="reply-content" name="content" rows="6" required minlength="2" maxlength="10000" class="w-full rounded-lg border border-white/10 bg-slate-950 px-3 py-2 text-zinc-100 placeholder-zinc-500 focus:border-cyan-400 focus:outline-none focus:ring-1 focus:ring-cyan-400">{{ $reply_prefill ?? old('content') }}</textarea>
</div>
@error('content')
<p class="text-xs text-red-400">{{ $message }}</p>
@enderror
@if (!empty($quoted_post))
<p class="text-xs text-cyan-300">Replying with quote from {{ data_get($quoted_post, 'user.name', 'Anonymous') }}.</p>
@endif
<div class="flex items-center justify-between">
<p class="text-xs text-zinc-500">Markdown/BBCode + attachments will be enabled in next pass</p>
<button type="submit" class="rounded-lg bg-sky-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-sky-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-400">Post reply</button>
</div>
</form>
@else
<div class="rounded-xl border border-red-500/20 bg-red-500/5 px-4 py-3 text-sm text-red-300">
This thread is locked. Replies are disabled.
</div>
@endif
@else
<div class="rounded-xl border border-white/10 bg-slate-900/60 px-4 py-4 text-sm text-zinc-300">
<a href="{{ route('login') }}" class="text-sky-300 hover:text-sky-200">Sign in</a> to post a reply.
</div>
@endauth
</div>
</main>
@endsection