add datalist for object categories

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>;
+};