add datalist for object categories

dist/index.js

@@ -387,7 +387,7 @@
     return new Uint8Array(array);
   }
 
-  // src/utility.ts
+  // src/utility.tsx
   var storageKeys = {
     hasUnread(id) {
       return id + "has-unread-messages";
@@ -417,6 +417,9 @@
       return id + "composing-message";
     }
   };
+  var stringToOptionTag = (value) => {
+    return /* @__PURE__ */ createElement("option", null, value);
+  };
 
   // src/translations.ts
   var englishTranslations = {
@@ -919,6 +922,9 @@
       } else {
         this.objects.set(messageObject.id, messageObject);
       }
+      const latest = this.getMostRecentContent(messageObject);
+      if (!latest || !latest.categoryName) return;
+      usedObjectCategories.add(latest.categoryName);
     };
     addObjectAndSend = (messageObject) => {
       this.addObject(messageObject);
@@ -1216,6 +1222,7 @@
   function zoomIn() {
     pageZoom.value += zoomStep;
   }
+  var usedObjectCategories = restoreListState("object-categories");
   var chats = new ListState();
   var chatIds = restoreListState("chat-ids");
   var selectedChat = new State(void 0);
@@ -1661,6 +1668,7 @@
       "textarea",
       {
         rows: "5",
+        class: "height-auto",
         "bind:value": editingNoteContent,
         placeholder: translation.noteContentPlaceholder
       }
@@ -1668,9 +1676,17 @@
       "input",
       {
         "bind:value": editingCategory,
-        placeholder: translation.categoryPlaceholder
+        placeholder: translation.categoryPlaceholder,
+        list: "object-categories"
       }
-    ))), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, icons.priority), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.priority), /* @__PURE__ */ createElement(
+    ))), /* @__PURE__ */ createElement(
+      "datalist",
+      {
+        hidden: true,
+        id: "object-categories",
+        "children:append": [usedObjectCategories, stringToOptionTag]
+      }
+    ), /* @__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",
@@ -1921,9 +1937,6 @@
   }
 
   // src/Views/Overview/connectionSection.tsx
-  var addressConverter = (address) => {
-    return /* @__PURE__ */ createElement("option", null, address);
-  };
   function ConnectionSection() {
     return /* @__PURE__ */ createElement("div", { class: "flex-column" }, /* @__PURE__ */ createElement("h2", null, translation.connection), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "cell_tower"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.serverAddress), /* @__PURE__ */ createElement(
       "input",
@@ -1938,7 +1951,7 @@
       {
         hidden: true,
         id: "previous-addresses",
-        "children:append": [previousAddresses, addressConverter]
+        "children:append": [previousAddresses, stringToOptionTag]
       }
     ))), /* @__PURE__ */ createElement("div", { class: "flex-row width-input justify-end" }, /* @__PURE__ */ createElement(
       "button",

dist/styles.css

@@ -745,6 +745,10 @@ select + .icon,
   height: 100% !important;
 }
 
+.height-auto {
+  height: auto !important;
+}
+
 button:not(.tile):not(header *),
 footer,
 input:not([type="checkbox"]):not([type="radio"]),

src/Model/chatModel.ts

@@ -9,6 +9,7 @@ import {
   selectedChat,
   senderName,
   updateMailbox,
+  usedObjectCategories,
 } from "../Model/model";
 import { decryptString, encryptString } from "../cryptUtility";
 
@@ -348,6 +349,10 @@ export class Chat {
     } else {
       this.objects.set(messageObject.id, messageObject);
     }
+
+    const latest = this.getMostRecentContent(messageObject);
+    if (!latest || !latest.categoryName) return;
+    usedObjectCategories.add(latest.categoryName);
   };
 
   addObjectAndSend = (messageObject: MessageObject): void => {

src/Model/model.ts

@@ -157,6 +157,9 @@ export function zoomIn() {
   pageZoom.value += zoomStep;
 }
 
+export const usedObjectCategories =
+  React.restoreListState<string>("object-categories");
+
 // CHAT
 export const chats = new React.ListState<Chat>();
 export const chatIds = React.restoreListState<string>("chat-ids");

src/Views/Objects/objectDetailModal.tsx

@@ -3,7 +3,9 @@ import * as React from "bloatless-react";
 import { Chat, MessageObject } from "../../Model/chatModel";
 
 import { icons } from "../../icons";
+import { stringToOptionTag } from "../../utility";
 import { translation } from "../../translations";
+import { usedObjectCategories } from "../../Model/model";
 
 export function ObjectDetailModal(
   chat: Chat,
@@ -151,6 +153,7 @@ export function ObjectDetailModal(
                 <span>{translation.note}</span>
                 <textarea
                   rows="5"
+                  class="height-auto"
                   bind:value={editingNoteContent}
                   placeholder={translation.noteContentPlaceholder}
                 ></textarea>
@@ -164,9 +167,15 @@ export function ObjectDetailModal(
                 <input
                   bind:value={editingCategory}
                   placeholder={translation.categoryPlaceholder}
+                  list="object-categories"
                 ></input>
               </div>
             </label>
+            <datalist
+              hidden
+              id="object-categories"
+              children:append={[usedObjectCategories, stringToOptionTag]}
+            ></datalist>
 
             <label class="tile">
               <span class="icon">{icons.priority}</span>

src/Views/Overview/connectionSection.tsx

@@ -17,12 +17,9 @@ import {
   serverAddressInput,
 } from "../../Model/model";
 
+import { stringToOptionTag } from "../../utility";
 import { translation } from "../../translations";
 
-const addressConverter: React.StateItemConverter<string> = (address) => {
-  return <option>{address}</option>;
-};
-
 export function ConnectionSection() {
   return (
     <div class="flex-column">
@@ -41,7 +38,7 @@ export function ConnectionSection() {
           <datalist
             hidden
             id="previous-addresses"
-            children:append={[previousAddresses, addressConverter]}
+            children:append={[previousAddresses, stringToOptionTag]}
           ></datalist>
         </div>
       </label>

src/utility.tsx

@@ -1,8 +1,10 @@
+import * as React from "bloatless-react";
+
 export const storageKeys = {
   hasUnread(id: string): string {
     return id + "has-unread-messages";
   },
-  
+
   primaryChannel(id: string): string {
     return id + "primary-channel";
   },
@@ -35,3 +37,7 @@ export const storageKeys = {
     return id + "composing-message";
   },
 };
+
+export const stringToOptionTag: React.StateItemConverter<string> = (value) => {
+  return <option>{value}</option>;
+};