add dir / val

src/js/views/explorer/Explorer.tsx

@@ -12,10 +12,10 @@ const Explorer = ({ p }: Props) => {
   return (
     <View hideSideBar={true}>
       <div>{p}</div>
-      <div className="m-2 md:mx-4">
+      <div className="md:m-4">
         <ExplorerNode expanded={true} name="Local state" node={localState} />
       </div>
-      <div className="m-2 md:mx-4">
+      <div className="md:m-4">
         <ExplorerNode expanded={true} name="Public state" node={publicState} />
       </div>
     </View>

src/js/views/explorer/ExplorerNode.tsx

@@ -4,6 +4,7 @@ import { ChevronRightIcon } from '@heroicons/react/20/solid';
 import Show from '@/components/helpers/Show.tsx';
 import Node, { DIR_VALUE } from '@/state/Node';
 import SortedMap from '@/utils/SortedMap/SortedMap.tsx';
+import { ExplorerNodeEditRow } from '@/views/explorer/ExplorerNodeEditRow.tsx';
 
 import ExplorerNodeValue from './ExplorerNodeValue';
 
@@ -52,7 +53,7 @@ export default function ExplorerNode({
   return (
     <div className={`relative w-full ${rowColor}`}>
       <div
-        className={`flex items-center text-white ${isDirectory ? 'cursor-pointer' : null}`}
+        className={`flex items-center text-white ${isDirectory ? 'cursor-pointer' : ''}`}
         onClick={toggleOpen}
         style={{ paddingLeft: `${level * 15}px` }}
       >
@@ -72,8 +73,9 @@ export default function ExplorerNode({
           </div>
         </Show>
       </div>
-      {isOpen ? (
+      {isDirectory && isOpen ? (
         <div>
+          <ExplorerNodeEditRow level={level + 1} parent={node} />
           {Array.from(children.values()).map((child, index) => (
             <ExplorerNode
               key={node.id + child.node.id}

src/js/views/explorer/ExplorerNodeEditRow.tsx

@@ -0,0 +1,97 @@
+import { useState } from 'react';
+
+import Node, { DIR_VALUE } from '@/state/Node.ts';
+
+type EditRowProps = {
+  level: number;
+  parent: Node;
+};
+
+export const ExplorerNodeEditRow = ({ level, parent }: EditRowProps) => {
+  const [showDirForm, setShowDirForm] = useState(false);
+  const [showValueForm, setShowValueForm] = useState(false);
+  const [dirName, setDirName] = useState('');
+  const [key, setKey] = useState('');
+  const [val, setVal] = useState('');
+
+  const toggleDirForm = () => {
+    setShowDirForm(!showDirForm);
+    setShowValueForm(false);
+  };
+
+  const toggleValueForm = () => {
+    setShowValueForm(!showValueForm);
+    setShowDirForm(false);
+  };
+
+  const handleDirSubmit = (e) => {
+    e.preventDefault();
+    parent.get(dirName).put(DIR_VALUE);
+    setDirName('');
+    setShowDirForm(false);
+  };
+
+  const handleValueSubmit = (e) => {
+    e.preventDefault();
+    parent.get(key).put(val);
+    setKey('');
+    setVal('');
+    setShowValueForm(false);
+  };
+
+  return (
+    <div style={{ paddingLeft: `${(level + 1) * 15}px` }}>
+      <div className="flex flex-row items-center gap-4">
+        <a className={`link text-sm ${showDirForm ? 'underline' : ''}`} onClick={toggleDirForm}>
+          New Directory
+        </a>
+        <a className={`link text-sm ${showValueForm ? 'underline' : ''}`} onClick={toggleValueForm}>
+          New Value
+        </a>
+      </div>
+
+      {showDirForm && (
+        <form onSubmit={handleDirSubmit} className="py-2 flex gap-2">
+          <input
+            className="input input-sm"
+            type="text"
+            placeholder="Directory Name"
+            value={dirName}
+            onChange={(e: any) => setDirName(e.target.value)}
+          />
+          <button type="submit" className="btn btn-sm btn-primary">
+            Create
+          </button>
+          <button className="btn btn-sm btn-neutral" onClick={() => setShowDirForm(false)}>
+            Cancel
+          </button>
+        </form>
+      )}
+
+      {showValueForm && (
+        <form onSubmit={handleValueSubmit} className="py-2 flex gap-2">
+          <input
+            className="input input-sm"
+            type="text"
+            placeholder="Key"
+            value={key}
+            onChange={(e: any) => setKey(e.target.value)}
+          />
+          <input
+            className="input input-sm"
+            type="text"
+            placeholder="Value"
+            value={val}
+            onChange={(e: any) => setVal(e.target.value)}
+          />
+          <button className="btn btn-sm btn-primary" type="submit">
+            Create
+          </button>
+          <button className="btn btn-sm btn-neutral" onClick={() => setShowValueForm(false)}>
+            Cancel
+          </button>
+        </form>
+      )}
+    </div>
+  );
+};

src/js/views/explorer/ExplorerNodeValue.tsx

@@ -1,6 +1,6 @@
-import { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
-const VALUE_TRUNCATE_LENGTH = 50;
+const VALUE_TRUNCATE_LENGTH = 20;
 
 type ExplorerNodeValueProps = {
   value: any;