refractor + style tweaks

- bugfix on lower
- delay between 0-60 minutes
- action buttons in dropdown
- added button for toggling element visibility
- several css and code cleanups
- renamed settingsAPI

client/src/features/editors/Editor.module.css

@@ -7,7 +7,7 @@
   padding: 2vh;
 
   display: grid;
-  grid-template-rows: 1fr 1fr 1fr;
+  grid-template-rows: 38vh 1fr 1fr;
   grid-template-columns: 1fr 25vw 25vw 5vw;
   grid-template-areas:
     'even mess play sett'
@@ -67,7 +67,6 @@
 .mainContainer > div {
   border-radius: 0.5em;
   height: 100%;
-  margin-top: 1.5vh;
   background-color: rgba(255, 255, 255, 0.13);
   padding: 0.8em 1.5em;
 

client/src/features/editors/list/ActionButtons.jsx

@@ -0,0 +1,49 @@
+import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
+import { IconButton } from '@chakra-ui/button';
+import { FiZap, FiPlus, FiMinus, FiMinusCircle, FiClock } from 'react-icons/fi';
+
+export default function ActionButtons(props) {
+  const { showDel, showAdd, showDelay, showBlock } = props;
+
+  const menuStyle = {
+    color: '#000000',
+    backgroundColor: 'rgba(255,255,255,0.67)',
+  };
+
+  return (
+    <Menu>
+      <MenuButton
+        as={IconButton}
+        aria-label='Options'
+        size='xs'
+        icon={<FiZap />}
+        _hover={{ bg: 'pink.500' }}
+        _expanded={{ bg: 'pink.300' }}
+        _focus={{ boxShadow: 'none' }}
+        colorScheme='pink'
+      />
+      <MenuList style={menuStyle}>
+        {showDel && (
+          <MenuItem icon={<FiMinus />} onClick={props.deleteHandler}>
+            Delete
+          </MenuItem>
+        )}
+        {showAdd && (
+          <MenuItem icon={<FiPlus />} onClick={props.addHandler}>
+            Event next
+          </MenuItem>
+        )}
+        {showDelay && (
+          <MenuItem icon={<FiClock />} onClick={props.delayHandler}>
+            Delay next
+          </MenuItem>
+        )}
+        {showBlock && (
+          <MenuItem icon={<FiMinusCircle />} onClick={props.blockHandler}>
+            Block next
+          </MenuItem>
+        )}
+      </MenuList>
+    </Menu>
+  );
+}

client/src/features/editors/list/Block.module.css

@@ -27,8 +27,7 @@
   gap: 0.5em;
   align-content: center;
   align-self: flex-start;
-
-  opacity: 0.4;
+  opacity: 0.8;
   transition: linear 0.1s;
 }
 
@@ -52,7 +51,8 @@
   padding-left: 1em;
 
   display: grid;
-  grid-template-columns: 3em auto auto 1fr auto;
+  grid-template-columns: auto 2em auto auto 1fr auto;
+
   justify-content: center;
   align-content: center;
   align-items: baseline;
@@ -74,6 +74,45 @@
   );
 }
 
+.drag {
+  color: rgba(255, 255, 255, 0.37);
+  align-self: center;
+  /* cursor: grab; Later */
+}
+
+.indicators {
+  display: flex;
+  flex-direction: column;
+  align-self: flex-start;
+  font-size: 0.75em;
+  overflow: hidden;
+  min-width: 0;
+  justify-content: center;
+}
+
+.next {
+  color: #4bffabcc;
+  width: max-content;
+  padding: 0 0.2em;
+}
+
+.nextDisabled {
+  color: rgba(255, 255, 255, 0.17);
+}
+
+.delayValue {
+  color: #d69e2eaa;
+  padding: 0 0.2em;
+  text-align: center;
+  align-self: flex-start;
+  width: max-content;
+}
+
+.next:after,
+.delayValue:after {
+  content: '\200b';
+}
+
 .titleContainer,
 .detailedContainer {
   background-color: rgba(255, 255, 255, 0.05);
@@ -124,4 +163,4 @@
   );
 
   justify-content: space-between;
-}
+}

client/src/features/editors/list/BlockBlock.jsx

@@ -1,6 +1,4 @@
-import AddIconBtn from '../../../common/components/buttons/AddIconBtn';
-import DelayIconBtn from '../../../common/components/buttons/DelayIconBtn';
-import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
+import ActionButtons from './ActionButtons';
 import style from './Block.module.css';
 
 export default function BlockBlock(props) {
@@ -19,9 +17,15 @@ export default function BlockBlock(props) {
   return (
     <div className={style.block}>
       <div className={style.actionOverlay}>
-        <DeleteIconBtn clickHandler={deleteHandler} />
-        <AddIconBtn clickHandler={addHandler} />
-        <DelayIconBtn clickHandler={delayHandler} />
+        <ActionButtons
+          showDel
+          deleteHandler={deleteHandler}
+          showAdd
+          addHandler={addHandler}
+          showDelay
+          delayHandler={delayHandler}
+          showBlock
+        />
       </div>
     </div>
   );

client/src/features/editors/list/DelayBlock.jsx

@@ -1,8 +1,7 @@
-import AddIconBtn from '../../../common/components/buttons/AddIconBtn';
-import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
 import { millisToMinutes } from '../../../common/dateConfig';
 import TimeInput from '../../../common/input/TimeInput';
 import style from './Block.module.css';
+import ActionButtons from './ActionButtons';
 
 export default function DelayBlock(props) {
   const { data, eventsHandler, index } = props;
@@ -13,6 +12,7 @@ export default function DelayBlock(props) {
 
   const submitHandler = (value) => {
     // convert to ms and patch
+    console.log('debug adding', { id: data.id, duration: value * 1000 * 60 });
     eventsHandler('patch', { id: data.id, duration: value * 1000 * 60 });
   };
 
@@ -27,8 +27,12 @@ export default function DelayBlock(props) {
         submitHandler={submitHandler}
       />
       <div className={style.actionOverlay}>
-        <DeleteIconBtn clickHandler={deleteHandler} />
-        <AddIconBtn clickHandler={addHandler} />
+        <ActionButtons
+          showDel
+          deleteHandler={deleteHandler}
+          showAdd
+          addHandler={addHandler}
+        />
       </div>
     </div>
   );

client/src/features/editors/list/EventBlock.jsx

@@ -1,16 +1,16 @@
-import { FiChevronDown, FiChevronUp } from 'react-icons/fi';
+import { FiChevronDown, FiChevronUp, FiMoreVertical } from 'react-icons/fi';
 import { useState } from 'react';
-import AddIconBtn from '../../../common/components/buttons/AddIconBtn';
-import BlockIconBtn from '../../../common/components/buttons/BlockIconBtn';
-import DelayIconBtn from '../../../common/components/buttons/DelayIconBtn';
-import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
 import EventTimes from '../../../common/components/eventTimes/EventTimes';
 import { showErrorToast } from '../../../common/helpers/toastManager';
 import style from './Block.module.css';
 import EditableText from '../../../common/input/EditableText';
+import DelayValue from '../../../common/input/DelayValue';
+import ActionButtons from './ActionButtons';
+import VisibleIconBtn from '../../../common/components/buttons/VisibleIconBtn';
 
 export default function EventBlock(props) {
   const { data, selected, delay, index, eventsHandler } = props;
+  const [visible, setVisible] = useState(false);
 
   const [more, setMore] = useState(false);
 
@@ -52,8 +52,18 @@ export default function EventBlock(props) {
     updateValues('presenter', v);
   };
 
+  // TODO: implement functionality to select next
+  let isNext = false;
+
   return (
     <div className={selected ? style.eventRowActive : style.eventRow}>
+      <span className={style.drag}>
+        <FiMoreVertical />
+      </span>
+      <div className={style.indicators}>
+        <div className={isNext ? style.next : style.nextDisabled}>Next</div>
+        <DelayValue delay={delay} />
+      </div>
       <EventTimes
         updateValues={updateValues}
         timeStart={data.timeStart}
@@ -67,22 +77,22 @@ export default function EventBlock(props) {
               label='Title'
               defaultValue={data.title}
               placeholder='Add Title'
-              underlined
               submitHandler={handleTitleSubmit}
+              underlined
             />
             <EditableText
               label='Subtitle'
               defaultValue={data.subtitle}
               placeholder='Add Subtitle'
-              underlined
               submitHandler={handleSubtitleSubmit}
+              underlined
             />
             <EditableText
               label='Presenter'
-              defaultValue={data.subtitle}
+              defaultValue={data.presenter}
               placeholder='Add Presenter name'
-              underlined
               submitHandler={handlePresenterSubmit}
+              underlined
             />
           </div>
         ) : (
@@ -92,6 +102,7 @@ export default function EventBlock(props) {
               defaultValue={data.title}
               placeholder='Add Title'
               submitHandler={handleTitleSubmit}
+              isTight
             />
           </div>
         )}
@@ -100,10 +111,21 @@ export default function EventBlock(props) {
         </div>
       </div>
       <div className={style.actionOverlay}>
-        <DeleteIconBtn clickHandler={deleteHandler} />
-        <AddIconBtn clickHandler={addHandler} />
-        <DelayIconBtn clickHandler={delayHandler} />
-        <BlockIconBtn clickHandler={blockHandler} />
+        <VisibleIconBtn
+          clickHandler={() => setVisible(!visible)}
+          active={visible}
+        />
+        <ActionButtons
+          showDel
+          deleteHandler={deleteHandler}
+          showAdd
+          addHandler={addHandler}
+          showDelay
+          delayHandler={delayHandler}
+          showBlock
+          blockHandler={blockHandler}
+          showPublic
+        />
       </div>
     </div>
   );

client/src/features/editors/list/EventListWrapper.jsx

@@ -24,11 +24,14 @@ export default function EventListWrapper() {
     // we optimistically update here
     onMutate: async (newEvent) => {
       // cancel ongoing queries
-      queryClient.cancelQueries(eventsNamespace);
+      queryClient.cancelQueries(eventsNamespace, { exact: true });
 
       // Snapshot the previous value
-      const previousEvents = queryClient.getQueryData(eventsNamespace);
-
+      let previousEvents = queryClient.getQueryData(eventsNamespace);
+      if (previousEvents == null) {
+        await queryClient.refetchQueries();
+        previousEvents = queryClient.getQueryData(eventsNamespace);
+      }
       // optimistically update object, temp ID until refetch
       let optimistic = [...previousEvents];
       optimistic.splice(newEvent.order, 0, {

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

@@ -8,7 +8,7 @@
   border-radius: 4px;
   padding: 8px;
   overflow-y: scroll;
-  height: 71vh;
+  height: 73vh;
 }
 
 .empty {