feat(frontend): sprint 4 — dark mode + matrix overhaul + tactic selection + done read-only + UI polish

US-17: fix duplicate "Create engagement" button, icon conventions (Save/RotateCcw/Grid2x2), UsersAdminPage form baseline alignment
US-18: done status fully read-only + Reopen button (done → review_required) for all roles
US-19: invalidate engagement queries on simulation PATCH/transition for auto-status propagation
US-20: MitreMatrixModal rewritten — CSS grid 12-column layout, no horizontal scroll, attack.mitre.org compact look
US-21: tactic header clickable in matrix, tactic chips (MitreTacticTag) in field, single atomic PATCH with technique_ids + tactic_ids
US-22: MitreTechniquesField chips-only area + inline search input + matrix icon button; chips show ID-only (name in title=)
US-23: useTheme hook — 3-state light/dark/system, CSS variables, Tailwind darkMode class, localStorage persistence

92/92 tests passing, typecheck and lint clean.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Knacky
2026-05-27 20:06:01 +02:00
parent d5ab1fd26f
commit f5ea9d16af
21 changed files with 721 additions and 337 deletions

View File

@@ -96,11 +96,15 @@ export function SimulationList({ engagementId }: SimulationListProps): JSX.Eleme
</Link>
</td>
<td className="px-xl py-md text-charcoal text-[14px]">
{sim.techniques.length === 0
? '—'
: sim.techniques.length === 1
? sim.techniques[0].id
: `${sim.techniques[0].id} +${sim.techniques.length - 1}`}
{(() => {
const items = [
...(sim.tactics ?? []).map((t) => t.id),
...sim.techniques.map((t) => t.id),
];
if (items.length === 0) return '—';
if (items.length === 1) return items[0];
return `${items[0]} +${items.length - 1}`;
})()}
</td>
<td className="px-xl py-md">
<SimulationStatusBadge status={sim.status} />