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

resources/js/App.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
-import { BrowserRouter, Link, Route, Routes } from 'react-router-dom'
-import { Container, Nav, Navbar, NavDropdown } from 'react-bootstrap'
+import { BrowserRouter, Link, Route, Routes, useLocation } from 'react-router-dom'
+import { Container, NavDropdown } from 'react-bootstrap'
 import { AuthProvider, useAuth } from './context/AuthContext'
 import Home from './pages/Home'
 import ForumView from './pages/ForumView'
@@ -8,96 +8,197 @@ import ThreadView from './pages/ThreadView'
 import Login from './pages/Login'
 import Register from './pages/Register'
 import Acp from './pages/Acp'
+import BoardIndex from './pages/BoardIndex'
+import Ucp from './pages/Ucp'
 import { useTranslation } from 'react-i18next'
-import { fetchSetting, fetchVersion } from './api/client'
+import { fetchSetting, fetchVersion, getForum, getThread } from './api/client'
 
-function Navigation({ theme, onThemeChange }) {
-  const { token, email, logout, isAdmin } = useAuth()
-  const { t, i18n } = useTranslation()
+function PortalHeader({ userMenu, isAuthenticated }) {
+  const { t } = useTranslation()
+  const location = useLocation()
+  const [crumbs, setCrumbs] = useState([])
 
-  const handleLanguageChange = (locale) => {
-    i18n.changeLanguage(locale)
-    localStorage.setItem('speedbb_lang', locale)
-  }
+  useEffect(() => {
+    let active = true
 
-  const handleThemeChange = (value) => {
-    onThemeChange(value)
-    localStorage.setItem('speedbb_theme', value)
-  }
+    const parseForumId = (parent) => {
+      if (!parent) return null
+      if (typeof parent === 'string') {
+        const parts = parent.split('/')
+        return parts[parts.length - 1] || null
+      }
+      if (typeof parent === 'object' && parent.id) {
+        return parent.id
+      }
+      return null
+    }
+
+    const buildForumChain = async (forum) => {
+      const chain = []
+      let cursor = forum
+
+      while (cursor) {
+        chain.unshift({ label: cursor.name, to: `/forum/${cursor.id}` })
+        const parentId = parseForumId(cursor.parent)
+        if (!parentId) break
+        cursor = await getForum(parentId)
+      }
+
+      return chain
+    }
+
+    const buildCrumbs = async () => {
+      const base = [
+        { label: t('portal.portal'), to: '/' },
+        { label: t('portal.board_index'), to: '/forums' },
+      ]
+
+      if (location.pathname === '/') {
+        setCrumbs([{ ...base[0], current: true }, { ...base[1] }])
+        return
+      }
+
+      if (location.pathname === '/forums') {
+        setCrumbs([{ ...base[0] }, { ...base[1], current: true }])
+        return
+      }
+
+      if (location.pathname.startsWith('/forum/')) {
+        const forumId = location.pathname.split('/')[2]
+        if (forumId) {
+          const forum = await getForum(forumId)
+          const chain = await buildForumChain(forum)
+          if (!active) return
+          setCrumbs([...base, ...chain.map((crumb, idx) => ({
+            ...crumb,
+            current: idx === chain.length - 1,
+          }))])
+          return
+        }
+      }
+
+      if (location.pathname.startsWith('/thread/')) {
+        const threadId = location.pathname.split('/')[2]
+        if (threadId) {
+          const thread = await getThread(threadId)
+          const forumId = thread?.forum?.split('/').pop()
+          if (forumId) {
+            const forum = await getForum(forumId)
+            const chain = await buildForumChain(forum)
+            if (!active) return
+            const chainWithCurrent = chain.map((crumb, index) => ({
+              ...crumb,
+              current: index === chain.length - 1,
+            }))
+            setCrumbs([...base, ...chainWithCurrent])
+            return
+          }
+        }
+      }
+
+      setCrumbs([{ ...base[0] }, { ...base[1], current: true }])
+    }
+
+    buildCrumbs()
+
+    return () => {
+      active = false
+    }
+  }, [location.pathname, t])
 
   return (
-    <Navbar expand="lg" className="bb-nav">
-      <Container>
-        <Navbar.Brand as={Link} to="/" className="fw-semibold">
-          {t('app.brand')}
-        </Navbar.Brand>
-        {isAdmin && (
-          <Nav className="me-auto">
-            <Nav.Link as={Link} to="/acp">
-              {t('nav.acp')}
-            </Nav.Link>
-          </Nav>
-        )}
-        <Navbar.Toggle aria-controls="bb-nav" />
-        <Navbar.Collapse id="bb-nav">
-          <Nav className="ms-auto align-items-lg-center gap-2">
-            {!token && (
+    <Container className="pt-2 pb-2 bb-portal-shell">
+      <div className="bb-portal-banner">
+        <div className="bb-portal-brand">
+          <div className="bb-portal-logo">24unix.net</div>
+          <div className="bb-portal-tagline">{t('portal.tagline')}</div>
+        </div>
+        <div className="bb-portal-search">
+          <input type="text" placeholder={t('portal.search_placeholder')} disabled />
+          <span className="bb-portal-search-icon">
+            <i className="bi bi-search" aria-hidden="true" />
+          </span>
+        </div>
+      </div>
+
+      <div className="bb-portal-bars">
+        <div className="bb-portal-bar bb-portal-bar--top">
+          <div className="bb-portal-bar-left">
+            <span className="bb-portal-bar-title">
+              <i className="bi bi-list" aria-hidden="true" /> {t('portal.quick_links')}
+            </span>
+            <div className="bb-portal-bar-links">
+              <span>
+                <i className="bi bi-question-circle-fill" aria-hidden="true" /> {t('portal.link_faq')}
+              </span>
+              <Link to="/acp" className="bb-portal-link">
+                <i className="bi bi-gear-fill" aria-hidden="true" /> {t('portal.link_acp')}
+              </Link>
+              <span>
+                <i className="bi bi-hammer" aria-hidden="true" /> {t('portal.link_mcp')}
+              </span>
+            </div>
+          </div>
+          <div
+            className={`bb-portal-user-links${isAuthenticated ? '' : ' bb-portal-user-links--guest'}`}
+          >
+            {isAuthenticated ? (
               <>
-                <Nav.Link as={Link} to="/login">
-                  {t('nav.login')}
-                </Nav.Link>
-                <Nav.Link as={Link} to="/register">
-                  {t('nav.register')}
-                </Nav.Link>
+                <span>
+                  <i className="bi bi-bell-fill" aria-hidden="true" /> {t('portal.notifications')}
+                </span>
+                <span>
+                  <i className="bi bi-envelope-fill" aria-hidden="true" /> {t('portal.messages')}
+                </span>
+                {userMenu}
+              </>
+            ) : (
+              <>
+                <Link to="/register" className="bb-portal-user-link">
+                  <i className="bi bi-pencil-square" aria-hidden="true" /> {t('nav.register')}
+                </Link>
+                <Link to="/login" className="bb-portal-user-link">
+                  <i className="bi bi-power" aria-hidden="true" /> {t('nav.login')}
+                </Link>
               </>
             )}
-            {token && (
-              <>
-                <span className="bb-chip">{email}</span>
-                <Nav.Link onClick={logout}>{t('nav.logout')}</Nav.Link>
-              </>
-            )}
-            <NavDropdown title={t('nav.language')} align="end">
-              <NavDropdown.Item onClick={() => handleLanguageChange('en')}>
-                English
-              </NavDropdown.Item>
-              <NavDropdown.Item onClick={() => handleLanguageChange('de')}>
-                Deutsch
-              </NavDropdown.Item>
-            </NavDropdown>
-            <NavDropdown title={t('nav.theme')} align="end">
-              <NavDropdown.Item onClick={() => handleThemeChange('auto')} active={theme === 'auto'}>
-                {t('nav.theme_auto')}
-              </NavDropdown.Item>
-              <NavDropdown.Item onClick={() => handleThemeChange('light')} active={theme === 'light'}>
-                {t('nav.theme_light')}
-              </NavDropdown.Item>
-              <NavDropdown.Item onClick={() => handleThemeChange('dark')} active={theme === 'dark'}>
-                {t('nav.theme_dark')}
-              </NavDropdown.Item>
-            </NavDropdown>
-          </Nav>
-        </Navbar.Collapse>
-      </Container>
-    </Navbar>
+          </div>
+        </div>
+        <div className="bb-portal-bar bb-portal-bar--bottom">
+          <div className="bb-portal-breadcrumb">
+            {crumbs.map((crumb, index) => (
+              <span key={`${crumb.to}-${index}`} className="bb-portal-crumb">
+                {index > 0 && <span className="bb-portal-sep">›</span>}
+                {crumb.current ? (
+                  <span className="bb-portal-current">
+                    {index === 0 && <i className="bi bi-house-door-fill" aria-hidden="true" />}
+                    {index === 1 && <i className="bi bi-chat-left-text" aria-hidden="true" />}
+                    {crumb.label}
+                  </span>
+                ) : (
+                  <Link to={crumb.to} className="bb-portal-link">
+                    {index === 0 && <i className="bi bi-house-door-fill" aria-hidden="true" />}
+                    {index === 1 && <i className="bi bi-chat-left-text" aria-hidden="true" />}
+                    {crumb.label}
+                  </Link>
+                )}
+              </span>
+            ))}
+          </div>
+        </div>
+      </div>
+    </Container>
   )
 }
 
 function AppShell() {
   const { t } = useTranslation()
-  const { isAdmin } = useAuth()
-  const [loadMs, setLoadMs] = useState(null)
+  const { token, email, logout, isAdmin } = useAuth()
   const [versionInfo, setVersionInfo] = useState(null)
   const [theme, setTheme] = useState(() => localStorage.getItem('speedbb_theme') || 'auto')
-
-  useEffect(() => {
-    const [entry] = performance.getEntriesByType('navigation')
-    if (entry?.duration) {
-      setLoadMs(Math.round(entry.duration))
-      return
-    }
-    setLoadMs(Math.round(performance.now()))
-  }, [])
+  const [accentOverride, setAccentOverride] = useState(
+    () => localStorage.getItem('speedbb_accent') || ''
+  )
 
   useEffect(() => {
     fetchVersion()
@@ -108,12 +209,21 @@ function AppShell() {
   useEffect(() => {
     fetchSetting('accent_color')
       .then((setting) => {
-        if (setting?.value) {
+        if (setting?.value && !accentOverride) {
           document.documentElement.style.setProperty('--bb-accent', setting.value)
         }
       })
       .catch(() => {})
-  }, [])
+  }, [accentOverride])
+
+  useEffect(() => {
+    if (accentOverride) {
+      document.documentElement.style.setProperty('--bb-accent', accentOverride)
+      localStorage.setItem('speedbb_accent', accentOverride)
+    } else {
+      localStorage.removeItem('speedbb_accent')
+    }
+  }, [accentOverride])
 
   useEffect(() => {
     const root = document.documentElement
@@ -144,14 +254,53 @@ function AppShell() {
 
   return (
     <div className="bb-shell">
-      <Navigation theme={theme} onThemeChange={setTheme} />
+      <PortalHeader
+        isAuthenticated={!!token}
+        userMenu={
+          token ? (
+            <NavDropdown
+              title={
+                <span className="bb-user-menu">
+                  <span className="bb-user-menu__name">{email}</span>
+                  <i className="bi bi-caret-down-fill" aria-hidden="true" />
+                </span>
+              }
+              align="end"
+              className="bb-user-menu__dropdown"
+            >
+              <NavDropdown.Item as={Link} to="/ucp">
+                <i className="bi bi-sliders" aria-hidden="true" /> {t('portal.user_control_panel')}
+              </NavDropdown.Item>
+              <NavDropdown.Item as={Link} to="/ucp">
+                <i className="bi bi-person" aria-hidden="true" /> {t('portal.user_profile')}
+              </NavDropdown.Item>
+              <NavDropdown.Divider />
+              <NavDropdown.Item onClick={logout}>
+                <i className="bi bi-power" aria-hidden="true" /> {t('portal.user_logout')}
+              </NavDropdown.Item>
+            </NavDropdown>
+          ) : null
+        }
+      />
       <Routes>
         <Route path="/" element={<Home />} />
+        <Route path="/forums" element={<BoardIndex />} />
         <Route path="/forum/:id" element={<ForumView />} />
         <Route path="/thread/:id" element={<ThreadView />} />
         <Route path="/login" element={<Login />} />
         <Route path="/register" element={<Register />} />
         <Route path="/acp/*" element={<Acp isAdmin={isAdmin} />} />
+        <Route
+          path="/ucp"
+          element={
+            <Ucp
+              theme={theme}
+              setTheme={setTheme}
+              accentOverride={accentOverride}
+              setAccentOverride={setAccentOverride}
+            />
+          }
+        />
       </Routes>
       <footer className="bb-footer">
         <div className="ms-3 d-flex align-items-center gap-3">
@@ -165,12 +314,6 @@ function AppShell() {
               <span className="bb-version-label">)</span>
             </span>
           )}
-          {loadMs !== null && (
-            <span className="bb-load-time">
-              <span className="bb-load-label">Page load time</span>{' '}
-              <span className="bb-load-value">{loadMs}ms</span>
-            </span>
-          )}
         </div>
       </footer>
     </div>