rename item->object, implement basic object editing

src/Views/Chat/chatToolView.tsx

@@ -1,26 +1,43 @@
 import * as React from "bloatless-react";
 
-import { Chat, Item } from "../../Model/chatModel";
+import { Chat, MessageObject } from "../../Model/chatModel";
 
+import { ChatOptionModal } from "./chatOptionModal";
+import { ItemDetailModal } from "./itemDetailModal";
 import { translation } from "../../translations";
 
 export function ChatToolView(chat: Chat) {
+  const isShowingObjectModal = new React.State(false);
+  const selectedObject = new React.State<MessageObject | undefined>(undefined);
+  const objectModal = React.createProxyState([selectedObject], () => {
+    if (selectedObject.value == undefined) return <div></div>;
+
+    return ItemDetailModal(chat, selectedObject.value, isShowingObjectModal);
+  });
+
   function createItem() {
-    chat.createItem({
+    chat.createObject({
       id: React.UUID(),
       title: "new item",
     });
   }
 
-  const itemConverter: React.StateItemConverter<Item> = (item) => {
-    return <span>{item.title}</span>;
+  const itemConverter: React.StateItemConverter<MessageObject> = (object) => {
+    function select() {
+      selectedObject.value = object;
+      isShowingObjectModal.value = true;
+    }
+
+    return <button on:click={select}>{object.title}</button>;
   };
 
   return (
     <div class="chat-tool-view">
       <button on:click={createItem}>+</button>
       <hr></hr>
-      <div children:append={[chat.items, itemConverter]}></div>
+      <div children:append={[chat.objects, itemConverter]}></div>
+
+      <div children:set={objectModal}></div>
     </div>
   );
 }

src/Views/Chat/itemDetailModal.tsx

@@ -0,0 +1,68 @@
+import * as React from "bloatless-react";
+
+import { Chat, MessageObject } from "../../Model/chatModel";
+
+import { translation } from "../../translations";
+
+export function ItemDetailModal(
+  chat: Chat,
+  object: MessageObject,
+  isPresented: React.State<boolean>
+) {
+  function closeModal() {
+    isPresented.value = false;
+  }
+
+  function saveAndClose() {
+    object.title = editingTitle.value;
+    chat.objects.set(object.id, object);
+    closeModal();
+  }
+
+  function deleteAndClose() {
+    chat.objects.remove(object.id);
+    closeModal();
+  }
+
+  const editingTitle = new React.State(object.title);
+
+  return (
+    <div class="modal" toggle:open={isPresented}>
+      <div>
+        <main>
+          <h2>{object.title}</h2>
+
+          <div>
+            <label class="tile">
+              <span class="icon">label</span>
+              <div>
+                <span>{translation.objectTitle}</span>
+                <input
+                  bind:value={editingTitle}
+                  placeholder={translation.objectTitlePlaceholder}
+                ></input>
+              </div>
+            </label>
+          </div>
+
+          <hr></hr>
+
+          <button class="danger" on:click={deleteAndClose}>
+            {translation.deleteObject}
+            <span class="icon">delete</span>
+          </button>
+        </main>
+
+        <div class="flex-row">
+          <button class="flex-1 width-100 danger" on:click={closeModal}>
+            {translation.discard}
+          </button>
+          <button class="flex-1 width-100 primary" on:click={saveAndClose}>
+            {translation.save}
+            <span class="icon">save</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}