Question finder redesign

src/IsaacAppTypes.tsx

@@ -561,6 +561,7 @@ export interface QuestionSearchQuery {
     stages?: string;
     difficulties?: string;
     examBoards?: string;
+    questionCategories?: string;
     fasttrack?: boolean;
     hideCompleted?: boolean;
     startIndex?: number;

src/app/components/elements/CollapsibleList.tsx

@@ -0,0 +1,59 @@
+import React, { useLayoutEffect, useRef, useState } from "react";
+import { Col, Row } from "reactstrap";
+import { Spacer } from "./Spacer";
+import { FilterCount } from "./svg/FilterCount";
+import classNames from "classnames";
+
+export interface CollapsibleListProps {
+    title?: string;
+    asSubList?: boolean;
+    expanded: boolean;
+    toggle: () => void;
+    numberSelected?: number;
+    children?: React.ReactNode;
+    className?: string;
+}
+
+export const CollapsibleList = (props: CollapsibleListProps) => {
+    const {expanded, toggle} = props;
+    const [expandedHeight, setExpandedHeight] = useState(0);
+    const listRef = useRef<HTMLDivElement>(null);
+    const headRef = useRef<HTMLDivElement>(null);
+
+    useLayoutEffect(() => {
+        if (!listRef.current) return;
+        setExpandedHeight(listRef.current.clientHeight);
+    }, [listRef.current]);
+
+    useLayoutEffect(() => {
+        if (expanded) {
+            setExpandedHeight(listRef?.current ? [...listRef.current.children].map(c => 
+                c.getAttribute("data-targetHeight") ? parseInt(c.getAttribute("data-targetHeight") as string) : c.clientHeight
+            ).reduce((a, b) => a + b, 0) : 0);
+        }
+    }, [expanded, props.children]);
+
+    const title = props.title && props.asSubList ? props.title : <b>{props.title}</b>;
+
+    return <Col className={props.className} data-targetHeight={(headRef.current?.offsetHeight ?? 0) + (expanded ? expandedHeight : 0)}>
+        <div className="row collapsible-head" ref={headRef}>
+            <button className={classNames("w-100 d-flex align-items-center p-3 bg-white text-start", {"ps-4": props.asSubList})} onClick={toggle}>
+                {title && <span>{title}</span>}
+                <Spacer/>
+                {(props.numberSelected ?? 0) > 0
+                    && <FilterCount count={props.numberSelected ?? 0} />}
+                <img className={classNames("icon-dropdown-90", {"active": expanded})} src={"/assets/common/icons/chevron_right.svg"} alt="" />
+            </button>
+        </div>
+        <Row 
+            className={`collapsible-body overflow-hidden ${expanded ? "open" : "closed"}`} 
+            style={{height: expanded ? expandedHeight : 0, maxHeight: expanded ? expandedHeight : 0}}
+        >
+            <Col>
+                <div ref={listRef} className={classNames({"ms-2": props.asSubList})}>
+                    {props.children}
+                </div>
+            </Col>
+        </Row>
+    </Col>;
+};

src/app/components/elements/StageAndDifficultySummaryIcons.tsx

@@ -1,21 +1,52 @@
 import React from "react";
 import classNames from "classnames";
-import {isAda, isPhy, STAGE, stageLabelMap} from "../../services";
+import {simpleDifficultyLabelMap, siteSpecific, STAGE, stageLabelMap} from "../../services";
 import {DifficultyIcons} from "./svg/DifficultyIcons";
 import {ViewingContext} from "../../../IsaacAppTypes";
+import { Difficulty } from "../../../IsaacApiTypes";
 
-export function StageAndDifficultySummaryIcons({audienceViews, className}: {audienceViews: ViewingContext[], className?: string}) {
-    // FIXME find a better way than hiding the whole thing on mobile
-    return <div className={classNames(className, "mt-1", {"d-none d-sm-flex flex-wrap justify-content-end align-items-baseline": isAda, "d-sm-flex mt-md-0": isPhy})}>
-        {audienceViews.map((view, i) =>
-            <div key={`${view.stage} ${view.difficulty} ${view.examBoard}`} className={classNames("align-self-center", {"ms-sm-3 ms-md-2": isPhy && (i > 0), "d-flex d-md-block": isPhy, "d-block text-center mx-2 my-1": isAda})}>
-                {view.stage && view.stage !== STAGE.ALL && <div className="hierarchy-tags text-center">
-                    {stageLabelMap[view.stage]}
-                </div>}
-                {view.difficulty && <div className={classNames("hierarchy-tags text-center", {"ms-md-0 ms-2": isPhy})}>
-                    <DifficultyIcons difficulty={view.difficulty} />
-                </div>}
-            </div>)
-        }
-    </div>
+export function StageAndDifficultySummaryIcons({audienceViews, className, stack}: {
+    audienceViews: ViewingContext[],
+    className?: string,
+    stack?: boolean,
+}) {
+    const difficulties: Difficulty[] = audienceViews.map(v => v.difficulty).filter(v => v !== undefined);
+    return siteSpecific(
+        <div className={classNames(className, "mt-1 d-sm-flex mt-md-0")}>
+            {audienceViews.map((view, i) =>
+                <div key={`${view.stage} ${view.difficulty} ${view.examBoard}`} className={classNames("align-self-center d-flex d-md-block", {"ms-sm-3 ms-md-2": i > 0})}>
+                    {view.stage && view.stage !== STAGE.ALL && <div className="hierarchy-tags text-center">
+                        {stageLabelMap[view.stage]}
+                    </div>}
+                    {view.difficulty && <div className="hierarchy-tags text-center ms-md-0 ms-2">
+                        <DifficultyIcons difficulty={view.difficulty} />
+                    </div>}
+                </div>)
+            }
+        </div>,
+        <div className={classNames(className, "d-sm-flex flex-wrap mt-1 align-items-baseline", {"justify-content-end": !stack})}>
+            {
+                difficulties.every((v, _i, arr) => v === arr[0])
+                ? <div key={`${difficulties[0]}`} className={classNames("align-self-center d-flex align-items-center")}>
+                    {difficulties.length > 0 && <>
+                        <div className="hierarchy-tags text-center me-2">
+                            {simpleDifficultyLabelMap[difficulties[0]]}
+                        </div>
+                        <div className="hierarchy-tags text-center">
+                            <DifficultyIcons difficulty={difficulties[0]} blank classnames="mt-n1"/>
+                        </div>
+                    </>}
+                </div>
+                : audienceViews.map(view =>
+                <div key={`${view.difficulty}`} className={classNames("align-self-center d-block text-center mx-2 my-1")}>
+                    {view.stage && view.stage !== STAGE.ALL && <div className="hierarchy-tags text-center">
+                        {stageLabelMap[view.stage]}
+                    </div>}
+                    {view.difficulty && <div className="hierarchy-tags text-center">
+                        <DifficultyIcons difficulty={view.difficulty} />
+                    </div>}
+                </div>)
+            }
+        </div>,
+   );
 }

src/app/components/elements/inputs/StyledCheckbox.tsx

@@ -8,29 +8,32 @@ import classNames from "classnames";
 // A custom checkbox, dealing with mouse and keyboard input. Pass `onChange((e : ChangeEvent) => void)`, `checked: bool`, and `label: Element` as required as props to use.
 
 export const StyledCheckbox = (props : InputProps) => {
+
+    const {label, ignoreLabelHover, className, ...rest} = props;
+
     const [checked, setChecked] = useState(props.checked ?? false);
     const id = useMemo(() => {return (props.id ?? "") + "-" + v4();}, [props.id]);
     const onCheckChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         props.onChange && props.onChange(e);
         setChecked(e.target.checked);
     };
-    
+
     // if `checked` is changed externally, reflect this here
     useEffect(() => {
         setChecked(props.checked ?? false);
     }, [props.checked]);
 
     return <div className="styled-checkbox-wrapper">
-        <div className="me-2 mb-3">
+        <div className="me-2 my-2">
             {checked && <div className="tick"/>}
-            <Input {...props} id={id} type="checkbox" className={classNames(props.className ?? "", {"checked" : checked})}
+            <Input {...rest} id={id} type="checkbox" className={classNames(className ?? "", {"checked" : checked})}
                 onChange={(e) => onCheckChange(e)}
                 // If the user toggles with a keyboard, this does not change the state of the checkbox, so we need to do it manually (with modification to `target`
                 // as this is a keyboard event, not a change event). We also prevent default to avoid submitting the outer form.
                 onKeyDown={(e) => ifKeyIsEnter(() => {onCheckChange({...e, target: {...e.currentTarget, checked: !e.currentTarget.checked}}); e.preventDefault();})(e)}
             />
         </div>
-        {props.label && <label htmlFor={id} className={classNames({"text-muted" : props.disabled, "pt-1" : isPhy})} {...props.label.props}/>}
+        {label && <label htmlFor={id} className={classNames({"text-muted" : props.disabled, "pt-1" : isPhy, "hover-override" : ignoreLabelHover})} {...label.props}/>}
         <Spacer/>
     </div>;
-};
+};