From e8107b5384df566bcb4d69e1a373f93fa036b1db Mon Sep 17 00:00:00 2001
From: Daniel <danitex@danvics.com>
Date: Wed, 9 Sep 2026 14:47:39 +0200
Subject: [PATCH] fix: question bank filters as AMBOSS-style pop-out drawer

Filters (Exams, Disciplines, Symptoms, Categories, Articles, Saved, Difficulty) open in a scrollable side drawer with close button; the main column stays clean. 97 frontend tests pass.
---
 frontend/src/pages/QuestionBankPage.css      | 13 ++++++
 frontend/src/pages/QuestionBankPage.jsx      | 42 +++++++++++++++++++-
 frontend/src/pages/QuestionBankPage.test.jsx |  7 ++++
 3 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/QuestionBankPage.css b/frontend/src/pages/QuestionBankPage.css
index dfea4ee..fa86488 100644
--- a/frontend/src/pages/QuestionBankPage.css
+++ b/frontend/src/pages/QuestionBankPage.css
@@ -34,3 +34,16 @@
 details[open] > .category-tree-branch .category-tree-chevron { transform: rotate(45deg); }
 .bank-articles { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; max-height: 30vh; overflow-y: auto; }
 .bank-articles label { display: flex; gap: 6px; align-items: baseline; font-size: .82rem; cursor: pointer; }
+.bank-filters-bar { margin-bottom: 8px; }
+.bank-filters-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.35); z-index: 1050; display: flex; justify-content: flex-end; }
+.bank-filters-panel { background: var(--card-bg); width: min(340px, 92vw); height: 100%; display: flex; flex-direction: column; box-shadow: -12px 0 40px rgba(0,0,0,0.18); }
+.bank-filters-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); }
+.bank-filters-header h2 { margin: 0; font-size: 1rem; }
+.bank-filters-header button { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--text-muted); }
+.bank-filters-body { flex: 1; overflow-y: auto; padding: 12px 14px; }
+.bank-filters-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
+.bank-layout { display: block; }
+@media (max-width: 640px) {
+  .bank-filters-overlay { align-items: flex-end; }
+  .bank-filters-panel { width: 100%; height: 88vh; border-radius: 16px 16px 0 0; }
+}
diff --git a/frontend/src/pages/QuestionBankPage.jsx b/frontend/src/pages/QuestionBankPage.jsx
index 404b73d..c624ab1 100644
--- a/frontend/src/pages/QuestionBankPage.jsx
+++ b/frontend/src/pages/QuestionBankPage.jsx
@@ -664,6 +664,7 @@ export default function QuestionBankPage() {
   const [categories, setCategories] = useState([])
   const [searchQuery, setSearchQuery] = useState('')
   const [difficulty, setDifficulty] = useState('')
+  const [filtersOpen, setFiltersOpen] = useState(false)
   const [bankArticleIds, setBankArticleIds] = useState([])
   const [articles, setArticles] = useState([])
   const [collections, setCollections] = useState([])
@@ -1037,8 +1038,21 @@ export default function QuestionBankPage() {
 
       {/* Filter side box (AMBOSS-style) */}
       <div className="bank-layout">
-      <aside className="bank-filters card">
-        <h2>Filters</h2>
+      <div className="bank-filters-bar">
+        <button type="button" className="btn btn-secondary btn-sm" aria-expanded={filtersOpen} onClick={() => setFiltersOpen(true)}>
+          ⚙ Filters{(filterCatIds.length || showFavorites || showUncategorized || showMyQuestions || difficulty || bankArticleIds.length || selectedTagIds.length) ? ' ●' : ''}
+        </button>
+      </div>
+      {filtersOpen && (
+        <div className="bank-filters-overlay" onClick={e => e.target === e.currentTarget && setFiltersOpen(false)}>
+        <div className="bank-filters-panel" role="dialog" aria-label="Question filters">
+        <header className="bank-filters-header">
+          <h2>Filters</h2>
+          <button type="button" aria-label="Close filters" onClick={() => setFiltersOpen(false)}>✕</button>
+        </header>
+        <div className="bank-filters-body">
+        <aside className="bank-filters card">
+        <h2 className="bank-filters-sr">Filters</h2>
         <div className="bank-state-buttons">
           <button className={`btn btn-sm ${filterCatIds.length === 0 && !showUncategorized && !showFavorites && !showMyQuestions ? 'btn-primary' : 'btn-secondary'}`}
             onClick={() => { setFilterCatIds([]); setShowUncategorized(false); setShowFavorites(false); setShowMyQuestions(false) }}>All ({total})</button>
@@ -1066,6 +1080,26 @@ export default function QuestionBankPage() {
           ))}
           {articles.length === 0 && <p style={{ color: 'var(--text-muted)', fontSize: '.8rem' }}>No articles yet.</p>}
         </div>
+        <h3>Exams</h3>
+        <label className="custom-test-exam"><input type="checkbox" checked readOnly /> Pediatrics Boards</label>
+        <h3>Disciplines</h3>
+        <div className="custom-test-tags">
+          {(tags.subjects || []).slice(0, 40).map(tag => (
+            <label key={`d-${tag.id}`}>
+              <input type="checkbox" checked={selectedTagIds.includes(tag.id)} onChange={() => toggleTag(tag.id)} />
+              {tag.name}
+            </label>
+          ))}
+        </div>
+        <h3>Symptoms & keywords</h3>
+        <div className="custom-test-tags">
+          {(tags.keywords || []).slice(0, 40).map(tag => (
+            <label key={`s-${tag.id}`}>
+              <input type="checkbox" checked={selectedTagIds.includes(tag.id)} onChange={() => toggleTag(tag.id)} />
+              {tag.name}
+            </label>
+          ))}
+        </div>
         <h3>Categories</h3>
         <div className="bank-category-list">
           {categories.map(cat => {
@@ -1112,6 +1146,10 @@ export default function QuestionBankPage() {
           </div>
         )}
       </aside>
+        </div>
+        </div>
+        </div>
+      )}
 
       {/* Main column */}
       <div className="bank-main">
diff --git a/frontend/src/pages/QuestionBankPage.test.jsx b/frontend/src/pages/QuestionBankPage.test.jsx
index 7d2a7c1..f8c468d 100644
--- a/frontend/src/pages/QuestionBankPage.test.jsx
+++ b/frontend/src/pages/QuestionBankPage.test.jsx
@@ -36,6 +36,10 @@ function renderPage() {
     </MemoryRouter>
   )
 }
+async function openFilters() {
+  await userEvent.click(await screen.findByRole('button', { name: /Filters/ }))
+  await screen.findByRole('dialog', { name: 'Question filters' })
+}
 
 describe('QuestionBankPage QTI actions', () => {
   let originalCreateElement
@@ -150,6 +154,7 @@ describe('QuestionBankPage review regressions', () => {
     })
     api.patch.mockImplementation(() => { moved = true; return Promise.resolve({ data: {} }) })
     renderPage()
+    await openFilters()
     await userEvent.click(await screen.findByRole('button', { name: 'Root (1)', exact: true }))
     await screen.findByText('Child question')
     await waitFor(() => expect(api.get).toHaveBeenCalledWith('/questions/bank', expect.objectContaining({ params: expect.objectContaining({ category_ids: '1' }) })))
@@ -167,6 +172,7 @@ describe('QuestionBankPage review regressions', () => {
     ] }) : initial(url))
     api.delete.mockResolvedValue({})
     renderPage()
+    await openFilters()
     await userEvent.click(await screen.findByRole('button', { name: 'Delete category Hidden assignments' }))
     expect(screen.getByText(/including private and course questions excluded/)).toBeInTheDocument()
     await userEvent.selectOptions(screen.getByLabelText('Move all assigned questions to:'), '3')
@@ -189,6 +195,7 @@ describe('QuestionBankPage category hierarchy', () => {
     api.patch = vi.fn().mockResolvedValue({ data: {} })
     renderPage()
     expect(screen.queryByRole('link', { name: 'Create Custom Test' })).not.toBeInTheDocument()
+    await openFilters()
     await userEvent.click(await screen.findByRole('button', { name: 'Edit category Root' }))
     const parent = screen.getByLabelText('Parent category')
     expect([...parent.options].map(o => o.text)).toEqual(['No parent (root)', 'Other'])