more fixes

2026-03-12 07:22:38 +01:00
parent 547215cbe8
commit 4f576ceb04
226 changed files with 14380 additions and 4453 deletions
--- a/resources/js/Pages/Forum/ForumCategory.jsx
+++ b/resources/js/Pages/Forum/ForumCategory.jsx
@@ -4,13 +4,14 @@ import ThreadRow from '../../components/forum/ThreadRow'
 import Pagination from '../../components/forum/Pagination'
 import Button from '../../components/ui/Button'

-export default function ForumCategory({ category, threads = [], pagination = {}, isAuthenticated = false }) {
+export default function ForumCategory({ category, parentCategory = null, threads = [], pagination = {}, isAuthenticated = false }) {
  const name = category?.name ?? 'Category'
  const slug = category?.slug

  const breadcrumbs = [
    { label: 'Home', href: '/' },
    { label: 'Forum', href: '/forum' },
+    ...(parentCategory ? [{ label: parentCategory.name, href: `/forum/category/${parentCategory.slug}` }] : []),
    { label: name },
  ]

@@ -24,6 +25,7 @@ export default function ForumCategory({ category, threads = [], pagination = {},
        <div>
          <p className="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">Forum</p>
          <h1 className="text-3xl font-bold text-white leading-tight">{name}</h1>
+          {category?.description && <p className="mt-2 text-sm text-white/50">{category.description}</p>}
        </div>
        {isAuthenticated && slug && (
          <a href={`/forum/${slug}/new`}>
@@ -35,7 +37,7 @@ export default function ForumCategory({ category, threads = [], pagination = {},
                </svg>
              }
            >
-              New thread
+              New topic
            </Button>
          </a>
        )}
@@ -45,8 +47,8 @@ export default function ForumCategory({ category, threads = [], pagination = {},
      <section className="overflow-hidden rounded-2xl border border-white/[0.06] bg-nova-800/50 backdrop-blur">
        {/* Column header */}
        <div className="flex items-center gap-4 border-b border-white/[0.06] px-5 py-3">
-          <span className="flex-1 text-xs font-semibold uppercase tracking-widest text-white/30">Threads</span>
-          <span className="w-12 text-center text-xs font-semibold uppercase tracking-widest text-white/30">Posts</span>
+          <span className="flex-1 text-xs font-semibold uppercase tracking-widest text-white/30">Topics</span>
+          <span className="w-16 text-center text-xs font-semibold uppercase tracking-widest text-white/30">Replies</span>
        </div>

        {threads.length === 0 ? (
@@ -54,7 +56,7 @@ export default function ForumCategory({ category, threads = [], pagination = {},
            <svg className="mx-auto mb-4 text-zinc-600" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
            </svg>
-            <p className="text-sm text-zinc-500">No threads in this section yet.</p>
+            <p className="text-sm text-zinc-500">No topics in this board yet.</p>
            {isAuthenticated && slug && (
              <a href={`/forum/${slug}/new`} className="mt-3 inline-block text-sm text-sky-300 hover:text-sky-200">
                Be the first to start a discussion →
--- a/resources/js/Pages/Forum/ForumEditPost.jsx
+++ b/resources/js/Pages/Forum/ForumEditPost.jsx
@@ -10,7 +10,7 @@ export default function ForumEditPost({ post, thread, csrfToken, errors = {} })
  const breadcrumbs = [
    { label: 'Home', href: '/' },
    { label: 'Forum', href: '/forum' },
-    { label: thread?.title ?? 'Thread', href: thread?.id ? `/forum/thread/${thread.id}-${thread.slug ?? ''}` : '/forum' },
+    { label: thread?.title ?? 'Topic', href: thread?.slug ? `/forum/topic/${thread.slug}` : '/forum' },
    { label: 'Edit post' },
  ]

@@ -59,7 +59,7 @@ export default function ForumEditPost({ post, thread, csrfToken, errors = {} })
        {/* Actions */}
        <div className="flex items-center justify-between pt-2">
          <a
-            href={thread?.id ? `/forum/thread/${thread.id}-${thread.slug ?? ''}` : '/forum'}
+            href={thread?.slug ? `/forum/topic/${thread.slug}` : '/forum'}
            className="text-sm text-zinc-500 hover:text-zinc-300 transition-colors"
          >
            ← Cancel
--- a/resources/js/Pages/Forum/ForumIndex.jsx
+++ b/resources/js/Pages/Forum/ForumIndex.jsx
@@ -1,31 +1,149 @@
 import React from 'react'
 import CategoryCard from '../../components/forum/CategoryCard'

-export default function ForumIndex({ categories = [] }) {
-  return (
-    <div className="px-4 pt-10 pb-20 sm:px-6 lg:px-8 max-w-5xl mx-auto">
-      {/* Header */}
-      <div className="mb-8">
-        <p className="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">Community</p>
-        <h1 className="text-3xl font-bold text-white leading-tight">Forum</h1>
-        <p className="mt-1.5 text-sm text-white/50">Browse forum sections and join the conversation.</p>
-      </div>
+export default function ForumIndex({ categories = [], trendingTopics = [], latestTopics = [] }) {
+  const totalThreads = categories.reduce((sum, cat) => sum + (Number(cat?.thread_count) || 0), 0)
+  const totalPosts = categories.reduce((sum, cat) => sum + (Number(cat?.post_count) || 0), 0)
+  const sortedByActivity = [...categories].sort((a, b) => {
+    const aTime = a?.last_activity_at ? new Date(a.last_activity_at).getTime() : 0
+    const bTime = b?.last_activity_at ? new Date(b.last_activity_at).getTime() : 0
+    return bTime - aTime
+  })
+  const latestActive = sortedByActivity[0] ?? null

-      {/* Category grid */}
-      {categories.length === 0 ? (
-        <div className="rounded-2xl border border-white/[0.06] bg-nova-800/50 p-12 text-center">
-          <svg className="mx-auto mb-4 text-zinc-600" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
-          </svg>
-          <p className="text-sm text-zinc-500">No forum categories available yet.</p>
+  return (
+    <div className="pb-20">
+      <section className="relative overflow-hidden border-b border-white/10 bg-[radial-gradient(circle_at_15%_20%,rgba(34,211,238,0.24),transparent_40%),radial-gradient(circle_at_80%_0%,rgba(56,189,248,0.16),transparent_42%),linear-gradient(180deg,rgba(10,14,26,0.96),rgba(8,12,22,0.92))]">
+        <div className="pointer-events-none absolute inset-0 opacity-40 [background-image:linear-gradient(rgba(255,255,255,0.06)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.06)_1px,transparent_1px)] [background-size:40px_40px]" />
+
+        <div className="relative mx-auto w-full max-w-[1400px] px-4 py-10 sm:px-6 lg:px-10 lg:py-14">
+          <div className="grid gap-8 lg:grid-cols-[1.2fr_0.8fr] lg:items-end">
+            <div>
+              <p className="mb-2 inline-flex items-center gap-2 rounded-full border border-cyan-300/30 bg-cyan-300/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-cyan-100">
+                Community Hub
+              </p>
+              <h1 className="text-4xl font-black leading-[0.95] tracking-[-0.02em] text-white sm:text-5xl lg:text-6xl">
+                Skinbase Forum
+              </h1>
+              <p className="mt-4 max-w-2xl text-sm leading-relaxed text-slate-200/80 sm:text-base">
+                Ask questions, share progress, and join focused conversations across every part of Skinbase.
+                This page is your launch point to active topics and community knowledge.
+              </p>
+
+              <div className="mt-6 flex flex-wrap items-center gap-3">
+                <a href="/forum" className="inline-flex items-center gap-2 rounded-xl bg-cyan-400 px-4 py-2.5 text-sm font-semibold text-slate-950 transition hover:bg-cyan-300">
+                  Explore Categories
+                  <span aria-hidden="true">&rarr;</span>
+                </a>
+              </div>
+            </div>
+
+            <div className="grid gap-3 sm:grid-cols-3 lg:grid-cols-1">
+              <StatCard label="Sections" value={number(categories.length)} />
+              <StatCard label="Topics" value={number(totalThreads)} />
+              <StatCard label="Posts" value={number(totalPosts)} />
+            </div>
+          </div>
+
+          {latestActive && (
+            <div className="mt-7 rounded-2xl border border-white/15 bg-white/[0.04] p-4 backdrop-blur">
+              <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-white/50">Latest Activity</p>
+              <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1">
+                <a
+                  href={`/forum/${latestActive.board_slug ?? latestActive.slug}`}
+                  className="text-base font-semibold text-cyan-200 transition hover:text-cyan-100"
+                >
+                  {latestActive.name}
+                </a>
+                <span className="text-xs text-white/45">{formatLastActivity(latestActive.last_activity_at)}</span>
+              </div>
+            </div>
+          )}
        </div>
+      </section>
+
+      <section className="mx-auto w-full max-w-[1400px] px-4 pt-8 sm:px-6 lg:px-10">
+        <div className="mb-5 flex items-end justify-between gap-3">
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-[0.16em] text-white/40">Browse</p>
+            <h2 className="mt-1 text-2xl font-bold text-white sm:text-3xl">Forum Sections</h2>
+          </div>
+          <p className="text-xs text-white/50 sm:text-sm">Choose a section to view threads or start a discussion.</p>
+        </div>
+
+        {/* Category grid */}
+        {categories.length === 0 ? (
+          <div className="rounded-2xl border border-white/[0.08] bg-nova-800/50 p-12 text-center">
+            <svg className="mx-auto mb-4 text-zinc-600" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
+            </svg>
+            <p className="text-sm text-zinc-400">No forum categories available yet.</p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-3">
+            {categories.map((cat) => (
+              <CategoryCard key={cat.id ?? cat.slug} category={cat} />
+            ))}
+          </div>
+        )}
+      </section>
+
+      <section className="mx-auto grid w-full max-w-[1400px] gap-5 px-4 pt-8 sm:px-6 lg:grid-cols-2 lg:px-10">
+        <Panel title="Trending Topics" items={trendingTopics} emptyLabel="Trending topics will appear once boards become active." />
+        <Panel title="Latest Topics" items={latestTopics} emptyLabel="Latest topics will appear here." />
+      </section>
+    </div>
+  )
+}
+
+function Panel({ title, items, emptyLabel }) {
+  return (
+    <div className="rounded-2xl border border-white/[0.08] bg-nova-800/50 p-5 backdrop-blur">
+      <h2 className="text-lg font-semibold text-white">{title}</h2>
+      {items.length === 0 ? (
+        <p className="mt-3 text-sm text-white/45">{emptyLabel}</p>
      ) : (
-        <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
-          {categories.map((cat) => (
-            <CategoryCard key={cat.id ?? cat.slug} category={cat} />
+        <div className="mt-4 space-y-3">
+          {items.map((item) => (
+            <a key={item.slug} href={`/forum/topic/${item.slug}`} className="block rounded-xl border border-white/6 px-4 py-3 transition hover:border-cyan-400/20 hover:bg-white/[0.03]">
+              <div className="text-sm font-semibold text-white">{item.title}</div>
+              <div className="mt-1 flex flex-wrap gap-3 text-xs text-white/45">
+                {item.board && <span>{item.board}</span>}
+                {item.author && <span>by {item.author}</span>}
+                {typeof item.replies_count === 'number' && <span>{item.replies_count} replies</span>}
+                {item.score !== undefined && <span>score {item.score}</span>}
+                {item.last_post_at && <span>{formatLastActivity(item.last_post_at)}</span>}
+              </div>
+            </a>
          ))}
        </div>
      )}
    </div>
  )
 }
+
+function StatCard({ label, value }) {
+  return (
+    <div className="rounded-xl border border-white/15 bg-white/[0.04] px-4 py-3 backdrop-blur">
+      <p className="text-[11px] uppercase tracking-[0.14em] text-white/50">{label}</p>
+      <p className="mt-1 text-2xl font-bold text-white">{value}</p>
+    </div>
+  )
+}
+
+function number(n) {
+  return (n ?? 0).toLocaleString()
+}
+
+function formatLastActivity(value) {
+  if (!value) {
+    return 'No recent activity'
+  }
+
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) {
+    return 'No recent activity'
+  }
+
+  return `Updated ${date.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}`
+}
--- a/resources/js/Pages/Forum/ForumNewThread.jsx
+++ b/resources/js/Pages/Forum/ForumNewThread.jsx
@@ -16,7 +16,7 @@ export default function ForumNewThread({ category, csrfToken, errors = {}, oldVa
    { label: 'Home', href: '/' },
    { label: 'Forum', href: '/forum' },
    { label: categoryName, href: slug ? `/forum/${slug}` : '/forum' },
-    { label: 'New thread' },
+    { label: 'New topic' },
  ]

  const handleSubmit = useCallback(async (e) => {
@@ -34,9 +34,9 @@ export default function ForumNewThread({ category, csrfToken, errors = {}, oldVa

      {/* Header */}
      <div className="mt-5 mb-6">
-        <p className="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">New thread</p>
+        <p className="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">New topic</p>
        <h1 className="text-2xl font-bold text-white leading-tight">
-          Create thread in {categoryName}
+          Create topic in {categoryName}
        </h1>
      </div>

@@ -82,7 +82,7 @@ export default function ForumNewThread({ category, csrfToken, errors = {}, oldVa
            ← Cancel
          </a>
          <Button type="submit" variant="primary" size="md" loading={submitting}>
-            Publish thread
+            Publish topic
          </Button>
        </div>
      </form>
--- a/resources/js/Pages/Forum/ForumSection.jsx
+++ b/resources/js/Pages/Forum/ForumSection.jsx
@@ -0,0 +1,68 @@
+import React from 'react'
+import Breadcrumbs from '../../components/forum/Breadcrumbs'
+
+export default function ForumSection({ category, boards = [] }) {
+  const name = category?.name ?? 'Forum Section'
+  const description = category?.description
+  const preview = category?.preview_image ?? '/images/forum/default.jpg'
+
+  const breadcrumbs = [
+    { label: 'Home', href: '/' },
+    { label: 'Forum', href: '/forum' },
+    { label: name },
+  ]
+
+  return (
+    <div className="mx-auto max-w-6xl px-4 pb-20 pt-10 sm:px-6 lg:px-8">
+      <Breadcrumbs items={breadcrumbs} />
+
+      <section className="mt-5 overflow-hidden rounded-3xl border border-white/10 bg-nova-800/55 shadow-xl backdrop-blur">
+        <div className="relative h-56 overflow-hidden sm:h-64">
+          <img src={preview} alt={`${name} preview`} className="h-full w-full object-cover object-center" />
+          <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/35 to-transparent" />
+          <div className="absolute inset-x-0 bottom-0 p-6 sm:p-8">
+            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-cyan-200/85">Forum Section</p>
+            <h1 className="mt-2 text-3xl font-black text-white sm:text-4xl">{name}</h1>
+            {description && <p className="mt-2 max-w-3xl text-sm text-white/70 sm:text-base">{description}</p>}
+          </div>
+        </div>
+      </section>
+
+      <section className="mt-8 rounded-2xl border border-white/8 bg-nova-800/45 p-5 backdrop-blur sm:p-6">
+        <div className="flex items-end justify-between gap-3">
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-[0.16em] text-white/40">Subcategories</p>
+            <h2 className="mt-1 text-2xl font-bold text-white">Browse boards</h2>
+          </div>
+          <p className="text-xs text-white/45 sm:text-sm">Select a board to open its thread list.</p>
+        </div>
+
+        {boards.length === 0 ? (
+          <div className="py-12 text-center text-sm text-white/45">No boards are available in this section yet.</div>
+        ) : (
+          <div className="mt-5 grid gap-4 md:grid-cols-2">
+            {boards.map((board) => (
+              <a key={board.id ?? board.slug} href={`/forum/${board.slug}`} className="rounded-2xl border border-white/8 bg-white/[0.02] p-5 transition hover:border-cyan-400/25 hover:bg-white/[0.04]">
+                <div className="flex items-start justify-between gap-4">
+                  <div>
+                    <h3 className="text-lg font-semibold text-white">{board.title}</h3>
+                    {board.description && <p className="mt-2 text-sm text-white/55">{board.description}</p>}
+                  </div>
+                  <span className="rounded-full border border-cyan-300/20 bg-cyan-300/10 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-cyan-200">
+                    Open
+                  </span>
+                </div>
+
+                <div className="mt-4 flex flex-wrap gap-4 text-xs text-white/50">
+                  <span>{board.topics_count ?? 0} topics</span>
+                  <span>{board.posts_count ?? 0} posts</span>
+                  {board.latest_topic?.title && <span>Latest: {board.latest_topic.title}</span>}
+                </div>
+              </a>
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  )
+}
--- a/resources/js/Pages/Forum/ForumThread.jsx
+++ b/resources/js/Pages/Forum/ForumThread.jsx
@@ -7,6 +7,7 @@ import Pagination from '../../components/forum/Pagination'
 export default function ForumThread({
  thread,
  category,
+  forumCategory,
  author,
  opPost,
  posts = [],
@@ -25,7 +26,8 @@ export default function ForumThread({
  const breadcrumbs = [
    { label: 'Home', href: '/' },
    { label: 'Forum', href: '/forum' },
-    { label: category?.name ?? 'Category', href: category?.slug ? `/forum/${category.slug}` : '/forum' },
+    ...(forumCategory?.name ? [{ label: forumCategory.name }] : []),
+    { label: category?.name ?? 'Board', href: category?.slug ? `/forum/${category.slug}` : '/forum' },
    { label: thread?.title ?? 'Thread' },
  ]

@@ -82,14 +84,14 @@ export default function ForumThread({
        {canModerate && (
          <div className="mt-4 flex flex-wrap items-center gap-2 border-t border-white/[0.06] pt-3">
            {thread?.is_locked ? (
-              <ModForm action={`/forum/thread/${thread.id}/unlock`} csrf={csrfToken} label="Unlock" variant="danger" />
+              <ModForm action={`/forum/topic/${thread.slug}/unlock`} csrf={csrfToken} label="Unlock" variant="danger" />
            ) : (
-              <ModForm action={`/forum/thread/${thread.id}/lock`} csrf={csrfToken} label="Lock" variant="danger" />
+              <ModForm action={`/forum/topic/${thread.slug}/lock`} csrf={csrfToken} label="Lock" variant="danger" />
            )}
            {thread?.is_pinned ? (
-              <ModForm action={`/forum/thread/${thread.id}/unpin`} csrf={csrfToken} label="Unpin" variant="warning" />
+              <ModForm action={`/forum/topic/${thread.slug}/unpin`} csrf={csrfToken} label="Unpin" variant="warning" />
            ) : (
-              <ModForm action={`/forum/thread/${thread.id}/pin`} csrf={csrfToken} label="Pin" variant="warning" />
+              <ModForm action={`/forum/topic/${thread.slug}/pin`} csrf={csrfToken} label="Pin" variant="warning" />
            )}
          </div>
        )}
@@ -155,7 +157,7 @@ export default function ForumThread({
          </div>
        ) : (
          <ReplyForm
-            threadId={thread?.id}
+            topicKey={thread?.slug ?? thread?.id}
            prefill={replyPrefill}
            quotedAuthor={quotedPost?.user?.name}
            csrfToken={csrfToken}