fix bugs, improve UI

dist/index.css

@@ -1,6 +1,6 @@
 /* src/styles.css */
 [unread] {
-  border-left: 10px solid var(--text-warning);
+  border-left: 10px solid var(--text-warn);
 }
 :root {
   --thread-view-height-with-tools: 8rem;
@@ -17,21 +17,21 @@
 .chat-object-view {
   display: none;
 }
-[showingchattools] :is(.thread-view, .chat-object-view) {
+#message-tab:has([showingchattools]) :is(.thread-view, .chat-object-view) {
   overflow: scroll;
   position: absolute;
   padding: 0px;
 }
-[showingchattools] header {
+#message-tab:has([showingchattools]) header {
   border-bottom: 1px solid var(--border);
 }
-[showingchattools] .chat-object-view {
+#message-tab:has([showingchattools]) .chat-object-view {
   display: flex;
   top: var(--header-height);
   bottom: calc(var(--thread-view-height-with-tools) + var(--footer-top-line));
   border-bottom: 1px solid var(--border);
 }
-[showingchattools] .thread-view {
+#message-tab:has([showingchattools]) .thread-view {
   display: flex;
   height: var(--thread-view-height-with-tools);
   top: unset;
@@ -39,25 +39,25 @@
   flex: 1;
 }
 @media (min-width: 640px) and (max-width: 1400px) {
-  main.split:has([showingchattools]) {
+  main.split:has(#message-tab [showingchattools]) {
     display: flex;
   }
-  main.split:has([showingchattools]) #settings-tab {
+  main.split:has(#message-tab [showingchattools]) #settings-tab {
     display: none;
   }
 }
 @media (min-width: 640px) {
-  [showingchattools] :is(.thread-view, .chat-object-view) {
+  #message-tab:has([showingchattools]) :is(.thread-view, .chat-object-view) {
     top: var(--header-height);
     bottom: var(--footer-top-line);
   }
-  [showingchattools] .chat-object-view {
+  #message-tab:has([showingchattools]) .chat-object-view {
     left: 0px;
     right: var(--thread-view-width-with-tools);
     border-bottom: none;
     border-right: 1px solid var(--border);
   }
-  [showingchattools] .thread-view {
+  #message-tab:has([showingchattools]) .thread-view {
     display: flex;
     left: unset;
     right: 0px;

dist/index.js

@@ -1232,14 +1232,54 @@
     connect();
   }
 
+  // src/icons.ts
+  var icons = {
+    objectTitle: "label",
+    objectHistory: "history",
+    noteContent: "sticky_note_2",
+    categoryName: "category",
+    priority: "priority_high",
+    date: "calendar_month",
+    time: "schedule"
+  };
+
+  // src/Views/Objects/objectEntryView.tsx
+  function ObjectEntryView(chat, messageObject, selectedObject, isShowingObjectModal) {
+    const latest = chat.getMostRecentContent(messageObject);
+    function select() {
+      selectedObject.value = messageObject;
+      isShowingObjectModal.value = true;
+    }
+    const fields = {
+      [icons.noteContent]: "---",
+      [icons.priority]: "---",
+      [icons.categoryName]: "---",
+      [icons.date]: "---",
+      [icons.time]: "---"
+    };
+    Object.entries(latest).forEach((entry) => {
+      let [key, value] = entry;
+      if (!value) return;
+      const icon = icons[key];
+      if (!icon) return;
+      fields[icon] = value;
+    });
+    const fieldElements = Object.entries(fields).map((field) => {
+      const [icon, value] = field;
+      return /* @__PURE__ */ createElement("span", { class: "flex-row control-gap align-center" }, /* @__PURE__ */ createElement("span", { class: "icon" }, icon), value);
+    });
+    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
   function AllObjectsView(chat, selectedObject, isShowingObjectModal) {
     const objectConverter = (messageObject) => {
-      function select() {
-        selectedObject.value = messageObject;
-        isShowingObjectModal.value = true;
-      }
-      return /* @__PURE__ */ createElement("button", { class: "tile", "on:click": select }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, chat.getObjectTitle(messageObject)), /* @__PURE__ */ createElement("span", { class: "secondary" }, messageObject.id)));
+      return ObjectEntryView(
+        chat,
+        messageObject,
+        selectedObject,
+        isShowingObjectModal
+      );
     };
     const content = createProxyState(
       [chat.objects],
@@ -1258,12 +1298,12 @@
   // src/Views/Objects/noteObjectsView.tsx
   function NoteObjectsView(chat, selectedObject, isShowingObjectModal) {
     const objectConverter = (messageObject) => {
-      const latest = chat.getMostRecentContent(messageObject);
-      function select() {
-        selectedObject.value = messageObject;
-        isShowingObjectModal.value = true;
-      }
-      return /* @__PURE__ */ createElement("button", { class: "tile", "on:click": select }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, chat.getObjectTitle(messageObject)), /* @__PURE__ */ createElement("span", { class: "secondary ellipsis" }, latest.noteContent.split("\n")[0])));
+      return ObjectEntryView(
+        chat,
+        messageObject,
+        selectedObject,
+        isShowingObjectModal
+      );
     };
     const notes = new ListState();
     chat.objects.subscribe(() => {
@@ -1309,18 +1349,24 @@
     );
     const editingDate = createProxyState(
       [selectedMessageObject],
-      () => selectedMessageObject.value.isoDate ?? (/* @__PURE__ */ new Date()).toISOString()
+      () => selectedMessageObject.value.date ?? ""
     );
     const editingTime = createProxyState(
       [selectedMessageObject],
-      () => selectedMessageObject.value.isoTime ?? (/* @__PURE__ */ new Date()).toISOString()
+      () => selectedMessageObject.value.time ?? ""
     );
     const editingPriority = createProxyState(
       [selectedMessageObject],
       () => selectedMessageObject.value.priority ?? 0
     );
     bulkSubscribe(
-      [editingNoteContent, editingCategory, editingDate, editingPriority],
+      [
+        editingNoteContent,
+        editingCategory,
+        editingDate,
+        editingTime,
+        editingPriority
+      ],
       () => didEditContent.value = true
     );
     function handleKeyDown(e) {
@@ -1344,8 +1390,8 @@
           noteContent: editingNoteContent.value,
           priority: editingPriority.value,
           categoryName: editingCategory.value,
-          isoDate: editingDate.value,
-          isoTime: editingTime.value
+          date: editingDate.value,
+          time: editingTime.value
         });
       }
       chat.addObjectAndSend(messageObject);
@@ -1363,35 +1409,35 @@
       }
     );
     isPresented.subscribe(() => setTimeout(() => input.focus(), 100));
-    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented, "on:keydown": handleKeyDown }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, chat.getObjectTitle(messageObject)), /* @__PURE__ */ createElement("span", { class: "secondary" }, messageObject.id), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "label"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.objectTitle), input)), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "history"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.objectVersion), /* @__PURE__ */ createElement("select", { "bind:value": selectedMessageObjectId }, ...chat.getSortedContents(messageObject).map((content) => /* @__PURE__ */ createElement("option", { value: content.id }, new Date(
+    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented, "on:keydown": handleKeyDown }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, chat.getObjectTitle(messageObject)), /* @__PURE__ */ createElement("span", { class: "secondary" }, messageObject.id), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, icons.objectTitle), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.objectTitle), input)), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, icons.objectHistory), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.objectVersion), /* @__PURE__ */ createElement("select", { "bind:value": selectedMessageObjectId }, ...chat.getSortedContents(messageObject).map((content) => /* @__PURE__ */ createElement("option", { value: content.id }, new Date(
       content.isoDateVersionCreated
-    ).toLocaleString()))), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "sticky_note_2"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.note), /* @__PURE__ */ createElement(
+    ).toLocaleString()))), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, icons.noteContent), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.note), /* @__PURE__ */ createElement(
       "textarea",
       {
         rows: "5",
         "bind:value": editingNoteContent,
         placeholder: translation.noteContentPlaceholder
       }
-    ))), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "category"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.category), /* @__PURE__ */ createElement(
+    ))), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, icons.categoryName), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.category), /* @__PURE__ */ createElement(
       "input",
       {
         "bind:value": editingCategory,
         placeholder: translation.categoryPlaceholder
       }
-    ))), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "priority_high"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.priority), /* @__PURE__ */ createElement(
+    ))), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, icons.priority), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.priority), /* @__PURE__ */ createElement(
       "input",
       {
         type: "number",
         "bind:value": editingPriority,
         placeholder: translation.priorityPlaceholder
       }
-    ))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "calendar_month"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.date), /* @__PURE__ */ createElement("input", { type: "date", "bind:value": editingDate }))), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "schedule"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.time), /* @__PURE__ */ createElement("input", { type: "time", "bind:value": editingTime }))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("button", { class: "danger width-input", "on:click": deleteAndClose }, translation.deleteObject, /* @__PURE__ */ createElement("span", { class: "icon" }, "delete")))), /* @__PURE__ */ createElement("div", { class: "flex-row" }, /* @__PURE__ */ createElement("button", { class: "flex-1 width-100 danger", "on:click": closeModal }, translation.discard), /* @__PURE__ */ createElement("button", { class: "flex-1 width-100 primary", "on:click": saveAndClose }, translation.save, /* @__PURE__ */ createElement("span", { class: "icon" }, "save")))));
+    ))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, icons.date), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.date), /* @__PURE__ */ createElement("input", { type: "date", "bind:value": editingDate }))), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, icons.time), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.time), /* @__PURE__ */ createElement("input", { type: "time", "bind:value": editingTime }))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("button", { class: "danger width-input", "on:click": deleteAndClose }, translation.deleteObject, /* @__PURE__ */ createElement("span", { class: "icon" }, "delete")))), /* @__PURE__ */ createElement("div", { class: "flex-row" }, /* @__PURE__ */ createElement("button", { class: "flex-1 width-100 danger", "on:click": closeModal }, translation.discard), /* @__PURE__ */ createElement("button", { class: "flex-1 width-100 primary", "on:click": saveAndClose }, translation.save, /* @__PURE__ */ createElement("span", { class: "icon" }, "save")))));
   }
 
   // src/Views/Objects/chatObjectView.tsx
   var viewTypes = {
     all: [translation.viewAll, "grid_view"],
-    notes: [translation.viewNotes, "sticky_note_2"]
+    notes: [translation.viewNotes, icons.noteContent]
   };
   function ChatObjectView(chat) {
     const isShowingObjectModal = new State(false);
@@ -1648,7 +1694,15 @@
         "children:append": [chat.outbox, outboxMessageConverter]
       }
     );
-    const listWrapper = /* @__PURE__ */ createElement("div", { class: "thread-view flex-column gap" }, messageList, outboxList);
+    const listWrapper = /* @__PURE__ */ createElement(
+      "div",
+      {
+        class: "thread-view flex-column gap",
+        "toggle:showingchattools": isShowingObjects
+      },
+      messageList,
+      outboxList
+    );
     function scrollToBottom() {
       listWrapper.scrollTop = listWrapper.scrollHeight;
     }
@@ -1700,7 +1754,6 @@
     return /* @__PURE__ */ createElement(
       "article",
       {
-        "toggle:showingchattools": isShowingObjects,
         id: "message-tab",
         "children:set": messageTabContent
       }

src/Model/chatModel.ts

@@ -39,10 +39,10 @@ export interface MessageObjectContent {
   id: string;
 
   noteContent?: string;
-  categoryName?: string;
-  isoDate?: string;
-  isoTime?: string;
   priority?: number;
+  categoryName?: string;
+  date?: string;
+  time?: string;
 }
 
 // chat

src/Tabs/messageTab.tsx

@@ -61,7 +61,6 @@ export function MessageTab() {
 
   return (
     <article
-      toggle:showingchattools={isShowingObjects}
       id="message-tab"
       children:set={messageTabContent}
     ></article>

src/Views/Chat/threadView.tsx

@@ -117,7 +117,10 @@ export function ThreadView(chat: Chat) {
     ></div>
   );
   const listWrapper = (
-    <div class="thread-view flex-column gap">
+    <div
+      class="thread-view flex-column gap"
+      toggle:showingchattools={isShowingObjects}
+    >
       {messageList}
       {outboxList}
     </div>

src/Views/Objects/allObjectsView.tsx

@@ -2,6 +2,7 @@ import * as React from "bloatless-react";
 
 import { Chat, MessageObject } from "../../Model/chatModel";
 
+import { ObjectEntryView } from "./objectEntryView";
 import { translation } from "../../translations";
 
 export function AllObjectsView(
@@ -12,18 +13,11 @@ export function AllObjectsView(
   const objectConverter: React.StateItemConverter<MessageObject> = (
     messageObject
   ) => {
-    function select() {
-      selectedObject.value = messageObject;
-      isShowingObjectModal.value = true;
-    }
-
-    return (
-      <button class="tile" on:click={select}>
-        <div>
-        <b>{chat.getObjectTitle(messageObject)}</b>
-          <span class="secondary">{messageObject.id}</span>
-        </div>
-      </button>
+    return ObjectEntryView(
+      chat,
+      messageObject,
+      selectedObject,
+      isShowingObjectModal
     );
   };
 

src/Views/Objects/chatObjectView.tsx

@@ -5,11 +5,12 @@ import { Chat, MessageObject } from "../../Model/chatModel";
 import { AllObjectsView } from "./allObjectsView";
 import { NoteObjectsView } from "./noteObjectsView";
 import { ObjectDetailModal } from "./objectDetailModal";
+import { icons } from "../../icons";
 import { translation } from "../../translations";
 
 export const viewTypes = {
   all: [translation.viewAll, "grid_view"],
-  notes: [translation.viewNotes, "sticky_note_2"],
+  notes: [translation.viewNotes, icons.noteContent],
 };
 
 export function ChatObjectView(chat: Chat) {

src/Views/Objects/noteObjectsView.tsx

@@ -2,6 +2,7 @@ import * as React from "bloatless-react";
 
 import { Chat, MessageObject } from "../../Model/chatModel";
 
+import { ObjectEntryView } from "./objectEntryView";
 import { translation } from "../../translations";
 
 export function NoteObjectsView(
@@ -12,22 +13,11 @@ export function NoteObjectsView(
   const objectConverter: React.StateItemConverter<MessageObject> = (
     messageObject
   ) => {
-    const latest = chat.getMostRecentContent(messageObject);
-
-    function select() {
-      selectedObject.value = messageObject;
-      isShowingObjectModal.value = true;
-    }
-
-    return (
-      <button class="tile" on:click={select}>
-        <div>
-          <b>{chat.getObjectTitle(messageObject)}</b>
-          <span class="secondary ellipsis">
-            {latest.noteContent!.split("\n")[0]}
-          </span>
-        </div>
-      </button>
+    return ObjectEntryView(
+      chat,
+      messageObject,
+      selectedObject,
+      isShowingObjectModal
     );
   };
 

src/Views/Objects/objectDetailModal.tsx

@@ -2,6 +2,7 @@ import * as React from "bloatless-react";
 
 import { Chat, MessageObject } from "../../Model/chatModel";
 
+import { icons } from "../../icons";
 import { translation } from "../../translations";
 
 export function ObjectDetailModal(
@@ -33,18 +34,24 @@ export function ObjectDetailModal(
   );
   const editingDate = React.createProxyState(
     [selectedMessageObject],
-    () => selectedMessageObject.value.isoDate ?? new Date().toISOString()
+    () => selectedMessageObject.value.date ?? ""
   );
   const editingTime = React.createProxyState(
     [selectedMessageObject],
-    () => selectedMessageObject.value.isoTime ?? new Date().toISOString()
+    () => selectedMessageObject.value.time ?? ""
   );
   const editingPriority = React.createProxyState(
     [selectedMessageObject],
     () => selectedMessageObject.value.priority ?? 0
   );
   React.bulkSubscribe(
-    [editingNoteContent, editingCategory, editingDate, editingPriority],
+    [
+      editingNoteContent,
+      editingCategory,
+      editingDate,
+      editingTime,
+      editingPriority,
+    ],
     () => (didEditContent.value = true)
   );
 
@@ -75,8 +82,8 @@ export function ObjectDetailModal(
         noteContent: editingNoteContent.value,
         priority: editingPriority.value,
         categoryName: editingCategory.value,
-        isoDate: editingDate.value,
-        isoTime: editingTime.value,
+        date: editingDate.value,
+        time: editingTime.value,
       });
     }
 
@@ -108,7 +115,7 @@ export function ObjectDetailModal(
 
           <div class="flex-column gap">
             <label class="tile">
-              <span class="icon">label</span>
+              <span class="icon">{icons.objectTitle}</span>
               <div>
                 <span>{translation.objectTitle}</span>
                 {input}
@@ -118,7 +125,7 @@ export function ObjectDetailModal(
             <hr></hr>
 
             <label class="tile">
-              <span class="icon">history</span>
+              <span class="icon">{icons.objectHistory}</span>
               <div>
                 <span>{translation.objectVersion}</span>
                 <select bind:value={selectedMessageObjectId}>
@@ -139,7 +146,7 @@ export function ObjectDetailModal(
             <hr></hr>
 
             <label class="tile">
-              <span class="icon">sticky_note_2</span>
+              <span class="icon">{icons.noteContent}</span>
               <div>
                 <span>{translation.note}</span>
                 <textarea
@@ -151,7 +158,7 @@ export function ObjectDetailModal(
             </label>
 
             <label class="tile">
-              <span class="icon">category</span>
+              <span class="icon">{icons.categoryName}</span>
               <div>
                 <span>{translation.category}</span>
                 <input
@@ -162,7 +169,7 @@ export function ObjectDetailModal(
             </label>
 
             <label class="tile">
-              <span class="icon">priority_high</span>
+              <span class="icon">{icons.priority}</span>
               <div>
                 <span>{translation.priority}</span>
                 <input
@@ -176,7 +183,7 @@ export function ObjectDetailModal(
             <hr></hr>
 
             <label class="tile">
-              <span class="icon">calendar_month</span>
+              <span class="icon">{icons.date}</span>
               <div>
                 <span>{translation.date}</span>
                 <input type="date" bind:value={editingDate}></input>
@@ -184,7 +191,7 @@ export function ObjectDetailModal(
             </label>
 
             <label class="tile">
-              <span class="icon">schedule</span>
+              <span class="icon">{icons.time}</span>
               <div>
                 <span>{translation.time}</span>
                 <input type="time" bind:value={editingTime}></input>

src/Views/Objects/objectEntryView.tsx

@@ -0,0 +1,62 @@
+import * as React from "bloatless-react";
+
+import {
+  Chat,
+  MessageObject,
+  MessageObjectContent,
+} from "../../Model/chatModel";
+
+import { icons } from "../../icons";
+
+export function ObjectEntryView(
+  chat: Chat,
+  messageObject: MessageObject,
+  selectedObject: React.State<MessageObject | undefined>,
+  isShowingObjectModal: React.State<boolean>
+) {
+  const latest = chat.getMostRecentContent(messageObject);
+
+  function select() {
+    selectedObject.value = messageObject;
+    isShowingObjectModal.value = true;
+  }
+
+  const fields = {
+    [icons.noteContent]: "---",
+    [icons.priority]: "---",
+    [icons.categoryName]: "---",
+    [icons.date]: "---",
+    [icons.time]: "---",
+  };
+  Object.entries(latest).forEach((entry) => {
+    let [key, value] = entry as [keyof MessageObjectContent, string];
+    if (!value) return;
+
+    const icon = icons[key];
+    if (!icon) return;
+
+    fields[icon] = value;
+  });
+
+  const fieldElements = Object.entries(fields).map((field) => {
+    const [icon, value] = field;
+    return (
+      <span class="flex-row control-gap align-center">
+        <span class="icon">{icon}</span>
+        {value}
+      </span>
+    );
+  });
+
+  return (
+    <button class="tile justify-start" on:click={select}>
+      <div>
+        <b>{chat.getObjectTitle(messageObject)}</b>
+        <hr></hr>
+        <span class="flex-column gap height-100 flex secondary ellipsis ">
+          {...fieldElements}
+        </span>
+      </div>
+    </button>
+  );
+}

src/icons.ts

@@ -0,0 +1,10 @@
+export const icons = {
+    objectTitle: "label",
+    objectHistory: "history",
+
+    noteContent: "sticky_note_2",
+    categoryName: "category",
+    priority: "priority_high",
+    date: "calendar_month",
+    time: "schedule",
+}

src/styles.css

@@ -1,5 +1,5 @@
 [unread] {
-  border-left: 10px solid var(--text-warning);
+  border-left: 10px solid var(--text-warn);
 }
 
 /* TOOLS */
@@ -22,18 +22,18 @@
   display: none;
 }
 
-[showingchattools] :is(.thread-view, .chat-object-view) {
+#message-tab:has([showingchattools]) :is(.thread-view, .chat-object-view) {
   overflow: scroll;
   position: absolute;
 
   padding: 0px;
 }
 
-[showingchattools] header {
+#message-tab:has([showingchattools]) header {
   border-bottom: 1px solid var(--border);
 }
 
-[showingchattools] .chat-object-view {
+#message-tab:has([showingchattools]) .chat-object-view {
   display: flex;
 
   top: var(--header-height);
@@ -42,7 +42,7 @@
   border-bottom: 1px solid var(--border);
 }
 
-[showingchattools] .thread-view {
+#message-tab:has([showingchattools]) .thread-view {
   display: flex;
 
   height: var(--thread-view-height-with-tools);
@@ -54,22 +54,22 @@
 }
 
 @media (min-width: 640px) and (max-width: 1400px) {
-  main.split:has([showingchattools]) {
+  main.split:has(#message-tab [showingchattools]) {
     display: flex;
   }
 
-  main.split:has([showingchattools]) #settings-tab {
+  main.split:has(#message-tab [showingchattools]) #settings-tab {
     display: none;
   }
 }
 
 @media (min-width: 640px) {
-  [showingchattools] :is(.thread-view, .chat-object-view) {
+  #message-tab:has([showingchattools]) :is(.thread-view, .chat-object-view) {
     top: var(--header-height);
     bottom: var(--footer-top-line);
   }
 
-  [showingchattools] .chat-object-view {
+  #message-tab:has([showingchattools]) .chat-object-view {
     left: 0px;
     right: var(--thread-view-width-with-tools);
 
@@ -77,7 +77,7 @@
     border-right: 1px solid var(--border);
   }
 
-  [showingchattools] .thread-view {
+  #message-tab:has([showingchattools]) .thread-view {
     display: flex;
 
     left: unset;