Convert outdated ContentSummaryListGroupItems to AbstractListViewItems implementations

src/app/components/elements/ContentPropertyTags.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { isStaff, isTeacherOrAbove } from "../../services";
+import { isPhy, isStaff, isTeacherOrAbove } from "../../services";
 import { selectors, useAppSelector } from "../../state";
 import classNames from "classnames";
 import {v4 as uuid_v4} from "uuid";
@@ -16,7 +16,7 @@ export const QuestionPropertyTags = ({ supersededBy, tags, ...rest }: QuestionPr
     const accessibilitySettings = useAccessibilitySettings();
 
     return <div {...rest} className={classNames("d-flex gap-2 align-items-center", rest.className)}>
-        {accessibilitySettings?.SHOW_INACCESSIBLE_WARNING && getAccessibilityTags(tags)?.map(tag => {
+        {isPhy && accessibilitySettings?.SHOW_INACCESSIBLE_WARNING && getAccessibilityTags(tags)?.map(tag => {
             const id = `access-warn-${uuid_v4()}`; // must be globally unique. making refs in a loop was too painful.
             return <React.Fragment key={tag}>
                 <i className={`icon icon-md ${ACCESSIBILITY_WARNINGS[tag].icon} icon-access-visual icon-color-black z-2`} id={id} />

src/app/components/elements/GameboardBuilderRow.tsx

@@ -116,8 +116,7 @@ const GameboardBuilderRow = (
                             </button>
                             <Spacer />
                         </div>
-                        {isPhy && <QuestionPropertyTags className="my-1" supersededBy={question.supersededBy} tags={question.tags} />}
-
+                        <QuestionPropertyTags className="my-1" supersededBy={question.supersededBy} tags={question.tags} />
                         {question.subtitle && <>
                             <span className="small text-muted d-none d-sm-block">{question.subtitle}</span>
                         </>}

src/app/components/elements/LLMFreeTextQuestionIndicator.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { isAda } from "../../services";
 
 export function LLMFreeTextQuestionIndicator({small, symbol, className}: {small?: boolean, symbol?: boolean, className?: string}) {
-    return <div className={classNames(className, "llm-indicator text-nowrap my-1", { small })}>
+    return <div className={classNames(className, "llm-indicator text-nowrap", {small, "my-1": !small})}>
         <span className={classNames("icon icon-ai", {"me-2": !symbol}, {"icon-md": isAda})}/> 
         {!symbol && `LLM marked question`}
     </div>;

src/app/components/elements/PageTitle.tsx

@@ -67,6 +67,8 @@ export interface TitleIconProps extends PhyHexIconProps {
     type: "img" | "hex" | "placeholder";
     height?: string;
     width?: string;
+    alt?: string;
+    label?: string;
 }
 
 export interface PageTitleProps {
@@ -97,7 +99,7 @@ export const PageTitle = ({currentPageTitle, displayTitleOverride, subTitle, dis
     return <h1 id="main-heading" tabIndex={-1} ref={headerRef} className={classNames("h-title h-secondary d-sm-flex", {"align-items-center py-2 mb-0": isPhy}, className)}>
         <div className="d-flex w-100" data-testid={"main-heading"}>
             {isPhy && icon && (
-                icon.type === "img" ? <img src={icon.icon} alt="" height={icon.height} width={icon.width} className="me-3"/> 
+                icon.type === "img" ? <img src={icon.icon} alt={icon.alt ?? ""} height={icon.height} width={icon.width} className="me-3"/> 
                     : icon.type === "hex" ? <PhyHexIcon icon={icon.icon} subject={icon.subject} style={{"height": icon.height, "width": icon.width}}/> 
                         : icon.type === "placeholder" ? <div style={{width: icon.width, height: icon.height}}/>
                             : undefined

src/app/components/elements/StageAndDifficultySummaryIcons.tsx

@@ -30,7 +30,7 @@ export const StageAndDifficultySummaryIcons = (props: StageAndDifficultySummaryI
                 </span>
             )}
         </div>,
-        <div className={classNames(className, "d-sm-flex flex-wrap mt-1 align-items-baseline", {"justify-content-end": !stack})}>
+        <div className={classNames(className, "d-sm-flex flex-wrap align-items-baseline", {"justify-content-end": !stack})}>
             <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">

src/app/components/elements/layout/SidebarLayout.tsx

@@ -31,7 +31,6 @@ import { EventsPageQueryParams } from "../../pages/Events";
 import { StyledDropdown } from "../inputs/DropdownInput";
 import { CollapsibleList } from "../CollapsibleList";
 import { extendUrl } from "../../pages/subjectLandingPageComponents";
-import { getProgressIcon } from "../../pages/Gameboard";
 import { tags as tagsService } from "../../../services";
 import { Markup } from "../markup";
 import { History } from "history";
@@ -69,11 +68,18 @@ const QuestionLink = (props: React.HTMLAttributes<HTMLLIElement> & QuestionLinkP
     const audienceFields = filterAudienceViewsByProperties(determineAudienceViews(question.audience), AUDIENCE_DISPLAY_FIELDS);
     const link = isDefined(gameboardId) ? `/questions/${question.id}?board=${gameboardId}` : `/questions/${question.id}`;
 
+    const progressIcon = question.state && (question.state === CompletionState.ALL_CORRECT
+        ? "icon icon-raw icon-correct"
+        : [CompletionState.ALL_INCORRECT, CompletionState.ALL_ATTEMPTED].includes(question.state)
+            ? "icon icon-raw icon-attempted"
+            : question.state === CompletionState.IN_PROGRESS
+                ? "icon icon-raw icon-in-progress"
+                : "icon icon-raw icon-not-started");
+
     return <li key={question.id} {...rest} data-bs-theme={getThemeFromContextAndTags(subject, question.tags ?? [])}>
         <Link to={link} className="py-2">
             {(isDefined(gameboardId) || question.state !== CompletionState.NOT_ATTEMPTED) 
-                ? <i className={classNames(getProgressIcon(question.state).icon, {"ms-2": isDefined(gameboardId)})} style={{minWidth: "16px"}}/> 
-
+                ? <i className={classNames(progressIcon, {"ms-2": isDefined(gameboardId)})} style={{minWidth: "16px"}}/> 
                 : <i className="icon icon-question-thick"/>
             }
             <div className="d-flex flex-column w-100">

src/app/components/elements/list-groups/AbstractListViewItem.tsx

@@ -5,7 +5,7 @@ import { ViewingContext} from "../../../../IsaacAppTypes";
 import classNames from "classnames";
 import { Badge, Button, Col, ListGroupItem } from "reactstrap";
 import { CompletionState, GameboardDTO } from "../../../../IsaacApiTypes";
-import { below, isDefined, isPhy, isTeacherOrAbove, siteSpecific, Subject, useDeviceSize } from "../../../services";
+import { above, below, isAda, isDefined, isPhy, isTeacherOrAbove, siteSpecific, Subject, useDeviceSize } from "../../../services";
 import { PhyHexIcon } from "../svg/PhyHexIcon";
 import { TitleIconProps } from "../PageTitle";
 import { Markup } from "../markup";
@@ -161,9 +161,10 @@ export type AbstractListViewItemProps = {
     url?: string;
     state?: AbstractListViewItemState;
     className?: string;
+    hasCaret?: boolean;
 } & ALVIType & ALVILayout;
 
-export const AbstractListViewItem = ({title, icon, subject, subtitle, breadcrumb, tags, fullWidth, url, state, className, ...typedProps}: AbstractListViewItemProps) => { 
+export const AbstractListViewItem = ({title, icon, subject, subtitle, breadcrumb, tags, fullWidth, url, state, className, hasCaret, ...typedProps}: AbstractListViewItemProps) => { 
     const deviceSize = useDeviceSize();
     const user = useAppSelector(selectors.user.orNull);
 
@@ -176,19 +177,20 @@ export const AbstractListViewItem = ({title, icon, subject, subtitle, breadcrumb
     fullWidth = fullWidth || below["sm"](deviceSize) || (isItem && !(typedProps.status || typedProps.audienceViews));
     const cardBody = <div className="w-100 d-flex flex-row">
         <Col className={classNames("d-flex flex-grow-1", {"mt-3": isCard, "mb-3": isCard && !typedProps.linkTags?.length})}>
-            <div className="position-relative">
-                {icon && (
-                    icon.type === "img" ? <img src={icon.icon} alt="" width={icon.width} height={icon.height} className={classNames(icon.className, "me-3")} /> 
+            <div className={classNames("position-relative", {"question-progress-icon": isAda})}>
+                {icon && <div className="inner-progress-icon">
+                    {icon.type === "img" ? <img src={icon.icon} alt={icon.alt ?? ""} width={icon.width} height={icon.height} className={classNames(icon.className, {"me-3": isPhy})} /> 
                         : icon.type === "hex" ? <PhyHexIcon icon={icon.icon} subject={icon.subject} size={icon.size} className={icon.className} />
                             : icon.type === "placeholder" ? <div style={{width: icon.width, height: icon.height}} /> 
-                                : undefined
-                )}
-                {isItem && typedProps.status && typedProps.status === CompletionState.ALL_CORRECT && <div className="list-view-status-indicator">
+                                : undefined}
+                    {icon.label && above['sm'](deviceSize) && <div className="icon-title mt-1">{icon.label}</div>}
+                </div>}
+                {isPhy && isItem && typedProps.status && typedProps.status === CompletionState.ALL_CORRECT && <div className="list-view-status-indicator">
                     <StatusDisplay status={typedProps.status} showText={false} />
                 </div>}
                 {isGameboard && typedProps.board?.contents && <ItemCount count={typedProps.board.contents.length} />}
             </div>
-            <div className="align-content-center text-overflow-ellipsis pe-2">
+            <div className={classNames("align-content-center text-overflow-ellipsis", siteSpecific("pe-2", "py-3"))}>
                 <div className="d-flex text-wrap mt-n1">
                     {url && !isDisabled
                         ? (url.startsWith("http")
@@ -205,7 +207,7 @@ export const AbstractListViewItem = ({title, icon, subject, subtitle, breadcrumb
                     }
                     {isItem && <>
                         {typedProps.quizTag && <span className="quiz-level-1-tag ms-sm-2">{typedProps.quizTag}</span>}
-                        {isPhy && <QuestionPropertyTags className="ms-2 justify-self-end" supersededBy={typedProps.supersededBy} tags={tags} />}
+                        <QuestionPropertyTags className="ms-2 justify-self-end" supersededBy={typedProps.supersededBy} tags={tags} />
                     </>}
                 </div>
                 {subtitle && <div className="small text-muted text-wrap">
@@ -217,10 +219,10 @@ export const AbstractListViewItem = ({title, icon, subject, subtitle, breadcrumb
                 {isItem && fullWidth && typedProps.audienceViews && <div className="d-flex mt-1"> 
                     <StageAndDifficultySummaryIcons audienceViews={typedProps.audienceViews} stack/> 
                 </div>}
-                {tags?.includes("llm_question_page") && <div className="mt-2">
+                {tags?.includes("llm_question_page") && <div className={classNames("mt-1", {"mt-2": isPhy || !fullWidth})}>
                     <LLMFreeTextQuestionIndicator small />
                 </div>}
-                {isItem && fullWidth && typedProps.status && typedProps.status !== CompletionState.ALL_CORRECT &&
+                {isPhy && isItem && fullWidth && typedProps.status && typedProps.status !== CompletionState.ALL_CORRECT &&
                     <StatusDisplay status={typedProps.status} showText className="py-1" />
                 }
                 {isGameboard && fullWidth && isTeacherOrAbove(user) && <div className="d-flex pt-3">
@@ -236,9 +238,9 @@ export const AbstractListViewItem = ({title, icon, subject, subtitle, breadcrumb
         </Col>
         {!fullWidth &&
             <>
-                {isItem && typedProps.status && typedProps.status !== CompletionState.ALL_CORRECT && <StatusDisplay status={typedProps.status} showText className="ms-2 me-3" />}
+                {isPhy && isItem && typedProps.status && typedProps.status !== CompletionState.ALL_CORRECT && <StatusDisplay status={typedProps.status} showText className="ms-2 me-3" />}
                 {isItem && typedProps.audienceViews && <div className={classNames("d-none d-md-flex justify-content-end wf-13", {"list-view-border": typedProps.audienceViews.length > 0})}>
-                    <StageAndDifficultySummaryIcons audienceViews={typedProps.audienceViews} stack className="w-100"/> 
+                    <StageAndDifficultySummaryIcons audienceViews={typedProps.audienceViews} stack className={siteSpecific("w-100", "py-3 pe-3")}/> 
                 </div>}
                 {isGameboard && isTeacherOrAbove(user) && <Col md={6} className="d-none d-md-flex align-items-center justify-content-end">
                     <GameboardAssign board={typedProps.board} />
@@ -248,6 +250,9 @@ export const AbstractListViewItem = ({title, icon, subject, subtitle, breadcrumb
                 </Col>}
             </>
         }
+        {hasCaret && <div className="list-caret align-content-center" aria-hidden="true">
+            <i className="icon icon-chevron-right" aria-hidden="true"/>
+        </div>}
     </div>;
 
     return <ListGroupItem