event menu is component

src/features/editors/list/EventList.jsx

@@ -1,31 +1,22 @@
-import {
+import { useContext, useEffect } from 'react';
-  AddIcon,
-  AttachmentIcon,
-  ChevronDownIcon,
-  DownloadIcon,
-} from '@chakra-ui/icons';
-import {
-  Button,
-  ButtonGroup,
-  IconButton,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-} from '@chakra-ui/react';
-import { useContext } from 'react';
 import { EventContext } from '../../../app/context/eventContext';
 import { EventListContext } from '../../../app/context/eventListContext';
 import EventListItem from './EventListItem';
 import style from './List.module.css';
 import DelayBlock from './DelayBlock';
 import BlockBlock from './BlockBlock';
+import EventListMenu from '../../menu/EventListMenu';
 
-export default function EventList() {
+
+export default function EventList(props) {
   const [events, setEvents] = useContext(EventListContext);
   const [event] = useContext(EventContext);
 
-  const selected = event?.id || -1;
+  // update number of events
+  useEffect(() => {
+    const f = events.filter((e) => e.type === 'event');
+    props.updatePlayback({ numEvents: f.length });
+  }, [events]);
 
   const insertItemAt = (item, index) => {
     // handle insert at beggining of array
@@ -116,63 +107,21 @@ export default function EventList() {
 
   console.log('events in event list', events);
   let cumulativeDelay = 0;
+  let eventCount = -1;
+
   return (
     <>
-      <div className={style.headerButtons}>
+      <EventListMenu createEvent={createEvent} />
-        <Menu>
-          <ButtonGroup isAttached>
-            <Button size='sm' variant='outline'>
-              Upload
-            </Button>
-            <MenuButton
-              as={Button}
-              leftIcon={<AttachmentIcon />}
-              size='sm'
-              variant='outline'
-            >
-              <ChevronDownIcon />
-            </MenuButton>
-          </ButtonGroup>
-          <MenuList>
-            <MenuItem>Upload Excel</MenuItem>
-            <MenuItem>Upload CSV</MenuItem>
-          </MenuList>
-        </Menu>
-        <Menu>
-          <ButtonGroup isAttached>
-            <Button size='sm' variant='outline'>
-              Save
-            </Button>
-            <MenuButton
-              as={Button}
-              leftIcon={<DownloadIcon />}
-              size='sm'
-              variant='outline'
-            >
-              <ChevronDownIcon />
-            </MenuButton>
-          </ButtonGroup>
-          <MenuList>
-            <MenuItem>Download Excel</MenuItem>
-            <MenuItem>Download CSV</MenuItem>
-          </MenuList>
-        </Menu>
-        <IconButton
-          size='sm'
-          icon={<AddIcon />}
-          colorScheme='blue'
-          onClick={() => createEvent()}
-        />
-      </div>
       <div className={style.eventContainer}>
         {events.map((e, index) => {
           if (e.type === 'event') {
+            eventCount = eventCount + 1;
             return (
               <EventListItem
                 key={e.id}
                 index={index}
                 data={e}
-                selected={e.id === selected}
+                selected={props.selected === eventCount}
                 createEvent={createEvent}
                 deleteEvent={deleteEvent}
                 createDelay={createDelay}

src/features/editors/list/List.module.css

@@ -1,11 +1,4 @@
 /* ============= EVENT LIST ============= */
-.headerButtons {
-  display: flex;
-  gap: 0.5em;
-  align-content: center;
-  justify-content: flex-end;
-}
-
 .eventContainer {
 }
 
@@ -20,7 +13,8 @@
   left: 0;
   width: 100%;
   display: grid;
-  grid-template-columns: auto auto 5em 1fr auto;
+  grid-template-columns: auto 5em 1fr auto;
+  padding-left: 1em;
   gap: 0.5em;
   justify-content: center;
   align-content: center;
@@ -31,10 +25,14 @@
 
 .eventRow {
   background-color: #0001;
+  border-top: 2px solid #0001;
+  border-bottom: 2px solid #0001;
 }
 
 .eventRowActive {
   background-color: #b2f5eaaa;
+  border-top: 2px solid #b2f5ea;
+  border-bottom: 2px solid #b2f5ea;
 }
 
 .arm,
@@ -136,12 +134,11 @@
   top: 1em;
   margin: 0.2em 0;
   padding: 0.2em 1em;
-  width: 100%;
   background-color: #ecc94baa;
   border-radius: 8px;
   color: white;
   border: 1px solid #0001;
-  border-top: 8px solid #ecc94b;
+  border-top: 4px solid #ecc94b;
   box-sizing: border-box;
 
   width: 100%;

src/features/menu/EventListMenu.jsx

@@ -0,0 +1,54 @@
+import { AddIcon, ChevronDownIcon } from '@chakra-ui/icons';
+import {
+  Button,
+  ButtonGroup,
+  IconButton,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+} from '@chakra-ui/react';
+import style from './EventListMenu.module.css';
+
+export default function EventListMenu(props) {
+  const buttonProps = {
+    size: 'sm',
+    variant: 'outline',
+  };
+  return (
+    <div className={style.headerButtons}>
+      <Menu>
+        <ButtonGroup isAttached>
+          <Button size='sm' variant='outline'>
+            Upload
+          </Button>
+          <MenuButton as={Button} {...buttonProps}>
+            <ChevronDownIcon />
+          </MenuButton>
+        </ButtonGroup>
+        <MenuList>
+          <MenuItem>Upload Excel</MenuItem>
+          <MenuItem>Upload CSV</MenuItem>
+        </MenuList>
+      </Menu>
+      <Menu>
+        <ButtonGroup isAttached>
+          <Button {...buttonProps}>Save</Button>
+          <MenuButton as={Button} {...buttonProps}>
+            <ChevronDownIcon />
+          </MenuButton>
+        </ButtonGroup>
+        <MenuList>
+          <MenuItem>Download Excel</MenuItem>
+          <MenuItem>Download CSV</MenuItem>
+        </MenuList>
+      </Menu>
+      <IconButton
+        size='sm'
+        icon={<AddIcon />}
+        colorScheme='blue'
+        onClick={() => props.createEvent()}
+      />
+    </div>
+  );
+}

src/features/menu/EventListMenu.module.css

@@ -0,0 +1,6 @@
+.headerButtons {
+  display: flex;
+  gap: 0.5em;
+  align-content: center;
+  justify-content: flex-end;
+}