From 81d75c92315fd030a5b97f586a8e531b160535f9 Mon Sep 17 00:00:00 2001
From: Alex Lewin <sl2281@cam.ac.uk>
Date: Wed, 5 Mar 2025 16:23:47 +0000
Subject: [PATCH 01/12] Move quiz filters to sidebar (phy)

---
 .../elements/layout/SidebarLayout.tsx         |  27 ++-
 .../components/pages/quizzes/MyQuizzes.tsx    | 170 +++++++++---------
 2 files changed, 115 insertions(+), 82 deletions(-)

diff --git a/src/app/components/elements/layout/SidebarLayout.tsx b/src/app/components/elements/layout/SidebarLayout.tsx
index 3644539eb8..7e10b5626b 100644
--- a/src/app/components/elements/layout/SidebarLayout.tsx
+++ b/src/app/components/elements/layout/SidebarLayout.tsx
@@ -3,7 +3,7 @@ import { Col, ColProps, RowProps, Input, Offcanvas, OffcanvasBody, OffcanvasHead
 import partition from "lodash/partition";
 import classNames from "classnames";
 import { AssignmentDTO, ContentSummaryDTO, IsaacConceptPageDTO, QuestionDTO, QuizAttemptDTO, RegisteredUserDTO } from "../../../../IsaacApiTypes";
-import { above, ACCOUNT_TAB, ACCOUNT_TABS, AUDIENCE_DISPLAY_FIELDS, below, BOARD_ORDER_NAMES, BoardCompletions, BoardCreators, BoardLimit, BoardSubjects, BoardViews, confirmThen, determineAudienceViews, filterAssignmentsByStatus, filterAudienceViewsByProperties, getDistinctAssignmentGroups, getDistinctAssignmentSetters, getThemeFromContextAndTags, HUMAN_STAGES, ifKeyIsEnter, isAda, isDefined, siteSpecific, useDeviceSize } from "../../../services";
+import { above, ACCOUNT_TAB, ACCOUNT_TABS, AUDIENCE_DISPLAY_FIELDS, below, BOARD_ORDER_NAMES, BoardCompletions, BoardCreators, BoardLimit, BoardSubjects, BoardViews, confirmThen, determineAudienceViews, filterAssignmentsByStatus, filterAudienceViewsByProperties, getDistinctAssignmentGroups, getDistinctAssignmentSetters, getThemeFromContextAndTags, HUMAN_STAGES, ifKeyIsEnter, isAda, isDefined, QuizStatus, siteSpecific, useDeviceSize } from "../../../services";
 import { StageAndDifficultySummaryIcons } from "../StageAndDifficultySummaryIcons";
 import { selectors, useAppSelector } from "../../../state";
 import { Link, useHistory } from "react-router-dom";
@@ -16,6 +16,7 @@ import { Spacer } from "../Spacer";
 import { StyledTabPicker } from "../inputs/StyledTabPicker";
 import { GroupSelector } from "../../pages/Groups";
 import { QuizRubricButton, SectionProgress } from "../quiz/QuizAttemptComponent";
+import { DisplayModeToggle, PastTestsToggle, QuizFilters } from "../../pages/quizzes/MyQuizzes";
 
 export const SidebarLayout = (props: RowProps) => {
     const { className, ...rest } = props;
@@ -633,3 +634,27 @@ export const SignupSidebar = ({activeTab} : {activeTab: number}) => {
         <StyledTabPicker checkboxTitle={"Preferences"} checked={activeTab === 3} disabled={activeTab !== 3}/>
     </ContentSidebar>;
 };
+
+interface MyQuizzesSidebarProps extends SidebarProps {
+    showCompleted: boolean;
+    setShowCompleted: (show: boolean) => void;
+    setQuizCreator: (creator: string) => void;
+    setQuizTitleFilter: (title: string) => void;
+    quizStatuses: QuizStatus[];
+    setQuizStatuses: React.Dispatch<React.SetStateAction<QuizStatus[]>>;
+    displayMode: "table" | "cards";
+    setDisplayMode: React.Dispatch<React.SetStateAction<"table" | "cards">>;
+};
+
+export const MyQuizzesSidebar = (props: MyQuizzesSidebarProps) => {
+    const { showCompleted, setShowCompleted, setQuizCreator, setQuizTitleFilter, quizStatuses, setQuizStatuses, displayMode, setDisplayMode } = props;
+    return <ContentSidebar buttonTitle="Search & Filter">
+        <div className="section-divider mt-5"/>
+        <h5>Display mode</h5>
+        <DisplayModeToggle displayMode={displayMode} setDisplayMode={setDisplayMode}/>
+        <div className="section-divider"/>
+        <h5>Search &amp; Filter</h5>
+        <QuizFilters setShowCompleted={setShowCompleted} setQuizCreator={setQuizCreator} setQuizTitleFilter={setQuizTitleFilter} quizStatuses={quizStatuses} setQuizStatuses={setQuizStatuses} showFilters={true}/>
+        <PastTestsToggle showCompleted={showCompleted} setShowCompleted={setShowCompleted} setQuizStatuses={setQuizStatuses}/>
+    </ContentSidebar>;
+};
diff --git a/src/app/components/pages/quizzes/MyQuizzes.tsx b/src/app/components/pages/quizzes/MyQuizzes.tsx
index 9a2986238b..17dd4d3a54 100644
--- a/src/app/components/pages/quizzes/MyQuizzes.tsx
+++ b/src/app/components/pages/quizzes/MyQuizzes.tsx
@@ -16,6 +16,7 @@ import {
     convertAttemptToQuiz,
     DisplayableQuiz,
     extractTeacherName,
+    isAda,
     isPhy,
     isTutorOrAbove,
     QuizStatus,
@@ -33,10 +34,10 @@ import orderBy from "lodash/orderBy";
 import classNames from "classnames";
 import StyledToggle from "../../elements/inputs/StyledToggle";
 import { TrLink } from "../../elements/tables/TableLinks";
-import { StyledDropdown } from "../../elements/inputs/DropdownInput";
 import { StyledSelect } from "../../elements/inputs/StyledSelect";
 import { CollapsibleContainer } from "../../elements/CollapsibleContainer";
 import { FilterCount } from "../../elements/svg/FilterCount";
+import { MainContent, MyQuizzesSidebar, SidebarLayout } from "../../elements/layout/SidebarLayout";
 
 export interface QuizzesPageProps extends RouteComponentProps {
     user: RegisteredUserDTO;
@@ -212,7 +213,7 @@ interface QuizFiltersProps {
     showFilters: boolean;
 }
 
-const QuizFilters = ({setShowCompleted, setQuizTitleFilter, setQuizCreator, quizStatuses, setQuizStatuses, showFilters}: QuizFiltersProps) => {
+export const QuizFilters = ({setShowCompleted, setQuizTitleFilter, setQuizCreator, quizStatuses, setQuizStatuses, showFilters}: QuizFiltersProps) => {
     return <CollapsibleContainer expanded={showFilters}>
         <Row>
             <Col xs={6}>
@@ -248,6 +249,38 @@ const QuizFilters = ({setShowCompleted, setQuizTitleFilter, setQuizCreator, quiz
         </Row>
     </CollapsibleContainer>;
 };
+    
+export const DisplayModeToggle = ({displayMode, setDisplayMode}: {displayMode: "table" | "cards", setDisplayMode: React.Dispatch<React.SetStateAction<"table" | "cards">>}) => {
+    return <div className={classNames("d-flex flex-column align-items-start", {"pb-3 pe-3 col-8 col-sm-6 col-md-3": isAda})}>
+        <span>Display in</span>
+        <div className="d-flex flex-column align-items-center align-self-start w-max-content pb-3 pe-3">
+            <StyledToggle
+                checked={displayMode === "cards"}
+                falseLabel="Table"
+                trueLabel="Cards"
+                onChange={() => setDisplayMode(d => d === "table" ? "cards" : "table")}
+            />
+        </div>
+    </div>;
+};
+
+export const PastTestsToggle = ({showCompleted, setShowCompleted, setQuizStatuses}: {showCompleted: boolean, setShowCompleted: (show: boolean) => void, setQuizStatuses: React.Dispatch<React.SetStateAction<QuizStatus[]>>}) => {
+    return <div className={classNames("d-flex flex-column align-items-start w-max-content", {"pb-3": isAda})}>
+        <span>Past tests</span>
+        <div className="h-100 align-content-center">
+            <StyledToggle
+                checked={showCompleted}
+                falseLabel="Hidden"
+                trueLabel="Shown"
+                onChange={() => {
+                    const target = !showCompleted;
+                    setShowCompleted(target);
+                    setQuizStatuses(s => target ? [...s, QuizStatus.Complete, QuizStatus.Overdue] : s.filter(status => ![QuizStatus.Complete, QuizStatus.Overdue].includes(status)));
+                }}
+            />
+        </div>
+    </div>;
+};
 
 const MyQuizzesPageComponent = ({user}: QuizzesPageProps) => {
 
@@ -315,43 +348,10 @@ const MyQuizzesPageComponent = ({user}: QuizzesPageProps) => {
         }
     }, [anchorMap]);
 
-    // TODO: revert to StyledToggle when the component is more widely used (post-redesign)
-
-    // const displayModeToggle = <div className="d-flex flex-column align-items-center align-self-end w-max-content pb-3 pe-3">
-    //     <span>Display mode</span>
-    //     <StyledToggle
-    //         checked={displayMode === "cards"}
-    //         falseLabel="Table"
-    //         trueLabel="Cards"
-    //         onChange={() => setDisplayMode(d => d === "table" ? "cards" : "table")}
-    //     />
-    const displayModeToggle = <div className="d-flex flex-column align-items-start pb-3 pe-3 col-8 col-sm-6 col-md-3">
-        <span>Display in</span>
-        <StyledDropdown value={displayMode} onChange={() => setDisplayMode(d => d === "table" ? "cards" : "table")}>
-            <option value="table">Table View</option>
-            <option value="cards">Card View</option>
-        </StyledDropdown>
-    </div>;
-
-    const pastTestsToggle = <div className="d-flex flex-column align-items-center w-max-content pb-3">
-        <span>Past tests</span>
-        <div className="h-100 align-content-center">
-            <StyledToggle
-                checked={showCompleted}
-                falseLabel="Hidden"
-                trueLabel="Shown"
-                onChange={() => {
-                    const target = !showCompleted;
-                    setShowCompleted(target);
-                    setQuizStatuses(s => target ? [...s, QuizStatus.Complete, QuizStatus.Overdue] : s.filter(status => ![QuizStatus.Complete, QuizStatus.Overdue].includes(status)));
-                }}
-            />
-        </div>
-    </div>;
-
     // +!! converts a string to 0 if null or empty and 1 otherwise
     const filterCount = +!!quizTitleFilter + +!!quizCreatorFilter + quizStatusFilter.length;
 
+    // Ada-only
     const filtersToggle = <Col xs={3} sm={2} md={1} className="pb-3 ms-3">
         <Label className="w-100 d-flex flex-column align-items-center mb-0">
             <span className="text-nowrap">
@@ -364,14 +364,16 @@ const MyQuizzesPageComponent = ({user}: QuizzesPageProps) => {
     </Col>;
 
     const tabTopContent = <>
-        <div className="d-flex">
-            {displayModeToggle}
-            <Spacer/>
-            {above["sm"](deviceSize) && pastTestsToggle}
-            {filtersToggle}
-        </div>
-        <QuizFilters setShowCompleted={setShowCompleted} setQuizCreator={setQuizCreator} setQuizTitleFilter={setQuizTitleFilter} 
-            quizStatuses={quizStatusFilter} setQuizStatuses={setQuizStatuses} showFilters={showFilters}/>
+        {isAda && <>
+            <div className="d-flex">
+                {<DisplayModeToggle displayMode={displayMode} setDisplayMode={setDisplayMode}/>}
+                <Spacer/>
+                {above["sm"](deviceSize) && <PastTestsToggle showCompleted={showCompleted} setShowCompleted={setShowCompleted} setQuizStatuses={setQuizStatuses}/>}
+                {filtersToggle}
+            </div>
+            <QuizFilters setShowCompleted={setShowCompleted} setQuizCreator={setQuizCreator} setQuizTitleFilter={setQuizTitleFilter} 
+                quizStatuses={quizStatusFilter} setQuizStatuses={setQuizStatuses} showFilters={showFilters}/>
+        </>}
     </>;
 
     const emptyAssignedMessage = <span className="text-muted">{!quizAssignments || quizAssignments.length === 0
@@ -387,43 +389,49 @@ const MyQuizzesPageComponent = ({user}: QuizzesPageProps) => {
     return <Container>
         <TitleAndBreadcrumb currentPageTitle={siteSpecific("My Tests", "My tests")} help={pageHelp} />
         <PageFragment fragmentId={`tests_help_${isTutorOrAbove(user) ? "teacher" : "student"}`} ifNotFound={<div className={"mt-5"}/>} />
-        <Tabs className="mb-5 mt-4" tabContentClass="mt-4" activeTabOverride={tabOverride} onActiveTabChange={(index) => {
-            history.replace({...history.location, hash: tabAnchors[index - 1]});
-            setBoardOrder(index === 1 ? QuizzesBoardOrder.dueDate : QuizzesBoardOrder.title);
-        }}>
-            {{
-                [siteSpecific("Assigned Tests", "Assigned tests")]:
-                    <ShowLoading 
-                        until={quizAssignments}
-                        ifNotFound={<Alert color="warning">Your test assignments failed to load, please try refreshing the page.</Alert>}
-                    >
-                        <div className="d-flex flex-column">
-                            {tabTopContent}
-                            {displayMode === "table" ? <Card>
-                                <AssignedQuizTable 
-                                    quizzes={sortedAssignedQuizzes} boardOrder={boardOrder} setBoardOrder={setBoardOrder}
-                                    emptyMessage={emptyAssignedMessage}
-                                />
-                            </Card> : <QuizGrid quizzes={sortedAssignedQuizzes} emptyMessage={emptyAssignedMessage}/>}
-                        </div>
-                    </ShowLoading>,
-                [siteSpecific("My Practice Tests", "My practice tests")]:
-                    <ShowLoading 
-                        until={freeAttempts}
-                        ifNotFound={<Alert color="warning">Your practice test attempts failed to load, please try refreshing the page.</Alert>}
-                    >
-                        <div className="d-flex flex-column">
-                            {tabTopContent}
-                            {displayMode === "table" ? <Card>
-                                <PracticeQuizTable 
-                                    quizzes={sortedPracticeQuizzes} boardOrder={boardOrder} setBoardOrder={setBoardOrder}
-                                    emptyMessage={emptyPracticeMessage}
-                                />
-                            </Card> : <QuizGrid quizzes={sortedPracticeQuizzes} emptyMessage={emptyPracticeMessage}/>}
-                        </div>
-                    </ShowLoading>,
-            }}
-        </Tabs>
+        <SidebarLayout>
+            <MyQuizzesSidebar showCompleted={showCompleted} setShowCompleted={setShowCompleted} setQuizCreator={setQuizCreator} setQuizTitleFilter={setQuizTitleFilter}
+                quizStatuses={quizStatusFilter} setQuizStatuses={setQuizStatuses} displayMode={displayMode} setDisplayMode={setDisplayMode}/>
+            <MainContent>
+                <Tabs className="mb-5 mt-4" tabContentClass="mt-4" activeTabOverride={tabOverride} onActiveTabChange={(index) => {
+                    history.replace({...history.location, hash: tabAnchors[index - 1]});
+                    setBoardOrder(index === 1 ? QuizzesBoardOrder.dueDate : QuizzesBoardOrder.title);
+                }}>
+                    {{
+                        [siteSpecific("Assigned Tests", "Assigned tests")]:
+                            <ShowLoading 
+                                until={quizAssignments}
+                                ifNotFound={<Alert color="warning">Your test assignments failed to load, please try refreshing the page.</Alert>}
+                            >
+                                <div className="d-flex flex-column">
+                                    {tabTopContent}
+                                    {displayMode === "table" ? <Card>
+                                        <AssignedQuizTable 
+                                            quizzes={sortedAssignedQuizzes} boardOrder={boardOrder} setBoardOrder={setBoardOrder}
+                                            emptyMessage={emptyAssignedMessage}
+                                        />
+                                    </Card> : <QuizGrid quizzes={sortedAssignedQuizzes} emptyMessage={emptyAssignedMessage}/>}
+                                </div>
+                            </ShowLoading>,
+                        [siteSpecific("My Practice Tests", "My practice tests")]:
+                            <ShowLoading 
+                                until={freeAttempts}
+                                ifNotFound={<Alert color="warning">Your practice test attempts failed to load, please try refreshing the page.</Alert>}
+                            >
+                                <div className="d-flex flex-column">
+                                    {tabTopContent}
+                                    {displayMode === "table" ? <Card>
+                                        <PracticeQuizTable 
+                                            quizzes={sortedPracticeQuizzes} boardOrder={boardOrder} setBoardOrder={setBoardOrder}
+                                            emptyMessage={emptyPracticeMessage}
+                                        />
+                                    </Card> : <QuizGrid quizzes={sortedPracticeQuizzes} emptyMessage={emptyPracticeMessage}/>}
+                                </div>
+                            </ShowLoading>,
+                    }}
+                </Tabs>
+            </MainContent>
+        </SidebarLayout>
     </Container>;
 };
 

From c2f53ad38e150ec22e88b044899673fb86e41ad7 Mon Sep 17 00:00:00 2001
From: Alex Lewin <sl2281@cam.ac.uk>
Date: Thu, 6 Mar 2025 16:57:17 +0000
Subject: [PATCH 02/12] Redesign My Tests (phy)

- Redesign quiz card component
- Use My Assignments-style status filters
---
 public/assets/phy/icons/redesign/quiz-bg.svg  |   5 +
 public/assets/phy/icons/redesign/quiz-fg.svg  |   5 +
 .../elements/layout/SidebarLayout.tsx         |  72 ++++++++--
 .../components/pages/quizzes/MyQuizzes.tsx    | 128 +++++++++++++++---
 src/app/services/quiz.ts                      |   6 +-
 src/scss/phy/icons.scss                       |  16 +++
 6 files changed, 201 insertions(+), 31 deletions(-)
 create mode 100644 public/assets/phy/icons/redesign/quiz-bg.svg
 create mode 100644 public/assets/phy/icons/redesign/quiz-fg.svg

diff --git a/public/assets/phy/icons/redesign/quiz-bg.svg b/public/assets/phy/icons/redesign/quiz-bg.svg
new file mode 100644
index 0000000000..30a77a1dbc
--- /dev/null
+++ b/public/assets/phy/icons/redesign/quiz-bg.svg
@@ -0,0 +1,5 @@
+<svg width="75" height="76" viewBox="0 0 75 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M31 58.0625H64" stroke="#23272C" stroke-width="5"/>
+  <path d="M31 38.0625H64" stroke="#23272C" stroke-width="5"/>
+  <path d="M31 18.0625H64" stroke="#23272C" stroke-width="5"/>
+</svg>
diff --git a/public/assets/phy/icons/redesign/quiz-fg.svg b/public/assets/phy/icons/redesign/quiz-fg.svg
new file mode 100644
index 0000000000..069bbe68de
--- /dev/null
+++ b/public/assets/phy/icons/redesign/quiz-fg.svg
@@ -0,0 +1,5 @@
+<svg width="75" height="76" viewBox="0 0 75 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M25 51.0625H11V65.0625H25V51.0625Z" fill="#944CBE"/>
+  <path d="M25 31.0625H11V45.0625H25V31.0625Z" fill="#944CBE"/>
+  <path d="M25 11.0625H11V25.0625H25V11.0625Z" fill="#944CBE"/>
+</svg>
diff --git a/src/app/components/elements/layout/SidebarLayout.tsx b/src/app/components/elements/layout/SidebarLayout.tsx
index 7e10b5626b..89715444d2 100644
--- a/src/app/components/elements/layout/SidebarLayout.tsx
+++ b/src/app/components/elements/layout/SidebarLayout.tsx
@@ -1,5 +1,5 @@
 import React, { ChangeEvent, RefObject, useEffect, useRef, useState } from "react";
-import { Col, ColProps, RowProps, Input, Offcanvas, OffcanvasBody, OffcanvasHeader, Row } from "reactstrap";
+import { Col, ColProps, RowProps, Input, Offcanvas, OffcanvasBody, OffcanvasHeader, Row, Label } from "reactstrap";
 import partition from "lodash/partition";
 import classNames from "classnames";
 import { AssignmentDTO, ContentSummaryDTO, IsaacConceptPageDTO, QuestionDTO, QuizAttemptDTO, RegisteredUserDTO } from "../../../../IsaacApiTypes";
@@ -16,7 +16,7 @@ import { Spacer } from "../Spacer";
 import { StyledTabPicker } from "../inputs/StyledTabPicker";
 import { GroupSelector } from "../../pages/Groups";
 import { QuizRubricButton, SectionProgress } from "../quiz/QuizAttemptComponent";
-import { DisplayModeToggle, PastTestsToggle, QuizFilters } from "../../pages/quizzes/MyQuizzes";
+import { DisplayModeToggle} from "../../pages/quizzes/MyQuizzes";
 
 export const SidebarLayout = (props: RowProps) => {
     const { className, ...rest } = props;
@@ -635,9 +635,43 @@ export const SignupSidebar = ({activeTab} : {activeTab: number}) => {
     </ContentSidebar>;
 };
 
+interface QuizStatusCheckboxProps extends React.HTMLAttributes<HTMLLabelElement> {
+    status: QuizStatus;
+    statusFilter: QuizStatus[];
+    setStatusFilter: React.Dispatch<React.SetStateAction<QuizStatus[]>>;
+    count?: number;
+}
+
+const QuizStatusCheckbox = (props: QuizStatusCheckboxProps) => {
+    const {status, statusFilter, setStatusFilter, count, ...rest} = props;
+    return <StyledTabPicker 
+        id={status ?? ""} checkboxTitle={status}
+        onInputChange={() => !statusFilter.includes(status) ? setStatusFilter(c => [...c.filter(s => s !== QuizStatus.All), status]) : setStatusFilter(c => c.filter(s => s !== status))}
+        checked={statusFilter.includes(status)}
+        count={count} {...rest}
+    />;
+};
+
+const QuizStatusAllCheckbox = (props: Omit<QuizStatusCheckboxProps, "status">) => {
+    const { statusFilter, setStatusFilter, count, ...rest } = props;
+    const [previousFilters, setPreviousFilters] = useState<QuizStatus[]>([]);
+    return <StyledTabPicker 
+        id="all" checkboxTitle="All"
+        onInputChange={(e) => {
+            if (e.target.checked) {
+                setPreviousFilters(statusFilter);
+                setStatusFilter([QuizStatus.All]);
+            } else {
+                setStatusFilter(previousFilters);
+            }
+        }}
+        checked={statusFilter.includes(QuizStatus.All)}
+        count={count} {...rest}
+    />;
+};
+
+
 interface MyQuizzesSidebarProps extends SidebarProps {
-    showCompleted: boolean;
-    setShowCompleted: (show: boolean) => void;
     setQuizCreator: (creator: string) => void;
     setQuizTitleFilter: (title: string) => void;
     quizStatuses: QuizStatus[];
@@ -647,14 +681,30 @@ interface MyQuizzesSidebarProps extends SidebarProps {
 };
 
 export const MyQuizzesSidebar = (props: MyQuizzesSidebarProps) => {
-    const { showCompleted, setShowCompleted, setQuizCreator, setQuizTitleFilter, quizStatuses, setQuizStatuses, displayMode, setDisplayMode } = props;
+    const { setQuizCreator, setQuizTitleFilter, quizStatuses, setQuizStatuses, displayMode, setDisplayMode } = props;
+    const deviceSize = useDeviceSize();
+
     return <ContentSidebar buttonTitle="Search & Filter">
-        <div className="section-divider mt-5"/>
-        <h5>Display mode</h5>
-        <DisplayModeToggle displayMode={displayMode} setDisplayMode={setDisplayMode}/>
+        <div className={classNames("section-divider", {"mt-5": above["lg"](deviceSize)})}/>
+        <Label className="w-100">
+            <h5 className="mb-4">Search tests</h5>
+            <Input type="text" data-testid="title-filter" onChange={(e) => setQuizTitleFilter(e.target.value)} 
+                placeholder="Search by title" aria-label="Search by title"/>
+        </Label>
         <div className="section-divider"/>
-        <h5>Search &amp; Filter</h5>
-        <QuizFilters setShowCompleted={setShowCompleted} setQuizCreator={setQuizCreator} setQuizTitleFilter={setQuizTitleFilter} quizStatuses={quizStatuses} setQuizStatuses={setQuizStatuses} showFilters={true}/>
-        <PastTestsToggle showCompleted={showCompleted} setShowCompleted={setShowCompleted} setQuizStatuses={setQuizStatuses}/>
+        <h5 className="mt-2 mb-4">Filter by status</h5>
+        <QuizStatusAllCheckbox statusFilter={quizStatuses} setStatusFilter={setQuizStatuses} count={undefined}/>
+        <div className="section-divider-small"/>
+        {Object.values(QuizStatus).filter(s => s !== QuizStatus.All).map(state => <QuizStatusCheckbox 
+            key={state} status={state} count={undefined}
+            statusFilter={quizStatuses} setStatusFilter={setQuizStatuses} 
+        />)}
+        <Label className="w-100">
+            <h5 className="mt-3">Filter by assigner</h5>
+            <Input type="text" onChange={(e) => setQuizCreator(e.target.value)}
+                placeholder="Search by assigner" aria-label="Search by assigner"/>
+        </Label>
+        <h5 className="my-3">Display mode</h5>
+        <DisplayModeToggle displayMode={displayMode} setDisplayMode={setDisplayMode}/>
     </ContentSidebar>;
 };
diff --git a/src/app/components/pages/quizzes/MyQuizzes.tsx b/src/app/components/pages/quizzes/MyQuizzes.tsx
index 17dd4d3a54..50a1cfcea8 100644
--- a/src/app/components/pages/quizzes/MyQuizzes.tsx
+++ b/src/app/components/pages/quizzes/MyQuizzes.tsx
@@ -8,7 +8,7 @@ import {Link, RouteComponentProps, useHistory, withRouter} from "react-router-do
 import {ShowLoading} from "../../handlers/ShowLoading";
 import {RegisteredUserDTO} from "../../../../IsaacApiTypes";
 import {TitleAndBreadcrumb} from "../../elements/TitleAndBreadcrumb";
-import {formatDate} from "../../elements/DateString";
+import {formatDate, getFriendlyDaysUntil} from "../../elements/DateString";
 import {QuizzesBoardOrder} from "../../../../IsaacAppTypes";
 import {
     above,
@@ -16,18 +16,21 @@ import {
     convertAttemptToQuiz,
     DisplayableQuiz,
     extractTeacherName,
+    HUMAN_SUBJECTS,
     isAda,
+    isDefined,
     isPhy,
     isTutorOrAbove,
     QuizStatus,
     selectOnChange,
     siteSpecific,
+    Subject,
+    tags,
     useDeviceSize
 } from "../../../services";
 import {Spacer} from "../../elements/Spacer";
 import {Tabs} from "../../elements/Tabs";
 import {PageFragment} from "../../elements/PageFragment";
-import { CardGrid } from "../../elements/CardGrid";
 import { SortItemHeader } from "../../elements/SortableItemHeader";
 import { Card, CardBody, Button, Table, Container, Alert, Row, Col, Label, Input } from "reactstrap";
 import orderBy from "lodash/orderBy";
@@ -38,6 +41,8 @@ import { StyledSelect } from "../../elements/inputs/StyledSelect";
 import { CollapsibleContainer } from "../../elements/CollapsibleContainer";
 import { FilterCount } from "../../elements/svg/FilterCount";
 import { MainContent, MyQuizzesSidebar, SidebarLayout } from "../../elements/layout/SidebarLayout";
+import { PhyHexIcon } from "../../elements/svg/PhyHexIcon";
+import { CardGrid } from "../../elements/CardGrid";
 
 export interface QuizzesPageProps extends RouteComponentProps {
     user: RegisteredUserDTO;
@@ -47,7 +52,83 @@ interface QuizAssignmentProps {
     quiz: DisplayableQuiz;
 }
 
-function QuizItem({quiz}: QuizAssignmentProps) {
+const PhyQuizItem = ({quiz}: QuizAssignmentProps) => {
+    const assignmentStartDate = quiz.startDate ?? quiz.creationDate;
+    const deviceSize = useDeviceSize();
+
+    const determineQuizSubject = (quizSummary?: DisplayableQuiz) => {
+        return quizSummary?.tags?.filter(tag => tags.allSubjectTags.map(t => t.id.valueOf()).includes(tag.toLowerCase())).reduce((acc, tag) => acc + `${tag.toLowerCase()}`, "");
+    };
+    const subject = determineQuizSubject(quiz); 
+
+    return <div className="p-2">
+        <Card className="h-100" style={{borderRadius: "8px"}}>
+            <CardBody className="d-flex flex-column">
+                <Row>
+                    <Col className="d-flex flex-column align-items-start col-8">
+                        <div className="d-flex align-items-center">
+                            <div className="d-flex justify-content-center board-subject-hexagon-size me-4 my-2">
+                                <PhyHexIcon icon="page-icon-quiz" subject={subject as Subject} className="assignment-hex ps-3"/>
+                            </div>
+                            <div className="d-flex flex-column flex-grow-1">
+                                <h4>{quiz.title || quiz.id }</h4>
+                                {above['sm'](deviceSize) && isDefined(subject) && <div className="d-flex align-items-center mb-2">
+                                    <span className="badge rounded-pill bg-theme me-1" data-bs-theme={subject}>{HUMAN_SUBJECTS[subject]}</span>
+                                </div>}
+                            </div>
+                        </div>
+                    </Col>
+                
+                    <Col className="d-flex flex-column justify-content-between col-4">
+                        {quiz.isAssigned
+                            ? quiz.dueDate && <p>Due date: <strong>{getFriendlyDaysUntil(quiz.dueDate)}</strong></p>
+                            : quiz.attempt && siteSpecific(
+                                <p>Freely {quiz.status === QuizStatus.Started ? "attempting" : "attempted"}</p>,
+                                <p>{quiz.status === QuizStatus.Started ? "Attempting" : "Attempted"} independently</p>
+                            )
+                        }
+                        {quiz.isAssigned && <p>
+                            Set: <strong>{getFriendlyDaysUntil(assignmentStartDate as Date)}</strong>
+                            {quiz.assignerSummary && <> by {extractTeacherName(quiz.assignerSummary)}</>}
+                        </p>}
+                        {quiz.attempt && <p>
+                            {quiz.status === QuizStatus.Complete ?
+                                <>Completed: <strong>{getFriendlyDaysUntil(quiz.attempt.completedDate as Date)}</strong></>
+                                : <>Started: <strong>{getFriendlyDaysUntil(quiz.attempt.startDate as Date)}</strong></>
+                            }
+                        </p>}
+                        {quiz.isAssigned ? <>
+                            {quiz.status === QuizStatus.NotStarted && <Button tag={Link} to={quiz.link}>
+                                {siteSpecific("Start Test", "Start test")}
+                            </Button>}
+                            {quiz.status === QuizStatus.Started && <Button tag={Link} to={quiz.link}>
+                                {siteSpecific("Continue Test", "Continue test")}
+                            </Button>}
+                            {quiz.status === QuizStatus.Overdue && <Button tag={Link} to={quiz.link} disabled={true}>
+                                {siteSpecific("Overdue", "Overdue")}
+                            </Button>}
+                            {quiz.status === QuizStatus.Complete && (
+                                <Button tag={Link} to={quiz.link} disabled={quiz.quizFeedbackMode === "NONE"}>
+                                    {quiz.quizFeedbackMode === "NONE" ? siteSpecific("No Feedback", "No feedback") : siteSpecific("View Feedback", "View feedback")}
+                                </Button>
+                            )}
+                        </> : quiz.attempt && <>
+                            {quiz.status === QuizStatus.Started && <Button tag={Link} to={quiz.link}>
+                                {siteSpecific("Continue Test", "Continue test")}
+                            </Button>}
+                            {quiz.status === QuizStatus.Complete && <Button tag={Link} to={quiz.link} disabled={quiz.quizFeedbackMode === "NONE"}>
+                                {quiz.quizFeedbackMode === "NONE" ? siteSpecific("No Feedback", "No feedback") : siteSpecific("View Feedback", "View feedback")}
+                            </Button>
+                            }
+                        </>}
+                    </Col>
+                </Row>
+            </CardBody>
+        </Card>
+    </div>;
+}
+
+const AdaQuizItem = ({quiz}: QuizAssignmentProps) => {
     const assignmentStartDate = quiz.startDate ?? quiz.creationDate;
 
     return <div className="p-2">
@@ -104,7 +185,9 @@ function QuizItem({quiz}: QuizAssignmentProps) {
             </CardBody>
         </Card>
     </div>;
-}
+};
+
+const QuizItem = siteSpecific(PhyQuizItem, AdaQuizItem);
 
 interface AssignmentGridProps {
     quizzes: DisplayableQuiz[];
@@ -114,9 +197,14 @@ interface AssignmentGridProps {
 function QuizGrid({quizzes, emptyMessage}: AssignmentGridProps) {
     return <>
         {quizzes.length === 0 && <p>{emptyMessage}</p>}
-        {quizzes.length > 0 && <CardGrid>
-            {quizzes.map(quiz => <QuizItem key={(quiz.isAssigned ? 'as' : 'at') + quiz.id} quiz={quiz}/>)}
-        </CardGrid>}
+        {quizzes.length > 0 && siteSpecific(
+            <>
+                {quizzes.map(quiz => <QuizItem key={(quiz.isAssigned ? 'as' : 'at') + quiz.id} quiz={quiz}/>)}
+            </>,
+            <CardGrid>
+                {quizzes.map(quiz => <QuizItem key={(quiz.isAssigned ? 'as' : 'at') + quiz.id} quiz={quiz}/>)}
+            </CardGrid>)
+        }
     </>;
 }
 
@@ -204,7 +292,7 @@ const PracticeQuizTable = ({quizzes, boardOrder, setBoardOrder, emptyMessage}: {
     </Table>;
 };
 
-interface QuizFiltersProps {
+interface AdaQuizFiltersProps {
     setShowCompleted: (show: boolean) => void;
     setQuizCreator: (creator: string) => void;
     setQuizTitleFilter: (title: string) => void;
@@ -213,19 +301,21 @@ interface QuizFiltersProps {
     showFilters: boolean;
 }
 
-export const QuizFilters = ({setShowCompleted, setQuizTitleFilter, setQuizCreator, quizStatuses, setQuizStatuses, showFilters}: QuizFiltersProps) => {
+const AdaQuizFilters = ({setShowCompleted, setQuizTitleFilter, setQuizCreator, quizStatuses, setQuizStatuses, showFilters}: AdaQuizFiltersProps) => {
     return <CollapsibleContainer expanded={showFilters}>
         <Row>
-            <Col xs={6}>
+            <Col className="col-6">
                 <Label className="w-100">
                     <span className={"text-nowrap"}>Filter by quiz title</span>
-                    <Input type="text" data-testid="title-filter" onChange={(e) => setQuizTitleFilter(e.target.value)} />
+                    <Input type="text" data-testid="title-filter" onChange={(e) => setQuizTitleFilter(e.target.value)} 
+                        placeholder="Search by title" aria-label="Search by title"/>
                 </Label>
             </Col>
-            <Col xs={6}>
+            <Col className={"col-6"}>
                 <Label className="w-100">
-                    <span className={"text-nowrap"}>Filter by assigner</span>
-                    <Input type="text" data-testid="title-filter" onChange={(e) => setQuizCreator(e.target.value)} />
+                    <h5>Filter by assigner</h5>
+                    <Input type="text" onChange={(e) => setQuizCreator(e.target.value)}
+                        placeholder="Search by assigner" aria-label="Search by assigner"/>
                 </Label>
             </Col>
         </Row>
@@ -234,7 +324,7 @@ export const QuizFilters = ({setShowCompleted, setQuizTitleFilter, setQuizCreato
                 <Label className="w-100">
                     <span className={"text-nowrap"}>Filter by status</span>
                     <StyledSelect 
-                        isMulti 
+                        isMulti
                         value={quizStatuses.map(status => ({value: status, label: status}))} 
                         options={Object.values(QuizStatus).map(status => ({value: status, label: status}))}
                         onChange={(newValues) => {
@@ -252,7 +342,7 @@ export const QuizFilters = ({setShowCompleted, setQuizTitleFilter, setQuizCreato
     
 export const DisplayModeToggle = ({displayMode, setDisplayMode}: {displayMode: "table" | "cards", setDisplayMode: React.Dispatch<React.SetStateAction<"table" | "cards">>}) => {
     return <div className={classNames("d-flex flex-column align-items-start", {"pb-3 pe-3 col-8 col-sm-6 col-md-3": isAda})}>
-        <span>Display in</span>
+        {isAda && <span>Display in</span>}
         <div className="d-flex flex-column align-items-center align-self-start w-max-content pb-3 pe-3">
             <StyledToggle
                 checked={displayMode === "cards"}
@@ -322,7 +412,7 @@ const MyQuizzesPageComponent = ({user}: QuizzesPageProps) => {
         if (!quiz) return false;
         const titleMatches = !quizTitleFilter || (quiz.title?.toLowerCase().includes(quizTitleFilter.toLowerCase()) ?? true);
         const creatorMatches = !quizCreatorFilter || (extractTeacherName(quiz.assignerSummary)?.toLowerCase().includes(quizCreatorFilter.toLowerCase()) ?? true);
-        const statusMatches = !quizStatusFilter || (!!quiz.status && quizStatusFilter.includes(quiz.status));
+        const statusMatches = !quizStatusFilter || (!!quiz.status && quizStatusFilter.includes(quiz.status) || quizStatusFilter.includes(QuizStatus.All));
         return titleMatches && creatorMatches && statusMatches;
     };
 
@@ -371,7 +461,7 @@ const MyQuizzesPageComponent = ({user}: QuizzesPageProps) => {
                 {above["sm"](deviceSize) && <PastTestsToggle showCompleted={showCompleted} setShowCompleted={setShowCompleted} setQuizStatuses={setQuizStatuses}/>}
                 {filtersToggle}
             </div>
-            <QuizFilters setShowCompleted={setShowCompleted} setQuizCreator={setQuizCreator} setQuizTitleFilter={setQuizTitleFilter} 
+            <AdaQuizFilters setShowCompleted={setShowCompleted} setQuizCreator={setQuizCreator} setQuizTitleFilter={setQuizTitleFilter} 
                 quizStatuses={quizStatusFilter} setQuizStatuses={setQuizStatuses} showFilters={showFilters}/>
         </>}
     </>;
@@ -390,7 +480,7 @@ const MyQuizzesPageComponent = ({user}: QuizzesPageProps) => {
         <TitleAndBreadcrumb currentPageTitle={siteSpecific("My Tests", "My tests")} help={pageHelp} />
         <PageFragment fragmentId={`tests_help_${isTutorOrAbove(user) ? "teacher" : "student"}`} ifNotFound={<div className={"mt-5"}/>} />
         <SidebarLayout>
-            <MyQuizzesSidebar showCompleted={showCompleted} setShowCompleted={setShowCompleted} setQuizCreator={setQuizCreator} setQuizTitleFilter={setQuizTitleFilter}
+            <MyQuizzesSidebar setQuizCreator={setQuizCreator} setQuizTitleFilter={setQuizTitleFilter}
                 quizStatuses={quizStatusFilter} setQuizStatuses={setQuizStatuses} displayMode={displayMode} setDisplayMode={setDisplayMode}/>
             <MainContent>
                 <Tabs className="mb-5 mt-4" tabContentClass="mt-4" activeTabOverride={tabOverride} onActiveTabChange={(index) => {
diff --git a/src/app/services/quiz.ts b/src/app/services/quiz.ts
index 0535f118fc..737afd92fe 100644
--- a/src/app/services/quiz.ts
+++ b/src/app/services/quiz.ts
@@ -288,6 +288,7 @@ export function partitionCompleteAndIncompleteQuizzes(assignmentsAndAttempts: Qu
 }
 
 export enum QuizStatus {
+    All = "All",
     Overdue = "Overdue", 
     NotStarted = "Not started", 
     Started = "Started", 
@@ -311,6 +312,7 @@ export interface DisplayableQuiz {
     quizFeedbackMode?: QuizFeedbackMode;
     link?: string;
     status?: QuizStatus;
+    tags?: string[];
 };
 
 export function convertAssignmentToQuiz(assignment: QuizAssignmentDTO): DisplayableQuiz | undefined {
@@ -337,7 +339,8 @@ export function convertAssignmentToQuiz(assignment: QuizAssignmentDTO): Displaya
         link: status === QuizStatus.Complete ? (assignment.quizFeedbackMode !== "NONE" ? `/test/attempt/${assignment.attempt?.id}/feedback` : undefined)
             : status === QuizStatus.Overdue ? undefined
                 : `/test/assignment/${assignment.id}`,
-        status: status
+        status: status,
+        tags: assignment.quizSummary?.tags
     };
 }
 
@@ -355,5 +358,6 @@ export function convertAttemptToQuiz(attempt: QuizAttemptDTO): DisplayableQuiz |
         quizFeedbackMode: attempt.feedbackMode,
         link: attempt.completedDate ? `/test/attempt/${attempt.id}/feedback` : `/test/attempt/${attempt.quizId}`,
         status: attempt.completedDate ? QuizStatus.Complete : QuizStatus.Started,
+        tags: attempt.quizSummary?.tags
     };
 }
diff --git a/src/scss/phy/icons.scss b/src/scss/phy/icons.scss
index a3f0841a3c..65f5225f23 100644
--- a/src/scss/phy/icons.scss
+++ b/src/scss/phy/icons.scss
@@ -152,6 +152,14 @@
   );
 }
 
+.page-icon-quiz {
+  @include svg-icon-layered(
+    '/assets/phy/icons/redesign/quiz-fg.svg', 
+    '/assets/phy/icons/redesign/quiz-bg.svg',
+    75px, 75px, 44px
+  );
+}
+
 .page-icon-concept {
   @include svg-icon-layered(
     '/assets/phy/icons/redesign/page-concept-fg.svg', 
@@ -208,6 +216,14 @@
   );
 }
 
+.list-icon-quiz {
+  @include svg-icon-layered(
+    '/assets/phy/icons/redesign/quiz-fg.svg', 
+    '/assets/phy/icons/redesign/quiz-bg.svg',
+    60px, 60px, 36px
+  );
+}
+
 .list-icon-concept {
   @include svg-icon-layered(
     '/assets/phy/icons/redesign/page-concept-fg.svg', 

From 2cec808600d93d5e9d5b870fafcec6fd554ca4e5 Mon Sep 17 00:00:00 2001
From: Alex Lewin <sl2281@cam.ac.uk>
Date: Fri, 7 Mar 2025 10:50:44 +0000
Subject: [PATCH 03/12] Make "My Tests" filters consistent with "My
 Assignments"

---
 .../elements/layout/SidebarLayout.tsx         | 54 ++++++++++---------
 src/app/services/quiz.ts                      | 14 +++++
 2 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/src/app/components/elements/layout/SidebarLayout.tsx b/src/app/components/elements/layout/SidebarLayout.tsx
index 89715444d2..4e1eedf69e 100644
--- a/src/app/components/elements/layout/SidebarLayout.tsx
+++ b/src/app/components/elements/layout/SidebarLayout.tsx
@@ -1,11 +1,11 @@
 import React, { ChangeEvent, RefObject, useEffect, useRef, useState } from "react";
-import { Col, ColProps, RowProps, Input, Offcanvas, OffcanvasBody, OffcanvasHeader, Row, Label } from "reactstrap";
+import { Col, ColProps, RowProps, Input, Offcanvas, OffcanvasBody, OffcanvasHeader, Row } from "reactstrap";
 import partition from "lodash/partition";
 import classNames from "classnames";
-import { AssignmentDTO, ContentSummaryDTO, IsaacConceptPageDTO, QuestionDTO, QuizAttemptDTO, RegisteredUserDTO } from "../../../../IsaacApiTypes";
-import { above, ACCOUNT_TAB, ACCOUNT_TABS, AUDIENCE_DISPLAY_FIELDS, below, BOARD_ORDER_NAMES, BoardCompletions, BoardCreators, BoardLimit, BoardSubjects, BoardViews, confirmThen, determineAudienceViews, filterAssignmentsByStatus, filterAudienceViewsByProperties, getDistinctAssignmentGroups, getDistinctAssignmentSetters, getThemeFromContextAndTags, HUMAN_STAGES, ifKeyIsEnter, isAda, isDefined, QuizStatus, siteSpecific, useDeviceSize } from "../../../services";
+import { AssignmentDTO, ContentSummaryDTO, IsaacConceptPageDTO, QuestionDTO, QuizAssignmentDTO, QuizAttemptDTO, RegisteredUserDTO } from "../../../../IsaacApiTypes";
+import { above, ACCOUNT_TAB, ACCOUNT_TABS, AUDIENCE_DISPLAY_FIELDS, below, BOARD_ORDER_NAMES, BoardCompletions, BoardCreators, BoardLimit, BoardSubjects, BoardViews, confirmThen, determineAudienceViews, DisplayableQuiz, filterAssignmentsByStatus, filterAudienceViewsByProperties, getDistinctAssignmentGroups, getDistinctAssignmentSetters, getThemeFromContextAndTags, HUMAN_STAGES, ifKeyIsEnter, isAda, isDefined, QuizStatus, siteSpecific, useDeviceSize } from "../../../services";
 import { StageAndDifficultySummaryIcons } from "../StageAndDifficultySummaryIcons";
-import { selectors, useAppSelector } from "../../../state";
+import { selectors, useAppSelector, useGetQuizAssignmentsAssignedToMeQuery } from "../../../state";
 import { Link, useHistory } from "react-router-dom";
 import { AppGroup, AssignmentBoardOrder, Tag } from "../../../../IsaacAppTypes";
 import { AffixButton } from "../AffixButton";
@@ -684,27 +684,31 @@ export const MyQuizzesSidebar = (props: MyQuizzesSidebarProps) => {
     const { setQuizCreator, setQuizTitleFilter, quizStatuses, setQuizStatuses, displayMode, setDisplayMode } = props;
     const deviceSize = useDeviceSize();
 
+    const quizQuery = useGetQuizAssignmentsAssignedToMeQuery();
+
     return <ContentSidebar buttonTitle="Search & Filter">
-        <div className={classNames("section-divider", {"mt-5": above["lg"](deviceSize)})}/>
-        <Label className="w-100">
-            <h5 className="mb-4">Search tests</h5>
-            <Input type="text" data-testid="title-filter" onChange={(e) => setQuizTitleFilter(e.target.value)} 
-                placeholder="Search by title" aria-label="Search by title"/>
-        </Label>
-        <div className="section-divider"/>
-        <h5 className="mt-2 mb-4">Filter by status</h5>
-        <QuizStatusAllCheckbox statusFilter={quizStatuses} setStatusFilter={setQuizStatuses} count={undefined}/>
-        <div className="section-divider-small"/>
-        {Object.values(QuizStatus).filter(s => s !== QuizStatus.All).map(state => <QuizStatusCheckbox 
-            key={state} status={state} count={undefined}
-            statusFilter={quizStatuses} setStatusFilter={setQuizStatuses} 
-        />)}
-        <Label className="w-100">
-            <h5 className="mt-3">Filter by assigner</h5>
-            <Input type="text" onChange={(e) => setQuizCreator(e.target.value)}
-                placeholder="Search by assigner" aria-label="Search by assigner"/>
-        </Label>
-        <h5 className="my-3">Display mode</h5>
-        <DisplayModeToggle displayMode={displayMode} setDisplayMode={setDisplayMode}/>
+        <ShowLoadingQuery query={quizQuery} defaultErrorTitle="" thenRender={(quizzes: QuizAssignmentDTO[]) => {
+            return <>
+                <div className={classNames("section-divider", {"mt-5": above["lg"](deviceSize)})}/>
+                <h5>Search tests</h5>
+                <Input type="text" className="search--filter-input my-4" onChange={(e) => setQuizTitleFilter(e.target.value)} 
+                    placeholder="Search by title" aria-label="Search by title"/>
+                <div className="section-divider"/>
+                <h5 className="mb-4">Filter by status</h5>
+                <QuizStatusAllCheckbox statusFilter={quizStatuses} setStatusFilter={setQuizStatuses} count={undefined}/>
+                <div className="section-divider-small"/>
+                {Object.values(QuizStatus).filter(s => s !== QuizStatus.All).map(state => <QuizStatusCheckbox 
+                    key={state} status={state} count={undefined}
+                    statusFilter={quizStatuses} setStatusFilter={setQuizStatuses} 
+                />)}
+                <h5 className="mt-4 mb-3">Filter by assigner</h5>
+                <Input type="select" onChange={e => setQuizCreator(e.target.value)}>
+                    {["All", ...getDistinctAssignmentSetters(quizzes)].map(setter => <option key={setter} value={setter}>{setter}</option>)}
+                </Input>
+                <div className="section-divider mt-4"/>
+                <h5>Display mode</h5>
+                <DisplayModeToggle displayMode={displayMode} setDisplayMode={setDisplayMode}/>
+            </>;
+        }}/>
     </ContentSidebar>;
 };
diff --git a/src/app/services/quiz.ts b/src/app/services/quiz.ts
index 737afd92fe..6e69b406db 100644
--- a/src/app/services/quiz.ts
+++ b/src/app/services/quiz.ts
@@ -19,6 +19,7 @@ import {
 } from "../state";
 import {
     API_PATH,
+    extractTeacherName,
     getValue,
     isDefined,
     isEventLeaderOrStaff,
@@ -361,3 +362,16 @@ export function convertAttemptToQuiz(attempt: QuizAttemptDTO): DisplayableQuiz |
         tags: attempt.quizSummary?.tags
     };
 }
+
+export const getDistinctQuizSetters = (quizzes: DisplayableQuiz[] | undefined | null): Set<string> => {
+    const distinctFormattedQuizSetters = new Set<string>();
+
+    if (quizzes) {
+        quizzes.forEach(quiz => {
+            const teacherName = extractTeacherName(quiz.assignerSummary);
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+            teacherName && distinctFormattedQuizSetters.add(teacherName);
+        });
+    }
+    return distinctFormattedQuizSetters;
+};

From 2a9b85f308ae3ba836473e30664a0f8b01534839 Mon Sep 17 00:00:00 2001
From: Alex Lewin <sl2281@cam.ac.uk>
Date: Fri, 7 Mar 2025 11:29:59 +0000
Subject: [PATCH 04/12] Reduce duplicated code

Also rename quiz sidebar props for consistency
---
 .../elements/layout/SidebarLayout.tsx         |  21 +--
 .../components/pages/quizzes/MyQuizzes.tsx    | 128 +++++++-----------
 src/app/services/quiz.ts                      |   2 +-
 3 files changed, 61 insertions(+), 90 deletions(-)

diff --git a/src/app/components/elements/layout/SidebarLayout.tsx b/src/app/components/elements/layout/SidebarLayout.tsx
index 4e1eedf69e..97c4df20a0 100644
--- a/src/app/components/elements/layout/SidebarLayout.tsx
+++ b/src/app/components/elements/layout/SidebarLayout.tsx
@@ -672,20 +672,23 @@ const QuizStatusAllCheckbox = (props: Omit<QuizStatusCheckboxProps, "status">) =
 
 
 interface MyQuizzesSidebarProps extends SidebarProps {
-    setQuizCreator: (creator: string) => void;
     setQuizTitleFilter: (title: string) => void;
-    quizStatuses: QuizStatus[];
-    setQuizStatuses: React.Dispatch<React.SetStateAction<QuizStatus[]>>;
+    setQuizCreatorFilter: (creator: string) => void;
+    quizStatusFilter: QuizStatus[];
+    setQuizStatusFilter: React.Dispatch<React.SetStateAction<QuizStatus[]>>;
+    activeTab: number;
     displayMode: "table" | "cards";
     setDisplayMode: React.Dispatch<React.SetStateAction<"table" | "cards">>;
 };
 
 export const MyQuizzesSidebar = (props: MyQuizzesSidebarProps) => {
-    const { setQuizCreator, setQuizTitleFilter, quizStatuses, setQuizStatuses, displayMode, setDisplayMode } = props;
+    const { setQuizTitleFilter,setQuizCreatorFilter, quizStatusFilter, setQuizStatusFilter, activeTab, displayMode, setDisplayMode } = props;
     const deviceSize = useDeviceSize();
-
     const quizQuery = useGetQuizAssignmentsAssignedToMeQuery();
 
+    const statusOptions = activeTab === 1 ? Object.values(QuizStatus).filter(s => s !== QuizStatus.All)
+        : [QuizStatus.Started, QuizStatus.Complete];
+
     return <ContentSidebar buttonTitle="Search & Filter">
         <ShowLoadingQuery query={quizQuery} defaultErrorTitle="" thenRender={(quizzes: QuizAssignmentDTO[]) => {
             return <>
@@ -695,14 +698,14 @@ export const MyQuizzesSidebar = (props: MyQuizzesSidebarProps) => {
                     placeholder="Search by title" aria-label="Search by title"/>
                 <div className="section-divider"/>
                 <h5 className="mb-4">Filter by status</h5>
-                <QuizStatusAllCheckbox statusFilter={quizStatuses} setStatusFilter={setQuizStatuses} count={undefined}/>
+                <QuizStatusAllCheckbox statusFilter={quizStatusFilter} setStatusFilter={setQuizStatusFilter} count={undefined}/>
                 <div className="section-divider-small"/>
-                {Object.values(QuizStatus).filter(s => s !== QuizStatus.All).map(state => <QuizStatusCheckbox 
+                {statusOptions.map(state => <QuizStatusCheckbox 
                     key={state} status={state} count={undefined}
-                    statusFilter={quizStatuses} setStatusFilter={setQuizStatuses} 
+                    statusFilter={quizStatusFilter} setStatusFilter={setQuizStatusFilter} 
                 />)}
                 <h5 className="mt-4 mb-3">Filter by assigner</h5>
-                <Input type="select" onChange={e => setQuizCreator(e.target.value)}>
+                <Input type="select" onChange={e => setQuizCreatorFilter(e.target.value)}>
                     {["All", ...getDistinctAssignmentSetters(quizzes)].map(setter => <option key={setter} value={setter}>{setter}</option>)}
                 </Input>
                 <div className="section-divider mt-4"/>
diff --git a/src/app/components/pages/quizzes/MyQuizzes.tsx b/src/app/components/pages/quizzes/MyQuizzes.tsx
index 50a1cfcea8..98eba8bdcd 100644
--- a/src/app/components/pages/quizzes/MyQuizzes.tsx
+++ b/src/app/components/pages/quizzes/MyQuizzes.tsx
@@ -52,15 +52,40 @@ interface QuizAssignmentProps {
     quiz: DisplayableQuiz;
 }
 
+const QuizButton = ({quiz}: QuizAssignmentProps) => {
+    return <>{quiz.isAssigned ? <>
+        {quiz.status === QuizStatus.NotStarted && <Button tag={Link} to={quiz.link}>
+            {siteSpecific("Start Test", "Start test")}
+        </Button>}
+        {quiz.status === QuizStatus.Started && <Button tag={Link} to={quiz.link}>
+            {siteSpecific("Continue Test", "Continue test")}
+        </Button>}
+        {quiz.status === QuizStatus.Overdue && <Button tag={Link} to={quiz.link} disabled={true}>
+            {siteSpecific("Overdue", "Overdue")}
+        </Button>}
+        {quiz.status === QuizStatus.Complete && (
+            <Button tag={Link} to={quiz.link} disabled={quiz.quizFeedbackMode === "NONE"}>
+                {quiz.quizFeedbackMode === "NONE" ? siteSpecific("No Feedback", "No feedback") : siteSpecific("View Feedback", "View feedback")}
+            </Button>
+        )}
+    </> : quiz.attempt && <>
+        {quiz.status === QuizStatus.Started && <Button tag={Link} to={quiz.link}>
+            {siteSpecific("Continue Test", "Continue test")}
+        </Button>}
+        {quiz.status === QuizStatus.Complete && <Button tag={Link} to={quiz.link} disabled={quiz.quizFeedbackMode === "NONE"}>
+            {quiz.quizFeedbackMode === "NONE" ? siteSpecific("No Feedback", "No feedback") : siteSpecific("View Feedback", "View feedback")}
+        </Button>
+        }
+    </>}</>;
+};
+
 const PhyQuizItem = ({quiz}: QuizAssignmentProps) => {
     const assignmentStartDate = quiz.startDate ?? quiz.creationDate;
     const deviceSize = useDeviceSize();
-
     const determineQuizSubject = (quizSummary?: DisplayableQuiz) => {
         return quizSummary?.tags?.filter(tag => tags.allSubjectTags.map(t => t.id.valueOf()).includes(tag.toLowerCase())).reduce((acc, tag) => acc + `${tag.toLowerCase()}`, "");
     };
     const subject = determineQuizSubject(quiz); 
-
     return <div className="p-2">
         <Card className="h-100" style={{borderRadius: "8px"}}>
             <CardBody className="d-flex flex-column">
@@ -78,14 +103,10 @@ const PhyQuizItem = ({quiz}: QuizAssignmentProps) => {
                             </div>
                         </div>
                     </Col>
-                
                     <Col className="d-flex flex-column justify-content-between col-4">
                         {quiz.isAssigned
                             ? quiz.dueDate && <p>Due date: <strong>{getFriendlyDaysUntil(quiz.dueDate)}</strong></p>
-                            : quiz.attempt && siteSpecific(
-                                <p>Freely {quiz.status === QuizStatus.Started ? "attempting" : "attempted"}</p>,
-                                <p>{quiz.status === QuizStatus.Started ? "Attempting" : "Attempted"} independently</p>
-                            )
+                            : quiz.attempt && <p>Freely {quiz.status === QuizStatus.Started ? "attempting" : "attempted"}</p>                           
                         }
                         {quiz.isAssigned && <p>
                             Set: <strong>{getFriendlyDaysUntil(assignmentStartDate as Date)}</strong>
@@ -97,30 +118,7 @@ const PhyQuizItem = ({quiz}: QuizAssignmentProps) => {
                                 : <>Started: <strong>{getFriendlyDaysUntil(quiz.attempt.startDate as Date)}</strong></>
                             }
                         </p>}
-                        {quiz.isAssigned ? <>
-                            {quiz.status === QuizStatus.NotStarted && <Button tag={Link} to={quiz.link}>
-                                {siteSpecific("Start Test", "Start test")}
-                            </Button>}
-                            {quiz.status === QuizStatus.Started && <Button tag={Link} to={quiz.link}>
-                                {siteSpecific("Continue Test", "Continue test")}
-                            </Button>}
-                            {quiz.status === QuizStatus.Overdue && <Button tag={Link} to={quiz.link} disabled={true}>
-                                {siteSpecific("Overdue", "Overdue")}
-                            </Button>}
-                            {quiz.status === QuizStatus.Complete && (
-                                <Button tag={Link} to={quiz.link} disabled={quiz.quizFeedbackMode === "NONE"}>
-                                    {quiz.quizFeedbackMode === "NONE" ? siteSpecific("No Feedback", "No feedback") : siteSpecific("View Feedback", "View feedback")}
-                                </Button>
-                            )}
-                        </> : quiz.attempt && <>
-                            {quiz.status === QuizStatus.Started && <Button tag={Link} to={quiz.link}>
-                                {siteSpecific("Continue Test", "Continue test")}
-                            </Button>}
-                            {quiz.status === QuizStatus.Complete && <Button tag={Link} to={quiz.link} disabled={quiz.quizFeedbackMode === "NONE"}>
-                                {quiz.quizFeedbackMode === "NONE" ? siteSpecific("No Feedback", "No feedback") : siteSpecific("View Feedback", "View feedback")}
-                            </Button>
-                            }
-                        </>}
+                        <QuizButton quiz={quiz}/>
                     </Col>
                 </Row>
             </CardBody>
@@ -130,18 +128,13 @@ const PhyQuizItem = ({quiz}: QuizAssignmentProps) => {
 
 const AdaQuizItem = ({quiz}: QuizAssignmentProps) => {
     const assignmentStartDate = quiz.startDate ?? quiz.creationDate;
-
     return <div className="p-2">
         <Card className="card-neat my-quizzes-card">
             <CardBody className="d-flex flex-column">
                 <h4 className="border-bottom pb-3 mb-3">{quiz.title || quiz.id }</h4>
-
                 {quiz.isAssigned
                     ? quiz.dueDate && <p>Due date: <strong>{formatDate(quiz.dueDate)}</strong></p>
-                    : quiz.attempt && siteSpecific(
-                        <p>Freely {quiz.status === QuizStatus.Started ? "attempting" : "attempted"}</p>,
-                        <p>{quiz.status === QuizStatus.Started ? "Attempting" : "Attempted"} independently</p>
-                    )
+                    : quiz.attempt && <p>{quiz.status === QuizStatus.Started ? "Attempting" : "Attempted"} independently</p>
                 }
                 {quiz.isAssigned && <p>
                     Set: {formatDate(assignmentStartDate)}
@@ -153,34 +146,9 @@ const AdaQuizItem = ({quiz}: QuizAssignmentProps) => {
                         : `Started: ${formatDate(quiz.attempt.startDate)}`
                     }
                 </p>}
-
                 <Spacer/>
-
                 <div className="text-center mt-4">
-                    {quiz.isAssigned ? <>
-                        {quiz.status === QuizStatus.NotStarted && <Button tag={Link} to={quiz.link}>
-                            {siteSpecific("Start Test", "Start test")}
-                        </Button>}
-                        {quiz.status === QuizStatus.Started && <Button tag={Link} to={quiz.link}>
-                            {siteSpecific("Continue Test", "Continue test")}
-                        </Button>}
-                        {quiz.status === QuizStatus.Overdue && <Button tag={Link} to={quiz.link} disabled={true}>
-                            {siteSpecific("Overdue", "Overdue")}
-                        </Button>}
-                        {quiz.status === QuizStatus.Complete && (
-                            <Button tag={Link} to={quiz.link} disabled={quiz.quizFeedbackMode === "NONE"}>
-                                {quiz.quizFeedbackMode === "NONE" ? siteSpecific("No Feedback", "No feedback") : siteSpecific("View Feedback", "View feedback")}
-                            </Button>
-                        )}
-                    </> : quiz.attempt && <>
-                        {quiz.status === QuizStatus.Started && <Button tag={Link} to={quiz.link}>
-                            {siteSpecific("Continue Test", "Continue test")}
-                        </Button>}
-                        {quiz.status === QuizStatus.Complete && <Button tag={Link} to={quiz.link} disabled={quiz.quizFeedbackMode === "NONE"}>
-                            {quiz.quizFeedbackMode === "NONE" ? siteSpecific("No Feedback", "No feedback") : siteSpecific("View Feedback", "View feedback")}
-                        </Button>
-                        }
-                    </>}
+                    <QuizButton quiz={quiz}/>
                 </div>
             </CardBody>
         </Card>
@@ -293,15 +261,15 @@ const PracticeQuizTable = ({quizzes, boardOrder, setBoardOrder, emptyMessage}: {
 };
 
 interface AdaQuizFiltersProps {
-    setShowCompleted: (show: boolean) => void;
-    setQuizCreator: (creator: string) => void;
     setQuizTitleFilter: (title: string) => void;
-    quizStatuses: QuizStatus[];
-    setQuizStatuses: React.Dispatch<React.SetStateAction<QuizStatus[]>>;
+    setQuizCreatorFilter: (creator: string) => void;
+    quizStatusFilter: QuizStatus[];
+    setQuizStatusFilter: React.Dispatch<React.SetStateAction<QuizStatus[]>>;
+    setShowCompleted: (show: boolean) => void;
     showFilters: boolean;
 }
 
-const AdaQuizFilters = ({setShowCompleted, setQuizTitleFilter, setQuizCreator, quizStatuses, setQuizStatuses, showFilters}: AdaQuizFiltersProps) => {
+const AdaQuizFilters = ({setShowCompleted, setQuizTitleFilter, setQuizCreatorFilter, quizStatusFilter, setQuizStatusFilter, showFilters}: AdaQuizFiltersProps) => {
     return <CollapsibleContainer expanded={showFilters}>
         <Row>
             <Col className="col-6">
@@ -314,7 +282,7 @@ const AdaQuizFilters = ({setShowCompleted, setQuizTitleFilter, setQuizCreator, q
             <Col className={"col-6"}>
                 <Label className="w-100">
                     <h5>Filter by assigner</h5>
-                    <Input type="text" onChange={(e) => setQuizCreator(e.target.value)}
+                    <Input type="text" onChange={(e) => setQuizCreatorFilter(e.target.value)}
                         placeholder="Search by assigner" aria-label="Search by assigner"/>
                 </Label>
             </Col>
@@ -325,10 +293,10 @@ const AdaQuizFilters = ({setShowCompleted, setQuizTitleFilter, setQuizCreator, q
                     <span className={"text-nowrap"}>Filter by status</span>
                     <StyledSelect 
                         isMulti
-                        value={quizStatuses.map(status => ({value: status, label: status}))} 
+                        value={quizStatusFilter.map(status => ({value: status, label: status}))} 
                         options={Object.values(QuizStatus).map(status => ({value: status, label: status}))}
                         onChange={(newValues) => {
-                            selectOnChange(setQuizStatuses, true)(newValues);
+                            selectOnChange(setQuizStatusFilter, true)(newValues);
                             setShowCompleted(newValues.map(v => v.value).includes(QuizStatus.Complete) || newValues.map(v => v.value).includes(QuizStatus.Overdue));
                         }}
                         menuPortalTarget={document.body} 
@@ -354,7 +322,7 @@ export const DisplayModeToggle = ({displayMode, setDisplayMode}: {displayMode: "
     </div>;
 };
 
-export const PastTestsToggle = ({showCompleted, setShowCompleted, setQuizStatuses}: {showCompleted: boolean, setShowCompleted: (show: boolean) => void, setQuizStatuses: React.Dispatch<React.SetStateAction<QuizStatus[]>>}) => {
+export const PastTestsToggle = ({showCompleted, setShowCompleted, setQuizStatusFilter}: {showCompleted: boolean, setShowCompleted: (show: boolean) => void, setQuizStatusFilter: React.Dispatch<React.SetStateAction<QuizStatus[]>>}) => {
     return <div className={classNames("d-flex flex-column align-items-start w-max-content", {"pb-3": isAda})}>
         <span>Past tests</span>
         <div className="h-100 align-content-center">
@@ -365,7 +333,7 @@ export const PastTestsToggle = ({showCompleted, setShowCompleted, setQuizStatuse
                 onChange={() => {
                     const target = !showCompleted;
                     setShowCompleted(target);
-                    setQuizStatuses(s => target ? [...s, QuizStatus.Complete, QuizStatus.Overdue] : s.filter(status => ![QuizStatus.Complete, QuizStatus.Overdue].includes(status)));
+                    setQuizStatusFilter(s => target ? [...s, QuizStatus.Complete, QuizStatus.Overdue] : s.filter(status => ![QuizStatus.Complete, QuizStatus.Overdue].includes(status)));
                 }}
             />
         </div>
@@ -385,8 +353,8 @@ const MyQuizzesPageComponent = ({user}: QuizzesPageProps) => {
     
     const [showFilters, setShowFilters] = useState(false);
     const [quizTitleFilter, setQuizTitleFilter] = useState("");
-    const [quizCreatorFilter, setQuizCreator] = useState("");
-    const [quizStatusFilter, setQuizStatuses] = useState<QuizStatus[]>([QuizStatus.NotStarted, QuizStatus.Started]);
+    const [quizCreatorFilter, setQuizCreatorFilter] = useState("");
+    const [quizStatusFilter, setQuizStatusFilter] = useState<QuizStatus[]>([QuizStatus.NotStarted, QuizStatus.Started]);
 
     const sortQuizzesByOrder = useCallback((quizzes: DisplayableQuiz[]) => {
         // if we're in table mode, sort by the order set by the user via the columns (boardOrder).
@@ -458,11 +426,11 @@ const MyQuizzesPageComponent = ({user}: QuizzesPageProps) => {
             <div className="d-flex">
                 {<DisplayModeToggle displayMode={displayMode} setDisplayMode={setDisplayMode}/>}
                 <Spacer/>
-                {above["sm"](deviceSize) && <PastTestsToggle showCompleted={showCompleted} setShowCompleted={setShowCompleted} setQuizStatuses={setQuizStatuses}/>}
+                {above["sm"](deviceSize) && <PastTestsToggle showCompleted={showCompleted} setShowCompleted={setShowCompleted} setQuizStatusFilter={setQuizStatusFilter}/>}
                 {filtersToggle}
             </div>
-            <AdaQuizFilters setShowCompleted={setShowCompleted} setQuizCreator={setQuizCreator} setQuizTitleFilter={setQuizTitleFilter} 
-                quizStatuses={quizStatusFilter} setQuizStatuses={setQuizStatuses} showFilters={showFilters}/>
+            <AdaQuizFilters setShowCompleted={setShowCompleted} setQuizCreatorFilter={setQuizCreatorFilter} setQuizTitleFilter={setQuizTitleFilter} 
+                quizStatusFilter={quizStatusFilter} setQuizStatusFilter={setQuizStatusFilter} showFilters={showFilters}/>
         </>}
     </>;
 
@@ -480,8 +448,8 @@ const MyQuizzesPageComponent = ({user}: QuizzesPageProps) => {
         <TitleAndBreadcrumb currentPageTitle={siteSpecific("My Tests", "My tests")} help={pageHelp} />
         <PageFragment fragmentId={`tests_help_${isTutorOrAbove(user) ? "teacher" : "student"}`} ifNotFound={<div className={"mt-5"}/>} />
         <SidebarLayout>
-            <MyQuizzesSidebar setQuizCreator={setQuizCreator} setQuizTitleFilter={setQuizTitleFilter}
-                quizStatuses={quizStatusFilter} setQuizStatuses={setQuizStatuses} displayMode={displayMode} setDisplayMode={setDisplayMode}/>
+            <MyQuizzesSidebar setQuizTitleFilter={setQuizTitleFilter} setQuizCreatorFilter={setQuizCreatorFilter} quizStatusFilter={quizStatusFilter} 
+                setQuizStatusFilter={setQuizStatusFilter} activeTab={tabOverride ?? 1} displayMode={displayMode} setDisplayMode={setDisplayMode}/>
             <MainContent>
                 <Tabs className="mb-5 mt-4" tabContentClass="mt-4" activeTabOverride={tabOverride} onActiveTabChange={(index) => {
                     history.replace({...history.location, hash: tabAnchors[index - 1]});
diff --git a/src/app/services/quiz.ts b/src/app/services/quiz.ts
index 6e69b406db..cfb115bda0 100644
--- a/src/app/services/quiz.ts
+++ b/src/app/services/quiz.ts
@@ -292,7 +292,7 @@ export enum QuizStatus {
     All = "All",
     Overdue = "Overdue", 
     NotStarted = "Not started", 
-    Started = "Started", 
+    Started = "Started (incomplete)", 
     Complete = "Complete",
 }
 

From 712c714868368b32e082ea8c9d4182723b560630 Mon Sep 17 00:00:00 2001
From: Alex Lewin <sl2281@cam.ac.uk>
Date: Fri, 7 Mar 2025 11:48:18 +0000
Subject: [PATCH 05/12] Fix card layout on `xs`

---
 src/app/components/pages/quizzes/MyQuizzes.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/components/pages/quizzes/MyQuizzes.tsx b/src/app/components/pages/quizzes/MyQuizzes.tsx
index 98eba8bdcd..24d6df437e 100644
--- a/src/app/components/pages/quizzes/MyQuizzes.tsx
+++ b/src/app/components/pages/quizzes/MyQuizzes.tsx
@@ -89,8 +89,8 @@ const PhyQuizItem = ({quiz}: QuizAssignmentProps) => {
     return <div className="p-2">
         <Card className="h-100" style={{borderRadius: "8px"}}>
             <CardBody className="d-flex flex-column">
-                <Row>
-                    <Col className="d-flex flex-column align-items-start col-8">
+                <Row className="row-cols-1 row-cols-sm-2">
+                    <Col className="d-flex flex-column align-items-start col-sm-8">
                         <div className="d-flex align-items-center">
                             <div className="d-flex justify-content-center board-subject-hexagon-size me-4 my-2">
                                 <PhyHexIcon icon="page-icon-quiz" subject={subject as Subject} className="assignment-hex ps-3"/>
@@ -103,7 +103,7 @@ const PhyQuizItem = ({quiz}: QuizAssignmentProps) => {
                             </div>
                         </div>
                     </Col>
-                    <Col className="d-flex flex-column justify-content-between col-4">
+                    <Col className="d-flex flex-column justify-content-between col-sm-4">
                         {quiz.isAssigned
                             ? quiz.dueDate && <p>Due date: <strong>{getFriendlyDaysUntil(quiz.dueDate)}</strong></p>
                             : quiz.attempt && <p>Freely {quiz.status === QuizStatus.Started ? "attempting" : "attempted"}</p>                           

From a84308b41d4f68397572eafd4d21c21b7eb5eec8 Mon Sep 17 00:00:00 2001
From: Alex Lewin <sl2281@cam.ac.uk>
Date: Fri, 7 Mar 2025 11:52:58 +0000
Subject: [PATCH 06/12] Remove unused import

---
 src/app/components/elements/layout/SidebarLayout.tsx | 2 +-
 src/app/components/pages/quizzes/MyQuizzes.tsx       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/elements/layout/SidebarLayout.tsx b/src/app/components/elements/layout/SidebarLayout.tsx
index 97c4df20a0..6fded0721a 100644
--- a/src/app/components/elements/layout/SidebarLayout.tsx
+++ b/src/app/components/elements/layout/SidebarLayout.tsx
@@ -3,7 +3,7 @@ import { Col, ColProps, RowProps, Input, Offcanvas, OffcanvasBody, OffcanvasHead
 import partition from "lodash/partition";
 import classNames from "classnames";
 import { AssignmentDTO, ContentSummaryDTO, IsaacConceptPageDTO, QuestionDTO, QuizAssignmentDTO, QuizAttemptDTO, RegisteredUserDTO } from "../../../../IsaacApiTypes";
-import { above, ACCOUNT_TAB, ACCOUNT_TABS, AUDIENCE_DISPLAY_FIELDS, below, BOARD_ORDER_NAMES, BoardCompletions, BoardCreators, BoardLimit, BoardSubjects, BoardViews, confirmThen, determineAudienceViews, DisplayableQuiz, filterAssignmentsByStatus, filterAudienceViewsByProperties, getDistinctAssignmentGroups, getDistinctAssignmentSetters, getThemeFromContextAndTags, HUMAN_STAGES, ifKeyIsEnter, isAda, isDefined, QuizStatus, siteSpecific, useDeviceSize } from "../../../services";
+import { above, ACCOUNT_TAB, ACCOUNT_TABS, AUDIENCE_DISPLAY_FIELDS, below, BOARD_ORDER_NAMES, BoardCompletions, BoardCreators, BoardLimit, BoardSubjects, BoardViews, confirmThen, determineAudienceViews, filterAssignmentsByStatus, filterAudienceViewsByProperties, getDistinctAssignmentGroups, getDistinctAssignmentSetters, getThemeFromContextAndTags, HUMAN_STAGES, ifKeyIsEnter, isAda, isDefined, QuizStatus, siteSpecific, useDeviceSize } from "../../../services";
 import { StageAndDifficultySummaryIcons } from "../StageAndDifficultySummaryIcons";
 import { selectors, useAppSelector, useGetQuizAssignmentsAssignedToMeQuery } from "../../../state";
 import { Link, useHistory } from "react-router-dom";
diff --git a/src/app/components/pages/quizzes/MyQuizzes.tsx b/src/app/components/pages/quizzes/MyQuizzes.tsx
index 24d6df437e..17dd228168 100644
--- a/src/app/components/pages/quizzes/MyQuizzes.tsx
+++ b/src/app/components/pages/quizzes/MyQuizzes.tsx
@@ -124,7 +124,7 @@ const PhyQuizItem = ({quiz}: QuizAssignmentProps) => {
             </CardBody>
         </Card>
     </div>;
-}
+};
 
 const AdaQuizItem = ({quiz}: QuizAssignmentProps) => {
     const assignmentStartDate = quiz.startDate ?? quiz.creationDate;

From e0ce1df9d9710eb156a1b5ad77fd05986798e598 Mon Sep 17 00:00:00 2001
From: Alex Lewin <sl2281@cam.ac.uk>
Date: Fri, 7 Mar 2025 12:24:40 +0000
Subject: [PATCH 07/12] Revert accidental Ada change & tidy scss

---
 .../components/elements/layout/SidebarLayout.tsx   |  3 +--
 src/app/components/pages/quizzes/MyQuizzes.tsx     | 14 ++++++--------
 src/scss/phy/cards.scss                            |  4 ++++
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/app/components/elements/layout/SidebarLayout.tsx b/src/app/components/elements/layout/SidebarLayout.tsx
index 6fded0721a..8246ef4aec 100644
--- a/src/app/components/elements/layout/SidebarLayout.tsx
+++ b/src/app/components/elements/layout/SidebarLayout.tsx
@@ -701,8 +701,7 @@ export const MyQuizzesSidebar = (props: MyQuizzesSidebarProps) => {
                 <QuizStatusAllCheckbox statusFilter={quizStatusFilter} setStatusFilter={setQuizStatusFilter} count={undefined}/>
                 <div className="section-divider-small"/>
                 {statusOptions.map(state => <QuizStatusCheckbox 
-                    key={state} status={state} count={undefined}
-                    statusFilter={quizStatusFilter} setStatusFilter={setQuizStatusFilter} 
+                    key={state} status={state} count={undefined} statusFilter={quizStatusFilter} setStatusFilter={setQuizStatusFilter} 
                 />)}
                 <h5 className="mt-4 mb-3">Filter by assigner</h5>
                 <Input type="select" onChange={e => setQuizCreatorFilter(e.target.value)}>
diff --git a/src/app/components/pages/quizzes/MyQuizzes.tsx b/src/app/components/pages/quizzes/MyQuizzes.tsx
index 17dd228168..61e0f89445 100644
--- a/src/app/components/pages/quizzes/MyQuizzes.tsx
+++ b/src/app/components/pages/quizzes/MyQuizzes.tsx
@@ -87,7 +87,7 @@ const PhyQuizItem = ({quiz}: QuizAssignmentProps) => {
     };
     const subject = determineQuizSubject(quiz); 
     return <div className="p-2">
-        <Card className="h-100" style={{borderRadius: "8px"}}>
+        <Card className="h-100 rounded-card">
             <CardBody className="d-flex flex-column">
                 <Row className="row-cols-1 row-cols-sm-2">
                     <Col className="d-flex flex-column align-items-start col-sm-8">
@@ -272,18 +272,16 @@ interface AdaQuizFiltersProps {
 const AdaQuizFilters = ({setShowCompleted, setQuizTitleFilter, setQuizCreatorFilter, quizStatusFilter, setQuizStatusFilter, showFilters}: AdaQuizFiltersProps) => {
     return <CollapsibleContainer expanded={showFilters}>
         <Row>
-            <Col className="col-6">
+            <Col xs={6}>
                 <Label className="w-100">
                     <span className={"text-nowrap"}>Filter by quiz title</span>
-                    <Input type="text" data-testid="title-filter" onChange={(e) => setQuizTitleFilter(e.target.value)} 
-                        placeholder="Search by title" aria-label="Search by title"/>
+                    <Input type="text" data-testid="title-filter" onChange={(e) => setQuizTitleFilter(e.target.value)}/>
                 </Label>
             </Col>
-            <Col className={"col-6"}>
+            <Col xs={6}>
                 <Label className="w-100">
-                    <h5>Filter by assigner</h5>
-                    <Input type="text" onChange={(e) => setQuizCreatorFilter(e.target.value)}
-                        placeholder="Search by assigner" aria-label="Search by assigner"/>
+                    <span className={"text-nowrap"}>Filter by assigner</span>
+                    <Input type="text" data-testid="title-filter" onChange={(e) => setQuizCreatorFilter(e.target.value)} />
                 </Label>
             </Col>
         </Row>
diff --git a/src/scss/phy/cards.scss b/src/scss/phy/cards.scss
index 5f2e64f717..6d3738de81 100644
--- a/src/scss/phy/cards.scss
+++ b/src/scss/phy/cards.scss
@@ -1,3 +1,7 @@
+.rounded-card {
+  border-radius: 8px;
+}
+
 @container pod-parent (min-width: 700px) {
   .pod.card {
     display: flex;

From 753e4fface736a8e423af53891859d6a2d18c10c Mon Sep 17 00:00:00 2001
From: Alex Lewin <sl2281@cam.ac.uk>
Date: Fri, 7 Mar 2025 12:33:48 +0000
Subject: [PATCH 08/12] Resolve test/quiz icons merge conflict

---
 src/app/components/pages/quizzes/MyQuizzes.tsx |  2 +-
 src/scss/phy/icons.scss                        | 16 ----------------
 2 files changed, 1 insertion(+), 17 deletions(-)

diff --git a/src/app/components/pages/quizzes/MyQuizzes.tsx b/src/app/components/pages/quizzes/MyQuizzes.tsx
index 61e0f89445..f86a04baa8 100644
--- a/src/app/components/pages/quizzes/MyQuizzes.tsx
+++ b/src/app/components/pages/quizzes/MyQuizzes.tsx
@@ -93,7 +93,7 @@ const PhyQuizItem = ({quiz}: QuizAssignmentProps) => {
                     <Col className="d-flex flex-column align-items-start col-sm-8">
                         <div className="d-flex align-items-center">
                             <div className="d-flex justify-content-center board-subject-hexagon-size me-4 my-2">
-                                <PhyHexIcon icon="page-icon-quiz" subject={subject as Subject} className="assignment-hex ps-3"/>
+                                <PhyHexIcon icon="page-icon-tests" subject={subject as Subject} className="assignment-hex ps-3"/>
                             </div>
                             <div className="d-flex flex-column flex-grow-1">
                                 <h4>{quiz.title || quiz.id }</h4>
diff --git a/src/scss/phy/icons.scss b/src/scss/phy/icons.scss
index 118413536a..01271bb002 100644
--- a/src/scss/phy/icons.scss
+++ b/src/scss/phy/icons.scss
@@ -157,14 +157,6 @@
   );
 }
 
-.page-icon-quiz {
-  @include svg-icon-layered(
-    '/assets/phy/icons/redesign/quiz-fg.svg', 
-    '/assets/phy/icons/redesign/quiz-bg.svg',
-    75px, 75px, 44px
-  );
-}
-
 .page-icon-concept {
   @include svg-icon-layered(
     '/assets/phy/icons/redesign/page-concept-fg.svg', 
@@ -237,14 +229,6 @@
   );
 }
 
-.list-icon-quiz {
-  @include svg-icon-layered(
-    '/assets/phy/icons/redesign/quiz-fg.svg', 
-    '/assets/phy/icons/redesign/quiz-bg.svg',
-    60px, 60px, 36px
-  );
-}
-
 .list-icon-concept {
   @include svg-icon-layered(
     '/assets/phy/icons/redesign/page-concept-fg.svg', 

From 733b1491f55be52a2c1cc0ba04fb6ba7e82bd1b1 Mon Sep 17 00:00:00 2001
From: Alex Lewin <sl2281@cam.ac.uk>
Date: Fri, 7 Mar 2025 12:35:05 +0000
Subject: [PATCH 09/12] Remove duplicated svgs

---
 public/assets/phy/icons/redesign/quiz-bg.svg | 5 -----
 public/assets/phy/icons/redesign/quiz-fg.svg | 5 -----
 2 files changed, 10 deletions(-)
 delete mode 100644 public/assets/phy/icons/redesign/quiz-bg.svg
 delete mode 100644 public/assets/phy/icons/redesign/quiz-fg.svg

diff --git a/public/assets/phy/icons/redesign/quiz-bg.svg b/public/assets/phy/icons/redesign/quiz-bg.svg
deleted file mode 100644
index 30a77a1dbc..0000000000
--- a/public/assets/phy/icons/redesign/quiz-bg.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="75" height="76" viewBox="0 0 75 76" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M31 58.0625H64" stroke="#23272C" stroke-width="5"/>
-  <path d="M31 38.0625H64" stroke="#23272C" stroke-width="5"/>
-  <path d="M31 18.0625H64" stroke="#23272C" stroke-width="5"/>
-</svg>
diff --git a/public/assets/phy/icons/redesign/quiz-fg.svg b/public/assets/phy/icons/redesign/quiz-fg.svg
deleted file mode 100644
index 069bbe68de..0000000000
--- a/public/assets/phy/icons/redesign/quiz-fg.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="75" height="76" viewBox="0 0 75 76" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M25 51.0625H11V65.0625H25V51.0625Z" fill="#944CBE"/>
-  <path d="M25 31.0625H11V45.0625H25V31.0625Z" fill="#944CBE"/>
-  <path d="M25 11.0625H11V25.0625H25V11.0625Z" fill="#944CBE"/>
-</svg>

From 2c28fc7d835011b29df18f668114b87dcf03b455 Mon Sep 17 00:00:00 2001
From: Jacob Brown <jeab2@cam.ac.uk>
Date: Tue, 11 Mar 2025 14:32:22 +0000
Subject: [PATCH 10/12] Improve message for empty results caused by bad
 filtering

---
 src/app/components/pages/quizzes/MyQuizzes.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/pages/quizzes/MyQuizzes.tsx b/src/app/components/pages/quizzes/MyQuizzes.tsx
index f86a04baa8..653483c66d 100644
--- a/src/app/components/pages/quizzes/MyQuizzes.tsx
+++ b/src/app/components/pages/quizzes/MyQuizzes.tsx
@@ -434,7 +434,7 @@ const MyQuizzesPageComponent = ({user}: QuizzesPageProps) => {
 
     const emptyAssignedMessage = <span className="text-muted">{!quizAssignments || quizAssignments.length === 0
         ? "You have no tests in progress."
-        : "No tests match your filters."
+        : <>No tests match your filters. Are you looking for <button className="btn-link text-muted p-0 m-0 bg-transparent" onClick={() => setQuizStatusFilter([QuizStatus.All])}>past tests</button>?</>
     }</span>;
 
     const emptyPracticeMessage = <span className="text-muted">{!freeAttempts || freeAttempts.length === 0

From 55efc3142478304796d5717bd260b00717087732 Mon Sep 17 00:00:00 2001
From: Jacob Brown <jeab2@cam.ac.uk>
Date: Tue, 11 Mar 2025 14:32:55 +0000
Subject: [PATCH 11/12] Fix button styling when used on anchor elements

---
 src/scss/phy/button.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/scss/phy/button.scss b/src/scss/phy/button.scss
index 1de269fe4a..e5a51da52d 100644
--- a/src/scss/phy/button.scss
+++ b/src/scss/phy/button.scss
@@ -44,7 +44,7 @@
     text-decoration: none;
   }
 
-  &:disabled {
+  &:disabled, &.disabled {
     background-color: var(--buttons-dark-disabled);
     color: var(--buttons-dark-text);
   }
@@ -71,7 +71,7 @@
     text-decoration: none;
   }
 
-  &:disabled {
+  &:disabled, &.disabled {
     color: var(--buttons-light-disabled-text);
   }
 
@@ -95,7 +95,7 @@
     text-decoration: none;
   }
 
-  &:disabled {
+  &:disabled, &.disabled {
     color: var(--buttons-light-disabled-text);
   }
 
@@ -124,7 +124,7 @@
     box-shadow: 0 0 0 3px var(--buttons-dark), 0 0 0 4.5px var(--buttons-focus-ring) !important;
   }
 
-  &:disabled {
+  &:disabled, &.disabled {
     color: var(--buttons-dark-disabled-text);
   }
 }

From 58f87670677e9b13c02135a423cdaa12942e5392 Mon Sep 17 00:00:00 2001
From: Alex Lewin <sl2281@cam.ac.uk>
Date: Tue, 11 Mar 2025 14:59:44 +0000
Subject: [PATCH 12/12] Change display mode toggle back to dropdown

---
 src/app/components/elements/layout/SidebarLayout.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/app/components/elements/layout/SidebarLayout.tsx b/src/app/components/elements/layout/SidebarLayout.tsx
index aba30e2213..74335288fc 100644
--- a/src/app/components/elements/layout/SidebarLayout.tsx
+++ b/src/app/components/elements/layout/SidebarLayout.tsx
@@ -17,7 +17,7 @@ import { Spacer } from "../Spacer";
 import { StyledTabPicker } from "../inputs/StyledTabPicker";
 import { GroupSelector } from "../../pages/Groups";
 import { QuizRubricButton, SectionProgress } from "../quiz/QuizAttemptComponent";
-import { DisplayModeToggle} from "../../pages/quizzes/MyQuizzes";
+import { StyledDropdown } from "../inputs/DropdownInput";
 
 export const SidebarLayout = (props: RowProps) => {
     const { className, ...rest } = props;
@@ -749,8 +749,11 @@ export const MyQuizzesSidebar = (props: MyQuizzesSidebarProps) => {
                     {["All", ...getDistinctAssignmentSetters(quizzes)].map(setter => <option key={setter} value={setter}>{setter}</option>)}
                 </Input>
                 <div className="section-divider mt-4"/>
-                <h5>Display mode</h5>
-                <DisplayModeToggle displayMode={displayMode} setDisplayMode={setDisplayMode}/>
+                <h5 className="mb-3">Display mode</h5>
+                <StyledDropdown value={displayMode} onChange={() => setDisplayMode(d => d === "table" ? "cards" : "table")}>
+                    <option value="table">Table View</option>
+                    <option value="cards">Card View</option>
+                </StyledDropdown>
             </>;
         }}/>
     </ContentSidebar>;