Update ACP UI copy, accents, and defaults

resources/js/index.css

@@ -199,6 +199,52 @@ a {
   color: #fff;
 }
 
+.bb-acp-action.btn-outline-dark {
+  --bs-btn-color: var(--bb-accent, #f29b3f);
+  --bs-btn-border-color: var(--bb-accent, #f29b3f);
+  --bs-btn-hover-color: #0f1218;
+  --bs-btn-hover-bg: var(--bb-accent, #f29b3f);
+  --bs-btn-hover-border-color: var(--bb-accent, #f29b3f);
+  --bs-btn-active-color: #0f1218;
+  --bs-btn-active-bg: var(--bb-accent, #f29b3f);
+  --bs-btn-active-border-color: var(--bb-accent, #f29b3f);
+  --bs-btn-focus-shadow-rgb: 242, 155, 63;
+  color: var(--bb-accent, #f29b3f) !important;
+  border-color: var(--bb-accent, #f29b3f) !important;
+}
+
+.bb-acp-action--active.btn-outline-dark {
+  background-color: var(--bb-accent, #f29b3f);
+  border-color: var(--bb-accent, #f29b3f);
+  color: #0f1218;
+}
+
+.bb-acp-action.btn-outline-dark:hover,
+.bb-acp-action.btn-outline-dark:focus {
+  background-color: var(--bb-accent, #f29b3f) !important;
+  border-color: var(--bb-accent, #f29b3f) !important;
+  color: #0f1218 !important;
+}
+
+[data-bs-theme="dark"] .bb-acp-action.btn-outline-dark {
+  --bs-btn-color: var(--bb-accent, #f29b3f);
+  --bs-btn-border-color: var(--bb-accent, #f29b3f);
+  --bs-btn-hover-color: #0f1218;
+  --bs-btn-hover-bg: var(--bb-accent, #f29b3f);
+  --bs-btn-hover-border-color: var(--bb-accent, #f29b3f);
+  --bs-btn-active-color: #0f1218;
+  --bs-btn-active-bg: var(--bb-accent, #f29b3f);
+  --bs-btn-active-border-color: var(--bb-accent, #f29b3f);
+  color: var(--bb-accent, #f29b3f) !important;
+  border-color: var(--bb-accent, #f29b3f) !important;
+}
+
+[data-bs-theme="dark"] .bb-acp-action--active.btn-outline-dark {
+  background-color: var(--bb-accent, #f29b3f);
+  border-color: var(--bb-accent, #f29b3f);
+  color: #0f1218;
+}
+
 .bb-load-time {
   font-weight: 600;
 }

resources/js/pages/Acp.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { Button, ButtonGroup, Col, Container, Form, Modal, Row, Tab, Tabs } from 'react-bootstrap'
 import DataTable, { createTheme } from 'react-data-table-component'
 import { useTranslation } from 'react-i18next'
@@ -218,6 +218,7 @@ export default function Acp({ isAdmin }) {
     )
   }
   const [collapsed, setCollapsed] = useState(() => new Set())
+  const hasInitializedCollapse = useRef(false)
   const [showModal, setShowModal] = useState(false)
   const [form, setForm] = useState({
     name: '',
@@ -245,6 +246,16 @@ export default function Acp({ isAdmin }) {
     }
   }, [isAdmin])
 
+  useEffect(() => {
+    if (!hasInitializedCollapse.current && forums.length > 0) {
+      const ids = forums
+        .filter((forum) => forum.type === 'category')
+        .map((forum) => String(forum.id))
+      setCollapsed(new Set(ids))
+      hasInitializedCollapse.current = true
+    }
+  }, [forums])
+
   const refreshUsers = async () => {
     setUsersLoading(true)
     setUsersError('')
@@ -602,7 +613,7 @@ export default function Acp({ isAdmin }) {
               <div className="bb-muted">{node.description || t('forum.no_description')}</div>
             </div>
           </div>
-          <div className="d-flex align-items-center gap-2">
+          <div className="d-flex align-items-center gap-3">
             <span
               className="bb-drag-handle text-muted"
               style={{ cursor: 'grab', display: 'inline-flex' }}
@@ -651,11 +662,11 @@ export default function Acp({ isAdmin }) {
               <div className="d-flex align-items-center justify-content-between mb-3 gap-3 flex-wrap">
                 <div className="d-flex align-items-center gap-2">
                   <h5 className="mb-0">{t('acp.forums_tree')}</h5>
-                  <Button size="sm" variant="outline-dark" onClick={handleExpandAll}>
+                  <Button size="sm" variant="outline-dark" className="bb-acp-action" onClick={handleExpandAll}>
                     <i className="bi bi-arrows-expand me-1" aria-hidden="true" />
                     {t('acp.expand_all')}
                   </Button>
-                  <Button size="sm" variant="outline-dark" onClick={handleCollapseAll}>
+                  <Button size="sm" variant="outline-dark" className="bb-acp-action" onClick={handleCollapseAll}>
                     <i className="bi bi-arrows-collapse me-1" aria-hidden="true" />
                     {t('acp.collapse_all')}
                   </Button>
@@ -663,7 +674,8 @@ export default function Acp({ isAdmin }) {
                 <div className="d-flex gap-2">
                   <Button
                     size="sm"
-                    variant={createType === 'category' ? 'dark' : 'outline-dark'}
+                    variant="outline-dark"
+                    className={`bb-acp-action ${createType === 'category' ? 'bb-acp-action--active' : ''}`}
                     onClick={() => handleStartCreate('category')}
                   >
                     <i className="bi bi-folder2 me-1" aria-hidden="true" />
@@ -671,7 +683,8 @@ export default function Acp({ isAdmin }) {
                   </Button>
                   <Button
                     size="sm"
-                    variant={createType === 'forum' ? 'dark' : 'outline-dark'}
+                    variant="outline-dark"
+                    className={`bb-acp-action ${createType === 'forum' ? 'bb-acp-action--active' : ''}`}
                     onClick={() => handleStartCreate('forum')}
                   >
                     <i className="bi bi-chat-left-text me-1" aria-hidden="true" />
@@ -720,11 +733,29 @@ export default function Acp({ isAdmin }) {
       <Modal show={showModal} onHide={handleReset} centered size="lg">
         <Modal.Header closeButton closeVariant="white">
           <Modal.Title>
-            {selectedId ? t('acp.forums_edit_title') : t('acp.forums_create_title')}
+            {selectedId
+              ? form.type === 'category'
+                ? t('acp.forums_edit_category_title')
+                : t('acp.forums_edit_forum_title')
+              : createType === 'category'
+                ? t('acp.forums_create_category_title')
+                : createType === 'forum'
+                  ? t('acp.forums_create_forum_title')
+                  : t('acp.forums_create_title')}
           </Modal.Title>
         </Modal.Header>
         <Modal.Body>
-          <p className="bb-muted">{t('acp.forums_form_hint')}</p>
+          <p className="bb-muted">
+            {selectedId
+              ? form.type === 'category'
+                ? t('acp.forums_edit_category_hint')
+                : t('acp.forums_edit_forum_hint')
+              : createType === 'category'
+                ? t('acp.forums_create_category_hint')
+                : createType === 'forum'
+                  ? t('acp.forums_create_forum_hint')
+                  : t('acp.forums_form_hint')}
+          </p>
           <Form onSubmit={handleSubmit}>
             <Form.Group className="mb-3">
               <Form.Label>{t('form.title')}</Form.Label>
@@ -744,16 +775,18 @@ export default function Acp({ isAdmin }) {
                 onChange={(event) => setForm({ ...form, description: event.target.value })}
               />
             </Form.Group>
-            <Form.Group className="mb-3">
-              <Form.Label>{t('acp.forums_type')}</Form.Label>
-              <Form.Select
-                value={form.type}
-                onChange={(event) => setForm({ ...form, type: event.target.value })}
-              >
-                <option value="category">{t('forum.type_category')}</option>
-                <option value="forum">{t('forum.type_forum')}</option>
-              </Form.Select>
-            </Form.Group>
+            {selectedId && (
+              <Form.Group className="mb-3">
+                <Form.Label>{t('acp.forums_type')}</Form.Label>
+                <Form.Select
+                  value={form.type}
+                  onChange={(event) => setForm({ ...form, type: event.target.value })}
+                >
+                  <option value="category">{t('forum.type_category')}</option>
+                  <option value="forum">{t('forum.type_forum')}</option>
+                </Form.Select>
+              </Form.Group>
+            )}
             <Form.Group className="mb-3">
               <Form.Label>{t('acp.forums_parent')}</Form.Label>
               <Form.Select

resources/lang/de.json

@@ -9,11 +9,19 @@
   "acp.forums": "Foren",
   "acp.forums_confirm_delete": "Dieses Forum löschen? Das kann nicht rückgängig gemacht werden.",
   "acp.forums_create_title": "Forum oder Kategorie erstellen",
+  "acp.forums_create_category_title": "Kategorie erstellen",
+  "acp.forums_create_forum_title": "Forum erstellen",
   "acp.forums_edit_title": "Forum bearbeiten",
+  "acp.forums_edit_category_title": "Kategorie bearbeiten",
+  "acp.forums_edit_forum_title": "Forum bearbeiten",
   "acp.forums_empty": "Noch keine Foren vorhanden. Lege rechts das erste an.",
   "acp.forums_form_empty_hint": "Wähle ein Forum zum Bearbeiten oder klicke auf Neue Kategorie / Neues Forum.",
   "acp.forums_form_empty_title": "Keine Auswahl",
   "acp.forums_form_hint": "Erstelle ein neues Forum oder bearbeite das ausgewählte. Kategorien können Foren und andere Kategorien enthalten.",
+  "acp.forums_create_category_hint": "Erstelle eine neue Kategorie. Kategorien können Foren und andere Kategorien enthalten.",
+  "acp.forums_create_forum_hint": "Erstelle ein neues Forum innerhalb einer Kategorie.",
+  "acp.forums_edit_category_hint": "Aktualisiere die Kategorie. Kategorien können Foren und andere Kategorien enthalten.",
+  "acp.forums_edit_forum_hint": "Aktualisiere die Forum-Details.",
   "acp.forums_hint": "Kategorien und Foren in einer Baumansicht verwalten.",
   "acp.forums_name_required": "Bitte zuerst einen Namen eingeben.",
   "acp.forums_parent": "Übergeordnete Kategorie",

resources/lang/en.json

@@ -9,11 +9,19 @@
   "acp.forums": "Forums",
   "acp.forums_confirm_delete": "Delete this forum? This cannot be undone.",
   "acp.forums_create_title": "Create forum or category",
+  "acp.forums_create_category_title": "Create category",
+  "acp.forums_create_forum_title": "Create forum",
   "acp.forums_edit_title": "Edit forum",
+  "acp.forums_edit_category_title": "Edit category",
+  "acp.forums_edit_forum_title": "Edit forum",
   "acp.forums_empty": "No forums yet. Create the first one on the right.",
   "acp.forums_form_empty_hint": "Choose a forum to edit or click New category / New forum to create one.",
   "acp.forums_form_empty_title": "No selection",
   "acp.forums_form_hint": "Create a new forum or edit the selected one. Categories can contain forums and other categories.",
+  "acp.forums_create_category_hint": "Create a new category. Categories can contain forums and other categories.",
+  "acp.forums_create_forum_hint": "Create a new forum within a category.",
+  "acp.forums_edit_category_hint": "Update the category details. Categories can contain forums and other categories.",
+  "acp.forums_edit_forum_hint": "Update the forum details.",
   "acp.forums_hint": "Manage categories and forums from a tree view.",
   "acp.forums_name_required": "Please enter a name before saving.",
   "acp.forums_parent": "Parent category",