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/common/input/DelayValue.jsx

@@ -1,11 +1,11 @@
 import { millisToMinutes } from '../dateConfig';
-import style from './EditableTimer.module.css';
+import style from '../../features/editors/list/Block.module.css';
 
 export default function DelayValue(props) {
   const { delay } = props;
   const delayed = delay > 0;
   return (
-    <div className={delayed ? style.delayValue : undefined}>
+    <div className={style.delayValue}>
       {delayed && <span>{`+ ${millisToMinutes(delay)}`}</span>}
     </div>
   );

client/src/common/input/EditableText.jsx

@@ -1,8 +1,10 @@
 import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
+import { useState } from 'react';
 import style from './EditableText.module.css';
 
 export default function EditableText(props) {
   const { label, defaultValue, placeholder, submitHandler } = props;
+  const [text, setText] = useState(props.defaultValue || '');
 
   const handleSubmit = (submitedVal) => {
     // No need to update if it hasnt changed
@@ -11,19 +13,25 @@ export default function EditableText(props) {
     submitHandler(submitedVal);
   };
 
+  const handleChange = (val) => {
+    if (val.length < 40) setText(val);
+    console.log(val.length);
+  };
+
   return (
     <div className={style.block}>
       <span className={props.underlined ? style.titleUnderlined : style.title}>
         {label}
       </span>
       <Editable
+        onChange={(v) => handleChange(v)}
         onSubmit={(v) => handleSubmit(v)}
-        defaultValue={defaultValue}
+        value={text}
         placeholder={placeholder}
         className={style.inline}
       >
         <EditablePreview />
-        <EditableInput className={style.editable13} />
+        <EditableInput />
       </Editable>
     </div>
   );

client/src/common/input/EditableText.module.css

@@ -14,13 +14,11 @@
 
 .block {
   display: 'block';
+  overflow: hidden;
+  max-width: 100%;
 }
 
 .inline {
   display: inline;
-}
-
-.editable13 {
-  width: '13em';
-  min-width: '13em';
+  width: max-content;
 }

client/src/common/input/EditableTimer.module.css

@@ -1,6 +1,5 @@
 .time {
   background-color: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.05);
   border-radius: 4px;
   width: 5em;
   height: fit-content;
@@ -10,17 +9,9 @@
 .delayedEditable {
   text-align: center;
   border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .delayedEditable {
   border: 1px solid #d69e2e55;
 }
-
-.delayValue {
-  color: #fff;
-  border-radius: 4px;
-  padding: 0.3em 0;
-  text-align: center;
-  align-self: flex-start;
-  background-color: #d69e2e55;
-}

client/src/common/input/TimeInput.jsx

@@ -22,14 +22,16 @@ export default function TimeInput(props) {
   }, [props.value]);
 
   const handleChange = (val) => {
-    if (val <= 999) setValue(val);
+    if (val <= 666) setValue(val);
   };
 
   const handleSubmit = (val) => {
     if (val === props.value) return;
     if (val === '') setValue(0);
-    if (val > 0 && val < 60) {
+    if (val >= 0 && val <= 60) {
       props.submitHandler(val);
+    } else {
+      setValue(60);
     }
   };