feat: feature/mvp-sprint-1 Fixed magic input placeholder rendering weird server-side

remix/app/components/MagicInput/MagicInput.tsx

@@ -8,6 +8,12 @@ export const MagicInput = (props) => {
 
   const [inputValue, setInputValue] = React.useState()
 
+  const [isClientSide, setIsClientSide] = React.useState(false)
+
+  React.useEffect(() => {
+    setIsClientSide(true)
+  }, [])
+
   const contentEditableRef = React.useRef(null)
   const editValueRef = React.useRef({})
 
@@ -147,7 +153,7 @@ export const MagicInput = (props) => {
         position="absolute"
         top={0}
         left={0}
-        display={inputValue ? "none" : "block"}
+        display={inputValue || !isClientSide ? "none" : "block"}
         width="100%"
         maxWidth="100%"
         color="greys.dark"

remix/app/components/Thingtime/SettingsMenu.tsx

@@ -19,7 +19,14 @@ export const SettingsMenu = (props) => {
   }, [])
 
   const types = React.useMemo(() => {
-    const ret = ["any", "object", "array", "string", "number", "boolean"]
+    const ret = [
+      { label: "any", icon: "any" },
+      "object",
+      "array",
+      "string",
+      "number",
+      "boolean",
+    ]
     return ret
   }, [])
 
@@ -29,13 +36,22 @@ export const SettingsMenu = (props) => {
     },
     [props?.onChangeType]
   )
+  const onDelete = React.useCallback(
+    (type) => {
+      props?.onDelete?.()
+    },
+    [props?.onDelete]
+  )
 
   const iconSize = 10
 
   return (
     <Center
       position="relative"
+      // width="100%"
+      paddingRight={36}
       opacity={props?.opacity}
+      cursor="pointer"
       transition={props?.transition || "all 0.2s ease-in-out"}
       onMouseEnter={showMenu}
       onMouseLeave={hideMenu}
@@ -43,7 +59,6 @@ export const SettingsMenu = (props) => {
       <Flex
         paddingLeft={1}
         // opacity={showContextIcon ? 1 : 0}
-        cursor="pointer"
         transition="all 0.2s ease-in-out"
         // onClick={deleteValue}
       >
@@ -64,7 +79,6 @@ export const SettingsMenu = (props) => {
           background="greys.lightt"
           borderRadius={4}
           boxShadow={props?.boxShadow || "0px 2px 7px 0px rgba(0,0,0,0.2)"}
-          cursor="pointer"
           paddingY={basePadding}
         >
           {!props?.readonly && (
@@ -124,6 +138,23 @@ export const SettingsMenu = (props) => {
                 return ret
               })}
           </Flex>
+          {!props?.readonly && (
+            <Flex
+              alignItems="center"
+              flexDirection="row"
+              _hover={{
+                background: "greys.light",
+              }}
+              onClick={onDelete}
+              paddingX={basePadding * 1}
+              paddingY={basePadding / 2}
+            >
+              <Icon marginBottom="-2px" name="bin" size={iconSize}></Icon>
+              <Text marginTop="-2px" paddingLeft={2} fontSize="xs">
+                Recycle
+              </Text>
+            </Flex>
+          )}
         </Flex>
       </Flex>
     </Center>

remix/app/components/Thingtime/Thingtime.tsx

@@ -373,7 +373,8 @@ export const Thingtime = (props) => {
 
   const onChangeType = React.useCallback(
     (type) => {
-      const newType = type?.key || type?.value || type
+      const newType =
+        type?.key || type?.value || type?.label || type?.icon || type
 
       if (newType === "object") {
         updateValue({ value: {} })
@@ -664,15 +665,6 @@ export const Thingtime = (props) => {
                 marginTop={-1}
                 paddingLeft={1}
               >
-                <Flex
-                  paddingLeft={1}
-                  opacity={showContextIcon ? 1 : 0}
-                  cursor="pointer"
-                  transition="all 0.2s ease-in-out"
-                  onClick={resetValue}
-                >
-                  <Icon name="magic" size={9}></Icon>
-                </Flex>
                 <SettingsMenu
                   transition="all 0.2s ease-in-out"
                   opacity={showContextIcon ? 1 : 0}
@@ -680,16 +672,8 @@ export const Thingtime = (props) => {
                   fullPath={fullPath}
                   readonly={!props?.edit}
                   onChangeType={onChangeType}
+                  onDelete={deleteValue}
                 ></SettingsMenu>
-                <Flex
-                  paddingLeft={1}
-                  opacity={showContextIcon ? 1 : 0}
-                  cursor="pointer"
-                  transition="all 0.2s ease-in-out"
-                  onClick={deleteValue}
-                >
-                  <Icon name="bin" size={6}></Icon>
-                </Flex>
               </Flex>
             )}
           </Flex>