prepare layout for object views

src/Views/Objects/allObjectsView.tsx

@@ -0,0 +1,45 @@
+import * as React from "bloatless-react";
+
+import { Chat, MessageObject } from "../../Model/chatModel";
+
+import { translation } from "../../translations";
+
+export function AllObjectsView(
+  chat: Chat,
+  selectedObject: React.State<MessageObject | undefined>,
+  isShowingObjectModal: React.State<boolean>
+) {
+  const objectConverter: React.StateItemConverter<MessageObject> = (
+    messageObject
+  ) => {
+    function select() {
+      selectedObject.value = messageObject;
+      isShowingObjectModal.value = true;
+    }
+
+    return (
+      <button class="tile" on:click={select}>
+        <div>
+          <b>{messageObject.title}</b>
+          <span class="secondary">{messageObject.id}</span>
+        </div>
+      </button>
+    );
+  };
+
+  const content = React.createProxyState([chat.objects], () =>
+    chat.objects.value.size == 0 ? (
+      <div class="flex-column width-100 height-100 align-center justify-center secondary">
+        {translation.noObjects}
+      </div>
+    ) : (
+      <div
+        class="grid gap padding"
+        style="grid-template-columns: repeat(auto-fit, minmax(350px, 1fr))"
+        children:prepend={[chat.objects, objectConverter]}
+      ></div>
+    )
+  );
+
+  return <div class="width-100 height-100" children:set={content}></div>;
+}

src/Views/Objects/chatObjectView.tsx

@@ -2,11 +2,18 @@ import * as React from "bloatless-react";
 
 import { Chat, MessageObject } from "../../Model/chatModel";
 
+import { AllObjectsView } from "./allObjectsView";
+import { NoteObjectsView } from "./noteObjectsView";
 import { ObjectDetailModal } from "./objectDetailModal";
-import { ObjectListEntry } from "./objectListEntry";
 import { translation } from "../../translations";
 
+export const viewTypes = {
+  all: [translation.viewAll, "grid_view"],
+  notes: [translation.viewNotes, "sticky_note_2"],
+};
+
 export function ChatObjectView(chat: Chat) {
+  // selection and modal
   const isShowingObjectModal = new React.State(false);
   const selectedObject = new React.State<MessageObject | undefined>(undefined);
   const objectModal = React.createProxyState(
@@ -22,6 +29,22 @@ export function ChatObjectView(chat: Chat) {
     }
   );
 
+  // view type
+  const selectedViewType = new React.State<keyof typeof viewTypes>("all");
+  const mainView = React.createProxyState([selectedViewType], () => {
+    function getViewFunction() {
+      switch (selectedViewType.value) {
+        case "notes":
+          return NoteObjectsView;
+        default:
+          return AllObjectsView;
+      }
+    }
+
+    return getViewFunction()(chat, selectedObject, isShowingObjectModal);
+  });
+
+  // methods
   function createObject() {
     const newObject = chat.createObjectFromTitle(translation.untitledObject);
     chat.addObjectAndSend(newObject);
@@ -29,36 +52,60 @@ export function ChatObjectView(chat: Chat) {
     isShowingObjectModal.value = true;
   }
 
-  const objectConverter: React.StateItemConverter<MessageObject> = (
-    messageObject
-  ) => {
-    function select() {
-      selectedObject.value = messageObject;
-      isShowingObjectModal.value = true;
-    }
-
-    return ObjectListEntry(messageObject, select);
-  };
-
   return (
     <div class="chat-object-view flex-column">
-      <div class="flex-row align-center scroll-h border-bottom">
+      <div class="flex-row align-center border-bottom">
         <button
-          class="primary"
+          class="primary height-100"
           on:click={createObject}
           aria-label={translation.createObject}
         >
           <span class="icon">add</span>
         </button>
+
+        <div class="padding-sm flex flex-row gap justify-center scroll-h width-100">
+          {...Object.keys(viewTypes).map((key: any) =>
+            ViewTypeToggle(key, selectedViewType)
+          )}
+        </div>
+
+        <button
+          class="height-100"
+          on:click={createObject}
+          aria-label={translation.createObject}
+        >
+          <span class="icon">visibility</span>
+        </button>
       </div>
 
       <div
-        class="grid gap padding"
-        style="grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))"
-        children:prepend={[chat.objects, objectConverter]}
+        class="width-100 height-100 flex-1 scroll-h"
+        children:set={mainView}
       ></div>
 
       <div children:set={objectModal}></div>
     </div>
   );
 }
+
+function ViewTypeToggle(
+  key: keyof typeof viewTypes,
+  selection: React.State<keyof typeof viewTypes>
+) {
+  const [label, icon] = viewTypes[key];
+
+  function select() {
+    selection.value = key;
+  }
+
+  const isSelected = React.createProxyState(
+    [selection],
+    () => selection.value == key
+  );
+
+  return (
+    <button aria-label={label} on:click={select} toggle:selected={isSelected}>
+      <span class="icon">{icon}</span>
+    </button>
+  );
+}

src/Views/Objects/noteObjectsView.tsx

@@ -0,0 +1,45 @@
+import * as React from "bloatless-react";
+
+import { Chat, MessageObject } from "../../Model/chatModel";
+
+import { translation } from "../../translations";
+
+export function NoteObjectsView(
+  chat: Chat,
+  selectedObject: React.State<MessageObject | undefined>,
+  isShowingObjectModal: React.State<boolean>
+) {
+  const objectConverter: React.StateItemConverter<MessageObject> = (
+    messageObject
+  ) => {
+    function select() {
+      selectedObject.value = messageObject;
+      isShowingObjectModal.value = true;
+    }
+
+    return (
+      <button class="tile" on:click={select}>
+        <div>
+          <b>{messageObject.title}</b>
+          <span class="secondary">{messageObject.id}</span>
+        </div>
+      </button>
+    );
+  };
+
+  const content = React.createProxyState([chat.objects], () =>
+    chat.objects.value.size == 0 ? (
+      <div class="flex-column width-100 height-100 align-center justify-center secondary">
+        {translation.noNotes}
+      </div>
+    ) : (
+      <div
+        class="grid gap padding"
+        style="grid-template-columns: repeat(auto-fit, minmax(350px, 1fr))"
+        children:prepend={[chat.objects, objectConverter]}
+      ></div>
+    )
+  );
+
+  return <div class="width-100 height-100" children:set={content}></div>;
+}

src/Views/Objects/objectDetailModal.tsx

@@ -83,6 +83,7 @@ export function ObjectDetailModal(
               <div>
                 <span>{translation.objectTitle}</span>
                 <input
+                autofocus
                   bind:value={editingTitle}
                   placeholder={translation.objectTitlePlaceholder}
                 ></input>

src/Views/Objects/objectListEntry.tsx

@@ -1,17 +0,0 @@
-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}>
-      <div>
-        <b>{messageObject.title}</b>
-        <span class="secondary">{messageObject.id}</span>
-      </div>
-    </button>
-  );
-}

src/translations.ts

@@ -71,6 +71,12 @@ const englishTranslations = {
   createObject: "create object",
   untitledObject: "Untitled Object",
 
+  viewAll: "All",
+  viewNotes: "Notes",
+
+  noObjects: "No objects",
+  noNotes: "No notes",
+
   objectTitle: "Object title",
   objectTitlePlaceholder: "My object",