chore(editor): ♻️ Revert tables to arrays

Yet another refacto. I improved many many mechanisms on this one including dnd. It is now end 2 end tested 🎉

apps/builder/components/theme/ChatSettings/ButtonsTheme.tsx

@@ -15,7 +15,7 @@ export const ButtonsTheme = ({ buttons, onButtonsChange }: Props) => {
     onButtonsChange({ ...buttons, color })
 
   return (
-    <Stack>
+    <Stack data-testid="buttons-theme">
       <Flex justify="space-between" align="center">
         <Text>Background:</Text>
         <ColorPicker

apps/builder/components/theme/ChatSettings/GuestBubbles.tsx

@@ -15,7 +15,7 @@ export const GuestBubbles = ({ guestBubbles, onGuestBubblesChange }: Props) => {
     onGuestBubblesChange({ ...guestBubbles, color })
 
   return (
-    <Stack>
+    <Stack data-testid="guest-bubbles-theme">
       <Flex justify="space-between" align="center">
         <Text>Background:</Text>
         <ColorPicker

apps/builder/components/theme/ChatSettings/HostBubbles.tsx

@@ -15,7 +15,7 @@ export const HostBubbles = ({ hostBubbles, onHostBubblesChange }: Props) => {
     onHostBubblesChange({ ...hostBubbles, color })
 
   return (
-    <Stack>
+    <Stack data-testid="host-bubbles-theme">
       <Flex justify="space-between" align="center">
         <Text>Background:</Text>
         <ColorPicker

apps/builder/components/theme/ChatSettings/InputsTheme.tsx

@@ -17,7 +17,7 @@ export const InputsTheme = ({ inputs, onInputsChange }: Props) => {
     onInputsChange({ ...inputs, placeholderColor })
 
   return (
-    <Stack>
+    <Stack data-testid="inputs-theme">
       <Flex justify="space-between" align="center">
         <Text>Background:</Text>
         <ColorPicker

apps/builder/components/theme/GeneralSettings/ColorPicker.tsx

@@ -41,6 +41,8 @@ export const ColorPicker = ({ initialColor, onColorChange }: Props) => {
   const handleColorChange = (e: ChangeEvent<HTMLInputElement>) =>
     setColor(e.target.value)
 
+  const handleClick = (color: string) => () => setColor(color)
+
   return (
     <Popover variant="picker" placement="right" isLazy>
       <PopoverTrigger>
@@ -79,10 +81,8 @@ export const ColorPicker = ({ initialColor, onColorChange }: Props) => {
                 minWidth="unset"
                 borderRadius={3}
                 _hover={{ background: c }}
-                onClick={() => {
-                  setColor(c)
-                }}
-              ></Button>
+                onClick={handleClick(c)}
+              />
             ))}
           </SimpleGrid>
           <Input