feat: two-step X to hide the measure detail panel, reopening on measure click (#95)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Jean-Paul van Ravensberg <14926452+DevSecNinja@users.noreply.github.com>

Author: Copilot

src/App.jsx

@@ -62,6 +62,7 @@ export default function App() {
   const [typeFilter, setTypeFilter] = useState(null);
   const [tierFilter, setTierFilter] = useState(null);
   const [selectedCode, setSelectedCode] = useState(null);
+  const [showMeasureCard, setShowMeasureCard] = useState(true);
   const [assessmentMode, setAssessmentMode] = useState(false);
 
   const {
@@ -97,6 +98,22 @@ export default function App() {
   const ActiveComponent = activeView.Component;
   const filterable = activeView.filterable;
 
+  // Selecting a measure (re)opens the detail card if it was hidden.
+  const handleSelect = (code) => {
+    setShowMeasureCard(true);
+    setSelectedCode(code);
+  };
+
+  // A single X control handles two steps: first deselect the measure, then
+  // (when nothing is selected) hide the whole card.
+  const handleCloseOrHide = () => {
+    if (selected) {
+      setSelectedCode(null);
+    } else {
+      setShowMeasureCard(false);
+    }
+  };
+
   return (
     <div className="app">
       <AppHeader
@@ -121,28 +138,30 @@ export default function App() {
         />
       )}
 
-      <div className="app__body">
+      <div className={`app__body${showMeasureCard ? '' : ' app__body--full'}`}>
         <main className="app__main">
           <ActiveComponent
             lang={lang}
             selectedCode={selectedCode}
-            onSelect={setSelectedCode}
+            onSelect={handleSelect}
             typeFilter={filterable ? typeFilter : null}
             tierFilter={filterable ? tierFilter : null}
             getAssessmentStatus={assessmentMode ? getStatus : null}
           />
         </main>
 
-        <MeasureDetailPanel
-          measure={selected}
-          lang={lang}
-          onClose={() => setSelectedCode(null)}
-          assessmentEntry={
-            assessmentMode && selected ? getEntry(selected.code) : undefined
-          }
-          onStatusChange={assessmentMode ? setStatus : undefined}
-          onNoteChange={assessmentMode ? setNote : undefined}
-        />
+        {showMeasureCard && (
+          <MeasureDetailPanel
+            measure={selected}
+            lang={lang}
+            onClose={handleCloseOrHide}
+            assessmentEntry={
+              assessmentMode && selected ? getEntry(selected.code) : undefined
+            }
+            onStatusChange={assessmentMode ? setStatus : undefined}
+            onNoteChange={assessmentMode ? setNote : undefined}
+          />
+        )}
       </div>
 
       <footer className="app__footer">

src/App.test.jsx

@@ -113,4 +113,33 @@ describe('App', () => {
     expect(screen.getByText('Middellange termijn')).toBeInTheDocument();
     expect(screen.getByText('Lange termijn')).toBeInTheDocument();
   });
+
+  it('hides the measure card with a two-step X and reopens it on measure click', async () => {
+    const user = userEvent.setup();
+    render(<App />);
+
+    // Select a measure: the detail panel shows it.
+    await user.click(screen.getByRole('button', { name: /O7/ }));
+    let panel = screen.getByRole('complementary');
+    expect(
+      within(panel).getByText('Microsoft Entra Conditional Access')
+    ).toBeInTheDocument();
+
+    // First X click deselects the measure but keeps the card open.
+    await user.click(within(panel).getByRole('button', { name: 'Sluiten' }));
+    panel = screen.getByRole('complementary');
+    expect(within(panel).getByText('Selecteer een maatregel')).toBeInTheDocument();
+
+    // Second X click (nothing selected) hides the whole card.
+    await user.click(within(panel).getByRole('button', { name: 'Paneel verbergen' }));
+    expect(screen.queryByRole('complementary')).not.toBeInTheDocument();
+    expect(document.querySelector('.app__body')).toHaveClass('app__body--full');
+
+    // Clicking a measure reopens the card and shows the selection.
+    await user.click(screen.getByRole('button', { name: /O7/ }));
+    panel = screen.getByRole('complementary');
+    expect(
+      within(panel).getByText('Microsoft Entra Conditional Access')
+    ).toBeInTheDocument();
+  });
 });

src/components/MeasureDetailPanel.jsx

@@ -36,6 +36,14 @@ export default function MeasureDetailPanel({
   if (!measure) {
     return (
       <aside ref={panelRef} className="detail detail--empty" aria-live="polite">
+        <button
+          type="button"
+          className="detail__close detail__close--floating"
+          onClick={onClose}
+          aria-label={t(lang, 'hideMeasures')}
+        >
+          ×
+        </button>
         <h2 className="detail__empty-title">{t(lang, 'selectMeasure')}</h2>
         <p className="detail__empty-hint">{t(lang, 'selectMeasureHint')}</p>
       </aside>

src/i18n/strings.js

@@ -70,6 +70,7 @@ export const ui = {
       'Indicatieve koppeling met veelgebruikte controlekaders; geen 1-op-1-relatie en niet uitputtend.',
     openDocs: 'Documentatie openen',
     close: 'Sluiten',
+    hideMeasures: 'Paneel verbergen',
     selectMeasure: 'Selecteer een maatregel',
     selectMeasureHint:
       'Kies een GRIP-maatregel om de bijpassende Microsoft-oplossingen te zien.',
@@ -181,6 +182,7 @@ export const ui = {
       'Indicative mapping to common control frameworks; not a 1:1 relationship and not exhaustive.',
     openDocs: 'Open documentation',
     close: 'Close',
+    hideMeasures: 'Hide panel',
     selectMeasure: 'Select a measure',
     selectMeasureHint: 'Pick a GRIP measure to see the matching Microsoft solutions.',
     filters: 'Filters',
@@ -293,6 +295,7 @@ export const ui = {
       'Correspondance indicative avec des cadres de contrôle courants ; relation non biunivoque et non exhaustive.',
     openDocs: 'Ouvrir la documentation',
     close: 'Fermer',
+    hideMeasures: 'Masquer le panneau',
     selectMeasure: 'Sélectionnez une mesure',
     selectMeasureHint:
       'Choisissez une mesure GRIP pour voir les solutions Microsoft correspondantes.',

src/styles/index.css

@@ -223,6 +223,9 @@ body {
   align-items: start;
   flex: 1;
 }
+.app__body--full {
+  grid-template-columns: 1fr;
+}
 .app__main {
   min-width: 0;
 }
@@ -488,12 +491,17 @@ body {
 .detail--empty {
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
   text-align: center;
   color: var(--ink-faint);
   border-style: dashed;
   box-shadow: none;
 }
+.detail__close--floating {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+}
 .detail__empty-title {
   font-size: 16px;
   margin: 0 0 6px;