feat: feature/mvp-sprint-1 Progress on commander changes

2023-08-13 00:06:33 +10:00 · 2023-08-13 00:06:33 +10:00 · 9223138d12
commit 9223138d12
parent 6c1f798f23
7 changed files with 160 additions and 88 deletions
--- a/remix/app/Providers/ThingtimeProvider.tsx
+++ b/remix/app/Providers/ThingtimeProvider.tsx
@ -27,14 +27,14 @@ try {

 const force = {
  settings: {
-    commanders: {
-      nav: {
-        // commanderActive: false,
-        // clearCommanderOnToggle: true,
-        // clearCommanderContextOnToggle: true,
-        // hideSuggestionsOnToggle: true,
-      },
-    },
+    // commander: {
+    //   nav: {
+    //     commanderActive: false,
+    //     clearCommanderOnToggle: true,
+    //     clearCommanderContextOnToggle: true,
+    //     hideSuggestionsOnToggle: true,
+    // },
+    // },
  },
  version: 23,
 }
@ -51,7 +51,7 @@ const newVersionData = {

 const initialValues = {
  settings: {
-    commanders: {
+    commander: {
      nav: {
        commanderActive: false,
        clearCommanderOnToggle: true,
--- a/remix/app/components/Commander/Commander.tsx
+++ b/remix/app/components/Commander/Commander.tsx
@ -20,6 +20,16 @@ export const Commander = (props) => {

  const inputRef = React.useRef()

+  const global = props?.global
+
+  const commanderSettings = React.useMemo(() => {
+    return thingtime?.settings?.commander?.[commanderId] || {}
+  }, [
+    thingtime?.settings?.commander,
+    thingtime?.settings?.commander?.[commanderId],
+    commanderId,
+  ])
+
  const [inputValue, setInputValue] = React.useState("")
  const [virtualValue, setVirtualValue] = React.useState("")
  const [hoveredSuggestion, setHoveredSuggestion] = React.useState()
@ -53,8 +63,8 @@ export const Commander = (props) => {
  }, [contextPath, getThingtime])

  const commanderActive = React.useMemo(() => {
-    return getThingtime("settings.commanderActive." + commanderId)
-  }, [commanderId, getThingtime])
+    return thingtime?.settings?.commander?.[commanderId]?.commanderActive
+  }, [commanderSettings, commanderId])

  // commanderActive useEffect
  React.useEffect(() => {
@ -63,11 +73,18 @@ export const Commander = (props) => {
    } else {
      document.activeElement.blur()

-      if (thingtimeRef?.current?.settings?.clearCommanderOnToggle) {
+      if (
+        thingtimeRef?.current?.settings?.commander?.[commanderId]
+          ?.clearCommanderOnToggle
+      ) {
        setInputValue("")
        setHoveredSuggestion(null)
      }
-      if (thingtimeRef?.current?.settings?.clearCommanderContextOnToggle) {
+      if (
+        thingtimeRef?.current?.settings?.commander?.[commanderId]?.commander?.[
+          commanderId
+        ]?.clearCommanderContextOnToggle
+      ) {
        setShowContext(false, "commanderActive useEffect")
      }
      if (contextPath !== undefined && !inputValue) {
@ -81,6 +98,7 @@ export const Commander = (props) => {
    commanderActive,
    thingtimeRef,
    setShowContext,
+    commanderId,
    inputValue,
    contextPath,
    showContext,
@ -178,13 +196,15 @@ export const Commander = (props) => {
      inputValue?.length &&
      suggestions?.length &&
      commanderActive &&
-      thingtime?.settings?.hideSuggestionsOnToggle
+      thingtime?.settings?.commander?.[commanderId]?.hideSuggestionsOnToggle
    )
  }, [
    inputValue,
    suggestions,
    commanderActive,
-    thingtime?.settings?.hideSuggestionsOnToggle,
+    commanderId,
+    thingtime?.settings?.commander,
+    commanderSettings,
  ])

  const selectSuggestion = React.useCallback(
@ -208,27 +228,41 @@ export const Commander = (props) => {
  }, [commandPath, suggestions])

  const openCommander = React.useCallback(() => {
-    setThingtime("settings.commanderActive", true)
-  }, [setThingtime])
+    setThingtime(`settings.commander.${commanderId}.commanderActive`, true)
+  }, [setThingtime, commanderId])

  const closeCommander = React.useCallback(
    (e?: any) => {
      if (!e?.defaultPrevented) {
-        if (thingtime?.settings?.commanderActive) {
-          setThingtime("settings.commanderActive", false)
+        if (thingtime?.settings?.commander?.[commanderId]?.commanderActive) {
+          setThingtime(
+            `settings.commander.${commanderId}.commanderActive`,
+            false
+          )
        }
      }
    },
-    [setThingtime, thingtime?.settings?.commanderActive]
+    [
+      setThingtime,
+      commanderId,
+      commanderSettings,
+      thingtime?.settings?.commander,
+    ]
  )

  const toggleCommander = React.useCallback(() => {
-    if (thingtime?.settings?.commanderActive) {
+    if (thingtime?.settings?.commander?.[commanderId]?.commanderActive) {
      closeCommander()
    } else {
      openCommander()
    }
-  }, [thingtime?.settings?.commanderActive, closeCommander, openCommander])
+  }, [
+    thingtime?.settings?.commander,
+    commanderSettings,
+    commanderId,
+    closeCommander,
+    openCommander,
+  ])

  const executeCommand = React.useCallback(() => {
    // if selection is active then select it
@ -380,6 +414,58 @@ export const Commander = (props) => {
    setVirtualValue(inputValue)
  }, [inputValue])

+  const InputJSX = React.useMemo(() => {
+    return (
+      <Input
+        // display='none'
+        // opacity={0}
+        ref={inputRef}
+        sx={{
+          "&::placeholder": {
+            color: "greys.dark",
+          },
+        }}
+        width="100%"
+        height="100%"
+        background="grey"
+        border="none"
+        borderRadius="5px"
+        outline="none"
+        onChange={onInputChange}
+        onFocus={openCommander}
+        placeholder="Imagine.."
+        value={inputValue}
+      ></Input>
+    )
+  }, [inputRef, inputValue, onInputChange, openCommander])
+
+  const MainInput = React.useMemo(() => {
+    return (
+      <Center
+        position="relative"
+        overflow="hidden"
+        width={["100%", "400px"]}
+        maxWidth={[mobileVW, "100%"]}
+        height="100%"
+        padding="1px"
+        borderRadius="6px"
+        pointerEvents="all"
+        outline="none"
+      >
+        {props?.rainbow && (
+          <Rainbow
+            opacity={commanderActive ? 0.6 : 0}
+            position="absolute"
+            repeats={rainbowRepeats}
+            opacityTransition="all 2500ms ease"
+            thickness={10}
+          ></Rainbow>
+        )}
+        {InputJSX}
+      </Center>
+    )
+  }, [InputJSX, commanderActive, rainbowRepeats, props?.rainbow, mobileVW])
+
  return (
    <ClickAwayListener onClickAway={closeCommander}>
      <Flex
@ -479,54 +565,19 @@ export const Commander = (props) => {
          maxWidth={[mobileVW, "100%"]}
          height="100%"
        >
-          <Rainbow
-            filter="blur(15px)"
-            opacity={commanderActive ? 0.25 : 0}
-            repeats={rainbowRepeats}
-            thickness={8}
-            opacityTransition="all 1000ms ease"
-            overflow="visible"
-          >
-            <Center
-              position="relative"
-              overflow="hidden"
-              width={["100%", "400px"]}
-              maxWidth={[mobileVW, "100%"]}
-              height="100%"
-              padding="1px"
-              borderRadius="6px"
-              pointerEvents="all"
-              outline="none"
+          {props?.rainbow && (
+            <Rainbow
+              filter="blur(15px)"
+              opacity={commanderActive ? 0.25 : 0}
+              repeats={rainbowRepeats}
+              thickness={8}
+              opacityTransition="all 1000ms ease"
+              overflow="visible"
            >
-              <Rainbow
-                opacity={commanderActive ? 0.6 : 0}
-                position="absolute"
-                repeats={rainbowRepeats}
-                opacityTransition="all 2500ms ease"
-                thickness={10}
-              ></Rainbow>
-              <Input
-                // display='none'
-                // opacity={0}
-                ref={inputRef}
-                sx={{
-                  "&::placeholder": {
-                    color: "greys.dark",
-                  },
-                }}
-                width="100%"
-                height="100%"
-                background="grey"
-                border="none"
-                borderRadius="5px"
-                outline="none"
-                onChange={onInputChange}
-                onFocus={openCommander}
-                placeholder="Imagine.."
-                value={inputValue}
-              ></Input>
-            </Center>
-          </Rainbow>
+              {MainInput}
+            </Rainbow>
+          )}
+          {!props?.rainbow && MainInput}
        </Center>
      </Flex>
    </ClickAwayListener>
--- a/remix/app/components/Icon/Icon.tsx
+++ b/remix/app/components/Icon/Icon.tsx
@ -133,13 +133,16 @@ export const Icon = (props) => {
    if (["seedling", "seed"]?.includes(name)) {
      return "🌱"
    }
-    if (["undefined"]?.includes(name)) {
+    if (["undefined", "null", "question", "confused"]?.includes(name)) {
      return "❓"
      // return "🌫️"
    }
    if (["codex", "robot", "ai", "chatgpt"]?.includes(name)) {
      return "🤖"
    }
+    if (["trash", "bin", "delete", "remove"]?.includes(name)) {
+      return "🗑️"
+    }
    if (["thingtime"]?.includes(name)) {
      if (Math.random() > 0.5) {
        return "🌳"
--- a/remix/app/components/Nav/Nav.tsx
+++ b/remix/app/components/Nav/Nav.tsx
@ -49,7 +49,7 @@ export const Nav = (props) => {
              <Icon size="12px" name="unicorn"></Icon>
            </Link>
          </Center>
-          <Commander global id="nav"></Commander>
+          <Commander global id="nav" rainbow></Commander>
          <Center
            width="25px"
            height="25px"
--- a/remix/app/components/Thingtime/Thingtime.tsx
+++ b/remix/app/components/Thingtime/Thingtime.tsx
@ -56,6 +56,12 @@ export const Thingtime = (props) => {
    [pl]
  )

+  const propsRef = React.useRef(props)
+
+  React.useEffect(() => {
+    propsRef.current = props
+  }, [props])
+
  // will only run on the client
  React.useEffect(() => {
    setUuid(Math.random().toString(36).substring(7))
@ -99,15 +105,24 @@ export const Thingtime = (props) => {
    return props.thing
  }, [props.thing, childrenRef.current])

+  const fullPath = React.useMemo(() => {
+    const ret = props?.fullPath || props?.path
+
+    // store this thing in the global db
+    try {
+      window.meta.things[ret] = props?.thing
+    } catch {
+      // nothing
+    }
+
+    return ret
+  }, [props?.fullPath, props?.path, props?.thing])
+
  React.useEffect(() => {
    console.log("thingtime changed in path", props?.fullPath)
    createDependancies()
  }, [thingtime, props?.fullPath, childrenRef])

-  const fullPath = React.useMemo(() => {
-    return props?.fullPath || props?.path
-  }, [props?.fullPath, props?.path])
-
  const seen = React.useMemo(() => {
    if (props?.seen instanceof Array) {
      if (props?.seen?.includes(thing)) {
@ -460,7 +475,7 @@ export const Thingtime = (props) => {
        return (
          <AtomicWrapper>
            {/* TODO: Implement UI-less commander */}
-            {/* <Commander></Commander> */}
+            <Commander path={fullPath} id={uuid}></Commander>
          </AtomicWrapper>
        )
      }
@ -476,6 +491,8 @@ export const Thingtime = (props) => {
    renderableValue,
    pl,
    type,
+    fullPath,
+    uuid,
    AtomicWrapper,
    props?.edit,
    thing,
--- a/remix/app/functions/safe.tsx
+++ b/remix/app/functions/safe.tsx
@ -1,18 +1,18 @@
 export const safe = (props) => {
  // do not render more than the limit of things to prevent infinite loops
-  const thingtime = getThingtime()
+  const meta = getMeta()

  const uuid = props?.uuid

  try {
    if (
-      typeof thingtime?.things?.count === "number" &&
-      thingtime?.things?.count >= thingtime?.things?.limit
+      typeof meta?.stats?.count === "number" &&
+      meta?.stats?.count >= meta?.stats?.limit
    ) {
      console.error(
        "[codex] Maximum things reached",
-        thingtime?.things?.count,
-        thingtime?.things?.limit
+        meta?.stats?.count,
+        meta?.stats?.limit
      )
      return null
    }
@ -21,22 +21,22 @@ export const safe = (props) => {
  }

  try {
-    if (!thingtime?.things?.db?.[uuid]) {
-      thingtime.things.db[uuid] = {
+    if (!meta?.stats?.db?.[uuid]) {
+      meta.stats.db[uuid] = {
        count: 1,
      }
-      thingtime.things.count++
+      meta.stats.count++
    }
  } catch {
    // empty
  }

  try {
-    if (props?.depth >= thingtime?.things?.maxDepth) {
+    if (props?.depth >= meta?.stats?.maxDepth) {
      console.error(
        "[codex] Reached max depth",
        props?.depth,
-        thingtime?.things?.maxDepth
+        meta?.stats?.maxDepth
      )
      return null
    }
@ -51,7 +51,7 @@ export const safe = (props) => {
  }
 }

-export const getThingtime = () => {
+export const getMeta = () => {
  try {
    return window?.meta || globalThis?.meta
  } catch {
--- a/remix/app/root.tsx
+++ b/remix/app/root.tsx
@ -65,12 +65,13 @@ const setThingtime = (glob) => {
      subscribers: {},
      state: {},
      db: {},
-      things: {
+      stats: {
        db: {},
        limit: 9999,
        maxDepth: 10,
        count: 0,
      },
+      things: {},
    }
  } catch (err) {
    // will error on server