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

24
website/src/features/toolboxes/ToolboxPages.jsx
View file

@ -99,7 +99,7 @@ export function ToolboxesPage({ siteContent, toolboxes, getToolboxGame, actions,
return (
<div className="toolbox-page">
<section className="page-hero">
<section className="page-hero nds-page-hero">
<div>
<p className="eyebrow">{content.eyebrow}</p>
<h1>{content.title}</h1>
@ -107,7 +107,7 @@ export function ToolboxesPage({ siteContent, toolboxes, getToolboxGame, actions,
<a className="hero-library-button library-link-button nds-button" data-size="sm" href="#/library"><Icon name="book" />{content.libraryLink}</a>
</div>
</section>
<section className="toolbar toolbox-actions-row">
<section className="toolbar nds-toolbar toolbox-actions-row">
<div>
<button className="nds-button" data-size="sm" data-variant="primary" onClick={() => actions.setCreateModal({})}>{content.newButton}</button>
<ImportButton className="nds-button" data-size="sm" label={content.importOne} onFile={actions.importToolbox} />
@ -143,7 +143,7 @@ export function ToolboxesPage({ siteContent, toolboxes, getToolboxGame, actions,
reorder={{ itemReorder, getItemProps, isItemDragging, isItemDropTarget, getDropPlacement }}
/>
)) : (
<div className="empty"><h2>{content.emptyTitle}</h2><p>{content.emptyText}</p></div>
<div className="empty nds-empty-state"><h2>{content.emptyTitle}</h2><p>{content.emptyText}</p></div>
)}
</section>
<StorageQuota usage={storageUsage} />
@ -153,8 +153,8 @@ export function ToolboxesPage({ siteContent, toolboxes, getToolboxGame, actions,
function StorageHelpCard({ help }) {
return (
<article className="card storage-help-card" aria-labelledby="storage-help-title">
<div className="card-body">
<article className="card nds-card storage-help-card" aria-labelledby="storage-help-title">
<div className="card-body nds-card-body">
<div className="storage-help-heading">
<span className="storage-help-mark" aria-hidden="true" />
<div><p className="eyebrow">IndexedDB</p><h2 id="storage-help-title">{help.title}</h2></div>
@ -171,7 +171,7 @@ function StorageHelpCard({ help }) {
export function ToolboxPage(props) {
const { toolboxId, toolboxes, getToolboxGame } = props;
const toolbox = toolboxes.find((item) => item.id === toolboxId);
if (!toolbox) return <div className="empty"><h1>Toolbox introuvable</h1><a className="nds-button" data-size="sm" href="#/toolboxes">Retour</a></div>;
if (!toolbox) return <div className="empty nds-empty-state"><h1>Toolbox introuvable</h1><a className="nds-button" data-size="sm" href="#/toolboxes">Retour</a></div>;
return <ToolboxView {...props} toolbox={toolbox} toolboxGame={getToolboxGame(toolbox)} embedded={false} />;
}
@ -257,7 +257,7 @@ function ToolboxView({ siteContent, toolbox, toolboxGame, embedded, actions, sto
return (
<div className={embedded ? "toolbox-embedded" : "toolbox-page"}>
<section className={embedded ? "toolbox-head page-hero toolbox-head-embedded" : "toolbox-head page-hero"}>
<section className={embedded ? "toolbox-head page-hero nds-page-hero toolbox-head-embedded" : "toolbox-head page-hero nds-page-hero"}>
<div>
<p className="eyebrow">Toolbox</p>
<div className="toolbox-title-row">
@ -279,7 +279,7 @@ function ToolboxView({ siteContent, toolbox, toolboxGame, embedded, actions, sto
</a>
)}
</div>
<div className="actions">
<div className="actions nds-toolbar">
<AddToolControls onAdd={addModule} />
</div>
</section>
@ -385,13 +385,13 @@ export function ToolboxDrawer({ gameId, game, siteContent, toolboxes, links, act
return (
<aside className="drawer" id="toolbox-drawer" aria-hidden="false" style={width ? { "--drawer-panel-width": `${width}px` } : undefined}>
<div className="drawer-backdrop" onClick={() => actions.setDrawerGameId("")} />
<span className="drawer-resize-handle" aria-hidden="true" onPointerDown={startResize} />
<section className="drawer-panel legacy-scrollbar" ref={panelRef} style={width ? { width } : undefined}>
<span className="drawer-resize-handle nds-drawer-resize-handle" aria-hidden="true" onPointerDown={startResize} />
<section className="drawer-panel nds-drawer-panel legacy-scrollbar" ref={panelRef} style={width ? { width } : undefined}>
<div className="drawer-content">
<header>
<div>
<p className="eyebrow">Toolbox liée</p>
<div className="drawer-toolbox-actions" aria-label="Actions toolbox liée">
<div className="drawer-toolbox-actions nds-toolbar" aria-label="Actions toolbox liée">
<button className="drawer-action-button nds-icon-button" data-size="sm" onClick={() => actions.setLinkModalGameId(gameId)} aria-label="Lier une toolbox" title="Lier"><Icon name="link" /></button>
<ImportButton className="drawer-action-button nds-icon-button import-icon-button" data-size="sm" ariaLabel="Importer une toolbox" title="Importer" icon="import" onFile={(file) => actions.importToolbox(file, gameId)} />
<button className="drawer-action-button nds-icon-button" data-size="sm" onClick={() => actions.exportToolbox(selectedId)} disabled={!selectedId} aria-label="Exporter la toolbox liée" title="Exporter"><Icon name="export" /></button>
@ -400,7 +400,7 @@ export function ToolboxDrawer({ gameId, game, siteContent, toolboxes, links, act
<button className="drawer-close-button nds-icon-button" data-size="sm" onClick={() => actions.setDrawerGameId("")} aria-label="Fermer" title="Fermer"><Icon name="close" /></button>
</header>
{toolbox ? <ToolboxView siteContent={siteContent} toolbox={toolbox} toolboxGame={game} embedded actions={actions} storageUsage={storageUsage} storageReady={storageReady} getModuleData={getModuleData} updateToolbox={updateToolbox} updateModuleData={updateModuleData} addImageFiles={addImageFiles} /> : (
<div className="empty"><p>Aucune toolbox associée à cette page jeu.</p><button className="nds-button" data-size="sm" data-variant="primary" onClick={() => actions.setCreateModal({ gameId })}>Créer et associer</button></div>
<div className="empty nds-empty-state"><p>Aucune toolbox associée à cette page jeu.</p><button className="nds-button" data-size="sm" data-variant="primary" onClick={() => actions.setCreateModal({ gameId })}>Créer et associer</button></div>
)}
<StorageQuota usage={storageUsage} />
</div>