cleanup, improve UI

dist/index.js

@@ -1271,8 +1271,8 @@
     return /* @__PURE__ */ createElement("button", { class: "tile justify-start", "on:click": select }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, chat.getObjectTitle(messageObject)), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("span", { class: "flex-column gap height-100 flex secondary ellipsis " }, ...fieldElements)));
   }
 
-  // src/Views/Objects/allObjectsView.tsx
+  // src/Views/Objects/objectGridView.tsx
-  function AllObjectsView(chat, selectedObject, isShowingObjectModal) {
+  function ObjectGridView(chat, messageObjects, selectedObject, isShowingObjectModal, placeholderText) {
     const objectConverter = (messageObject) => {
       return ObjectEntryView(
         chat,
@@ -1281,15 +1281,26 @@
         isShowingObjectModal
       );
     };
+    return messageObjects.value.size == 0 ? /* @__PURE__ */ createElement("div", { class: "flex-column width-100 height-100 align-center justify-center secondary" }, placeholderText) : /* @__PURE__ */ createElement(
+      "div",
+      {
+        class: "grid gap padding",
+        style: "grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))",
+        "children:prepend": [messageObjects, objectConverter]
+      }
+    );
+  }
+
+  // src/Views/Objects/allObjectsView.tsx
+  function AllObjectsView(chat, selectedObject, isShowingObjectModal) {
     const content = createProxyState(
       [chat.objects],
-      () => chat.objects.value.size == 0 ? /* @__PURE__ */ createElement("div", { class: "flex-column width-100 height-100 align-center justify-center secondary" }, translation.noObjects) : /* @__PURE__ */ createElement(
+      () => ObjectGridView(
-        "div",
+        chat,
-        {
+        chat.objects,
-          class: "grid gap padding",
+        selectedObject,
-          style: "grid-template-columns: repeat(auto-fill, minmax(350px, 1fr))",
+        isShowingObjectModal,
-          "children:prepend": [chat.objects, objectConverter]
+        translation.noObjects
-        }
       )
     );
     return /* @__PURE__ */ createElement("div", { class: "width-100 height-100", "children:set": content });
@@ -1297,14 +1308,6 @@
 
   // src/Views/Objects/noteObjectsView.tsx
   function NoteObjectsView(chat, selectedObject, isShowingObjectModal) {
-    const objectConverter = (messageObject) => {
-      return ObjectEntryView(
-        chat,
-        messageObject,
-        selectedObject,
-        isShowingObjectModal
-      );
-    };
     const notes = new ListState();
     chat.objects.subscribe(() => {
       notes.clear();
@@ -1316,13 +1319,12 @@
     });
     const content = createProxyState(
       [chat.objects],
-      () => notes.value.size == 0 ? /* @__PURE__ */ createElement("div", { class: "flex-column width-100 height-100 align-center justify-center secondary" }, translation.noNotes) : /* @__PURE__ */ createElement(
+      () => ObjectGridView(
-        "div",
+        chat,
-        {
+        notes,
-          class: "grid gap padding",
+        selectedObject,
-          style: "grid-template-columns: repeat(auto-fill, minmax(350px, 1fr))",
+        isShowingObjectModal,
-          "children:prepend": [notes, objectConverter]
+        translation.noNotes
-        }
       )
     );
     return /* @__PURE__ */ createElement("div", { class: "width-100 height-100", "children:set": content });

src/Views/Objects/allObjectsView.tsx

@@ -2,7 +2,7 @@ import * as React from "bloatless-react";
 
 import { Chat, MessageObject } from "../../Model/chatModel";
 
-import { ObjectEntryView } from "./objectEntryView";
+import { ObjectGridView } from "./objectGridView";
 import { translation } from "../../translations";
 
 export function AllObjectsView(
@@ -10,28 +10,13 @@ export function AllObjectsView(
   selectedObject: React.State<MessageObject | undefined>,
   isShowingObjectModal: React.State<boolean>
 ) {
-  const objectConverter: React.StateItemConverter<MessageObject> = (
-    messageObject
-  ) => {
-    return ObjectEntryView(
-      chat,
-      messageObject,
-      selectedObject,
-      isShowingObjectModal
-    );
-  };
-
   const content = React.createProxyState([chat.objects], () =>
-    chat.objects.value.size == 0 ? (
+    ObjectGridView(
-      <div class="flex-column width-100 height-100 align-center justify-center secondary">
+      chat,
-        {translation.noObjects}
+      chat.objects,
-      </div>
+      selectedObject,
-    ) : (
+      isShowingObjectModal,
-      <div
+      translation.noObjects
-        class="grid gap padding"
-        style="grid-template-columns: repeat(auto-fill, minmax(350px, 1fr))"
-        children:prepend={[chat.objects, objectConverter]}
-      ></div>
     )
   );
 

src/Views/Objects/noteObjectsView.tsx

@@ -3,6 +3,7 @@ import * as React from "bloatless-react";
 import { Chat, MessageObject } from "../../Model/chatModel";
 
 import { ObjectEntryView } from "./objectEntryView";
+import { ObjectGridView } from "./objectGridView";
 import { translation } from "../../translations";
 
 export function NoteObjectsView(
@@ -10,17 +11,6 @@ export function NoteObjectsView(
   selectedObject: React.State<MessageObject | undefined>,
   isShowingObjectModal: React.State<boolean>
 ) {
-  const objectConverter: React.StateItemConverter<MessageObject> = (
-    messageObject
-  ) => {
-    return ObjectEntryView(
-      chat,
-      messageObject,
-      selectedObject,
-      isShowingObjectModal
-    );
-  };
-
   const notes = new React.ListState<MessageObject>();
   chat.objects.subscribe(() => {
     notes.clear();
@@ -33,16 +23,12 @@ export function NoteObjectsView(
   });
 
   const content = React.createProxyState([chat.objects], () =>
-    notes.value.size == 0 ? (
+    ObjectGridView(
-      <div class="flex-column width-100 height-100 align-center justify-center secondary">
+      chat,
-        {translation.noNotes}
+      notes,
-      </div>
+      selectedObject,
-    ) : (
+      isShowingObjectModal,
-      <div
+      translation.noNotes
-        class="grid gap padding"
-        style="grid-template-columns: repeat(auto-fill, minmax(350px, 1fr))"
-        children:prepend={[notes, objectConverter]}
-      ></div>
     )
   );
 

src/Views/Objects/objectGridView.tsx

@@ -0,0 +1,39 @@
+import * as React from "bloatless-react";
+
+import { Chat, MessageObject } from "../../Model/chatModel";
+
+import { ObjectEntryView } from "./objectEntryView";
+import { icons } from "../../icons";
+
+export function ObjectGridView(
+  chat: Chat,
+  messageObjects:
+    | React.ListState<MessageObject>
+    | React.MapState<MessageObject>,
+  selectedObject: React.State<MessageObject | undefined>,
+  isShowingObjectModal: React.State<boolean>,
+  placeholderText: string
+) {
+  const objectConverter: React.StateItemConverter<MessageObject> = (
+    messageObject
+  ) => {
+    return ObjectEntryView(
+      chat,
+      messageObject,
+      selectedObject,
+      isShowingObjectModal
+    );
+  };
+
+  return messageObjects.value.size == 0 ? (
+    <div class="flex-column width-100 height-100 align-center justify-center secondary">
+      {placeholderText}
+    </div>
+  ) : (
+    <div
+      class="grid gap padding"
+      style="grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))"
+      children:prepend={[messageObjects, objectConverter]}
+    ></div>
+  );
+}