From d77ffef62d9d499e4251a82349f3441975603bbc Mon Sep 17 00:00:00 2001
From: Nathaniel Caza <mastercactapus@gmail.com>
Date: Wed, 19 Mar 2025 16:37:19 -0500
Subject: [PATCH 01/18] ui/dev: Refactor IntegrationKeyList and
 UniversalKeyDefaultActions to use CompList and enhance mobile responsiveness

---
 web/src/app/lists/CompList.tsx                |  9 ++-
 web/src/app/services/IntegrationKeyList.tsx   | 76 ++++++++++---------
 .../UniversalKeyDefaultActions.tsx            | 30 ++++----
 3 files changed, 62 insertions(+), 53 deletions(-)

diff --git a/web/src/app/lists/CompList.tsx b/web/src/app/lists/CompList.tsx
index 6a5dadc9fa..152393658e 100644
--- a/web/src/app/lists/CompList.tsx
+++ b/web/src/app/lists/CompList.tsx
@@ -2,10 +2,14 @@ import { List, ListItem, ListItemText, Typography } from '@mui/material'
 import React from 'react'
 import ReorderGroup from './ReorderGroup'
 import { has } from 'lodash'
+import { useIsWidthDown } from '../util/useWidth'
 
 export type CompListProps = {
   note?: React.ReactNode
   action?: React.ReactNode
+
+  /* If true, the list will only show the action on wide screens. */
+  hideActionOnMobile?: boolean
   emptyMessage?: string
   children?: React.ReactNode
 
@@ -25,6 +29,7 @@ function isReorderGroup(child: React.ReactNode): child is React.ReactElement {
 export default function CompList(props: CompListProps): React.ReactNode {
   const children = React.Children.toArray(props.children)
   let hasNoChildren = children.length === 0
+  const isMobile = useIsWidthDown('md')
 
   // Special case: ReorderGroup with no contents/children as a child
   if (
@@ -52,7 +57,9 @@ export default function CompList(props: CompListProps): React.ReactNode {
               sx={{ fontStyle: 'italic', pr: 2 }}
             />
           )}
-          {props.action && <div>{props.action}</div>}
+          {props.action && (props.hideActionOnMobile ? !isMobile : true) && (
+            <div>{props.action}</div>
+          )}
         </ListItem>
       )}
       {!hasNoChildren
diff --git a/web/src/app/services/IntegrationKeyList.tsx b/web/src/app/services/IntegrationKeyList.tsx
index 3f15766afb..107953c337 100644
--- a/web/src/app/services/IntegrationKeyList.tsx
+++ b/web/src/app/services/IntegrationKeyList.tsx
@@ -5,7 +5,6 @@ import Grid from '@mui/material/Grid'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 import CreateFAB from '../lists/CreateFAB'
-import FlatList, { FlatListListItem } from '../lists/FlatList'
 import IconButton from '@mui/material/IconButton'
 import { Trash } from '../icons'
 import IntegrationKeyCreateDialog from './IntegrationKeyCreateDialog'
@@ -27,6 +26,8 @@ import {
   Typography,
 } from '@mui/material'
 import { ChevronDown } from 'mdi-material-ui'
+import CompList from '../lists/CompList'
+import { CompListItemText } from '../lists/CompListItems'
 
 const query = gql`
   query ($serviceID: ID!) {
@@ -117,18 +118,19 @@ export default function IntegrationKeyList(props: {
     .slice()
     .sort(sortItems)
     .filter((key: IntegrationKey) => !key.externalSystemName)
-    .map(
-      (key: IntegrationKey): FlatListListItem => ({
-        title: key.name,
-        subText: (
+    .map((key: IntegrationKey) => (
+      <CompListItemText
+        key={key.id}
+        title={key.name}
+        subText={
           <IntegrationKeyDetails
             key={key.id}
             href={key.href}
             label={typeLabel(key.type)}
             type={key.type}
           />
-        ),
-        secondaryAction: (
+        }
+        action={
           <Grid container spacing={2} alignItems='center' wrap='nowrap'>
             {key.type === 'universal' && (
               <Grid item>
@@ -153,19 +155,20 @@ export default function IntegrationKeyList(props: {
               </IconButton>
             </Grid>
           </Grid>
-        ),
-      }),
-    )
+        }
+      />
+    ))
 
   const extItems = (data.service.integrationKeys || [])
     .slice()
     .sort(sortItems)
     .filter((key: IntegrationKey) => !!key.externalSystemName)
-    .map(
-      (key: IntegrationKey): FlatListListItem => ({
-        title: key.name,
-        subText: <Chip label={key.externalSystemName} sx={{ mt: 1 }} />,
-        secondaryAction: (
+    .map((key: IntegrationKey) => (
+      <CompListItemText
+        key={key.id}
+        title={key.name}
+        subText={<Chip label={key.externalSystemName} sx={{ mt: 1 }} />}
+        action={
           <IconButton
             onClick={(): void => setDeleteDialog(key.id)}
             size='large'
@@ -173,38 +176,38 @@ export default function IntegrationKeyList(props: {
           >
             <Trash />
           </IconButton>
-        ),
-      }),
-    )
+        }
+      />
+    ))
 
   return (
     <React.Fragment>
       <Grid item xs={12} className={classes.spacing}>
         <Card>
           <CardContent>
-            <FlatList
+            <CompList
               data-cy='int-keys'
-              headerNote={
+              note={
                 <React.Fragment>
                   API Documentation is available{' '}
                   <AppLink to='/docs'>here</AppLink>.
                 </React.Fragment>
               }
               emptyMessage='No integration keys exist for this service.'
-              items={items}
-              headerAction={
-                isMobile ? undefined : (
-                  <Button
-                    variant='contained'
-                    onClick={(): void => setCreate(true)}
-                    startIcon={<Add />}
-                    data-testid='create-key'
-                  >
-                    Create Integration Key
-                  </Button>
-                )
+              hideActionOnMobile
+              action={
+                <Button
+                  variant='contained'
+                  onClick={(): void => setCreate(true)}
+                  startIcon={<Add />}
+                  data-testid='create-key'
+                >
+                  Create Integration Key
+                </Button>
               }
-            />
+            >
+              {items}
+            </CompList>
             {!!extItems.length && (
               <Accordion disableGutters elevation={0}>
                 <AccordionSummary
@@ -214,10 +217,9 @@ export default function IntegrationKeyList(props: {
                   <Typography>Externally Managed Keys</Typography>
                 </AccordionSummary>
                 <AccordionDetails>
-                  <FlatList
-                    headerNote='These keys are managed by other applications.'
-                    items={extItems}
-                  />
+                  <CompList note='These keys are managed by other applications.'>
+                    {extItems}
+                  </CompList>
                 </AccordionDetails>
               </Accordion>
             )}
diff --git a/web/src/app/services/UniversalKey/UniversalKeyDefaultActions.tsx b/web/src/app/services/UniversalKey/UniversalKeyDefaultActions.tsx
index 6af0870d0e..b47dafb550 100644
--- a/web/src/app/services/UniversalKey/UniversalKeyDefaultActions.tsx
+++ b/web/src/app/services/UniversalKey/UniversalKeyDefaultActions.tsx
@@ -1,11 +1,12 @@
 import { Button, Card } from '@mui/material'
 import React, { Suspense, useState } from 'react'
-import FlatList from '../../lists/FlatList'
 import UniversalKeyActionsList from './UniversalKeyActionsList'
 import { gql, useQuery } from 'urql'
 import { IntegrationKey } from '../../../schema'
 import { Add } from '../../icons'
 import { UniversalKeyActionDialog } from './UniversalKeyActionDialog'
+import CompList from '../../lists/CompList'
+import { CompListItemText } from '../../lists/CompListItems'
 
 interface UniversalKeyDefaultActionProps {
   serviceID: string
@@ -42,9 +43,9 @@ export default function UniversalKeyDefaultActions(
   return (
     <React.Fragment>
       <Card>
-        <FlatList
+        <CompList
           emptyMessage='No default action'
-          headerAction={
+          action={
             <Button
               variant='contained'
               startIcon={<Add />}
@@ -53,18 +54,17 @@ export default function UniversalKeyDefaultActions(
               Add Action
             </Button>
           }
-          headerNote='Default actions are performed when zero rules match.'
-          items={[
-            {
-              title: (
-                <UniversalKeyActionsList
-                  actions={q.data?.integrationKey.config.defaultActions ?? []}
-                  onEdit={(index) => setEditActionIndex(index)}
-                />
-              ),
-            },
-          ]}
-        />
+          note='Default actions are performed when zero rules match.'
+        >
+          <CompListItemText
+            title={
+              <UniversalKeyActionsList
+                actions={q.data?.integrationKey.config.defaultActions ?? []}
+                onEdit={(index) => setEditActionIndex(index)}
+              />
+            }
+          />
+        </CompList>
       </Card>
       <Suspense>
         {editActionIndex > -1 && (

From ea054c8c7abec12c563ebea013b9c340563a130c Mon Sep 17 00:00:00 2001
From: Nathaniel Caza <mastercactapus@gmail.com>
Date: Thu, 20 Mar 2025 11:21:49 -0500
Subject: [PATCH 02/18] ui/dev: Refactor HeartbeatMonitorList to use CompList

---
 web/src/app/services/HeartbeatMonitorList.tsx | 104 +++++++++---------
 1 file changed, 54 insertions(+), 50 deletions(-)

diff --git a/web/src/app/services/HeartbeatMonitorList.tsx b/web/src/app/services/HeartbeatMonitorList.tsx
index cfa3821c71..7b98a171d2 100644
--- a/web/src/app/services/HeartbeatMonitorList.tsx
+++ b/web/src/app/services/HeartbeatMonitorList.tsx
@@ -5,7 +5,6 @@ import Grid from '@mui/material/Grid'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 import CreateFAB from '../lists/CreateFAB'
-import FlatList from '../lists/FlatList'
 import HeartbeatMonitorCreateDialog from './HeartbeatMonitorCreateDialog'
 import makeStyles from '@mui/styles/makeStyles'
 import HeartbeatMonitorEditDialog from './HeartbeatMonitorEditDialog'
@@ -19,6 +18,8 @@ import { HeartbeatMonitor } from '../../schema'
 import { useIsWidthDown } from '../util/useWidth'
 import { Add } from '@mui/icons-material'
 import { Time } from '../util/Time'
+import CompList from '../lists/CompList'
+import { CompListItemText } from '../lists/CompListItems'
 
 // generates a single alert if a POST is not received before the timeout
 const HEARTBEAT_MONITOR_DESCRIPTION =
@@ -84,61 +85,64 @@ export default function HeartbeatMonitorList(props: {
     const items = (monitors || [])
       .slice()
       .sort(sortItems)
-      .map((monitor) => ({
-        icon: (
-          <HeartbeatMonitorStatus
-            lastState={monitor.lastState}
-            lastHeartbeat={monitor.lastHeartbeat}
-          />
-        ),
-        title: monitor.name,
-        subText: (
-          <React.Fragment>
-            <Time
-              prefix='Timeout: '
-              duration={{ minutes: monitor.timeoutMinutes }}
-              precise
-              units={['weeks', 'days', 'hours', 'minutes']}
+      .map((monitor) => (
+        <CompListItemText
+          key={monitor.id}
+          icon={
+            <HeartbeatMonitorStatus
+              lastState={monitor.lastState}
+              lastHeartbeat={monitor.lastHeartbeat}
             />
-            <br />
-            <CopyText title='Copy URL' value={monitor.href} asURL />
-          </React.Fragment>
-        ),
-        secondaryAction: (
-          <OtherActions
-            actions={[
-              {
-                label: 'Edit',
-                onClick: () => setShowEditDialogByID(monitor.id),
-              },
-              {
-                label: 'Delete',
-                onClick: () => setShowDeleteDialogByID(monitor.id),
-              },
-            ]}
-          />
-        ),
-      }))
+          }
+          title={monitor.name}
+          subText={
+            <React.Fragment>
+              <Time
+                prefix='Timeout: '
+                duration={{ minutes: monitor.timeoutMinutes }}
+                precise
+                units={['weeks', 'days', 'hours', 'minutes']}
+              />
+              <br />
+              <CopyText title='Copy URL' value={monitor.href} asURL />
+            </React.Fragment>
+          }
+          action={
+            <OtherActions
+              actions={[
+                {
+                  label: 'Edit',
+                  onClick: () => setShowEditDialogByID(monitor.id),
+                },
+                {
+                  label: 'Delete',
+                  onClick: () => setShowDeleteDialogByID(monitor.id),
+                },
+              ]}
+            />
+          }
+        />
+      ))
 
     return (
-      <FlatList
+      <CompList
         data-cy='monitors'
         emptyMessage='No heartbeat monitors exist for this service.'
-        headerNote={HEARTBEAT_MONITOR_DESCRIPTION}
-        items={items}
-        headerAction={
-          isMobile ? undefined : (
-            <Button
-              variant='contained'
-              onClick={() => setShowCreateDialog(true)}
-              startIcon={<Add />}
-              data-testid='create-monitor'
-            >
-              Create Heartbeat Monitor
-            </Button>
-          )
+        note={HEARTBEAT_MONITOR_DESCRIPTION}
+        hideActionOnMobile
+        action={
+          <Button
+            variant='contained'
+            onClick={() => setShowCreateDialog(true)}
+            startIcon={<Add />}
+            data-testid='create-monitor'
+          >
+            Create Heartbeat Monitor
+          </Button>
         }
-      />
+      >
+        {items}
+      </CompList>
     )
   }
 

From a3df46b682e7d981e9b140b17bebeac3a583037d Mon Sep 17 00:00:00 2001
From: Nathaniel Caza <mastercactapus@gmail.com>
Date: Thu, 20 Mar 2025 11:43:31 -0500
Subject: [PATCH 03/18] ui/dev: Refactor UniversalKeyRuleList to use CompList
 and ReorderGroup for enhanced rule management

---
 .../UniversalKey/UniversalKeyRuleConfig.tsx   | 153 +++++++++---------
 1 file changed, 81 insertions(+), 72 deletions(-)

diff --git a/web/src/app/services/UniversalKey/UniversalKeyRuleConfig.tsx b/web/src/app/services/UniversalKey/UniversalKeyRuleConfig.tsx
index 52dd659685..7f6fa63055 100644
--- a/web/src/app/services/UniversalKey/UniversalKeyRuleConfig.tsx
+++ b/web/src/app/services/UniversalKey/UniversalKeyRuleConfig.tsx
@@ -1,7 +1,6 @@
 import React, { Suspense, useState } from 'react'
 import { Button, Card, Grid, Typography } from '@mui/material'
 import { Add } from '@mui/icons-material'
-import FlatList, { FlatListListItem } from '../../lists/FlatList'
 import UniversalKeyRuleDialog from './UniversalKeyRuleDialog'
 import UniversalKeyRuleRemoveDialog from './UniversalKeyRuleRemoveDialog'
 import OtherActions from '../../util/OtherActions'
@@ -11,6 +10,10 @@ import Spinner from '../../loading/components/Spinner'
 import { GenericError } from '../../error-pages'
 import UniversalKeyActionsList from './UniversalKeyActionsList'
 import { UniversalKeyActionDialog } from './UniversalKeyActionDialog'
+import CompList from '../../lists/CompList'
+import ReorderGroup from '../../lists/ReorderGroup'
+import { ReorderableItem } from '../../lists/ReorderableItem'
+import { CompListItemText } from '../../lists/CompListItems'
 
 interface UniversalKeyRuleListProps {
   serviceID: string
@@ -83,66 +86,68 @@ export default function UniversalKeyRuleList(
   if (fetching && !data) return <Spinner />
   if (error) return <GenericError error={error.message} />
 
-  const items: FlatListListItem[] = (
-    data?.integrationKey.config.rules ?? []
-  ).map((rule) => ({
-    title: (
-      <Typography component='h4' variant='subtitle1' sx={{ pb: 1 }}>
-        <b>{rule.name}:</b>
-        &nbsp;
-        {rule.description}
-      </Typography>
-    ),
-    subText: (
-      <Grid container>
-        <Grid item xs={12}>
-          <b>If</b>
-          <code style={{ paddingLeft: '1em' }}>
-            {truncateCond(rule.conditionExpr)}
-          </code>
-        </Grid>
-        <Grid item xs={12}>
-          <b>Then</b>
-        </Grid>
-        <Grid item xs={12} sx={{ paddingLeft: '1em' }}>
-          <UniversalKeyActionsList
-            actions={rule.actions}
-            onEdit={(index) =>
-              setEditAction({ ruleID: rule.id, actionIndex: index })
-            }
+  const items = (data?.integrationKey.config.rules ?? []).map((rule) => (
+    <ReorderableItem id={rule.id} key={rule.id}>
+      <CompListItemText
+        title={
+          <Typography component='h4' variant='subtitle1' sx={{ pb: 1 }}>
+            <b>{rule.name}:</b>
+            &nbsp;
+            {rule.description}
+          </Typography>
+        }
+        subText={
+          <Grid container>
+            <Grid item xs={12}>
+              <b>If</b>
+              <code style={{ paddingLeft: '1em' }}>
+                {truncateCond(rule.conditionExpr)}
+              </code>
+            </Grid>
+            <Grid item xs={12}>
+              <b>Then</b>
+            </Grid>
+            <Grid item xs={12} sx={{ paddingLeft: '1em' }}>
+              <UniversalKeyActionsList
+                actions={rule.actions}
+                onEdit={(index) =>
+                  setEditAction({ ruleID: rule.id, actionIndex: index })
+                }
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <b>Finally</b> {rule.continueAfterMatch ? 'continue' : 'stop'}
+            </Grid>
+          </Grid>
+        }
+        action={
+          <OtherActions
+            actions={[
+              {
+                label: 'Add Action',
+                onClick: () => setAddAction({ ruleID: rule.id }),
+              },
+              {
+                label: 'Edit Rule',
+                onClick: () => setEdit(rule.id),
+              },
+              {
+                label: 'Delete Rule',
+                onClick: () => setRemove(rule.id),
+              },
+            ]}
           />
-        </Grid>
-        <Grid item xs={12}>
-          <b>Finally</b> {rule.continueAfterMatch ? 'continue' : 'stop'}
-        </Grid>
-      </Grid>
-    ),
-    secondaryAction: (
-      <OtherActions
-        actions={[
-          {
-            label: 'Add Action',
-            onClick: () => setAddAction({ ruleID: rule.id }),
-          },
-          {
-            label: 'Edit Rule',
-            onClick: () => setEdit(rule.id),
-          },
-          {
-            label: 'Delete Rule',
-            onClick: () => setRemove(rule.id),
-          },
-        ]}
+        }
       />
-    ),
-  }))
+    </ReorderableItem>
+  ))
 
   return (
     <React.Fragment>
       <Card>
-        <FlatList
+        <CompList
           emptyMessage='No rules exist for this integration key.'
-          headerAction={
+          action={
             <Button
               variant='contained'
               startIcon={<Add />}
@@ -151,25 +156,29 @@ export default function UniversalKeyRuleList(
               Create Rule
             </Button>
           }
-          headerNote='Rules are a set of filters that allow notifications to be sent to a specific destination. '
-          items={items}
-          onReorder={(oldIdx, newIdx) => {
-            const ruleIDs =
-              data?.integrationKey.config.rules.map((r) => r.id) || []
-            const tmp = ruleIDs[oldIdx]
-            ruleIDs[oldIdx] = ruleIDs[newIdx]
-            ruleIDs[newIdx] = tmp
-            commit(
-              {
-                input: {
-                  keyID: props.keyID,
-                  setRuleOrder: ruleIDs,
+          note='Rules are a set of filters that allow notifications to be sent to a specific destination. '
+        >
+          <ReorderGroup
+            onReorder={(oldIdx, newIdx) => {
+              const ruleIDs =
+                data?.integrationKey.config.rules.map((r) => r.id) || []
+              const tmp = ruleIDs[oldIdx]
+              ruleIDs[oldIdx] = ruleIDs[newIdx]
+              ruleIDs[newIdx] = tmp
+              commit(
+                {
+                  input: {
+                    keyID: props.keyID,
+                    setRuleOrder: ruleIDs,
+                  },
                 },
-              },
-              { additionalTypenames: ['IntegrationKey'] },
-            )
-          }}
-        />
+                { additionalTypenames: ['IntegrationKey'] },
+              )
+            }}
+          >
+            {items}
+          </ReorderGroup>
+        </CompList>
       </Card>
 
       <Suspense>

From 3ac894441b9c09cb9cf9ac77d0268bcef0784c8c Mon Sep 17 00:00:00 2001
From: Nathaniel Caza <mastercactapus@gmail.com>
Date: Thu, 20 Mar 2025 13:41:40 -0500
Subject: [PATCH 04/18] ui/dev: Update CompListItemText to make title prop
 optional and enhance icon handling

---
 web/src/app/lists/CompListItems.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/web/src/app/lists/CompListItems.tsx b/web/src/app/lists/CompListItems.tsx
index fb3ea30e46..080c4eb28f 100644
--- a/web/src/app/lists/CompListItems.tsx
+++ b/web/src/app/lists/CompListItems.tsx
@@ -12,8 +12,11 @@ import AppLink from '../util/AppLink'
 import { ExpandLess, ExpandMore } from '@mui/icons-material'
 
 export type CompListItemTextProps = {
-  title: React.ReactNode
+  title?: React.ReactNode
   icon?: React.ReactNode
+  /* Set to true to always create space for the icon, even if it is not set */
+  alwaysShowIcon?: boolean
+
   subText?: React.ReactNode
   action?: React.ReactNode
   disableTypography?: boolean
@@ -25,7 +28,9 @@ export function CompListItemText(
 ): React.ReactNode {
   return (
     <ListItem>
-      {props.icon && <ListItemIcon tabIndex={-1}>{props.icon}</ListItemIcon>}
+      {(props.icon || props.alwaysShowIcon) && (
+        <ListItemIcon tabIndex={-1}>{props.icon}</ListItemIcon>
+      )}
       <ListItemText
         disableTypography={props.disableTypography}
         primary={props.title}

From 5aa6a8c69f03a4cd4a4bb55360905f0ec279b290 Mon Sep 17 00:00:00 2001
From: Nathaniel Caza <mastercactapus@gmail.com>
Date: Thu, 20 Mar 2025 13:41:54 -0500
Subject: [PATCH 05/18] ui/dev: Refactor UserCalendarSubscriptionList to use
 CompList and CompListItem components

---
 .../users/UserCalendarSubscriptionList.tsx    | 59 ++++++++++---------
 1 file changed, 31 insertions(+), 28 deletions(-)

diff --git a/web/src/app/users/UserCalendarSubscriptionList.tsx b/web/src/app/users/UserCalendarSubscriptionList.tsx
index 1e1b2ad5c9..ca6ceaad1d 100644
--- a/web/src/app/users/UserCalendarSubscriptionList.tsx
+++ b/web/src/app/users/UserCalendarSubscriptionList.tsx
@@ -1,7 +1,6 @@
 import React, { Suspense, useState } from 'react'
 import { useQuery, gql } from 'urql'
 import { Card, Alert } from '@mui/material'
-import FlatList, { FlatListListItem } from '../lists/FlatList'
 import OtherActions from '../util/OtherActions'
 import CreateFAB from '../lists/CreateFAB'
 import CalendarSubscribeCreateDialog from '../schedules/calendar-subscribe/CalendarSubscribeCreateDialog'
@@ -11,9 +10,10 @@ import CalendarSubscribeEditDialog from '../schedules/calendar-subscribe/Calenda
 import { GenericError, ObjectNotFound } from '../error-pages'
 import _ from 'lodash'
 import { useConfigValue } from '../util/RequireConfig'
-import AppLink from '../util/AppLink'
 import { UserCalendarSubscription } from '../../schema'
 import { Time } from '../util/Time'
+import CompList from '../lists/CompList'
+import { CompListItemNav, CompListItemText } from '../lists/CompListItems'
 
 export const calendarSubscriptionsQuery = gql`
   query calendarSubscriptions($id: ID!) {
@@ -71,7 +71,7 @@ export default function UserCalendarSubscriptionList(props: {
     })
 
   const subheaderDict: { [key: string]: boolean } = {}
-  const items: FlatListListItem[] = []
+  const items: React.ReactNode[] = []
 
   function renderOtherActions(id: string): JSX.Element {
     return (
@@ -94,29 +94,32 @@ export default function UserCalendarSubscriptionList(props: {
   subs.forEach((sub: UserCalendarSubscription) => {
     if (!subheaderDict[sub?.schedule?.name ?? '']) {
       subheaderDict[sub?.schedule?.name ?? ''] = true
-      items.push({
-        subHeader: (
-          <AppLink to={`/schedules/${sub.scheduleID}`}>
-            {sub.schedule?.name}
-          </AppLink>
-        ),
-      })
+      items.push(
+        <CompListItemNav
+          subText={sub.schedule?.name}
+          url={`/schedules/${sub.scheduleID}`}
+        />,
+      )
     }
 
     // push subscriptions under relevant schedule subheaders
-    items.push({
-      title: sub.name,
-      subText: (
-        <Time
-          prefix='Last sync: '
-          time={sub.lastAccess}
-          format='relative'
-          zero='Never'
-        />
-      ),
-      secondaryAction: renderOtherActions(sub.id),
-      icon: sub.disabled ? <Warning message='Disabled' /> : null,
-    })
+    items.push(
+      <CompListItemText
+        title={sub.name}
+        subText={
+          <Time
+            prefix='Last sync: '
+            time={sub.lastAccess}
+            format='relative'
+            zero='Never'
+          />
+        }
+        action={renderOtherActions(sub.id)}
+        alwaysShowIcon
+        icon={sub.disabled ? <Warning message='Disabled' /> : null}
+        key={sub.id}
+      />,
+    )
   })
 
   return (
@@ -131,13 +134,13 @@ export default function UserCalendarSubscriptionList(props: {
         </Alert>
       )}
       <Card>
-        <FlatList
+        <CompList
           data-cy='calendar-subscriptions'
-          headerNote='Showing your current on-call subscriptions for all schedules'
+          note='Showing your current on-call subscriptions for all schedules'
           emptyMessage='You are not subscribed to any schedules.'
-          items={items}
-          inset
-        />
+        >
+          {items}
+        </CompList>
       </Card>
       {!creationDisabled && (
         <CreateFAB

From 4cfd3cf02a599a1e41fa8dcd2ca4b87a2f32dba3 Mon Sep 17 00:00:00 2001
From: Nathaniel Caza <mastercactapus@gmail.com>
Date: Thu, 20 Mar 2025 13:48:26 -0500
Subject: [PATCH 06/18] ui/dev: Add highlight prop to CompListItemText for
 improved item selection styling

---
 web/src/app/lists/CompListItems.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web/src/app/lists/CompListItems.tsx b/web/src/app/lists/CompListItems.tsx
index 080c4eb28f..5a5583f7da 100644
--- a/web/src/app/lists/CompListItems.tsx
+++ b/web/src/app/lists/CompListItems.tsx
@@ -16,6 +16,7 @@ export type CompListItemTextProps = {
   icon?: React.ReactNode
   /* Set to true to always create space for the icon, even if it is not set */
   alwaysShowIcon?: boolean
+  highlight?: boolean
 
   subText?: React.ReactNode
   action?: React.ReactNode
@@ -27,7 +28,7 @@ export function CompListItemText(
   props: CompListItemTextProps,
 ): React.ReactNode {
   return (
-    <ListItem>
+    <ListItem className={props.highlight ? 'Mui-selected' : ''}>
       {(props.icon || props.alwaysShowIcon) && (
         <ListItemIcon tabIndex={-1}>{props.icon}</ListItemIcon>
       )}

From bb192ae9689242633b60825d3a9e39ca7236a732 Mon Sep 17 00:00:00 2001
From: Nathaniel Caza <mastercactapus@gmail.com>
Date: Thu, 20 Mar 2025 13:48:57 -0500
Subject: [PATCH 07/18] Refactor UserSessionList to use CompList

---
 web/src/app/users/UserSessionList.tsx | 63 +++++++++++++++------------
 1 file changed, 34 insertions(+), 29 deletions(-)

diff --git a/web/src/app/users/UserSessionList.tsx b/web/src/app/users/UserSessionList.tsx
index 45771bcaca..abf4b3c65a 100644
--- a/web/src/app/users/UserSessionList.tsx
+++ b/web/src/app/users/UserSessionList.tsx
@@ -1,5 +1,4 @@
 import React, { useState } from 'react'
-import FlatList from '../lists/FlatList'
 import { useMutation, useQuery, CombinedError, gql } from 'urql'
 import { Button, Card, Grid, IconButton } from '@mui/material'
 import DeleteIcon from '@mui/icons-material/Delete'
@@ -9,6 +8,8 @@ import _ from 'lodash'
 import FormDialog from '../dialogs/FormDialog'
 import { nonFieldErrors } from '../util/errutil'
 import { Time } from '../util/Time'
+import CompList from '../lists/CompList'
+import { CompListItemText } from '../lists/CompListItems'
 
 const profileQuery = gql`
   query {
@@ -123,34 +124,38 @@ export default function UserSessionList({
         )}
         <Grid item xs={12}>
           <Card>
-            <FlatList
-              emptyMessage='No active sessions'
-              items={sessions.map((s) => ({
-                title: friendlyUAString(s.userAgent),
-                highlight: s.current,
-                secondaryAction: s.current ? null : (
-                  <IconButton
-                    onClick={() =>
-                      setEndSession({
-                        id: s.id,
-                        userAgent: s.userAgent,
-                      })
-                    }
-                    size='large'
-                  >
-                    <DeleteIcon />
-                  </IconButton>
-                ),
-                subText: (
-                  <Time
-                    format='relative'
-                    time={s.lastAccessAt}
-                    prefix='Last access: '
-                    min={{ minutes: 2 }}
-                  />
-                ),
-              }))}
-            />
+            <CompList emptyMessage='No active sessions'>
+              {sessions.map((s) => (
+                <CompListItemText
+                  key={s.id}
+                  title={friendlyUAString(s.userAgent)}
+                  highlight={s.current}
+                  action={
+                    s.current ? null : (
+                      <IconButton
+                        onClick={() =>
+                          setEndSession({
+                            id: s.id,
+                            userAgent: s.userAgent,
+                          })
+                        }
+                        size='large'
+                      >
+                        <DeleteIcon />
+                      </IconButton>
+                    )
+                  }
+                  subText={
+                    <Time
+                      format='relative'
+                      time={s.lastAccessAt}
+                      prefix='Last access: '
+                      min={{ minutes: 2 }}
+                    />
+                  }
+                />
+              ))}
+            </CompList>
           </Card>
         </Grid>
       </Grid>

From 41f37d68e8d648abd1d7dc976be9296aeec6e200 Mon Sep 17 00:00:00 2001
From: Nathaniel Caza <mastercactapus@gmail.com>
Date: Thu, 20 Mar 2025 13:51:57 -0500
Subject: [PATCH 08/18] ui/dev: Refactor UserOnCallAssignmentList to use
 CompList and CompListItemNav for improved rendering

---
 .../app/users/UserOnCallAssignmentList.tsx    | 27 +++++++++++--------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/web/src/app/users/UserOnCallAssignmentList.tsx b/web/src/app/users/UserOnCallAssignmentList.tsx
index aa897ecf44..2704185925 100644
--- a/web/src/app/users/UserOnCallAssignmentList.tsx
+++ b/web/src/app/users/UserOnCallAssignmentList.tsx
@@ -1,10 +1,11 @@
 import React from 'react'
 import { gql, useQuery } from 'urql'
 import { Card } from '@mui/material'
-import FlatList from '../lists/FlatList'
 import { sortBy, values } from 'lodash'
 import { GenericError, ObjectNotFound } from '../error-pages'
 import { OnCallServiceAssignment, User } from '../../schema'
+import CompList from '../lists/CompList'
+import { CompListItemNav } from '../lists/CompListItems'
 
 const query = gql`
   query userInfo($id: ID!) {
@@ -76,8 +77,8 @@ export default function UserOnCallAssignmentList(props: {
 
   return (
     <Card>
-      <FlatList
-        headerNote={
+      <CompList
+        note={
           props.currentUser
             ? 'Showing your current on-call assignments.'
             : `Showing current on-call assignments for ${user.name}`
@@ -87,14 +88,18 @@ export default function UserOnCallAssignmentList(props: {
             ? 'You are not currently on-call.'
             : `${user.name} is not currently on-call.`
         }
-        items={services(user.onCallOverview.serviceAssignments).map((svc) => ({
-          title: svc.name,
-          url: '/services/' + svc.id,
-          subText: `${svc.policyName}: ${svc.policySteps
-            .map((n) => `Step ${n + 1}`)
-            .join(', ')}`,
-        }))}
-      />
+      >
+        {services(user.onCallOverview.serviceAssignments).map((svc) => (
+          <CompListItemNav
+            key={svc.id}
+            title={svc.name}
+            url={'/services/' + svc.id}
+            subText={`${svc.policyName}: ${svc.policySteps
+              .map((n) => `Step ${n + 1}`)
+              .join(', ')}`}
+          />
+        ))}
+      </CompList>
     </Card>
   )
 }

From 3ff2363d543116d3909d6d97925a8a12ff462417 Mon Sep 17 00:00:00 2001
From: Nathaniel Caza <mastercactapus@gmail.com>
Date: Thu, 20 Mar 2025 13:54:18 -0500
Subject: [PATCH 09/18] ui/dev: Refactor UserList to use CompList and
 CompListItemNav for improved rendering

---
 web/src/app/users/UserList.tsx | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/web/src/app/users/UserList.tsx b/web/src/app/users/UserList.tsx
index e8863e06a6..050fcfaa80 100644
--- a/web/src/app/users/UserList.tsx
+++ b/web/src/app/users/UserList.tsx
@@ -6,10 +6,11 @@ import UserCreateDialog from './UserCreateDialog'
 import { useSessionInfo } from '../util/RequireConfig'
 import ListPageControls from '../lists/ListPageControls'
 import Search from '../util/Search'
-import FlatList from '../lists/FlatList'
 import { UserConnection } from '../../schema'
 import { useURLParam } from '../actions'
 import { FavoriteIcon } from '../util/SetFavoriteButton'
+import { CompListItemNav } from '../lists/CompListItems'
+import CompList from '../lists/CompList'
 
 const query = gql`
   query usersQuery($input: UserSearchOptions) {
@@ -77,18 +78,18 @@ function UserList(): JSX.Element {
         slots={{
           search: <Search endAdornment={<UserPhoneNumberFilterContainer />} />,
           list: (
-            <FlatList
-              emptyMessage='No results'
-              items={
-                q.data?.users.nodes.map((u) => ({
-                  title: u.name,
-                  subText: u.email,
-                  url: u.id,
-                  secondaryAction: u.isFavorite ? <FavoriteIcon /> : undefined,
-                  icon: <UserAvatar userID={u.id} />,
-                })) || []
-              }
-            />
+            <CompList emptyMessage='No results'>
+              {q.data?.users.nodes.map((u) => (
+                <CompListItemNav
+                  key={u.id}
+                  title={u.name}
+                  subText={u.email}
+                  url={u.id}
+                  action={u.isFavorite ? <FavoriteIcon /> : undefined}
+                  icon={<UserAvatar userID={u.id} />}
+                />
+              ))}
+            </CompList>
           ),
         }}
       />

From dbe30ef298b98fb4be903bc05795f12f6100c776 Mon Sep 17 00:00:00 2001
From: Nathaniel Caza <mastercactapus@gmail.com>
Date: Thu, 20 Mar 2025 13:57:46 -0500
Subject: [PATCH 10/18] ui/dev: Refactor UserContactMethodList to use CompList
 and CompListItemText for improved rendering

---
 web/src/app/users/UserContactMethodList.tsx | 27 +++++++++++----------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/web/src/app/users/UserContactMethodList.tsx b/web/src/app/users/UserContactMethodList.tsx
index 122eda8217..757986b046 100644
--- a/web/src/app/users/UserContactMethodList.tsx
+++ b/web/src/app/users/UserContactMethodList.tsx
@@ -1,6 +1,5 @@
 import React, { useState, ReactNode, Suspense } from 'react'
 import { gql, useQuery } from 'urql'
-import FlatList from '../lists/FlatList'
 import { Button, Card, CardHeader, Grid, IconButton } from '@mui/material'
 import makeStyles from '@mui/styles/makeStyles'
 import { Theme } from '@mui/material/styles'
@@ -18,6 +17,8 @@ import { UserContactMethod } from '../../schema'
 import { useSessionInfo, useContactMethodTypes } from '../util/RequireConfig'
 import UserContactMethodEditDialog from './UserContactMethodEditDialog'
 import UserContactMethodCreateDialog from './UserContactMethodCreateDialog'
+import CompList from '../lists/CompList'
+import { CompListItemText } from '../lists/CompListItems'
 
 const query = gql`
   query cmList($id: ID!) {
@@ -208,25 +209,25 @@ export default function UserContactMethodList(
             ) : null
           }
         />
-        <FlatList
-          data-cy='contact-methods'
-          items={sortContactMethods(contactMethods).map((cm) => {
+        <CompList data-cy='contact-methods' emptyMessage='No contact methods'>
+          {sortContactMethods(contactMethods).map((cm) => {
             const destType = destinationTypes.find(
               (d) => d.type === cm.dest.type,
             )
 
             const label = destType?.name || 'Unknown Type'
 
-            return {
-              id: cm.id,
-              title: `${cm.name} (${label})${cm.disabled ? ' - Disabled' : ''}`,
-              subText: getSubText(cm),
-              secondaryAction: getSecondaryAction(cm),
-              icon: getIcon(cm),
-            }
+            return (
+              <CompListItemText
+                key={cm.id}
+                title={`${cm.name} (${label})${cm.disabled ? ' - Disabled' : ''}`}
+                subText={getSubText(cm)}
+                action={getSecondaryAction(cm)}
+                icon={getIcon(cm)}
+              />
+            )
           })}
-          emptyMessage='No contact methods'
-        />
+        </CompList>
         <Suspense>
           {showAddDialog && (
             <UserContactMethodCreateDialog

From 726b6fb244e7932e3d446d8c5f897b458eb3f419 Mon Sep 17 00:00:00 2001
From: Nathaniel Caza <mastercactapus@gmail.com>
Date: Thu, 20 Mar 2025 13:59:46 -0500
Subject: [PATCH 11/18] Refactor UserNotificationRuleList to use CompList and
 CompListItemText for improved rendering

---
 .../app/users/UserNotificationRuleList.tsx    | 57 ++++++++++---------
 1 file changed, 31 insertions(+), 26 deletions(-)

diff --git a/web/src/app/users/UserNotificationRuleList.tsx b/web/src/app/users/UserNotificationRuleList.tsx
index 9c78206100..57e0d91c0c 100644
--- a/web/src/app/users/UserNotificationRuleList.tsx
+++ b/web/src/app/users/UserNotificationRuleList.tsx
@@ -10,7 +10,6 @@ import {
 } from '@mui/material'
 import makeStyles from '@mui/styles/makeStyles'
 import { Add, Delete } from '@mui/icons-material'
-import FlatList from '../lists/FlatList'
 import { formatNotificationRule, sortNotificationRules } from './util'
 import UserNotificationRuleDeleteDialog from './UserNotificationRuleDeleteDialog'
 import { styles as globalStyles } from '../styles/materialStyles'
@@ -18,6 +17,8 @@ import UserNotificationRuleCreateDialog from './UserNotificationRuleCreateDialog
 import { useIsWidthDown } from '../util/useWidth'
 import { ObjectNotFound, GenericError } from '../error-pages'
 import { User } from '../../schema'
+import CompList from '../lists/CompList'
+import { CompListItemText } from '../lists/CompListItems'
 
 const query = gql`
   query nrList($id: ID!) {
@@ -98,35 +99,39 @@ export default function UserNotificationRuleList(props: {
             ) : null
           }
         />
-        <FlatList
+        <CompList
           data-cy='notification-rules'
-          items={sortNotificationRules(user?.notificationRules ?? []).map(
-            (nr) => {
-              const formattedValue =
-                nr.contactMethod.dest.displayInfo.text || 'Unknown Label'
-              const name = nr.contactMethod.name || 'Unknown User'
-              const type =
-                nr.contactMethod.dest.displayInfo.iconAltText || 'Unknown Type'
-              return {
-                title: formatNotificationRule(nr.delayMinutes, {
+          emptyMessage='No notification rules'
+        >
+          {sortNotificationRules(user?.notificationRules ?? []).map((nr) => {
+            const formattedValue =
+              nr.contactMethod.dest.displayInfo.text || 'Unknown Label'
+            const name = nr.contactMethod.name || 'Unknown User'
+            const type =
+              nr.contactMethod.dest.displayInfo.iconAltText || 'Unknown Type'
+            return (
+              <CompListItemText
+                key={nr.id}
+                title={formatNotificationRule(nr.delayMinutes, {
                   type,
                   name,
                   formattedValue,
-                }),
-                secondaryAction: props.readOnly ? null : (
-                  <IconButton
-                    aria-label='Delete notification rule'
-                    onClick={() => setDeleteID(nr.id)}
-                    color='secondary'
-                  >
-                    <Delete />
-                  </IconButton>
-                ),
-              }
-            },
-          )}
-          emptyMessage='No notification rules'
-        />
+                })}
+                action={
+                  props.readOnly ? null : (
+                    <IconButton
+                      aria-label='Delete notification rule'
+                      onClick={() => setDeleteID(nr.id)}
+                      color='secondary'
+                    >
+                      <Delete />
+                    </IconButton>
+                  )
+                }
+              />
+            )
+          })}
+        </CompList>
       </Card>
       <Suspense>
         {showAddDialog && (

From 232149d8637a7eb124585f98ac874519770f1ab0 Mon Sep 17 00:00:00 2001
From: Nathaniel Caza <mastercactapus@gmail.com>
Date: Fri, 21 Mar 2025 15:18:37 -0500
Subject: [PATCH 12/18] Refactor schedule lists to use CompList and
 CompListItemNav/Text for improved rendering

---
 web/src/app/lists/CompListItems.tsx           |   3 +-
 .../app/schedules/ScheduleAssignedToList.tsx  |  21 ++--
 web/src/app/schedules/ScheduleList.tsx        |  25 +++--
 .../app/schedules/ScheduleOverrideList.jsx    |  63 ++++++-----
 web/src/app/schedules/ScheduleRuleList.tsx    | 102 +++++++++--------
 .../ScheduleOnCallNotificationsList.tsx       | 106 +++++++++---------
 6 files changed, 171 insertions(+), 149 deletions(-)

diff --git a/web/src/app/lists/CompListItems.tsx b/web/src/app/lists/CompListItems.tsx
index 5a5583f7da..3451d16c3a 100644
--- a/web/src/app/lists/CompListItems.tsx
+++ b/web/src/app/lists/CompListItems.tsx
@@ -46,13 +46,14 @@ export function CompListItemText(
 
 export type CompListItemNavProps = CompListItemTextProps & {
   url: string
+  newTab?: boolean
 }
 
 /* A list item that links to a URL. */
 export function CompListItemNav(props: CompListItemNavProps): React.ReactNode {
   return (
     <li>
-      <ListItemButton component={AppLink} to={props.url}>
+      <ListItemButton component={AppLink} to={props.url} newTab={props.newTab}>
         {props.icon && <ListItemIcon tabIndex={-1}>{props.icon}</ListItemIcon>}
         <ListItemText primary={props.title} secondary={props.subText} />
         {props.action && (
diff --git a/web/src/app/schedules/ScheduleAssignedToList.tsx b/web/src/app/schedules/ScheduleAssignedToList.tsx
index d2699c27c8..bf925d0365 100644
--- a/web/src/app/schedules/ScheduleAssignedToList.tsx
+++ b/web/src/app/schedules/ScheduleAssignedToList.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
 import { useQuery, gql } from 'urql'
-import FlatList from '../lists/FlatList'
 import Card from '@mui/material/Card'
 import Spinner from '../loading/components/Spinner'
 import { GenericError } from '../error-pages'
+import CompList from '../lists/CompList'
+import { CompListItemNav } from '../lists/CompListItems'
 
 const query = gql`
   query ($id: ID!) {
@@ -36,15 +37,15 @@ export default function ScheduleAssignedToList(props: {
 
   return (
     <Card sx={{ width: '100%' }}>
-      <FlatList
-        items={data.schedule.assignedTo.map(
-          (t: { name: string; id: string }) => ({
-            title: t.name,
-            url: `/escalation-policies/${t.id}`,
-          }),
-        )}
-        emptyMessage='This schedule is not assigned to any escalation policies.'
-      />
+      <CompList emptyMessage='This schedule is not assigned to any escalation policies.'>
+        {data.schedule.assignedTo.map((t: { name: string; id: string }) => (
+          <CompListItemNav
+            key={t.id}
+            title={t.name}
+            url={`/escalation-policies/${t.id}`}
+          />
+        ))}
+      </CompList>
     </Card>
   )
 }
diff --git a/web/src/app/schedules/ScheduleList.tsx b/web/src/app/schedules/ScheduleList.tsx
index ec22f71283..d2046935cf 100644
--- a/web/src/app/schedules/ScheduleList.tsx
+++ b/web/src/app/schedules/ScheduleList.tsx
@@ -5,8 +5,9 @@ import { useURLParam } from '../actions'
 import { ScheduleConnection } from '../../schema'
 import ListPageControls from '../lists/ListPageControls'
 import Search from '../util/Search'
-import FlatList from '../lists/FlatList'
 import { FavoriteIcon } from '../util/SetFavoriteButton'
+import CompList from '../lists/CompList'
+import { CompListItemNav } from '../lists/CompListItems'
 
 const query = gql`
   query schedulesQuery($input: ScheduleSearchOptions) {
@@ -67,17 +68,17 @@ export default function ScheduleList(): JSX.Element {
         slots={{
           search: <Search />,
           list: (
-            <FlatList
-              emptyMessage='No results'
-              items={
-                q.data?.schedules.nodes.map((u) => ({
-                  title: u.name,
-                  subText: u.description,
-                  url: u.id,
-                  secondaryAction: u.isFavorite ? <FavoriteIcon /> : undefined,
-                })) || []
-              }
-            />
+            <CompList emptyMessage='No results'>
+              {q.data?.schedules.nodes.map((u) => (
+                <CompListItemNav
+                  key={u.id}
+                  title={u.name}
+                  subText={u.description}
+                  url={u.id}
+                  action={u.isFavorite ? <FavoriteIcon /> : undefined}
+                />
+              ))}
+            </CompList>
           ),
         }}
       />
diff --git a/web/src/app/schedules/ScheduleOverrideList.jsx b/web/src/app/schedules/ScheduleOverrideList.jsx
index 0c16bbd171..2446889654 100644
--- a/web/src/app/schedules/ScheduleOverrideList.jsx
+++ b/web/src/app/schedules/ScheduleOverrideList.jsx
@@ -19,7 +19,8 @@ import { defaultTempSchedValue } from './temp-sched/sharedUtils'
 import ScheduleOverrideDialog from './ScheduleOverrideDialog'
 import CreateFAB from '../lists/CreateFAB'
 import ListPageControls from '../lists/ListPageControls'
-import FlatList from '../lists/FlatList'
+import CompList from '../lists/CompList'
+import { CompListItemText } from '../lists/CompListItems'
 
 const query = gql`
   query scheduleOverrides($input: UserOverrideSearchOptions) {
@@ -143,35 +144,10 @@ export default function ScheduleOverrideList({ scheduleID }) {
         loading={q.fetching}
         slots={{
           list: (
-            <FlatList
+            <CompList
               emptyMessage='No results'
-              headerNote={note}
-              items={
-                q.data?.userOverrides.nodes.map((n) => ({
-                  title: n.addUser ? n.addUser.name : n.removeUser.name,
-                  subText: subText(n),
-                  icon: (
-                    <UserAvatar
-                      userID={n.addUser ? n.addUser.id : n.removeUser.id}
-                    />
-                  ),
-                  secondaryAction: (
-                    <OtherActions
-                      actions={[
-                        {
-                          label: 'Edit',
-                          onClick: () => setEditID(n.id),
-                        },
-                        {
-                          label: 'Delete',
-                          onClick: () => setDeleteID(n.id),
-                        },
-                      ]}
-                    />
-                  ),
-                })) || []
-              }
-              headerAction={
+              note={note}
+              action={
                 <React.Fragment>
                   <FilterContainer onReset={() => resetFilter()}>
                     <Grid item xs={12}>
@@ -212,7 +188,34 @@ export default function ScheduleOverrideList({ scheduleID }) {
                   )}
                 </React.Fragment>
               }
-            />
+            >
+              {q.data?.userOverrides.nodes.map((n) => (
+                <CompListItemText
+                  key={n.id}
+                  title={n.addUser ? n.addUser.name : n.removeUser.name}
+                  subText={subText(n)}
+                  icon={
+                    <UserAvatar
+                      userID={n.addUser ? n.addUser.id : n.removeUser.id}
+                    />
+                  }
+                  action={
+                    <OtherActions
+                      actions={[
+                        {
+                          label: 'Edit',
+                          onClick: () => setEditID(n.id),
+                        },
+                        {
+                          label: 'Delete',
+                          onClick: () => setDeleteID(n.id),
+                        },
+                      ]}
+                    />
+                  }
+                />
+              ))}
+            </CompList>
           ),
         }}
       />
diff --git a/web/src/app/schedules/ScheduleRuleList.tsx b/web/src/app/schedules/ScheduleRuleList.tsx
index b38b856563..0dec9fbddf 100644
--- a/web/src/app/schedules/ScheduleRuleList.tsx
+++ b/web/src/app/schedules/ScheduleRuleList.tsx
@@ -1,6 +1,5 @@
 import React, { Suspense, useState } from 'react'
 import { useQuery, gql } from 'urql'
-import FlatList, { FlatListListItem } from '../lists/FlatList'
 import { Button, ButtonGroup, Card } from '@mui/material'
 import { GroupAdd, PersonAdd } from '@mui/icons-material'
 import Tooltip from '@mui/material/Tooltip'
@@ -18,6 +17,8 @@ import { DateTime } from 'luxon'
 import { useScheduleTZ } from './useScheduleTZ'
 import { useIsWidthDown } from '../util/useWidth'
 import { ScheduleRule, ScheduleTarget, TargetType } from '../../schema'
+import CompList from '../lists/CompList'
+import { CompListItemNav, CompListItemText } from '../lists/CompListItems'
 
 const query = gql`
   query scheduleRules($id: ID!) {
@@ -99,64 +100,75 @@ export default function ScheduleRuleList(
     targets: ScheduleTarget[],
     timeZone: string,
   ): JSX.Element {
-    const items: FlatListListItem[] = []
+    const items: React.ReactNode[] = []
 
     let lastType: TargetType
     sortBy(targets, ['target.type', 'target.name']).forEach((tgt) => {
       const { name, id, type } = tgt.target
       if (type !== lastType) {
-        items.push({ subHeader: startCase(type + 's') })
+        items.push(
+          <CompListItemText key={type} subText={startCase(type + 's')} />,
+        )
         lastType = type
       }
 
-      items.push({
-        title: name,
-        url: (type === 'rotation' ? '/rotations/' : '/users/') + id,
-        subText: renderSubText(tgt.rules, timeZone),
-        icon:
-          type === 'rotation' ? <RotationAvatar /> : <UserAvatar userID={id} />,
-        secondaryAction: (
-          <OtherActions
-            actions={[
-              {
-                label: 'Edit',
-                onClick: () => setEditTarget({ type, id }),
-              },
-              {
-                label: 'Delete',
-                onClick: () => setDeleteTarget({ type, id }),
-              },
-            ]}
-          />
-        ),
-      })
+      items.push(
+        <CompListItemNav
+          key={id}
+          title={name}
+          newTab
+          url={(type === 'rotation' ? '/rotations/' : '/users/') + id}
+          subText={renderSubText(tgt.rules, timeZone)}
+          icon={
+            type === 'rotation' ? (
+              <RotationAvatar />
+            ) : (
+              <UserAvatar userID={id} />
+            )
+          }
+          action={
+            <OtherActions
+              actions={[
+                {
+                  label: 'Edit',
+                  onClick: () => setEditTarget({ type, id }),
+                },
+                {
+                  label: 'Delete',
+                  onClick: () => setDeleteTarget({ type, id }),
+                },
+              ]}
+            />
+          }
+        />,
+      )
     })
 
     return (
       <React.Fragment>
         <Card style={{ width: '100%', marginBottom: 64 }}>
-          <FlatList
-            headerNote={`Showing times in ${data.schedule.timeZone}.`}
-            items={items}
-            headerAction={
-              !isMobile ? (
-                <ButtonGroup variant='contained'>
-                  <Button
-                    startIcon={<GroupAdd />}
-                    onClick={() => setCreateType('rotation')}
-                  >
-                    Add Rotation
-                  </Button>
-                  <Button
-                    startIcon={<PersonAdd />}
-                    onClick={() => setCreateType('user')}
-                  >
-                    Add User
-                  </Button>
-                </ButtonGroup>
-              ) : undefined
+          <CompList
+            note={`Showing times in ${data.schedule.timeZone}.`}
+            hideActionOnMobile
+            action={
+              <ButtonGroup variant='contained'>
+                <Button
+                  startIcon={<GroupAdd />}
+                  onClick={() => setCreateType('rotation')}
+                >
+                  Add Rotation
+                </Button>
+                <Button
+                  startIcon={<PersonAdd />}
+                  onClick={() => setCreateType('user')}
+                >
+                  Add User
+                </Button>
+              </ButtonGroup>
             }
-          />
+          >
+            {items}
+          </CompList>
         </Card>
 
         {isMobile && (
diff --git a/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsList.tsx b/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsList.tsx
index 55f165b474..580a032846 100644
--- a/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsList.tsx
+++ b/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsList.tsx
@@ -1,6 +1,5 @@
 import React, { Suspense, useState } from 'react'
 import { Button, Grid, Card, Typography, Tooltip, Theme } from '@mui/material'
-import FlatList from '../../lists/FlatList'
 import OtherActions from '../../util/OtherActions'
 import { onCallRuleSummary } from './util'
 import ScheduleOnCallNotificationsDeleteDialog from './ScheduleOnCallNotificationsDeleteDialog'
@@ -15,6 +14,8 @@ import { styles as globalStyles } from '../../styles/materialStyles'
 import makeStyles from '@mui/styles/makeStyles'
 import ScheduleOnCallNotificationsCreateDialog from './ScheduleOnCallNotificationsCreateDialog'
 import ScheduleOnCallNotificationsEditDialog from './ScheduleOnCallNotificationsEditDialog'
+import CompList from '../../lists/CompList'
+import { CompListItemText } from '../../lists/CompListItems'
 
 export type ScheduleOnCallNotificationsListProps = {
   scheduleID: string
@@ -70,8 +71,8 @@ export default function ScheduleOnCallNotificationsList({
       <Grid container spacing={2}>
         <Grid item xs={12}>
           <Card>
-            <FlatList
-              headerNote={
+            <CompList
+              note={
                 <Typography
                   component='p'
                   variant='subtitle1'
@@ -86,7 +87,6 @@ export default function ScheduleOnCallNotificationsList({
                   </span>
                 </Typography>
               }
-              items={[]}
             />
           </Card>
         </Grid>
@@ -102,28 +102,57 @@ export default function ScheduleOnCallNotificationsList({
       <Grid container spacing={2}>
         <Grid item xs={12}>
           <Card>
-            <FlatList
-              headerNote={`Showing times for schedule in ${timeZone}.`}
+            <CompList
+              note={`Showing times for schedule in ${timeZone}.`}
               emptyMessage='No notification rules.'
-              headerAction={
-                isMobile ? undefined : (
-                  <Button
-                    variant='contained'
-                    onClick={() => setCreateRule(true)}
-                    startIcon={<Add />}
-                  >
-                    Create Notification Rule
-                  </Button>
-                )
+              hideActionOnMobile
+              action={
+                <Button
+                  variant='contained'
+                  onClick={() => setCreateRule(true)}
+                  startIcon={<Add />}
+                >
+                  Create Notification Rule
+                </Button>
               }
-              items={q.data.schedule.onCallNotificationRules.map((rule) => {
+            >
+              {q.data.schedule.onCallNotificationRules.map((rule) => {
                 const display = rule.dest.displayInfo
                 if ('error' in display) {
-                  return {
-                    icon: <DestinationAvatar error />,
-                    title: `ERROR: ${display.error}`,
-                    subText: 'Notifies ' + onCallRuleSummary(timeZone, rule),
-                    secondaryAction: (
+                  return (
+                    <CompListItemText
+                      icon={<DestinationAvatar error />}
+                      title={`ERROR: ${display.error}`}
+                      subText={`Notifies ${onCallRuleSummary(timeZone, rule)}`}
+                      action={
+                        <OtherActions
+                          actions={[
+                            {
+                              label: 'Edit',
+                              onClick: () => setEditRuleID(rule.id),
+                            },
+                            {
+                              label: 'Delete',
+                              onClick: () => setDeleteRuleID(rule.id),
+                            },
+                          ]}
+                        />
+                      }
+                    />
+                  )
+                }
+
+                return (
+                  <CompListItemText
+                    icon={
+                      <DestinationAvatar
+                        iconURL={display.iconURL}
+                        iconAltText={display.iconAltText}
+                      />
+                    }
+                    title={display.text}
+                    subText={'Notifies ' + onCallRuleSummary(timeZone, rule)}
+                    action={
                       <OtherActions
                         actions={[
                           {
@@ -136,36 +165,11 @@ export default function ScheduleOnCallNotificationsList({
                           },
                         ]}
                       />
-                    ),
-                  }
-                }
-
-                return {
-                  icon: (
-                    <DestinationAvatar
-                      iconURL={display.iconURL}
-                      iconAltText={display.iconAltText}
-                    />
-                  ),
-                  title: display.text,
-                  subText: 'Notifies ' + onCallRuleSummary(timeZone, rule),
-                  secondaryAction: (
-                    <OtherActions
-                      actions={[
-                        {
-                          label: 'Edit',
-                          onClick: () => setEditRuleID(rule.id),
-                        },
-                        {
-                          label: 'Delete',
-                          onClick: () => setDeleteRuleID(rule.id),
-                        },
-                      ]}
-                    />
-                  ),
-                }
+                    }
+                  />
+                )
               })}
-            />
+            </CompList>
           </Card>
         </Grid>
       </Grid>

From 65f726c62dbb9318bdfafa7440b48113a428b063 Mon Sep 17 00:00:00 2001
From: Nathaniel Caza <mastercactapus@gmail.com>
Date: Fri, 21 Mar 2025 15:22:43 -0500
Subject: [PATCH 13/18] Refactor ScheduleShiftList to use CompList and
 CompListItemText for improved rendering

---
 web/src/app/schedules/ScheduleShiftList.tsx | 34 +++++++++++----------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/web/src/app/schedules/ScheduleShiftList.tsx b/web/src/app/schedules/ScheduleShiftList.tsx
index 4ea2f6f7d3..52dc8686d0 100644
--- a/web/src/app/schedules/ScheduleShiftList.tsx
+++ b/web/src/app/schedules/ScheduleShiftList.tsx
@@ -14,7 +14,6 @@ import makeStyles from '@mui/styles/makeStyles'
 import { DateTime, DateTimeFormatOptions, Duration, Interval } from 'luxon'
 import React, { Suspense, useCallback, useMemo, useState } from 'react'
 import CreateFAB from '../lists/CreateFAB'
-import FlatList, { FlatListListItem } from '../lists/FlatList'
 import { UserSelect } from '../selection'
 import { UserAvatar } from '../util/avatars'
 import FilterContainer from '../util/FilterContainer'
@@ -31,6 +30,8 @@ import {
   defaultTempSchedValue,
 } from './temp-sched/sharedUtils'
 import TempSchedDialog from './temp-sched/TempSchedDialog'
+import CompList from '../lists/CompList'
+import { CompListItemText } from '../lists/CompListItems'
 
 // query name is important, as it's used for refetching data after mutations
 const query = gql`
@@ -221,7 +222,7 @@ function ScheduleShiftList({
     )
   }
 
-  function items(): FlatListListItem[] {
+  function items(): React.ReactNode[] {
     const _shifts: Shift[] =
       data?.schedule?.shifts?.map((s: Shift) => ({
         ...s,
@@ -251,19 +252,19 @@ function ScheduleShiftList({
       DateTime.fromISO(end).startOf('day'),
     )
 
-    const result: FlatListListItem[] = []
+    const result: React.ReactNode[] = []
     displaySpan.splitBy({ days: 1 }).forEach((day) => {
       const dayShifts = shifts.filter((s) => day.overlaps(s.interval))
       if (!dayShifts.length) return
-      result.push({
-        subHeader: relativeDate(day.start),
-      })
+      result.push(<CompListItemText subText={relativeDate(day.start)} />)
       dayShifts.forEach((s) => {
-        result.push({
-          title: s.user?.name || '',
-          subText: getShiftDetails(s, day),
-          icon: <UserAvatar userID={s.userID} />,
-        })
+        result.push(
+          <CompListItemText
+            title={s.user?.name || ''}
+            subText={getShiftDetails(s, day)}
+            icon={<UserAvatar userID={s.userID} />}
+          />,
+        )
       })
     })
 
@@ -333,10 +334,9 @@ function ScheduleShiftList({
       }}
     >
       <Card style={{ width: '100%' }}>
-        <FlatList
-          headerNote={note}
-          items={items()}
-          headerAction={
+        <CompList
+          note={note}
+          action={
             <React.Fragment>
               <FilterContainer
                 onReset={() => {
@@ -396,7 +396,9 @@ function ScheduleShiftList({
               )}
             </React.Fragment>
           }
-        />
+        >
+          {items()}
+        </CompList>
       </Card>
       {isMobile && (
         <CreateFAB

From 6e3d7c1411e569eaac3079f57dd0cd50321def92 Mon Sep 17 00:00:00 2001
From: Nathaniel Caza <mastercactapus@gmail.com>
Date: Thu, 3 Apr 2025 16:57:16 -0500
Subject: [PATCH 14/18] ci: add integration workflow for comprehensive testing

---
 .github/workflows/integration.yml | 80 +++++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 .github/workflows/integration.yml

diff --git a/.github/workflows/integration.yml b/.github/workflows/integration.yml
new file mode 100644
index 0000000000..61443dc423
--- /dev/null
+++ b/.github/workflows/integration.yml
@@ -0,0 +1,80 @@
+name: Integration Tests
+
+on:
+  push:
+    tags:
+      - v*
+    branches:
+      - master
+      - main
+  pull_request:
+
+# Cancel in-progress jobs if a new commit is pushed to the same branch
+concurrency:
+  group: ci-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  Postgres-13:
+    # You need to use the INSTALLATION_NAME from the previous step
+    runs-on: arc-runner-set
+    container:
+      image: goalert/build-env:go1.24.2-postgres13
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set git safe directory
+        run: git config --global --add safe.directory $GITHUB_WORKSPACE
+
+      - name: Restore cache
+        id: cache-restore
+        uses: actions/cache/restore@v4
+        with: &CACHE_CONFIG
+          path: |
+            /github/home/.cache/go-build
+            /go/pkg/mod
+            /github/home/.bun/install/cache
+          key: dep-cache
+
+      # Run repo & linting checks
+      - name: Repo & Linting Checks
+        run: make check
+
+      # Build the binary and run the self-test
+      - name: GoAlert Self-Test
+        run: make self-test
+
+      # Validate binaries build successfully
+      - name: Build Check (linux-amd64)
+        run: make bin/goalert-linux-amd64.tgz
+      - name: Build Check (linux-arm64)
+        run: make bin/goalert-linux-arm64.tgz
+      - name: Build Check (linux-arm)
+        run: make bin/goalert-linux-arm.tgz
+      - name: Build Check (darwin-amd64)
+        run: make bin/goalert-darwin-amd64.tgz
+      # build-env is missing zip
+      # - name: Build Check (windows-amd64)
+      #   run: make bin/goalert-windows-amd64.zip
+
+      - name: Save cache
+        uses: actions/cache/restore@v4
+        with: *CACHE_CONFIG
+
+      # Run all tests
+      - name: Unit Tests
+        run: make test-unit
+      - name: UI Component Tests (Storybook)
+        run: make test-components
+
+      # Postgres is used for the remaining tests
+      - name: Start Postgres
+        run: start_postgres
+
+      - name: Behavioral Tests (smoke tests)
+        run: make smoketest
+      - name: Playwright Tests
+        run: make playwright-run
+      - name: Cypress Tests (Widescreen)
+        run: make cy-wide-prod-run
+      - name: Cypress Tests (Mobile)
+        run: make cy-mobile-prod-run

From 8b0d0eae360adb14f69ba1f357110583ef8941a4 Mon Sep 17 00:00:00 2001
From: Nathaniel Caza <mastercactapus@gmail.com>
Date: Fri, 4 Apr 2025 14:09:10 -0500
Subject: [PATCH 15/18] fix: add unique keys to CompListItemText components for
 error handling

---
 .../on-call-notifications/ScheduleOnCallNotificationsList.tsx   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsList.tsx b/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsList.tsx
index 580a032846..ceabd5f496 100644
--- a/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsList.tsx
+++ b/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsList.tsx
@@ -121,6 +121,7 @@ export default function ScheduleOnCallNotificationsList({
                 if ('error' in display) {
                   return (
                     <CompListItemText
+                      key={rule.id}
                       icon={<DestinationAvatar error />}
                       title={`ERROR: ${display.error}`}
                       subText={`Notifies ${onCallRuleSummary(timeZone, rule)}`}
@@ -144,6 +145,7 @@ export default function ScheduleOnCallNotificationsList({
 
                 return (
                   <CompListItemText
+                    key={rule.id}
                     icon={
                       <DestinationAvatar
                         iconURL={display.iconURL}

From 6bba17b680320be8f0a87086c5bd632b9383dc1a Mon Sep 17 00:00:00 2001
From: Nathaniel Caza <mastercactapus@gmail.com>
Date: Mon, 21 Apr 2025 15:25:59 -0500
Subject: [PATCH 16/18] Revert "ci: add integration workflow for comprehensive
 testing"

This reverts commit 6e3d7c1411e569eaac3079f57dd0cd50321def92.
---
 .github/workflows/integration.yml | 80 -------------------------------
 1 file changed, 80 deletions(-)
 delete mode 100644 .github/workflows/integration.yml

diff --git a/.github/workflows/integration.yml b/.github/workflows/integration.yml
deleted file mode 100644
index 61443dc423..0000000000
--- a/.github/workflows/integration.yml
+++ /dev/null
@@ -1,80 +0,0 @@
-name: Integration Tests
-
-on:
-  push:
-    tags:
-      - v*
-    branches:
-      - master
-      - main
-  pull_request:
-
-# Cancel in-progress jobs if a new commit is pushed to the same branch
-concurrency:
-  group: ci-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  Postgres-13:
-    # You need to use the INSTALLATION_NAME from the previous step
-    runs-on: arc-runner-set
-    container:
-      image: goalert/build-env:go1.24.2-postgres13
-    steps:
-      - uses: actions/checkout@v4
-      - name: Set git safe directory
-        run: git config --global --add safe.directory $GITHUB_WORKSPACE
-
-      - name: Restore cache
-        id: cache-restore
-        uses: actions/cache/restore@v4
-        with: &CACHE_CONFIG
-          path: |
-            /github/home/.cache/go-build
-            /go/pkg/mod
-            /github/home/.bun/install/cache
-          key: dep-cache
-
-      # Run repo & linting checks
-      - name: Repo & Linting Checks
-        run: make check
-
-      # Build the binary and run the self-test
-      - name: GoAlert Self-Test
-        run: make self-test
-
-      # Validate binaries build successfully
-      - name: Build Check (linux-amd64)
-        run: make bin/goalert-linux-amd64.tgz
-      - name: Build Check (linux-arm64)
-        run: make bin/goalert-linux-arm64.tgz
-      - name: Build Check (linux-arm)
-        run: make bin/goalert-linux-arm.tgz
-      - name: Build Check (darwin-amd64)
-        run: make bin/goalert-darwin-amd64.tgz
-      # build-env is missing zip
-      # - name: Build Check (windows-amd64)
-      #   run: make bin/goalert-windows-amd64.zip
-
-      - name: Save cache
-        uses: actions/cache/restore@v4
-        with: *CACHE_CONFIG
-
-      # Run all tests
-      - name: Unit Tests
-        run: make test-unit
-      - name: UI Component Tests (Storybook)
-        run: make test-components
-
-      # Postgres is used for the remaining tests
-      - name: Start Postgres
-        run: start_postgres
-
-      - name: Behavioral Tests (smoke tests)
-        run: make smoketest
-      - name: Playwright Tests
-        run: make playwright-run
-      - name: Cypress Tests (Widescreen)
-        run: make cy-wide-prod-run
-      - name: Cypress Tests (Mobile)
-        run: make cy-mobile-prod-run

From 832564a254dab4485cc7b8d70c0828b960fac4aa Mon Sep 17 00:00:00 2001
From: Nathaniel Caza <mastercactapus@gmail.com>
Date: Wed, 23 Apr 2025 09:49:22 -0500
Subject: [PATCH 17/18] fix: add unique keys to CompListItemText components for
 improved rendering

---
 web/src/app/schedules/ScheduleShiftList.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/web/src/app/schedules/ScheduleShiftList.tsx b/web/src/app/schedules/ScheduleShiftList.tsx
index 52dc8686d0..8396b8f759 100644
--- a/web/src/app/schedules/ScheduleShiftList.tsx
+++ b/web/src/app/schedules/ScheduleShiftList.tsx
@@ -256,10 +256,16 @@ function ScheduleShiftList({
     displaySpan.splitBy({ days: 1 }).forEach((day) => {
       const dayShifts = shifts.filter((s) => day.overlaps(s.interval))
       if (!dayShifts.length) return
-      result.push(<CompListItemText subText={relativeDate(day.start)} />)
+      result.push(
+        <CompListItemText
+          key={day.toISO()}
+          subText={relativeDate(day.start)}
+        />,
+      )
       dayShifts.forEach((s) => {
         result.push(
           <CompListItemText
+            key={s.userID + s.start.toISO()}
             title={s.user?.name || ''}
             subText={getShiftDetails(s, day)}
             icon={<UserAvatar userID={s.userID} />}

From b6dd70373f3646503e7622d4bb75e972a99ac695 Mon Sep 17 00:00:00 2001
From: KatieMSB <katriannasb@gmail.com>
Date: Wed, 24 Jun 2026 14:50:42 -0500
Subject: [PATCH 18/18] update data-cy prop

---
 web/src/app/lists/CompListItems.tsx | 1 +
 web/src/cypress/e2e/schedules.cy.ts | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/src/app/lists/CompListItems.tsx b/web/src/app/lists/CompListItems.tsx
index 3451d16c3a..072690d48c 100644
--- a/web/src/app/lists/CompListItems.tsx
+++ b/web/src/app/lists/CompListItems.tsx
@@ -36,6 +36,7 @@ export function CompListItemText(
         disableTypography={props.disableTypography}
         primary={props.title}
         secondary={props.subText}
+        data-cy='comp-list-item-subheader'
       />
       {props.action && (
         <ListItemSecondaryAction>{props.action}</ListItemSecondaryAction>
diff --git a/web/src/cypress/e2e/schedules.cy.ts b/web/src/cypress/e2e/schedules.cy.ts
index 93ba9f9ce3..c99ff6c321 100644
--- a/web/src/cypress/e2e/schedules.cy.ts
+++ b/web/src/cypress/e2e/schedules.cy.ts
@@ -155,8 +155,8 @@ function testSchedules(screen: ScreenFormat): void {
       }).then(() => {
         cy.engineTrigger()
         cy.get('[data-cy="route-links"] li').contains('Shifts').click()
-        cy.get('[data-cy=flat-list-item-subheader]').should('contain', 'Today')
-        cy.get('[data-cy=flat-list-item-subheader]').should(
+        cy.get('[data-cy=comp-list-item-subheader]').should('contain', 'Today')
+        cy.get('[data-cy=comp-list-item-subheader]').should(
           'contain',
           'Tomorrow',
         )