Tighten ACP forum actions and avatar handling

resources/js/index.css

@@ -1422,11 +1422,24 @@ a {
 }
 
 .bb-portal-user-avatar {
-  width: 72px;
-  height: 72px;
+  width: 150px;
+  height: 150px;
   border-radius: 12px;
   background: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.04));
   border: 1px solid rgba(255, 255, 255, 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--bb-accent, #f29b3f);
+  font-size: 2rem;
+  overflow: hidden;
+}
+
+.bb-portal-user-avatar img {
+  width: auto;
+  height: auto;
+  max-width: 150px;
+  max-height: 150px;
 }
 
 .bb-portal-user-name {
@@ -1644,6 +1657,14 @@ a {
   border-color: color-mix(in srgb, var(--bb-accent, #f29b3f) 85%, #000);
 }
 
+.bb-tree-action-group {
+  width: 176px;
+}
+
+.bb-tree-action-group .bb-action-group {
+  justify-content: flex-end;
+}
+
 .bb-drag-handle {
   font-size: 1.2rem;
   line-height: 1;

resources/js/pages/Acp.jsx

@@ -905,32 +905,34 @@ export default function Acp({ isAdmin }) {
             >
               <i className="bi bi-arrow-down-up" aria-hidden="true" />
             </span>
-            <ButtonGroup size="sm" className="bb-action-group">
-              {node.type === 'category' && (
-                <>
-                  <Button
-                    variant="dark"
-                    onClick={() => handleStartCreateChild('category', node.id)}
-                    title={t('acp.add_category')}
-                  >
-                    <i className="bi bi-folder-plus" aria-hidden="true" />
-                  </Button>
-                  <Button
-                    variant="dark"
-                    onClick={() => handleStartCreateChild('forum', node.id)}
-                    title={t('acp.add_forum')}
-                  >
-                    <i className="bi bi-chat-left-text" aria-hidden="true" />
-                  </Button>
-                </>
-              )}
-              <Button variant="dark" onClick={() => handleSelectForum(node)} title={t('acp.edit')}>
-                <i className="bi bi-pencil" aria-hidden="true" />
-              </Button>
-              <Button variant="dark" onClick={() => handleDelete(node.id)} title={t('acp.delete')}>
-                <i className="bi bi-trash" aria-hidden="true" />
-              </Button>
-            </ButtonGroup>
+            <div className="bb-tree-action-group">
+              <ButtonGroup size="sm" className="bb-action-group w-100">
+                {node.type === 'category' && (
+                  <>
+                    <Button
+                      variant="dark"
+                      onClick={() => handleStartCreateChild('category', node.id)}
+                      title={t('acp.add_category')}
+                    >
+                      <i className="bi bi-folder-plus" aria-hidden="true" />
+                    </Button>
+                    <Button
+                      variant="dark"
+                      onClick={() => handleStartCreateChild('forum', node.id)}
+                      title={t('acp.add_forum')}
+                    >
+                      <i className="bi bi-chat-left-text" aria-hidden="true" />
+                    </Button>
+                  </>
+                )}
+                <Button variant="dark" onClick={() => handleSelectForum(node)} title={t('acp.edit')}>
+                  <i className="bi bi-pencil" aria-hidden="true" />
+                </Button>
+                <Button variant="dark" onClick={() => handleDelete(node.id)} title={t('acp.delete')}>
+                  <i className="bi bi-trash" aria-hidden="true" />
+                </Button>
+              </ButtonGroup>
+            </div>
           </div>
         </div>
         {node.children?.length > 0 &&

resources/js/pages/Home.jsx

@@ -1,8 +1,9 @@
 import { useEffect, useMemo, useState } from 'react'
 import { Badge, Container } from 'react-bootstrap'
 import { Link } from 'react-router-dom'
-import { listAllForums, listThreads } from '../api/client'
+import { getCurrentUser, listAllForums, listThreads } from '../api/client'
 import { useTranslation } from 'react-i18next'
+import { useAuth } from '../context/AuthContext'
 
 export default function Home() {
   const [forums, setForums] = useState([])
@@ -10,6 +11,8 @@ export default function Home() {
   const [error, setError] = useState('')
   const [loadingForums, setLoadingForums] = useState(true)
   const [loadingThreads, setLoadingThreads] = useState(true)
+  const [profile, setProfile] = useState(null)
+  const { token, roles, email } = useAuth()
   const { t } = useTranslation()
 
   useEffect(() => {
@@ -26,6 +29,27 @@ export default function Home() {
       .finally(() => setLoadingThreads(false))
   }, [])
 
+  useEffect(() => {
+    if (!token) {
+      setProfile(null)
+      return
+    }
+    let active = true
+
+    getCurrentUser()
+      .then((data) => {
+        if (!active) return
+        setProfile(data)
+      })
+      .catch(() => {
+        if (active) setProfile(null)
+      })
+
+    return () => {
+      active = false
+    }
+  }, [token])
+
   const getParentId = (forum) => {
     if (!forum.parent) return null
     if (typeof forum.parent === 'string') {
@@ -79,6 +103,13 @@ export default function Home() {
       .slice(0, 12)
   }, [threads])
 
+  const roleLabel = useMemo(() => {
+    if (!roles?.length) return t('portal.user_role_member')
+    if (roles.includes('ROLE_ADMIN')) return t('portal.user_role_operator')
+    if (roles.includes('ROLE_MODERATOR')) return t('portal.user_role_moderator')
+    return t('portal.user_role_member')
+  }, [roles, t])
+
   const resolveForumName = (thread) => {
     if (!thread?.forum) return t('portal.unknown_forum')
     const parts = thread.forum.split('/')
@@ -205,9 +236,15 @@ export default function Home() {
           <div className="bb-portal-card">
             <div className="bb-portal-card-title">{t('portal.user_menu')}</div>
             <div className="bb-portal-user-card">
-              <div className="bb-portal-user-avatar" />
-              <div className="bb-portal-user-name">tracer</div>
-              <div className="bb-portal-user-role">Operator</div>
+              <div className="bb-portal-user-avatar">
+                {profile?.avatar_url ? (
+                  <img src={profile.avatar_url} alt="" />
+                ) : (
+                  <i className="bi bi-person" aria-hidden="true" />
+                )}
+              </div>
+              <div className="bb-portal-user-name">{profile?.name || email || 'User'}</div>
+              <div className="bb-portal-user-role">{roleLabel}</div>
             </div>
             <ul className="bb-portal-list">
               <li>{t('portal.user_new_posts')}</li>

resources/lang/de.json

@@ -150,6 +150,9 @@
   "portal.user_control_panel": "Benutzerkontrollzentrum",
   "portal.user_profile": "Profil",
   "portal.user_logout": "Logout",
+  "portal.user_role_operator": "Operator",
+  "portal.user_role_moderator": "Moderator",
+  "portal.user_role_member": "Mitglied",
   "portal.advertisement": "Werbung",
   "profile.title": "Profil",
   "profile.loading": "Profil wird geladen...",

resources/lang/en.json

@@ -150,6 +150,9 @@
   "portal.user_control_panel": "User Control Panel",
   "portal.user_profile": "Profile",
   "portal.user_logout": "Logout",
+  "portal.user_role_operator": "Operator",
+  "portal.user_role_moderator": "Moderator",
+  "portal.user_role_member": "Member",
   "portal.advertisement": "Advertisement",
   "profile.title": "Profile",
   "profile.loading": "Loading profile...",