- Change dynamic textarea to better height scale

ChatTwo/Http/Frontend/src/components/DynamicTextArea.svelte

@@ -1,6 +1,19 @@
 <script lang="ts">
+    import {onMount} from "svelte";
+    import {subscribe} from "$lib/utils.svelte";
+    import {chatInput} from "$lib/shared.svelte";
+
     let textarea: HTMLTextAreaElement;
-    let content: string = $state('');
+
+    subscribe(
+        () => chatInput,
+        (v) => {
+            // Input box has been reset to empty, so resize it back to smaller box
+            if (v.content === '') {
+                resize();
+            }
+        }
+    );
 
     function preventNewlines(e: KeyboardEvent) {
         if (e.key === 'Enter') {
@@ -13,7 +26,6 @@
                 (e.currentTarget as HTMLTextAreaElement).closest('form')?.dispatchEvent(newEvent);
             }
         }
-
     }
 
     function resize() {
@@ -21,13 +33,17 @@
             return;
 
         textarea.style.height = '1px';
-        textarea.style.height = `${textarea.scrollHeight}px`;
+        textarea.style.height = `${textarea.scrollHeight + 10}px`; // with +10px extra padding
     }
+
+    onMount(() => {
+        resize();
+    })
 </script>
 
 <textarea
     bind:this={textarea}
-    bind:value={content}
+    bind:value={chatInput.content}
     oninput={() => resize()}
     onkeydown={(e) => preventNewlines(e)}
 
@@ -52,6 +68,8 @@
         }
 
         width: 100%;
-        padding: 5px 20px;
+
+        min-height: 2.5em;
+        line-height: 1.25;
     }
 </style>

ChatTwo/Http/Frontend/src/lib/chat.svelte.ts

@@ -1,4 +1,4 @@
-import { channelOptions, isChannelLocked, selectedTab, knownTabs } from "$lib/shared.svelte";
+import { channelOptions, isChannelLocked, selectedTab, knownTabs, chatInput } from "$lib/shared.svelte";
 import { source, type Source } from "sveltekit-sse";
 
 interface ChatElements {
@@ -8,7 +8,6 @@ interface ChatElements {
     timestampWidthProbe: HTMLElement | null,
 
     inputForm: Element | null,
-    chatInput: HTMLElement | null,
 }
 
 // ref `DataStructure.Messages`
@@ -77,7 +76,6 @@ export class ChatTwoWeb {
             timestampWidthProbe: document.getElementById('timestamp-width-probe'),
 
             inputForm: document.querySelector('#input > form'),
-            chatInput: document.getElementById('chat-input')
         };
 
         // add indicator signaling more messages below
@@ -102,13 +100,8 @@ export class ChatTwoWeb {
 
         // handle message sending
         this.elements.inputForm?.addEventListener('submit', async (event) => {
-            if (this.elements.chatInput === null)
-                return;
-
             event.preventDefault();
-            // @ts-ignore
-            const message = this.elements.chatInput.value;
-            if (message.length > 500) {
+            if (chatInput.content.length > 500) {
                 return;
             }
 
@@ -118,13 +111,12 @@ export class ChatTwoWeb {
                     'Accept': 'application/json',
                     'Content-Type': 'application/json'
                 },
-                body: JSON.stringify({ message: message })
+                body: JSON.stringify({ message: chatInput.content })
             });
             // const content = await rawResponse.json();
             // TODO: use the response
 
-            // @ts-ignore
-            this.elements.chatInput.value = '';
+            chatInput.content = '';
         });
     }
 

ChatTwo/Http/Frontend/src/lib/shared.svelte.ts

@@ -23,3 +23,5 @@ export function closeTabPane() {
     tabPaneState.visible = false;
     window.localStorage.setItem(persistentTabPabeStateKey, 'false');
 }
+
+export const chatInput: { content: string } = $state({ content: ''} );

ChatTwo/Http/Frontend/src/lib/utils.svelte.ts

@@ -0,0 +1,11 @@
+import {writable} from "svelte/store";
+
+// https://stackoverflow.com/a/79696571
+export const subscribe = <T>(functionToState: () => T, callback: (v: T) => void) => {
+    let value = writable<T>(functionToState());
+    value.subscribe(callback);
+
+    $effect(() => {
+        value.set(functionToState());
+    });
+};