shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Extend NDS patterns and migrate shared UI surfaces
All checks were successful
Deploy Sokko G / deploy (push) Successful in 17s
Details

Browse source
This commit is contained in:
Shinuwa 2026-09-02 15:50:04 +02:00
parent fef7735a1d
commit 9aa98c892d
41 changed files with 1035 additions and 405 deletions
Download patch file Download diff file Expand all files Collapse all files

4
website/src/features/games/GameFiltersPanel.jsx
View file

@ -22,7 +22,7 @@ export function GameFiltersPanel({
}
return (
<div className="filter-panel">
<div className="filter-panel nds-filter-panel">
<div className="filter-panel-head">
<div>
<p className="eyebrow">Filtres</p>
@ -63,7 +63,7 @@ export function GameFiltersPanel({
{options.map((option) => {
const optionId = getOptionId(option);
return (
<label className={`filter-chip ${getOptionClassName(option)} ${selected.has(optionId) ? "active" : ""}`} key={optionId}>
<label className={`filter-chip nds-chip ${getOptionClassName(option)} ${selected.has(optionId) ? "active" : ""}`} key={optionId}>
<input
className="nds-checkbox"
data-size="sm"

2
website/src/features/games/GameListsPage.jsx
View file

@ -95,7 +95,7 @@ export function GameListsPage({ game, lists, selectedListId, onSelectList, linke
</section>
</>
) : (
<section className="empty">
<section className="empty nds-empty-state">
<h2>Aucune liste</h2>
<p>Aucune liste n’est encore disponible pour ce jeu.</p>
</section>

12
website/src/features/games/GamesPage.jsx
View file

@ -4,7 +4,7 @@ export function GamesPage({ siteContent, games, gamesError }) {
return (
<>
<section className="page-hero">
<section className="page-hero nds-page-hero">
<div>
<p className="eyebrow">{content.eyebrow}</p>
<h1>{content.title}</h1>
@ -13,9 +13,9 @@ export function GamesPage({ siteContent, games, gamesError }) {
</section>
<section className="game-list">
{games.length ? games.map((game) => (
<article className="card game-card" key={game.id}>
<article className="card nds-card game-card" data-variant="interactive" key={game.id}>
<a
className="card-cover game-card-cover game-card-cover-link"
className="card-cover nds-card-cover game-card-cover game-card-cover-link"
href={`#/games/${game.id}`}
aria-label={`Ouvrir ${game.title}`}
title={`Ouvrir ${game.title}`}
@ -27,17 +27,17 @@ export function GamesPage({ siteContent, games, gamesError }) {
<span className="game-card-placeholder" aria-hidden="true">{game.title}</span>
)}
</a>
<div className="card-body">
<div className="card-body nds-card-body">
<p className="eyebrow">{game.eyebrow || "Guide de jeu"}</p>
<h2>{game.title}</h2>
<p>{game.summary}</p>
<div className="card-actions">
<div className="card-actions nds-card-actions nds-toolbar">
<a className="nds-button" data-size="sm" data-variant="primary" href={`#/games/${game.id}`}>Ouvrir</a>
</div>
</div>
</article>
)) : (
<div className="empty">
<div className="empty nds-empty-state">
<h2>{content.emptyTitle}</h2>
<p>{gamesError || content.emptyText}</p>
</div>

4
website/src/features/games/diablo4/Diablo4AffixCard.jsx
View file

@ -3,14 +3,14 @@ import { getCategoryIconStyle, getCategoryLabel } from "./utils.js";
export function Diablo4AffixCard({ affix, categoryMap }) {
return (
<article className="compact-data-card diablo4-affix-card">
<article className="compact-data-card nds-card diablo4-affix-card" data-variant="interactive">
<div className="diablo4-affix-card-body">
<h2>{affix.label}</h2>
<div className="diablo4-category-list" aria-label="Catégories">
{(affix.categories || []).map((categoryId) => {
const category = categoryMap[categoryId] || categoryId;
return (
<span className={`tone-${category.tone || "default"}`} key={categoryId}>
<span className={`nds-badge tone-${category.tone || "default"}`} key={categoryId}>
<span className="diablo4-category-icon" aria-hidden="true" style={getCategoryIconStyle(category)} />
{getCategoryLabel(category)}
</span>

2
website/src/features/games/diablo4/Diablo4Listing.jsx
View file

@ -36,7 +36,7 @@ export function Diablo4Listing({ game, diablo4, filters, setFilters }) {
{visible.length ? visible.map((affix) => (
<Diablo4AffixCard key={affix.id} affix={affix} categoryMap={diablo4.categoryMap} />
)) : (
<div className="empty">
<div className="empty nds-empty-state">
<h2>Aucun résultat</h2>
<p>Ajustez la recherche ou réinitialisez les filtres actifs.</p>
</div>

4
website/src/features/games/diablo4/Diablo4Page.jsx
View file

@ -16,7 +16,7 @@ export function Diablo4Page({ category, game, diablo4, filters, setFilters }) {
<p>Chargement des affixes et filtres associés.</p>
</div>
</section>
<section className="empty">
<section className="empty nds-empty-state">
<h2>Chargement</h2>
<p>Préparation des données locales...</p>
</section>
@ -26,7 +26,7 @@ export function Diablo4Page({ category, game, diablo4, filters, setFilters }) {
if (diablo4.error) {
return (
<section className="empty">
<section className="empty nds-empty-state">
<h1>Impossible de charger Diablo IV</h1>
<p>{diablo4.error}</p>
</section>

2
website/src/features/games/mhwilds/MhwildsListing.jsx
View file

@ -45,7 +45,7 @@ export function MhwildsListing({ category, game, mhwilds, filters, setFilters, t
? <MonsterCard key={item.name} monster={item} t={t} />
: <EndemicCard key={item.name} item={item} t={t} />
)) : (
<div className="empty">
<div className="empty nds-empty-state">
<h2>Aucun résultat</h2>
<p>Ajustez la recherche ou réinitialisez les filtres actifs.</p>
</div>

4
website/src/features/games/mhwilds/MhwildsPage.jsx
View file

@ -17,7 +17,7 @@ export function MhwildsPage({ category, game, mhwilds, filters, setFilters, t, l
<p>Chargement des données de chasse, faune endémique et filtres associés.</p>
</div>
</section>
<section className="empty">
<section className="empty nds-empty-state">
<h2>Chargement</h2>
<p>Préparation des données locales...</p>
</section>
@ -27,7 +27,7 @@ export function MhwildsPage({ category, game, mhwilds, filters, setFilters, t, l
if (mhwilds.error) {
return (
<section className="empty">
<section className="empty nds-empty-state">
<h1>Impossible de charger MH Wilds</h1>
<p>{mhwilds.error}</p>
</section>