Move forum views

2026-08-28 22:01:33 +00:00 · 2026-04-07 13:45:29 +02:00
parent 03e36f7c48
commit e65a479631
19 changed files with 350 additions and 162 deletions
@@ -1,7 +1,7 @@
 {{-- $category is passed as NULL to the master layout view to prevent it from showing in the breadcrumbs --}}
@extends ('forum::layouts.main', ['category' => null])

-@section ('content')
+@section ('forum-content')
    <div class="flex flex-row justify-between my-3">
        <h2 class="grow text-3xl font-medium text-gray-900 dark:text-gray-100">{{ trans('forum::general.index') }}</h2>

@@ -1,6 +1,6 @@
@extends ('forum::layouts.main', ['category' => null, 'thread' => null, 'breadcrumbs_append' => [trans('forum::general.manage')]])

-@section ('content')
+@section ('forum-content')
    <div class="flex flex-row justify-between mb-2">
        <h2 class="text-3xl font-medium my-3 text-gray-900 dark:text-gray-100">{{ trans('forum::general.manage') }}</h2>

@@ -65,6 +65,7 @@
        </draggable>
    </script>

+    @push('forum-page-scripts')
    <script type="module">
    const app = Vue.createApp({
        setup() {
@@ -76,7 +77,7 @@

            Vue.watch(
                () => state.categories,
-                async (newValue, oldValue) => {
+                () => {
                    state.isSavingDisabled = false;
                },
                { deep: true }
@@ -89,7 +90,7 @@

                var payload = { categories: state.categories };
                axios.post('{{ route('forum.bulk.category.reorder') }}', payload)
-                    .then(response => {
+                    .then(() => {
                        state.changesApplied = true;
                        setTimeout(() => state.changesApplied = false, 3000);
                    })
@@ -121,4 +122,5 @@

    app.mount('#manage-categories');
    </script>
+    @endpush
@stop
@@ -1,11 +1,11 @@
 <div class="my-4">
-    <div class="bg-white dark:bg-gray-800 shadow rounded-md relative transition-colors">
-        <div class="flex flex-col md:items-start md:flex-row md:justify-between md:gap-4 p-6">
+    <div class="relative overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition hover:shadow-md dark:border-gray-700 dark:bg-gray-800">
+        <div class="flex flex-col gap-4 p-5 md:flex-row md:items-start md:justify-between md:gap-6 sm:p-6">
            <div class="md:w-3/6 text-center md:text-left">
-                <h5 class="text-lg">
+                <h5 class="text-lg font-semibold leading-tight">
                    <a href="{{ Forum::route('category.show', $category) }}" style="color: {{ $category->color_light_mode }};" class="hover:opacity-80 transition-opacity">{{ $category->title }}</a>
                </h5>
-                <p class="text-gray-500 dark:text-gray-400">{{ $category->description }}</p>
+                <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">{{ $category->description }}</p>
            </div>
            <div class="md:w-1/6 flex flex-col items-center gap-1 mt-2 md:mt-0">
                @if ($category->accepts_threads)
@@ -17,7 +17,7 @@
                    </x-forum::badge>
                @endif
            </div>
-            <div class="md:w-2/6 text-gray-500 dark:text-gray-400 text-center md:text-right mt-2 md:mt-0">
+            <div class="md:w-2/6 text-center text-sm text-gray-500 dark:text-gray-400 md:mt-0 md:text-right">
                @if ($category->accepts_threads)
                    @if ($category->newestThread)
                        <div>
@@ -37,13 +37,13 @@
    </div>

    @if ($category->children->count() > 0)
-        <div class="subcategories">
+        <div class="mt-3 space-y-3">
            @foreach ($category->children as $subcategory)
-                <div class="bg-white dark:bg-gray-800 -mt-1 shadow rounded-b-md transition-colors">
-                    <div class="flex flex-col md:items-start md:flex-row md:justify-between md:gap-4 p-6">
+                <div class="rounded-xl border border-gray-200 bg-gray-50 shadow-sm transition dark:border-gray-700 dark:bg-gray-900/40">
+                    <div class="flex flex-col gap-4 p-5 md:flex-row md:items-start md:justify-between md:gap-6 sm:p-6">
                        <div class="md:w-3/6 text-center md:text-left">
-                            <a href="{{ Forum::route('category.show', $subcategory) }}" style="color: {{ $subcategory->color_light_mode }};" class="hover:opacity-80 transition-opacity">{{ $subcategory->title }}</a>
-                            <div class="text-muted text-gray-500 dark:text-gray-400">{{ $subcategory->description }}</div>
+                            <a href="{{ Forum::route('category.show', $subcategory) }}" style="color: {{ $subcategory->color_light_mode }};" class="font-medium hover:opacity-80 transition-opacity">{{ $subcategory->title }}</a>
+                            <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">{{ $subcategory->description }}</div>
                        </div>
                        <div class="md:w-1/6 flex flex-col items-center gap-1 mt-2 md:mt-0">
                            <x-forum::badge style="background: {{ $subcategory->color_light_mode }};">
@@ -53,7 +53,7 @@
                                {{ trans_choice('forum::posts.post', 2) }}: {{ $subcategory->post_count }}
                            </x-forum::badge>
                        </div>
-                        <div class="md:w-2/6 text-gray-500 dark:text-gray-400 md:items-end text-center md:text-right mt-2 md:mt-0">
+                        <div class="md:w-2/6 text-center text-sm text-gray-500 dark:text-gray-400 md:items-end md:text-right">
                            @if ($subcategory->newestThread)
                                <div>
                                    <a href="{{ Forum::route('thread.show', $subcategory->newestThread) }}" class="mr-1 text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors">{{ $subcategory->newestThread->title }}</a>
@@ -1,7 +1,7 @@
 {{-- $thread is passed as NULL to the master layout view to prevent it from showing in the breadcrumbs --}}
@extends('forum::layouts.main', ['thread' => null])

-@section('content')
+@section('forum-content')
    <div class="flex flex-row justify-between mb-2">
        <h2 class="text-3xl text-gray-900 dark:text-gray-100" style="color: {{ $category->color_light_mode }};">
            {{ $category->title }} &nbsp;
@@ -130,8 +130,8 @@
                    @endcan
                @endif
            @else
-                <div class="card my-3">
-                    <div class="card-body">
+                <div class="my-3 rounded-xl border border-dashed border-gray-300 bg-gray-50 p-6 text-center text-gray-600 dark:border-gray-600 dark:bg-gray-900/40 dark:text-gray-300">
+                    <div>
                        {{ trans('forum::threads.none_found') }}
                        @can ('createThreads', $category)
                            <br>
@@ -141,11 +141,11 @@
                </div>
            @endif

-            <div class="row">
-                <div class="col col-xs-8">
+            <div class="mt-4 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+                <div>
                    {{ $threads->links('forum::pagination') }}
                </div>
-                <div class="col col-xs-4 text-end">
+                <div class="text-end">
                    @if ($category->accepts_threads)
                        @can ('createThreads', $category)
                            <x-forum::button-link href="{{ Forum::route('thread.create', $category) }}">{{ trans('forum::threads.new_thread') }}</x-forum::button-link>
@@ -179,6 +179,7 @@
        @endcan
    @endcan

+    @push('forum-page-scripts')
    <script type="module">
    Vue.createApp({
        setup() {
@@ -245,4 +246,5 @@
        }
    }).mount('#category');
    </script>
+    @endpush
@stop
@@ -1,128 +1,90 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="csrf-token" content="{{ csrf_token() }}">
-    @auth
-        <meta name="user-authenticated" content="true">
-        <meta name="theme-preference" content="{{ auth()->user()->theme_preference ?? 'light' }}">
-    @else
-        <meta name="user-authenticated" content="false">
-    @endauth
+@php
+    $category = $category ?? null;
+    $thread = $thread ?? null;
+    $breadcrumbs_append = $breadcrumbs_append ?? [];
+    $thread_title = $thread_title ?? null;
+
+    $meta_title = trim(collect([
+        $thread_title,
+        data_get($category, 'title'),
+        trans('forum::general.home_title'),
+    ])->filter()->join(' — '));
+@endphp
+
+@extends('layouts.main')
+
+@push('meta')
    <meta name="default-category-color" content="{{ config('forum.frontend.default_category_color') }}">
+@endpush

-    <title>
-        @if (isset($thread_title))
-            {{ $thread_title }} —
-        @endif
-        @if (isset($category))
-            {{ $category->title }} —
-        @endif
-        {{ trans('forum::general.home_title') }}
-    </title>
+@push('styles')
+    @vite('resources/forum/blade-tailwind/css/forum.css')
+@endpush

-    @vite(['resources/forum/blade-tailwind/css/forum.css', 'resources/forum/blade-tailwind/js/forum.js'])
-</head>
-<body class="forum bg-gray-100 dark:bg-gray-900 transition-colors duration-200">
-    <nav class="v-navbar bg-white dark:bg-gray-800 shadow py-4 transition-colors duration-200">
-        <div class="container mx-auto px-4 md:flex md:items-center md:gap-4">
-            <div class="flex justify-between items-center">
-                <a class="text-lg font-semibold text-gray-900 dark:text-white" href="{{ url(config('forum.frontend.router.prefix')) }}">{{ config('app.name') }} Forum</a>
-                <button class="navbar-toggler block md:hidden border rounded-md px-2 py-1 text-gray-700 dark:text-gray-300 dark:border-gray-600" type="button" :class="{ collapsed: isCollapsed }" @click="isCollapsed = !isCollapsed">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="navbar-toggler-icon w-6 h-6">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-                    </svg>
-                </button>
+@prepend('scripts')
+    @vite('resources/forum/blade-tailwind/js/forum.js')
+@endprepend
+
+@push('scripts')
+    @stack('forum-page-scripts')
+@endpush
+
+@section('content')
+    <div class="forum space-y-6">
+        <section class="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+            <div class="border-b border-gray-200 bg-gradient-to-r from-slate-50 via-white to-blue-50 px-5 py-5 dark:border-gray-700 dark:from-gray-900 dark:via-gray-800 dark:to-gray-800 sm:px-6">
+                <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+                    <div class="space-y-2">
+                        <p class="text-xs font-semibold uppercase tracking-[0.2em] text-blue-600 dark:text-blue-400">Community</p>
+                        <h1 class="!my-0 text-3xl font-semibold text-gray-900 dark:text-gray-100">{{ config('app.name') }} Forum</h1>
+                        <p class="max-w-3xl text-sm text-gray-600 dark:text-gray-400">
+                            Discuss releases, ask for help, and follow staff updates without leaving the main {{ config('app.name') }} interface.
+                        </p>
+                    </div>
+
+                    <div class="flex flex-wrap items-center gap-2 text-sm">
+                        @guest
+                            <a href="{{ url('/login') }}" class="inline-flex items-center rounded-full border border-gray-300 px-4 py-2 font-medium text-gray-700 transition hover:border-blue-300 hover:text-blue-600 dark:border-gray-600 dark:text-gray-300 dark:hover:border-blue-500 dark:hover:text-blue-400">Log in</a>
+                            <a href="{{ url('/register') }}" class="inline-flex items-center rounded-full bg-blue-600 px-4 py-2 font-medium text-white transition hover:bg-blue-500">Register</a>
+                        @else
+                            <span class="inline-flex items-center rounded-full bg-gray-100 px-4 py-2 font-medium text-gray-700 dark:bg-gray-700 dark:text-gray-200">{{ $username }}</span>
+                            <a href="{{ url('/logout') }}" class="inline-flex items-center rounded-full border border-gray-300 px-4 py-2 font-medium text-gray-700 transition hover:border-red-300 hover:text-red-600 dark:border-gray-600 dark:text-gray-300 dark:hover:border-red-500 dark:hover:text-red-400" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Log out</a>
+                            <form id="logout-form" action="{{ url('/logout') }}" method="POST" class="hidden">
+                                @csrf
+                            </form>
+                        @endguest
+                    </div>
+                </div>
+
+                <div class="v-navbar mt-5 flex flex-col gap-3">
+                    <div class="flex flex-wrap gap-2">
+                        <a href="{{ route('home') }}" class="inline-flex items-center rounded-full px-4 py-2 text-sm font-medium transition {{ request()->routeIs('home') ? 'bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900' : 'bg-white text-gray-700 ring-1 ring-gray-200 hover:text-blue-600 dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-700 dark:hover:text-blue-400' }}">Home</a>
+                        <a href="{{ url(config('forum.frontend.router.prefix')) }}" class="inline-flex items-center rounded-full px-4 py-2 text-sm font-medium transition {{ request()->routeIs('forum.index') || request()->routeIs('forum.category.*') ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 ring-1 ring-gray-200 hover:text-blue-600 dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-700 dark:hover:text-blue-400' }}">{{ trans('forum::general.index') }}</a>
+                        <a href="{{ route('forum.recent') }}" class="inline-flex items-center rounded-full px-4 py-2 text-sm font-medium transition {{ request()->routeIs('forum.recent') ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 ring-1 ring-gray-200 hover:text-blue-600 dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-700 dark:hover:text-blue-400' }}">{{ trans('forum::threads.recent') }}</a>
+                        @auth
+                            <a href="{{ route('forum.unread') }}" class="inline-flex items-center rounded-full px-4 py-2 text-sm font-medium transition {{ request()->routeIs('forum.unread') ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 ring-1 ring-gray-200 hover:text-blue-600 dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-700 dark:hover:text-blue-400' }}">{{ trans('forum::threads.unread_updated') }}</a>
+                        @endauth
+                        @can ('moveCategories')
+                            <a href="{{ route('forum.category.manage') }}" class="inline-flex items-center rounded-full px-4 py-2 text-sm font-medium transition {{ request()->routeIs('forum.category.manage') ? 'bg-amber-500 text-white' : 'bg-white text-gray-700 ring-1 ring-gray-200 hover:text-amber-600 dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-700 dark:hover:text-amber-400' }}">{{ trans('forum::categories.manage') }}</a>
+                        @endcan
+                        @can ('approveThreads')
+                            <a href="{{ route('forum.pending-approval.threads') }}" class="inline-flex items-center rounded-full px-4 py-2 text-sm font-medium transition {{ request()->routeIs('forum.pending-approval.threads') ? 'bg-orange-500 text-white' : 'bg-white text-gray-700 ring-1 ring-gray-200 hover:text-orange-600 dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-700 dark:hover:text-orange-400' }}">{{ trans('forum::threads.pending_approval') }}</a>
+                        @endcan
+                        @can ('approvePosts')
+                            <a href="{{ route('forum.pending-approval.posts') }}" class="inline-flex items-center rounded-full px-4 py-2 text-sm font-medium transition {{ request()->routeIs('forum.pending-approval.posts') ? 'bg-orange-500 text-white' : 'bg-white text-gray-700 ring-1 ring-gray-200 hover:text-orange-600 dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-700 dark:hover:text-orange-400' }}">{{ trans('forum::posts.pending_approval') }}</a>
+                        @endcan
+                    </div>
+                </div>
            </div>
-            <div class="grow justify-between navbar-collapse" :class="{ 'flex flex-col': !isCollapsed, 'hidden md:flex': isCollapsed }">
-                <ul class="flex flex-col md:flex-row gap-3 mb-4 md:mb-0">
-                    <li>
-                        <a class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors" href="{{ route('home') }}">Home</a>
-                    </li>
-                    <li>
-                        <a class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors" href="{{ url(config('forum.frontend.router.prefix')) }}">{{ trans('forum::general.index') }}</a>
-                    </li>
-                    <li>
-                        <a class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors" href="{{ route('forum.recent') }}">{{ trans('forum::threads.recent') }}</a>
-                    </li>
-                    @auth
-                        <li>
-                            <a class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors" href="{{ route('forum.unread') }}">{{ trans('forum::threads.unread_updated') }}</a>
-                        </li>
-                    @endauth
-                    @if (Gate::allows('moveCategories') || Gate::allows('approveThreads') || Gate::allows('approvePosts'))
-                        <li class="nav-item dropdown relative">
-                            <a class="dropdown-toggle text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors flex items-center gap-1" href="#" id="manageDropdownMenuLink" @click="isManageDropdownCollapsed = !isManageDropdownCollapsed">
-                                {{ trans('forum::general.manage') }}

-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-3">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
-                                </svg>
-                            </a>
-                            <div class="border dark:border-gray-600 absolute z-50 left-0 bg-white dark:bg-gray-800 rounded-md w-56 divide-y dark:divide-gray-600 shadow-lg" :class="{ hidden: isManageDropdownCollapsed }" aria-labelledby="manageDropdownMenuLink">
-                                @can ('moveCategories')
-                                    <a class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" href="{{ route('forum.category.manage') }}">
-                                        {{ trans('forum::categories.manage') }}
-                                    </a>
-                                @endcan
-                                @can ('approveThreads')
-                                    <a class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" href="{{ route('forum.pending-approval.threads') }}">
-                                        {{ trans('forum::threads.pending_approval') }}
-                                    </a>
-                                @endcan
-                                @can ('approvePosts')
-                                    <a class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" href="{{ route('forum.pending-approval.posts') }}">
-                                        {{ trans('forum::posts.pending_approval') }}
-                                    </a>
-                                @endcan
-                            </div>
-                        </li>
-                    @endif
-                </ul>
-                <ul class="navbar-nav flex gap-4 flex-col md:flex-row">
-                    @if (Auth::check())
-                        <li class="nav-item dropdown relative">
-                            <a class="dropdown-toggle text-gray-500 dark:text-gray-400 flex items-center gap-1 hover:text-gray-800 dark:hover:text-gray-200 transition-colors" href="#" id="userDropdownMenuLink" @click="isUserDropdownCollapsed = !isUserDropdownCollapsed">
-                                {{ $username }}
-
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-3">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
-                                </svg>
-                            </a>
-                            <div class="border dark:border-gray-600 absolute z-50 left-0 bg-white dark:bg-gray-800 rounded-md w-44 divide-y dark:divide-gray-600 shadow-lg" :class="{ hidden: isUserDropdownCollapsed }" aria-labelledby="userDropdownMenuLink">
-                                <a class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" href="{{ url('/logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
-                                    Log out
-                                </a>
-                                <form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
-                                    @csrf
-                                </form>
-                            </div>
-                        </li>
-                    @else
-                        <li class="nav-item">
-                            <a class="nav-link text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors" href="{{ url('/login') }}">Log in</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors" href="{{ url('/register') }}">Register</a>
-                        </li>
-                    @endif
-                </ul>
+            <div class="space-y-4 px-5 py-4 sm:px-6">
+                @include ('forum::partials.breadcrumbs')
+                @include ('forum::partials.alerts')
            </div>
-        </div>
-    </nav>
+        </section>

-    <div id="main" class="container mx-auto p-4">
-        @include ('forum::partials.breadcrumbs')
-        @include ('forum::partials.alerts')
-
-        @yield('content')
+        <section class="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-700 dark:bg-gray-800 sm:p-6">
+            @yield('forum-content')
+        </section>
    </div>
-
-    @yield('footer')
-
-    <script>
-        window.defaultCategoryColor = '{{ config('forum.frontend.default_category_color') }}';
-    </script>
-</body>
-</html>
+@endsection
@@ -1,6 +1,6 @@
@extends ('forum::layouts.main', ['breadcrumbs_append' => [trans_choice('forum::posts.delete', 1)]])

-@section ('content')
+@section ('forum-content')
    <div id="delete-post">
        <h2 class="text-3xl text-gray-900 dark:text-gray-100">{{ trans_choice('forum::posts.delete', 1) }}</h2>

@@ -1,6 +1,6 @@
@extends ('forum::layouts.main', ['breadcrumbs_append' => [trans_choice('forum::posts.restore', 1)]])

-@section ('content')
+@section ('forum-content')
    <div id="delete-post">
        <h2 class="grow text-3xl text-gray-900 dark:text-gray-100">{{ trans_choice('forum::posts.restore', 1) }}</h2>

@@ -1,6 +1,6 @@
@extends ('forum::layouts.main', ['breadcrumbs_append' => [trans('forum::general.new_reply')]])

-@section ('content')
+@section ('forum-content')
    <div id="create-post">
        <h2 class="text-3xl font-medium my-3 text-gray-900 dark:text-gray-100">{{ trans('forum::general.new_reply') }} ({{ $thread->title }})</h2>

@@ -1,6 +1,6 @@
@extends ('forum::layouts.main', ['breadcrumbs_append' => [trans('forum::posts.edit')]])

-@section ('content')
+@section ('forum-content')
    <div id="edit-post">
        <h2 class="text-3xl font-medium my-3 text-gray-900 dark:text-gray-100">{{ trans('forum::posts.edit') }} ({{ $thread->title }})</h2>

@@ -1,4 +1,4 @@
-<div @if (!$post->trashed())id="post-{{ $post->sequence }}"@endif
+<div @if (!$post->trashed()) id="post-{{ $post->sequence }}" @endif
    class="bg-white dark:bg-gray-800 border dark:border-gray-700 mb-2 rounded-md transition-colors {{ $post->trashed() || $thread->trashed() ? 'opacity-50' : '' }}"
    :class="{ 'border-blue-500 dark:border-blue-400': state.selectedPosts.includes({{ $post->id }}) }">
    <div class="bg-gray-100 dark:bg-gray-700 border-b dark:border-gray-600 px-6 py-4 flex justify-between flex-row-reverse rounded-t-md transition-colors">
@@ -16,7 +16,7 @@
        @endif

        <div>
-            <div>
+            <div class="inline-flex flex-wrap items-center gap-x-2 gap-y-1">
                <span class="text-gray-900 dark:text-gray-100 font-semibold">{{ $post->authorName }}</span>
                <span class="text-gray-500 dark:text-gray-400">
                    @include ('forum::partials.timestamp', ['carbon' => $post->created_at])
@@ -5,7 +5,7 @@
                <a href="{{ Forum::route('thread.show', $post) }}" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors">#{{ $post->sequence }}</a>
            </span>
            <div>
-                <div>
+                <div class="inline-flex flex-wrap items-center gap-x-2 gap-y-1">
                    <strong class="text-gray-900 dark:text-gray-100">{{ $post->authorName }}</strong>
                    <span class="text-gray-500 dark:text-gray-400">{{ $post->posted }}</span>
                </div>
@@ -0,0 +1,107 @@
+@extends ('forum::layouts.main', ['breadcrumbs_append' => [trans('forum::posts.pending_approval')]])
+
+@section ('forum-content')
+    <div id="pending-approval" data-all-ids="{{ $posts->pluck('id')->toJson() }}" v-cloak>
+        <div class="flex flex-col md:flex-row justify-between my-4">
+            <h2 class="text-3xl font-semibold text-gray-900 dark:text-gray-100">{{ trans('forum::posts.pending_approval') }}</h2>
+        </div>
+
+        @if ($posts->isEmpty())
+            <div class="rounded-xl border border-dashed border-gray-300 bg-gray-50 p-6 text-center text-gray-500 dark:border-gray-600 dark:bg-gray-900/40 dark:text-gray-400">
+                {{ trans('forum::posts.none_found') }}
+            </div>
+        @else
+            <div class="mb-4 flex justify-end">
+                <label class="inline-flex items-center gap-2 cursor-pointer text-sm text-gray-700 dark:text-gray-300">
+                    <input type="checkbox" v-model="selectAll" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-blue-400 dark:focus:border-blue-400 dark:focus:ring-blue-400">
+                    <span>{{ trans('forum::posts.select_all') }}</span>
+                </label>
+            </div>
+
+            <div class="space-y-4">
+                @foreach ($posts as $post)
+                    <div class="rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+                        <div class="border-b border-gray-200 p-4 dark:border-gray-700">
+                            <div class="flex items-start gap-4">
+                                <div class="pt-1">
+                                    <input type="checkbox" name="posts[]" v-model="selectedIds" :value="{{ $post->id }}" class="post-checkbox rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-blue-400 dark:focus:border-blue-400 dark:focus:ring-blue-400">
+                                </div>
+                                <div class="flex-1">
+                                    <div class="mt-2 text-sm text-gray-700 dark:text-gray-300">
+                                        {!! $post->content !!}
+                                    </div>
+                                    <div class="mt-2 inline-flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-gray-500 dark:text-gray-400">
+                                        <span>{{ $post->authorName }}</span>
+                                        <span>({{ $post->created_at->diffForHumans() }})</span>
+                                    </div>
+                                    <div class="mt-2 text-sm">
+                                        {{ trans_choice('forum::threads.thread', 1) }}:
+                                        <a href="{{ Forum::route('thread.show', $post->thread) }}?post={{ $post->id }}" class="text-blue-600 hover:underline dark:text-blue-400">
+                                            {{ $post->thread->title }}
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                @endforeach
+            </div>
+
+            <div class="mt-4 flex flex-wrap gap-4">
+                <button type="button"
+                        :disabled="!selectedIds.length"
+                        data-open-modal="delete-posts"
+                        class="rounded-md bg-red-500 px-4 py-2 text-white shadow hover:bg-red-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-red-600 dark:hover:bg-red-500">
+                    {{ trans('forum::general.delete_selection') }}
+                </button>
+                <button type="button"
+                        :disabled="!selectedIds.length"
+                        data-open-modal="approve-posts"
+                        class="rounded-md bg-blue-500 px-4 py-2 text-white shadow hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-blue-600 dark:hover:bg-blue-500">
+                    {{ trans('forum::general.approve_selection') }}
+                </button>
+            </div>
+
+            @if ($posts->hasPages())
+                <div class="mt-4">
+                    {{ $posts->links('forum::pagination') }}
+                </div>
+            @endif
+        @endif
+
+        @component('forum::modal-form')
+            @slot('key', 'delete-posts')
+            @slot('title', trans('forum::general.delete_selection'))
+            @slot('route', Forum::route('bulk.post.delete'))
+            @slot('method', 'DELETE')
+            @slot('actions')
+                <x-forum::button type="submit" class="bg-red-500 dark:bg-red-600 hover:bg-red-400 dark:hover:bg-red-500">
+                    {{ trans('forum::general.proceed') }}
+                </x-forum::button>
+            @endslot
+
+            <p class="text-gray-900 dark:text-gray-100">{{ trans('forum::general.generic_confirm') }}</p>
+            <template v-for="id in selectedIds" :key="id">
+                <input type="hidden" name="posts[]" :value="id">
+            </template>
+        @endcomponent
+
+        @component('forum::modal-form')
+            @slot('key', 'approve-posts')
+            @slot('title', trans('forum::general.approve_selection'))
+            @slot('route', Forum::route('bulk.post.approve'))
+            @slot('method', 'POST')
+            @slot('actions')
+                <x-forum::button type="submit">
+                    {{ trans('forum::general.proceed') }}
+                </x-forum::button>
+            @endslot
+
+            <p class="text-gray-900 dark:text-gray-100">{{ trans('forum::general.generic_confirm') }}</p>
+            <template v-for="id in selectedIds" :key="id">
+                <input type="hidden" name="posts[]" :value="id">
+            </template>
+        @endcomponent
+    </div>
+@stop
+
@@ -1,6 +1,6 @@
@extends ('forum::layouts.main', ['breadcrumbs_append' => [trans('forum::posts.view')]])

-@section ('content')
+@section ('forum-content')
    <div id="post">
        <div class="flex flex-row justify-between mb-3">
            <h2 class="grow">{{ trans('forum::posts.view') }} ({{ $thread->title }})</h2>
@@ -1,6 +1,6 @@
@extends ('forum::layouts.main', ['breadcrumbs_append' => [trans('forum::threads.new_thread')]])

-@section ('content')
+@section ('forum-content')
    <div id="create-thread">
        <h2 class="text-3xl text-gray-900 dark:text-gray-100">{{ trans('forum::threads.new_thread') }} ({{ $category->title }})</h2>

@@ -1,16 +1,18 @@
-<div class="bg-white dark:bg-gray-800 transition-colors" :class="{ 'ring-1 ring-blue-500 dark:ring-blue-400': state.selectedThreads.includes({{ $thread->id }}) }">
-    <div class="flex flex-col md:items-start md:flex-row md:justify-between md:gap-4 p-6">
+<div class="rounded-xl border border-gray-200 bg-white shadow-sm transition hover:shadow-md dark:border-gray-700 dark:bg-gray-800" :class="{ 'ring-1 ring-blue-500 dark:ring-blue-400': state.selectedThreads.includes({{ $thread->id }}) }">
+    <div class="flex flex-col gap-4 p-5 md:flex-row md:items-start md:justify-between md:gap-6 sm:p-6">
        <div class="md:w-3/6 text-center md:text-left">
            <span class="lead">
-                <a href="{{ Forum::route('thread.show', $thread) }}" @if (isset($category))style="color: {{ $category->color_light_mode }};"@endif class="text-lg hover:opacity-80 transition-opacity">{{ $thread->title }}</a>
+                <a href="{{ Forum::route('thread.show', $thread) }}" @if (isset($category)) style="color: {{ $category->color_light_mode }};" @endif class="text-lg font-semibold hover:opacity-80 transition-opacity">{{ $thread->title }}</a>
            </span>
            <br>
-            <span class="text-gray-900 dark:text-gray-100">{{ $thread->authorName }}</span>
-            <span class="text-gray-500 dark:text-gray-400"> @include ('forum::partials.timestamp', ['carbon' => $thread->created_at])</span>
+            <span class="inline-flex items-center gap-2 text-sm">
+                <span class="text-gray-900 dark:text-gray-100">{{ $thread->authorName }}</span>
+                <span class="text-gray-500 dark:text-gray-400">@include ('forum::partials.timestamp', ['carbon' => $thread->created_at])</span>
+            </span>

            @if (!isset($category))
                <br>
-                <a href="{{ Forum::route('category.show', $thread->category) }}" style="color: {{ $thread->category->color_light_mode }};" class="hover:opacity-80 transition-opacity">{{ $thread->category->title }}</a>
+                <a href="{{ Forum::route('category.show', $thread->category) }}" style="color: {{ $thread->category->color_light_mode }};" class="mt-2 inline-block text-sm font-medium hover:opacity-80 transition-opacity">{{ $thread->category->title }}</a>
            @endif
        </div>

@@ -37,11 +39,11 @@
        </div>

        @if ($thread->lastPost)
-            <div class="md:w-1/6 flex justify-center md:flex-col md:items-end">
+            <div class="md:w-1/6 flex justify-center md:flex-col md:items-end text-sm">
                <a href="{{ Forum::route('thread.show', $thread->lastPost) }}" class="text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors">{{ trans('forum::posts.view') }} &raquo;</a>
-                <div>
+                <div class="inline-flex items-center gap-2">
                    <span class="text-gray-900 dark:text-gray-100">{{ $thread->lastPost->authorName }}</span>
-                    <span class="text-gray-500 dark:text-gray-400"> @include ('forum::partials.timestamp', ['carbon' => $thread->lastPost->created_at])</span>
+                    <span class="text-gray-500 dark:text-gray-400">@include ('forum::partials.timestamp', ['carbon' => $thread->lastPost->created_at])</span>
                </div>
            </div>
        @endif
@@ -0,0 +1,111 @@
+@extends ('forum::layouts.main', ['breadcrumbs_append' => [trans('forum::threads.pending_approval')]])
+
+@section ('forum-content')
+    <div id="pending-approval" data-all-ids="{{ $threads->pluck('id')->toJson() }}" v-cloak>
+        <div class="flex flex-col md:flex-row justify-between my-4">
+            <h2 class="text-3xl font-semibold text-gray-900 dark:text-gray-100">{{ trans('forum::threads.pending_approval') }}</h2>
+        </div>
+
+        @if ($threads->isEmpty())
+            <div class="rounded-xl border border-dashed border-gray-300 bg-gray-50 p-6 text-center text-gray-500 dark:border-gray-600 dark:bg-gray-900/40 dark:text-gray-400">
+                {{ trans('forum::threads.none_found') }}
+            </div>
+        @else
+            <div class="mb-4 flex justify-end">
+                <label class="inline-flex items-center gap-2 cursor-pointer text-sm text-gray-700 dark:text-gray-300">
+                    <input type="checkbox" v-model="selectAll" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-blue-400 dark:focus:border-blue-400 dark:focus:ring-blue-400">
+                    <span>{{ trans('forum::threads.select_all') }}</span>
+                </label>
+            </div>
+
+            <div class="space-y-4">
+                @foreach ($threads as $thread)
+                    <div class="rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+                        <div class="border-b border-gray-200 p-4 dark:border-gray-700">
+                            <div class="flex items-start gap-4">
+                                <div class="pt-1">
+                                    <input type="checkbox" name="threads[]" :value="{{ $thread->id }}" v-model="selectedIds" class="thread-checkbox rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-blue-400 dark:focus:border-blue-400 dark:focus:ring-blue-400">
+                                </div>
+                                <div class="flex-1">
+                                    <div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+                                        <div>
+                                            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+                                                {{ trans_choice('forum::threads.thread', 1) }}:
+                                                <a href="{{ Forum::route('thread.show', $thread) }}" class="text-blue-600 hover:underline dark:text-blue-400">
+                                                    {{ $thread->title }}
+                                                </a>
+                                            </h3>
+                                            <div class="inline-flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-gray-500 dark:text-gray-400">
+                                                <span>{{ $thread->authorName }}</span>
+                                                <span>({{ $thread->created_at->diffForHumans() }})</span>
+                                            </div>
+                                            <div class="mt-3 text-sm text-gray-700 dark:text-gray-300">
+                                                {!! $thread->firstPost->content !!}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                @endforeach
+            </div>
+
+            <div class="mt-4 flex flex-wrap gap-4">
+                <button type="button"
+                        :disabled="!selectedIds.length"
+                        data-open-modal="delete-threads"
+                        class="rounded-md bg-red-500 px-4 py-2 text-white shadow hover:bg-red-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-red-600 dark:hover:bg-red-500">
+                    {{ trans('forum::general.delete_selection') }}
+                </button>
+                <button type="button"
+                        :disabled="!selectedIds.length"
+                        data-open-modal="approve-threads"
+                        class="rounded-md bg-blue-500 px-4 py-2 text-white shadow hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-blue-600 dark:hover:bg-blue-500">
+                    {{ trans('forum::general.approve_selection') }}
+                </button>
+            </div>
+
+            @if ($threads->hasPages())
+                <div class="mt-4">
+                    {{ $threads->links('forum::pagination') }}
+                </div>
+            @endif
+        @endif
+
+        @component('forum::modal-form')
+            @slot('key', 'delete-threads')
+            @slot('title', trans('forum::general.delete_selection'))
+            @slot('route', Forum::route('bulk.thread.delete'))
+            @slot('method', 'DELETE')
+            @slot('actions')
+                <x-forum::button type="submit" class="bg-red-500 dark:bg-red-600 hover:bg-red-400 dark:hover:bg-red-500">
+                    {{ trans('forum::general.proceed') }}
+                </x-forum::button>
+            @endslot
+
+            <p class="text-gray-900 dark:text-gray-100">{{ trans('forum::general.generic_confirm') }}</p>
+            <template v-for="id in selectedIds" :key="id">
+                <input type="hidden" name="threads[]" :value="id">
+            </template>
+        @endcomponent
+
+        @component('forum::modal-form')
+            @slot('key', 'approve-threads')
+            @slot('title', trans('forum::general.approve_selection'))
+            @slot('route', Forum::route('bulk.thread.approve'))
+            @slot('method', 'POST')
+            @slot('actions')
+                <x-forum::button type="submit">
+                    {{ trans('forum::general.proceed') }}
+                </x-forum::button>
+            @endslot
+
+            <p class="text-gray-900 dark:text-gray-100">{{ trans('forum::general.generic_confirm') }}</p>
+            <template v-for="id in selectedIds" :key="id">
+                <input type="hidden" name="threads[]" :value="id">
+            </template>
+        @endcomponent
+    </div>
+@stop
+
@@ -1,6 +1,6 @@
@extends ('forum::layouts.main', ['thread' => null, 'breadcrumbs_append' => [trans('forum::threads.recent')]])

-@section ('content')
+@section ('forum-content')
    <div id="new-posts">
        <h2 class="text-3xl font-medium my-3 text-gray-900 dark:text-gray-100">{{ trans('forum::threads.recent') }}</h2>

@@ -1,6 +1,6 @@
@extends ('forum::layouts.main', ['thread' => null, 'breadcrumbs_append' => [$thread->title], 'thread_title' => $thread->title])

-@section ('content')
+@section ('forum-content')
    <div id="thread">
        <div class="flex flex-col md:flex-row justify-between my-4">
            <h2 class="grow text-3xl font-semibold text-gray-900 dark:text-gray-100">{{ $thread->title }}</h2>
@@ -350,6 +350,7 @@
        @endcan
    @endif

+    @push('forum-page-scripts')
    <script type="module">
    Vue.createApp({
        setup() {
@@ -402,4 +403,5 @@
        }
    }).mount('#thread');
    </script>
+    @endpush
@stop
@@ -1,6 +1,6 @@
@extends ('forum::layouts.main', ['thread' => null, 'breadcrumbs_append' => [trans('forum::threads.unread_updated')]])

-@section ('content')
+@section ('forum-content')
    <div id="new-posts">
        <h2 class="text-3xl text-medium my-4 text-gray-900 dark:text-gray-100">{{ trans('forum::threads.unread_updated') }}</h2>