hooked up settings to config

- new settings context
- all application settings hooked up to backend
- theme hooked up to backend
- updated brightness event, but monitor selection still does not work, disabled increase and decrease brightness events for now
- fixed keypress events of the same key being linked when changing the keytype
- updated image components with border

src/components/macroview/SelectElementArea.tsx

@@ -2,13 +2,7 @@ import {
   Text,
   VStack,
   Input,
-  Tabs,
-  TabList,
-  TabPanels,
-  Tab,
-  TabPanel,
   SimpleGrid,
-  Flex,
   Divider,
   useColorModeValue,
   HStack,
@@ -28,7 +22,6 @@ export default function SelectElementArea() {
   const dividerColour = useColorModeValue('gray.400', 'gray.600')
 
   const ElementsToShow = useMemo(() => {
-    console.log(searchValue)
     switch (tabIndex) {
       case 0:
         return (

src/components/macroview/SequenceElementButton.tsx

@@ -1,5 +1,7 @@
 import { Button, Text } from '@chakra-ui/react'
+import { useCallback } from 'react'
 import { useMacroContext } from '../../contexts/macroContext'
+import { useSettingsContext } from '../../contexts/settingsContext'
 import { ActionEventType } from '../../types'
 
 type Props = {
@@ -11,20 +13,33 @@ export default function SequenceElementButton({
   properties,
   displayText
 }: Props) {
-  const { sequence, onElementAdd } = useMacroContext()
+  const { sequence, onElementAdd, onElementsAdd } = useMacroContext()
+  const { config } = useSettingsContext()
 
-  function handleAddElement() {
-    // check if last element in the sequence is a delay element
-    // if not, add a delay
-    if (sequence.at(-1)?.type !== 'DelayEventAction' && sequence.length > 0) {
-      onElementAdd({
-        type: 'DelayEventAction',
-        data: 50
-      })
+  const handleAddElement = useCallback(() => {
+    if (config.AutoAddDelay) {
+      if (sequence.at(-1)?.type !== 'DelayEventAction' && sequence.length > 0) {
+        onElementsAdd([
+          {
+            type: 'DelayEventAction',
+            data: config.DefaultDelayValue
+          },
+          properties
+        ])
+      } else {
+        onElementAdd(properties)
+      }
+    } else {
+      onElementAdd(properties)
     }
-    // add element
-    onElementAdd(properties)
-  }
+  }, [
+    config.AutoAddDelay,
+    config.DefaultDelayValue,
+    onElementAdd,
+    onElementsAdd,
+    properties,
+    sequence
+  ])
 
   return (
     <Button colorScheme="yellow" size={['sm']} onClick={handleAddElement}>

src/components/macroview/SequencingArea.tsx

@@ -7,7 +7,6 @@ import {
   Alert,
   AlertIcon,
   AlertDescription,
-  useColorModeValue,
   Stack
 } from '@chakra-ui/react'
 import { AddIcon, DeleteIcon, EditIcon } from '@chakra-ui/icons'
@@ -34,6 +33,7 @@ import DragWrapper from './sortableList/DragWrapper'
 import { Keypress, MousePressAction } from '../../types'
 import { useMacroContext } from '../../contexts/macroContext'
 import useRecordingSequence from '../../hooks/useRecordingSequence'
+import { useSettingsContext } from '../../contexts/settingsContext'
 
 const isKeypress = (
   e: Keypress | MousePressAction | undefined
@@ -46,8 +46,9 @@ export default function SequencingArea() {
   const [activeId, setActiveId] = useState<number | undefined>(undefined)
   const { recording, startRecording, stopRecording, item } =
     useRecordingSequence()
-  const { sequence, ids, onElementAdd, overwriteIds, overwriteSequence } = useMacroContext()
-  const dividerColour = useColorModeValue('gray.400', 'gray.600')
+  const { sequence, ids, onElementAdd, overwriteIds, overwriteSequence } =
+    useMacroContext()
+  const { config } = useSettingsContext()
 
   const sensors = useSensors(
     useSensor(PointerSensor),
@@ -56,24 +57,24 @@ export default function SequencingArea() {
     })
   )
 
-  const handleDragEnd = useCallback((event: any) => {
-    // make usecallback
-    // events are objects, how to deal with getting the library's types easily?
-    const { active, over } = event
+  const handleDragEnd = useCallback(
+    (event: any) => {
+      // events are objects, how to deal with getting the library's types easily?
+      const { active, over } = event
 
-    if (over === null) {
-      return
-    }
+      if (over === null) {
+        return
+      }
 
-    if (active.id !== over.id) {
-      const oldIndex = ids.indexOf(active.id)
-      const newIndex = ids.indexOf(over.id)
-      console.log(oldIndex)
-      console.log(newIndex)
-      overwriteIds(arrayMove(ids, oldIndex, newIndex))
-    }
-    setActiveId(undefined)
-  }, [ids, overwriteIds])
+      if (active.id !== over.id) {
+        const oldIndex = ids.indexOf(active.id)
+        const newIndex = ids.indexOf(over.id)
+        overwriteIds(arrayMove(ids, oldIndex, newIndex))
+      }
+      setActiveId(undefined)
+    },
+    [ids, overwriteIds]
+  )
 
   const handleDragStart = useCallback((event: any) => {
     // ask about dnd library types, esp. UniqueIdentifier and how to deal with it
@@ -104,7 +105,8 @@ export default function SequencingArea() {
         data: { type: 'Press', data: item }
       })
     }
-  }, [item, onElementAdd])
+    // need to adjust this use effect / move functionality elsewhere, putting onElementAdd in the dependencies breaks it
+  }, [item])
 
   return (
     <VStack w="41%" h="full" p="3">
@@ -115,7 +117,7 @@ export default function SequencingArea() {
           w="100%"
           textAlign="left"
           justifyContent="space-between"
-          alignItems={["start", "center"]}
+          alignItems={['start', 'center']}
         >
           <Text fontWeight="semibold" fontSize={['sm', 'md']}>
             Sequence
@@ -129,35 +131,35 @@ export default function SequencingArea() {
         </Stack>
       </VStack>
       <HStack justifyContent="right" w="100%" alignItems="center">
-          <Button
-            leftIcon={<EditIcon />}
-            size={['xs', 'sm', 'md']}
-            colorScheme={recording ? 'red' : 'gray'}
-            onClick={recording ? stopRecording : startRecording}
-          >
-            {recording ? 'Stop' : 'Record'}
-          </Button>
-          <Button
-            leftIcon={<DeleteIcon />}
-            size={['xs', 'sm', 'md']}
-            onClick={() => overwriteSequence([])}
-          >
-            Clear
-          </Button>
-          <Button
-            leftIcon={<AddIcon />}
-            size={['xs', 'sm', 'md']}
-            onClick={() => {
-              onElementAdd({
-                type: 'DelayEventAction',
-                data: 50
-              })
-            }}
-          >
-            Add Delay
-          </Button>
+        <Button
+          leftIcon={<EditIcon />}
+          size={['xs', 'sm', 'md']}
+          colorScheme={recording ? 'red' : 'gray'}
+          onClick={recording ? stopRecording : startRecording}
+        >
+          {recording ? 'Stop' : 'Record'}
+        </Button>
+        <Button
+          leftIcon={<DeleteIcon />}
+          size={['xs', 'sm', 'md']}
+          onClick={() => overwriteSequence([])}
+        >
+          Clear
+        </Button>
+        <Button
+          leftIcon={<AddIcon />}
+          size={['xs', 'sm', 'md']}
+          onClick={() => {
+            onElementAdd({
+              type: 'DelayEventAction',
+              data: config.DefaultDelayValue
+            })
+          }}
+        >
+          Add Delay
+        </Button>
       </HStack>
-      <Divider borderColor={dividerColour} />
+      <Divider />
       {/** Timeline */}
       <DndContext
         sensors={sensors}

src/components/macroview/editForms/KeyPressForm.tsx

@@ -39,45 +39,48 @@ export default function KeyPressForm() {
     )
   }, [selectedElement])
 
-  const onKeypressDurationChange = useCallback((event: any) => {
-    // need to ask about these guards, seems really redundant
-    if (selectedElement === undefined) {
-      return
-    }
-    if (selectedElement.type !== 'KeyPressEventAction') {
-      return
-    }
-    if (selectedElementId === undefined) {
-      return
-    }
-    const newValue = parseInt(event.target.value)
-    if (newValue === undefined) {
-      return
-    }
-    setKeypressDuration(newValue)
-    const temp = { ...selectedElement }
-    temp.data.press_duration = newValue
-    updateElement(temp, selectedElementId)
-  }, [selectedElement, selectedElementId, updateElement])
+  const onKeypressDurationChange = useCallback(
+    (event: any) => {
+      // need to ask about these guards, seems really redundant
+      if (
+        selectedElement === undefined ||
+        selectedElement.type !== 'KeyPressEventAction'
+      ) {
+        return
+      }
+      if (selectedElementId === undefined) {
+        return
+      }
+      const newValue = parseInt(event.target.value)
+      if (newValue === undefined) {
+        return
+      }
+      setKeypressDuration(newValue)
+      const temp = { ...selectedElement }
+      temp.data.press_duration = newValue
+      updateElement(temp, selectedElementId)
+    },
+    [selectedElement, selectedElementId, updateElement]
+  )
 
-  const onKeypressTypeChange = useCallback((newType: KeyType) => {
-    if (selectedElement === undefined) {
-      return
-    }
-    if (selectedElement.type !== 'KeyPressEventAction') {
-      return
-    }
-    if (selectedElementId === undefined) {
-      return
-    }
-    console.log(selectedElement)
-    // BUG: selected element is updated before we update it...
-    setKeypressType(newType)
-    const temp = { ...selectedElement }
-    temp.data.keytype = KeyType[newType]
-    updateElement(temp, selectedElementId)
-    console.log(selectedElement)
-  }, [selectedElement, selectedElementId, updateElement])
+  const onKeypressTypeChange = useCallback(
+    (newType: KeyType) => {
+      if (
+        selectedElement === undefined ||
+        selectedElement.type !== 'KeyPressEventAction'
+      ) {
+        return
+      }
+      if (selectedElementId === undefined) {
+        return
+      }
+      setKeypressType(newType)
+      const temp = { ...selectedElement, data: { ...selectedElement.data } }
+      temp.data.keytype = KeyType[newType].toString()
+      updateElement(temp, selectedElementId)
+    },
+    [selectedElement, selectedElementId, updateElement]
+  )
 
   return (
     <>

src/components/macroview/editForms/ScreenBrightnessForm.tsx

@@ -8,6 +8,7 @@ import { Monitor } from '../../../types'
 export default function ScreenBrightnessForm() {
   const [brightnessVal, setBrightnessVal] = useState(75)
   const [monitors, setMonitors] = useState<Monitor[]>([])
+  const [selectedMonitor, setSelectedMonitor] = useState('')
   const selectedElement = useSelectedElement()
   const { selectedElementId, updateElement } = useMacroContext()
 
@@ -27,7 +28,6 @@ export default function ScreenBrightnessForm() {
     }
     invoke<Monitor[]>('get_monitor_data')
       .then((res) => {
-        console.log(res)
         setMonitors(res)
       })
       .catch((e) => {
@@ -54,7 +54,7 @@ export default function ScreenBrightnessForm() {
     const temp = { ...selectedElement }
     temp.data = {
       type: 'Brightness',
-      action: { type: 'Set', level: newValue }
+      action: { type: 'Set', level: newValue, name: selectedMonitor }
     }
     updateElement(temp, selectedElementId)
   }
@@ -66,9 +66,11 @@ export default function ScreenBrightnessForm() {
       </Text>
       <Divider />
       <Text fontSize={['xs', 'sm', 'md']}>Monitor</Text>
-      <Select placeholder="Select Monitor">
-        {monitors.map((monitor, index) => (
-          <option value={index} key={monitor.name}>{monitor.name}</option>
+      <Select placeholder="Select Monitor" onChange={(event) => setSelectedMonitor(event.target.value)}>
+        {monitors.map((monitor) => (
+          <option value={monitor.name} key={monitor.name}>
+            {monitor.name}
+          </option>
         ))}
       </Select>
       <Text fontSize={['xs', 'sm', 'md']}>Brightness value</Text>