From 14336a9417225eb21490a2c019379b145a3ba30c Mon Sep 17 00:00:00 2001
From: Infi <infiziert@protonmail.ch>
Date: Wed, 1 Oct 2025 19:49:58 +0200
Subject: [PATCH] - Change dynamic textarea to better height scale

---
 .../src/components/DynamicTextArea.svelte     | 28 +++++++++++++++----
 ChatTwo/Http/Frontend/src/lib/chat.svelte.ts  | 16 +++--------
 .../Http/Frontend/src/lib/shared.svelte.ts    |  2 ++
 ChatTwo/Http/Frontend/src/lib/utils.svelte.ts | 11 ++++++++
 4 files changed, 40 insertions(+), 17 deletions(-)
 create mode 100644 ChatTwo/Http/Frontend/src/lib/utils.svelte.ts

diff --git a/ChatTwo/Http/Frontend/src/components/DynamicTextArea.svelte b/ChatTwo/Http/Frontend/src/components/DynamicTextArea.svelte
index b29d977..e52f293 100644
--- a/ChatTwo/Http/Frontend/src/components/DynamicTextArea.svelte
+++ b/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>
\ No newline at end of file
diff --git a/ChatTwo/Http/Frontend/src/lib/chat.svelte.ts b/ChatTwo/Http/Frontend/src/lib/chat.svelte.ts
index 4967417..21dd98d 100644
--- a/ChatTwo/Http/Frontend/src/lib/chat.svelte.ts
+++ b/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 = '';
         });
     }
 
diff --git a/ChatTwo/Http/Frontend/src/lib/shared.svelte.ts b/ChatTwo/Http/Frontend/src/lib/shared.svelte.ts
index a12760f..0d78a8e 100644
--- a/ChatTwo/Http/Frontend/src/lib/shared.svelte.ts
+++ b/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: ''} );
\ No newline at end of file
diff --git a/ChatTwo/Http/Frontend/src/lib/utils.svelte.ts b/ChatTwo/Http/Frontend/src/lib/utils.svelte.ts
new file mode 100644
index 0000000..9e2c4ca
--- /dev/null
+++ b/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());
+    });
+};
\ No newline at end of file