tracer/speedBB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Add ping endpoint, update-refresh prompt, and dark-mode polish
All checks were successful
CI/CD Pipeline / deploy (push) Successful in 26s
Details
CI/CD Pipeline / promote_stable (push) Successful in 2s
Details

Browse Source
This commit is contained in:
tracer
2026-02-24 18:48:54 +01:00
parent 2a69ee8258
commit 0b4e0df305
9 changed files with 218 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
resources/js/App.jsx
View File

@@ -1,6 +1,6 @@
import { useEffect, useState } from 'react'
import { useEffect, useRef, useState } from 'react'
import { BrowserRouter, Link, Route, Routes, useLocation } from 'react-router-dom'
import { Container, NavDropdown } from 'react-bootstrap'
import { Button, Container, Modal, NavDropdown } from 'react-bootstrap'
import { AuthProvider, useAuth } from './context/AuthContext'
import Home from './pages/Home'
import ForumView from './pages/ForumView'
@@ -13,7 +13,7 @@ import BoardIndex from './pages/BoardIndex'
import Ucp from './pages/Ucp'
import Profile from './pages/Profile'
import { useTranslation } from 'react-i18next'
import { fetchSettings, fetchVersion, getForum, getThread } from './api/client'
import { fetchPing, fetchSettings, fetchVersion, getForum, getThread } from './api/client'
function PortalHeader({
userMenu,
@@ -241,9 +241,16 @@ function PortalHeader({
}
function AppShell() {
const PING_INTERVAL_MS = 15000
const PING_INTERVAL_HIDDEN_MS = 60000
const { t } = useTranslation()
const { token, email, userId, logout, isAdmin, isModerator } = useAuth()
const [versionInfo, setVersionInfo] = useState(null)
const [availableBuild, setAvailableBuild] = useState(null)
const [pingBuild, setPingBuild] = useState(null)
const [showUpdateModal, setShowUpdateModal] = useState(false)
const currentBuildRef = useRef(null)
const promptedBuildRef = useRef(null)
const [theme, setTheme] = useState('auto')
const [resolvedTheme, setResolvedTheme] = useState('light')
const [accentOverride, setAccentOverride] = useState(
@@ -272,6 +279,73 @@ function AppShell() {
.catch(() => setVersionInfo(null))
}, [])
useEffect(() => {
currentBuildRef.current =
typeof versionInfo?.build === 'number' ? versionInfo.build : null
}, [versionInfo?.build])
useEffect(() => {
const currentBuild =
typeof versionInfo?.build === 'number' ? versionInfo.build : null
if (currentBuild !== null && pingBuild !== null && pingBuild > currentBuild) {
setAvailableBuild(pingBuild)
return
}
setAvailableBuild(null)
}, [versionInfo?.build, pingBuild])
useEffect(() => {
if (availableBuild === null) return
if (promptedBuildRef.current === availableBuild) return
promptedBuildRef.current = availableBuild
setShowUpdateModal(true)
}, [availableBuild])
useEffect(() => {
let active = true
let timeoutId = null
const scheduleNext = () => {
const delay = document.hidden ? PING_INTERVAL_HIDDEN_MS : PING_INTERVAL_MS
timeoutId = window.setTimeout(runPing, delay)
}
const runPing = async () => {
try {
const data = await fetchPing()
const currentBuild = currentBuildRef.current
const remoteBuild =
typeof data?.version_status?.build === 'number'
? data.version_status.build
: null
console.log('speedBB ping', {
...data,
current_version: currentBuild,
})
if (!active) return
if (remoteBuild !== null) {
setPingBuild(remoteBuild)
}
window.dispatchEvent(new CustomEvent('speedbb-ping', { detail: data }))
} catch {
// ignore transient ping failures
} finally {
if (active) {
scheduleNext()
}
}
}
runPing()
return () => {
active = false
if (timeoutId) {
window.clearTimeout(timeoutId)
}
}
}, [])
useEffect(() => {
let active = true
const loadSettings = async () => {
@@ -495,8 +569,35 @@ function AppShell() {
<span className="bb-version-label">)</span>
</span>
)}
{availableBuild !== null && (
<Button
type="button"
size="sm"
className="bb-accent-button"
onClick={() => window.location.reload()}
>
{t('version.update_available_short')} (build {availableBuild}) ·{' '}
{t('version.update_now')}
</Button>
)}
</div>
</footer>
<Modal show={showUpdateModal} onHide={() => setShowUpdateModal(false)} centered>
<Modal.Header closeButton>
<Modal.Title>{t('version.refresh_prompt_title')}</Modal.Title>
</Modal.Header>
<Modal.Body>
{t('version.refresh_prompt_body', { build: availableBuild ?? '-' })}
</Modal.Body>
<Modal.Footer className="justify-content-between">
<Button variant="outline-secondary" onClick={() => setShowUpdateModal(false)}>
{t('version.remind_later')}
</Button>
<Button className="bb-accent-button" onClick={() => window.location.reload()}>
{t('version.update_now')}
</Button>
</Modal.Footer>
</Modal>
</div>
)
}

9
resources/js/api/client.js
View File

@@ -129,6 +129,15 @@ export async function fetchVersion() {
return apiFetch('/version')
}
export async function fetchPing() {
const response = await fetch('/ping', {
headers: {
Accept: 'application/json',
},
})
return parseResponse(response)
}
export async function fetchVersionCheck() {
return apiFetch('/version/check')
}

63
resources/js/index.css
View File

@@ -862,10 +862,17 @@ a {
}
[data-bs-theme="dark"] {
--bb-ink: #aaaeb4;
--bb-ink-muted: #6b7483;
--bb-border: #2a2f3a;
--bb-page-bg: radial-gradient(circle at 10% 20%, #141823 0%, #10131a 45%, #0b0e14 100%);
--bb-ink: #a3acb9;
--bb-ink-muted: #626d7e;
--bb-border: #242a35;
--bb-page-bg: radial-gradient(circle at 10% 20%, #10151f 0%, #0b1018 45%, #080b11 100%);
--bs-body-bg: #080b11;
--bs-body-color: #b3bdca;
--bs-secondary-bg: #121822;
--bs-tertiary-bg: #0f141d;
--bs-border-color: #242a35;
--bs-modal-bg: #121822;
--bs-modal-color: #b3bdca;
}
[data-bs-theme="dark"] .bb-hero {
@@ -875,11 +882,30 @@ a {
[data-bs-theme="dark"] .bb-card,
[data-bs-theme="dark"] .bb-form {
background: #171b22;
border-color: #2a2f3a;
background: #121822;
border-color: #242a35;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}
[data-bs-theme="dark"] .modal-content {
background: #121822;
border-color: #242a35;
color: #b3bdca;
}
[data-bs-theme="dark"] .modal-content .modal-body,
[data-bs-theme="dark"] .modal-content .modal-footer {
background: #121822;
}
[data-bs-theme="dark"] .modal-content .modal-header {
color: #b7c0cc;
}
[data-bs-theme="dark"] .modal-content .modal-title {
color: #b7c0cc;
}
[data-bs-theme="light"] .bb-forum-row {
background: #fff;
}
@@ -2172,16 +2198,25 @@ a {
}
.bb-accent-button {
background: var(--bb-accent, #f29b3f);
border-color: var(--bb-accent, #f29b3f);
color: #0e121b;
--bs-btn-bg: var(--bb-accent, #f29b3f);
--bs-btn-border-color: var(--bb-accent, #f29b3f);
--bs-btn-color: #0e121b;
--bs-btn-hover-bg: color-mix(in srgb, var(--bb-accent, #f29b3f) 85%, #000);
--bs-btn-hover-border-color: color-mix(in srgb, var(--bb-accent, #f29b3f) 85%, #000);
--bs-btn-hover-color: #fff;
--bs-btn-active-bg: color-mix(in srgb, var(--bb-accent, #f29b3f) 80%, #000);
--bs-btn-active-border-color: color-mix(in srgb, var(--bb-accent, #f29b3f) 80%, #000);
--bs-btn-active-color: #fff;
--bs-btn-disabled-bg: var(--bb-accent, #f29b3f);
--bs-btn-disabled-border-color: var(--bb-accent, #f29b3f);
--bs-btn-disabled-color: #0e121b;
background: var(--bs-btn-bg);
border-color: var(--bs-btn-border-color);
color: var(--bs-btn-color);
}
.bb-accent-button:hover,
.bb-accent-button:focus {
background: color-mix(in srgb, var(--bb-accent, #f29b3f) 85%, #000);
border-color: color-mix(in srgb, var(--bb-accent, #f29b3f) 85%, #000);
color: #0e121b;
.bb-accent-button:focus-visible {
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--bb-accent, #f29b3f) 35%, transparent);
}
.bb-accent-button:disabled,