UI: portal/header refinements, board index UX, and user settings

resources/js/pages/Ucp.jsx

@@ -0,0 +1,71 @@
+import { Container, Form, Row, Col } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+
+export default function Ucp({ theme, setTheme, accentOverride, setAccentOverride }) {
+  const { t, i18n } = useTranslation()
+  const accentMode = accentOverride ? 'custom' : 'system'
+
+  const handleLanguageChange = (event) => {
+    const locale = event.target.value
+    i18n.changeLanguage(locale)
+    localStorage.setItem('speedbb_lang', locale)
+  }
+
+  return (
+    <Container className="py-5 bb-portal-shell">
+      <div className="bb-portal-card">
+        <div className="bb-portal-card-title">{t('portal.user_control_panel')}</div>
+        <p className="bb-muted mb-4">{t('ucp.intro')}</p>
+        <Row className="g-3">
+          <Col xs={12}>
+            <Form.Group>
+              <Form.Label>{t('nav.language')}</Form.Label>
+              <Form.Select value={i18n.language} onChange={handleLanguageChange}>
+                <option value="en">English</option>
+                <option value="de">Deutsch</option>
+              </Form.Select>
+            </Form.Group>
+          </Col>
+          <Col md={6}>
+            <Form.Group>
+              <Form.Label>{t('nav.theme')}</Form.Label>
+              <Form.Select value={theme} onChange={(event) => setTheme(event.target.value)}>
+                <option value="auto">{t('ucp.system_default')}</option>
+                <option value="dark">{t('nav.theme_dark')}</option>
+                <option value="light">{t('nav.theme_light')}</option>
+              </Form.Select>
+            </Form.Group>
+          </Col>
+          <Col md={6}>
+            <Form.Group>
+              <Form.Label>{t('ucp.accent_override')}</Form.Label>
+              <div className="d-flex align-items-center gap-2">
+                <Form.Select
+                  value={accentMode}
+                  onChange={(event) => {
+                    const mode = event.target.value
+                    if (mode === 'system') {
+                      setAccentOverride('')
+                    } else if (!accentOverride) {
+                      setAccentOverride('#f29b3f')
+                    }
+                  }}
+                >
+                  <option value="system">{t('ucp.system_default')}</option>
+                  <option value="custom">{t('ucp.custom_color')}</option>
+                </Form.Select>
+                <Form.Control
+                  type="color"
+                  value={accentOverride || '#f29b3f'}
+                  onChange={(event) => setAccentOverride(event.target.value)}
+                  disabled={accentMode !== 'custom'}
+                />
+              </div>
+              <Form.Text className="bb-muted">{t('ucp.accent_override_hint')}</Form.Text>
+            </Form.Group>
+          </Col>
+        </Row>
+      </div>
+    </Container>
+  )
+}