Forum tree model, i18n, and frontend updates

frontend/src/pages/ThreadView.jsx

@@ -3,6 +3,7 @@ import { Button, Card, Col, Container, Form, Row } from 'react-bootstrap'
 import { Link, useParams } from 'react-router-dom'
 import { createPost, getThread, listPostsByThread } from '../api/client'
 import { useAuth } from '../context/AuthContext'
+import { useTranslation } from 'react-i18next'
 
 export default function ThreadView() {
   const { id } = useParams()
@@ -13,6 +14,7 @@ export default function ThreadView() {
   const [loading, setLoading] = useState(true)
   const [body, setBody] = useState('')
   const [saving, setSaving] = useState(false)
+  const { t } = useTranslation()
 
   useEffect(() => {
     setLoading(true)
@@ -43,19 +45,19 @@ export default function ThreadView() {
 
   return (
     <Container className="py-5">
-      {loading && <p className="bb-muted">Loading thread...</p>}
+      {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">Thread</p>
+            <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.category && (
+            {thread.forum && (
               <p className="bb-muted mb-0">
-                Category:{' '}
-                <Link to={`/category/${thread.category.id || thread.category.split('/').pop()}`}>
-                  {thread.category.name || 'Back to category'}
+                {t('thread.category')}{' '}
+                <Link to={`/forum/${thread.forum.id || thread.forum.split('/').pop()}`}>
+                  {thread.forum.name || t('thread.back_to_category')}
                 </Link>
               </p>
             )}
@@ -63,32 +65,34 @@ export default function ThreadView() {
 
           <Row className="g-4">
             <Col lg={7}>
-              <h4 className="bb-section-title mb-3">Replies</h4>
-              {posts.length === 0 && <p className="bb-muted">Be the first to reply.</p>}
+              <h4 className="bb-section-title mb-3">{t('thread.replies')}</h4>
+              {posts.length === 0 && (
+                <p className="bb-muted">{t('thread.empty')}</p>
+              )}
               {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 || 'Anonymous'}
+                      {post.author?.username || t('thread.anonymous')}
                     </small>
                   </Card.Body>
                 </Card>
               ))}
             </Col>
             <Col lg={5}>
-              <h4 className="bb-section-title mb-3">Reply</h4>
+              <h4 className="bb-section-title mb-3">{t('thread.reply')}</h4>
               <div className="bb-form">
                 {!token && (
-                  <p className="bb-muted mb-3">Log in to reply to this thread.</p>
+                  <p className="bb-muted mb-3">{t('thread.login_hint')}</p>
                 )}
                 <Form onSubmit={handleSubmit}>
                   <Form.Group className="mb-3">
-                    <Form.Label>Message</Form.Label>
+                    <Form.Label>{t('form.message')}</Form.Label>
                     <Form.Control
                       as="textarea"
                       rows={5}
-                      placeholder="Share your reply."
+                      placeholder={t('form.reply_placeholder')}
                       value={body}
                       onChange={(event) => setBody(event.target.value)}
                       disabled={!token || saving}
@@ -96,7 +100,7 @@ export default function ThreadView() {
                     />
                   </Form.Group>
                   <Button type="submit" variant="dark" disabled={!token || saving}>
-                    {saving ? 'Posting...' : 'Post reply'}
+                    {saving ? t('form.posting') : t('form.post_reply')}
                   </Button>
                 </Form>
               </div>