update user profile stuff

.dist/index.js

@@ -165,7 +165,7 @@ document.addEventListener('paste', async (e) => {
 });
 setTheme();
 function userSettings() {
-    thisuser.usersettings.show();
+    thisuser.showusersettings();
 }
 document.getElementById("settings").onclick = userSettings;
 function userConnections() {

.dist/localuser.js

@@ -1,12 +1,12 @@
 import { Guild } from "./guild.js";
 import { Direct } from "./direct.js";
-import { Voice } from "./audio.js";
 import { User } from "./user.js";
 import { Fullscreen } from "./fullscreen.js";
-import { setTheme } from "./login.js";
 import { SnowFlake } from "./snowflake.js";
 import { Message } from "./message.js";
 import { Member } from "./member.js";
+import { Settings } from "./settings.js";
+import { MarkDown } from "./markdown.js";
 const wsCodesRetry = new Set([4000, 4003, 4005, 4007, 4008, 4009]);
 class Localuser {
     lastSequence = null;
@@ -636,71 +636,67 @@ class Localuser {
             typingtext.classList.add("hidden");
         }
     }
-    genusersettings() {
+    showusersettings() {
-        const hypotheticalProfile = document.createElement("div");
+        const settings = new Settings("Settings");
-        let file = null;
+        this.usersettings = settings;
-        let newprouns = null;
+        {
-        let newbio = null;
+            const userOptions = settings.addButton("User Settings", { ltr: true });
-        let hypouser = this.user.clone();
+            const hypotheticalProfile = document.createElement("div");
-        function regen() {
+            let file = null;
-            hypotheticalProfile.textContent = "";
+            let newpronouns = null;
-            const hypoprofile = hypouser.buildprofile(-1, -1);
+            let newbio = null;
-            hypotheticalProfile.appendChild(hypoprofile);
+            let hypouser = this.user.clone();
-        }
+            function regen() {
-        regen();
+                hypotheticalProfile.textContent = "";
-        this.usersettings = new Fullscreen(["hdiv",
+                const hypoprofile = hypouser.buildprofile(-1, -1);
-            ["vdiv",
+                hypotheticalProfile.appendChild(hypoprofile);
-                ["fileupload", "upload pfp:", function (e) {
+            }
-                        console.log(this.files[0]);
-                        file = this.files[0];
-                        const blob = URL.createObjectURL(this.files[0]);
-                        hypouser.avatar = blob;
-                        hypouser.hypotheticalpfp = true;
-                        regen();
-                    }],
-                ["textbox", "Pronouns:", this.user.pronouns, function (e) {
-                        console.log(this.value);
-                        hypouser.pronouns = this.value;
-                        newprouns = this.value;
-                        regen();
-                    }],
-                ["mdbox", "Bio:", this.user.bio.rawString, function (e) {
-                        console.log(this.value);
-                        hypouser.bio = this.value;
-                        newbio = this.value;
-                        regen();
-                    }],
-                ["button", "update user content:", "submit", () => {
-                        if (file !== null) {
-                            this.updatepfp(file);
-                        }
-                        if (newprouns !== null) {
-                            this.updatepronouns(newprouns);
-                        }
-                        if (newbio !== null) {
-                            this.updatebio(newbio);
-                        }
-                    }],
-                ["select", "Theme:", ["Dark", "Light", "WHITE"], e => {
-                        localStorage.setItem("theme", ["Dark", "Light", "WHITE"][e.target.selectedIndex]);
-                        setTheme();
-                    }, ["Dark", "Light", "WHITE"].indexOf(localStorage.getItem("theme"))],
-                ["select", "Notification sound:", Voice.sounds, e => {
-                        Voice.setNotificationSound(Voice.sounds[e.target.selectedIndex]);
-                        Voice.noises(Voice.sounds[e.target.selectedIndex]);
-                    }, Voice.sounds.indexOf(Voice.getNotificationSound())]
-            ],
-            ["vdiv",
-                ["html", hypotheticalProfile]
-            ]
-        ], _ => { }, function () {
-            console.log(this);
-            hypouser = this.user.clone();
             regen();
-            file = null;
+            const settingsLeft = userOptions.addOptions("");
-            newprouns = null;
+            const settingsRight = userOptions.addOptions("");
-            newbio = null;
+            settingsRight.addHTMLArea(hypotheticalProfile);
-        }.bind(this));
+            const finput = settingsLeft.addFileInput("Upload pfp:", _ => {
+                if (file) {
+                    this.updatepfp(file);
+                }
+            });
+            finput.watchForChange(_ => {
+                if (_.length) {
+                    file = _[0];
+                    const blob = URL.createObjectURL(file);
+                    hypouser.avatar = blob;
+                    hypouser.hypotheticalpfp = true;
+                    regen();
+                }
+            });
+            const pronounbox = settingsLeft.addTextInput("Pronouns", _ => {
+                if (newpronouns) {
+                    this.updatepronouns(newpronouns);
+                }
+            }, { initText: this.user.pronouns });
+            pronounbox.watchForChange(_ => {
+                hypouser.pronouns = _;
+                newpronouns = _;
+                regen();
+            });
+            const bioBox = settingsLeft.addMDInput("Bio:", _ => {
+                if (newbio) {
+                    this.updatebio(newbio);
+                }
+            }, { initText: this.user.bio.rawString });
+            bioBox.watchForChange(_ => {
+                newbio = _;
+                hypouser.bio = new MarkDown(_, this);
+                regen();
+            });
+        }
+        settings.show();
+    }
+    /**
+        @deprecated
+        This should be made to not be used anymore
+    **/
+    genusersettings() {
         const connectionContainer = document.createElement("div");
         connectionContainer.id = "connection-container";
         this.userConnections = new Fullscreen(["html",
@@ -942,7 +938,8 @@ class Localuser {
     //---------- resolving members code -----------
     waitingmembers = new Map();
     async resolvemember(id, guildid) {
-        console.warn("this function is currently non-functional, either due to a bug in the client or the server, it's currently unclear, use at your own risk");
+        console.warn("this function is currently non-functional due to it not being implemented in the server");
+        throw new Error("Not implemented on the server side and not fully implemented, do not use");
         if (!this.waitingmembers.has(guildid)) {
             this.waitingmembers.set(guildid, new Map());
         }

.dist/member.js

@@ -101,7 +101,6 @@ class Member {
         }
         const prom1 = fetch(guild.info.api.toString() + "/users/" + id + "/profile?with_mutual_guilds=true&with_mutual_friends_count=true&guild_id=" + guild.snowflake, { headers: guild.headers });
         prom1.catch(_ => { console.log(_); });
-        guild.localuser.resolvemember(id?.id, guild.id);
         const promoise = prom1.then(_ => _.json()).then(json => {
             const memb = new Member(json, guild);
             Member.already[guild.id][id] = memb;

.dist/settings.js

@@ -23,6 +23,7 @@ class Buttons {
         bigtable.classList.add("flexltr");
         this.bigtable = bigtable;
         const htmlarea = document.createElement("div");
+        htmlarea.classList.add("flexgrow");
         const buttonTable = document.createElement("div");
         buttonTable.classList.add("flexttb", "settingbuttons");
         for (const thing of this.buttons) {
@@ -63,6 +64,8 @@ class Buttons {
         this.bigtable.append(html);
     }
     save() { }
+    submit() {
+    }
 }
 class PermissionToggle {
     rolejson;
@@ -130,6 +133,122 @@ class PermissionToggle {
         }
         return div;
     }
+    submit() {
+    }
+}
+class TextInput {
+    label;
+    owner;
+    onSubmit;
+    textContent;
+    input;
+    constructor(label, onSubmit, owner, { initText = "" } = {}) {
+        this.label = label;
+        this.textContent = initText;
+        this.owner = owner;
+        this.onSubmit = onSubmit;
+    }
+    generateHTML() {
+        const div = document.createElement("div");
+        const span = document.createElement("span");
+        span.textContent = this.label;
+        div.append(span);
+        const input = document.createElement("input");
+        input.value = this.textContent;
+        input.type = "text";
+        input.oninput = this.onChange.bind(this);
+        this.input = new WeakRef(input);
+        div.append(input);
+        return div;
+    }
+    onChange(ev) {
+        this.owner.changed();
+        const value = this.input.deref().value;
+        this.onchange(value);
+        this.textContent = value;
+    }
+    onchange = _ => { };
+    watchForChange(func) {
+        this.onchange = func;
+    }
+    submit() {
+        this.onSubmit(this.textContent);
+    }
+}
+class MDInput {
+    label;
+    owner;
+    onSubmit;
+    textContent;
+    input;
+    constructor(label, onSubmit, owner, { initText = "" } = {}) {
+        this.label = label;
+        this.textContent = initText;
+        this.owner = owner;
+        this.onSubmit = onSubmit;
+    }
+    generateHTML() {
+        const div = document.createElement("div");
+        const span = document.createElement("span");
+        span.textContent = this.label;
+        div.append(span);
+        div.append(document.createElement("br"));
+        const input = document.createElement("textarea");
+        input.value = this.textContent;
+        input.oninput = this.onChange.bind(this);
+        this.input = new WeakRef(input);
+        div.append(input);
+        return div;
+    }
+    onChange(ev) {
+        this.owner.changed();
+        const value = this.input.deref().value;
+        this.onchange(value);
+        this.textContent = value;
+    }
+    onchange = _ => { };
+    watchForChange(func) {
+        this.onchange = func;
+    }
+    submit() {
+        this.onSubmit(this.textContent);
+    }
+}
+class FileInput {
+    label;
+    owner;
+    onSubmit;
+    input;
+    constructor(label, onSubmit, owner, {} = {}) {
+        this.label = label;
+        this.owner = owner;
+        this.onSubmit = onSubmit;
+    }
+    generateHTML() {
+        const div = document.createElement("div");
+        const span = document.createElement("span");
+        span.textContent = this.label;
+        div.append(span);
+        const input = document.createElement("input");
+        input.type = "file";
+        input.oninput = this.onChange.bind(this);
+        this.input = new WeakRef(input);
+        div.append(input);
+        return div;
+    }
+    onChange(ev) {
+        this.owner.changed();
+        if (this.onchange) {
+            this.onchange(this.input.deref().files);
+        }
+    }
+    onchange = null;
+    watchForChange(func) {
+        this.onchange = func;
+    }
+    submit() {
+        this.onSubmit(this.input.deref().files);
+    }
 }
 class RoleList extends Buttons {
     permissions;
@@ -174,28 +293,73 @@ class RoleList extends Buttons {
         this.onchange(this.curid, this.permission);
     }
 }
+class HtmlArea {
+    submit;
+    html;
+    constructor(html, submit) {
+        this.submit = submit;
+        this.html = html;
+    }
+    generateHTML() {
+        if (this.html instanceof Function) {
+            return this.html();
+        }
+        else {
+            return this.html;
+        }
+    }
+}
 class Options {
     name;
     haschanged = false;
     options;
     owner;
-    constructor(name, owner) {
+    ltr;
+    constructor(name, owner, { ltr = false } = {}) {
         this.name = name;
         this.options = [];
         this.owner = owner;
+        this.ltr = ltr;
     }
     addPermissionToggle(roleJSON, permissions) {
         this.options.push(new PermissionToggle(roleJSON, permissions, this));
     }
+    addOptions(name, { ltr = false } = {}) {
+        const options = new Options(name, this, { ltr });
+        this.options.push(options);
+        return options;
+    }
+    addFileInput(label, onSubmit, {} = {}) {
+        const FI = new FileInput(label, onSubmit, this, {});
+        this.options.push(FI);
+        return FI;
+    }
+    addTextInput(label, onSubmit, { initText = "" } = {}) {
+        const textInput = new TextInput(label, onSubmit, this, { initText });
+        this.options.push(textInput);
+        return textInput;
+    }
+    addMDInput(label, onSubmit, { initText = "" } = {}) {
+        const mdInput = new MDInput(label, onSubmit, this, { initText });
+        this.options.push(mdInput);
+        return mdInput;
+    }
+    addHTMLArea(html, submit = () => { }) {
+        const htmlarea = new HtmlArea(html, submit);
+        this.options.push(htmlarea);
+        return htmlarea;
+    }
     generateHTML() {
         const div = document.createElement("div");
         div.classList.add("titlediv");
-        const title = document.createElement("h2");
+        if (this.name !== "") {
-        title.textContent = this.name;
+            const title = document.createElement("h2");
-        div.append(title);
+            title.textContent = this.name;
-        title.classList.add("settingstitle");
+            div.append(title);
+            title.classList.add("settingstitle");
+        }
         const table = document.createElement("div");
-        table.classList.add("flexttb", "flexspace");
+        table.classList.add(this.ltr ? "flexltr" : "flexttb", "flexspace");
         for (const thing of this.options) {
             table.append(thing.generateHTML());
         }
@@ -203,6 +367,10 @@ class Options {
         return div;
     }
     changed() {
+        if (this.owner instanceof Options) {
+            this.owner.changed();
+            return;
+        }
         if (!this.haschanged) {
             const div = document.createElement("div");
             div.classList.add("flexltr", "savediv");
@@ -215,11 +383,19 @@ class Options {
             this.haschanged = true;
             this.owner.changed(div);
             button.onclick = _ => {
-                this.owner.save();
+                if (this.owner instanceof Buttons) {
+                    this.owner.save();
+                }
                 div.remove();
+                this.submit();
             };
         }
     }
+    submit() {
+        for (const thing of this.options) {
+            thing.submit();
+        }
+    }
 }
 class Settings extends Buttons {
     static Buttons = Buttons;
@@ -228,8 +404,8 @@ class Settings extends Buttons {
     constructor(name) {
         super(name);
     }
-    addButton(name) {
+    addButton(name, { ltr = false } = {}) {
-        const options = new Options(name, this);
+        const options = new Options(name, this, { ltr });
         this.add(name, options);
         return options;
     }

webpage/index.ts

@@ -184,7 +184,7 @@ document.addEventListener('paste', async (e) => {
 setTheme();
 
 function userSettings(){
-    thisuser.usersettings.show();
+    thisuser.showusersettings();
 }
 document.getElementById("settings").onclick=userSettings;
 function userConnections(){

webpage/localuser.ts

@@ -9,6 +9,8 @@ import { SnowFlake } from "./snowflake.js";
 import { Message } from "./message.js";
 import { channeljson, guildjson, memberjson, readyjson, userjson } from "./jsontypes.js";
 import { Member } from "./member.js";
+import { Settings } from "./settings.js";
+import { MarkDown } from "./markdown.js";
 
 const wsCodesRetry=new Set([4000,4003,4005,4007,4008,4009]);
 
@@ -20,7 +22,7 @@ class Localuser{
     initialized:boolean;
     info;
     headers:{"Content-type":string,Authorization:string};
-    usersettings:Fullscreen;
+    usersettings:Settings;
     userConnections:Fullscreen;
     devPortal:Fullscreen;
     ready:readyjson;
@@ -658,74 +660,69 @@ class Localuser{
             typingtext.classList.add("hidden");
         }
     }
-    genusersettings():void{
+    showusersettings(){
-        const hypotheticalProfile=document.createElement("div");
+        const settings=new Settings("Settings");
-        let file=null;
+        this.usersettings=settings;
-        let newprouns=null;
+        {
-        let newbio=null;
+            const userOptions=settings.addButton("User Settings",{ltr:true});
-        let hypouser=this.user.clone();
+            const hypotheticalProfile=document.createElement("div");
-        function regen(){
+            let file=null;
-            hypotheticalProfile.textContent="";
+            let newpronouns=null;
-            const hypoprofile=hypouser.buildprofile(-1,-1);
+            let newbio=null;
+            let hypouser=this.user.clone();
+            function regen(){
+                hypotheticalProfile.textContent="";
+                const hypoprofile=hypouser.buildprofile(-1,-1);
 
-            hypotheticalProfile.appendChild(hypoprofile)
+                hypotheticalProfile.appendChild(hypoprofile)
-        }
+            }
-        regen();
+            regen();
-        this.usersettings=new Fullscreen(
+            const settingsLeft=userOptions.addOptions("");
-        ["hdiv",
+            const settingsRight=userOptions.addOptions("");
-            ["vdiv",
+            settingsRight.addHTMLArea(hypotheticalProfile);
-                ["fileupload","upload pfp:",function(e){
+
-                    console.log(this.files[0])
+            const finput=settingsLeft.addFileInput("Upload pfp:",_=>{
-                    file=this.files[0];
+                if(file){
-                    const blob = URL.createObjectURL(this.files[0]);
+                    this.updatepfp(file)
+                }
+            });
+            finput.watchForChange(_=>{
+                if(_.length){
+                    file=_[0];
+                    const blob = URL.createObjectURL(file);
                     hypouser.avatar = blob;
                     hypouser.hypotheticalpfp=true;
                     regen();
-                }],
+                }
-                ["textbox","Pronouns:",this.user.pronouns,function(e){
+            });
-                    console.log(this.value);
+            const pronounbox=settingsLeft.addTextInput("Pronouns",_=>{
-                    hypouser.pronouns=this.value;
+                if(newpronouns){
-                    newprouns=this.value;
+                    this.updatepronouns(newpronouns);
-                    regen();
+                }
-                }],
+            },{initText:this.user.pronouns});
-                ["mdbox","Bio:",this.user.bio.rawString,function(e){
+            pronounbox.watchForChange(_=>{
-                    console.log(this.value);
+                hypouser.pronouns=_;
-                    hypouser.bio=this.value;
+                newpronouns=_;
-                    newbio=this.value;
+                regen();
-                    regen();
+            });
-                }],
+            const bioBox=settingsLeft.addMDInput("Bio:",_=>{
-                ["button","update user content:","submit",()=>{
+                if(newbio){
-                    if(file!==null){
+                    this.updatebio(newbio);
-                        this.updatepfp(file);
+                }
-                    }
+            },{initText:this.user.bio.rawString});
-                    if(newprouns!==null){
+            bioBox.watchForChange(_=>{
-                        this.updatepronouns(newprouns);
+                newbio=_;
-                    }
+                hypouser.bio=new MarkDown(_,this);
-                    if(newbio!==null){
+                regen();
-                        this.updatebio(newbio);
+            })
-                    }
+        }
-                }],
+        settings.show();
-                ["select","Theme:",["Dark","Light","WHITE"],e=>{
+    }
-                    localStorage.setItem("theme",["Dark","Light","WHITE"][e.target.selectedIndex]);
+    /**
-                    setTheme();
+        @deprecated
-                },["Dark","Light","WHITE"].indexOf(localStorage.getItem("theme"))],
+        This should be made to not be used anymore
-                ["select","Notification sound:",Voice.sounds,e=>{
+    **/
-                    Voice.setNotificationSound(Voice.sounds[e.target.selectedIndex]);
+    genusersettings():void{
-                    Voice.noises(Voice.sounds[e.target.selectedIndex]);
-                },Voice.sounds.indexOf(Voice.getNotificationSound())]
-            ],
-            ["vdiv",
-                ["html",hypotheticalProfile]
-            ]
-        ],_=>{},function(this:Localuser){
-            console.log(this);
-            hypouser=this.user.clone();
-            regen();
-            file=null;
-            newprouns=null;
-            newbio=null;
-        }.bind(this))
-
         const connectionContainer=document.createElement("div");
         connectionContainer.id="connection-container";
         this.userConnections=new Fullscreen(
@@ -986,7 +983,8 @@ class Localuser{
     //---------- resolving members code -----------
     waitingmembers:Map<string,Map<string,(returns:memberjson|undefined)=>void>>=new Map();
     async resolvemember(id:string,guildid:string):Promise<memberjson|undefined>{
-        console.warn("this function is currently non-functional, either due to a bug in the client or the server, it's currently unclear, use at your own risk");
+        console.warn("this function is currently non-functional due to it not being implemented in the server");
+        throw new Error("Not implemented on the server side and not fully implemented, do not use");
         if(!this.waitingmembers.has(guildid)){
             this.waitingmembers.set(guildid,new Map());
         }

webpage/login.html

@@ -15,13 +15,13 @@
 <form id="form" submit="check(e)">
     <label for="instance"><b>Instance:</b></label><br>
     <p id="verify"></p>
-    <input type="text" placeholder="Instance URL" name="instance" value="https://spacebar.chat/" id="instancein" required><br><br>
+    <input type="text" placeholder="Instance URL" name="instance" id="instance" value="https://spacebar.chat/" id="instancein" required><br><br>
 
     <label for="uname"><b>Email:</b></label><br>
-    <input type="text" placeholder="Enter email address" name="uname" required><br><br>
+    <input type="text" placeholder="Enter email address" name="uname" id="uname" required><br><br>
 
     <label for="psw"><b>Password:</b></label><br>
-    <input type="password" placeholder="Enter Password" name="psw" required><br><br><br><br>
+    <input type="password" placeholder="Enter Password" name="psw" id="psw" required><br><br><br><br>
     <p class="wrongred" id="wrong"></p>
 
     <div id="h-captcha">

webpage/member.ts

@@ -94,7 +94,6 @@ class Member{
         }
         const prom1= fetch(guild.info.api.toString()+"/users/"+id+"/profile?with_mutual_guilds=true&with_mutual_friends_count=true&guild_id="+guild.snowflake,{headers:guild.headers})
         prom1.catch(_=>{console.log(_)})
-        guild.localuser.resolvemember(id?.id,guild.id);
         const promoise=prom1.then(_=>_.json()).then(json=>{
             const memb=new Member(json,guild);
             Member.already[guild.id][id]=memb;

webpage/register.html

@@ -16,30 +16,30 @@
     <div>
         <label for="instance"><b>Instance:</b></label><br>
         <p id="verify"></p>
-        <input type="text" placeholder="Instance URL" name="instance" value="https://spacebar.chat/" id="instancein" required>
+        <input type="text" placeholder="Instance URL" id="instance" name="instance" value="https://spacebar.chat/" id="instancein" required>
     </div>
     <div>
         <label for="uname"><b>Email:</b></label><br>
-        <input type="text" placeholder="Enter Email" name="email" required>
+        <input type="text" placeholder="Enter Email" name="email" id="email" required>
     </div>
 
     <div>
         <label for="uname"><b>Username:</b></label><br>
-        <input type="text" placeholder="Enter Username" name="uname" required>
+        <input type="text" placeholder="Enter Username" name="uname" id="uname" required>
     </div>
     <div>
         <label for="psw"><b>Password:</b></label><br>
-        <input type="password" placeholder="Enter Password" name="psw" required>
+        <input type="password" placeholder="Enter Password" name="psw" id="psw" required>
     </div>
 
     <div>
         <label for="psw2"><b>Enter password again:</b></label><br>
-        <input type="password" placeholder="Enter Password Again" name="psw2" required>
+        <input type="password" placeholder="Enter Password Again" name="psw2" id="psw2" required>
     </div>
 
     <div>
         <label for="date"><b>Date of birth:</b></label><br>
-        <input type="date" id="start" name="date"/>
+        <input type="date" id="date" name="date"/>
     </div>
 
     <div>

webpage/settings.ts

@@ -2,8 +2,11 @@ import { Permissions } from "./permissions.js";
 import { Guild } from "./guild.js";
 import { SnowFlake } from "./snowflake.js";
 import { Role } from "./role.js";
-
+interface OptionsElement {
-class Buttons{
+  generateHTML():HTMLElement;
+  submit:()=>void;
+}
+class Buttons implements OptionsElement{
     readonly name:string;
     readonly buttons:[string,Options|string][];
     bigtable:HTMLDivElement;
@@ -23,7 +26,7 @@ class Buttons{
         bigtable.classList.add("flexltr");
         this.bigtable=bigtable;
         const htmlarea=document.createElement("div");
-
+        htmlarea.classList.add("flexgrow");
         const buttonTable=document.createElement("div");
         buttonTable.classList.add("flexttb","settingbuttons");
         for(const thing of this.buttons){
@@ -63,9 +66,12 @@ class Buttons{
         this.bigtable.append(html);
     }
     save(){}
+    submit(){
+
+    }
 }
 
-class PermissionToggle{
+class PermissionToggle implements OptionsElement{
     readonly rolejson:{name:string,readableName:string,description:string};
     permissions:Permissions;
     owner:Options;
@@ -126,6 +132,123 @@ class PermissionToggle{
         }
         return div;
     }
+    submit(){
+
+    }
+}
+class TextInput implements OptionsElement{
+    readonly label:string;
+    readonly owner:Options;
+    readonly onSubmit:(str:string)=>void;
+    textContent:string;
+    input:WeakRef<HTMLInputElement>
+    constructor(label:string,onSubmit:(str:string)=>void,owner:Options,{initText=""}={}){
+        this.label=label;
+        this.textContent=initText;
+        this.owner=owner;
+        this.onSubmit=onSubmit;
+    }
+    generateHTML():HTMLDivElement{
+        const div=document.createElement("div");
+        const span=document.createElement("span");
+        span.textContent=this.label;
+        div.append(span);
+        const input=document.createElement("input");
+        input.value=this.textContent;
+        input.type="text";
+        input.oninput=this.onChange.bind(this);
+        this.input=new WeakRef(input);
+        div.append(input);
+        return div;
+    }
+    private onChange(ev:Event){
+        this.owner.changed();
+        const value=this.input.deref().value as string;
+        this.onchange(value);
+        this.textContent=value;
+    }
+    onchange:(str:string)=>void=_=>{};
+    watchForChange(func:(str:string)=>void){
+        this.onchange=func;
+    }
+    submit(){
+        this.onSubmit(this.textContent);
+    }
+}
+class MDInput implements OptionsElement{
+    readonly label:string;
+    readonly owner:Options;
+    readonly onSubmit:(str:string)=>void;
+    textContent:string;
+    input:WeakRef<HTMLTextAreaElement>
+    constructor(label:string,onSubmit:(str:string)=>void,owner:Options,{initText=""}={}){
+        this.label=label;
+        this.textContent=initText;
+        this.owner=owner;
+        this.onSubmit=onSubmit;
+    }
+    generateHTML():HTMLDivElement{
+        const div=document.createElement("div");
+        const span=document.createElement("span");
+        span.textContent=this.label;
+        div.append(span);
+        div.append(document.createElement("br"));
+        const input=document.createElement("textarea");
+        input.value=this.textContent;
+        input.oninput=this.onChange.bind(this);
+        this.input=new WeakRef(input);
+        div.append(input);
+        return div;
+    }
+    onChange(ev:Event){
+        this.owner.changed();
+        const value=this.input.deref().value as string;
+        this.onchange(value);
+        this.textContent=value;
+    }
+    onchange:(str:string)=>void=_=>{};
+    watchForChange(func:(str:string)=>void){
+        this.onchange=func;
+    }
+    submit(){
+        this.onSubmit(this.textContent);
+    }
+}
+class FileInput implements OptionsElement{
+    readonly label:string;
+    readonly owner:Options;
+    readonly onSubmit:(str:FileList)=>void;
+    input:WeakRef<HTMLInputElement>
+    constructor(label:string,onSubmit:(str:FileList)=>void,owner:Options,{}={}){
+        this.label=label;
+        this.owner=owner;
+        this.onSubmit=onSubmit;
+    }
+    generateHTML():HTMLDivElement{
+        const div=document.createElement("div");
+        const span=document.createElement("span");
+        span.textContent=this.label;
+        div.append(span);
+        const input=document.createElement("input");
+        input.type="file";
+        input.oninput=this.onChange.bind(this);
+        this.input=new WeakRef(input);
+        div.append(input);
+        return div;
+    }
+    onChange(ev:Event){
+        this.owner.changed();
+        if(this.onchange){
+            this.onchange(this.input.deref().files);
+        }
+    }
+    onchange:(str:FileList)=>void=null;
+    watchForChange(func:(str:FileList)=>void){
+        this.onchange=func;
+    }
+    submit(){
+        this.onSubmit(this.input.deref().files);
+    }
 }
 class RoleList extends Buttons{
     readonly permissions:[SnowFlake<Role>,Permissions][];
@@ -170,30 +293,73 @@ class RoleList extends Buttons{
         this.onchange(this.curid,this.permission);
     }
 }
-class Options{
+class HtmlArea implements OptionsElement{
+    submit: () => void;
+    html:(()=>HTMLElement)|HTMLElement;
+    constructor(html:(()=>HTMLElement)|HTMLElement,submit:()=>void){
+        this.submit=submit;
+        this.html=html;
+    }
+    generateHTML(): HTMLElement {
+        if(this.html instanceof Function){
+            return this.html();
+        }else{
+            return this.html;
+        }
+    }
+}
+class Options implements OptionsElement{
     name:string;
     haschanged=false;
-    readonly options:(PermissionToggle|Buttons|RoleList)[];
+    readonly options:OptionsElement[];
-    readonly owner:Buttons;
+    readonly owner:Buttons|Options;
-
+    readonly ltr:boolean;
-    constructor(name:string,owner:Buttons){
+    constructor(name:string,owner:Buttons|Options,{ltr=false}={}){
         this.name=name;
         this.options=[];
         this.owner=owner;
+        this.ltr=ltr;
 
     }
     addPermissionToggle(roleJSON:PermissionToggle["rolejson"],permissions:Permissions){
         this.options.push(new PermissionToggle(roleJSON,permissions,this));
     }
+    addOptions(name:string,{ltr=false}={}){
+        const options=new Options(name,this,{ltr});
+        this.options.push(options);
+        return options;
+    }
+    addFileInput(label:string,onSubmit:(files:FileList)=>void,{}={}){
+        const FI=new FileInput(label,onSubmit,this,{});
+        this.options.push(FI);
+        return FI;
+    }
+    addTextInput(label:string,onSubmit:(str:string)=>void,{initText=""}={}){
+        const textInput=new TextInput(label,onSubmit,this,{initText});
+        this.options.push(textInput);
+        return textInput;
+    }
+    addMDInput(label:string,onSubmit:(str:string)=>void,{initText=""}={}){
+        const mdInput=new MDInput(label,onSubmit,this,{initText});
+        this.options.push(mdInput);
+        return mdInput;
+    }
+    addHTMLArea(html:(()=>HTMLElement)|HTMLElement,submit:()=>void=()=>{}){
+        const htmlarea=new HtmlArea(html,submit);
+        this.options.push(htmlarea);
+        return htmlarea;
+    }
     generateHTML():HTMLElement{
         const div=document.createElement("div");
         div.classList.add("titlediv");
-        const title=document.createElement("h2");
+        if(this.name!==""){
-        title.textContent=this.name;
+            const title=document.createElement("h2");
-        div.append(title);
+            title.textContent=this.name;
-        title.classList.add("settingstitle")
+            div.append(title);
+            title.classList.add("settingstitle");
+        }
         const table=document.createElement("div");
-        table.classList.add("flexttb","flexspace");
+        table.classList.add(this.ltr?"flexltr":"flexttb","flexspace");
         for(const thing of this.options){
             table.append(thing.generateHTML());
         }
@@ -201,7 +367,10 @@ class Options{
         return div;
     }
     changed(){
-
+        if(this.owner instanceof Options){
+            this.owner.changed();
+            return;
+        }
         if(!this.haschanged){
             const div=document.createElement("div");
             div.classList.add("flexltr","savediv");
@@ -215,15 +384,21 @@ class Options{
             this.owner.changed(div);
 
             button.onclick=_=>{
-                this.owner.save();
+                if(this.owner instanceof Buttons){
+                    this.owner.save();
+                }
                 div.remove();
+                this.submit();
             }
         }
     }
+    submit(){
+        for(const thing of this.options){
+            thing.submit();
+        }
+    }
 }
 
-
-
 class Settings extends Buttons{
     static readonly Buttons=Buttons;
     static readonly Options=Options;
@@ -231,8 +406,8 @@ class Settings extends Buttons{
     constructor(name:string){
         super(name);
     }
-    addButton(name:string):Options{
+    addButton(name:string,{ltr=false}={}):Options{
-        const options=new Options(name,this);
+        const options=new Options(name,this,{ltr});
         this.add(name,options);
         return options;
     }
@@ -262,5 +437,6 @@ class Settings extends Buttons{
         this.html=null;
     }
 }
+
 export {Settings,RoleList}
 

webpage/style.css

@@ -70,6 +70,8 @@ th {
 	max-height: 100%;
 	display: flex;
 	flex-direction: column;
+	align-content: stretch;
+	align-items: stretch;
 }
 
 .messagediv:hover {
@@ -745,6 +747,7 @@ textarea:focus-visible,
 	align-items: center;
 	padding: .02in;
 	box-sizing: border-box;
+	flex-grow: 0;
 }
 
 #channels-td {
@@ -1223,17 +1226,15 @@ span {
 	padding: 0in;
 	overflow: hidden;
 }
-.Buttons{
-	background:var(--primary-bg);
-	position: relative;
-}
 .flexltr{
 	display:flex;
 	flex-wrap: nowrap;
 	flex-direction: row;
 	max-height: 100%;
 	overflow: auto;
-	flex-shrink: 0;
+	flex-shrink: 1;
+	flex-grow: 1;
+	align-items: stretch;
 }
 .flexttb{
 	display: flex;
@@ -1247,9 +1248,11 @@ span {
 }
 .settingbuttons{
 	padding-top:.075in;
-	width: 4in;
+	width: 1.5in;
 	border-right: solid var(--message-bg-hover);
 	gap:.04in;
+	flex-grow: 0;
+	flex-shrink: 0;
 }
 .setting{
 	background:var(--user-info-bg);
@@ -1269,6 +1272,7 @@ span {
 	height:100%;
 	display: flex;
 	flex-direction: column;
+	/* width: 100%; */
 }
 .settingstitle{
 	font-weight:900;
@@ -1582,6 +1586,7 @@ form div{
 	flex-shrink: 1;
 	flex-grow: 1;
 }
+
 .reactionCount{
 	/* position:absolute; */
 	font-size:.125in;
@@ -1596,6 +1601,9 @@ form div{
 }
 .reactiondiv{
 	
+}
+.flexgrow{
+	flex-grow:1;
 }
 .meReacted{
 	background:var(--channels-bg) !important;
@@ -1618,4 +1626,13 @@ form div{
 	}
 ;
 	padding: .03in;
-}
+}
+.Buttons{
+	background:var(--primary-bg);
+	position: relative;
+	height: 100%;
+	/* box-sizing: border-box; */
+	display: flex;
+	align-content: stretch;
+	align-items: stretch;
+}