move connections + dev portal to user settings

webpage/index.html

@@ -46,14 +46,12 @@
 
                 <div id="user-actions">
                     <h2 id="settings">⚙</h2>
-                    <h2 id="connections">🔗</h2>
-                    <h2 id="dev-portal">🤖</h2>
                 </div>
             </div>
         </div>
         <div class="flexttb messageflex">
-            <div class="servertd servernamediv">
+            <div class="servertd channelnamediv">
-                <span id="mobileback" hidden=true></span><span id="channelname">Channel</span>
+                <span id="mobileback" hidden></span><span id="channelname">Channel</span>
             </div>
             <div id="channelw">
                 <div id="messagecontainer">

webpage/index.ts

@@ -194,14 +194,6 @@ function userSettings(){
     thisuser.showusersettings();
 }
 document.getElementById("settings").onclick=userSettings;
-function userConnections(){
-    thisuser.userConnections.show();
-}
-document.getElementById("connections").onclick=userConnections;
-function devPortal(){
-    thisuser.devPortal.show();
-}
-document.getElementById("dev-portal").onclick=devPortal;
 
 if(mobile){
     document.getElementById("channelw").onclick=function(){

webpage/localuser.ts

@@ -254,7 +254,6 @@ class Localuser{
                     break;
                 case "READY":
                     this.gottenReady(temp as readyjson);
-                    this.genusersettings();
                     break;
                 case "MESSAGE_UPDATE":
                     const message=SnowFlake.getSnowFlakeFromID(temp.d.id,Message).getObject();
@@ -825,26 +824,14 @@ class Localuser{
                 })
             }
         }
-        settings.show();
+        {
-    }
+            const connections=settings.addButton("Connections");
-    /**
+            const connectionContainer=document.createElement("div");
-        @deprecated
+            connectionContainer.id="connection-container";
-        This should be made to not be used anymore
-    **/
-    genusersettings():void{
-        const connectionContainer=document.createElement("div");
-        connectionContainer.id="connection-container";
-        this.userConnections=new Dialog(
-            ["html",
-                connectionContainer
-            ], () => {}, async () => {
-                connectionContainer.innerHTML="";
-
-                const res=await fetch(this.info.api+"/connections", {
-                    headers: this.headers
-                });
-                const json=await res.json();
 
+            fetch(this.info.api+"/connections", {
+                headers: this.headers
+            }).then(r => r.json()).then(json => {
                 Object.keys(json).sort(key => json[key].enabled ? -1 : 1).forEach(key => {
                     const connection=json[key];
 
@@ -853,68 +840,57 @@ class Localuser{
 
                     if (connection.enabled) {
                         container.addEventListener("click", async () => {
-                            const connectionRes=await fetch(this.info.api+"/connections/" + key + "/authorize", {
+                            const connectionRes=await fetch(this.info.api+"/connections/"+key+"/authorize", {
                                 headers: this.headers
                             });
                             const connectionJSON=await connectionRes.json();
                             window.open(connectionJSON.url, "_blank", "noopener noreferrer");
                         })
                     } else {
-                        container.classList.add("disabled")
+                        container.classList.add("disabled");
-                        container.title="This connection has been disabled server-side."
+                        container.title="This connection has been disabled server-side.";
                     }
 
                     connectionContainer.appendChild(container);
                 })
-            }
+            })
-        );
+            connections.addHTMLArea(connectionContainer);
+        }
+        {
+            const devPortal=settings.addButton("Developer Portal");
 
-        let appName="";
+            let appName="";
-        const appListContainer=document.createElement("div");
+            devPortal.addTextInput("Name:", value => {
-        appListContainer.id="app-list-container";
+                appName=value
-        this.devPortal=new Dialog(
+            });
-            ["vdiv",
+            devPortal.addButtonInput("", "Create application", async () => {
-                ["hdiv",
+                if (appName.trim().length == 0) {
-                    ["textbox", "Name:", appName, event => {
+                    return alert("Please enter a name for the application.");
-                        appName=event.target.value;
+                }
-                    }],
-                    ["button",
-                        "",
-                        "Create application",
-                        async () => {
-                            if (appName.trim().length == 0) return alert("Please enter a name for the application.");
-
-                            const res=await fetch(this.info.api+"/applications", {
-                                method: "POST",
-                                headers: this.headers,
-                                body: JSON.stringify({
-                                    name: appName
-                                })
-                            });
-                            const json=await res.json();
-                            this.manageApplication(json.id);
-                            this.devPortal.hide();
-                        }
-                    ]
-                ],
-                ["html",
-                    appListContainer
-                ]
-            ], () => {}, async () => {
-                appListContainer.innerHTML="";
 
                 const res=await fetch(this.info.api+"/applications", {
-                    headers: this.headers
+                    method: "POST",
+                    headers: this.headers,
+                    body: JSON.stringify({
+                        name: appName
+                    })
                 });
                 const json=await res.json();
+                this.manageApplication(json.id);
+            })
 
+            const appListContainer=document.createElement("div");
+            appListContainer.id="app-list-container";
+            fetch(this.info.api+"/applications", {
+                headers: this.headers
+            }).then(r => r.json()).then(json => {
                 json.forEach(application => {
                     const container=document.createElement("div");
 
                     if (application.cover_image) {
                         const cover=document.createElement("img");
                         cover.crossOrigin="anonymous";
-                        cover.src=this.info.cdn+"/app-icons/" + application.id + "/" + application.cover_image + ".png?size=256";
+                        cover.src=this.info.cdn+"/app-icons/"+application.id+"/"+application.cover_image+".png?size=256";
                         cover.alt="";
                         cover.loading="lazy";
                         container.appendChild(cover);
@@ -925,13 +901,14 @@ class Localuser{
                     container.appendChild(name);
 
                     container.addEventListener("click", async () => {
-                        this.devPortal.hide();
                         this.manageApplication(application.id);
                     });
                     appListContainer.appendChild(container);
                 })
-            }
+            })
-        )
+            devPortal.addHTMLArea(appListContainer);
+        }
+        settings.show();
     }
     async manageApplication(appId="") {
         const res=await fetch(this.info.api+"/applications/" + appId, {

webpage/style.css

@@ -800,7 +800,7 @@ textarea:focus-visible,
 	padding: .03in;
 }
 
-.servernamediv {
+.channelnamediv {
 	width: 100%;
 	/* max-width: 100%; */
 	border-left: solid .01in var(--black);