focus object title input automatically, update handling of untitled objects

src/Model/chatModel.ts

@@ -14,6 +14,7 @@ import { decryptString, encryptString } from "../cryptUtility";
 
 import { Message } from "udn-frontend";
 import { storageKeys } from "../utility";
+import { translation } from "../translations";
 
 // TYPES
 // message
@@ -174,8 +175,7 @@ export class Chat {
         this.encryptionKey.value
       );
       const messageObject = JSON.parse(decryptedMessageObjectString);
-      if (messageObject.id && messageObject.title)
-        return this.handleMessageObject(messageObject);
+      if (messageObject.id) return this.handleMessageObject(messageObject);
     }
 
     this.handleMessage({
@@ -400,6 +400,10 @@ export class Chat {
     return messageObject.contentVersions[contentId];
   };
 
+  getObjectTitle = (messageObject: MessageObject) => {
+    return messageObject.title || translation.untitledObject;
+  };
+
   // channel
   setChannel = (): void => {
     if (this.cannotSetChannel.value == true) return;

src/Views/Objects/allObjectsView.tsx

@@ -20,7 +20,7 @@ export function AllObjectsView(
     return (
       <button class="tile" on:click={select}>
         <div>
-          <b>{messageObject.title}</b>
+        <b>{chat.getObjectTitle(messageObject)}</b>
           <span class="secondary">{messageObject.id}</span>
         </div>
       </button>

src/Views/Objects/chatObjectView.tsx

@@ -46,7 +46,7 @@ export function ChatObjectView(chat: Chat) {
 
   // methods
   function createObject() {
-    const newObject = chat.createObjectFromTitle(translation.untitledObject);
+    const newObject = chat.createObjectFromTitle("");
     chat.addObjectAndSend(newObject);
     selectedObject.value = newObject;
     isShowingObjectModal.value = true;
@@ -69,10 +69,7 @@ export function ChatObjectView(chat: Chat) {
           )}
         </div>
 
-        <button
-          class="height-100"
-          disabled
-        >
+        <button class="height-100" disabled>
           <span class="icon">visibility</span>
         </button>
       </div>

src/Views/Objects/noteObjectsView.tsx

@@ -22,7 +22,7 @@ export function NoteObjectsView(
     return (
       <button class="tile" on:click={select}>
         <div>
-          <b>{messageObject.title}</b>
+          <b>{chat.getObjectTitle(messageObject)}</b>
           <span class="secondary ellipsis">
             {latest.noteContent!.split("\n")[0]}
           </span>

src/Views/Objects/objectDetailModal.tsx

@@ -68,11 +68,19 @@ export function ObjectDetailModal(
     closeModal();
   }
 
+  const input = (
+    <input
+      bind:value={editingTitle}
+      placeholder={translation.objectTitlePlaceholder}
+    ></input>
+  );
+  isPresented.subscribe(() => setTimeout(() => input.focus(), 100));
+
   return (
     <div class="modal" toggle:open={isPresented} on:keydown={handleKeyDown}>
       <div>
         <main>
-          <h2>{messageObject.title}</h2>
+          <h2>{chat.getObjectTitle(messageObject)}</h2>
           <span class="secondary">{messageObject.id}</span>
 
           <hr></hr>
@@ -82,11 +90,7 @@ export function ObjectDetailModal(
               <span class="icon">label</span>
               <div>
                 <span>{translation.objectTitle}</span>
-                <input
-                autofocus
-                  bind:value={editingTitle}
-                  placeholder={translation.objectTitlePlaceholder}
-                ></input>
+                {input}
               </div>
             </label>