- Add textarea for input

- Remove channel switch button
- Integrate channel switch selection into channel name
- Fix state() warnings

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

@@ -0,0 +1,79 @@
+<script lang="ts">
+    import {isChannelLocked, channelOptions} from "$lib/shared.svelte";
+
+    let selectElement: HTMLSelectElement;
+
+    async function requestChannelSwitch(event: Event) {
+        if (!event.currentTarget)
+            return;
+
+        let element = (event.currentTarget as HTMLSelectElement);
+        let requestedChannel = element.value;
+
+        console.log(element.value)
+        element.value = '0';
+
+        const rawResponse = await fetch('/channel', {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ channel: requestedChannel })
+        });
+        // const content = await rawResponse.json();
+        // TODO: use the response
+    }
+
+    let canvas: HTMLCanvasElement | null = null;
+    function getTextWidth(text: string): number {
+        // re-use canvas object for better performance
+        if (canvas === null)
+            canvas = document.createElement("canvas");
+
+        const context: CanvasRenderingContext2D | null = canvas.getContext("2d");
+        if (!context)
+            return 0;
+
+        context.font = getCanvasFont(selectElement);
+        const metrics = context.measureText(text);
+        return metrics.width;
+    }
+
+    function getCssStyle(element: Element, prop: string): string {
+        return window.getComputedStyle(element, null).getPropertyValue(prop);
+    }
+
+    function getCanvasFont(el = document.body) {
+        const fontWeight = getCssStyle(el, 'font-weight') || 'normal';
+        const fontSize = getCssStyle(el, 'font-size') || '16px';
+        const fontFamily = getCssStyle(el, 'font-family') || 'Times New Roman';
+
+        return `${fontWeight} ${fontSize} ${fontFamily}`;
+    }
+</script>
+
+<select
+    bind:this={selectElement}
+    id="channel-select"
+    style="pointer-events: {isChannelLocked.locked ? 'none' : 'inherit'}; width: {(channelOptions.length > 1 ? getTextWidth(channelOptions[0].text) : 1) + 40}px"
+    onchange={(e) => requestChannelSwitch(e)}>
+    {#each channelOptions as channelOption}
+        {#if channelOption.preview }
+        <option selected disabled hidden value={channelOption.value}>
+            {channelOption.text}
+        </option>
+        {:else}
+        <option value={channelOption.value}>
+            {channelOption.text}
+        </option>
+        {/if}
+    {/each}
+</select>
+
+<style>
+    select {
+        border: none;
+        background-color: transparent;
+    }
+</style>

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+    let textarea: HTMLTextAreaElement;
+    let content: string = $state('');
+
+    function preventNewlines(e: KeyboardEvent) {
+        if (e.key === 'Enter') {
+            // Prevent key from creating a newline
+            e.preventDefault();
+
+            // submit the data
+            const newEvent = new Event('submit', {bubbles: true, cancelable: true});
+            if (e.currentTarget !== null) {
+                (e.currentTarget as HTMLTextAreaElement).closest('form')?.dispatchEvent(newEvent);
+            }
+        }
+
+    }
+
+    function resize() {
+        if (!textarea)
+            return;
+
+        textarea.style.height = '1px';
+        textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+</script>
+
+<textarea
+    bind:this={textarea}
+    bind:value={content}
+    oninput={() => resize()}
+    onkeydown={(e) => preventNewlines(e)}
+
+    id="chat-input"
+    autocomplete="off"
+    placeholder="Message"
+    enterkeyhint="send"
+    maxlength="500">
+</textarea>
+
+<style>
+    textarea {
+        flex-grow: 0;
+
+        font-size: 1rem;
+        border: 3px solid transparent;
+        border-radius: 20px;
+        background-color: var(--bg-input);
+
+        &:focus {
+            outline: 2px solid var(--focus-color);
+        }
+
+        width: 100%;
+        padding: 5px 20px;
+    }
+</style>