From f64642c07db6c87cfac2301c0585e7442188e837 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Tue, 22 Oct 2024 12:42:26 -0600
Subject: [PATCH 01/79] 10460: Created helper for public trial sessions;

---
 .../Public/publicTrialSessionHelper.test.ts   | 24 +++++++++++++++++++
 .../Public/publicTrialSessionsHelper.ts       | 19 +++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 web-client/src/presenter/computeds/Public/publicTrialSessionHelper.test.ts
 create mode 100644 web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts

diff --git a/web-client/src/presenter/computeds/Public/publicTrialSessionHelper.test.ts b/web-client/src/presenter/computeds/Public/publicTrialSessionHelper.test.ts
new file mode 100644
index 00000000000..6bc222b7be4
--- /dev/null
+++ b/web-client/src/presenter/computeds/Public/publicTrialSessionHelper.test.ts
@@ -0,0 +1,24 @@
+import { DateTime } from 'luxon';
+import { publicTrialSessionsHelper } from '@web-client/presenter/computeds/Public/publicTrialSessionsHelper';
+import { runCompute } from '@web-client/presenter/test.cerebral';
+
+describe('publicTrialSessionsHelper', () => {
+  const TEST_TIME = DateTime.fromObject({
+    day: 22,
+    hour: 0,
+    minute: 0,
+    month: 10,
+    second: 0,
+    year: 2024,
+  });
+
+  it('should generate the correct "fetchedDateString" string', () => {
+    const { fetchedDateString } = runCompute(publicTrialSessionsHelper, {
+      state: {
+        FetchedTrialSessions: TEST_TIME,
+      },
+    });
+
+    expect(fetchedDateString).toBe('10/22/24 12:00 AM Eastern');
+  });
+});
diff --git a/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts b/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
new file mode 100644
index 00000000000..7ffcc883396
--- /dev/null
+++ b/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
@@ -0,0 +1,19 @@
+import { Get } from 'cerebral';
+import { state } from '@web-client/presenter/app-public.cerebral';
+
+export type PublicTrialSessionsHelperResults = {
+  fetchedDateString: string;
+};
+
+export const publicTrialSessionsHelper = (
+  get: Get,
+): PublicTrialSessionsHelperResults => {
+  const fetchedTrialSessions = get(state['FetchedTrialSessions']);
+  const fetchedDateString = fetchedTrialSessions.toFormat(
+    "MM/dd/yy hh:mm a 'Eastern'",
+  );
+
+  return {
+    fetchedDateString,
+  };
+};

From 45342bed88e5abd6c945e036edc2183e8885555e Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Tue, 22 Oct 2024 12:45:06 -0600
Subject: [PATCH 02/79] 10460: Register helper for public trial sessions;

---
 web-client/src/presenter/state-public.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/web-client/src/presenter/state-public.ts b/web-client/src/presenter/state-public.ts
index ea97c476498..410bd92d4c7 100644
--- a/web-client/src/presenter/state-public.ts
+++ b/web-client/src/presenter/state-public.ts
@@ -10,6 +10,7 @@ import { practitionerSearchHelper } from '@web-client/presenter/computeds/Advanc
 import { publicAlertHelper } from './computeds/Public/publicAlertHelper';
 import { publicCaseDetailHeaderHelper } from './computeds/Public/publicCaseDetailHeaderHelper';
 import { publicCaseDetailHelper } from './computeds/Public/publicCaseDetailHelper';
+import { publicTrialSessionsHelper } from '@web-client/presenter/computeds/Public/publicTrialSessionsHelper';
 import { templateHelper } from './computeds/templateHelper';
 import { todaysOpinionsHelper } from './computeds/Public/todaysOpinionsHelper';
 import { todaysOrdersHelper } from './computeds/Public/todaysOrdersHelper';
@@ -30,6 +31,9 @@ const computeds = {
   publicCaseDetailHelper: publicCaseDetailHelper as unknown as ReturnType<
     typeof publicCaseDetailHelper
   >,
+  publicTrialSessionsHelper: publicTrialSessionsHelper as unknown as ReturnType<
+    typeof publicTrialSessionsHelper
+  >,
   templateHelper,
   todaysOpinionsHelper,
   todaysOrdersHelper,

From 27a8b7841ea942e204400338fdb58c1f388aae86 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Tue, 22 Oct 2024 13:26:36 -0600
Subject: [PATCH 03/79] 10460: Create TSX files for Public Trial Session;

---
 web-client/src/views/AppComponentPublic.tsx   |  2 +
 .../src/views/Public/PublicTrialSessions.tsx  | 52 +++++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 web-client/src/views/Public/PublicTrialSessions.tsx

diff --git a/web-client/src/views/AppComponentPublic.tsx b/web-client/src/views/AppComponentPublic.tsx
index edb45c7d618..912c487d823 100644
--- a/web-client/src/views/AppComponentPublic.tsx
+++ b/web-client/src/views/AppComponentPublic.tsx
@@ -11,6 +11,7 @@ import { Privacy } from './Privacy';
 import { PublicCaseDetail } from './Public/PublicCaseDetail';
 import { PublicPrintableDocketRecord } from './Public/PublicPrintableDocketRecord';
 import { PublicSearch } from './Public/PublicSearch';
+import { PublicTrialSessions } from '@web-client/views/Public/PublicTrialSessions';
 import { TodaysOpinions } from './Public/TodaysOpinions';
 import { TodaysOrders } from './Public/TodaysOrders';
 import { UsaBanner } from './UsaBanner';
@@ -30,6 +31,7 @@ const pages = {
   PublicCaseDetail,
   PublicPrintableDocketRecord,
   PublicSearch,
+  PublicTrialSessions,
   TodaysOpinions,
   TodaysOrders,
 };
diff --git a/web-client/src/views/Public/PublicTrialSessions.tsx b/web-client/src/views/Public/PublicTrialSessions.tsx
new file mode 100644
index 00000000000..40bef00d953
--- /dev/null
+++ b/web-client/src/views/Public/PublicTrialSessions.tsx
@@ -0,0 +1,52 @@
+import { BigHeader } from '@web-client/views/BigHeader';
+import { Button } from '@web-client/ustc-ui/Button/Button';
+import { connect } from '@web-client/presenter/shared.cerebral';
+import { state } from '@web-client/presenter/app-public.cerebral';
+import React from 'react';
+
+const props = {
+  publicTrialSessionsHelper: state.publicTrialSessionsHelper,
+};
+
+export const PublicTrialSessions = connect(
+  props,
+  function ({ publicTrialSessionsHelper }) {
+    return (
+      <>
+        <BigHeader text="Scheduled Trial Sessions" />
+        <section className="usa-section grid-container">
+          <div className="grid-row">
+            <div className="grid-col-8 padding-top-2">
+              <div className="grid-row">
+                <div>
+                  Information on this page is current as of{' '}
+                  {publicTrialSessionsHelper.fetchedDateString}
+                </div>
+              </div>
+            </div>
+            <div className="grid-col-4 padding-top-1 card">
+              <div className="card-header padding-left-2 padding-top-2 border-bottom-1px border-base-lighter">
+                <h2>Remote Proceedings</h2>
+              </div>
+              <div className="card-content">
+                <div className="padding-left-2 margin-bottom-2">
+                  <Button
+                    className="padding-bottom-0"
+                    link="https://www.ustaxcourt.gov/remote_proceedings.html"
+                  >
+                    Public Access to Remote Proceedings
+                  </Button>
+                  <Button link="https://www.ustaxcourt.gov/zoomgov.html">
+                    Zoomgov Proceedings Resources
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </>
+    );
+  },
+);
+
+PublicTrialSessions.displayName = 'PublicTrialSessions';

From 531644d03848f4cb82e9a186a4c7ba141ae35d2a Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Tue, 22 Oct 2024 14:44:18 -0600
Subject: [PATCH 04/79] 10460: Create component for Remote Proceedings Card;

---
 ...blicTrialSessionsRemoteProceedingsCard.tsx | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 web-client/src/views/Public/PublicTrialSessionsRemoteProceedingsCard.tsx

diff --git a/web-client/src/views/Public/PublicTrialSessionsRemoteProceedingsCard.tsx b/web-client/src/views/Public/PublicTrialSessionsRemoteProceedingsCard.tsx
new file mode 100644
index 00000000000..375389d9752
--- /dev/null
+++ b/web-client/src/views/Public/PublicTrialSessionsRemoteProceedingsCard.tsx
@@ -0,0 +1,31 @@
+import { Button } from '@web-client/ustc-ui/Button/Button';
+import { connect } from '@web-client/presenter/shared.cerebral';
+import React from 'react';
+
+export const PublicTrialSessionsRemoteProceedingsCard = connect(
+  {},
+  function () {
+    return (
+      <>
+        <div className="card">
+          <div className="card-header padding-left-2 padding-top-2 border-bottom-1px border-base-lighter">
+            <h2>Remote Proceedings</h2>
+          </div>
+          <div className="card-content">
+            <div className="padding-left-2 margin-bottom-2">
+              <Button
+                className="padding-bottom-0"
+                link="https://www.ustaxcourt.gov/remote_proceedings.html"
+              >
+                Public Access to Remote Proceedings
+              </Button>
+              <Button link="https://www.ustaxcourt.gov/zoomgov.html">
+                Zoomgov Proceedings Resources
+              </Button>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  },
+);

From ee0f2699024a4f14222b3c7de925930a394c1957 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Tue, 22 Oct 2024 14:51:28 -0600
Subject: [PATCH 05/79] 10460: Text align left for Card;

---
 .../Public/PublicTrialSessionsRemoteProceedingsCard.tsx  | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/web-client/src/views/Public/PublicTrialSessionsRemoteProceedingsCard.tsx b/web-client/src/views/Public/PublicTrialSessionsRemoteProceedingsCard.tsx
index 375389d9752..e64bfb1fbb5 100644
--- a/web-client/src/views/Public/PublicTrialSessionsRemoteProceedingsCard.tsx
+++ b/web-client/src/views/Public/PublicTrialSessionsRemoteProceedingsCard.tsx
@@ -11,15 +11,18 @@ export const PublicTrialSessionsRemoteProceedingsCard = connect(
           <div className="card-header padding-left-2 padding-top-2 border-bottom-1px border-base-lighter">
             <h2>Remote Proceedings</h2>
           </div>
-          <div className="card-content">
+          <div className="card-content ">
             <div className="padding-left-2 margin-bottom-2">
               <Button
-                className="padding-bottom-0"
+                className="padding-bottom-0 text-left"
                 link="https://www.ustaxcourt.gov/remote_proceedings.html"
               >
                 Public Access to Remote Proceedings
               </Button>
-              <Button link="https://www.ustaxcourt.gov/zoomgov.html">
+              <Button
+                className="text-left"
+                link="https://www.ustaxcourt.gov/zoomgov.html"
+              >
                 Zoomgov Proceedings Resources
               </Button>
             </div>

From a984b7a802d0e6545757aa233fc8b559d6467fe3 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Wed, 23 Oct 2024 09:40:06 -0600
Subject: [PATCH 06/79] 10460: Increase padding;

---
 .../views/Public/PublicTrialSessionsRemoteProceedingsCard.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-client/src/views/Public/PublicTrialSessionsRemoteProceedingsCard.tsx b/web-client/src/views/Public/PublicTrialSessionsRemoteProceedingsCard.tsx
index e64bfb1fbb5..c496c75ec6d 100644
--- a/web-client/src/views/Public/PublicTrialSessionsRemoteProceedingsCard.tsx
+++ b/web-client/src/views/Public/PublicTrialSessionsRemoteProceedingsCard.tsx
@@ -12,7 +12,7 @@ export const PublicTrialSessionsRemoteProceedingsCard = connect(
             <h2>Remote Proceedings</h2>
           </div>
           <div className="card-content ">
-            <div className="padding-left-2 margin-bottom-2">
+            <div className="padding-left-2 margin-bottom-9">
               <Button
                 className="padding-bottom-0 text-left"
                 link="https://www.ustaxcourt.gov/remote_proceedings.html"

From 23809497008c151d88570cb54256e48f9a43f31e Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Wed, 23 Oct 2024 11:49:52 -0600
Subject: [PATCH 07/79] 10460: Added more properties to the helper;

---
 .../Public/publicTrialSessionHelper.test.ts   | 90 +++++++++++++++++++
 .../Public/publicTrialSessionsHelper.ts       | 36 ++++++++
 2 files changed, 126 insertions(+)

diff --git a/web-client/src/presenter/computeds/Public/publicTrialSessionHelper.test.ts b/web-client/src/presenter/computeds/Public/publicTrialSessionHelper.test.ts
index 6bc222b7be4..02d3152ec2b 100644
--- a/web-client/src/presenter/computeds/Public/publicTrialSessionHelper.test.ts
+++ b/web-client/src/presenter/computeds/Public/publicTrialSessionHelper.test.ts
@@ -21,4 +21,94 @@ describe('publicTrialSessionsHelper', () => {
 
     expect(fetchedDateString).toBe('10/22/24 12:00 AM Eastern');
   });
+
+  it('should return the "sessiontTypeOptions" value correctly', () => {
+    const { sessionTypeOptions } = runCompute(publicTrialSessionsHelper, {
+      state: {
+        FetchedTrialSessions: TEST_TIME,
+      },
+    });
+
+    expect(sessionTypeOptions).toEqual([
+      {
+        label: 'Regular',
+        value: 'Regular',
+      },
+      {
+        label: 'Small',
+        value: 'Small',
+      },
+      {
+        label: 'Hybrid',
+        value: 'Hybrid',
+      },
+      {
+        label: 'Hybrid-S',
+        value: 'Hybrid-S',
+      },
+      {
+        label: 'Special',
+        value: 'Special',
+      },
+      {
+        label: 'Motion/Hearing',
+        value: 'Motion/Hearing',
+      },
+    ]);
+  });
+
+  it('should return the "trialCitiesByState" value correctly', () => {
+    const { trialCitiesByState } = runCompute(publicTrialSessionsHelper, {
+      state: {
+        FetchedTrialSessions: TEST_TIME,
+      },
+    });
+
+    expect(trialCitiesByState).toBeDefined();
+  });
+
+  it('should return the "trialSessionJudgeOptions" value correctly', () => {
+    const { trialSessionJudgeOptions } = runCompute(publicTrialSessionsHelper, {
+      state: {
+        FetchedTrialSessions: TEST_TIME,
+        judges: [
+          { name: 'TEST_JUDGE_1', userId: '1' },
+          { name: 'TEST_JUDGE_2', userId: '2' },
+          { name: 'TEST_JUDGE_3', userId: '3' },
+          { name: 'TEST_JUDGE_4', userId: '4' },
+        ],
+      },
+    });
+
+    expect(trialSessionJudgeOptions).toEqual([
+      {
+        label: 'TEST_JUDGE_1',
+        value: {
+          name: 'TEST_JUDGE_1',
+          userId: '1',
+        },
+      },
+      {
+        label: 'TEST_JUDGE_2',
+        value: {
+          name: 'TEST_JUDGE_2',
+          userId: '2',
+        },
+      },
+      {
+        label: 'TEST_JUDGE_3',
+        value: {
+          name: 'TEST_JUDGE_3',
+          userId: '3',
+        },
+      },
+      {
+        label: 'TEST_JUDGE_4',
+        value: {
+          name: 'TEST_JUDGE_4',
+          userId: '4',
+        },
+      },
+    ]);
+  });
 });
diff --git a/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts b/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
index 7ffcc883396..2b4ad5c3a06 100644
--- a/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
+++ b/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
@@ -1,19 +1,55 @@
 import { Get } from 'cerebral';
+import { SESSION_TYPES } from '@shared/business/entities/EntityConstants';
+import { getTrialCitiesGroupedByState } from '@shared/business/utilities/trialSession/trialCitiesGroupedByState';
 import { state } from '@web-client/presenter/app-public.cerebral';
 
 export type PublicTrialSessionsHelperResults = {
   fetchedDateString: string;
+  sessionTypeOptions: {
+    label: string;
+    value: string;
+  }[];
+  trialCitiesByState: {
+    label: string;
+    options: { label: string; value: string }[];
+  }[];
+  trialSessionJudgeOptions: {
+    label: string;
+    value: {
+      name: string;
+      userId: string;
+    };
+  }[];
 };
 
 export const publicTrialSessionsHelper = (
   get: Get,
 ): PublicTrialSessionsHelperResults => {
   const fetchedTrialSessions = get(state['FetchedTrialSessions']);
+  const trialSessionJudges = get(state.judges) || [];
+
   const fetchedDateString = fetchedTrialSessions.toFormat(
     "MM/dd/yy hh:mm a 'Eastern'",
   );
 
+  const sessionTypeOptions = Object.values(SESSION_TYPES).map(sessionType => ({
+    label: sessionType,
+    value: sessionType,
+  }));
+
+  const trialCitiesByState = getTrialCitiesGroupedByState();
+
+  const trialSessionJudgeOptions = trialSessionJudges.map(
+    trialSessionJudge => ({
+      label: trialSessionJudge.name,
+      value: { name: trialSessionJudge.name, userId: trialSessionJudge.userId },
+    }),
+  );
+
   return {
     fetchedDateString,
+    sessionTypeOptions,
+    trialCitiesByState,
+    trialSessionJudgeOptions,
   };
 };

From a44fe2b582115ba0637dbe520d238bbaae88bbb5 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Wed, 23 Oct 2024 11:53:17 -0600
Subject: [PATCH 08/79] 10460: Create component for trial sessions filters;

---
 .../Public/PublicTrialSessionsFilters.tsx     | 250 ++++++++++++++++++
 1 file changed, 250 insertions(+)
 create mode 100644 web-client/src/views/Public/PublicTrialSessionsFilters.tsx

diff --git a/web-client/src/views/Public/PublicTrialSessionsFilters.tsx b/web-client/src/views/Public/PublicTrialSessionsFilters.tsx
new file mode 100644
index 00000000000..83de00fbf23
--- /dev/null
+++ b/web-client/src/views/Public/PublicTrialSessionsFilters.tsx
@@ -0,0 +1,250 @@
+import { FormGroup } from '@web-client/ustc-ui/FormGroup/FormGroup';
+import { PillButton } from '@web-client/ustc-ui/Button/PillButton';
+import { SelectSearch } from '@web-client/ustc-ui/Select/SelectSearch';
+import { TRIAL_SESSION_PROCEEDING_TYPES } from '@shared/business/entities/EntityConstants';
+import { connect } from '@web-client/presenter/shared.cerebral';
+import { sequences } from '@web-client/presenter/app.cerebral';
+import { state } from '@web-client/presenter/app-public.cerebral';
+import React from 'react';
+
+const ROOT = 'publicTrialSessionData';
+const props = {
+  publicTrialSessionData: state[ROOT],
+  publicTrialSessionsHelper: state.publicTrialSessionsHelper,
+  updateFormValueSequence: sequences.updateFormValueSequence,
+};
+
+export const PublicTrialSessionsFilters = connect(
+  props,
+  function ({
+    publicTrialSessionData,
+    publicTrialSessionsHelper,
+    updateFormValueSequence,
+  }) {
+    const PROCEEDING_TYPES = Object.entries({
+      all: 'All',
+      ...TRIAL_SESSION_PROCEEDING_TYPES,
+    });
+
+    const {
+      judges = {},
+      locations = {},
+      proceedingType = 'All',
+      sessionTypes = {},
+    } = publicTrialSessionData;
+
+    function proceedingTypeRadioOption(key: string, value: string) {
+      return (
+        <div className="usa-radio usa-radio__inline" key={key}>
+          <input
+            aria-describedby="proceeding-type-legend"
+            checked={proceedingType === value}
+            className="usa-radio__input"
+            id={`${key}-proceeding`}
+            name="proceedingType"
+            type="radio"
+            value={value}
+            onChange={e => {
+              updateFormValueSequence({
+                key: e.target.name,
+                root: ROOT,
+                value: e.target.value,
+              });
+            }}
+          />
+          <label
+            aria-label={value}
+            className="smaller-padding-right usa-radio__label"
+            data-testid={`${value}-proceeding-label`}
+            htmlFor={`${key}-proceeding`}
+            id={`${key}-proceeding-label`}
+          >
+            {value}
+          </label>
+        </div>
+      );
+    }
+
+    return (
+      <>
+        <div>
+          Information on this page is current as of{' '}
+          {publicTrialSessionsHelper.fetchedDateString}
+        </div>
+
+        <FormGroup>
+          <fieldset
+            className="usa-fieldset margin-top-2"
+            data-testid="trial-session-proceeding-type"
+          >
+            <legend className="usa-legend" id="proceeding-type-legend">
+              Proceeding type
+            </legend>
+            {PROCEEDING_TYPES.map(([key, value]) =>
+              proceedingTypeRadioOption(key, value),
+            )}
+          </fieldset>
+        </FormGroup>
+
+        <div className="tablet:grid-col grid-col-12">
+          <div className="grid-row">
+            <div className="tablet:grid-col-4 grid-col-12 padding-right-2">
+              <div className="margin-bottom-1">
+                <label
+                  className="usa-label"
+                  htmlFor="session-type-filter"
+                  id="session-type-filter-label"
+                >
+                  Session type{' '}
+                  <span className="optional-light-text">(optional)</span>
+                </label>
+                <SelectSearch
+                  aria-labelledby="session-type-filter-label"
+                  data-testid="trial-session-type-filter-search"
+                  inputId="session-type-filter"
+                  name="sessionType"
+                  options={publicTrialSessionsHelper.sessionTypeOptions}
+                  placeholder="- Select one or more -"
+                  value={{
+                    label: '- Select one or more -',
+                    value: '',
+                  }}
+                  onChange={sessionType => {
+                    if (sessionType) {
+                      updateFormValueSequence({
+                        key: `sessionTypes.${sessionType.value}`,
+                        root: ROOT,
+                        value: sessionType.label,
+                      });
+                    }
+                  }}
+                />
+              </div>
+              <div>
+                {Object.entries(
+                  sessionTypes as {
+                    [key: string]: string;
+                  },
+                ).map(([sessionTypeKey, sessionTypeLabel]) => (
+                  <PillButton
+                    key={sessionTypeLabel}
+                    text={sessionTypeLabel}
+                    onRemove={() => {
+                      updateFormValueSequence({
+                        key: `sessionTypes.${sessionTypeKey}`,
+                        root: ROOT,
+                        value: undefined,
+                      });
+                      console.log('sessionType', sessionTypeLabel);
+                    }}
+                  />
+                ))}
+              </div>
+            </div>
+            <div className="tablet:grid-col-4 grid-col-12 padding-right-2">
+              <div className="margin-bottom-1">
+                <label
+                  className="usa-label"
+                  htmlFor="session-type-filter"
+                  id="session-type-filter-label"
+                >
+                  Location{' '}
+                  <span className="optional-light-text">(optional)</span>
+                </label>
+                <SelectSearch
+                  aria-labelledby="location-filter-label"
+                  data-testid="trial-session-location-filter-search"
+                  inputId="location-filter"
+                  name="location"
+                  options={publicTrialSessionsHelper.trialCitiesByState}
+                  placeholder="- Select one or more -"
+                  value={{
+                    label: '- Select one or more -',
+                    value: '',
+                  }}
+                  onChange={location => {
+                    if (location) {
+                      updateFormValueSequence({
+                        key: `locations.${location.value}`,
+                        root: ROOT,
+                        value: location.label,
+                      });
+                    }
+                  }}
+                />
+              </div>
+              <div>
+                {Object.entries(
+                  locations as {
+                    [key: string]: string;
+                  },
+                ).map(([locationKey, locationLabel]) => (
+                  <PillButton
+                    key={locationLabel}
+                    text={locationLabel}
+                    onRemove={() => {
+                      updateFormValueSequence({
+                        key: `locations.${locationKey}`,
+                        root: ROOT,
+                        value: undefined,
+                      });
+                    }}
+                  />
+                ))}
+              </div>
+            </div>
+            <div className="tablet:grid-col-4 grid-col-12 padding-right-2">
+              <div className="margin-bottom-1">
+                <label
+                  className="usa-label"
+                  htmlFor="judges-filter"
+                  id="judges-filter-label"
+                >
+                  Judge <span className="optional-light-text">(optional)</span>
+                </label>
+                <SelectSearch
+                  aria-labelledby="judges-filter-label"
+                  data-testid="trial-session-judge-filter-search"
+                  inputId="judges-filter"
+                  name="judges"
+                  options={publicTrialSessionsHelper.trialSessionJudgeOptions}
+                  placeholder="- Select one or more -"
+                  value={{
+                    label: '- Select one or more -',
+                    value: { name: '', userId: '' },
+                  }}
+                  onChange={judgeInfo => {
+                    if (judgeInfo) {
+                      updateFormValueSequence({
+                        key: `judges.${judgeInfo.value.name}`,
+                        root: ROOT,
+                        value: judgeInfo.value.name,
+                      });
+                    }
+                  }}
+                />
+              </div>
+              <div>
+                {Object.entries(judges as { [key: string]: string }).map(
+                  ([judgeKey, judgeLabel]) => (
+                    <PillButton
+                      key={judgeKey}
+                      text={judgeLabel}
+                      onRemove={() => {
+                        updateFormValueSequence({
+                          key: `judges.${judgeKey}`,
+                          root: ROOT,
+                          value: undefined,
+                        });
+                      }}
+                    />
+                  ),
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  },
+);

From c3c234b03f185990645f9f24e962a1a13f0cb256 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Wed, 23 Oct 2024 11:54:13 -0600
Subject: [PATCH 09/79] 10460: Update default public state;

---
 web-client/src/presenter/state-public.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/web-client/src/presenter/state-public.ts b/web-client/src/presenter/state-public.ts
index 410bd92d4c7..e57e796b945 100644
--- a/web-client/src/presenter/state-public.ts
+++ b/web-client/src/presenter/state-public.ts
@@ -1,4 +1,5 @@
 import { PUBLIC_DOCKET_RECORD_FILTER_OPTIONS } from '../../../shared/src/business/entities/EntityConstants';
+import { RawUser } from '@shared/business/entities/User';
 import { advancedDocumentSearchHelper } from './computeds/AdvancedSearch/advancedDocumentSearchHelper';
 import { advancedSearchHelper } from './computeds/AdvancedSearch/advancedSearchHelper';
 import { caseSearchByNameHelper } from './computeds/AdvancedSearch/CaseSearchByNameHelper';
@@ -62,12 +63,14 @@ export const baseState = {
   },
   isPublic: true,
   isTerminalUser: false,
+  judges: [] as RawUser[],
   modal: {},
   progressIndicator: {
     // used for the spinner that shows when waiting for network responses
     waitingForResponse: false,
     waitingForResponseRequests: 0,
   },
+  publicTrialSessionData: {} as { [key: string]: any },
   sessionMetadata: {
     docketRecordFilter: PUBLIC_DOCKET_RECORD_FILTER_OPTIONS.allDocuments,
     docketRecordSort: {},

From 9792272d0495ffde38b92c597e72c7405d1c2bd1 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Wed, 23 Oct 2024 11:57:23 -0600
Subject: [PATCH 10/79] 10460: Fix ids;

---
 web-client/src/views/Public/PublicTrialSessionsFilters.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web-client/src/views/Public/PublicTrialSessionsFilters.tsx b/web-client/src/views/Public/PublicTrialSessionsFilters.tsx
index 83de00fbf23..4df58246286 100644
--- a/web-client/src/views/Public/PublicTrialSessionsFilters.tsx
+++ b/web-client/src/views/Public/PublicTrialSessionsFilters.tsx
@@ -145,8 +145,8 @@ export const PublicTrialSessionsFilters = connect(
               <div className="margin-bottom-1">
                 <label
                   className="usa-label"
-                  htmlFor="session-type-filter"
-                  id="session-type-filter-label"
+                  htmlFor="location-filter"
+                  id="location-filter-label"
                 >
                   Location{' '}
                   <span className="optional-light-text">(optional)</span>

From 91077f95b8205abee8a1eac1f0f923d9a3938056 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Wed, 23 Oct 2024 13:05:11 -0600
Subject: [PATCH 11/79] 10460: Added property to helper;

---
 .../Public/publicTrialSessionHelper.test.ts   | 90 +++++++++++++++++++
 .../Public/publicTrialSessionsHelper.ts       | 36 ++++++++
 2 files changed, 126 insertions(+)

diff --git a/web-client/src/presenter/computeds/Public/publicTrialSessionHelper.test.ts b/web-client/src/presenter/computeds/Public/publicTrialSessionHelper.test.ts
index 02d3152ec2b..03f6554f3b4 100644
--- a/web-client/src/presenter/computeds/Public/publicTrialSessionHelper.test.ts
+++ b/web-client/src/presenter/computeds/Public/publicTrialSessionHelper.test.ts
@@ -16,6 +16,7 @@ describe('publicTrialSessionsHelper', () => {
     const { fetchedDateString } = runCompute(publicTrialSessionsHelper, {
       state: {
         FetchedTrialSessions: TEST_TIME,
+        publicTrialSessionData: {},
       },
     });
 
@@ -26,6 +27,7 @@ describe('publicTrialSessionsHelper', () => {
     const { sessionTypeOptions } = runCompute(publicTrialSessionsHelper, {
       state: {
         FetchedTrialSessions: TEST_TIME,
+        publicTrialSessionData: {},
       },
     });
 
@@ -61,6 +63,7 @@ describe('publicTrialSessionsHelper', () => {
     const { trialCitiesByState } = runCompute(publicTrialSessionsHelper, {
       state: {
         FetchedTrialSessions: TEST_TIME,
+        publicTrialSessionData: {},
       },
     });
 
@@ -77,6 +80,7 @@ describe('publicTrialSessionsHelper', () => {
           { name: 'TEST_JUDGE_3', userId: '3' },
           { name: 'TEST_JUDGE_4', userId: '4' },
         ],
+        publicTrialSessionData: {},
       },
     });
 
@@ -111,4 +115,90 @@ describe('publicTrialSessionsHelper', () => {
       },
     ]);
   });
+
+  describe('filtersHaveBeenModified', () => {
+    it('should return "false" if there is no filters modified', () => {
+      const { filtersHaveBeenModified } = runCompute(
+        publicTrialSessionsHelper,
+        {
+          state: {
+            FetchedTrialSessions: TEST_TIME,
+            publicTrialSessionData: {},
+          },
+        },
+      );
+
+      expect(filtersHaveBeenModified).toEqual(false);
+    });
+
+    it('should return "true" when the "proceedingTypes" is not default', () => {
+      const { filtersHaveBeenModified } = runCompute(
+        publicTrialSessionsHelper,
+        {
+          state: {
+            FetchedTrialSessions: TEST_TIME,
+            publicTrialSessionData: {
+              proceedingType: 'SOME_OPTION',
+            },
+          },
+        },
+      );
+
+      expect(filtersHaveBeenModified).toEqual(true);
+    });
+
+    it('should return "true" when the "judges" is not default', () => {
+      const { filtersHaveBeenModified } = runCompute(
+        publicTrialSessionsHelper,
+        {
+          state: {
+            FetchedTrialSessions: TEST_TIME,
+            publicTrialSessionData: {
+              judges: {
+                TEST_JUDGE: 'TEST_JUDGE',
+              },
+            },
+          },
+        },
+      );
+
+      expect(filtersHaveBeenModified).toEqual(true);
+    });
+
+    it('should return "true" when the "locations" is not default', () => {
+      const { filtersHaveBeenModified } = runCompute(
+        publicTrialSessionsHelper,
+        {
+          state: {
+            FetchedTrialSessions: TEST_TIME,
+            publicTrialSessionData: {
+              locations: {
+                TEST_LOCATION: 'TEST_LOCATION',
+              },
+            },
+          },
+        },
+      );
+
+      expect(filtersHaveBeenModified).toEqual(true);
+    });
+
+    it('should return "true" when the "sessionTypes" is not default', () => {
+      const { filtersHaveBeenModified } = runCompute(
+        publicTrialSessionsHelper,
+        {
+          state: {
+            FetchedTrialSessions: TEST_TIME,
+            publicTrialSessionData: {
+              sessionTypes: {
+                TEST_SESSION_TYPE: 'TEST_SESSION_TYPE',
+              },
+            },
+          },
+        },
+      );
+
+      expect(filtersHaveBeenModified).toEqual(true);
+    });
+  });
 });
diff --git a/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts b/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
index 2b4ad5c3a06..2ac9359c249 100644
--- a/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
+++ b/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
@@ -20,13 +20,41 @@ export type PublicTrialSessionsHelperResults = {
       userId: string;
     };
   }[];
+  filtersHaveBeenModified: boolean;
 };
 
+function areAnyFiltersModified(
+  proceedingType: string,
+  judges: { [key: string]: string },
+  locations: { [key: string]: string },
+  sessionTypes: { [key: string]: string },
+): boolean {
+  const proceedingTypeModified = proceedingType !== 'All';
+  const judgesModified = Object.values(judges).filter(j => !!j).length;
+  const locationsModified = Object.values(locations).filter(l => !!l).length;
+  const sessionTypesModified = Object.values(sessionTypes).filter(
+    st => !!st,
+  ).length;
+
+  return (
+    !!proceedingTypeModified ||
+    !!judgesModified ||
+    !!locationsModified ||
+    !!sessionTypesModified
+  );
+}
+
 export const publicTrialSessionsHelper = (
   get: Get,
 ): PublicTrialSessionsHelperResults => {
   const fetchedTrialSessions = get(state['FetchedTrialSessions']);
   const trialSessionJudges = get(state.judges) || [];
+  const {
+    judges = {},
+    locations = {},
+    proceedingType = 'All',
+    sessionTypes = {},
+  } = get(state.publicTrialSessionData);
 
   const fetchedDateString = fetchedTrialSessions.toFormat(
     "MM/dd/yy hh:mm a 'Eastern'",
@@ -46,8 +74,16 @@ export const publicTrialSessionsHelper = (
     }),
   );
 
+  const filtersHaveBeenModified = areAnyFiltersModified(
+    proceedingType,
+    judges,
+    locations,
+    sessionTypes,
+  );
+
   return {
     fetchedDateString,
+    filtersHaveBeenModified,
     sessionTypeOptions,
     trialCitiesByState,
     trialSessionJudgeOptions,

From 24ddfcc04467c131cc1608e016143751807fd8fc Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Thu, 24 Oct 2024 08:28:33 -0600
Subject: [PATCH 12/79] 10460: WIP setup API endpoints for Public Trials
 Sessions; WIP UI;

---
 .../getPublicTrialSessionsProxy.ts            | 11 ++++
 .../users/getPublicUsersInSectionProxy.ts     | 12 ++++
 web-api/src/app-public.ts                     | 13 ++++
 .../getPublicTrialSessionsInteractor.ts       | 18 ++++++
 .../user/getUsersInSectionInteractor.ts       |  2 +-
 .../getPublicTrialSessionsLambda.ts           |  7 ++
 web-client/src/applicationContextPublic.ts    |  4 ++
 .../TrialSession/setTimeStampAction.ts        |  8 +++
 .../Public/publicTrialSessionsHelper.ts       | 24 +++++++
 .../computeds/trialSessionsHelper.ts          |  4 +-
 web-client/src/presenter/presenter-public.ts  |  2 +
 .../Public/gotoPublicTrialSessionsSequence.ts | 28 ++++++++
 web-client/src/presenter/state-public.ts      |  4 ++
 web-client/src/routerPublic.ts                |  5 ++
 .../src/views/Public/PublicTrialSessions.tsx  | 64 ++++++-------------
 15 files changed, 159 insertions(+), 47 deletions(-)
 create mode 100644 shared/src/proxies/trialSessions/getPublicTrialSessionsProxy.ts
 create mode 100644 shared/src/proxies/users/getPublicUsersInSectionProxy.ts
 create mode 100644 web-api/src/business/useCases/trialSessions/getPublicTrialSessionsInteractor.ts
 create mode 100644 web-api/src/lambdas/trialSessions/getPublicTrialSessionsLambda.ts
 create mode 100644 web-client/src/presenter/actions/TrialSession/setTimeStampAction.ts
 create mode 100644 web-client/src/presenter/sequences/Public/gotoPublicTrialSessionsSequence.ts

diff --git a/shared/src/proxies/trialSessions/getPublicTrialSessionsProxy.ts b/shared/src/proxies/trialSessions/getPublicTrialSessionsProxy.ts
new file mode 100644
index 00000000000..7ff64758ee4
--- /dev/null
+++ b/shared/src/proxies/trialSessions/getPublicTrialSessionsProxy.ts
@@ -0,0 +1,11 @@
+import { TrialSessionInfoDTO } from '@shared/business/dto/trialSessions/TrialSessionInfoDTO';
+import { get } from '@shared/proxies/requests';
+
+export const getPublicTrialSessionsInteractor = (
+  applicationContext,
+): Promise<TrialSessionInfoDTO[]> => {
+  return get({
+    applicationContext,
+    endpoint: '/public-api/trial-sessions',
+  });
+};
diff --git a/shared/src/proxies/users/getPublicUsersInSectionProxy.ts b/shared/src/proxies/users/getPublicUsersInSectionProxy.ts
new file mode 100644
index 00000000000..e82b5ff483d
--- /dev/null
+++ b/shared/src/proxies/users/getPublicUsersInSectionProxy.ts
@@ -0,0 +1,12 @@
+import { RawUser } from '@shared/business/entities/User';
+import { get } from '../requests';
+
+export const getPublicUsersInSectionInteractor = (
+  applicationContext,
+  { section }: { section: string },
+): Promise<RawUser[]> => {
+  return get({
+    applicationContext,
+    endpoint: `/public-api/sections/${section}/users`,
+  });
+};
diff --git a/web-api/src/app-public.ts b/web-api/src/app-public.ts
index ee9a13732a0..47710694db2 100644
--- a/web-api/src/app-public.ts
+++ b/web-api/src/app-public.ts
@@ -83,6 +83,8 @@ import { getPublicCaseExistsLambda } from './lambdas/public-api/getPublicCaseExi
 import { getPublicCaseLambda } from './lambdas/public-api/getPublicCaseLambda';
 import { getPublicDocumentDownloadUrlLambda } from './lambdas/public-api/getPublicDocumentDownloadUrlLambda';
 import { getPublicJudgesLambda } from './lambdas/public-api/getPublicJudgesLambda';
+import { getPublicTrialSessionsLambda } from '@web-api/lambdas/trialSessions/getPublicTrialSessionsLambda';
+import { getUsersInSectionLambda } from '@web-api/lambdas/users/getUsersInSectionLambda';
 import { ipLimiter } from './middleware/ipLimiter';
 import { opinionPublicSearchLambda } from './lambdas/public-api/opinionPublicSearchLambda';
 import { orderPublicSearchLambda } from './lambdas/public-api/orderPublicSearchLambda';
@@ -178,6 +180,17 @@ app.get('/public-api/judges', lambdaWrapper(getPublicJudgesLambda));
   );
 }
 
+{
+  app.get(
+    '/public-api/trial-sessions',
+    lambdaWrapper(getPublicTrialSessionsLambda),
+  );
+  app.get(
+    '/public-api/sections/:section/users',
+    lambdaWrapper(getUsersInSectionLambda),
+  );
+}
+
 /**
  * Feature flags
  */
diff --git a/web-api/src/business/useCases/trialSessions/getPublicTrialSessionsInteractor.ts b/web-api/src/business/useCases/trialSessions/getPublicTrialSessionsInteractor.ts
new file mode 100644
index 00000000000..6ead2b3a4a8
--- /dev/null
+++ b/web-api/src/business/useCases/trialSessions/getPublicTrialSessionsInteractor.ts
@@ -0,0 +1,18 @@
+import { ServerApplicationContext } from '@web-api/applicationContext';
+import { TrialSession } from '@shared/business/entities/trialSessions/TrialSession';
+import { TrialSessionInfoDTO } from '../../../../../shared/src/business/dto/trialSessions/TrialSessionInfoDTO';
+
+export const getPublicTrialSessionsInteractor = async (
+  applicationContext: ServerApplicationContext,
+): Promise<TrialSessionInfoDTO[]> => {
+  const trialSessions = await applicationContext
+    .getPersistenceGateway()
+    .getTrialSessions({
+      applicationContext,
+    });
+
+  return trialSessions
+    .map(t => new TrialSession(t).toRawObject())
+    .map(trialSession => new TrialSessionInfoDTO(trialSession))
+    .filter(trialSession => trialSession.sessionStatus === 'Open');
+};
diff --git a/web-api/src/business/useCases/user/getUsersInSectionInteractor.ts b/web-api/src/business/useCases/user/getUsersInSectionInteractor.ts
index bc3092a70f3..65c676b9ea8 100644
--- a/web-api/src/business/useCases/user/getUsersInSectionInteractor.ts
+++ b/web-api/src/business/useCases/user/getUsersInSectionInteractor.ts
@@ -23,7 +23,7 @@ export const getUsersInSectionInteractor = async (
     rolePermission = ROLE_PERMISSIONS.GET_USERS_IN_SECTION;
   }
 
-  if (!isAuthorized(authorizedUser, rolePermission)) {
+  if (!!authorizedUser && !isAuthorized(authorizedUser, rolePermission)) {
     throw new UnauthorizedError('Unauthorized');
   }
 
diff --git a/web-api/src/lambdas/trialSessions/getPublicTrialSessionsLambda.ts b/web-api/src/lambdas/trialSessions/getPublicTrialSessionsLambda.ts
new file mode 100644
index 00000000000..b925224510c
--- /dev/null
+++ b/web-api/src/lambdas/trialSessions/getPublicTrialSessionsLambda.ts
@@ -0,0 +1,7 @@
+import { genericHandler } from '@web-api/genericHandler';
+import { getPublicTrialSessionsInteractor } from '@web-api/business/useCases/trialSessions/getPublicTrialSessionsInteractor';
+
+export const getPublicTrialSessionsLambda = event =>
+  genericHandler(event, async ({ applicationContext }) => {
+    return await getPublicTrialSessionsInteractor(applicationContext);
+  });
diff --git a/web-client/src/applicationContextPublic.ts b/web-client/src/applicationContextPublic.ts
index aef367de660..6508131e9c7 100644
--- a/web-client/src/applicationContextPublic.ts
+++ b/web-client/src/applicationContextPublic.ts
@@ -72,6 +72,8 @@ import { getPublicCaseInteractor } from '../../shared/src/proxies/getPublicCaseP
 import { getPublicJudgesInteractor } from '../../shared/src/proxies/public/getPublicJudgesProxy';
 import { getPublicPractitionerByBarNumberInteractor } from '@shared/proxies/public/getPublicPractitionerByBarNumberProxy';
 import { getPublicPractitionersByNameInteractor } from '@shared/proxies/public/getPublicPractitionersByNameProxy';
+import { getPublicTrialSessionsInteractor } from '@shared/proxies/trialSessions/getPublicTrialSessionsProxy';
+import { getPublicUsersInSectionInteractor } from '@shared/proxies/users/getPublicUsersInSectionProxy';
 import { getSealedDocketEntryTooltip } from '../../shared/src/business/utilities/getSealedDocketEntryTooltip';
 import { getTodaysOpinionsInteractor } from '../../shared/src/proxies/public/getTodaysOpinionsProxy';
 import { getTodaysOrdersInteractor } from '../../shared/src/proxies/public/getTodaysOrdersProxy';
@@ -115,6 +117,8 @@ const allUseCases = {
   getPublicJudgesInteractor,
   getTodaysOpinionsInteractor,
   getTodaysOrdersInteractor,
+  getTrialSessionsInteractor: getPublicTrialSessionsInteractor,
+  getUsersInSectionInteractor: getPublicUsersInSectionInteractor,
   opinionPublicSearchInteractor,
   orderPublicSearchInteractor,
   removeItemInteractor,
diff --git a/web-client/src/presenter/actions/TrialSession/setTimeStampAction.ts b/web-client/src/presenter/actions/TrialSession/setTimeStampAction.ts
new file mode 100644
index 00000000000..bc1c9848e29
--- /dev/null
+++ b/web-client/src/presenter/actions/TrialSession/setTimeStampAction.ts
@@ -0,0 +1,8 @@
+import { DateTime } from 'luxon';
+import { state } from '@web-client/presenter/app.cerebral';
+
+export const setTimeStampAction =
+  ({ propertyName }: { propertyName: string }) =>
+  ({ store }: ActionProps) => {
+    store.set(state[propertyName], DateTime.now().setZone('America/New_York'));
+  };
diff --git a/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts b/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
index 2ac9359c249..9000a9a0592 100644
--- a/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
+++ b/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
@@ -1,5 +1,6 @@
 import { Get } from 'cerebral';
 import { SESSION_TYPES } from '@shared/business/entities/EntityConstants';
+import { formatTrialSessions } from '@web-client/presenter/computeds/trialSessionsHelper';
 import { getTrialCitiesGroupedByState } from '@shared/business/utilities/trialSession/trialCitiesGroupedByState';
 import { state } from '@web-client/presenter/app-public.cerebral';
 
@@ -56,6 +57,9 @@ export const publicTrialSessionsHelper = (
     sessionTypes = {},
   } = get(state.publicTrialSessionData);
 
+  const trialSessions = get(state.trialSessionsPage.trialSessions) || [];
+  console.log('sessionTypes', sessionTypes);
+
   const fetchedDateString = fetchedTrialSessions.toFormat(
     "MM/dd/yy hh:mm a 'Eastern'",
   );
@@ -81,6 +85,26 @@ export const publicTrialSessionsHelper = (
     sessionTypes,
   );
 
+  const filteredTrialSessions = trialSessions
+    .filter(
+      ts => proceedingType === 'All' || ts.proceedingType === proceedingType,
+    )
+    .filter(ts => !Object.entries(judges).length || judges[ts.judge?.name!])
+    .filter(
+      ts => !Object.entries(locations).length || locations[ts.trialLocation!],
+    )
+    .filter(
+      ts =>
+        !Object.entries(sessionTypes).length || sessionTypes[ts.sessionType!],
+    );
+
+  console.log(
+    'filteredTrialSessions',
+    formatTrialSessions({
+      trialSessions: filteredTrialSessions,
+    }),
+  );
+
   return {
     fetchedDateString,
     filtersHaveBeenModified,
diff --git a/web-client/src/presenter/computeds/trialSessionsHelper.ts b/web-client/src/presenter/computeds/trialSessionsHelper.ts
index 8703646701b..e73b2a1bc1c 100644
--- a/web-client/src/presenter/computeds/trialSessionsHelper.ts
+++ b/web-client/src/presenter/computeds/trialSessionsHelper.ts
@@ -121,6 +121,8 @@ export const trialSessionsHelper = (
     trialSessions: trialSessionPage,
   });
 
+  console.log('trialSessionRows', trialSessionRows);
+
   return {
     endDateErrorMessage,
     isResetFiltersDisabled: !userHasSelectedAFilter,
@@ -215,7 +217,7 @@ const filterAndSortTrialSessions = ({
     });
 };
 
-const formatTrialSessions = ({
+export const formatTrialSessions = ({
   judgeAssociatedToUser,
   trialSessions,
 }: {
diff --git a/web-client/src/presenter/presenter-public.ts b/web-client/src/presenter/presenter-public.ts
index 4f6527448ba..2a803bae338 100644
--- a/web-client/src/presenter/presenter-public.ts
+++ b/web-client/src/presenter/presenter-public.ts
@@ -18,6 +18,7 @@ import { gotoPublicCaseDetailSequence } from './sequences/Public/gotoPublicCaseD
 import { gotoPublicEmailVerificationInstructionsSequence } from './sequences/gotoPublicEmailVerificationInstructionsSequence';
 import { gotoPublicPrintableDocketRecordSequence } from './sequences/Public/gotoPublicPrintableDocketRecordSequence';
 import { gotoPublicSearchSequence } from './sequences/Public/gotoPublicSearchSequence';
+import { gotoPublicTrialSessionsSequence } from '@web-client/presenter/sequences/Public/gotoPublicTrialSessionsSequence';
 import { gotoTodaysOpinionsSequence } from './sequences/Public/gotoTodaysOpinionsSequence';
 import { gotoTodaysOrdersSequence } from './sequences/Public/gotoTodaysOrdersSequence';
 import { initialPublicState } from './state-public';
@@ -87,6 +88,7 @@ export const presenterSequences = {
   gotoPublicSearchSequence: showMaintenancePageDecorator(
     gotoPublicSearchSequence,
   ),
+  gotoPublicTrialSessionsSequence,
   gotoTodaysOpinionsSequence: showMaintenancePageDecorator(
     gotoTodaysOpinionsSequence,
   ),
diff --git a/web-client/src/presenter/sequences/Public/gotoPublicTrialSessionsSequence.ts b/web-client/src/presenter/sequences/Public/gotoPublicTrialSessionsSequence.ts
new file mode 100644
index 00000000000..72d9ed65ca0
--- /dev/null
+++ b/web-client/src/presenter/sequences/Public/gotoPublicTrialSessionsSequence.ts
@@ -0,0 +1,28 @@
+import { clearErrorAlertsAction } from '@web-client/presenter/actions/clearErrorAlertsAction';
+import { closeMobileMenuAction } from '@web-client/presenter/actions/closeMobileMenuAction';
+import { getTrialSessionsAction } from '@web-client/presenter/actions/TrialSession/getTrialSessionsAction';
+import { getUsersInSectionAction } from '@web-client/presenter/actions/getUsersInSectionAction';
+import { parallel } from 'cerebral';
+import { resetTrialSessionsFiltersAction } from '@web-client/presenter/actions/TrialSession/resetTrialSessionsFiltersAction';
+import { setAllAndCurrentJudgesAction } from '@web-client/presenter/actions/setAllAndCurrentJudgesAction';
+import { setTimeStampAction } from '@web-client/presenter/actions/TrialSession/setTimeStampAction';
+import { setTrialSessionsFiltersAction } from '@web-client/presenter/actions/TrialSession/setTrialSessionsFiltersAction';
+import { setTrialSessionsPageAction } from '@web-client/presenter/actions/TrialSession/setTrialSessionsPageAction';
+import { setupCurrentPageAction } from '@web-client/presenter/actions/setupCurrentPageAction';
+
+export const gotoPublicTrialSessionsSequence = [
+  setupCurrentPageAction('Interstitial'),
+  resetTrialSessionsFiltersAction,
+  closeMobileMenuAction,
+  clearErrorAlertsAction,
+  setTrialSessionsFiltersAction,
+  parallel([
+    [getTrialSessionsAction, setTrialSessionsPageAction],
+    [
+      getUsersInSectionAction({ section: 'judge' }),
+      setAllAndCurrentJudgesAction,
+    ],
+  ]),
+  setTimeStampAction({ propertyName: 'FetchedTrialSessions' }),
+  setupCurrentPageAction('PublicTrialSessions'),
+] as unknown as () => void;
diff --git a/web-client/src/presenter/state-public.ts b/web-client/src/presenter/state-public.ts
index e57e796b945..bbc245c3936 100644
--- a/web-client/src/presenter/state-public.ts
+++ b/web-client/src/presenter/state-public.ts
@@ -1,5 +1,6 @@
 import { PUBLIC_DOCKET_RECORD_FILTER_OPTIONS } from '../../../shared/src/business/entities/EntityConstants';
 import { RawUser } from '@shared/business/entities/User';
+import { TrialSessionInfoDTO } from '@shared/business/dto/trialSessions/TrialSessionInfoDTO';
 import { advancedDocumentSearchHelper } from './computeds/AdvancedSearch/advancedDocumentSearchHelper';
 import { advancedSearchHelper } from './computeds/AdvancedSearch/advancedSearchHelper';
 import { caseSearchByNameHelper } from './computeds/AdvancedSearch/CaseSearchByNameHelper';
@@ -82,6 +83,9 @@ export const baseState = {
     results: [],
     totalCount: 0,
   },
+  trialSessionsPage: { trialSessions: [] } as {
+    trialSessions: TrialSessionInfoDTO[];
+  },
   user: {},
   validationErrors: {},
 };
diff --git a/web-client/src/routerPublic.ts b/web-client/src/routerPublic.ts
index fc905dae6fc..aa33003be81 100644
--- a/web-client/src/routerPublic.ts
+++ b/web-client/src/routerPublic.ts
@@ -84,6 +84,11 @@ const router = {
       return app.getSequence('redirectToLoginSequence')();
     });
 
+    route('/trial-sessions', () => {
+      setPageTitle('Trial sessions');
+      return app.getSequence('gotoPublicTrialSessionsSequence')();
+    });
+
     route('..', () => {
       setPageTitle('Error');
       return app.getSequence('notFoundErrorSequence')({
diff --git a/web-client/src/views/Public/PublicTrialSessions.tsx b/web-client/src/views/Public/PublicTrialSessions.tsx
index 40bef00d953..d60cb22fab2 100644
--- a/web-client/src/views/Public/PublicTrialSessions.tsx
+++ b/web-client/src/views/Public/PublicTrialSessions.tsx
@@ -1,52 +1,26 @@
 import { BigHeader } from '@web-client/views/BigHeader';
-import { Button } from '@web-client/ustc-ui/Button/Button';
+import { PublicTrialSessionsFilters } from '@web-client/views/Public/PublicTrialSessionsFilters';
+import { PublicTrialSessionsRemoteProceedingsCard } from '@web-client/views/Public/PublicTrialSessionsRemoteProceedingsCard';
 import { connect } from '@web-client/presenter/shared.cerebral';
-import { state } from '@web-client/presenter/app-public.cerebral';
 import React from 'react';
 
-const props = {
-  publicTrialSessionsHelper: state.publicTrialSessionsHelper,
-};
-
-export const PublicTrialSessions = connect(
-  props,
-  function ({ publicTrialSessionsHelper }) {
-    return (
-      <>
-        <BigHeader text="Scheduled Trial Sessions" />
-        <section className="usa-section grid-container">
-          <div className="grid-row">
-            <div className="grid-col-8 padding-top-2">
-              <div className="grid-row">
-                <div>
-                  Information on this page is current as of{' '}
-                  {publicTrialSessionsHelper.fetchedDateString}
-                </div>
-              </div>
-            </div>
-            <div className="grid-col-4 padding-top-1 card">
-              <div className="card-header padding-left-2 padding-top-2 border-bottom-1px border-base-lighter">
-                <h2>Remote Proceedings</h2>
-              </div>
-              <div className="card-content">
-                <div className="padding-left-2 margin-bottom-2">
-                  <Button
-                    className="padding-bottom-0"
-                    link="https://www.ustaxcourt.gov/remote_proceedings.html"
-                  >
-                    Public Access to Remote Proceedings
-                  </Button>
-                  <Button link="https://www.ustaxcourt.gov/zoomgov.html">
-                    Zoomgov Proceedings Resources
-                  </Button>
-                </div>
-              </div>
-            </div>
+export const PublicTrialSessions = connect({}, function () {
+  return (
+    <>
+      <BigHeader text="Scheduled Trial Sessions" />
+      <section className="usa-section grid-container">
+        <div className="grid-row">
+          <div className="tablet:grid-col-8 grid-col-12 padding-top-2">
+            <PublicTrialSessionsFilters></PublicTrialSessionsFilters>
+          </div>
+          <div className="tablet:grid-col-4 grid-col-12 padding-top-1">
+            <PublicTrialSessionsRemoteProceedingsCard></PublicTrialSessionsRemoteProceedingsCard>
           </div>
-        </section>
-      </>
-    );
-  },
-);
+        </div>
+        <div className="grid-row bg-primary padding-top-1"></div>
+      </section>
+    </>
+  );
+});
 
 PublicTrialSessions.displayName = 'PublicTrialSessions';

From 2b002d672dfd5f7b6f9641e1967cb073a8efb490 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Thu, 24 Oct 2024 08:33:02 -0600
Subject: [PATCH 13/79] 10460: Moved components to own folder;

---
 web-client/src/views/AppComponentPublic.tsx                   | 2 +-
 .../views/Public/{ => TrialsSessions}/PublicTrialSessions.tsx | 4 ++--
 .../{ => TrialsSessions}/PublicTrialSessionsFilters.tsx       | 0
 .../PublicTrialSessionsRemoteProceedingsCard.tsx              | 0
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename web-client/src/views/Public/{ => TrialsSessions}/PublicTrialSessions.tsx (88%)
 rename web-client/src/views/Public/{ => TrialsSessions}/PublicTrialSessionsFilters.tsx (100%)
 rename web-client/src/views/Public/{ => TrialsSessions}/PublicTrialSessionsRemoteProceedingsCard.tsx (100%)

diff --git a/web-client/src/views/AppComponentPublic.tsx b/web-client/src/views/AppComponentPublic.tsx
index 912c487d823..2dfad41f3c5 100644
--- a/web-client/src/views/AppComponentPublic.tsx
+++ b/web-client/src/views/AppComponentPublic.tsx
@@ -11,7 +11,7 @@ import { Privacy } from './Privacy';
 import { PublicCaseDetail } from './Public/PublicCaseDetail';
 import { PublicPrintableDocketRecord } from './Public/PublicPrintableDocketRecord';
 import { PublicSearch } from './Public/PublicSearch';
-import { PublicTrialSessions } from '@web-client/views/Public/PublicTrialSessions';
+import { PublicTrialSessions } from '@web-client/views/Public/TrialsSessions/PublicTrialSessions';
 import { TodaysOpinions } from './Public/TodaysOpinions';
 import { TodaysOrders } from './Public/TodaysOrders';
 import { UsaBanner } from './UsaBanner';
diff --git a/web-client/src/views/Public/PublicTrialSessions.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
similarity index 88%
rename from web-client/src/views/Public/PublicTrialSessions.tsx
rename to web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
index d60cb22fab2..6d4e322cefd 100644
--- a/web-client/src/views/Public/PublicTrialSessions.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
@@ -1,6 +1,6 @@
 import { BigHeader } from '@web-client/views/BigHeader';
-import { PublicTrialSessionsFilters } from '@web-client/views/Public/PublicTrialSessionsFilters';
-import { PublicTrialSessionsRemoteProceedingsCard } from '@web-client/views/Public/PublicTrialSessionsRemoteProceedingsCard';
+import { PublicTrialSessionsFilters } from '@web-client/views/Public/TrialsSessions/PublicTrialSessionsFilters';
+import { PublicTrialSessionsRemoteProceedingsCard } from '@web-client/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard';
 import { connect } from '@web-client/presenter/shared.cerebral';
 import React from 'react';
 
diff --git a/web-client/src/views/Public/PublicTrialSessionsFilters.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
similarity index 100%
rename from web-client/src/views/Public/PublicTrialSessionsFilters.tsx
rename to web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
diff --git a/web-client/src/views/Public/PublicTrialSessionsRemoteProceedingsCard.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx
similarity index 100%
rename from web-client/src/views/Public/PublicTrialSessionsRemoteProceedingsCard.tsx
rename to web-client/src/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx

From c976c2237ccf09911d8c1ec3f57c0c4f433fb6e9 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Thu, 24 Oct 2024 10:31:10 -0600
Subject: [PATCH 14/79] 10460: Display trial sessions in table;

---
 .../Public/publicTrialSessionsHelper.ts       |  24 ++--
 .../computeds/trialSessionsHelper.ts          |   4 +-
 .../TrialsSessions/PublicTrialSessions.tsx    |   5 +-
 .../PublicTrialSessionsTable.tsx              | 113 ++++++++++++++++++
 4 files changed, 135 insertions(+), 11 deletions(-)
 create mode 100644 web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx

diff --git a/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts b/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
index 9000a9a0592..24012b837ec 100644
--- a/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
+++ b/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
@@ -1,6 +1,10 @@
 import { Get } from 'cerebral';
 import { SESSION_TYPES } from '@shared/business/entities/EntityConstants';
-import { formatTrialSessions } from '@web-client/presenter/computeds/trialSessionsHelper';
+import {
+  TrialSessionRow,
+  TrialSessionWeek,
+  formatTrialSessions,
+} from '@web-client/presenter/computeds/trialSessionsHelper';
 import { getTrialCitiesGroupedByState } from '@shared/business/utilities/trialSession/trialCitiesGroupedByState';
 import { state } from '@web-client/presenter/app-public.cerebral';
 
@@ -22,6 +26,8 @@ export type PublicTrialSessionsHelperResults = {
     };
   }[];
   filtersHaveBeenModified: boolean;
+  trialSessionsCount: number;
+  trialSessionRows: (TrialSessionRow | TrialSessionWeek)[];
 };
 
 function areAnyFiltersModified(
@@ -96,14 +102,14 @@ export const publicTrialSessionsHelper = (
     .filter(
       ts =>
         !Object.entries(sessionTypes).length || sessionTypes[ts.sessionType!],
-    );
+    )
+    .sort((sessionA, sessionB) => {
+      return sessionA.startDate.localeCompare(sessionB.startDate);
+    });
 
-  console.log(
-    'filteredTrialSessions',
-    formatTrialSessions({
-      trialSessions: filteredTrialSessions,
-    }),
-  );
+  const trialSessionRows = formatTrialSessions({
+    trialSessions: filteredTrialSessions,
+  });
 
   return {
     fetchedDateString,
@@ -111,5 +117,7 @@ export const publicTrialSessionsHelper = (
     sessionTypeOptions,
     trialCitiesByState,
     trialSessionJudgeOptions,
+    trialSessionRows,
+    trialSessionsCount: filteredTrialSessions.length,
   };
 };
diff --git a/web-client/src/presenter/computeds/trialSessionsHelper.ts b/web-client/src/presenter/computeds/trialSessionsHelper.ts
index e73b2a1bc1c..7265b506ddc 100644
--- a/web-client/src/presenter/computeds/trialSessionsHelper.ts
+++ b/web-client/src/presenter/computeds/trialSessionsHelper.ts
@@ -314,7 +314,7 @@ export const thirtyDaysBeforeTrial = (startDate?: string): string => {
   return formatDateString(thirtyDaysBeforeTrialIso, FORMATS.MMDDYY);
 };
 
-type TrialSessionRow = {
+export type TrialSessionRow = {
   trialSessionId: string;
   showAlertForNOTTReminder: boolean;
   alertMessageForNOTT: string;
@@ -334,7 +334,7 @@ export function isTrialSessionRow(item: any): item is TrialSessionRow {
   return !!item?.trialSessionId;
 }
 
-type TrialSessionWeek = {
+export type TrialSessionWeek = {
   sessionWeekStartDate: string;
   formattedSessionWeekStartDate: string;
 };
diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
index 6d4e322cefd..4c8c7f9e22c 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
@@ -1,6 +1,7 @@
 import { BigHeader } from '@web-client/views/BigHeader';
 import { PublicTrialSessionsFilters } from '@web-client/views/Public/TrialsSessions/PublicTrialSessionsFilters';
 import { PublicTrialSessionsRemoteProceedingsCard } from '@web-client/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard';
+import { PublicTrialSessionsTable } from '@web-client/views/Public/TrialsSessions/PublicTrialSessionsTable';
 import { connect } from '@web-client/presenter/shared.cerebral';
 import React from 'react';
 
@@ -17,7 +18,9 @@ export const PublicTrialSessions = connect({}, function () {
             <PublicTrialSessionsRemoteProceedingsCard></PublicTrialSessionsRemoteProceedingsCard>
           </div>
         </div>
-        <div className="grid-row bg-primary padding-top-1"></div>
+        <div className="grid-row padding-top-1">
+          <PublicTrialSessionsTable></PublicTrialSessionsTable>
+        </div>
       </section>
     </>
   );
diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
new file mode 100644
index 00000000000..edc0cf760d7
--- /dev/null
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
@@ -0,0 +1,113 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { connect } from '@web-client/presenter/shared.cerebral';
+import {
+  isTrialSessionRow,
+  isTrialSessionWeek,
+} from '@web-client/presenter/computeds/trialSessionsHelper';
+import { state } from '@web-client/presenter/app-public.cerebral';
+import React from 'react';
+
+const props = {
+  publicTrialSessionsHelper: state.publicTrialSessionsHelper,
+};
+
+export const PublicTrialSessionsTable = connect(
+  props,
+  function ({ publicTrialSessionsHelper }) {
+    return (
+      <>
+        <div className="grid-row margin-bottom-2 width-full flex-align-center"></div>
+        <div className="width-full text-right">
+          <span className="text-bold">Count:</span>{' '}
+          <span className="text-semibold">
+            {publicTrialSessionsHelper.trialSessionsCount}
+          </span>
+        </div>
+        <div className="padding-1"></div>
+        <table
+          aria-describedby="trial-sessions-filter-label locationFilter proceedingFilter sessionFilter judgeFilter"
+          className="usa-table ustc-table trial-sessions"
+        >
+          <thead>
+            <tr>
+              <th className="width-card">Start Date</th>
+              <th className="icon-column" />
+              <th className="width-mobile">Location</th>
+              <th className="width-card-lg">Proceeding Type</th>
+              <th className="width-card">Session Type</th>
+              <th className="width-card">Judge</th>
+            </tr>
+          </thead>
+          {publicTrialSessionsHelper.trialSessionRows.map(row => {
+            if (isTrialSessionWeek(row)) {
+              return (
+                <tbody key={row.formattedSessionWeekStartDate}>
+                  <tr className="trial-date">
+                    <td colSpan={100}>
+                      <h4 className="margin-bottom-0">
+                        {'Week of '}
+                        {row.formattedSessionWeekStartDate}
+                      </h4>
+                    </td>
+                  </tr>
+                </tbody>
+              );
+            }
+            if (isTrialSessionRow(row)) {
+              return (
+                <tbody key={row.trialSessionId}>
+                  <tr
+                    className="trial-sessions-row"
+                    data-testid={`trial-sessions-row-${row.trialSessionId}`}
+                  >
+                    <td>
+                      {row.showAlertForNOTTReminder && (
+                        <FontAwesomeIcon
+                          className="fa-icon-blue margin-right-05"
+                          icon="clock"
+                          size="sm"
+                          title={row.alertMessageForNOTT}
+                        />
+                      )}
+                      {row.formattedStartDate}
+                    </td>
+                    <td>
+                      {row.swingSession && (
+                        <FontAwesomeIcon
+                          className="fa-icon-blue"
+                          icon="link"
+                          size="sm"
+                          title="swing session"
+                        />
+                      )}
+                    </td>
+                    <td
+                      data-testid={`trial-location-link-${row.trialSessionId}`}
+                    >
+                      <a
+                        href={
+                          row.userIsAssignedToSession
+                            ? `/trial-session-working-copy/${row.trialSessionId}`
+                            : `/trial-session-detail/${row.trialSessionId}`
+                        }
+                      >
+                        {row.trialLocation}
+                      </a>
+                    </td>
+                    <td>{row.proceedingType}</td>
+                    <td>{row.sessionType}</td>
+                    <td>{row.judge.name}</td>
+                  </tr>
+                </tbody>
+              );
+            }
+          })}
+        </table>
+        {publicTrialSessionsHelper.trialSessionRows.length === 0 && (
+          <p>There are no trial sessions for the selected filters.</p>
+        )}
+        <div className="padding-1" />
+      </>
+    );
+  },
+);

From 396769699b22f2e2529d9d299f78533aad9df06f Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Thu, 24 Oct 2024 12:43:34 -0600
Subject: [PATCH 15/79] 10460: Added test around filtering;

---
 .../Public/publicTrialSessionHelper.test.ts   | 284 ++++++++++++++++++
 .../Public/publicTrialSessionsHelper.ts       |   1 -
 2 files changed, 284 insertions(+), 1 deletion(-)

diff --git a/web-client/src/presenter/computeds/Public/publicTrialSessionHelper.test.ts b/web-client/src/presenter/computeds/Public/publicTrialSessionHelper.test.ts
index 03f6554f3b4..e9b96d5cd5c 100644
--- a/web-client/src/presenter/computeds/Public/publicTrialSessionHelper.test.ts
+++ b/web-client/src/presenter/computeds/Public/publicTrialSessionHelper.test.ts
@@ -1,4 +1,5 @@
 import { DateTime } from 'luxon';
+import { TrialSessionInfoDTO } from '@shared/business/dto/trialSessions/TrialSessionInfoDTO';
 import { publicTrialSessionsHelper } from '@web-client/presenter/computeds/Public/publicTrialSessionsHelper';
 import { runCompute } from '@web-client/presenter/test.cerebral';
 
@@ -201,4 +202,287 @@ describe('publicTrialSessionsHelper', () => {
       expect(filtersHaveBeenModified).toEqual(true);
     });
   });
+
+  describe('trialSessionRows', () => {
+    function createTrialSessionObject(overrides: {
+      [key: string]: any;
+    }): TrialSessionInfoDTO {
+      return {
+        isCalendared: true,
+        judge: {
+          name: 'Ashford',
+          userId: 'dabbad01-18d0-43ec-bafb-654e83405416',
+        },
+        proceedingType: 'In Person',
+        sessionScope: 'Standalone Remote',
+        sessionStatus: 'Open',
+        sessionType: 'Regular',
+        startDate: '2020-11-25T05:00:00.000Z',
+        term: 'Fall',
+        termYear: '2020',
+        trialLocation: 'Birmingham, Alabama',
+        ...overrides,
+      };
+    }
+
+    it('should return all the trialSessions if there are no filter', () => {
+      const TEST_TRIAL_SESSIONS: TrialSessionInfoDTO[] = [
+        createTrialSessionObject({ proceedingType: 'Remote' }),
+        createTrialSessionObject({ sessionType: 'Small' }),
+        createTrialSessionObject({ trialLocation: 'Mobile, Alabama' }),
+        createTrialSessionObject({
+          judge: {
+            name: 'Buch',
+            userId: 'dabbad01-18d0-43ec-bafb-654e83405416',
+          },
+        }),
+      ];
+
+      const { trialSessionsCount } = runCompute(publicTrialSessionsHelper, {
+        state: {
+          FetchedTrialSessions: TEST_TIME,
+          publicTrialSessionData: {},
+          trialSessionsPage: {
+            trialSessions: TEST_TRIAL_SESSIONS,
+          },
+        },
+      });
+
+      expect(trialSessionsCount).toEqual(4);
+    });
+
+    it('should return all the trialSessions that meet the proceedingType filter', () => {
+      const TEST_PROCEEDING_TYPE = 'TEST_PROCEEDING_TYPE';
+      const TEST_TRIAL_SESSIONS: TrialSessionInfoDTO[] = [
+        createTrialSessionObject({ proceedingType: TEST_PROCEEDING_TYPE }),
+        createTrialSessionObject({ sessionType: 'Small' }),
+        createTrialSessionObject({ trialLocation: 'Mobile, Alabama' }),
+        createTrialSessionObject({
+          judge: {
+            name: 'Buch',
+            userId: 'dabbad01-18d0-43ec-bafb-654e83405416',
+          },
+        }),
+      ];
+
+      const { trialSessionRows, trialSessionsCount } = runCompute(
+        publicTrialSessionsHelper,
+        {
+          state: {
+            FetchedTrialSessions: TEST_TIME,
+            publicTrialSessionData: {
+              proceedingType: TEST_PROCEEDING_TYPE,
+            },
+            trialSessionsPage: {
+              trialSessions: TEST_TRIAL_SESSIONS,
+            },
+          },
+        },
+      );
+
+      expect(trialSessionsCount).toEqual(1);
+      expect(trialSessionRows).toEqual([
+        {
+          formattedSessionWeekStartDate: 'November 23, 2020',
+          sessionWeekStartDate: '2020-11-23T05:00:00.000+00:00',
+        },
+        {
+          alertMessageForNOTT: '',
+          formattedEstimatedEndDate: '',
+          formattedNoticeIssuedDate: '',
+          formattedStartDate: '11/25/20',
+          judge: {
+            name: 'Ashford',
+            userId: 'dabbad01-18d0-43ec-bafb-654e83405416',
+          },
+          proceedingType: 'TEST_PROCEEDING_TYPE',
+          sessionStatus: 'Open',
+          sessionType: 'Regular',
+          showAlertForNOTTReminder: false,
+          startDate: '2020-11-25T05:00:00.000Z',
+          swingSession: false,
+          trialLocation: 'Birmingham, Alabama',
+          trialSessionId: '',
+          userIsAssignedToSession: false,
+        },
+      ]);
+    });
+
+    it('should return all the trialSessions that meet the judge filter', () => {
+      const TEST_JUDGE_NAME = 'TEST_JUDGE_NAME';
+      const TEST_TRIAL_SESSIONS: TrialSessionInfoDTO[] = [
+        createTrialSessionObject({ proceedingType: 'Remote' }),
+        createTrialSessionObject({ sessionType: 'Small' }),
+        createTrialSessionObject({ trialLocation: 'Mobile, Alabama' }),
+        createTrialSessionObject({
+          judge: {
+            name: TEST_JUDGE_NAME,
+            userId: 'dabbad01-18d0-43ec-bafb-654e83405416',
+          },
+        }),
+      ];
+
+      const { trialSessionRows, trialSessionsCount } = runCompute(
+        publicTrialSessionsHelper,
+        {
+          state: {
+            FetchedTrialSessions: TEST_TIME,
+            publicTrialSessionData: {
+              judges: {
+                [TEST_JUDGE_NAME]: TEST_JUDGE_NAME,
+              },
+            },
+            trialSessionsPage: {
+              trialSessions: TEST_TRIAL_SESSIONS,
+            },
+          },
+        },
+      );
+
+      expect(trialSessionsCount).toEqual(1);
+      expect(trialSessionRows).toEqual([
+        {
+          formattedSessionWeekStartDate: 'November 23, 2020',
+          sessionWeekStartDate: '2020-11-23T05:00:00.000+00:00',
+        },
+        {
+          alertMessageForNOTT: '',
+          formattedEstimatedEndDate: '',
+          formattedNoticeIssuedDate: '',
+          formattedStartDate: '11/25/20',
+          judge: {
+            name: TEST_JUDGE_NAME,
+            userId: 'dabbad01-18d0-43ec-bafb-654e83405416',
+          },
+          proceedingType: 'In Person',
+          sessionStatus: 'Open',
+          sessionType: 'Regular',
+          showAlertForNOTTReminder: false,
+          startDate: '2020-11-25T05:00:00.000Z',
+          swingSession: false,
+          trialLocation: 'Birmingham, Alabama',
+          trialSessionId: '',
+          userIsAssignedToSession: false,
+        },
+      ]);
+    });
+
+    it('should return all the trialSessions that meet the location filter', () => {
+      const TEST_LOCATION = 'TEST_LOCATION';
+      const TEST_TRIAL_SESSIONS: TrialSessionInfoDTO[] = [
+        createTrialSessionObject({ proceedingType: 'Remote' }),
+        createTrialSessionObject({ sessionType: 'Small' }),
+        createTrialSessionObject({ trialLocation: TEST_LOCATION }),
+        createTrialSessionObject({
+          judge: {
+            name: 'Buch',
+            userId: 'dabbad01-18d0-43ec-bafb-654e83405416',
+          },
+        }),
+      ];
+
+      const { trialSessionRows, trialSessionsCount } = runCompute(
+        publicTrialSessionsHelper,
+        {
+          state: {
+            FetchedTrialSessions: TEST_TIME,
+            publicTrialSessionData: {
+              locations: {
+                [TEST_LOCATION]: TEST_LOCATION,
+              },
+            },
+            trialSessionsPage: {
+              trialSessions: TEST_TRIAL_SESSIONS,
+            },
+          },
+        },
+      );
+
+      expect(trialSessionsCount).toEqual(1);
+      expect(trialSessionRows).toEqual([
+        {
+          formattedSessionWeekStartDate: 'November 23, 2020',
+          sessionWeekStartDate: '2020-11-23T05:00:00.000+00:00',
+        },
+        {
+          alertMessageForNOTT: '',
+          formattedEstimatedEndDate: '',
+          formattedNoticeIssuedDate: '',
+          formattedStartDate: '11/25/20',
+          judge: {
+            name: 'Ashford',
+            userId: 'dabbad01-18d0-43ec-bafb-654e83405416',
+          },
+          proceedingType: 'In Person',
+          sessionStatus: 'Open',
+          sessionType: 'Regular',
+          showAlertForNOTTReminder: false,
+          startDate: '2020-11-25T05:00:00.000Z',
+          swingSession: false,
+          trialLocation: TEST_LOCATION,
+          trialSessionId: '',
+          userIsAssignedToSession: false,
+        },
+      ]);
+    });
+
+    it('should return all the trialSessions that meet the sessionType filter', () => {
+      const TEST_SESSION_TYPE = 'TEST_SESSION_TYPE';
+      const TEST_TRIAL_SESSIONS: TrialSessionInfoDTO[] = [
+        createTrialSessionObject({ proceedingType: 'Remote' }),
+        createTrialSessionObject({ sessionType: TEST_SESSION_TYPE }),
+        createTrialSessionObject({ trialLocation: 'Mobile, Alabama' }),
+        createTrialSessionObject({
+          judge: {
+            name: 'Buch',
+            userId: 'dabbad01-18d0-43ec-bafb-654e83405416',
+          },
+        }),
+      ];
+
+      const { trialSessionRows, trialSessionsCount } = runCompute(
+        publicTrialSessionsHelper,
+        {
+          state: {
+            FetchedTrialSessions: TEST_TIME,
+            publicTrialSessionData: {
+              sessionTypes: {
+                [TEST_SESSION_TYPE]: TEST_SESSION_TYPE,
+              },
+            },
+            trialSessionsPage: {
+              trialSessions: TEST_TRIAL_SESSIONS,
+            },
+          },
+        },
+      );
+
+      expect(trialSessionsCount).toEqual(1);
+      expect(trialSessionRows).toEqual([
+        {
+          formattedSessionWeekStartDate: 'November 23, 2020',
+          sessionWeekStartDate: '2020-11-23T05:00:00.000+00:00',
+        },
+        {
+          alertMessageForNOTT: '',
+          formattedEstimatedEndDate: '',
+          formattedNoticeIssuedDate: '',
+          formattedStartDate: '11/25/20',
+          judge: {
+            name: 'Ashford',
+            userId: 'dabbad01-18d0-43ec-bafb-654e83405416',
+          },
+          proceedingType: 'In Person',
+          sessionStatus: 'Open',
+          sessionType: TEST_SESSION_TYPE,
+          showAlertForNOTTReminder: false,
+          startDate: '2020-11-25T05:00:00.000Z',
+          swingSession: false,
+          trialLocation: 'Birmingham, Alabama',
+          trialSessionId: '',
+          userIsAssignedToSession: false,
+        },
+      ]);
+    });
+  });
 });
diff --git a/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts b/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
index 24012b837ec..b074de2e0df 100644
--- a/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
+++ b/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
@@ -64,7 +64,6 @@ export const publicTrialSessionsHelper = (
   } = get(state.publicTrialSessionData);
 
   const trialSessions = get(state.trialSessionsPage.trialSessions) || [];
-  console.log('sessionTypes', sessionTypes);
 
   const fetchedDateString = fetchedTrialSessions.toFormat(
     "MM/dd/yy hh:mm a 'Eastern'",

From 74046a73c89e4c159034298c39fc53b03471e82c Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Thu, 24 Oct 2024 14:48:19 -0600
Subject: [PATCH 16/79] 10460: Added Reset Filters button;

---
 .../resetPublicTrialSessionDataAction.ts      |  5 ++
 web-client/src/presenter/presenter-public.ts  |  2 +
 .../resetPublicTrialSessionDataSequence.ts    |  5 ++
 .../TrialsSessions/PublicTrialSessions.tsx    | 57 +++++++++++++------
 4 files changed, 51 insertions(+), 18 deletions(-)
 create mode 100644 web-client/src/presenter/actions/resetPublicTrialSessionDataAction.ts
 create mode 100644 web-client/src/presenter/sequences/resetPublicTrialSessionDataSequence.ts

diff --git a/web-client/src/presenter/actions/resetPublicTrialSessionDataAction.ts b/web-client/src/presenter/actions/resetPublicTrialSessionDataAction.ts
new file mode 100644
index 00000000000..f3282342c1d
--- /dev/null
+++ b/web-client/src/presenter/actions/resetPublicTrialSessionDataAction.ts
@@ -0,0 +1,5 @@
+import { state } from '@web-client/presenter/app-public.cerebral';
+
+export const resetPublicTrialSessionDataAction = ({ store }: ActionProps) => {
+  store.set(state.publicTrialSessionData, {});
+};
diff --git a/web-client/src/presenter/presenter-public.ts b/web-client/src/presenter/presenter-public.ts
index 2a803bae338..1100f1e7966 100644
--- a/web-client/src/presenter/presenter-public.ts
+++ b/web-client/src/presenter/presenter-public.ts
@@ -34,6 +34,7 @@ import { persistFormsOnReloadSequence } from './sequences/persistFormsOnReloadSe
 import { redirectToCreatePetitionerAccountSequence } from '@web-client/presenter/sequences/redirectToCreatePetitionerAccountSequence';
 import { redirectToDashboardSequence } from '@web-client/presenter/sequences/redirectToDashboardSequence';
 import { redirectToLoginSequence } from '@web-client/presenter/sequences/Public/redirectToLoginSequence';
+import { resetPublicTrialSessionDataSequence } from '@web-client/presenter/sequences/resetPublicTrialSessionDataSequence';
 import { setCurrentPageErrorSequence } from './sequences/setCurrentPageErrorSequence';
 import { showMaintenancePageDecorator } from './utilities/showMaintenancePageDecorator';
 import { showMoreResultsSequence } from './sequences/showMoreResultsSequence';
@@ -107,6 +108,7 @@ export const presenterSequences = {
   redirectToCreatePetitionerAccountSequence,
   redirectToDashboardSequence,
   redirectToLoginSequence,
+  resetPublicTrialSessionDataSequence,
   showMoreResultsSequence,
   sortTodaysOrdersSequence,
   submitLoginSequence,
diff --git a/web-client/src/presenter/sequences/resetPublicTrialSessionDataSequence.ts b/web-client/src/presenter/sequences/resetPublicTrialSessionDataSequence.ts
new file mode 100644
index 00000000000..d0dd4f666ca
--- /dev/null
+++ b/web-client/src/presenter/sequences/resetPublicTrialSessionDataSequence.ts
@@ -0,0 +1,5 @@
+import { resetPublicTrialSessionDataAction } from '@web-client/presenter/actions/resetPublicTrialSessionDataAction';
+
+export const resetPublicTrialSessionDataSequence = [
+  resetPublicTrialSessionDataAction,
+] as unknown as () => void;
diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
index 4c8c7f9e22c..fe5798fdd5d 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
@@ -1,29 +1,50 @@
 import { BigHeader } from '@web-client/views/BigHeader';
+import { Button } from '@web-client/ustc-ui/Button/Button';
 import { PublicTrialSessionsFilters } from '@web-client/views/Public/TrialsSessions/PublicTrialSessionsFilters';
 import { PublicTrialSessionsRemoteProceedingsCard } from '@web-client/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard';
 import { PublicTrialSessionsTable } from '@web-client/views/Public/TrialsSessions/PublicTrialSessionsTable';
 import { connect } from '@web-client/presenter/shared.cerebral';
+import { sequences, state } from '@web-client/presenter/app-public.cerebral';
 import React from 'react';
 
-export const PublicTrialSessions = connect({}, function () {
-  return (
-    <>
-      <BigHeader text="Scheduled Trial Sessions" />
-      <section className="usa-section grid-container">
-        <div className="grid-row">
-          <div className="tablet:grid-col-8 grid-col-12 padding-top-2">
-            <PublicTrialSessionsFilters></PublicTrialSessionsFilters>
+export const PublicTrialSessions = connect(
+  {
+    publicTrialSessionsHelper: state.publicTrialSessionsHelper,
+    resetPublicTrialSessionDataSequence:
+      sequences.resetPublicTrialSessionDataSequence,
+  },
+  function ({
+    publicTrialSessionsHelper,
+    resetPublicTrialSessionDataSequence,
+  }) {
+    return (
+      <>
+        <BigHeader text="Scheduled Trial Sessions" />
+        <section className="usa-section grid-container">
+          <div className="grid-row">
+            <div className="tablet:grid-col-8 grid-col-12 padding-top-2">
+              <PublicTrialSessionsFilters></PublicTrialSessionsFilters>
+            </div>
+            <div className="tablet:grid-col-4 grid-col-12 padding-top-1">
+              <PublicTrialSessionsRemoteProceedingsCard></PublicTrialSessionsRemoteProceedingsCard>
+            </div>
           </div>
-          <div className="tablet:grid-col-4 grid-col-12 padding-top-1">
-            <PublicTrialSessionsRemoteProceedingsCard></PublicTrialSessionsRemoteProceedingsCard>
+          <div className="grid-row">
+            <Button
+              link
+              disabled={!publicTrialSessionsHelper.filtersHaveBeenModified}
+              onClick={() => resetPublicTrialSessionDataSequence()}
+            >
+              Reset Filters
+            </Button>
           </div>
-        </div>
-        <div className="grid-row padding-top-1">
-          <PublicTrialSessionsTable></PublicTrialSessionsTable>
-        </div>
-      </section>
-    </>
-  );
-});
+          <div className="grid-row padding-top-1">
+            <PublicTrialSessionsTable></PublicTrialSessionsTable>
+          </div>
+        </section>
+      </>
+    );
+  },
+);
 
 PublicTrialSessions.displayName = 'PublicTrialSessions';

From 6fb7d0ccbf02eec16511e1aee4ea15abf30926d4 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Thu, 24 Oct 2024 14:52:08 -0600
Subject: [PATCH 17/79] 10460: Fix links;

---
 .../PublicTrialSessionsRemoteProceedingsCard.tsx          | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx
index c496c75ec6d..3925b922b52 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx
@@ -14,14 +14,18 @@ export const PublicTrialSessionsRemoteProceedingsCard = connect(
           <div className="card-content ">
             <div className="padding-left-2 margin-bottom-9">
               <Button
+                link
                 className="padding-bottom-0 text-left"
-                link="https://www.ustaxcourt.gov/remote_proceedings.html"
+                href="https://www.ustaxcourt.gov/remote_proceedings.html"
+                target="_blank"
               >
                 Public Access to Remote Proceedings
               </Button>
               <Button
+                link
                 className="text-left"
-                link="https://www.ustaxcourt.gov/zoomgov.html"
+                href="https://www.ustaxcourt.gov/zoomgov.html"
+                target="_blank"
               >
                 Zoomgov Proceedings Resources
               </Button>

From c7ee41e09abb73e444187fff93e03190777040a2 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Thu, 24 Oct 2024 15:28:50 -0600
Subject: [PATCH 18/79] 10460: Fix Icons and delete console.log;

---
 web-client/src/appPublic.tsx                                   | 3 +++
 .../views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx | 1 -
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/web-client/src/appPublic.tsx b/web-client/src/appPublic.tsx
index 2abd1ae7174..ff7265f601b 100644
--- a/web-client/src/appPublic.tsx
+++ b/web-client/src/appPublic.tsx
@@ -37,8 +37,10 @@ import { faArrowAltCircleLeft as faArrowAltCircleLeftRegular } from '@fortawesom
 import { faExclamation } from '@fortawesome/free-solid-svg-icons/faExclamation';
 import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons/faExclamationCircle';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons/faExclamationTriangle';
+import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
 import { faTimesCircle as faTimesCircleRegular } from '@fortawesome/free-regular-svg-icons/faTimesCircle';
 import { faUser } from '@fortawesome/free-regular-svg-icons/faUser';
+
 import { isFunction, mapValues } from 'lodash';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { presenter } from './presenter/presenter-public';
@@ -66,6 +68,7 @@ const appPublic = {
       faFileAltSolid,
       faLock,
       faLongArrowAltUp,
+      faTimes,
       faPrint,
       faFilePdf,
       faSearch,
diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
index 4df58246286..a569e0f60e1 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
@@ -135,7 +135,6 @@ export const PublicTrialSessionsFilters = connect(
                         root: ROOT,
                         value: undefined,
                       });
-                      console.log('sessionType', sessionTypeLabel);
                     }}
                   />
                 ))}

From 41bc24e75dfda62b1b16888f10412532b144b9b9 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Fri, 25 Oct 2024 08:22:03 -0600
Subject: [PATCH 19/79] 10460: Fix Link Icon;

---
 web-client/src/appPublic.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web-client/src/appPublic.tsx b/web-client/src/appPublic.tsx
index ff7265f601b..fac0c591bad 100644
--- a/web-client/src/appPublic.tsx
+++ b/web-client/src/appPublic.tsx
@@ -37,10 +37,10 @@ import { faArrowAltCircleLeft as faArrowAltCircleLeftRegular } from '@fortawesom
 import { faExclamation } from '@fortawesome/free-solid-svg-icons/faExclamation';
 import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons/faExclamationCircle';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons/faExclamationTriangle';
+import { faLink } from '@fortawesome/free-solid-svg-icons/faLink';
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
 import { faTimesCircle as faTimesCircleRegular } from '@fortawesome/free-regular-svg-icons/faTimesCircle';
 import { faUser } from '@fortawesome/free-regular-svg-icons/faUser';
-
 import { isFunction, mapValues } from 'lodash';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { presenter } from './presenter/presenter-public';
@@ -68,6 +68,7 @@ const appPublic = {
       faFileAltSolid,
       faLock,
       faLongArrowAltUp,
+      faLink,
       faTimes,
       faPrint,
       faFilePdf,

From 191dc5eb159060d43b5a42a203baa7740992fdb8 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Fri, 25 Oct 2024 10:24:17 -0600
Subject: [PATCH 20/79] 10460: Create sequence to display progress spinner;

---
 web-client/src/presenter/presenter-public.ts              | 2 ++
 web-client/src/presenter/presenter.ts                     | 2 ++
 .../presenter/sequences/displayProgressSpinnerSequence.ts | 8 ++++++++
 3 files changed, 12 insertions(+)
 create mode 100644 web-client/src/presenter/sequences/displayProgressSpinnerSequence.ts

diff --git a/web-client/src/presenter/presenter-public.ts b/web-client/src/presenter/presenter-public.ts
index 1100f1e7966..beba89178d1 100644
--- a/web-client/src/presenter/presenter-public.ts
+++ b/web-client/src/presenter/presenter-public.ts
@@ -9,6 +9,7 @@ import { clearPdfPreviewUrlSequence } from './sequences/clearPdfPreviewUrlSequen
 import { closeModalAndNavigateToMaintenanceSequence } from './sequences/closeModalAndNavigateToMaintenanceSequence';
 import { confirmSignUpSequence } from '@web-client/presenter/sequences/Login/confirmSignUpSequence';
 import { dismissModalSequence } from './sequences/dismissModalSequence';
+import { displayProgressSpinnerSequence } from '@web-client/presenter/sequences/displayProgressSpinnerSequence';
 import { goToCreatePetitionerAccountSequence } from '@web-client/presenter/sequences/Public/goToCreatePetitionerAccountSequence';
 import { gotoContactSequence } from './sequences/gotoContactSequence';
 import { gotoHealthCheckSequence } from './sequences/gotoHealthCheckSequence';
@@ -72,6 +73,7 @@ export const presenterSequences = {
   closeModalAndNavigateToMaintenanceSequence,
   confirmSignUpSequence,
   dismissModalSequence,
+  displayProgressSpinnerSequence,
   goToCreatePetitionerAccountSequence,
   gotoContactSequence: showMaintenancePageDecorator(gotoContactSequence),
   gotoHealthCheckSequence: showMaintenancePageDecorator(
diff --git a/web-client/src/presenter/presenter.ts b/web-client/src/presenter/presenter.ts
index 6eb37a0226a..6babbca30f1 100644
--- a/web-client/src/presenter/presenter.ts
+++ b/web-client/src/presenter/presenter.ts
@@ -113,6 +113,7 @@ import { dismissAddEditCaseWorksheetModalSequence } from '@web-client/presenter/
 import { dismissAlertSequence } from './sequences/dismissAlertSequence';
 import { dismissModalSequence } from './sequences/dismissModalSequence';
 import { dismissThirtyDayTrialAlertSequence } from './sequences/dismissThirtyDayTrialAlertSequence';
+import { displayProgressSpinnerSequence } from '@web-client/presenter/sequences/displayProgressSpinnerSequence';
 import { downloadCsvFileSequence } from '@web-client/presenter/sequences/downloadCsvFileSequence';
 import { editCorrespondenceDocumentSequence } from './sequences/editCorrespondenceDocumentSequence';
 import { editUnsignedDraftDocumentSequence } from '@web-client/presenter/sequences/editUnsignedDraftDocumentSequence';
@@ -781,6 +782,7 @@ export const presenterSequences = {
   dismissModalSequence: dismissModalSequence as unknown as Function,
   dismissThirtyDayTrialAlertSequence:
     dismissThirtyDayTrialAlertSequence as unknown as Function,
+  displayProgressSpinnerSequence,
   downloadCsvFileSequence: downloadCsvFileSequence as unknown as Function,
   editCorrespondenceDocumentSequence:
     editCorrespondenceDocumentSequence as unknown as Function,
diff --git a/web-client/src/presenter/sequences/displayProgressSpinnerSequence.ts b/web-client/src/presenter/sequences/displayProgressSpinnerSequence.ts
new file mode 100644
index 00000000000..48a1f0fe4af
--- /dev/null
+++ b/web-client/src/presenter/sequences/displayProgressSpinnerSequence.ts
@@ -0,0 +1,8 @@
+import { showProgressSequenceDecorator } from '@web-client/presenter/utilities/showProgressSequenceDecorator';
+
+export const displayProgressSpinnerSequence = showProgressSequenceDecorator([
+  async ({ props }: ActionProps<{ timeInSeconds: number }>) =>
+    await new Promise(resolve =>
+      setTimeout(() => resolve(null), props.timeInSeconds * 1000),
+    ),
+]) as unknown as (props: { timeInSeconds: number }) => void;

From cf4e53704a87f1607241609634cfabcdea7bc5de Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Fri, 25 Oct 2024 10:25:19 -0600
Subject: [PATCH 21/79] 10460: Fix typing on sequence;

---
 web-client/src/presenter/sequences/updateFormValueSequence.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-client/src/presenter/sequences/updateFormValueSequence.ts b/web-client/src/presenter/sequences/updateFormValueSequence.ts
index 64c5aff587f..1a932854a4b 100644
--- a/web-client/src/presenter/sequences/updateFormValueSequence.ts
+++ b/web-client/src/presenter/sequences/updateFormValueSequence.ts
@@ -3,7 +3,7 @@ import { setFormValueAction } from '../actions/setFormValueAction';
 export const updateFormValueSequence = [
   setFormValueAction,
 ] as unknown as (props: {
-  index: number;
+  index?: number;
   root?: string;
   key: string;
   value: any;

From b07cb7901ce84c375a7535de301c0cdba1d6bee7 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Fri, 25 Oct 2024 10:26:06 -0600
Subject: [PATCH 22/79] 10460: Type state for public trial session;

---
 web-client/src/presenter/state-public.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/web-client/src/presenter/state-public.ts b/web-client/src/presenter/state-public.ts
index bbc245c3936..8f3dfe207a9 100644
--- a/web-client/src/presenter/state-public.ts
+++ b/web-client/src/presenter/state-public.ts
@@ -71,7 +71,13 @@ export const baseState = {
     waitingForResponse: false,
     waitingForResponseRequests: 0,
   },
-  publicTrialSessionData: {} as { [key: string]: any },
+  publicTrialSessionData: {} as {
+    judges?: { [key: string]: string };
+    locations?: { [key: string]: string };
+    sessionTypes?: { [key: string]: string };
+    pageNumber?: number;
+    proceedingType?: string;
+  },
   sessionMetadata: {
     docketRecordFilter: PUBLIC_DOCKET_RECORD_FILTER_OPTIONS.allDocuments,
     docketRecordSort: {},

From 35d36cd6c2af24e913415d4678562ef8f145a06e Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Fri, 25 Oct 2024 10:27:41 -0600
Subject: [PATCH 23/79] 10460: Implement pagination in the trial session
 helper;

---
 .../computeds/Public/publicTrialSessionsHelper.ts | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts b/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
index b074de2e0df..b875b635b0e 100644
--- a/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
+++ b/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
@@ -26,6 +26,7 @@ export type PublicTrialSessionsHelperResults = {
     };
   }[];
   filtersHaveBeenModified: boolean;
+  totalPages: number;
   trialSessionsCount: number;
   trialSessionRows: (TrialSessionRow | TrialSessionWeek)[];
 };
@@ -51,6 +52,8 @@ function areAnyFiltersModified(
   );
 }
 
+const PAGE_SIZE = 100;
+
 export const publicTrialSessionsHelper = (
   get: Get,
 ): PublicTrialSessionsHelperResults => {
@@ -59,12 +62,12 @@ export const publicTrialSessionsHelper = (
   const {
     judges = {},
     locations = {},
+    pageNumber = 0,
     proceedingType = 'All',
     sessionTypes = {},
   } = get(state.publicTrialSessionData);
 
   const trialSessions = get(state.trialSessionsPage.trialSessions) || [];
-
   const fetchedDateString = fetchedTrialSessions.toFormat(
     "MM/dd/yy hh:mm a 'Eastern'",
   );
@@ -106,17 +109,23 @@ export const publicTrialSessionsHelper = (
       return sessionA.startDate.localeCompare(sessionB.startDate);
     });
 
+  const paginatedTrialSessions = filteredTrialSessions.slice(
+    pageNumber * PAGE_SIZE,
+    pageNumber * PAGE_SIZE + PAGE_SIZE,
+  );
+
   const trialSessionRows = formatTrialSessions({
-    trialSessions: filteredTrialSessions,
+    trialSessions: paginatedTrialSessions,
   });
 
   return {
     fetchedDateString,
     filtersHaveBeenModified,
     sessionTypeOptions,
+    totalPages: Math.ceil(filteredTrialSessions.length / PAGE_SIZE),
     trialCitiesByState,
     trialSessionJudgeOptions,
     trialSessionRows,
-    trialSessionsCount: filteredTrialSessions.length,
+    trialSessionsCount: paginatedTrialSessions.length,
   };
 };

From b7ec0cce77a27342387dccef8dd7af6cdb46d5aa Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Fri, 25 Oct 2024 10:30:16 -0600
Subject: [PATCH 24/79] 10460: Pass root value from parent component; Reset
 page number any time a filter is modified; Added pagination to table;

---
 .../TrialsSessions/PublicTrialSessions.tsx    | 14 ++++-
 .../PublicTrialSessionsFilters.tsx            | 51 ++++++++++++++-----
 .../PublicTrialSessionsTable.tsx              | 43 ++++++++++++++--
 3 files changed, 87 insertions(+), 21 deletions(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
index fe5798fdd5d..9e2b619ca82 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
@@ -7,13 +7,17 @@ import { connect } from '@web-client/presenter/shared.cerebral';
 import { sequences, state } from '@web-client/presenter/app-public.cerebral';
 import React from 'react';
 
+const ROOT = 'publicTrialSessionData';
+
 export const PublicTrialSessions = connect(
   {
+    publicTrialSessionData: state[ROOT],
     publicTrialSessionsHelper: state.publicTrialSessionsHelper,
     resetPublicTrialSessionDataSequence:
       sequences.resetPublicTrialSessionDataSequence,
   },
   function ({
+    publicTrialSessionData,
     publicTrialSessionsHelper,
     resetPublicTrialSessionDataSequence,
   }) {
@@ -23,7 +27,9 @@ export const PublicTrialSessions = connect(
         <section className="usa-section grid-container">
           <div className="grid-row">
             <div className="tablet:grid-col-8 grid-col-12 padding-top-2">
-              <PublicTrialSessionsFilters></PublicTrialSessionsFilters>
+              <PublicTrialSessionsFilters
+                ROOT={ROOT}
+              ></PublicTrialSessionsFilters>
             </div>
             <div className="tablet:grid-col-4 grid-col-12 padding-top-1">
               <PublicTrialSessionsRemoteProceedingsCard></PublicTrialSessionsRemoteProceedingsCard>
@@ -39,7 +45,11 @@ export const PublicTrialSessions = connect(
             </Button>
           </div>
           <div className="grid-row padding-top-1">
-            <PublicTrialSessionsTable></PublicTrialSessionsTable>
+            <PublicTrialSessionsTable
+              ROOT={ROOT}
+              pageNumber={publicTrialSessionData.pageNumber || 0}
+              totalPages={publicTrialSessionsHelper.totalPages}
+            ></PublicTrialSessionsTable>
           </div>
         </section>
       </>
diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
index a569e0f60e1..74e1c8331b8 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
@@ -2,23 +2,34 @@ import { FormGroup } from '@web-client/ustc-ui/FormGroup/FormGroup';
 import { PillButton } from '@web-client/ustc-ui/Button/PillButton';
 import { SelectSearch } from '@web-client/ustc-ui/Select/SelectSearch';
 import { TRIAL_SESSION_PROCEEDING_TYPES } from '@shared/business/entities/EntityConstants';
+import { props as cerebralProps } from 'cerebral';
 import { connect } from '@web-client/presenter/shared.cerebral';
-import { sequences } from '@web-client/presenter/app.cerebral';
-import { state } from '@web-client/presenter/app-public.cerebral';
+import { sequences, state } from '@web-client/presenter/app-public.cerebral';
 import React from 'react';
 
-const ROOT = 'publicTrialSessionData';
-const props = {
-  publicTrialSessionData: state[ROOT],
+type PublicTrialSessionsFiltersProps = {
+  ROOT: string;
+};
+
+const props = cerebralProps as unknown as PublicTrialSessionsFiltersProps;
+
+const PublicTrialSessionsFiltersDeps = {
+  displayProgressSpinnerSequence: sequences.displayProgressSpinnerSequence,
+  publicTrialSessionData: state[props.ROOT],
   publicTrialSessionsHelper: state.publicTrialSessionsHelper,
   updateFormValueSequence: sequences.updateFormValueSequence,
 };
 
-export const PublicTrialSessionsFilters = connect(
-  props,
+export const PublicTrialSessionsFilters = connect<
+  PublicTrialSessionsFiltersProps,
+  typeof PublicTrialSessionsFiltersDeps
+>(
+  PublicTrialSessionsFiltersDeps,
   function ({
+    displayProgressSpinnerSequence,
     publicTrialSessionData,
     publicTrialSessionsHelper,
+    ROOT,
     updateFormValueSequence,
   }) {
     const PROCEEDING_TYPES = Object.entries({
@@ -33,6 +44,18 @@ export const PublicTrialSessionsFilters = connect(
       sessionTypes = {},
     } = publicTrialSessionData;
 
+    const publicTrialsSessionUpdateFormValueSequence = (
+      ...args: Parameters<typeof updateFormValueSequence>
+    ) => {
+      displayProgressSpinnerSequence({ timeInSeconds: 0.25 });
+      updateFormValueSequence(...args);
+      updateFormValueSequence({
+        key: 'pageNumber',
+        root: ROOT,
+        value: 0,
+      });
+    };
+
     function proceedingTypeRadioOption(key: string, value: string) {
       return (
         <div className="usa-radio usa-radio__inline" key={key}>
@@ -45,7 +68,7 @@ export const PublicTrialSessionsFilters = connect(
             type="radio"
             value={value}
             onChange={e => {
-              updateFormValueSequence({
+              publicTrialsSessionUpdateFormValueSequence({
                 key: e.target.name,
                 root: ROOT,
                 value: e.target.value,
@@ -111,7 +134,7 @@ export const PublicTrialSessionsFilters = connect(
                   }}
                   onChange={sessionType => {
                     if (sessionType) {
-                      updateFormValueSequence({
+                      publicTrialsSessionUpdateFormValueSequence({
                         key: `sessionTypes.${sessionType.value}`,
                         root: ROOT,
                         value: sessionType.label,
@@ -130,7 +153,7 @@ export const PublicTrialSessionsFilters = connect(
                     key={sessionTypeLabel}
                     text={sessionTypeLabel}
                     onRemove={() => {
-                      updateFormValueSequence({
+                      publicTrialsSessionUpdateFormValueSequence({
                         key: `sessionTypes.${sessionTypeKey}`,
                         root: ROOT,
                         value: undefined,
@@ -163,7 +186,7 @@ export const PublicTrialSessionsFilters = connect(
                   }}
                   onChange={location => {
                     if (location) {
-                      updateFormValueSequence({
+                      publicTrialsSessionUpdateFormValueSequence({
                         key: `locations.${location.value}`,
                         root: ROOT,
                         value: location.label,
@@ -182,7 +205,7 @@ export const PublicTrialSessionsFilters = connect(
                     key={locationLabel}
                     text={locationLabel}
                     onRemove={() => {
-                      updateFormValueSequence({
+                      publicTrialsSessionUpdateFormValueSequence({
                         key: `locations.${locationKey}`,
                         root: ROOT,
                         value: undefined,
@@ -214,7 +237,7 @@ export const PublicTrialSessionsFilters = connect(
                   }}
                   onChange={judgeInfo => {
                     if (judgeInfo) {
-                      updateFormValueSequence({
+                      publicTrialsSessionUpdateFormValueSequence({
                         key: `judges.${judgeInfo.value.name}`,
                         root: ROOT,
                         value: judgeInfo.value.name,
@@ -230,7 +253,7 @@ export const PublicTrialSessionsFilters = connect(
                       key={judgeKey}
                       text={judgeLabel}
                       onRemove={() => {
-                        updateFormValueSequence({
+                        publicTrialsSessionUpdateFormValueSequence({
                           key: `judges.${judgeKey}`,
                           root: ROOT,
                           value: undefined,
diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
index edc0cf760d7..20b9afa30b4 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
@@ -1,21 +1,54 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Paginator } from '@web-client/ustc-ui/Pagination/Paginator';
 import { connect } from '@web-client/presenter/shared.cerebral';
 import {
   isTrialSessionRow,
   isTrialSessionWeek,
 } from '@web-client/presenter/computeds/trialSessionsHelper';
-import { state } from '@web-client/presenter/app-public.cerebral';
+import { sequences, state } from '@web-client/presenter/app-public.cerebral';
 import React from 'react';
 
-const props = {
+type PublicTrialSessionsTableProps = {
+  pageNumber: number;
+  totalPages: number;
+  ROOT: string;
+};
+
+const PublicTrialSessionsTableDeps = {
   publicTrialSessionsHelper: state.publicTrialSessionsHelper,
+  updateFormValueSequence: sequences.updateFormValueSequence,
 };
 
-export const PublicTrialSessionsTable = connect(
-  props,
-  function ({ publicTrialSessionsHelper }) {
+export const PublicTrialSessionsTable = connect<
+  PublicTrialSessionsTableProps,
+  typeof PublicTrialSessionsTableDeps
+>(
+  PublicTrialSessionsTableDeps,
+  function ({
+    pageNumber,
+    publicTrialSessionsHelper,
+    ROOT,
+    totalPages,
+    updateFormValueSequence,
+  }) {
     return (
       <>
+        <div className="grid-row margin-bottom-2 flex-align-center">
+          <div className="grid-col">
+            <Paginator
+              currentPageIndex={pageNumber}
+              totalPages={totalPages}
+              onPageChange={selectedPage => {
+                updateFormValueSequence({
+                  key: 'pageNumber',
+                  root: ROOT,
+                  value: selectedPage,
+                });
+              }}
+            />
+            <div className="grid-col-2"></div>
+          </div>
+        </div>
         <div className="grid-row margin-bottom-2 width-full flex-align-center"></div>
         <div className="width-full text-right">
           <span className="text-bold">Count:</span>{' '}

From fe3511da1cd37ae57e332cce57da673a61fdb749 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Fri, 25 Oct 2024 10:50:59 -0600
Subject: [PATCH 25/79] 10460: Center paginator;

---
 .../views/Public/TrialsSessions/PublicTrialSessionsTable.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
index 20b9afa30b4..c2b6783a431 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
@@ -33,7 +33,7 @@ export const PublicTrialSessionsTable = connect<
   }) {
     return (
       <>
-        <div className="grid-row margin-bottom-2 flex-align-center">
+        <div className="width-full grid-row margin-bottom-2 flex-align-center">
           <div className="grid-col">
             <Paginator
               currentPageIndex={pageNumber}

From 932afcb33cae410a4dcfa1eacace416352b468d8 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Fri, 25 Oct 2024 10:59:05 -0600
Subject: [PATCH 26/79] 10460: Separate into NonMobile and Mobile;

---
 .../TrialsSessions/PublicTrialSessions.tsx    | 103 +++++++++++++-----
 1 file changed, 75 insertions(+), 28 deletions(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
index 9e2b619ca82..3a6a2fc9a30 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
@@ -1,6 +1,8 @@
 import { BigHeader } from '@web-client/views/BigHeader';
 import { Button } from '@web-client/ustc-ui/Button/Button';
+import { Mobile, NonMobile } from '@web-client/ustc-ui/Responsive/Responsive';
 import { PublicTrialSessionsFilters } from '@web-client/views/Public/TrialsSessions/PublicTrialSessionsFilters';
+import { PublicTrialSessionsHelperResults } from '@web-client/presenter/computeds/Public/publicTrialSessionsHelper';
 import { PublicTrialSessionsRemoteProceedingsCard } from '@web-client/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard';
 import { PublicTrialSessionsTable } from '@web-client/views/Public/TrialsSessions/PublicTrialSessionsTable';
 import { connect } from '@web-client/presenter/shared.cerebral';
@@ -9,6 +11,24 @@ import React from 'react';
 
 const ROOT = 'publicTrialSessionData';
 
+type TrialsSessionsUiParams = {
+  publicTrialSessionsHelper: PublicTrialSessionsHelperResults;
+  resetPublicTrialSessionDataSequence: () => void;
+  publicTrialSessionData: {
+    judges?: {
+      [key: string]: string;
+    };
+    locations?: {
+      [key: string]: string;
+    };
+    sessionTypes?: {
+      [key: string]: string;
+    };
+    pageNumber?: number;
+    proceedingType?: string;
+  };
+};
+
 export const PublicTrialSessions = connect(
   {
     publicTrialSessionData: state[ROOT],
@@ -24,37 +44,64 @@ export const PublicTrialSessions = connect(
     return (
       <>
         <BigHeader text="Scheduled Trial Sessions" />
-        <section className="usa-section grid-container">
-          <div className="grid-row">
-            <div className="tablet:grid-col-8 grid-col-12 padding-top-2">
-              <PublicTrialSessionsFilters
-                ROOT={ROOT}
-              ></PublicTrialSessionsFilters>
-            </div>
-            <div className="tablet:grid-col-4 grid-col-12 padding-top-1">
-              <PublicTrialSessionsRemoteProceedingsCard></PublicTrialSessionsRemoteProceedingsCard>
-            </div>
-          </div>
-          <div className="grid-row">
-            <Button
-              link
-              disabled={!publicTrialSessionsHelper.filtersHaveBeenModified}
-              onClick={() => resetPublicTrialSessionDataSequence()}
-            >
-              Reset Filters
-            </Button>
-          </div>
-          <div className="grid-row padding-top-1">
-            <PublicTrialSessionsTable
-              ROOT={ROOT}
-              pageNumber={publicTrialSessionData.pageNumber || 0}
-              totalPages={publicTrialSessionsHelper.totalPages}
-            ></PublicTrialSessionsTable>
-          </div>
-        </section>
+
+        {NonMobilePublicTrialsSessions({
+          publicTrialSessionData,
+          publicTrialSessionsHelper,
+          resetPublicTrialSessionDataSequence,
+        })}
+        {MobilePublicTrialsSessions()}
       </>
     );
   },
 );
 
+function NonMobilePublicTrialsSessions({
+  publicTrialSessionData,
+  publicTrialSessionsHelper,
+  resetPublicTrialSessionDataSequence,
+}: TrialsSessionsUiParams) {
+  return (
+    <NonMobile>
+      <section className="usa-section grid-container">
+        <div className="grid-row">
+          <div className="tablet:grid-col-8 grid-col-12 padding-top-2">
+            <PublicTrialSessionsFilters
+              ROOT={ROOT}
+            ></PublicTrialSessionsFilters>
+          </div>
+          <div className="tablet:grid-col-4 grid-col-12 padding-top-1">
+            <PublicTrialSessionsRemoteProceedingsCard></PublicTrialSessionsRemoteProceedingsCard>
+          </div>
+        </div>
+        <div className="grid-row">
+          <Button
+            link
+            disabled={!publicTrialSessionsHelper.filtersHaveBeenModified}
+            onClick={() => resetPublicTrialSessionDataSequence()}
+          >
+            Reset Filters
+          </Button>
+        </div>
+        <div className="grid-row padding-top-1">
+          <PublicTrialSessionsTable
+            ROOT={ROOT}
+            pageNumber={publicTrialSessionData.pageNumber || 0}
+            totalPages={publicTrialSessionsHelper.totalPages}
+          ></PublicTrialSessionsTable>
+        </div>
+      </section>
+    </NonMobile>
+  );
+}
+function MobilePublicTrialsSessions() {
+  return (
+    <Mobile>
+      <section className="usa-section grid-container">
+        John is testing mobile
+      </section>
+    </Mobile>
+  );
+}
+
 PublicTrialSessions.displayName = 'PublicTrialSessions';

From 755f3217147ffd6b9084bfd324fd8d1150bf97f5 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Fri, 25 Oct 2024 15:13:38 -0600
Subject: [PATCH 27/79] 10363: Split between mobile and non mobile;

---
 .../TrialsSessions/PublicTrialSessions.tsx    | 46 +++++++++++++++++--
 .../PublicTrialSessionsFilters.tsx            |  5 --
 2 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
index 3a6a2fc9a30..21e9a6b6496 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
@@ -1,3 +1,7 @@
+import {
+  Accordion,
+  AccordionItem,
+} from '@web-client/ustc-ui/Accordion/Accordion';
 import { BigHeader } from '@web-client/views/BigHeader';
 import { Button } from '@web-client/ustc-ui/Button/Button';
 import { Mobile, NonMobile } from '@web-client/ustc-ui/Responsive/Responsive';
@@ -50,7 +54,11 @@ export const PublicTrialSessions = connect(
           publicTrialSessionsHelper,
           resetPublicTrialSessionDataSequence,
         })}
-        {MobilePublicTrialsSessions()}
+        {MobilePublicTrialsSessions({
+          publicTrialSessionData,
+          publicTrialSessionsHelper,
+          resetPublicTrialSessionDataSequence,
+        })}
       </>
     );
   },
@@ -66,6 +74,10 @@ function NonMobilePublicTrialsSessions({
       <section className="usa-section grid-container">
         <div className="grid-row">
           <div className="tablet:grid-col-8 grid-col-12 padding-top-2">
+            <div>
+              Information on this page is current as of{' '}
+              {publicTrialSessionsHelper.fetchedDateString}
+            </div>
             <PublicTrialSessionsFilters
               ROOT={ROOT}
             ></PublicTrialSessionsFilters>
@@ -94,14 +106,38 @@ function NonMobilePublicTrialsSessions({
     </NonMobile>
   );
 }
-function MobilePublicTrialsSessions() {
+function MobilePublicTrialsSessions({
+  publicTrialSessionData,
+  publicTrialSessionsHelper,
+  resetPublicTrialSessionDataSequence,
+}: TrialsSessionsUiParams) {
+  console.log('publicTrialSessionData', publicTrialSessionData);
   return (
     <Mobile>
       <section className="usa-section grid-container">
-        John is testing mobile
+        <div>
+          Information on this page is current as of{' '}
+          {publicTrialSessionsHelper.fetchedDateString}
+        </div>
+        <div className="padding-top-3">
+          <PublicTrialSessionsRemoteProceedingsCard></PublicTrialSessionsRemoteProceedingsCard>
+        </div>
+
+        <Accordion>
+          <AccordionItem contentClassName="bg-gray" title="Filters">
+            <PublicTrialSessionsFilters
+              ROOT={ROOT}
+            ></PublicTrialSessionsFilters>
+            <Button
+              link
+              disabled={!publicTrialSessionsHelper.filtersHaveBeenModified}
+              onClick={() => resetPublicTrialSessionDataSequence()}
+            >
+              Reset Filters
+            </Button>
+          </AccordionItem>
+        </Accordion>
       </section>
     </Mobile>
   );
 }
-
-PublicTrialSessions.displayName = 'PublicTrialSessions';
diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
index 74e1c8331b8..ef71ce70279 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
@@ -90,11 +90,6 @@ export const PublicTrialSessionsFilters = connect<
 
     return (
       <>
-        <div>
-          Information on this page is current as of{' '}
-          {publicTrialSessionsHelper.fetchedDateString}
-        </div>
-
         <FormGroup>
           <fieldset
             className="usa-fieldset margin-top-2"

From 4e98541cc953ddf6590220a060c4864508eb9776 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Mon, 28 Oct 2024 10:18:41 -0600
Subject: [PATCH 28/79] 10460: implement mobile table view;

---
 .../Public/publicTrialSessionsHelper.ts       | 32 ++++++
 .../PublicMobileTrialSessionsDataRow.tsx      | 62 ++++++++++++
 .../PublicMobileTrialSessionsTable.tsx        | 99 +++++++++++++++++++
 .../TrialsSessions/PublicTrialSessions.tsx    | 21 ++--
 4 files changed, 205 insertions(+), 9 deletions(-)
 create mode 100644 web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsDataRow.tsx
 create mode 100644 web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx

diff --git a/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts b/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
index b875b635b0e..46d1cb73b84 100644
--- a/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
+++ b/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
@@ -4,6 +4,7 @@ import {
   TrialSessionRow,
   TrialSessionWeek,
   formatTrialSessions,
+  isTrialSessionWeek,
 } from '@web-client/presenter/computeds/trialSessionsHelper';
 import { getTrialCitiesGroupedByState } from '@shared/business/utilities/trialSession/trialCitiesGroupedByState';
 import { state } from '@web-client/presenter/app-public.cerebral';
@@ -29,6 +30,10 @@ export type PublicTrialSessionsHelperResults = {
   totalPages: number;
   trialSessionsCount: number;
   trialSessionRows: (TrialSessionRow | TrialSessionWeek)[];
+  groupedTrialsSessions: {
+    header: TrialSessionWeek;
+    rows: TrialSessionRow[];
+  }[];
 };
 
 function areAnyFiltersModified(
@@ -52,6 +57,30 @@ function areAnyFiltersModified(
   );
 }
 
+function groupTrialSessions(
+  trialSessions: (TrialSessionRow | TrialSessionWeek)[],
+): { header: TrialSessionWeek; rows: TrialSessionRow[] }[] {
+  const groupedTrialSessions: {
+    header: TrialSessionWeek;
+    rows: TrialSessionRow[];
+  }[] = [];
+
+  let counter = -1;
+  trialSessions.forEach(tsRow => {
+    if (isTrialSessionWeek(tsRow)) {
+      groupedTrialSessions.push({
+        header: tsRow,
+        rows: [] as TrialSessionRow[],
+      });
+      counter += 1;
+    } else {
+      groupedTrialSessions[counter].rows.push(tsRow);
+    }
+  });
+
+  return groupedTrialSessions;
+}
+
 const PAGE_SIZE = 100;
 
 export const publicTrialSessionsHelper = (
@@ -118,9 +147,12 @@ export const publicTrialSessionsHelper = (
     trialSessions: paginatedTrialSessions,
   });
 
+  const groupedTrialsSessions = groupTrialSessions(trialSessionRows);
+
   return {
     fetchedDateString,
     filtersHaveBeenModified,
+    groupedTrialsSessions,
     sessionTypeOptions,
     totalPages: Math.ceil(filteredTrialSessions.length / PAGE_SIZE),
     trialCitiesByState,
diff --git a/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsDataRow.tsx b/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsDataRow.tsx
new file mode 100644
index 00000000000..c83df0a9b86
--- /dev/null
+++ b/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsDataRow.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+
+type PublicMobileTrialSessionsDataRowProps = {
+  startDate: string;
+  trialSessionId: string;
+  judgeName: string;
+  proceedingType: string;
+  sessionType: string;
+  trialLocation: string;
+};
+
+export const PublicMobileTrialSessionsDataRow = function ({
+  judgeName,
+  proceedingType,
+  sessionType,
+  startDate,
+  trialLocation,
+  trialSessionId,
+}: PublicMobileTrialSessionsDataRowProps) {
+  return (
+    <>
+      <div className="padding-bottom-1 grid-row">
+        <div className="grid-col-6 padding-bottom-1">
+          <div className="padding-bottom-2">
+            <div>
+              <b>Start Date</b>
+            </div>
+            <div>{startDate}</div>
+          </div>
+          <div className="padding-bottom-2">
+            <div>
+              <b>Proceeding Type</b>
+            </div>
+            <div>{proceedingType}</div>
+          </div>
+          <div>
+            <div>
+              <b>Judge</b>
+            </div>
+            <div>{judgeName}</div>
+          </div>
+        </div>
+        <div className="grid-col-6 padding-bottom-1">
+          <div className="padding-bottom-2">
+            <div>
+              <b>Start Date</b>
+            </div>
+            <a href={`/trial-session-detail/${trialSessionId}`}>
+              {trialLocation}
+            </a>
+          </div>
+          <div>
+            <div>
+              <b>Session Type</b>
+            </div>
+            <div>{sessionType}</div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx b/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx
new file mode 100644
index 00000000000..5b903e24491
--- /dev/null
+++ b/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx
@@ -0,0 +1,99 @@
+import { Paginator } from '@web-client/ustc-ui/Pagination/Paginator';
+import { PublicMobileTrialSessionsDataRow } from '@web-client/views/Public/TrialsSessions/PublicMobileTrialSessionsDataRow';
+import { connect } from '@web-client/presenter/shared.cerebral';
+import { sequences, state } from '@web-client/presenter/app-public.cerebral';
+import React from 'react';
+
+type PublicMobileTrialSessionsTableProps = {
+  pageNumber: number;
+  totalPages: number;
+  ROOT: string;
+};
+
+const PublicMobileTrialSessionsTableDeps = {
+  publicTrialSessionsHelper: state.publicTrialSessionsHelper,
+  updateFormValueSequence: sequences.updateFormValueSequence,
+};
+
+export const PublicMobileTrialSessionsTable = connect<
+  PublicMobileTrialSessionsTableProps,
+  typeof PublicMobileTrialSessionsTableDeps
+>(
+  PublicMobileTrialSessionsTableDeps,
+  function ({
+    pageNumber,
+    publicTrialSessionsHelper,
+    ROOT,
+    totalPages,
+    updateFormValueSequence,
+  }) {
+    const { groupedTrialsSessions } = publicTrialSessionsHelper;
+    return (
+      <>
+        <div className="width-full grid-row margin-bottom-2 flex-align-center">
+          <div className="grid-col">
+            <Paginator
+              currentPageIndex={pageNumber}
+              totalPages={totalPages}
+              onPageChange={selectedPage => {
+                updateFormValueSequence({
+                  key: 'pageNumber',
+                  root: ROOT,
+                  value: selectedPage,
+                });
+              }}
+            />
+            <div className="grid-col-2"></div>
+          </div>
+        </div>
+        <div className="grid-row margin-bottom-2 width-full flex-align-center"></div>
+        <div className="width-full text-right">
+          <span className="text-bold">Count:</span>{' '}
+          <span className="text-semibold">
+            {publicTrialSessionsHelper.trialSessionsCount}
+          </span>
+        </div>
+        <div className="padding-1"></div>
+
+        <table className="usa-table usa-table--stacked-header usa-table--borderless">
+          <thead>
+            <tr>
+              <th scope="col">Document title</th>
+              <th scope="col">Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            {groupedTrialsSessions.map(tsGroup => {
+              return (
+                <tr
+                  className="padding-0"
+                  key={tsGroup.header.sessionWeekStartDate}
+                >
+                  <th data-label="Document title" scope="row">
+                    {tsGroup.header.formattedSessionWeekStartDate}
+                  </th>
+                  {tsGroup.rows.map(tsRow => {
+                    return (
+                      <>
+                        <td key={tsRow.formattedStartDate}>
+                          <PublicMobileTrialSessionsDataRow
+                            judgeName={tsRow.judge.name}
+                            proceedingType={tsRow.proceedingType}
+                            sessionType={tsRow.sessionType}
+                            startDate={tsRow.formattedStartDate}
+                            trialLocation={tsRow.trialLocation}
+                            trialSessionId={tsRow.trialSessionId}
+                          />
+                        </td>
+                      </>
+                    );
+                  })}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </>
+    );
+  },
+);
diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
index 21e9a6b6496..e763a5847ec 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
@@ -5,6 +5,7 @@ import {
 import { BigHeader } from '@web-client/views/BigHeader';
 import { Button } from '@web-client/ustc-ui/Button/Button';
 import { Mobile, NonMobile } from '@web-client/ustc-ui/Responsive/Responsive';
+import { PublicMobileTrialSessionsTable } from '@web-client/views/Public/TrialsSessions/PublicMobileTrialSessionsTable';
 import { PublicTrialSessionsFilters } from '@web-client/views/Public/TrialsSessions/PublicTrialSessionsFilters';
 import { PublicTrialSessionsHelperResults } from '@web-client/presenter/computeds/Public/publicTrialSessionsHelper';
 import { PublicTrialSessionsRemoteProceedingsCard } from '@web-client/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard';
@@ -78,12 +79,10 @@ function NonMobilePublicTrialsSessions({
               Information on this page is current as of{' '}
               {publicTrialSessionsHelper.fetchedDateString}
             </div>
-            <PublicTrialSessionsFilters
-              ROOT={ROOT}
-            ></PublicTrialSessionsFilters>
+            <PublicTrialSessionsFilters ROOT={ROOT} />
           </div>
           <div className="tablet:grid-col-4 grid-col-12 padding-top-1">
-            <PublicTrialSessionsRemoteProceedingsCard></PublicTrialSessionsRemoteProceedingsCard>
+            <PublicTrialSessionsRemoteProceedingsCard />
           </div>
         </div>
         <div className="grid-row">
@@ -100,7 +99,7 @@ function NonMobilePublicTrialsSessions({
             ROOT={ROOT}
             pageNumber={publicTrialSessionData.pageNumber || 0}
             totalPages={publicTrialSessionsHelper.totalPages}
-          ></PublicTrialSessionsTable>
+          />
         </div>
       </section>
     </NonMobile>
@@ -120,14 +119,12 @@ function MobilePublicTrialsSessions({
           {publicTrialSessionsHelper.fetchedDateString}
         </div>
         <div className="padding-top-3">
-          <PublicTrialSessionsRemoteProceedingsCard></PublicTrialSessionsRemoteProceedingsCard>
+          <PublicTrialSessionsRemoteProceedingsCard />
         </div>
 
         <Accordion>
           <AccordionItem contentClassName="bg-gray" title="Filters">
-            <PublicTrialSessionsFilters
-              ROOT={ROOT}
-            ></PublicTrialSessionsFilters>
+            <PublicTrialSessionsFilters ROOT={ROOT} />
             <Button
               link
               disabled={!publicTrialSessionsHelper.filtersHaveBeenModified}
@@ -137,6 +134,12 @@ function MobilePublicTrialsSessions({
             </Button>
           </AccordionItem>
         </Accordion>
+
+        <PublicMobileTrialSessionsTable
+          ROOT={ROOT}
+          pageNumber={publicTrialSessionData.pageNumber || 0}
+          totalPages={publicTrialSessionsHelper.totalPages}
+        />
       </section>
     </Mobile>
   );

From fe734571861d8fd697998b15272ac15685252438 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Mon, 28 Oct 2024 10:29:30 -0600
Subject: [PATCH 29/79] 10460: extract paginator;

---
 .../PublicMobileTrialSessionsTable.tsx        | 141 +++++------
 .../TrialsSessions/PublicTrialSessions.tsx    |  61 ++++-
 .../PublicTrialSessionsTable.tsx              | 225 ++++++++----------
 3 files changed, 201 insertions(+), 226 deletions(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx b/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx
index 5b903e24491..3e0836c6774 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx
@@ -1,99 +1,68 @@
-import { Paginator } from '@web-client/ustc-ui/Pagination/Paginator';
 import { PublicMobileTrialSessionsDataRow } from '@web-client/views/Public/TrialsSessions/PublicMobileTrialSessionsDataRow';
 import { connect } from '@web-client/presenter/shared.cerebral';
-import { sequences, state } from '@web-client/presenter/app-public.cerebral';
+import { state } from '@web-client/presenter/app-public.cerebral';
 import React from 'react';
 
-type PublicMobileTrialSessionsTableProps = {
-  pageNumber: number;
-  totalPages: number;
-  ROOT: string;
-};
+type PublicMobileTrialSessionsTableProps = {};
 
 const PublicMobileTrialSessionsTableDeps = {
   publicTrialSessionsHelper: state.publicTrialSessionsHelper,
-  updateFormValueSequence: sequences.updateFormValueSequence,
 };
 
 export const PublicMobileTrialSessionsTable = connect<
   PublicMobileTrialSessionsTableProps,
   typeof PublicMobileTrialSessionsTableDeps
->(
-  PublicMobileTrialSessionsTableDeps,
-  function ({
-    pageNumber,
-    publicTrialSessionsHelper,
-    ROOT,
-    totalPages,
-    updateFormValueSequence,
-  }) {
-    const { groupedTrialsSessions } = publicTrialSessionsHelper;
-    return (
-      <>
-        <div className="width-full grid-row margin-bottom-2 flex-align-center">
-          <div className="grid-col">
-            <Paginator
-              currentPageIndex={pageNumber}
-              totalPages={totalPages}
-              onPageChange={selectedPage => {
-                updateFormValueSequence({
-                  key: 'pageNumber',
-                  root: ROOT,
-                  value: selectedPage,
-                });
-              }}
-            />
-            <div className="grid-col-2"></div>
-          </div>
-        </div>
-        <div className="grid-row margin-bottom-2 width-full flex-align-center"></div>
-        <div className="width-full text-right">
-          <span className="text-bold">Count:</span>{' '}
-          <span className="text-semibold">
-            {publicTrialSessionsHelper.trialSessionsCount}
-          </span>
-        </div>
-        <div className="padding-1"></div>
+>(PublicMobileTrialSessionsTableDeps, function ({ publicTrialSessionsHelper }) {
+  const { groupedTrialsSessions } = publicTrialSessionsHelper;
+  return (
+    <>
+      <div className="grid-row margin-bottom-2 width-full flex-align-center"></div>
+      <div className="width-full text-right">
+        <span className="text-bold">Count:</span>{' '}
+        <span className="text-semibold">
+          {publicTrialSessionsHelper.trialSessionsCount}
+        </span>
+      </div>
+      <div className="padding-1"></div>
 
-        <table className="usa-table usa-table--stacked-header usa-table--borderless">
-          <thead>
-            <tr>
-              <th scope="col">Document title</th>
-              <th scope="col">Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            {groupedTrialsSessions.map(tsGroup => {
-              return (
-                <tr
-                  className="padding-0"
-                  key={tsGroup.header.sessionWeekStartDate}
-                >
-                  <th data-label="Document title" scope="row">
-                    {tsGroup.header.formattedSessionWeekStartDate}
-                  </th>
-                  {tsGroup.rows.map(tsRow => {
-                    return (
-                      <>
-                        <td key={tsRow.formattedStartDate}>
-                          <PublicMobileTrialSessionsDataRow
-                            judgeName={tsRow.judge.name}
-                            proceedingType={tsRow.proceedingType}
-                            sessionType={tsRow.sessionType}
-                            startDate={tsRow.formattedStartDate}
-                            trialLocation={tsRow.trialLocation}
-                            trialSessionId={tsRow.trialSessionId}
-                          />
-                        </td>
-                      </>
-                    );
-                  })}
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      </>
-    );
-  },
-);
+      <table className="usa-table usa-table--stacked-header usa-table--borderless">
+        <thead>
+          <tr>
+            <th scope="col">Document title</th>
+            <th scope="col">Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          {groupedTrialsSessions.map(tsGroup => {
+            return (
+              <tr
+                className="padding-0"
+                key={tsGroup.header.sessionWeekStartDate}
+              >
+                <th data-label="Document title" scope="row">
+                  {tsGroup.header.formattedSessionWeekStartDate}
+                </th>
+                {tsGroup.rows.map(tsRow => {
+                  return (
+                    <>
+                      <td key={tsRow.formattedStartDate}>
+                        <PublicMobileTrialSessionsDataRow
+                          judgeName={tsRow.judge.name}
+                          proceedingType={tsRow.proceedingType}
+                          sessionType={tsRow.sessionType}
+                          startDate={tsRow.formattedStartDate}
+                          trialLocation={tsRow.trialLocation}
+                          trialSessionId={tsRow.trialSessionId}
+                        />
+                      </td>
+                    </>
+                  );
+                })}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </>
+  );
+});
diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
index e763a5847ec..697e889544a 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
@@ -5,6 +5,7 @@ import {
 import { BigHeader } from '@web-client/views/BigHeader';
 import { Button } from '@web-client/ustc-ui/Button/Button';
 import { Mobile, NonMobile } from '@web-client/ustc-ui/Responsive/Responsive';
+import { Paginator } from '@web-client/ustc-ui/Pagination/Paginator';
 import { PublicMobileTrialSessionsTable } from '@web-client/views/Public/TrialsSessions/PublicMobileTrialSessionsTable';
 import { PublicTrialSessionsFilters } from '@web-client/views/Public/TrialsSessions/PublicTrialSessionsFilters';
 import { PublicTrialSessionsHelperResults } from '@web-client/presenter/computeds/Public/publicTrialSessionsHelper';
@@ -19,6 +20,13 @@ const ROOT = 'publicTrialSessionData';
 type TrialsSessionsUiParams = {
   publicTrialSessionsHelper: PublicTrialSessionsHelperResults;
   resetPublicTrialSessionDataSequence: () => void;
+  updateFormValueSequence: (props: {
+    index?: number;
+    root?: string;
+    key: string;
+    value: any;
+    allowEmptyString?: boolean;
+  }) => void;
   publicTrialSessionData: {
     judges?: {
       [key: string]: string;
@@ -40,11 +48,13 @@ export const PublicTrialSessions = connect(
     publicTrialSessionsHelper: state.publicTrialSessionsHelper,
     resetPublicTrialSessionDataSequence:
       sequences.resetPublicTrialSessionDataSequence,
+    updateFormValueSequence: sequences.updateFormValueSequence,
   },
   function ({
     publicTrialSessionData,
     publicTrialSessionsHelper,
     resetPublicTrialSessionDataSequence,
+    updateFormValueSequence,
   }) {
     return (
       <>
@@ -54,11 +64,13 @@ export const PublicTrialSessions = connect(
           publicTrialSessionData,
           publicTrialSessionsHelper,
           resetPublicTrialSessionDataSequence,
+          updateFormValueSequence,
         })}
         {MobilePublicTrialsSessions({
           publicTrialSessionData,
           publicTrialSessionsHelper,
           resetPublicTrialSessionDataSequence,
+          updateFormValueSequence,
         })}
       </>
     );
@@ -69,6 +81,7 @@ function NonMobilePublicTrialsSessions({
   publicTrialSessionData,
   publicTrialSessionsHelper,
   resetPublicTrialSessionDataSequence,
+  updateFormValueSequence,
 }: TrialsSessionsUiParams) {
   return (
     <NonMobile>
@@ -95,11 +108,24 @@ function NonMobilePublicTrialsSessions({
           </Button>
         </div>
         <div className="grid-row padding-top-1">
-          <PublicTrialSessionsTable
-            ROOT={ROOT}
-            pageNumber={publicTrialSessionData.pageNumber || 0}
-            totalPages={publicTrialSessionsHelper.totalPages}
-          />
+          <div className="width-full grid-row margin-bottom-2 flex-align-center">
+            <div className="grid-col">
+              <Paginator
+                currentPageIndex={publicTrialSessionData.pageNumber || 0}
+                totalPages={publicTrialSessionsHelper.totalPages}
+                onPageChange={selectedPage => {
+                  updateFormValueSequence({
+                    key: 'pageNumber',
+                    root: ROOT,
+                    value: selectedPage,
+                  });
+                }}
+              />
+              <div className="grid-col-2"></div>
+            </div>
+          </div>
+
+          <PublicTrialSessionsTable />
         </div>
       </section>
     </NonMobile>
@@ -109,8 +135,8 @@ function MobilePublicTrialsSessions({
   publicTrialSessionData,
   publicTrialSessionsHelper,
   resetPublicTrialSessionDataSequence,
+  updateFormValueSequence,
 }: TrialsSessionsUiParams) {
-  console.log('publicTrialSessionData', publicTrialSessionData);
   return (
     <Mobile>
       <section className="usa-section grid-container">
@@ -135,11 +161,24 @@ function MobilePublicTrialsSessions({
           </AccordionItem>
         </Accordion>
 
-        <PublicMobileTrialSessionsTable
-          ROOT={ROOT}
-          pageNumber={publicTrialSessionData.pageNumber || 0}
-          totalPages={publicTrialSessionsHelper.totalPages}
-        />
+        <div className="width-full grid-row margin-bottom-2 padding-top-3 flex-align-center">
+          <div className="grid-col">
+            <Paginator
+              currentPageIndex={publicTrialSessionData.pageNumber || 0}
+              totalPages={publicTrialSessionsHelper.totalPages}
+              onPageChange={selectedPage => {
+                updateFormValueSequence({
+                  key: 'pageNumber',
+                  root: ROOT,
+                  value: selectedPage,
+                });
+              }}
+            />
+            <div className="grid-col-2"></div>
+          </div>
+        </div>
+
+        <PublicMobileTrialSessionsTable />
       </section>
     </Mobile>
   );
diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
index c2b6783a431..09ab6782a44 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
@@ -1,146 +1,113 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Paginator } from '@web-client/ustc-ui/Pagination/Paginator';
 import { connect } from '@web-client/presenter/shared.cerebral';
 import {
   isTrialSessionRow,
   isTrialSessionWeek,
 } from '@web-client/presenter/computeds/trialSessionsHelper';
-import { sequences, state } from '@web-client/presenter/app-public.cerebral';
+import { state } from '@web-client/presenter/app-public.cerebral';
 import React from 'react';
 
-type PublicTrialSessionsTableProps = {
-  pageNumber: number;
-  totalPages: number;
-  ROOT: string;
-};
+type PublicTrialSessionsTableProps = {};
 
 const PublicTrialSessionsTableDeps = {
   publicTrialSessionsHelper: state.publicTrialSessionsHelper,
-  updateFormValueSequence: sequences.updateFormValueSequence,
 };
 
 export const PublicTrialSessionsTable = connect<
   PublicTrialSessionsTableProps,
   typeof PublicTrialSessionsTableDeps
->(
-  PublicTrialSessionsTableDeps,
-  function ({
-    pageNumber,
-    publicTrialSessionsHelper,
-    ROOT,
-    totalPages,
-    updateFormValueSequence,
-  }) {
-    return (
-      <>
-        <div className="width-full grid-row margin-bottom-2 flex-align-center">
-          <div className="grid-col">
-            <Paginator
-              currentPageIndex={pageNumber}
-              totalPages={totalPages}
-              onPageChange={selectedPage => {
-                updateFormValueSequence({
-                  key: 'pageNumber',
-                  root: ROOT,
-                  value: selectedPage,
-                });
-              }}
-            />
-            <div className="grid-col-2"></div>
-          </div>
-        </div>
-        <div className="grid-row margin-bottom-2 width-full flex-align-center"></div>
-        <div className="width-full text-right">
-          <span className="text-bold">Count:</span>{' '}
-          <span className="text-semibold">
-            {publicTrialSessionsHelper.trialSessionsCount}
-          </span>
-        </div>
-        <div className="padding-1"></div>
-        <table
-          aria-describedby="trial-sessions-filter-label locationFilter proceedingFilter sessionFilter judgeFilter"
-          className="usa-table ustc-table trial-sessions"
-        >
-          <thead>
-            <tr>
-              <th className="width-card">Start Date</th>
-              <th className="icon-column" />
-              <th className="width-mobile">Location</th>
-              <th className="width-card-lg">Proceeding Type</th>
-              <th className="width-card">Session Type</th>
-              <th className="width-card">Judge</th>
-            </tr>
-          </thead>
-          {publicTrialSessionsHelper.trialSessionRows.map(row => {
-            if (isTrialSessionWeek(row)) {
-              return (
-                <tbody key={row.formattedSessionWeekStartDate}>
-                  <tr className="trial-date">
-                    <td colSpan={100}>
-                      <h4 className="margin-bottom-0">
-                        {'Week of '}
-                        {row.formattedSessionWeekStartDate}
-                      </h4>
-                    </td>
-                  </tr>
-                </tbody>
-              );
-            }
-            if (isTrialSessionRow(row)) {
-              return (
-                <tbody key={row.trialSessionId}>
-                  <tr
-                    className="trial-sessions-row"
-                    data-testid={`trial-sessions-row-${row.trialSessionId}`}
-                  >
-                    <td>
-                      {row.showAlertForNOTTReminder && (
-                        <FontAwesomeIcon
-                          className="fa-icon-blue margin-right-05"
-                          icon="clock"
-                          size="sm"
-                          title={row.alertMessageForNOTT}
-                        />
-                      )}
-                      {row.formattedStartDate}
-                    </td>
-                    <td>
-                      {row.swingSession && (
-                        <FontAwesomeIcon
-                          className="fa-icon-blue"
-                          icon="link"
-                          size="sm"
-                          title="swing session"
-                        />
-                      )}
-                    </td>
-                    <td
-                      data-testid={`trial-location-link-${row.trialSessionId}`}
+>(PublicTrialSessionsTableDeps, function ({ publicTrialSessionsHelper }) {
+  return (
+    <>
+      <div className="grid-row margin-bottom-2 width-full flex-align-center"></div>
+      <div className="width-full text-right">
+        <span className="text-bold">Count:</span>{' '}
+        <span className="text-semibold">
+          {publicTrialSessionsHelper.trialSessionsCount}
+        </span>
+      </div>
+      <div className="padding-1"></div>
+      <table
+        aria-describedby="trial-sessions-filter-label locationFilter proceedingFilter sessionFilter judgeFilter"
+        className="usa-table ustc-table trial-sessions"
+      >
+        <thead>
+          <tr>
+            <th className="width-card">Start Date</th>
+            <th className="icon-column" />
+            <th className="width-mobile">Location</th>
+            <th className="width-card-lg">Proceeding Type</th>
+            <th className="width-card">Session Type</th>
+            <th className="width-card">Judge</th>
+          </tr>
+        </thead>
+        {publicTrialSessionsHelper.trialSessionRows.map(row => {
+          if (isTrialSessionWeek(row)) {
+            return (
+              <tbody key={row.formattedSessionWeekStartDate}>
+                <tr className="trial-date">
+                  <td colSpan={100}>
+                    <h4 className="margin-bottom-0">
+                      {'Week of '}
+                      {row.formattedSessionWeekStartDate}
+                    </h4>
+                  </td>
+                </tr>
+              </tbody>
+            );
+          }
+          if (isTrialSessionRow(row)) {
+            return (
+              <tbody key={row.trialSessionId}>
+                <tr
+                  className="trial-sessions-row"
+                  data-testid={`trial-sessions-row-${row.trialSessionId}`}
+                >
+                  <td>
+                    {row.showAlertForNOTTReminder && (
+                      <FontAwesomeIcon
+                        className="fa-icon-blue margin-right-05"
+                        icon="clock"
+                        size="sm"
+                        title={row.alertMessageForNOTT}
+                      />
+                    )}
+                    {row.formattedStartDate}
+                  </td>
+                  <td>
+                    {row.swingSession && (
+                      <FontAwesomeIcon
+                        className="fa-icon-blue"
+                        icon="link"
+                        size="sm"
+                        title="swing session"
+                      />
+                    )}
+                  </td>
+                  <td data-testid={`trial-location-link-${row.trialSessionId}`}>
+                    <a
+                      href={
+                        row.userIsAssignedToSession
+                          ? `/trial-session-working-copy/${row.trialSessionId}`
+                          : `/trial-session-detail/${row.trialSessionId}`
+                      }
                     >
-                      <a
-                        href={
-                          row.userIsAssignedToSession
-                            ? `/trial-session-working-copy/${row.trialSessionId}`
-                            : `/trial-session-detail/${row.trialSessionId}`
-                        }
-                      >
-                        {row.trialLocation}
-                      </a>
-                    </td>
-                    <td>{row.proceedingType}</td>
-                    <td>{row.sessionType}</td>
-                    <td>{row.judge.name}</td>
-                  </tr>
-                </tbody>
-              );
-            }
-          })}
-        </table>
-        {publicTrialSessionsHelper.trialSessionRows.length === 0 && (
-          <p>There are no trial sessions for the selected filters.</p>
-        )}
-        <div className="padding-1" />
-      </>
-    );
-  },
-);
+                      {row.trialLocation}
+                    </a>
+                  </td>
+                  <td>{row.proceedingType}</td>
+                  <td>{row.sessionType}</td>
+                  <td>{row.judge.name}</td>
+                </tr>
+              </tbody>
+            );
+          }
+        })}
+      </table>
+      {publicTrialSessionsHelper.trialSessionRows.length === 0 && (
+        <p>There are no trial sessions for the selected filters.</p>
+      )}
+      <div className="padding-1" />
+    </>
+  );
+});

From 7a55a1b229c68617d56b038ac16df95f5d6b841b Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Mon, 28 Oct 2024 10:37:48 -0600
Subject: [PATCH 30/79] 10460: Fix font weight;

---
 .../PublicMobileTrialSessionsDataRow.tsx      | 39 ++++++-------------
 1 file changed, 12 insertions(+), 27 deletions(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsDataRow.tsx b/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsDataRow.tsx
index c83df0a9b86..07d60f4fcd8 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsDataRow.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsDataRow.tsx
@@ -21,40 +21,25 @@ export const PublicMobileTrialSessionsDataRow = function ({
     <>
       <div className="padding-bottom-1 grid-row">
         <div className="grid-col-6 padding-bottom-1">
-          <div className="padding-bottom-2">
-            <div>
-              <b>Start Date</b>
-            </div>
-            <div>{startDate}</div>
-          </div>
-          <div className="padding-bottom-2">
-            <div>
-              <b>Proceeding Type</b>
-            </div>
-            <div>{proceedingType}</div>
-          </div>
-          <div>
-            <div>
-              <b>Judge</b>
-            </div>
-            <div>{judgeName}</div>
-          </div>
+          <div className="text-semibold">Start Date</div>
+          <div className="padding-bottom-2">{startDate}</div>
+
+          <div className="text-semibold">Proceeding Type</div>
+          <div className="padding-bottom-2">{proceedingType}</div>
+
+          <div className="text-semibold">Judge</div>
+          <div>{judgeName}</div>
         </div>
         <div className="grid-col-6 padding-bottom-1">
+          <div className="text-semibold">Location</div>
           <div className="padding-bottom-2">
-            <div>
-              <b>Start Date</b>
-            </div>
             <a href={`/trial-session-detail/${trialSessionId}`}>
               {trialLocation}
             </a>
           </div>
-          <div>
-            <div>
-              <b>Session Type</b>
-            </div>
-            <div>{sessionType}</div>
-          </div>
+
+          <div className="text-semibold">Session Type</div>
+          <div>{sessionType}</div>
         </div>
       </div>
     </>

From e41ed04e2a3b99f44df17ea346514b2b47e18398 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Mon, 28 Oct 2024 10:49:30 -0600
Subject: [PATCH 31/79] 10460: Added bottom pagination for mobile and non
 mobile;

---
 .../TrialsSessions/PublicTrialSessions.tsx    | 102 +++++++++++-------
 1 file changed, 65 insertions(+), 37 deletions(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
index 697e889544a..f124cde07d0 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
@@ -12,8 +12,9 @@ import { PublicTrialSessionsHelperResults } from '@web-client/presenter/computed
 import { PublicTrialSessionsRemoteProceedingsCard } from '@web-client/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard';
 import { PublicTrialSessionsTable } from '@web-client/views/Public/TrialsSessions/PublicTrialSessionsTable';
 import { connect } from '@web-client/presenter/shared.cerebral';
+import { focusPaginatorTop } from '@web-client/presenter/utilities/focusPaginatorTop';
 import { sequences, state } from '@web-client/presenter/app-public.cerebral';
-import React from 'react';
+import React, { useRef } from 'react';
 
 const ROOT = 'publicTrialSessionData';
 
@@ -108,24 +109,13 @@ function NonMobilePublicTrialsSessions({
           </Button>
         </div>
         <div className="grid-row padding-top-1">
-          <div className="width-full grid-row margin-bottom-2 flex-align-center">
-            <div className="grid-col">
-              <Paginator
-                currentPageIndex={publicTrialSessionData.pageNumber || 0}
-                totalPages={publicTrialSessionsHelper.totalPages}
-                onPageChange={selectedPage => {
-                  updateFormValueSequence({
-                    key: 'pageNumber',
-                    root: ROOT,
-                    value: selectedPage,
-                  });
-                }}
-              />
-              <div className="grid-col-2"></div>
-            </div>
-          </div>
-
-          <PublicTrialSessionsTable />
+          <TablePagination
+            pageNumber={publicTrialSessionData.pageNumber || 0}
+            totalPages={publicTrialSessionsHelper.totalPages}
+            updateFormValueSequence={updateFormValueSequence}
+          >
+            <PublicTrialSessionsTable />
+          </TablePagination>
         </div>
       </section>
     </NonMobile>
@@ -161,25 +151,63 @@ function MobilePublicTrialsSessions({
           </AccordionItem>
         </Accordion>
 
-        <div className="width-full grid-row margin-bottom-2 padding-top-3 flex-align-center">
-          <div className="grid-col">
-            <Paginator
-              currentPageIndex={publicTrialSessionData.pageNumber || 0}
-              totalPages={publicTrialSessionsHelper.totalPages}
-              onPageChange={selectedPage => {
-                updateFormValueSequence({
-                  key: 'pageNumber',
-                  root: ROOT,
-                  value: selectedPage,
-                });
-              }}
-            />
-            <div className="grid-col-2"></div>
-          </div>
-        </div>
-
-        <PublicMobileTrialSessionsTable />
+        <TablePagination
+          pageNumber={publicTrialSessionData.pageNumber || 0}
+          totalPages={publicTrialSessionsHelper.totalPages}
+          updateFormValueSequence={updateFormValueSequence}
+        >
+          <PublicMobileTrialSessionsTable />
+        </TablePagination>
       </section>
     </Mobile>
   );
 }
+
+function TablePagination({
+  children,
+  pageNumber,
+  totalPages,
+  updateFormValueSequence,
+}) {
+  const paginatorTop = useRef(null);
+  return (
+    <>
+      <div className="width-full grid-row margin-bottom-2 padding-top-3 flex-align-center">
+        <div className="grid-col" ref={paginatorTop}>
+          <Paginator
+            currentPageIndex={pageNumber}
+            totalPages={totalPages}
+            onPageChange={selectedPage => {
+              updateFormValueSequence({
+                key: 'pageNumber',
+                root: ROOT,
+                value: selectedPage,
+              });
+              focusPaginatorTop(paginatorTop);
+            }}
+          />
+          <div className="grid-col-2"></div>
+        </div>
+      </div>
+
+      {children}
+      <div className="width-full grid-row margin-bottom-2 padding-top-3 flex-align-center">
+        <div className="grid-col">
+          <Paginator
+            currentPageIndex={pageNumber}
+            totalPages={totalPages}
+            onPageChange={selectedPage => {
+              updateFormValueSequence({
+                key: 'pageNumber',
+                root: ROOT,
+                value: selectedPage,
+              });
+              focusPaginatorTop(paginatorTop);
+            }}
+          />
+          <div className="grid-col-2"></div>
+        </div>
+      </div>
+    </>
+  );
+}

From 89f33fe85dd37474bd6f913e0093565b69c3e309 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Mon, 28 Oct 2024 11:04:40 -0600
Subject: [PATCH 32/79] 10460: Display filter pills outside filter section on
 mobile;

---
 .../TrialsSessions/PublicTrialSessions.tsx    | 81 +++++++++++++++++++
 .../PublicTrialSessionsFilters.tsx            | 13 +--
 2 files changed, 88 insertions(+), 6 deletions(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
index f124cde07d0..d6caf77be8c 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
@@ -6,6 +6,7 @@ import { BigHeader } from '@web-client/views/BigHeader';
 import { Button } from '@web-client/ustc-ui/Button/Button';
 import { Mobile, NonMobile } from '@web-client/ustc-ui/Responsive/Responsive';
 import { Paginator } from '@web-client/ustc-ui/Pagination/Paginator';
+import { PillButton } from '@web-client/ustc-ui/Button/PillButton';
 import { PublicMobileTrialSessionsTable } from '@web-client/views/Public/TrialsSessions/PublicMobileTrialSessionsTable';
 import { PublicTrialSessionsFilters } from '@web-client/views/Public/TrialsSessions/PublicTrialSessionsFilters';
 import { PublicTrialSessionsHelperResults } from '@web-client/presenter/computeds/Public/publicTrialSessionsHelper';
@@ -41,10 +42,12 @@ type TrialsSessionsUiParams = {
     pageNumber?: number;
     proceedingType?: string;
   };
+  displayProgressSpinnerSequence?: (props: { timeInSeconds: number }) => void;
 };
 
 export const PublicTrialSessions = connect(
   {
+    displayProgressSpinnerSequence: sequences.displayProgressSpinnerSequence,
     publicTrialSessionData: state[ROOT],
     publicTrialSessionsHelper: state.publicTrialSessionsHelper,
     resetPublicTrialSessionDataSequence:
@@ -52,6 +55,7 @@ export const PublicTrialSessions = connect(
     updateFormValueSequence: sequences.updateFormValueSequence,
   },
   function ({
+    displayProgressSpinnerSequence,
     publicTrialSessionData,
     publicTrialSessionsHelper,
     resetPublicTrialSessionDataSequence,
@@ -68,6 +72,7 @@ export const PublicTrialSessions = connect(
           updateFormValueSequence,
         })}
         {MobilePublicTrialsSessions({
+          displayProgressSpinnerSequence,
           publicTrialSessionData,
           publicTrialSessionsHelper,
           resetPublicTrialSessionDataSequence,
@@ -121,12 +126,33 @@ function NonMobilePublicTrialsSessions({
     </NonMobile>
   );
 }
+
 function MobilePublicTrialsSessions({
+  displayProgressSpinnerSequence,
   publicTrialSessionData,
   publicTrialSessionsHelper,
   resetPublicTrialSessionDataSequence,
   updateFormValueSequence,
 }: TrialsSessionsUiParams) {
+  const {
+    judges = {},
+    locations = {},
+    sessionTypes = {},
+  } = publicTrialSessionData;
+
+  const publicTrialsSessionUpdateFormValueSequence = (
+    ...args: Parameters<typeof updateFormValueSequence>
+  ) => {
+    if (displayProgressSpinnerSequence)
+      displayProgressSpinnerSequence({ timeInSeconds: 0.25 });
+    updateFormValueSequence(...args);
+    updateFormValueSequence({
+      key: 'pageNumber',
+      root: ROOT,
+      value: 0,
+    });
+  };
+
   return (
     <Mobile>
       <section className="usa-section grid-container">
@@ -151,6 +177,61 @@ function MobilePublicTrialsSessions({
           </AccordionItem>
         </Accordion>
 
+        <div className="padding-top-2">
+          {Object.entries(
+            sessionTypes as {
+              [key: string]: string;
+            },
+          ).map(([sessionTypeKey, sessionTypeLabel]) => (
+            <PillButton
+              key={sessionTypeLabel}
+              text={sessionTypeLabel}
+              onRemove={() => {
+                publicTrialsSessionUpdateFormValueSequence({
+                  key: `sessionTypes.${sessionTypeKey}`,
+                  root: ROOT,
+                  value: undefined,
+                });
+              }}
+            />
+          ))}
+
+          {Object.entries(
+            locations as {
+              [key: string]: string;
+            },
+          ).map(([sessionTypeKey, sessionTypeLabel]) => (
+            <PillButton
+              key={sessionTypeLabel}
+              text={sessionTypeLabel}
+              onRemove={() => {
+                publicTrialsSessionUpdateFormValueSequence({
+                  key: `locations.${sessionTypeKey}`,
+                  root: ROOT,
+                  value: undefined,
+                });
+              }}
+            />
+          ))}
+
+          {Object.entries(
+            judges as {
+              [key: string]: string;
+            },
+          ).map(([sessionTypeKey, sessionTypeLabel]) => (
+            <PillButton
+              key={sessionTypeLabel}
+              text={sessionTypeLabel}
+              onRemove={() => {
+                publicTrialsSessionUpdateFormValueSequence({
+                  key: `judges.${sessionTypeKey}`,
+                  root: ROOT,
+                  value: undefined,
+                });
+              }}
+            />
+          ))}
+        </div>
         <TablePagination
           pageNumber={publicTrialSessionData.pageNumber || 0}
           totalPages={publicTrialSessionsHelper.totalPages}
diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
index ef71ce70279..253aed09b88 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
@@ -1,4 +1,5 @@
 import { FormGroup } from '@web-client/ustc-ui/FormGroup/FormGroup';
+import { NonMobile } from '@web-client/ustc-ui/Responsive/Responsive';
 import { PillButton } from '@web-client/ustc-ui/Button/PillButton';
 import { SelectSearch } from '@web-client/ustc-ui/Select/SelectSearch';
 import { TRIAL_SESSION_PROCEEDING_TYPES } from '@shared/business/entities/EntityConstants';
@@ -138,7 +139,7 @@ export const PublicTrialSessionsFilters = connect<
                   }}
                 />
               </div>
-              <div>
+              <NonMobile>
                 {Object.entries(
                   sessionTypes as {
                     [key: string]: string;
@@ -156,7 +157,7 @@ export const PublicTrialSessionsFilters = connect<
                     }}
                   />
                 ))}
-              </div>
+              </NonMobile>
             </div>
             <div className="tablet:grid-col-4 grid-col-12 padding-right-2">
               <div className="margin-bottom-1">
@@ -190,7 +191,7 @@ export const PublicTrialSessionsFilters = connect<
                   }}
                 />
               </div>
-              <div>
+              <NonMobile>
                 {Object.entries(
                   locations as {
                     [key: string]: string;
@@ -208,7 +209,7 @@ export const PublicTrialSessionsFilters = connect<
                     }}
                   />
                 ))}
-              </div>
+              </NonMobile>
             </div>
             <div className="tablet:grid-col-4 grid-col-12 padding-right-2">
               <div className="margin-bottom-1">
@@ -241,7 +242,7 @@ export const PublicTrialSessionsFilters = connect<
                   }}
                 />
               </div>
-              <div>
+              <NonMobile>
                 {Object.entries(judges as { [key: string]: string }).map(
                   ([judgeKey, judgeLabel]) => (
                     <PillButton
@@ -257,7 +258,7 @@ export const PublicTrialSessionsFilters = connect<
                     />
                   ),
                 )}
-              </div>
+              </NonMobile>
             </div>
           </div>
         </div>

From b5e2a24b3914a7f11d3bb0b82e27f4964e642b09 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Mon, 28 Oct 2024 11:07:19 -0600
Subject: [PATCH 33/79] 10460: remove grey background on mobile filters;

---
 .../src/views/Public/TrialsSessions/PublicTrialSessions.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
index d6caf77be8c..64615920eeb 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
@@ -165,7 +165,7 @@ function MobilePublicTrialsSessions({
         </div>
 
         <Accordion>
-          <AccordionItem contentClassName="bg-gray" title="Filters">
+          <AccordionItem title="Filters">
             <PublicTrialSessionsFilters ROOT={ROOT} />
             <Button
               link

From a7036e35aaefd94c47179a29046f3eb4901c7955 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Mon, 28 Oct 2024 13:57:34 -0600
Subject: [PATCH 34/79] 10460: fix filter dropdown getting cut off within
 accordion;

---
 .../TrialsSessions/PublicTrialSessions.tsx     | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
index 64615920eeb..c334a3d3482 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
@@ -15,7 +15,7 @@ import { PublicTrialSessionsTable } from '@web-client/views/Public/TrialsSession
 import { connect } from '@web-client/presenter/shared.cerebral';
 import { focusPaginatorTop } from '@web-client/presenter/utilities/focusPaginatorTop';
 import { sequences, state } from '@web-client/presenter/app-public.cerebral';
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 
 const ROOT = 'publicTrialSessionData';
 
@@ -140,6 +140,8 @@ function MobilePublicTrialsSessions({
     sessionTypes = {},
   } = publicTrialSessionData;
 
+  const [isOpen, setIsOpen] = useState(false);
+
   const publicTrialsSessionUpdateFormValueSequence = (
     ...args: Parameters<typeof updateFormValueSequence>
   ) => {
@@ -164,8 +166,14 @@ function MobilePublicTrialsSessions({
           <PublicTrialSessionsRemoteProceedingsCard />
         </div>
 
-        <Accordion>
-          <AccordionItem title="Filters">
+        <Accordion onClick={() => setIsOpen(!isOpen)}>
+          <AccordionItem contentClassName="display-none" title="Filters">
+            {''}
+          </AccordionItem>
+        </Accordion>
+
+        {isOpen && (
+          <>
             <PublicTrialSessionsFilters ROOT={ROOT} />
             <Button
               link
@@ -174,8 +182,8 @@ function MobilePublicTrialsSessions({
             >
               Reset Filters
             </Button>
-          </AccordionItem>
-        </Accordion>
+          </>
+        )}
 
         <div className="padding-top-2">
           {Object.entries(

From b1788bb00093d76c0d64dcda349dc4744c7ec321 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Mon, 28 Oct 2024 14:17:01 -0600
Subject: [PATCH 35/79] 10460: WIP implement double line separator;

---
 .../TrialsSessions/PublicMobileTrialSessionsTable.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx b/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx
index 3e0836c6774..14a0532b73e 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx
@@ -42,10 +42,17 @@ export const PublicMobileTrialSessionsTable = connect<
                 <th data-label="Document title" scope="row">
                   {tsGroup.header.formattedSessionWeekStartDate}
                 </th>
-                {tsGroup.rows.map(tsRow => {
+                {tsGroup.rows.map((tsRow, index) => {
                   return (
                     <>
-                      <td key={tsRow.formattedStartDate}>
+                      <td
+                        className={
+                          index !== tsGroup.rows.length - 1
+                            ? 'border-bottom-1px margin-bottom-1'
+                            : undefined
+                        }
+                        key={tsRow.formattedStartDate}
+                      >
                         <PublicMobileTrialSessionsDataRow
                           judgeName={tsRow.judge.name}
                           proceedingType={tsRow.proceedingType}

From 4e3ee0366866e4e7321f0b2160b9675e0b071fb5 Mon Sep 17 00:00:00 2001
From: Nechama Krigsman <nkrigsman@flexion.us>
Date: Mon, 28 Oct 2024 16:33:53 -0400
Subject: [PATCH 36/79] 10460: separate sessions in the same week with a double
 line;

---
 web-client/src/styles/custom.scss                            | 5 +++++
 .../Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/web-client/src/styles/custom.scss b/web-client/src/styles/custom.scss
index 9e935c16770..aec2204ff4a 100644
--- a/web-client/src/styles/custom.scss
+++ b/web-client/src/styles/custom.scss
@@ -2427,3 +2427,8 @@ button.change-scanner-button {
   // This has higher importance than uwds padding-0
   padding: 0;
 }
+
+.double-border {
+  border-bottom: 1px solid !important;
+  margin-bottom: 5px !important;
+}
\ No newline at end of file
diff --git a/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx b/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx
index 14a0532b73e..8b970c13a51 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx
@@ -48,7 +48,7 @@ export const PublicMobileTrialSessionsTable = connect<
                       <td
                         className={
                           index !== tsGroup.rows.length - 1
-                            ? 'border-bottom-1px margin-bottom-1'
+                            ? 'double-border'
                             : undefined
                         }
                         key={tsRow.formattedStartDate}

From 7bd27835af4c00c113ccc837667180eae9275ccb Mon Sep 17 00:00:00 2001
From: Nechama Krigsman <nkrigsman@flexion.us>
Date: Mon, 28 Oct 2024 16:41:09 -0400
Subject: [PATCH 37/79] 10460: remove log;

---
 web-client/src/presenter/computeds/trialSessionsHelper.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/web-client/src/presenter/computeds/trialSessionsHelper.ts b/web-client/src/presenter/computeds/trialSessionsHelper.ts
index 7265b506ddc..28d361e1ec9 100644
--- a/web-client/src/presenter/computeds/trialSessionsHelper.ts
+++ b/web-client/src/presenter/computeds/trialSessionsHelper.ts
@@ -121,8 +121,6 @@ export const trialSessionsHelper = (
     trialSessions: trialSessionPage,
   });
 
-  console.log('trialSessionRows', trialSessionRows);
-
   return {
     endDateErrorMessage,
     isResetFiltersDisabled: !userHasSelectedAFilter,

From 1436e16ab4a2e98b4dac5c2b11e8cfe306332b03 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Tue, 29 Oct 2024 08:19:59 -0600
Subject: [PATCH 38/79] 10460: Disable links to session details until 10461 is
 complete;

---
 .../TrialsSessions/PublicMobileTrialSessionsDataRow.tsx  | 9 +++++----
 .../Public/TrialsSessions/PublicTrialSessionsTable.tsx   | 9 +++++----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsDataRow.tsx b/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsDataRow.tsx
index 07d60f4fcd8..40060997e6d 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsDataRow.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsDataRow.tsx
@@ -15,7 +15,7 @@ export const PublicMobileTrialSessionsDataRow = function ({
   sessionType,
   startDate,
   trialLocation,
-  trialSessionId,
+  // trialSessionId,
 }: PublicMobileTrialSessionsDataRowProps) {
   return (
     <>
@@ -33,9 +33,10 @@ export const PublicMobileTrialSessionsDataRow = function ({
         <div className="grid-col-6 padding-bottom-1">
           <div className="text-semibold">Location</div>
           <div className="padding-bottom-2">
-            <a href={`/trial-session-detail/${trialSessionId}`}>
-              {trialLocation}
-            </a>
+            {/* TODO: ENABLE ONCE 10461 IS COMPLETE */}
+            {/* <a href={`/trial-session-detail/${trialSessionId}`}> */}
+            {trialLocation}
+            {/* </a> */}
           </div>
 
           <div className="text-semibold">Session Type</div>
diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
index 09ab6782a44..94761292697 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
@@ -85,15 +85,16 @@ export const PublicTrialSessionsTable = connect<
                     )}
                   </td>
                   <td data-testid={`trial-location-link-${row.trialSessionId}`}>
-                    <a
+                    {/* TODO: ENABLE ONCE 10461 IS COMPLETE */}
+                    {/* <a
                       href={
                         row.userIsAssignedToSession
                           ? `/trial-session-working-copy/${row.trialSessionId}`
                           : `/trial-session-detail/${row.trialSessionId}`
                       }
-                    >
-                      {row.trialLocation}
-                    </a>
+                    > */}
+                    {row.trialLocation}
+                    {/* </a> */}
                   </td>
                   <td>{row.proceedingType}</td>
                   <td>{row.sessionType}</td>

From 22842f4e1582b779749cdbffcef9931aceaf1098 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Tue, 29 Oct 2024 08:58:18 -0600
Subject: [PATCH 39/79] 10363: Remove ternary;

---
 .../TrialsSessions/PublicTrialSessionsTable.tsx      | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
index 94761292697..3c0029b0cbc 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
@@ -86,15 +86,9 @@ export const PublicTrialSessionsTable = connect<
                   </td>
                   <td data-testid={`trial-location-link-${row.trialSessionId}`}>
                     {/* TODO: ENABLE ONCE 10461 IS COMPLETE */}
-                    {/* <a
-                      href={
-                        row.userIsAssignedToSession
-                          ? `/trial-session-working-copy/${row.trialSessionId}`
-                          : `/trial-session-detail/${row.trialSessionId}`
-                      }
-                    > */}
-                    {row.trialLocation}
-                    {/* </a> */}
+                    {/* <a href={`/trial-session-detail/${row.trialSessionId}`}>
+                      {row.trialLocation}
+                    </a> */}
                   </td>
                   <td>{row.proceedingType}</td>
                   <td>{row.sessionType}</td>

From 542f1089fd56439ff90a854bc120512cfb08730c Mon Sep 17 00:00:00 2001
From: Nechama Krigsman <nkrigsman@flexion.us>
Date: Tue, 29 Oct 2024 12:16:43 -0400
Subject: [PATCH 40/79] 10460: add tests around
 getPublicTrialSessionsInteractor;

---
 .../getPublicTrialSessionsInteractor.test.ts  | 79 +++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 web-api/src/business/useCases/trialSessions/getPublicTrialSessionsInteractor.test.ts

diff --git a/web-api/src/business/useCases/trialSessions/getPublicTrialSessionsInteractor.test.ts b/web-api/src/business/useCases/trialSessions/getPublicTrialSessionsInteractor.test.ts
new file mode 100644
index 00000000000..d8bab02cb18
--- /dev/null
+++ b/web-api/src/business/useCases/trialSessions/getPublicTrialSessionsInteractor.test.ts
@@ -0,0 +1,79 @@
+import { applicationContext } from '../../../../../shared/src/business/test/createTestApplicationContext';
+import { getPublicTrialSessionsInteractor } from '@web-api/business/useCases/trialSessions/getPublicTrialSessionsInteractor';
+
+describe('getPublicTrialSessionsInteractor', () => {
+  beforeEach(() => {
+    applicationContext
+      .getPersistenceGateway()
+      .getTrialSessions.mockReturnValue(MOCK_TRIAL_SESSIONS);
+  });
+
+  it('should return open trial sessions', async () => {
+    const result = await getPublicTrialSessionsInteractor(applicationContext);
+    expect(result.every(session => session.sessionStatus === 'Open')).toBe(
+      true,
+    );
+  });
+});
+
+const MOCK_TRIAL_SESSIONS = [
+  {
+    caseOrder: [],
+    createdAt: '2019-11-02T05:00:00.000Z',
+    gsi1pk: 'trial-session-catalog',
+    isCalendared: true,
+    judge: { name: 'Cohen', userId: 'dabbad04-18d0-43ec-bafb-654e83405416' },
+    maxCases: 30,
+    pk: 'trial-session|0d943468-bc2e-4631-84e3-b084cf5b1fbb',
+    proceedingType: 'In Person',
+    sessionStatus: 'Open',
+    sessionType: 'Special',
+    sk: 'trial-session|0d943468-bc2e-4631-84e3-b084cf5b1fbb',
+    startDate: '2019-12-02T05:00:00.000Z',
+    startTime: '21:00',
+    status: 'Closed',
+    term: 'Fall',
+    termYear: '2019',
+    trialLocation: 'Denver, Colorado',
+    trialSessionId: '0d943468-bc2e-4631-84e3-b084cf5b1fbb',
+  },
+  {
+    caseOrder: [],
+    createdAt: '2020-10-25T05:00:00.000Z',
+    gsi1pk: 'trial-session-catalog',
+    isCalendared: true,
+    judge: { name: 'Colvin', userId: 'dabbad00-18d0-43ec-bafb-654e83405416' },
+    maxCases: 100,
+    pk: 'trial-session|111ac21b-99f9-4321-98c8-b95db00af96b',
+    proceedingType: 'Remote',
+    sessionScope: 'Standalone Remote',
+    sessionStatus: 'Open',
+    sessionType: 'Special',
+    sk: 'trial-session|111ac21b-99f9-4321-98c8-b95db00af96b',
+    startDate: '2020-11-25T05:00:00.000Z',
+    startTime: '13:00',
+    term: 'Fall',
+    termYear: '2020',
+    trialLocation: 'Standalone Remote',
+    trialSessionId: '111ac21b-99f9-4321-98c8-b95db00af96b',
+  },
+  {
+    caseOrder: [],
+    createdAt: '2020-10-02T05:00:00.000Z',
+    gsi1pk: 'trial-session-catalog',
+    isCalendared: false,
+    judge: { name: 'Cohen', userId: 'dabbad04-18d0-43ec-bafb-654e83405416' },
+    maxCases: 8,
+    pk: 'trial-session|149159ca-f4a1-4b2b-bc24-bd1fbe6defdc',
+    proceedingType: 'In Person',
+    sessionStatus: 'New',
+    sessionType: 'Regular',
+    sk: 'trial-session|149159ca-f4a1-4b2b-bc24-bd1fbe6defdc',
+    startDate: '2020-12-02T05:00:00.000Z',
+    startTime: '09:00',
+    term: 'Fall',
+    termYear: '2020',
+    trialLocation: 'Birmingham, Alabama',
+    trialSessionId: '149159ca-f4a1-4b2b-bc24-bd1fbe6defdc',
+  },
+];

From 456f6605ee57e061dc8f6792138b0f4e67e24ca3 Mon Sep 17 00:00:00 2001
From: Nechama Krigsman <nkrigsman@flexion.us>
Date: Tue, 29 Oct 2024 12:51:34 -0400
Subject: [PATCH 41/79] 10460: add tests around setTimeStampAction;

---
 .../TrialSession/setTimeStampAction.test.ts        | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 web-client/src/presenter/actions/TrialSession/setTimeStampAction.test.ts

diff --git a/web-client/src/presenter/actions/TrialSession/setTimeStampAction.test.ts b/web-client/src/presenter/actions/TrialSession/setTimeStampAction.test.ts
new file mode 100644
index 00000000000..101dbf86ec7
--- /dev/null
+++ b/web-client/src/presenter/actions/TrialSession/setTimeStampAction.test.ts
@@ -0,0 +1,14 @@
+import { DateTime } from 'luxon';
+import { runAction } from '@web-client/presenter/test.cerebral';
+import { setTimeStampAction } from '@web-client/presenter/actions/TrialSession/setTimeStampAction';
+
+describe('setTimeStampAction', () => {
+  it('should set time stamp', async () => {
+    const propertyName = 'FetchedTrialSessions';
+    const result = await runAction(setTimeStampAction({ propertyName }), {});
+
+    const expectedDate = DateTime.now().setZone('America/New_York').toISODate();
+
+    expect(result.state[propertyName].toISODate()).toEqual(expectedDate);
+  });
+});

From cc613233b284d3de69ae1cb8bc9eca3a37776315 Mon Sep 17 00:00:00 2001
From: Nechama Krigsman <nkrigsman@flexion.us>
Date: Tue, 29 Oct 2024 12:57:14 -0400
Subject: [PATCH 42/79] 10460: add tests around
 resetPublicTrialSessionDataAction;

---
 .../resetPublicTrialSessionDataAction.test.ts      | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 web-client/src/presenter/actions/resetPublicTrialSessionDataAction.test.ts

diff --git a/web-client/src/presenter/actions/resetPublicTrialSessionDataAction.test.ts b/web-client/src/presenter/actions/resetPublicTrialSessionDataAction.test.ts
new file mode 100644
index 00000000000..12a39a1cf98
--- /dev/null
+++ b/web-client/src/presenter/actions/resetPublicTrialSessionDataAction.test.ts
@@ -0,0 +1,14 @@
+import { resetPublicTrialSessionDataAction } from '@web-client/presenter/actions/resetPublicTrialSessionDataAction';
+import { runAction } from '@web-client/presenter/test.cerebral';
+
+describe('resetPublicTrialSessionDataAction', () => {
+  it('should reset trial session data', async () => {
+    const result = await runAction(resetPublicTrialSessionDataAction, {
+      state: {
+        publicTrialSessionData: { id: 123 },
+      },
+    });
+
+    expect(result.state.publicTrialSessionData).toEqual({});
+  });
+});

From 3330a82956cd4c198821a4b7cd41cf92117e7299 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Tue, 29 Oct 2024 11:07:51 -0600
Subject: [PATCH 43/79] 10363: display location;

---
 .../Public/TrialsSessions/PublicTrialSessionsTable.tsx      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
index 3c0029b0cbc..ce1aa4d2f4e 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
@@ -86,9 +86,9 @@ export const PublicTrialSessionsTable = connect<
                   </td>
                   <td data-testid={`trial-location-link-${row.trialSessionId}`}>
                     {/* TODO: ENABLE ONCE 10461 IS COMPLETE */}
-                    {/* <a href={`/trial-session-detail/${row.trialSessionId}`}>
-                      {row.trialLocation}
-                    </a> */}
+                    {/* <a href={`/trial-session-detail/${row.trialSessionId}`}> */}
+                    {row.trialLocation}
+                    {/* </a> */}
                   </td>
                   <td>{row.proceedingType}</td>
                   <td>{row.sessionType}</td>

From 3e8c87432b3733434d34f307a45c09ba1e093d90 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Tue, 29 Oct 2024 11:23:39 -0600
Subject: [PATCH 44/79] 10460: Fix typing in unit test;

---
 .../resetPublicTrialSessionDataAction.test.ts        | 12 ++++++++----
 web-client/src/presenter/test.cerebral.ts            |  5 +++--
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/web-client/src/presenter/actions/resetPublicTrialSessionDataAction.test.ts b/web-client/src/presenter/actions/resetPublicTrialSessionDataAction.test.ts
index 12a39a1cf98..43d00566f31 100644
--- a/web-client/src/presenter/actions/resetPublicTrialSessionDataAction.test.ts
+++ b/web-client/src/presenter/actions/resetPublicTrialSessionDataAction.test.ts
@@ -1,13 +1,17 @@
+import { PublicClientState } from '@web-client/presenter/state-public';
 import { resetPublicTrialSessionDataAction } from '@web-client/presenter/actions/resetPublicTrialSessionDataAction';
 import { runAction } from '@web-client/presenter/test.cerebral';
 
 describe('resetPublicTrialSessionDataAction', () => {
   it('should reset trial session data', async () => {
-    const result = await runAction(resetPublicTrialSessionDataAction, {
-      state: {
-        publicTrialSessionData: { id: 123 },
+    const result = await runAction<void, PublicClientState>(
+      resetPublicTrialSessionDataAction,
+      {
+        state: {
+          publicTrialSessionData: { id: 123 },
+        },
       },
-    });
+    );
 
     expect(result.state.publicTrialSessionData).toEqual({});
   });
diff --git a/web-client/src/presenter/test.cerebral.ts b/web-client/src/presenter/test.cerebral.ts
index 467360e2828..77f54f79436 100644
--- a/web-client/src/presenter/test.cerebral.ts
+++ b/web-client/src/presenter/test.cerebral.ts
@@ -10,8 +10,9 @@ type FakeRunComputeType = <T>(
 ) => T;
 export const runCompute = cerebralRunCompute as unknown as FakeRunComputeType;
 
-type FakeRunActionType = <T>(
+type FakeRunActionType = <T, U = ClientState>(
   action: (actionProps: any) => Promise<T> | T,
   fixtures: { modules?: { presenter: any }; props?: any; state?: any },
-) => { state: ClientState; props: any; output: T };
+) => { state: U; props: any; output: T };
+
 export const runAction = cerebralRunAction as unknown as FakeRunActionType;

From e116f11d64a4057c45e76c63c3ee5ac796604efd Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Tue, 29 Oct 2024 11:34:07 -0600
Subject: [PATCH 45/79] 10460: WIP add cypress test;

---
 .../integration/public/trial-sessions.cy.ts    | 18 ++++++++++++++++++
 .../TrialsSessions/PublicTrialSessions.tsx     |  2 ++
 .../PublicTrialSessionsFilters.tsx             | 17 +++++++++++++----
 ...ublicTrialSessionsRemoteProceedingsCard.tsx |  2 +-
 4 files changed, 34 insertions(+), 5 deletions(-)
 create mode 100644 cypress/readonly/integration/public/trial-sessions.cy.ts

diff --git a/cypress/readonly/integration/public/trial-sessions.cy.ts b/cypress/readonly/integration/public/trial-sessions.cy.ts
new file mode 100644
index 00000000000..f7390b2c34c
--- /dev/null
+++ b/cypress/readonly/integration/public/trial-sessions.cy.ts
@@ -0,0 +1,18 @@
+describe('Public Trial Sessions', () => {
+  it('should display table information correctly', () => {
+    cy.visit('/trial-sessions');
+    cy.get('[data-testid="proceeding-type-filter"]').should('be.visible');
+    cy.get('[data-testid="session-type-filter"]').should('be.visible');
+    cy.get('[data-testid="location-filter"]').should('be.visible');
+    cy.get('[data-testid="judge-filter"]').should('be.visible');
+
+    cy.get('[data-testid="remote-proceedings-card"]').should('be.visible');
+    cy.get('[data-testid="remote-proceedings-card"]')
+      .find('a')
+      .should('have.length', 2);
+
+    cy.get('[data-testid="trial-sessions-reset-filters-button"]').should(
+      'be.disabled',
+    );
+  });
+});
diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
index c334a3d3482..be84a2eadb0 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
@@ -107,6 +107,7 @@ function NonMobilePublicTrialsSessions({
         <div className="grid-row">
           <Button
             link
+            data-testid="trial-sessions-reset-filters-button"
             disabled={!publicTrialSessionsHelper.filtersHaveBeenModified}
             onClick={() => resetPublicTrialSessionDataSequence()}
           >
@@ -177,6 +178,7 @@ function MobilePublicTrialsSessions({
             <PublicTrialSessionsFilters ROOT={ROOT} />
             <Button
               link
+              data-testid="trial-sessions-reset-filters-button"
               disabled={!publicTrialSessionsHelper.filtersHaveBeenModified}
               onClick={() => resetPublicTrialSessionDataSequence()}
             >
diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
index 253aed09b88..686cfb856e2 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
@@ -94,7 +94,7 @@ export const PublicTrialSessionsFilters = connect<
         <FormGroup>
           <fieldset
             className="usa-fieldset margin-top-2"
-            data-testid="trial-session-proceeding-type"
+            data-testid="proceeding-type-filter"
           >
             <legend className="usa-legend" id="proceeding-type-legend">
               Proceeding type
@@ -107,7 +107,10 @@ export const PublicTrialSessionsFilters = connect<
 
         <div className="tablet:grid-col grid-col-12">
           <div className="grid-row">
-            <div className="tablet:grid-col-4 grid-col-12 padding-right-2">
+            <div
+              className="tablet:grid-col-4 grid-col-12 padding-right-2"
+              data-testid="session-type-filter"
+            >
               <div className="margin-bottom-1">
                 <label
                   className="usa-label"
@@ -159,7 +162,10 @@ export const PublicTrialSessionsFilters = connect<
                 ))}
               </NonMobile>
             </div>
-            <div className="tablet:grid-col-4 grid-col-12 padding-right-2">
+            <div
+              className="tablet:grid-col-4 grid-col-12 padding-right-2"
+              data-testid="location-filter"
+            >
               <div className="margin-bottom-1">
                 <label
                   className="usa-label"
@@ -211,7 +217,10 @@ export const PublicTrialSessionsFilters = connect<
                 ))}
               </NonMobile>
             </div>
-            <div className="tablet:grid-col-4 grid-col-12 padding-right-2">
+            <div
+              className="tablet:grid-col-4 grid-col-12 padding-right-2"
+              data-testid="judge-filter"
+            >
               <div className="margin-bottom-1">
                 <label
                   className="usa-label"
diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx
index 3925b922b52..350d1c5a16b 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx
@@ -7,7 +7,7 @@ export const PublicTrialSessionsRemoteProceedingsCard = connect(
   function () {
     return (
       <>
-        <div className="card">
+        <div className="card" data-testid="remote-proceedings-card">
           <div className="card-header padding-left-2 padding-top-2 border-bottom-1px border-base-lighter">
             <h2>Remote Proceedings</h2>
           </div>

From fd1905696ffbf98fa45d634710b8bc555faeeb1c Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Wed, 30 Oct 2024 08:45:29 -0600
Subject: [PATCH 46/79] 10460: Extended cypress tests;

---
 .../integration/public/trial-sessions.cy.ts   | 50 ++++++++++++++++++-
 web-client/src/ustc-ui/Button/PillButton.tsx  |  9 +++-
 .../PublicTrialSessionsFilters.tsx            | 15 +++---
 3 files changed, 63 insertions(+), 11 deletions(-)

diff --git a/cypress/readonly/integration/public/trial-sessions.cy.ts b/cypress/readonly/integration/public/trial-sessions.cy.ts
index f7390b2c34c..57c1b8a7fde 100644
--- a/cypress/readonly/integration/public/trial-sessions.cy.ts
+++ b/cypress/readonly/integration/public/trial-sessions.cy.ts
@@ -1,6 +1,11 @@
+import { selectTypeaheadInput } from '../../../helpers/components/typeAhead/select-typeahead-input';
+
 describe('Public Trial Sessions', () => {
-  it('should display table information correctly', () => {
+  beforeEach(() => {
     cy.visit('/trial-sessions');
+  });
+
+  it('should display table filters correctly', () => {
     cy.get('[data-testid="proceeding-type-filter"]').should('be.visible');
     cy.get('[data-testid="session-type-filter"]').should('be.visible');
     cy.get('[data-testid="location-filter"]').should('be.visible');
@@ -15,4 +20,47 @@ describe('Public Trial Sessions', () => {
       'be.disabled',
     );
   });
+
+  it('should enable the reset filters button if there are any filters aplied', () => {
+    cy.get('[data-testid="trial-sessions-reset-filters-button"]').should(
+      'be.disabled',
+    );
+
+    cy.get('[data-testid="In Person-proceeding-label"]').click();
+
+    cy.get('[data-testid="trial-sessions-reset-filters-button"]').should(
+      'be.enabled',
+    );
+  });
+
+  it('should display Pill Button for every dropdown filter selected', () => {
+    const SESSION_TYPE = 'Regular';
+    selectTypeaheadInput('session-type-filter-select', SESSION_TYPE);
+    cy.get(`[data-testid="session-${SESSION_TYPE}-pill-button"]`);
+
+    const LOCATION = 'Mobile, Alabama';
+    selectTypeaheadInput('location-filter-search', LOCATION);
+    cy.get(`[data-testid="location-${LOCATION}-pill-button"]`);
+
+    const JUDGE = 'Buch';
+    selectTypeaheadInput('judge-filter-search', JUDGE);
+    cy.get(`[data-testid="judge-${JUDGE}-pill-button"]`);
+
+    cy.get(`[data-testid="session-${SESSION_TYPE}-pill-button"]`)
+      .find('button')
+      .click();
+    cy.get(`[data-testid="session-${SESSION_TYPE}-pill-button"]`).should(
+      'not.exist',
+    );
+
+    cy.get(`[data-testid="location-${LOCATION}-pill-button"]`)
+      .find('button')
+      .click();
+    cy.get(`[data-testid="location-${LOCATION}-pill-button"]`).should(
+      'not.exist',
+    );
+
+    cy.get(`[data-testid="judge-${JUDGE}-pill-button"]`).find('button').click();
+    cy.get(`[data-testid="judge-${JUDGE}-pill-button"]`).should('not.exist');
+  });
 });
diff --git a/web-client/src/ustc-ui/Button/PillButton.tsx b/web-client/src/ustc-ui/Button/PillButton.tsx
index adeb64671ec..a4fcbd2d7f0 100644
--- a/web-client/src/ustc-ui/Button/PillButton.tsx
+++ b/web-client/src/ustc-ui/Button/PillButton.tsx
@@ -3,12 +3,17 @@ import React from 'react';
 
 interface PillButtonProps {
   text: string;
+  'data-testid'?: string;
   onRemove: () => void;
 }
 
-export const PillButton = ({ onRemove, text }: PillButtonProps) => {
+export const PillButton = ({
+  'data-testid': dataTestId,
+  onRemove,
+  text,
+}: PillButtonProps) => {
   return (
-    <span className="blue-pill">
+    <span className="blue-pill" data-testid={dataTestId}>
       {text}
       <button
         aria-label={`remove ${text} selection`}
diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
index 686cfb856e2..672b371c91c 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
@@ -112,17 +112,13 @@ export const PublicTrialSessionsFilters = connect<
               data-testid="session-type-filter"
             >
               <div className="margin-bottom-1">
-                <label
-                  className="usa-label"
-                  htmlFor="session-type-filter"
-                  id="session-type-filter-label"
-                >
+                <label className="usa-label" htmlFor="session-type-filter">
                   Session type{' '}
                   <span className="optional-light-text">(optional)</span>
                 </label>
                 <SelectSearch
                   aria-labelledby="session-type-filter-label"
-                  data-testid="trial-session-type-filter-search"
+                  data-testid="session-type-filter-select"
                   inputId="session-type-filter"
                   name="sessionType"
                   options={publicTrialSessionsHelper.sessionTypeOptions}
@@ -149,6 +145,7 @@ export const PublicTrialSessionsFilters = connect<
                   },
                 ).map(([sessionTypeKey, sessionTypeLabel]) => (
                   <PillButton
+                    data-testid={`session-${sessionTypeLabel}-pill-button`}
                     key={sessionTypeLabel}
                     text={sessionTypeLabel}
                     onRemove={() => {
@@ -177,7 +174,7 @@ export const PublicTrialSessionsFilters = connect<
                 </label>
                 <SelectSearch
                   aria-labelledby="location-filter-label"
-                  data-testid="trial-session-location-filter-search"
+                  data-testid="location-filter-search"
                   inputId="location-filter"
                   name="location"
                   options={publicTrialSessionsHelper.trialCitiesByState}
@@ -204,6 +201,7 @@ export const PublicTrialSessionsFilters = connect<
                   },
                 ).map(([locationKey, locationLabel]) => (
                   <PillButton
+                    data-testid={`location-${locationLabel}-pill-button`}
                     key={locationLabel}
                     text={locationLabel}
                     onRemove={() => {
@@ -231,7 +229,7 @@ export const PublicTrialSessionsFilters = connect<
                 </label>
                 <SelectSearch
                   aria-labelledby="judges-filter-label"
-                  data-testid="trial-session-judge-filter-search"
+                  data-testid="judge-filter-search"
                   inputId="judges-filter"
                   name="judges"
                   options={publicTrialSessionsHelper.trialSessionJudgeOptions}
@@ -255,6 +253,7 @@ export const PublicTrialSessionsFilters = connect<
                 {Object.entries(judges as { [key: string]: string }).map(
                   ([judgeKey, judgeLabel]) => (
                     <PillButton
+                      data-testid={`judge-${judgeLabel}-pill-button`}
                       key={judgeKey}
                       text={judgeLabel}
                       onRemove={() => {

From edbac9f985ecae6c44a688b48601d9902c1990e2 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Wed, 30 Oct 2024 11:28:31 -0600
Subject: [PATCH 47/79] 10460: Added period to markup;

---
 .../TrialsSessions/PublicTrialSessions.tsx    | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
index be84a2eadb0..2e6247ab90b 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
@@ -94,10 +94,9 @@ function NonMobilePublicTrialsSessions({
       <section className="usa-section grid-container">
         <div className="grid-row">
           <div className="tablet:grid-col-8 grid-col-12 padding-top-2">
-            <div>
-              Information on this page is current as of{' '}
-              {publicTrialSessionsHelper.fetchedDateString}
-            </div>
+            <FetchedTimeMessage
+              fetchedDateString={publicTrialSessionsHelper.fetchedDateString}
+            ></FetchedTimeMessage>
             <PublicTrialSessionsFilters ROOT={ROOT} />
           </div>
           <div className="tablet:grid-col-4 grid-col-12 padding-top-1">
@@ -159,10 +158,9 @@ function MobilePublicTrialsSessions({
   return (
     <Mobile>
       <section className="usa-section grid-container">
-        <div>
-          Information on this page is current as of{' '}
-          {publicTrialSessionsHelper.fetchedDateString}
-        </div>
+        <FetchedTimeMessage
+          fetchedDateString={publicTrialSessionsHelper.fetchedDateString}
+        ></FetchedTimeMessage>
         <div className="padding-top-3">
           <PublicTrialSessionsRemoteProceedingsCard />
         </div>
@@ -254,6 +252,14 @@ function MobilePublicTrialsSessions({
   );
 }
 
+function FetchedTimeMessage({ fetchedDateString }) {
+  return (
+    <>
+      <div>Information on this page is current as of {fetchedDateString}.</div>
+    </>
+  );
+}
+
 function TablePagination({
   children,
   pageNumber,

From 8e28d1659ed7ceb0d8b0db5774e80497ad1a0838 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Wed, 30 Oct 2024 11:29:33 -0600
Subject: [PATCH 48/79] 10460: Remove extra element;

---
 .../src/views/Public/TrialsSessions/PublicTrialSessions.tsx   | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
index 2e6247ab90b..54f79b727fa 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
@@ -254,9 +254,7 @@ function MobilePublicTrialsSessions({
 
 function FetchedTimeMessage({ fetchedDateString }) {
   return (
-    <>
-      <div>Information on this page is current as of {fetchedDateString}.</div>
-    </>
+    <div>Information on this page is current as of {fetchedDateString}.</div>
   );
 }
 

From 4c5a475e2ed98edf2c570526de2e334272724a85 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Wed, 30 Oct 2024 11:52:46 -0600
Subject: [PATCH 49/79] 10460: Do not display empty pagination since it
 increases padding in view;

---
 .../src/views/Public/TrialsSessions/PublicTrialSessions.tsx      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
index 54f79b727fa..550c44d3bbe 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
@@ -265,6 +265,7 @@ function TablePagination({
   updateFormValueSequence,
 }) {
   const paginatorTop = useRef(null);
+  if (totalPages <= 1) return children;
   return (
     <>
       <div className="width-full grid-row margin-bottom-2 padding-top-3 flex-align-center">

From d6142b100256bc0db879c8530530a15635c8ade1 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Wed, 30 Oct 2024 12:30:02 -0600
Subject: [PATCH 50/79] 10460: Added more spacing between proceeding type
 options;

---
 .../views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
index 672b371c91c..c927cf8fd72 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
@@ -59,7 +59,7 @@ export const PublicTrialSessionsFilters = connect<
 
     function proceedingTypeRadioOption(key: string, value: string) {
       return (
-        <div className="usa-radio usa-radio__inline" key={key}>
+        <div className="usa-radio usa-radio__inline padding-right-1" key={key}>
           <input
             aria-describedby="proceeding-type-legend"
             checked={proceedingType === value}

From 8f25eb6e85157e1af827161755c4e120dcb1887f Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Wed, 30 Oct 2024 12:41:53 -0600
Subject: [PATCH 51/79] 10460: Fix select dropdown width on mobile;

---
 .../Public/TrialsSessions/PublicTrialSessionsFilters.tsx    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
index c927cf8fd72..70f9c21faec 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
@@ -108,7 +108,7 @@ export const PublicTrialSessionsFilters = connect<
         <div className="tablet:grid-col grid-col-12">
           <div className="grid-row">
             <div
-              className="tablet:grid-col-4 grid-col-12 padding-right-2"
+              className="tablet:grid-col-4 grid-col-12 tablet:padding-right-2"
               data-testid="session-type-filter"
             >
               <div className="margin-bottom-1">
@@ -160,7 +160,7 @@ export const PublicTrialSessionsFilters = connect<
               </NonMobile>
             </div>
             <div
-              className="tablet:grid-col-4 grid-col-12 padding-right-2"
+              className="tablet:grid-col-4 grid-col-12 tablet:padding-right-2"
               data-testid="location-filter"
             >
               <div className="margin-bottom-1">
@@ -216,7 +216,7 @@ export const PublicTrialSessionsFilters = connect<
               </NonMobile>
             </div>
             <div
-              className="tablet:grid-col-4 grid-col-12 padding-right-2"
+              className="tablet:grid-col-4 grid-col-12 tablet:padding-right-2"
               data-testid="judge-filter"
             >
               <div className="margin-bottom-1">

From 341a17f0bc864b8ddfb225d7c79fb4908728e91e Mon Sep 17 00:00:00 2001
From: Nechama Krigsman <nkrigsman@flexion.us>
Date: Wed, 30 Oct 2024 15:04:38 -0400
Subject: [PATCH 52/79] 10460: display total results for table counter; update
 font style;

---
 .../presenter/computeds/Public/publicTrialSessionsHelper.ts | 2 +-
 .../Public/TrialsSessions/PublicTrialSessionsTable.tsx      | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts b/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
index 46d1cb73b84..140aa8b37f6 100644
--- a/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
+++ b/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
@@ -158,6 +158,6 @@ export const publicTrialSessionsHelper = (
     trialCitiesByState,
     trialSessionJudgeOptions,
     trialSessionRows,
-    trialSessionsCount: paginatedTrialSessions.length,
+    trialSessionsCount: filteredTrialSessions.length,
   };
 };
diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
index ce1aa4d2f4e..acb738eef67 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
@@ -21,10 +21,8 @@ export const PublicTrialSessionsTable = connect<
     <>
       <div className="grid-row margin-bottom-2 width-full flex-align-center"></div>
       <div className="width-full text-right">
-        <span className="text-bold">Count:</span>{' '}
-        <span className="text-semibold">
-          {publicTrialSessionsHelper.trialSessionsCount}
-        </span>
+        <span className="text-semibold">Count:</span>{' '}
+        <span>{publicTrialSessionsHelper.trialSessionsCount}</span>
       </div>
       <div className="padding-1"></div>
       <table

From 6f3dd5affc116dce761b9ee6e42818ff1cd94314 Mon Sep 17 00:00:00 2001
From: Nechama Krigsman <nkrigsman@flexion.us>
Date: Wed, 30 Oct 2024 15:08:44 -0400
Subject: [PATCH 53/79] 10460: update tooltip text for swing session;

---
 .../views/Public/TrialsSessions/PublicTrialSessionsTable.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
index acb738eef67..fae1f017cb5 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
@@ -78,7 +78,7 @@ export const PublicTrialSessionsTable = connect<
                         className="fa-icon-blue"
                         icon="link"
                         size="sm"
-                        title="swing session"
+                        title="Swing session: will be held in two cities"
                       />
                     )}
                   </td>

From 77b3883e146ca42a8aacac5bb5eb31797c92649d Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Wed, 30 Oct 2024 13:58:43 -0600
Subject: [PATCH 54/79] 10460: Display spinner when user resets filters;

---
 .../Public/TrialsSessions/PublicTrialSessions.tsx  | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
index 550c44d3bbe..32a8605c500 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
@@ -42,7 +42,7 @@ type TrialsSessionsUiParams = {
     pageNumber?: number;
     proceedingType?: string;
   };
-  displayProgressSpinnerSequence?: (props: { timeInSeconds: number }) => void;
+  displayProgressSpinnerSequence: (props: { timeInSeconds: number }) => void;
 };
 
 export const PublicTrialSessions = connect(
@@ -66,6 +66,7 @@ export const PublicTrialSessions = connect(
         <BigHeader text="Scheduled Trial Sessions" />
 
         {NonMobilePublicTrialsSessions({
+          displayProgressSpinnerSequence,
           publicTrialSessionData,
           publicTrialSessionsHelper,
           resetPublicTrialSessionDataSequence,
@@ -84,6 +85,7 @@ export const PublicTrialSessions = connect(
 );
 
 function NonMobilePublicTrialsSessions({
+  displayProgressSpinnerSequence,
   publicTrialSessionData,
   publicTrialSessionsHelper,
   resetPublicTrialSessionDataSequence,
@@ -108,7 +110,10 @@ function NonMobilePublicTrialsSessions({
             link
             data-testid="trial-sessions-reset-filters-button"
             disabled={!publicTrialSessionsHelper.filtersHaveBeenModified}
-            onClick={() => resetPublicTrialSessionDataSequence()}
+            onClick={() => {
+              resetPublicTrialSessionDataSequence();
+              displayProgressSpinnerSequence({ timeInSeconds: 0.25 });
+            }}
           >
             Reset Filters
           </Button>
@@ -178,7 +183,10 @@ function MobilePublicTrialsSessions({
               link
               data-testid="trial-sessions-reset-filters-button"
               disabled={!publicTrialSessionsHelper.filtersHaveBeenModified}
-              onClick={() => resetPublicTrialSessionDataSequence()}
+              onClick={() => {
+                resetPublicTrialSessionDataSequence();
+                displayProgressSpinnerSequence({ timeInSeconds: 0.25 });
+              }}
             >
               Reset Filters
             </Button>

From 9c24aa0a8a3de66da96e02fc22ab81b4e719d737 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Wed, 30 Oct 2024 14:26:05 -0600
Subject: [PATCH 55/79] 10460: Fix paginator spacing;

---
 .../src/views/Public/TrialsSessions/PublicTrialSessions.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
index 32a8605c500..eef862ac5c1 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
@@ -276,7 +276,7 @@ function TablePagination({
   if (totalPages <= 1) return children;
   return (
     <>
-      <div className="width-full grid-row margin-bottom-2 padding-top-3 flex-align-center">
+      <div className="width-full grid-row margin-bottom-1 padding-top-1 flex-align-center">
         <div className="grid-col" ref={paginatorTop}>
           <Paginator
             currentPageIndex={pageNumber}

From 19378f86c962d83ccb2a5c3f8e9874a541a19516 Mon Sep 17 00:00:00 2001
From: Nechama Krigsman <nkrigsman@flexion.us>
Date: Thu, 31 Oct 2024 10:08:46 -0400
Subject: [PATCH 56/79] 10460: fix dropdowns display when resizing screen;

---
 .../Public/TrialsSessions/PublicTrialSessionsFilters.tsx  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
index 70f9c21faec..b53fa77cf60 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
@@ -105,10 +105,10 @@ export const PublicTrialSessionsFilters = connect<
           </fieldset>
         </FormGroup>
 
-        <div className="tablet:grid-col grid-col-12">
+        <div className="desktop:grid-col grid-col-12">
           <div className="grid-row">
             <div
-              className="tablet:grid-col-4 grid-col-12 tablet:padding-right-2"
+              className="desktop:grid-col-4 grid-col-12 tablet:padding-right-2"
               data-testid="session-type-filter"
             >
               <div className="margin-bottom-1">
@@ -160,7 +160,7 @@ export const PublicTrialSessionsFilters = connect<
               </NonMobile>
             </div>
             <div
-              className="tablet:grid-col-4 grid-col-12 tablet:padding-right-2"
+              className="desktop:grid-col-4 grid-col-12 tablet:padding-right-2"
               data-testid="location-filter"
             >
               <div className="margin-bottom-1">
@@ -216,7 +216,7 @@ export const PublicTrialSessionsFilters = connect<
               </NonMobile>
             </div>
             <div
-              className="tablet:grid-col-4 grid-col-12 tablet:padding-right-2"
+              className="desktop:grid-col-4 grid-col-12 tablet:padding-right-2"
               data-testid="judge-filter"
             >
               <div className="margin-bottom-1">

From 83f1d491062d5e5cf7510c08e68c564e832f58c8 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Thu, 31 Oct 2024 08:46:31 -0600
Subject: [PATCH 57/79] 10460: Fix spacing between the icons and locations on
 desktop view;

---
 .../Public/TrialsSessions/PublicTrialSessionsTable.tsx    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
index acb738eef67..948185ce979 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
@@ -31,12 +31,12 @@ export const PublicTrialSessionsTable = connect<
       >
         <thead>
           <tr>
-            <th className="width-card">Start Date</th>
+            <th className="width-mobile">Start Date</th>
             <th className="icon-column" />
             <th className="width-mobile">Location</th>
-            <th className="width-card-lg">Proceeding Type</th>
-            <th className="width-card">Session Type</th>
-            <th className="width-card">Judge</th>
+            <th className="width-mobile">Proceeding Type</th>
+            <th className="width-mobile">Session Type</th>
+            <th className="width-mobile">Judge</th>
           </tr>
         </thead>
         {publicTrialSessionsHelper.trialSessionRows.map(row => {

From c7aa02e85dc2dfae44af37120b0a7038aca83737 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Thu, 31 Oct 2024 08:50:55 -0600
Subject: [PATCH 58/79] 10460: Fix padding on remote links card;

---
 .../TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx
index 350d1c5a16b..7f151493585 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx
@@ -12,7 +12,7 @@ export const PublicTrialSessionsRemoteProceedingsCard = connect(
             <h2>Remote Proceedings</h2>
           </div>
           <div className="card-content ">
-            <div className="padding-left-2 margin-bottom-9">
+            <div className="padding-left-2 margin-bottom-3">
               <Button
                 link
                 className="padding-bottom-0 text-left"

From a18315649161b19e44c62c163aa1a9d584b665ea Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Thu, 31 Oct 2024 09:06:05 -0600
Subject: [PATCH 59/79] 10460: Reduce width of card seperator;

---
 .../PublicTrialSessionsRemoteProceedingsCard.tsx               | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx
index 7f151493585..ff52e6e7c57 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx
@@ -8,9 +8,10 @@ export const PublicTrialSessionsRemoteProceedingsCard = connect(
     return (
       <>
         <div className="card" data-testid="remote-proceedings-card">
-          <div className="card-header padding-left-2 padding-top-2 border-bottom-1px border-base-lighter">
+          <div className="card-header padding-left-2 padding-top-2">
             <h2>Remote Proceedings</h2>
           </div>
+          <div className="margin-left-2 margin-right-2 border-bottom-1px border-base-lighter"></div>
           <div className="card-content ">
             <div className="padding-left-2 margin-bottom-3">
               <Button

From f5e6f5371533ca40fdfbdab065a09b0e5b16d0ef Mon Sep 17 00:00:00 2001
From: Nechama Krigsman <nkrigsman@flexion.us>
Date: Thu, 31 Oct 2024 14:00:49 -0400
Subject: [PATCH 60/79] 10460: display icon for swing session on mobile;

---
 .../PublicMobileTrialSessionsDataRow.tsx            | 13 +++++++++++++
 .../PublicMobileTrialSessionsTable.tsx              |  1 +
 2 files changed, 14 insertions(+)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsDataRow.tsx b/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsDataRow.tsx
index 40060997e6d..b317c589990 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsDataRow.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsDataRow.tsx
@@ -1,3 +1,4 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 
 type PublicMobileTrialSessionsDataRowProps = {
@@ -6,6 +7,7 @@ type PublicMobileTrialSessionsDataRowProps = {
   judgeName: string;
   proceedingType: string;
   sessionType: string;
+  swingSession: boolean;
   trialLocation: string;
 };
 
@@ -14,6 +16,7 @@ export const PublicMobileTrialSessionsDataRow = function ({
   proceedingType,
   sessionType,
   startDate,
+  swingSession,
   trialLocation,
   // trialSessionId,
 }: PublicMobileTrialSessionsDataRowProps) {
@@ -33,6 +36,16 @@ export const PublicMobileTrialSessionsDataRow = function ({
         <div className="grid-col-6 padding-bottom-1">
           <div className="text-semibold">Location</div>
           <div className="padding-bottom-2">
+            {swingSession && (
+              <span className="padding-right-1">
+                <FontAwesomeIcon
+                  className="fa-icon-blue"
+                  icon="link"
+                  size="sm"
+                  title="Swing session: will be held in two cities"
+                />
+              </span>
+            )}
             {/* TODO: ENABLE ONCE 10461 IS COMPLETE */}
             {/* <a href={`/trial-session-detail/${trialSessionId}`}> */}
             {trialLocation}
diff --git a/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx b/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx
index 8b970c13a51..cca4f7906c9 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx
@@ -58,6 +58,7 @@ export const PublicMobileTrialSessionsTable = connect<
                           proceedingType={tsRow.proceedingType}
                           sessionType={tsRow.sessionType}
                           startDate={tsRow.formattedStartDate}
+                          swingSession={tsRow.swingSession}
                           trialLocation={tsRow.trialLocation}
                           trialSessionId={tsRow.trialSessionId}
                         />

From c6a82b384b1a543ad28a024636e16cace53640ec Mon Sep 17 00:00:00 2001
From: Nechama Krigsman <nkrigsman@flexion.us>
Date: Thu, 31 Oct 2024 14:47:46 -0400
Subject: [PATCH 61/79] 10460: display empty state message on mobile;

---
 .../Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx   | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx b/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx
index cca4f7906c9..93e6e4cdd13 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx
@@ -23,6 +23,9 @@ export const PublicMobileTrialSessionsTable = connect<
           {publicTrialSessionsHelper.trialSessionsCount}
         </span>
       </div>
+      {publicTrialSessionsHelper.trialSessionRows.length === 0 && (
+        <p>There are no trial sessions for the selected filters.</p>
+      )}
       <div className="padding-1"></div>
 
       <table className="usa-table usa-table--stacked-header usa-table--borderless">

From a4862d6b092d846951ca140a3845d9ddae46173b Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Thu, 31 Oct 2024 14:30:35 -0600
Subject: [PATCH 62/79] 10460: Use Phone element instead of mobile;

---
 .../Public/TrialsSessions/PublicTrialSessions.tsx      | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
index eef862ac5c1..00c519e57f6 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
@@ -4,7 +4,7 @@ import {
 } from '@web-client/ustc-ui/Accordion/Accordion';
 import { BigHeader } from '@web-client/views/BigHeader';
 import { Button } from '@web-client/ustc-ui/Button/Button';
-import { Mobile, NonMobile } from '@web-client/ustc-ui/Responsive/Responsive';
+import { NonPhone, Phone } from '@web-client/ustc-ui/Responsive/Responsive';
 import { Paginator } from '@web-client/ustc-ui/Pagination/Paginator';
 import { PillButton } from '@web-client/ustc-ui/Button/PillButton';
 import { PublicMobileTrialSessionsTable } from '@web-client/views/Public/TrialsSessions/PublicMobileTrialSessionsTable';
@@ -92,7 +92,7 @@ function NonMobilePublicTrialsSessions({
   updateFormValueSequence,
 }: TrialsSessionsUiParams) {
   return (
-    <NonMobile>
+    <NonPhone>
       <section className="usa-section grid-container">
         <div className="grid-row">
           <div className="tablet:grid-col-8 grid-col-12 padding-top-2">
@@ -128,7 +128,7 @@ function NonMobilePublicTrialsSessions({
           </TablePagination>
         </div>
       </section>
-    </NonMobile>
+    </NonPhone>
   );
 }
 
@@ -161,7 +161,7 @@ function MobilePublicTrialsSessions({
   };
 
   return (
-    <Mobile>
+    <Phone>
       <section className="usa-section grid-container">
         <FetchedTimeMessage
           fetchedDateString={publicTrialSessionsHelper.fetchedDateString}
@@ -256,7 +256,7 @@ function MobilePublicTrialsSessions({
           <PublicMobileTrialSessionsTable />
         </TablePagination>
       </section>
-    </Mobile>
+    </Phone>
   );
 }
 

From aabe03604f3cb858bce73c1d50c91a66b09752c6 Mon Sep 17 00:00:00 2001
From: Nechama Krigsman <nkrigsman@flexion.us>
Date: Fri, 1 Nov 2024 12:50:53 -0400
Subject: [PATCH 63/79] 10460: adjust padding for filter dropdowns on mobile;;

---
 .../Public/TrialsSessions/PublicTrialSessionsFilters.tsx    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
index b53fa77cf60..07346ac92e3 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
@@ -111,7 +111,7 @@ export const PublicTrialSessionsFilters = connect<
               className="desktop:grid-col-4 grid-col-12 tablet:padding-right-2"
               data-testid="session-type-filter"
             >
-              <div className="margin-bottom-1">
+              <div className="margin-bottom-4">
                 <label className="usa-label" htmlFor="session-type-filter">
                   Session type{' '}
                   <span className="optional-light-text">(optional)</span>
@@ -163,7 +163,7 @@ export const PublicTrialSessionsFilters = connect<
               className="desktop:grid-col-4 grid-col-12 tablet:padding-right-2"
               data-testid="location-filter"
             >
-              <div className="margin-bottom-1">
+              <div className="margin-bottom-4">
                 <label
                   className="usa-label"
                   htmlFor="location-filter"
@@ -219,7 +219,7 @@ export const PublicTrialSessionsFilters = connect<
               className="desktop:grid-col-4 grid-col-12 tablet:padding-right-2"
               data-testid="judge-filter"
             >
-              <div className="margin-bottom-1">
+              <div className="margin-bottom-4">
                 <label
                   className="usa-label"
                   htmlFor="judges-filter"

From f28c20b2bb669c3ed6dfd8a7d78e36d23bf9d07e Mon Sep 17 00:00:00 2001
From: Nechama Krigsman <nkrigsman@flexion.us>
Date: Sun, 3 Nov 2024 14:54:08 -0500
Subject: [PATCH 64/79] 10460: adjust padding on mobile;

---
 .../views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
index 07346ac92e3..5888f27f3d3 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
@@ -219,7 +219,7 @@ export const PublicTrialSessionsFilters = connect<
               className="desktop:grid-col-4 grid-col-12 tablet:padding-right-2"
               data-testid="judge-filter"
             >
-              <div className="margin-bottom-4">
+              <div className="margin-bottom-1">
                 <label
                   className="usa-label"
                   htmlFor="judges-filter"

From dcf1d5e7f0b14961a47b50d3e84c99fd5b904fe1 Mon Sep 17 00:00:00 2001
From: Nechama Krigsman <nkrigsman@flexion.us>
Date: Mon, 4 Nov 2024 09:43:37 -0500
Subject: [PATCH 65/79] 10460: add aria-labels to swing session column;

---
 .../views/Public/TrialsSessions/PublicTrialSessionsTable.tsx   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
index 11dcd3db0b1..ded8942ea9a 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsTable.tsx
@@ -32,7 +32,7 @@ export const PublicTrialSessionsTable = connect<
         <thead>
           <tr>
             <th className="width-mobile">Start Date</th>
-            <th className="icon-column" />
+            <th aria-label="Swing session icon" className="icon-column" />
             <th className="width-mobile">Location</th>
             <th className="width-mobile">Proceeding Type</th>
             <th className="width-mobile">Session Type</th>
@@ -75,6 +75,7 @@ export const PublicTrialSessionsTable = connect<
                   <td>
                     {row.swingSession && (
                       <FontAwesomeIcon
+                        aria-label="Swing session: will be held in two cities"
                         className="fa-icon-blue"
                         icon="link"
                         size="sm"

From 9b6eadbfc2ebc438857f42a84b14fad865c37f68 Mon Sep 17 00:00:00 2001
From: Nechama Krigsman <nkrigsman@flexion.us>
Date: Mon, 4 Nov 2024 15:58:02 -0500
Subject: [PATCH 66/79] 10460: create a custom select element for public trial
 session page mobile view;

---
 .../Public/publicTrialSessionsHelper.ts       |   2 +-
 web-client/src/ustc-ui/Select/Selects.tsx     |  44 ++++
 .../PublicTrialSessionsFilters.tsx            | 207 ++++++++++++------
 3 files changed, 182 insertions(+), 71 deletions(-)
 create mode 100644 web-client/src/ustc-ui/Select/Selects.tsx

diff --git a/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts b/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
index 140aa8b37f6..44c9d7671c4 100644
--- a/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
+++ b/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
@@ -111,7 +111,7 @@ export const publicTrialSessionsHelper = (
   const trialSessionJudgeOptions = trialSessionJudges.map(
     trialSessionJudge => ({
       label: trialSessionJudge.name,
-      value: { name: trialSessionJudge.name, userId: trialSessionJudge.userId },
+      value: trialSessionJudge.name,
     }),
   );
 
diff --git a/web-client/src/ustc-ui/Select/Selects.tsx b/web-client/src/ustc-ui/Select/Selects.tsx
new file mode 100644
index 00000000000..a1e9f47231b
--- /dev/null
+++ b/web-client/src/ustc-ui/Select/Selects.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+
+export function Select({ defaultValue, name, onChange, options, value }) {
+  return (
+    <>
+      <select
+        className="usa-select margin-bottom-2"
+        name={name}
+        value={value || ''}
+        onChange={e => {
+          onChange(e.target.value);
+        }}
+      >
+        {defaultValue && (
+          <option key={defaultValue.label} value={defaultValue.value}>
+            {defaultValue.label}
+          </option>
+        )}
+
+        {options.map(option => {
+          if (option.value) {
+            return (
+              <option key={option.label} value={option.value}>
+                {option.label}
+              </option>
+            );
+          } else if (option.options) {
+            return (
+              <optgroup key={option.label} label={option.label}>
+                {option.options.map(childOptions => {
+                  return (
+                    <option key={childOptions.label} value={childOptions.value}>
+                      {childOptions.label}
+                    </option>
+                  );
+                })}
+              </optgroup>
+            );
+          }
+        })}
+      </select>
+    </>
+  );
+}
diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
index 5888f27f3d3..f9f73e0912c 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
@@ -1,6 +1,7 @@
 import { FormGroup } from '@web-client/ustc-ui/FormGroup/FormGroup';
-import { NonMobile } from '@web-client/ustc-ui/Responsive/Responsive';
+import { NonPhone, Phone } from '@web-client/ustc-ui/Responsive/Responsive';
 import { PillButton } from '@web-client/ustc-ui/Button/PillButton';
+import { Select } from '@web-client/ustc-ui/Select/Selects';
 import { SelectSearch } from '@web-client/ustc-ui/Select/SelectSearch';
 import { TRIAL_SESSION_PROCEEDING_TYPES } from '@shared/business/entities/EntityConstants';
 import { props as cerebralProps } from 'cerebral';
@@ -116,29 +117,51 @@ export const PublicTrialSessionsFilters = connect<
                   Session type{' '}
                   <span className="optional-light-text">(optional)</span>
                 </label>
-                <SelectSearch
-                  aria-labelledby="session-type-filter-label"
-                  data-testid="session-type-filter-select"
-                  inputId="session-type-filter"
-                  name="sessionType"
-                  options={publicTrialSessionsHelper.sessionTypeOptions}
-                  placeholder="- Select one or more -"
-                  value={{
-                    label: '- Select one or more -',
-                    value: '',
-                  }}
-                  onChange={sessionType => {
-                    if (sessionType) {
-                      publicTrialsSessionUpdateFormValueSequence({
-                        key: `sessionTypes.${sessionType.value}`,
-                        root: ROOT,
-                        value: sessionType.label,
-                      });
-                    }
-                  }}
-                />
+                <NonPhone>
+                  <SelectSearch
+                    aria-labelledby="session-type-filter-label"
+                    data-testid="session-type-filter-select"
+                    inputId="session-type-filter"
+                    name="sessionType"
+                    options={publicTrialSessionsHelper.sessionTypeOptions}
+                    placeholder="- Select one or more -"
+                    value={{
+                      label: '- Select one or more -',
+                      value: '',
+                    }}
+                    onChange={sessionType => {
+                      if (sessionType) {
+                        publicTrialsSessionUpdateFormValueSequence({
+                          key: `sessionTypes.${sessionType.value}`,
+                          root: ROOT,
+                          value: sessionType.label,
+                        });
+                      }
+                    }}
+                  />{' '}
+                </NonPhone>
+                <Phone>
+                  <Select
+                    defaultValue={{
+                      label: '- Select one or more -',
+                      value: '',
+                    }}
+                    name="sessionType"
+                    options={publicTrialSessionsHelper.sessionTypeOptions}
+                    value={'- Select one or more -'}
+                    onChange={sessiontype => {
+                      if (sessiontype) {
+                        publicTrialsSessionUpdateFormValueSequence({
+                          key: `sessionTypes.${sessiontype}`,
+                          root: ROOT,
+                          value: sessiontype,
+                        });
+                      }
+                    }}
+                  />
+                </Phone>
               </div>
-              <NonMobile>
+              <NonPhone>
                 {Object.entries(
                   sessionTypes as {
                     [key: string]: string;
@@ -157,7 +180,7 @@ export const PublicTrialSessionsFilters = connect<
                     }}
                   />
                 ))}
-              </NonMobile>
+              </NonPhone>
             </div>
             <div
               className="desktop:grid-col-4 grid-col-12 tablet:padding-right-2"
@@ -172,29 +195,51 @@ export const PublicTrialSessionsFilters = connect<
                   Location{' '}
                   <span className="optional-light-text">(optional)</span>
                 </label>
-                <SelectSearch
-                  aria-labelledby="location-filter-label"
-                  data-testid="location-filter-search"
-                  inputId="location-filter"
-                  name="location"
-                  options={publicTrialSessionsHelper.trialCitiesByState}
-                  placeholder="- Select one or more -"
-                  value={{
-                    label: '- Select one or more -',
-                    value: '',
-                  }}
-                  onChange={location => {
-                    if (location) {
-                      publicTrialsSessionUpdateFormValueSequence({
-                        key: `locations.${location.value}`,
-                        root: ROOT,
-                        value: location.label,
-                      });
-                    }
-                  }}
-                />
+                <NonPhone>
+                  <SelectSearch
+                    aria-labelledby="location-filter-label"
+                    data-testid="location-filter-search"
+                    inputId="location-filter"
+                    name="location"
+                    options={publicTrialSessionsHelper.trialCitiesByState}
+                    placeholder="- Select one or more -"
+                    value={{
+                      label: '- Select one or more -',
+                      value: '',
+                    }}
+                    onChange={location => {
+                      if (location) {
+                        publicTrialsSessionUpdateFormValueSequence({
+                          key: `locations.${location.value}`,
+                          root: ROOT,
+                          value: location.label,
+                        });
+                      }
+                    }}
+                  />
+                </NonPhone>
+                <Phone>
+                  <Select
+                    defaultValue={{
+                      label: '- Select one or more -',
+                      value: '',
+                    }}
+                    name="locations"
+                    options={publicTrialSessionsHelper.trialCitiesByState}
+                    value={locations}
+                    onChange={location => {
+                      if (location) {
+                        publicTrialsSessionUpdateFormValueSequence({
+                          key: `locations.${location}`,
+                          root: ROOT,
+                          value: location,
+                        });
+                      }
+                    }}
+                  />
+                </Phone>
               </div>
-              <NonMobile>
+              <NonPhone>
                 {Object.entries(
                   locations as {
                     [key: string]: string;
@@ -213,7 +258,7 @@ export const PublicTrialSessionsFilters = connect<
                     }}
                   />
                 ))}
-              </NonMobile>
+              </NonPhone>
             </div>
             <div
               className="desktop:grid-col-4 grid-col-12 tablet:padding-right-2"
@@ -227,29 +272,51 @@ export const PublicTrialSessionsFilters = connect<
                 >
                   Judge <span className="optional-light-text">(optional)</span>
                 </label>
-                <SelectSearch
-                  aria-labelledby="judges-filter-label"
-                  data-testid="judge-filter-search"
-                  inputId="judges-filter"
-                  name="judges"
-                  options={publicTrialSessionsHelper.trialSessionJudgeOptions}
-                  placeholder="- Select one or more -"
-                  value={{
-                    label: '- Select one or more -',
-                    value: { name: '', userId: '' },
-                  }}
-                  onChange={judgeInfo => {
-                    if (judgeInfo) {
-                      publicTrialsSessionUpdateFormValueSequence({
-                        key: `judges.${judgeInfo.value.name}`,
-                        root: ROOT,
-                        value: judgeInfo.value.name,
-                      });
-                    }
-                  }}
-                />
+                <NonPhone>
+                  <SelectSearch
+                    aria-labelledby="judges-filter-label"
+                    data-testid="judge-filter-search"
+                    inputId="judges-filter"
+                    name="judges"
+                    options={publicTrialSessionsHelper.trialSessionJudgeOptions}
+                    placeholder="- Select one or more -"
+                    value={{
+                      label: '- Select one or more -',
+                      value: { name: '', userId: '' },
+                    }}
+                    onChange={judgeInfo => {
+                      if (judgeInfo) {
+                        publicTrialsSessionUpdateFormValueSequence({
+                          key: `judges.${judgeInfo.value.name}`,
+                          root: ROOT,
+                          value: judgeInfo.value.name,
+                        });
+                      }
+                    }}
+                  />
+                </NonPhone>
+                <Phone>
+                  <Select
+                    defaultValue={{
+                      label: '- Select one or more -',
+                      value: '',
+                    }}
+                    name="judges"
+                    options={publicTrialSessionsHelper.trialSessionJudgeOptions}
+                    value={judges}
+                    onChange={judgeName => {
+                      if (judgeName) {
+                        publicTrialsSessionUpdateFormValueSequence({
+                          key: `judges.${judgeName}`,
+                          root: ROOT,
+                          value: judgeName,
+                        });
+                      }
+                    }}
+                  />
+                </Phone>
               </div>
-              <NonMobile>
+              <NonPhone>
                 {Object.entries(judges as { [key: string]: string }).map(
                   ([judgeKey, judgeLabel]) => (
                     <PillButton
@@ -266,7 +333,7 @@ export const PublicTrialSessionsFilters = connect<
                     />
                   ),
                 )}
-              </NonMobile>
+              </NonPhone>
             </div>
           </div>
         </div>

From 8c7288717aee074952f6a61995d69651cf1c606a Mon Sep 17 00:00:00 2001
From: Nechama Krigsman <nkrigsman@flexion.us>
Date: Mon, 4 Nov 2024 16:05:00 -0500
Subject: [PATCH 67/79] 10460: fix test and types;

---
 .../Public/publicTrialSessionHelper.test.ts   | 20 ++++---------------
 .../Public/publicTrialSessionsHelper.ts       |  5 +----
 2 files changed, 5 insertions(+), 20 deletions(-)

diff --git a/web-client/src/presenter/computeds/Public/publicTrialSessionHelper.test.ts b/web-client/src/presenter/computeds/Public/publicTrialSessionHelper.test.ts
index e9b96d5cd5c..98e4c7d2e25 100644
--- a/web-client/src/presenter/computeds/Public/publicTrialSessionHelper.test.ts
+++ b/web-client/src/presenter/computeds/Public/publicTrialSessionHelper.test.ts
@@ -88,31 +88,19 @@ describe('publicTrialSessionsHelper', () => {
     expect(trialSessionJudgeOptions).toEqual([
       {
         label: 'TEST_JUDGE_1',
-        value: {
-          name: 'TEST_JUDGE_1',
-          userId: '1',
-        },
+        value: 'TEST_JUDGE_1',
       },
       {
         label: 'TEST_JUDGE_2',
-        value: {
-          name: 'TEST_JUDGE_2',
-          userId: '2',
-        },
+        value: 'TEST_JUDGE_2',
       },
       {
         label: 'TEST_JUDGE_3',
-        value: {
-          name: 'TEST_JUDGE_3',
-          userId: '3',
-        },
+        value: 'TEST_JUDGE_3',
       },
       {
         label: 'TEST_JUDGE_4',
-        value: {
-          name: 'TEST_JUDGE_4',
-          userId: '4',
-        },
+        value: 'TEST_JUDGE_4',
       },
     ]);
   });
diff --git a/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts b/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
index 44c9d7671c4..13f48f66187 100644
--- a/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
+++ b/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
@@ -21,10 +21,7 @@ export type PublicTrialSessionsHelperResults = {
   }[];
   trialSessionJudgeOptions: {
     label: string;
-    value: {
-      name: string;
-      userId: string;
-    };
+    value: string;
   }[];
   filtersHaveBeenModified: boolean;
   totalPages: number;

From 512a10ace8f125b86e7997cd80e44b579ae36bf8 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Tue, 5 Nov 2024 07:45:16 -0700
Subject: [PATCH 68/79] 10460: Fix typing and use correct value from params;

---
 .../Public/TrialsSessions/PublicTrialSessionsFilters.tsx    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
index f9f73e0912c..f59c948abda 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
@@ -282,14 +282,14 @@ export const PublicTrialSessionsFilters = connect<
                     placeholder="- Select one or more -"
                     value={{
                       label: '- Select one or more -',
-                      value: { name: '', userId: '' },
+                      value: '',
                     }}
                     onChange={judgeInfo => {
                       if (judgeInfo) {
                         publicTrialsSessionUpdateFormValueSequence({
-                          key: `judges.${judgeInfo.value.name}`,
+                          key: `judges.${judgeInfo.value}`,
                           root: ROOT,
-                          value: judgeInfo.value.name,
+                          value: judgeInfo.value,
                         });
                       }
                     }}

From 75748c87d1153f2c6bbc476d63561adf8c4d4a89 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Tue, 5 Nov 2024 07:50:16 -0700
Subject: [PATCH 69/79] 10460: Move cypress test;

---
 .../accessibility/public/trialSessions}/trial-sessions.cy.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename cypress/{readonly/integration/public => local-only/tests/accessibility/public/trialSessions}/trial-sessions.cy.ts (95%)

diff --git a/cypress/readonly/integration/public/trial-sessions.cy.ts b/cypress/local-only/tests/accessibility/public/trialSessions/trial-sessions.cy.ts
similarity index 95%
rename from cypress/readonly/integration/public/trial-sessions.cy.ts
rename to cypress/local-only/tests/accessibility/public/trialSessions/trial-sessions.cy.ts
index 57c1b8a7fde..2849d7b65ba 100644
--- a/cypress/readonly/integration/public/trial-sessions.cy.ts
+++ b/cypress/local-only/tests/accessibility/public/trialSessions/trial-sessions.cy.ts
@@ -1,4 +1,4 @@
-import { selectTypeaheadInput } from '../../../helpers/components/typeAhead/select-typeahead-input';
+import { selectTypeaheadInput } from '../../../../../helpers/components/typeAhead/select-typeahead-input';
 
 describe('Public Trial Sessions', () => {
   beforeEach(() => {

From 5a909785436da1096452fea9de367fd5aba81f5d Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Tue, 5 Nov 2024 08:29:49 -0700
Subject: [PATCH 70/79] 10460: Move cypress test;

---
 .../public/trialSessions/trial-sessions.cy.ts                     | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename cypress/local-only/tests/{accessibility => integration}/public/trialSessions/trial-sessions.cy.ts (100%)

diff --git a/cypress/local-only/tests/accessibility/public/trialSessions/trial-sessions.cy.ts b/cypress/local-only/tests/integration/public/trialSessions/trial-sessions.cy.ts
similarity index 100%
rename from cypress/local-only/tests/accessibility/public/trialSessions/trial-sessions.cy.ts
rename to cypress/local-only/tests/integration/public/trialSessions/trial-sessions.cy.ts

From 381ae084aa1816b930f512e6665f058130983f80 Mon Sep 17 00:00:00 2001
From: Nechama Krigsman <nkrigsman@flexion.us>
Date: Tue, 5 Nov 2024 12:53:09 -0500
Subject: [PATCH 71/79] 10460: create shared component for filter dropdowns;
 update cypress tests

---
 .../integration/public/trial-sessions.cy.ts   |  26 +-
 .../PublicTrialSessionsFilters.tsx            | 304 +++++-------------
 2 files changed, 97 insertions(+), 233 deletions(-)

diff --git a/cypress/readonly/integration/public/trial-sessions.cy.ts b/cypress/readonly/integration/public/trial-sessions.cy.ts
index 57c1b8a7fde..aebc7bbdcca 100644
--- a/cypress/readonly/integration/public/trial-sessions.cy.ts
+++ b/cypress/readonly/integration/public/trial-sessions.cy.ts
@@ -35,32 +35,34 @@ describe('Public Trial Sessions', () => {
 
   it('should display Pill Button for every dropdown filter selected', () => {
     const SESSION_TYPE = 'Regular';
-    selectTypeaheadInput('session-type-filter-select', SESSION_TYPE);
-    cy.get(`[data-testid="session-${SESSION_TYPE}-pill-button"]`);
+    selectTypeaheadInput('sessionTypes-filter-select', SESSION_TYPE);
+    cy.get(`[data-testid="sessionTypes-${SESSION_TYPE}-pill-button"]`);
 
     const LOCATION = 'Mobile, Alabama';
-    selectTypeaheadInput('location-filter-search', LOCATION);
-    cy.get(`[data-testid="location-${LOCATION}-pill-button"]`);
+    selectTypeaheadInput('locations-filter-select', LOCATION);
+    cy.get(`[data-testid="locations-${LOCATION}-pill-button"]`);
 
     const JUDGE = 'Buch';
-    selectTypeaheadInput('judge-filter-search', JUDGE);
-    cy.get(`[data-testid="judge-${JUDGE}-pill-button"]`);
+    selectTypeaheadInput('judges-filter-select', JUDGE);
+    cy.get(`[data-testid="judges-${JUDGE}-pill-button"]`);
 
-    cy.get(`[data-testid="session-${SESSION_TYPE}-pill-button"]`)
+    cy.get(`[data-testid="sessionTypes-${SESSION_TYPE}-pill-button"]`)
       .find('button')
       .click();
-    cy.get(`[data-testid="session-${SESSION_TYPE}-pill-button"]`).should(
+    cy.get(`[data-testid="sessionTypes-${SESSION_TYPE}-pill-button"]`).should(
       'not.exist',
     );
 
-    cy.get(`[data-testid="location-${LOCATION}-pill-button"]`)
+    cy.get(`[data-testid="locations-${LOCATION}-pill-button"]`)
       .find('button')
       .click();
-    cy.get(`[data-testid="location-${LOCATION}-pill-button"]`).should(
+    cy.get(`[data-testid="locations-${LOCATION}-pill-button"]`).should(
       'not.exist',
     );
 
-    cy.get(`[data-testid="judge-${JUDGE}-pill-button"]`).find('button').click();
-    cy.get(`[data-testid="judge-${JUDGE}-pill-button"]`).should('not.exist');
+    cy.get(`[data-testid="judges-${JUDGE}-pill-button"]`)
+      .find('button')
+      .click();
+    cy.get(`[data-testid="judges-${JUDGE}-pill-button"]`).should('not.exist');
   });
 });
diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
index f9f73e0912c..dce9bb2b1eb 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
@@ -46,11 +46,9 @@ export const PublicTrialSessionsFilters = connect<
       sessionTypes = {},
     } = publicTrialSessionData;
 
-    const publicTrialsSessionUpdateFormValueSequence = (
-      ...args: Parameters<typeof updateFormValueSequence>
-    ) => {
+    const handleUpdateFormValue = (key: string, value: string | undefined) => {
       displayProgressSpinnerSequence({ timeInSeconds: 0.25 });
-      updateFormValueSequence(...args);
+      updateFormValueSequence({ key, root: ROOT, value });
       updateFormValueSequence({
         key: 'pageNumber',
         root: ROOT,
@@ -70,11 +68,7 @@ export const PublicTrialSessionsFilters = connect<
             type="radio"
             value={value}
             onChange={e => {
-              publicTrialsSessionUpdateFormValueSequence({
-                key: e.target.name,
-                root: ROOT,
-                value: e.target.value,
-              });
+              handleUpdateFormValue(e.target.name, e.target.value);
             }}
           />
           <label
@@ -112,228 +106,37 @@ export const PublicTrialSessionsFilters = connect<
               className="desktop:grid-col-4 grid-col-12 tablet:padding-right-2"
               data-testid="session-type-filter"
             >
-              <div className="margin-bottom-4">
-                <label className="usa-label" htmlFor="session-type-filter">
-                  Session type{' '}
-                  <span className="optional-light-text">(optional)</span>
-                </label>
-                <NonPhone>
-                  <SelectSearch
-                    aria-labelledby="session-type-filter-label"
-                    data-testid="session-type-filter-select"
-                    inputId="session-type-filter"
-                    name="sessionType"
-                    options={publicTrialSessionsHelper.sessionTypeOptions}
-                    placeholder="- Select one or more -"
-                    value={{
-                      label: '- Select one or more -',
-                      value: '',
-                    }}
-                    onChange={sessionType => {
-                      if (sessionType) {
-                        publicTrialsSessionUpdateFormValueSequence({
-                          key: `sessionTypes.${sessionType.value}`,
-                          root: ROOT,
-                          value: sessionType.label,
-                        });
-                      }
-                    }}
-                  />{' '}
-                </NonPhone>
-                <Phone>
-                  <Select
-                    defaultValue={{
-                      label: '- Select one or more -',
-                      value: '',
-                    }}
-                    name="sessionType"
-                    options={publicTrialSessionsHelper.sessionTypeOptions}
-                    value={'- Select one or more -'}
-                    onChange={sessiontype => {
-                      if (sessiontype) {
-                        publicTrialsSessionUpdateFormValueSequence({
-                          key: `sessionTypes.${sessiontype}`,
-                          root: ROOT,
-                          value: sessiontype,
-                        });
-                      }
-                    }}
-                  />
-                </Phone>
-              </div>
-              <NonPhone>
-                {Object.entries(
-                  sessionTypes as {
-                    [key: string]: string;
-                  },
-                ).map(([sessionTypeKey, sessionTypeLabel]) => (
-                  <PillButton
-                    data-testid={`session-${sessionTypeLabel}-pill-button`}
-                    key={sessionTypeLabel}
-                    text={sessionTypeLabel}
-                    onRemove={() => {
-                      publicTrialsSessionUpdateFormValueSequence({
-                        key: `sessionTypes.${sessionTypeKey}`,
-                        root: ROOT,
-                        value: undefined,
-                      });
-                    }}
-                  />
-                ))}
-              </NonPhone>
+              <FilterSelect
+                label="Session type"
+                name="sessionTypes"
+                options={publicTrialSessionsHelper.sessionTypeOptions}
+                selectedValues={sessionTypes}
+                onChange={handleUpdateFormValue}
+              />
             </div>
             <div
               className="desktop:grid-col-4 grid-col-12 tablet:padding-right-2"
               data-testid="location-filter"
             >
-              <div className="margin-bottom-4">
-                <label
-                  className="usa-label"
-                  htmlFor="location-filter"
-                  id="location-filter-label"
-                >
-                  Location{' '}
-                  <span className="optional-light-text">(optional)</span>
-                </label>
-                <NonPhone>
-                  <SelectSearch
-                    aria-labelledby="location-filter-label"
-                    data-testid="location-filter-search"
-                    inputId="location-filter"
-                    name="location"
-                    options={publicTrialSessionsHelper.trialCitiesByState}
-                    placeholder="- Select one or more -"
-                    value={{
-                      label: '- Select one or more -',
-                      value: '',
-                    }}
-                    onChange={location => {
-                      if (location) {
-                        publicTrialsSessionUpdateFormValueSequence({
-                          key: `locations.${location.value}`,
-                          root: ROOT,
-                          value: location.label,
-                        });
-                      }
-                    }}
-                  />
-                </NonPhone>
-                <Phone>
-                  <Select
-                    defaultValue={{
-                      label: '- Select one or more -',
-                      value: '',
-                    }}
-                    name="locations"
-                    options={publicTrialSessionsHelper.trialCitiesByState}
-                    value={locations}
-                    onChange={location => {
-                      if (location) {
-                        publicTrialsSessionUpdateFormValueSequence({
-                          key: `locations.${location}`,
-                          root: ROOT,
-                          value: location,
-                        });
-                      }
-                    }}
-                  />
-                </Phone>
-              </div>
-              <NonPhone>
-                {Object.entries(
-                  locations as {
-                    [key: string]: string;
-                  },
-                ).map(([locationKey, locationLabel]) => (
-                  <PillButton
-                    data-testid={`location-${locationLabel}-pill-button`}
-                    key={locationLabel}
-                    text={locationLabel}
-                    onRemove={() => {
-                      publicTrialsSessionUpdateFormValueSequence({
-                        key: `locations.${locationKey}`,
-                        root: ROOT,
-                        value: undefined,
-                      });
-                    }}
-                  />
-                ))}
-              </NonPhone>
+              <FilterSelect
+                label="Location"
+                name="locations"
+                options={publicTrialSessionsHelper.trialCitiesByState}
+                selectedValues={locations}
+                onChange={handleUpdateFormValue}
+              />
             </div>
             <div
               className="desktop:grid-col-4 grid-col-12 tablet:padding-right-2"
               data-testid="judge-filter"
             >
-              <div className="margin-bottom-1">
-                <label
-                  className="usa-label"
-                  htmlFor="judges-filter"
-                  id="judges-filter-label"
-                >
-                  Judge <span className="optional-light-text">(optional)</span>
-                </label>
-                <NonPhone>
-                  <SelectSearch
-                    aria-labelledby="judges-filter-label"
-                    data-testid="judge-filter-search"
-                    inputId="judges-filter"
-                    name="judges"
-                    options={publicTrialSessionsHelper.trialSessionJudgeOptions}
-                    placeholder="- Select one or more -"
-                    value={{
-                      label: '- Select one or more -',
-                      value: { name: '', userId: '' },
-                    }}
-                    onChange={judgeInfo => {
-                      if (judgeInfo) {
-                        publicTrialsSessionUpdateFormValueSequence({
-                          key: `judges.${judgeInfo.value.name}`,
-                          root: ROOT,
-                          value: judgeInfo.value.name,
-                        });
-                      }
-                    }}
-                  />
-                </NonPhone>
-                <Phone>
-                  <Select
-                    defaultValue={{
-                      label: '- Select one or more -',
-                      value: '',
-                    }}
-                    name="judges"
-                    options={publicTrialSessionsHelper.trialSessionJudgeOptions}
-                    value={judges}
-                    onChange={judgeName => {
-                      if (judgeName) {
-                        publicTrialsSessionUpdateFormValueSequence({
-                          key: `judges.${judgeName}`,
-                          root: ROOT,
-                          value: judgeName,
-                        });
-                      }
-                    }}
-                  />
-                </Phone>
-              </div>
-              <NonPhone>
-                {Object.entries(judges as { [key: string]: string }).map(
-                  ([judgeKey, judgeLabel]) => (
-                    <PillButton
-                      data-testid={`judge-${judgeLabel}-pill-button`}
-                      key={judgeKey}
-                      text={judgeLabel}
-                      onRemove={() => {
-                        publicTrialsSessionUpdateFormValueSequence({
-                          key: `judges.${judgeKey}`,
-                          root: ROOT,
-                          value: undefined,
-                        });
-                      }}
-                    />
-                  ),
-                )}
-              </NonPhone>
+              <FilterSelect
+                label="Judge"
+                name="judges"
+                options={publicTrialSessionsHelper.trialSessionJudgeOptions}
+                selectedValues={judges}
+                onChange={handleUpdateFormValue}
+              />
             </div>
           </div>
         </div>
@@ -341,3 +144,62 @@ export const PublicTrialSessionsFilters = connect<
     );
   },
 );
+
+function FilterSelect({ label, name, onChange, options, selectedValues }) {
+  return (
+    <>
+      <div className="margin-bottom-4">
+        <label className="usa-label" htmlFor={`${name}-filter`}>
+          {label} <span className="optional-light-text">(optional)</span>
+        </label>
+        <NonPhone>
+          <SelectSearch
+            aria-labelledby={`${name}-filter-label`}
+            data-testid={`${name}-filter-select`}
+            inputId={`${name}-filter`}
+            name={name}
+            options={options}
+            placeholder="- Select one or more -"
+            value={{
+              label: '- Select one or more -',
+              value: '',
+            }}
+            onChange={option =>
+              option && onChange(`${name}.${option.value}`, option.label)
+            }
+          />{' '}
+        </NonPhone>
+        <Phone>
+          <Select
+            defaultValue={{
+              label: '- Select one or more -',
+              value: '',
+            }}
+            name={name}
+            options={options}
+            value={'- Select one or more -'}
+            onChange={value => {
+              value && onChange(`${name}.${value}`, value);
+            }}
+          />
+        </Phone>
+      </div>
+      <NonPhone>
+        {Object.entries(
+          selectedValues as {
+            [key: string]: string;
+          },
+        ).map(([optionKey, optionLabel]) => (
+          <PillButton
+            data-testid={`${name}-${optionLabel}-pill-button`}
+            key={optionLabel}
+            text={optionLabel}
+            onRemove={() => {
+              onChange(`${name}.${optionKey}`, undefined);
+            }}
+          />
+        ))}
+      </NonPhone>
+    </>
+  );
+}

From 7e16bf18eb9163ac35d79e9c0b46c35a55f9b2f9 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Wed, 6 Nov 2024 15:17:11 -0700
Subject: [PATCH 72/79] 10460: Fix pills padding;

---
 .../PublicTrialSessionsFilters.tsx            | 32 ++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
index dce9bb2b1eb..7d49209ae0c 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsFilters.tsx
@@ -148,7 +148,7 @@ export const PublicTrialSessionsFilters = connect<
 function FilterSelect({ label, name, onChange, options, selectedValues }) {
   return (
     <>
-      <div className="margin-bottom-4">
+      <div className="margin-bottom-2">
         <label className="usa-label" htmlFor={`${name}-filter`}>
           {label} <span className="optional-light-text">(optional)</span>
         </label>
@@ -185,20 +185,22 @@ function FilterSelect({ label, name, onChange, options, selectedValues }) {
         </Phone>
       </div>
       <NonPhone>
-        {Object.entries(
-          selectedValues as {
-            [key: string]: string;
-          },
-        ).map(([optionKey, optionLabel]) => (
-          <PillButton
-            data-testid={`${name}-${optionLabel}-pill-button`}
-            key={optionLabel}
-            text={optionLabel}
-            onRemove={() => {
-              onChange(`${name}.${optionKey}`, undefined);
-            }}
-          />
-        ))}
+        <div className="margin-bottom-1">
+          {Object.entries(
+            selectedValues as {
+              [key: string]: string;
+            },
+          ).map(([optionKey, optionLabel]) => (
+            <PillButton
+              data-testid={`${name}-${optionLabel}-pill-button`}
+              key={optionLabel}
+              text={optionLabel}
+              onRemove={() => {
+                onChange(`${name}.${optionKey}`, undefined);
+              }}
+            />
+          ))}
+        </div>
       </NonPhone>
     </>
   );

From 9574417356ff1fd90c0dc2f007b24536ba501d44 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Wed, 6 Nov 2024 15:18:01 -0700
Subject: [PATCH 73/79] 10460: Open links in same tab;

---
 .../TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx
index ff52e6e7c57..4c0379bcaee 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx
@@ -18,7 +18,6 @@ export const PublicTrialSessionsRemoteProceedingsCard = connect(
                 link
                 className="padding-bottom-0 text-left"
                 href="https://www.ustaxcourt.gov/remote_proceedings.html"
-                target="_blank"
               >
                 Public Access to Remote Proceedings
               </Button>
@@ -26,7 +25,6 @@ export const PublicTrialSessionsRemoteProceedingsCard = connect(
                 link
                 className="text-left"
                 href="https://www.ustaxcourt.gov/zoomgov.html"
-                target="_blank"
               >
                 Zoomgov Proceedings Resources
               </Button>

From 9ed5cab6f33040208a8afc71c8b0516d6d133fc4 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Wed, 6 Nov 2024 15:29:40 -0700
Subject: [PATCH 74/79] 10460: Always stack links on top of each other;

---
 ...blicTrialSessionsRemoteProceedingsCard.tsx | 32 +++++++++++--------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx
index 4c0379bcaee..42e61583bde 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessionsRemoteProceedingsCard.tsx
@@ -14,20 +14,24 @@ export const PublicTrialSessionsRemoteProceedingsCard = connect(
           <div className="margin-left-2 margin-right-2 border-bottom-1px border-base-lighter"></div>
           <div className="card-content ">
             <div className="padding-left-2 margin-bottom-3">
-              <Button
-                link
-                className="padding-bottom-0 text-left"
-                href="https://www.ustaxcourt.gov/remote_proceedings.html"
-              >
-                Public Access to Remote Proceedings
-              </Button>
-              <Button
-                link
-                className="text-left"
-                href="https://www.ustaxcourt.gov/zoomgov.html"
-              >
-                Zoomgov Proceedings Resources
-              </Button>
+              <div>
+                <Button
+                  link
+                  className="padding-bottom-0 text-left"
+                  href="https://www.ustaxcourt.gov/remote_proceedings.html"
+                >
+                  Public Access to Remote Proceedings
+                </Button>
+              </div>
+              <div>
+                <Button
+                  link
+                  className="text-left"
+                  href="https://www.ustaxcourt.gov/zoomgov.html"
+                >
+                  Zoomgov Proceedings Resources
+                </Button>
+              </div>
             </div>
           </div>
         </div>

From 7171bb63ad5881e0bd7f7815f58ce0c1f73675f1 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Wed, 6 Nov 2024 15:30:20 -0700
Subject: [PATCH 75/79] 10460: Add label in mobile view;

---
 .../Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx b/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx
index 93e6e4cdd13..9c8a4802b4c 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicMobileTrialSessionsTable.tsx
@@ -43,7 +43,7 @@ export const PublicMobileTrialSessionsTable = connect<
                 key={tsGroup.header.sessionWeekStartDate}
               >
                 <th data-label="Document title" scope="row">
-                  {tsGroup.header.formattedSessionWeekStartDate}
+                  Week of {tsGroup.header.formattedSessionWeekStartDate}
                 </th>
                 {tsGroup.rows.map((tsRow, index) => {
                   return (

From dd6a4f7c06b8d94a4f79361e488289ab7cd9bb1e Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Wed, 6 Nov 2024 15:30:59 -0700
Subject: [PATCH 76/79] 10460: As the screen shrinks in width display
 proceeding links on top like mobile;

---
 .../TrialsSessions/PublicTrialSessions.tsx    | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
index 00c519e57f6..f7ca7dbb52a 100644
--- a/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
+++ b/web-client/src/views/Public/TrialsSessions/PublicTrialSessions.tsx
@@ -4,7 +4,12 @@ import {
 } from '@web-client/ustc-ui/Accordion/Accordion';
 import { BigHeader } from '@web-client/views/BigHeader';
 import { Button } from '@web-client/ustc-ui/Button/Button';
-import { NonPhone, Phone } from '@web-client/ustc-ui/Responsive/Responsive';
+import {
+  Mobile,
+  NonMobile,
+  NonPhone,
+  Phone,
+} from '@web-client/ustc-ui/Responsive/Responsive';
 import { Paginator } from '@web-client/ustc-ui/Pagination/Paginator';
 import { PillButton } from '@web-client/ustc-ui/Button/PillButton';
 import { PublicMobileTrialSessionsTable } from '@web-client/views/Public/TrialsSessions/PublicMobileTrialSessionsTable';
@@ -99,11 +104,18 @@ function NonMobilePublicTrialsSessions({
             <FetchedTimeMessage
               fetchedDateString={publicTrialSessionsHelper.fetchedDateString}
             ></FetchedTimeMessage>
+            <Mobile>
+              <div className="tablet:grid-col-4 grid-col-12 padding-top-1">
+                <PublicTrialSessionsRemoteProceedingsCard />
+              </div>
+            </Mobile>
             <PublicTrialSessionsFilters ROOT={ROOT} />
           </div>
-          <div className="tablet:grid-col-4 grid-col-12 padding-top-1">
-            <PublicTrialSessionsRemoteProceedingsCard />
-          </div>
+          <NonMobile>
+            <div className="tablet:grid-col-4 grid-col-12 padding-top-1">
+              <PublicTrialSessionsRemoteProceedingsCard />
+            </div>
+          </NonMobile>
         </div>
         <div className="grid-row">
           <Button

From 43b8615c28c6341028532b676bcf353d43eef530 Mon Sep 17 00:00:00 2001
From: Nechama Krigsman <nkrigsman@flexion.us>
Date: Thu, 7 Nov 2024 23:56:57 -0500
Subject: [PATCH 77/79] 10460: Add trial session remote to options;

---
 .../Public/publicTrialSessionsHelper.ts       | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts b/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
index 13f48f66187..9279565dfd9 100644
--- a/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
+++ b/web-client/src/presenter/computeds/Public/publicTrialSessionsHelper.ts
@@ -1,5 +1,8 @@
 import { Get } from 'cerebral';
-import { SESSION_TYPES } from '@shared/business/entities/EntityConstants';
+import {
+  SESSION_TYPES,
+  TRIAL_SESSION_SCOPE_TYPES,
+} from '@shared/business/entities/EntityConstants';
 import {
   TrialSessionRow,
   TrialSessionWeek,
@@ -103,7 +106,19 @@ export const publicTrialSessionsHelper = (
     value: sessionType,
   }));
 
-  const trialCitiesByState = getTrialCitiesGroupedByState();
+  const standaloneRemoteOption = {
+    label: TRIAL_SESSION_SCOPE_TYPES.standaloneRemote,
+    options: [
+      {
+        label: TRIAL_SESSION_SCOPE_TYPES.standaloneRemote,
+        value: TRIAL_SESSION_SCOPE_TYPES.standaloneRemote,
+      },
+    ],
+  };
+  const trialCitiesByState = [
+    standaloneRemoteOption,
+    ...getTrialCitiesGroupedByState(),
+  ];
 
   const trialSessionJudgeOptions = trialSessionJudges.map(
     trialSessionJudge => ({

From 50ee1223188c77fd5e44451993f7a864565b1d1a Mon Sep 17 00:00:00 2001
From: Nechama Krigsman <nkrigsman@flexion.us>
Date: Fri, 8 Nov 2024 12:35:42 -0500
Subject: [PATCH 78/79] 10460: switch H1 to div for accessibility reasons from
 public header

---
 web-client/src/styles/public.scss            | 6 ++++++
 web-client/src/views/Header/HeaderPublic.tsx | 4 ++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/web-client/src/styles/public.scss b/web-client/src/styles/public.scss
index ae19d70b0d9..2939e3e9a27 100644
--- a/web-client/src/styles/public.scss
+++ b/web-client/src/styles/public.scss
@@ -22,7 +22,13 @@
     }
 
     .header-welcome-public {
+      padding-bottom: .5rem;
+      margin-top: auto;
+      margin-bottom: auto;
       margin-left: 10px;
+      font-family: "Noto Serif", serif;
+      font-size: 26px;
+      font-weight: 700;
       line-height: 2em;
 
       @media only screen and (max-width: $medium-screen) {
diff --git a/web-client/src/views/Header/HeaderPublic.tsx b/web-client/src/views/Header/HeaderPublic.tsx
index a87b33d2522..530c870daeb 100644
--- a/web-client/src/views/Header/HeaderPublic.tsx
+++ b/web-client/src/views/Header/HeaderPublic.tsx
@@ -63,10 +63,10 @@ export const HeaderPublic = connect(
                     <img alt="USTC Seal" src={seal} />
                   </a>
                 </div>
-                <h1 className="header-welcome-public">
+                <div className="header-welcome-public">
                   Welcome to DAWSON{' '}
                   {isTerminalUser && ': US Tax Court Terminal'}
-                </h1>
+                </div>
                 {headerPublicHelper && !headerPublicHelper.onCreationPage && (
                   <>
                     <div className="login-container">

From 975d67386a259ab074f2e0db00a532ba51354333 Mon Sep 17 00:00:00 2001
From: John Cruz <jcruz@flexion.us>
Date: Fri, 8 Nov 2024 10:46:42 -0700
Subject: [PATCH 79/79] 10460: Fix cypress test selector for Public Header;

---
 cypress/local-only/support/pages/public/advanced-search.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/local-only/support/pages/public/advanced-search.ts b/cypress/local-only/support/pages/public/advanced-search.ts
index 76207e6712b..0369a188e06 100644
--- a/cypress/local-only/support/pages/public/advanced-search.ts
+++ b/cypress/local-only/support/pages/public/advanced-search.ts
@@ -82,7 +82,7 @@ export const searchForOrderByJudge = judge => {
 };
 
 export const publicHeader = () => {
-  return cy.get('h1.header-welcome-public');
+  return cy.get('div.header-welcome-public');
 };
 
 export const petitionHyperlink = () => {