Restyle thread view like phpBB

2026-01-11 01:25:16 +01:00
parent eef3262a53
commit c8d2bd508e
3 changed files with 322 additions and 59 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,9 @@
 - Added admin-only upload endpoints and ACP UI for logos and favicons.
 - Applied forum branding, theme defaults, accents, logos, and favicon links in the SPA header.

+## 2026-01-11
+- Restyled the thread view to mimic phpBB: compact toolbar, title row, and post layout.
+
 ## 2025-12-30
 - Added soft deletes with audit metadata (deleted_at/deleted_by) for forums, threads, and posts.
 - Ensured API listings and ACP forum tree omit soft-deleted records by default.
--- a/resources/js/index.css
+++ b/resources/js/index.css
@@ -88,6 +88,210 @@ a {
  padding: 1.2rem;
 }

+.bb-thread {
+  display: flex;
+  flex-direction: column;
+  gap: 1.4rem;
+}
+
+.bb-thread-titlebar {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.bb-thread-title {
+  margin: 0;
+  font-size: 1.6rem;
+  color: var(--bb-accent, #f29b3f);
+}
+
+.bb-thread-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  color: var(--bb-ink-muted);
+  font-size: 0.95rem;
+}
+
+.bb-thread-author {
+  color: var(--bb-accent, #f29b3f);
+  font-weight: 600;
+}
+
+.bb-thread-date {
+  opacity: 0.8;
+}
+
+.bb-thread-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.5rem 0.8rem;
+  border-radius: 10px;
+  border: 1px solid var(--bb-border);
+  background: #141822;
+  flex-wrap: wrap;
+}
+
+.bb-thread-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+}
+
+.bb-thread-toolbar .bb-accent-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 600;
+  padding: 0.35rem 0.75rem;
+  border-radius: 8px;
+  font-size: 0.9rem;
+}
+
+.bb-thread-icon-button {
+  border: 1px solid #2a2f3a;
+  background: #20252f;
+  color: #d0d6df;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.15s ease, color 0.15s ease;
+}
+
+.bb-thread-icon-button:hover {
+  color: var(--bb-accent, #f29b3f);
+  border-color: var(--bb-accent, #f29b3f);
+}
+
+.bb-thread-meta-right {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  color: var(--bb-ink-muted);
+  font-size: 0.85rem;
+}
+
+.bb-thread-stats {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  color: var(--bb-ink-muted);
+  font-size: 0.9rem;
+}
+
+.bb-thread-empty {
+  color: var(--bb-accent, #f29b3f);
+  margin-left: 0.6rem;
+}
+
+.bb-posts {
+  border: 1px solid var(--bb-border);
+  border-radius: 16px;
+  overflow: hidden;
+  background: #171b22;
+}
+
+.bb-post-row {
+  display: grid;
+  grid-template-columns: 220px 1fr;
+  border-top: 1px solid var(--bb-border);
+}
+
+.bb-post-row:first-child {
+  border-top: 0;
+}
+
+.bb-post-author {
+  padding: 1rem;
+  background: rgba(255, 255, 255, 0.02);
+  border-right: 1px solid var(--bb-border);
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.bb-post-avatar {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--bb-accent, #f29b3f);
+  font-size: 1.1rem;
+}
+
+.bb-post-author-name {
+  font-weight: 600;
+  color: var(--bb-accent, #f29b3f);
+}
+
+.bb-post-author-meta {
+  font-size: 0.85rem;
+  color: var(--bb-ink-muted);
+}
+
+.bb-post-content {
+  padding: 1rem 1.35rem 1.2rem;
+}
+
+.bb-post-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 0.85rem;
+  color: var(--bb-ink-muted);
+  margin-bottom: 0.75rem;
+}
+
+.bb-post-body {
+  white-space: pre-wrap;
+  color: var(--bb-ink);
+  line-height: 1.6;
+}
+
+.bb-thread-reply {
+  border: 1px solid var(--bb-border);
+  border-radius: 16px;
+  padding: 1.1rem 1.2rem 1.4rem;
+  background: #171b22;
+}
+
+.bb-thread-reply-title {
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--bb-accent, #f29b3f);
+  margin-bottom: 1rem;
+  font-size: 0.95rem;
+}
+
+.bb-thread-reply-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+@media (max-width: 992px) {
+  .bb-post-row {
+    grid-template-columns: 1fr;
+  }
+
+  .bb-post-author {
+    border-right: 0;
+    border-bottom: 1px solid var(--bb-border);
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
 .bb-forum-row {
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
--- a/resources/js/pages/ThreadView.jsx
+++ b/resources/js/pages/ThreadView.jsx
@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react'
-import { Button, Card, Col, Container, Form, Row } from 'react-bootstrap'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { Button, Container, Form } from 'react-bootstrap'
 import { Link, useParams } from 'react-router-dom'
 import { createPost, getThread, listPostsByThread } from '../api/client'
 import { useAuth } from '../context/AuthContext'
@@ -15,6 +15,7 @@ export default function ThreadView() {
  const [body, setBody] = useState('')
  const [saving, setSaving] = useState(false)
  const { t } = useTranslation()
+  const replyRef = useRef(null)

  useEffect(() => {
    setLoading(true)
@@ -43,46 +44,101 @@ export default function ThreadView() {
    }
  }

+  const replyCount = posts.length
+  const allPosts = useMemo(() => {
+    if (!thread) return posts
+    const rootPost = {
+      id: `thread-${thread.id}`,
+      body: thread.body,
+      created_at: thread.created_at,
+      user_name: thread.user_name,
+      isRoot: true,
+    }
+    return [rootPost, ...posts]
+  }, [posts, thread])
+
+  const handleJumpToReply = () => {
+    replyRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  }
+
+  const totalPosts = allPosts.length
+
  return (
-    <Container className="py-5">
+    <Container className="py-4">
      {loading && <p className="bb-muted">{t('thread.loading')}</p>}
      {error && <p className="text-danger">{error}</p>}
      {thread && (
-        <>
-          <div className="bb-hero mb-4">
-            <p className="bb-chip">{t('thread.label')}</p>
-            <h2 className="mt-3">{thread.title}</h2>
-            <p className="bb-muted mb-2">{thread.body}</p>
-            {thread.forum && (
-              <p className="bb-muted mb-0">
-                {t('thread.category')}{' '}
-                <Link to={`/forum/${thread.forum.id || thread.forum.split('/').pop()}`}>
-                  {thread.forum.name || t('thread.back_to_category')}
-                </Link>
-              </p>
+        <div className="bb-thread">
+          <div className="bb-thread-titlebar">
+            <h1 className="bb-thread-title">{thread.title}</h1>
+            <div className="bb-thread-meta">
+              <span>{t('thread.by')}</span>
+              <span className="bb-thread-author">
+                {thread.user_name || t('thread.anonymous')}
+              </span>
+              {thread.created_at && (
+                <span className="bb-thread-date">{thread.created_at.slice(0, 10)}</span>
              )}
            </div>
+          </div>

-          <Row className="g-4">
-            <Col lg={7}>
-              <h4 className="bb-section-title mb-3">{t('thread.replies')}</h4>
-              {posts.length === 0 && (
-                <p className="bb-muted">{t('thread.empty')}</p>
+          <div className="bb-thread-toolbar">
+            <div className="bb-thread-actions">
+              <Button className="bb-accent-button" onClick={handleJumpToReply}>
+                <i className="bi bi-reply-fill" aria-hidden="true" />
+                <span>{t('form.post_reply')}</span>
+              </Button>
+              <button type="button" className="bb-thread-icon-button" aria-label={t('thread.reply')}>
+                <i className="bi bi-arrow-counterclockwise" aria-hidden="true" />
+              </button>
+              <button type="button" className="bb-thread-icon-button" aria-label={t('thread.views')}>
+                <i className="bi bi-wrench" aria-hidden="true" />
+              </button>
+              <button type="button" className="bb-thread-icon-button" aria-label={t('thread.last_post')}>
+                <i className="bi bi-gear" aria-hidden="true" />
+              </button>
+            </div>
+            <div className="bb-thread-meta-right">
+              <span>{totalPosts} {totalPosts === 1 ? 'post' : 'posts'}</span>
+              <span>•</span>
+              <span>Page 1 of 1</span>
+            </div>
+          </div>
+
+          <div className="bb-posts">
+            {allPosts.map((post) => {
+              const authorName = post.author?.username
+                || post.user_name
+                || post.author_name
+                || t('thread.anonymous')
+
+              return (
+                <article className="bb-post-row" key={post.id}>
+                  <aside className="bb-post-author">
+                    <div className="bb-post-avatar">
+                      <i className="bi bi-person" aria-hidden="true" />
+                    </div>
+                    <div className="bb-post-author-name">{authorName}</div>
+                    <div className="bb-post-author-meta">
+                      {post.isRoot ? t('thread.label') : t('thread.reply')}
+                    </div>
+                  </aside>
+                  <div className="bb-post-content">
+                    <div className="bb-post-header">
+                      <span>{t('thread.by')} {authorName}</span>
+                      {post.created_at && (
+                        <span>{post.created_at.slice(0, 10)}</span>
                      )}
-              {posts.map((post) => (
-                <Card className="bb-card mb-3" key={post.id}>
-                  <Card.Body>
-                    <Card.Text>{post.body}</Card.Text>
-                    <small className="bb-muted">
-                      {post.author?.username || t('thread.anonymous')}
-                    </small>
-                  </Card.Body>
-                </Card>
-              ))}
-            </Col>
-            <Col lg={5}>
-              <h4 className="bb-section-title mb-3">{t('thread.reply')}</h4>
-              <div className="bb-form">
+                    </div>
+                    <div className="bb-post-body">{post.body}</div>
+                  </div>
+                </article>
+              )
+            })}
+          </div>
+
+          <div className="bb-thread-reply" ref={replyRef}>
+            <div className="bb-thread-reply-title">{t('thread.reply')}</div>
            {!token && (
              <p className="bb-muted mb-3">{t('thread.login_hint')}</p>
            )}
@@ -91,7 +147,7 @@ export default function ThreadView() {
                <Form.Label>{t('form.message')}</Form.Label>
                <Form.Control
                  as="textarea"
-                      rows={5}
+                  rows={6}
                  placeholder={t('form.reply_placeholder')}
                  value={body}
                  onChange={(event) => setBody(event.target.value)}
@@ -99,14 +155,14 @@ export default function ThreadView() {
                  required
                />
              </Form.Group>
-                  <Button type="submit" variant="dark" disabled={!token || saving}>
+              <div className="bb-thread-reply-actions">
+                <Button type="submit" className="bb-accent-button" disabled={!token || saving}>
                  {saving ? t('form.posting') : t('form.post_reply')}
                </Button>
+              </div>
            </Form>
          </div>
-            </Col>
-          </Row>
-        </>
+        </div>
      )}
    </Container>
  )