implement object version history

src/Views/Objects/objectDetailModal.tsx

@@ -0,0 +1,68 @@
+import * as React from "bloatless-react";
+
+import { Chat, MessageObject } from "../../Model/chatModel";
+
+import { translation } from "../../translations";
+
+export function ObjectDetailModal(
+  chat: Chat,
+  messageObject: MessageObject,
+  isPresented: React.State<boolean>
+) {
+  function closeModal() {
+    isPresented.value = false;
+  }
+
+  function saveAndClose() {
+    messageObject.title = editingTitle.value;
+    chat.updateObject(messageObject.id, {});
+    closeModal();
+  }
+
+  function deleteAndClose() {
+    chat.deleteObject(messageObject);
+    closeModal();
+  }
+
+  const editingTitle = new React.State(messageObject.title);
+
+  return (
+    <div class="modal" toggle:open={isPresented}>
+      <div>
+        <main>
+          <h2>{messageObject.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>
+  );
+}

src/Views/Objects/objectListEntry.tsx

@@ -0,0 +1,14 @@
+import * as React from "bloatless-react";
+
+import { MessageObject } from "../../Model/chatModel";
+
+export function ObjectListEntry(
+  messageObject: MessageObject,
+  onclick: () => void
+) {
+  return (
+    <button class="tile" on:click={onclick}>
+      <b>{messageObject.title}</b>
+    </button>
+  );
+}

src/Views/Objects/objectListView.tsx

@@ -0,0 +1,47 @@
+import * as React from "bloatless-react";
+
+import { Chat, MessageObject } from "../../Model/chatModel";
+
+import { ObjectDetailModal } from "./objectDetailModal";
+import { ObjectListEntry } from "./objectListEntry";
+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 ObjectDetailModal(chat, selectedObject.value, isShowingObjectModal);
+  });
+
+  function createItem() {
+    const newObject = chat.createObjectFromTitle("New item");
+    chat.addObjectAndSend(newObject);
+  }
+
+  const itemConverter: React.StateItemConverter<MessageObject> = (
+    messageObject
+  ) => {
+    const latestObject = chat.getLatestObjectContent(messageObject);
+
+    if (!latestObject) return <div></div>; //TODO
+
+    function select() {
+      selectedObject.value = messageObject;
+      isShowingObjectModal.value = true;
+    }
+
+    return ObjectListEntry(messageObject, select);
+  };
+
+  return (
+    <div class="chat-tool-view">
+      <button on:click={createItem}>+</button>
+      <hr></hr>
+      <div children:prepend={[chat.objects, itemConverter]}></div>
+
+      <div children:set={objectModal}></div>
+    </div>
+  );
+}