fix: don't let text input wrap.

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Talon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

frontend/src/dialogs/channel-dialog.ts

@@ -9,6 +9,7 @@ import { RemoveDialog } from "./remove-dialog";
 export class ChannelDialog extends Dialog<IChannel | null> {
     private channel: IChannel;
     private nameField: TextInput;
+    private idField: TextInput;
     private makeDefault: Button;
     private mergeButton: Button;
     private deleteButton: Button;
@@ -19,6 +20,11 @@ export class ChannelDialog extends Dialog<IChannel | null> {
         this.nameField = new TextInput("Channel name");
         this.nameField.setPosition(25, 10, 50, 10);
         this.nameField.setValue(channel.name);
+        this.idField = new TextInput("Channel ID (for use with API)");
+        this.idField.setPosition(45, 10, 50, 10);
+        this.idField.setReadonly(true);
+        this.idField.setValue(channel.id.toString());
+
         this.makeDefault = new Button("Make default");
         this.makeDefault.setPosition(20, 70, 10, 10);
         this.makeDefault.onClick(() => {
@@ -39,6 +45,7 @@ export class ChannelDialog extends Dialog<IChannel | null> {
             this.deleteChannel();
         });
         this.add(this.nameField);
+        this.add(this.idField);
         this.add(this.makeDefault);
         this.add(this.mergeButton);
         this.add(this.deleteButton);

frontend/src/ui/multiline-input.ts

@@ -12,6 +12,9 @@ export class MultilineInput extends UINode {
         this.titleElement.id = `txtarea_title_${this.id}`;
         this.textareaElement = document.createElement("textarea");
         this.textareaElement.id = `txtarea_${this.id}`;
+        this.textareaElement.style.whiteSpace = 'pre'; // Prevent text wrapping and preserve 
+        this.textareaElement.style.overflow = 'auto';  // Enable scrolling if content overflows
+        
         this.titleElement.appendChild(this.textareaElement);
         this.element.appendChild(this.titleElement);
     }

frontend/src/ui/text-input.ts

@@ -45,4 +45,9 @@ export class TextInput extends UINode {
         this.inputElement.value = value;
         return this;
     }
+
+    public setReadonly(readonly: boolean) {
+        this.inputElement.readOnly = readonly;
+        return this;
+    }
 }