feat: feature/mvp-sprint-1 progress commit

remix/app/Providers/ThingtimeProvider.tsx

@@ -1,5 +1,5 @@
 import React, { createContext } from "react"
-import { parse, stringify } from "flatted"
+import flatted, { parse, stringify } from "flatted"
 
 import { sanitise } from "~/functions/sanitise"
 import { smarts } from "~/smarts"
@@ -17,14 +17,24 @@ export const ThingtimeContext = createContext<
 
 try {
   window.smarts = smarts
+  window.flatted = {
+    parse,
+    stringify,
+  }
 } catch (err) {
   // nothing
 }
 
 const force = {
   settings: {
-    // commanderActive: false,
-    // hideSuggestionsOnToggle: true,
+    commanders: {
+      nav: {
+        // commanderActive: false,
+        // clearCommanderOnToggle: true,
+        // clearCommanderContextOnToggle: true,
+        // hideSuggestionsOnToggle: true,
+      },
+    },
   },
   version: 23,
 }
@@ -41,10 +51,14 @@ const newVersionData = {
 
 const initialValues = {
   settings: {
-    commanderActive: false,
-    clearCommanderOnToggle: true,
-    clearCommanderContextOnToggle: true,
-    hideSuggestionsOnToggle: true,
+    commanders: {
+      nav: {
+        commanderActive: false,
+        clearCommanderOnToggle: true,
+        clearCommanderContextOnToggle: true,
+        hideSuggestionsOnToggle: true,
+      },
+    },
   },
   Content: {
     hidden1: "Edit this to your heart's desire.",
@@ -220,6 +234,7 @@ export const ThingtimeProvider = (props: any): JSX.Element => {
 
       if (thingtimeFromLocalStorage) {
         const parsed = parse(thingtimeFromLocalStorage)
+        console.log("thingtime restored from localstorage", parsed)
         if (parsed) {
           const localIsValid =
             !parsed.version || parsed.version >= force.version
@@ -230,10 +245,7 @@ export const ThingtimeProvider = (props: any): JSX.Element => {
             const withVersionUpdates = smarts.merge(newVersionData, parsed)
             newThingtime = smarts.merge(force, withVersionUpdates)
           }
-          console.log(
-            "nik setting new thingtime from localStorage",
-            newThingtime
-          )
+          console.log("restoring thingtime from localStorage", newThingtime)
           set(newThingtime)
         }
       } else {

remix/app/components/Commander/Commander.tsx

@@ -14,6 +14,10 @@ export const Commander = (props) => {
   const { thingtime, setThingtime, getThingtime, thingtimeRef, paths } =
     useThingtime()
 
+  const commanderId = React.useMemo(() => {
+    return props?.id || "global"
+  }, [props?.id])
+
   const inputRef = React.useRef()
 
   const [inputValue, setInputValue] = React.useState("")
@@ -22,6 +26,10 @@ export const Commander = (props) => {
   const [active, setActive] = React.useState(false)
   const [contextPath, setContextPath] = React.useState()
 
+  const mode = React.useMemo(() => {
+    return props?.mode || "value"
+  }, [props?.mode])
+
   const [showContext, setShowContextState] = React.useState(false)
 
   const mobileVW = React.useMemo(() => {
@@ -45,8 +53,8 @@ export const Commander = (props) => {
   }, [contextPath, getThingtime])
 
   const commanderActive = React.useMemo(() => {
-    return thingtime?.settings?.commanderActive
-  }, [thingtime?.settings?.commanderActive])
+    return getThingtime("settings.commanderActive." + commanderId)
+  }, [commanderId, getThingtime])
 
   // commanderActive useEffect
   React.useEffect(() => {

remix/app/components/Icon/Icon.tsx

@@ -127,6 +127,19 @@ export const Icon = (props) => {
     if (["thumb-down", "dislike"]?.includes(name)) {
       return "👎"
     }
+    if (["plus", "add"]?.includes(name)) {
+      return "➕"
+    }
+    if (["seedling", "seed"]?.includes(name)) {
+      return "🌱"
+    }
+    if (["undefined"]?.includes(name)) {
+      return "❓"
+      // return "🌫️"
+    }
+    if (["codex", "robot", "ai", "chatgpt"]?.includes(name)) {
+      return "🤖"
+    }
     if (["thingtime"]?.includes(name)) {
       if (Math.random() > 0.5) {
         return "🌳"

remix/app/components/Nav/Nav.tsx

@@ -49,7 +49,7 @@ export const Nav = (props) => {
               <Icon size="12px" name="unicorn"></Icon>
             </Link>
           </Center>
-          <Commander></Commander>
+          <Commander global id="nav"></Commander>
           <Center
             width="25px"
             height="25px"

remix/app/components/Thingtime/Thingtime.tsx

@@ -16,6 +16,7 @@ import {
   Textarea,
 } from "@chakra-ui/react"
 
+import { Commander } from "../Commander/Commander"
 import { Icon } from "../Icon/Icon"
 import { Safe } from "../Safety/Safe"
 import { useThingtime } from "./useThingtime"
@@ -48,6 +49,13 @@ export const Thingtime = (props) => {
     return props?.pr || (depth === 1 ? [4, 6] : 0)
   }, [props?.pr, depth])
 
+  const multiplyPl = React.useCallback(
+    (num) => {
+      return pl.map((p) => p * num)
+    },
+    [pl]
+  )
+
   // will only run on the client
   React.useEffect(() => {
     setUuid(Math.random().toString(36).substring(7))
@@ -137,6 +145,9 @@ export const Thingtime = (props) => {
   }, [thing, thingDep, validKeyTypes])
 
   const type = React.useMemo(() => {
+    if (thing === null) {
+      return "undefined"
+    }
     return typeof thing
   }, [thing])
 
@@ -152,6 +163,8 @@ export const Thingtime = (props) => {
       return <Icon name="number" size={size}></Icon>
     } else if (type === "boolean") {
       return <Icon name="boolean" size={size}></Icon>
+    } else if (type === "undefined") {
+      return <Icon name="undefined" size={size}></Icon>
     } else {
       return <Icon name="box" size={size}></Icon>
     }
@@ -198,6 +211,8 @@ export const Thingtime = (props) => {
           </Box>
         )
       }
+    } else if (type === "undefined") {
+      return "undefined"
     } else {
       return "Something!"
     }
@@ -287,6 +302,7 @@ export const Thingtime = (props) => {
   const AtomicWrapper = React.useCallback((props) => {
     return (
       <Flex
+        position="relative"
         flexDirection="row"
         flexShrink={1}
         width="100%"
@@ -440,6 +456,14 @@ export const Thingtime = (props) => {
           </AtomicWrapper>
         )
       }
+      if (type === "undefined") {
+        return (
+          <AtomicWrapper>
+            {/* TODO: Implement UI-less commander */}
+            {/* <Commander></Commander> */}
+          </AtomicWrapper>
+        )
+      }
     }
 
     return (
@@ -523,6 +547,48 @@ export const Thingtime = (props) => {
     [uuid]
   )
 
+  const addNewChild = React.useCallback(() => {
+    const newChild = null
+
+    if (thing instanceof Array) {
+      // add new child to array
+      const newValue = [...thing, newChild]
+      setThingtime(fullPath, newValue)
+      return
+    }
+
+    const newChildBasePath = "New Value"
+    // find increment that thing doesn't already have New Value N+1
+    let increment = 0
+    let newPath = newChildBasePath
+    while (Object.hasOwnProperty.call(thing, newPath) && increment <= 999) {
+      increment++
+      newPath = newChildBasePath + " " + increment
+    }
+    const newChildPath = newPath
+    const newChildFullPath = fullPath + "." + newChildPath
+    // create new child on thing using setThingtime
+    setThingtime(newChildFullPath, newChild)
+  }, [fullPath, setThingtime, thing])
+
+  const addChildUi = React.useMemo(() => {
+    if (type === "object" && props?.edit) {
+      return (
+        <Flex
+          width="100%"
+          paddingLeft={multiplyPl(2)}
+          cursor="pointer"
+          onClick={addNewChild}
+          paddingY={2}
+        >
+          <Icon size={12} name="seedling"></Icon>
+          {/* <Icon size={7} name="plus"></Icon>
+          <Icon size={7} name="plus"></Icon> */}
+        </Flex>
+      )
+    }
+  }, [props?.edit, type, multiplyPl, addNewChild])
+
   const [showContextIcon, setShowContextIcon] = React.useState(false)
 
   return (
@@ -582,6 +648,7 @@ export const Thingtime = (props) => {
         {!loading && thingtimeChildren && (
           <Box className="thingtimeChildren">{thingtimeChildren}</Box>
         )}
+        {addChildUi}
       </Flex>
     </Safe>
   )