start object view layout

src/Tabs/messageTab.tsx

@@ -2,8 +2,8 @@ import * as React from "bloatless-react";
 
 import { closeChatView, isShowingChatTools, selectedChat, toggleChatTools } from "../Model/model";
 
+import { ChatObjectView } from "../Views/Objects/chatObjectView";
 import { ChatOptionModal } from "../Views/Chat/chatOptionModal";
-import { ChatToolView } from "../Views/Objects/objectListView";
 import { MessageComposer } from "../Views/Chat/messageComposer";
 import { ThreadView } from "../Views/Chat/threadView";
 import { translation } from "../translations";
@@ -35,7 +35,7 @@ export function MessageTab() {
         </span>
         <span>
           <button
-            aria-label={translation.toggleChatTools}
+            aria-label={translation.showObjects}
             on:click={toggleChatTools}
             toggle:selected={isShowingChatTools}
           >
@@ -50,7 +50,7 @@ export function MessageTab() {
         </span>
       </header>,
 
-      ChatToolView(chat),
+      ChatObjectView(chat),
       ThreadView(chat),
 
       <footer>{MessageComposer(chat)}</footer>,

src/Views/Objects/chatObjectView.tsx

@@ -6,7 +6,7 @@ import { ObjectDetailModal } from "./objectDetailModal";
 import { ObjectListEntry } from "./objectListEntry";
 import { translation } from "../../translations";
 
-export function ChatToolView(chat: Chat) {
+export function ChatObjectView(chat: Chat) {
   const isShowingObjectModal = new React.State(false);
   const selectedObject = new React.State<MessageObject | undefined>(undefined);
   const objectModal = React.createProxyState(
@@ -22,12 +22,14 @@ export function ChatToolView(chat: Chat) {
     }
   );
 
-  function createItem() {
-    const newObject = chat.createObjectFromTitle("New item");
+  function createObject() {
+    const newObject = chat.createObjectFromTitle(translation.untitledObject);
     chat.addObjectAndSend(newObject);
+    selectedObject.value = newObject;
+    isShowingObjectModal.value = true;
   }
 
-  const itemConverter: React.StateItemConverter<MessageObject> = (
+  const objectConverter: React.StateItemConverter<MessageObject> = (
     messageObject
   ) => {
     function select() {
@@ -39,10 +41,22 @@ export function ChatToolView(chat: Chat) {
   };
 
   return (
-    <div class="chat-tool-view">
-      <button on:click={createItem}>+</button>
-      <hr></hr>
-      <div children:prepend={[chat.objects, itemConverter]}></div>
+    <div class="chat-object-view flex-column">
+      <div class="flex-row align-center scroll-h border-bottom">
+        <button
+          class="primary"
+          on:click={createObject}
+          aria-label={translation.createObject}
+        >
+          <span class="icon">add</span>
+        </button>
+      </div>
+
+      <div
+        class="grid gap padding"
+        style="grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))"
+        children:prepend={[chat.objects, objectConverter]}
+      ></div>
 
       <div children:set={objectModal}></div>
     </div>

src/Views/Objects/objectListEntry.tsx

@@ -8,7 +8,10 @@ export function ObjectListEntry(
 ) {
   return (
     <button class="tile" on:click={onclick}>
-      <b>{messageObject.title}</b>
+      <div>
+        <b>{messageObject.title}</b>
+        <span class="secondary">{messageObject.id}</span>
+      </div>
     </button>
   );
 }

src/styles.css

@@ -18,11 +18,11 @@
   flex-direction: column;
 }
 
-.chat-tool-view {
+.chat-object-view {
   display: none;
 }
 
-[showingchattools] :is(.thread-view, .chat-tool-view) {
+[showingchattools] :is(.thread-view, .chat-object-view) {
   overflow: scroll;
   position: absolute;
 
@@ -33,7 +33,7 @@
   border-bottom: 1px solid var(--border);
 }
 
-[showingchattools] .chat-tool-view {
+[showingchattools] .chat-object-view {
   display: flex;
 
   top: var(--header-height);
@@ -64,12 +64,12 @@
 }
 
 @media (min-width: 640px) {
-  [showingchattools] :is(.thread-view, .chat-tool-view) {
+  [showingchattools] :is(.thread-view, .chat-object-view) {
     top: var(--header-height);
     bottom: var(--footer-top-line);
   }
 
-  [showingchattools] .chat-tool-view {
+  [showingchattools] .chat-object-view {
     left: 0px;
     right: var(--thread-view-width-with-tools);
 

src/translations.ts

@@ -67,7 +67,9 @@ const englishTranslations = {
   deleteMessage: "Delete message",
 
   // objects
-  toggleChatTools: "toggle chat tools",
+  showObjects: "show objects",
+  createObject: "create object",
+  untitledObject: "Untitled Object",
 
   objectTitle: "Object title",
   objectTitlePlaceholder: "My object",