gwadaking/radarsargasses
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add trend UX + PHPStan level 6 clean (0 errors)

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Gwadaking
2026-04-03 16:06:13 -04:00
parent 997e2d186c
commit 0d323b871b
26 changed files with 471 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/components/SpotPanel/SpotPanel.css
View File

@@ -124,6 +124,25 @@
.gauge--medium .spot-panel__gauge-fill { background: #eab308; }
.gauge--high .spot-panel__gauge-fill { background: #ef4444; }
/* Trend */
.spot-panel__trend {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
border-radius: 12px;
border: 2px solid rgba(0,0,0,0.12);
margin-bottom: 12px;
font-weight: 600;
font-size: 14px;
}
.trend--bad { background: #fee2e2; color: #b91c1c; }
.trend--neutral { background: #f1f5f9; color: #475569; }
.trend--good { background: #dcfce7; color: #15803d; }
.spot-panel__trend-icon { font-size: 18px; line-height: 1; }
.spot-panel__trend-label { font-family: 'Fredoka', sans-serif; }
/* Details */
.spot-panel__details {
display: grid;

19
frontend/src/components/SpotPanel/SpotPanel.jsx
View File

@@ -6,6 +6,12 @@ import './SpotPanel.css';
const LEVEL_LABEL = { low: 'OK', medium: 'Risque', high: 'Impact' };
const TYPE_ICON = { beach: '🏖', port: '⚓', surf: '🏄', fishing: '🎣' };
const TREND_CONFIG = {
increasing: { icon: '📈', label: 'Situation en dégradation', cls: 'trend--bad' },
stable: { icon: '➡️', label: 'Situation stable', cls: 'trend--neutral' },
decreasing: { icon: '📉', label: 'Amélioration en cours', cls: 'trend--good' },
};
const HORIZON_LABELS = { now: 'Maintenant', h6: '+6h', h12: '+12h', h24: '+24h', h48: '+48h' };
export default function SpotPanel({ spot, activeStep, onClose }) {
@@ -82,13 +88,20 @@ export default function SpotPanel({ spot, activeStep, onClose }) {
</div>
</div>
{activeStep === 'now' && displayScore.trend && (() => {
const t = TREND_CONFIG[displayScore.trend] ?? TREND_CONFIG.stable;
return (
<div className={`spot-panel__trend ${t.cls}`}>
<span className="spot-panel__trend-icon">{t.icon}</span>
<span className="spot-panel__trend-label">{t.label}</span>
</div>
);
})()}
<dl className="spot-panel__details">
{displayScore.distance != null && (
<><dt>Distance sargasses</dt><dd>{displayScore.distance} km</dd></>
)}
{activeStep === 'now' && displayScore.trend && (
<><dt>Tendance</dt><dd>{displayScore.trend}</dd></>
)}
{activeStep === 'now' && displayScore.computedAt && (
<><dt>Calculé le</dt>
<dd>{new Date(displayScore.computedAt).toLocaleString('fr-FR')}</dd></>