More supported attatchment types and cancel uploads

.dist/channel.js

@@ -404,10 +404,24 @@ class Channel {
             headers: this.headers
         });
     }
+    async getmessage(id) {
+        if (this.messageids[id]) {
+            return this.messageids[id];
+        }
+        else {
+            const gety = await fetch(this.info.api.toString() + "/v9/channels/" + this.id + "/messages?limit=1&around=" + id, { headers: this.headers });
+            const json = await gety.json();
+            return new Message(json[0], this);
+        }
+    }
     async getHTML() {
         if (this.guild !== this.localuser.lookingguild) {
             this.guild.loadGuild();
         }
+        if (this.localuser.channelfocus && this.localuser.channelfocus.myhtml) {
+            this.localuser.channelfocus.myhtml.classList.remove("viewChannel");
+        }
+        this.myhtml.classList.add("viewChannel");
         this.guild.prevchannel = this;
         this.localuser.channelfocus = this;
         const prom = Message.wipeChanel();
@@ -420,7 +434,7 @@ class Channel {
         document.getElementById("typebox").disabled = !this.canMessage;
     }
     async putmessages() {
-        if (this.messages.length >= 100) {
+        if (this.messages.length >= 100 || this.allthewayup) {
             return;
         }
         ;
@@ -429,6 +443,9 @@ class Channel {
             headers: this.headers,
         });
         const responce = await j.json();
+        if (responce.length !== 100) {
+            this.allthewayup = true;
+        }
         for (const thing of responce) {
             const messager = new Message(thing, this);
             if (this.messageids[messager.id] === undefined) {

.dist/file.js

@@ -0,0 +1,127 @@
+import { Fullscreen } from "./fullscreen.js";
+class File {
+    owner;
+    id;
+    filename;
+    content_type;
+    width;
+    height;
+    proxy_url;
+    url;
+    size;
+    constructor(fileJSON, owner) {
+        console.log(fileJSON);
+        this.owner = owner;
+        this.id = fileJSON.id;
+        this.filename = fileJSON.filename;
+        this.content_type = fileJSON.content_type;
+        this.width = fileJSON.width;
+        this.height = fileJSON.height;
+        this.url = fileJSON.url;
+        this.proxy_url = fileJSON.proxy_url;
+        this.content_type = fileJSON.content_type;
+        this.size = fileJSON.size;
+    }
+    getHTML(temp = false) {
+        const src = this.proxy_url || this.url;
+        if (this.content_type.startsWith('image/')) {
+            const img = document.createElement("img");
+            img.classList.add("messageimg");
+            img.onclick = function () {
+                const full = new Fullscreen(["img", img.src, ["fit"]]);
+                full.show();
+            };
+            img.src = src;
+            img.height = this.height;
+            img.width = this.width;
+            return img;
+        }
+        else if (this.content_type.startsWith('video/')) {
+            const video = document.createElement("video");
+            const source = document.createElement("source");
+            source.src = src;
+            video.append(source);
+            source.type = this.content_type;
+            video.controls = !temp;
+            return video;
+        }
+        else if (this.content_type.startsWith('audio/')) {
+            const audio = document.createElement("audio");
+            const source = document.createElement("source");
+            source.src = src;
+            audio.append(source);
+            source.type = this.content_type;
+            audio.controls = !temp;
+            return audio;
+        }
+        else {
+            return this.createunknown();
+        }
+    }
+    upHTML(files, file) {
+        const div = document.createElement("div");
+        const contained = this.getHTML(true);
+        div.classList.add("containedFile");
+        div.append(contained);
+        const controls = document.createElement("div");
+        const garbage = document.createElement("button");
+        garbage.textContent = "🗑";
+        garbage.onclick = _ => {
+            div.remove();
+            files.splice(files.indexOf(file), 1);
+        };
+        controls.classList.add("controls");
+        div.append(controls);
+        controls.append(garbage);
+        return div;
+    }
+    static initFromBlob(file) {
+        return new File({
+            filename: file.name,
+            size: file.size,
+            id: null,
+            content_type: file.type,
+            width: undefined,
+            height: undefined,
+            url: URL.createObjectURL(file),
+            proxy_url: undefined
+        }, null);
+    }
+    createunknown() {
+        console.log("🗎");
+        const src = this.proxy_url || this.url;
+        const div = document.createElement("table");
+        div.classList.add("unknownfile");
+        const nametr = document.createElement("tr");
+        div.append(nametr);
+        const fileicon = document.createElement("td");
+        nametr.append(fileicon);
+        fileicon.append("🗎");
+        fileicon.classList.add("fileicon");
+        fileicon.rowSpan = 2;
+        const nametd = document.createElement("td");
+        if (src) {
+            const a = document.createElement("a");
+            a.href = src;
+            a.textContent = this.filename;
+            nametd.append(a);
+        }
+        else {
+            nametd.textContent = this.filename;
+        }
+        nametd.classList.add("filename");
+        nametr.append(nametd);
+        const sizetr = document.createElement("tr");
+        const size = document.createElement("td");
+        sizetr.append(size);
+        size.textContent = "Size:" + File.filesizehuman(this.size);
+        size.classList.add("filesize");
+        div.appendChild(sizetr);
+        return div;
+    }
+    static filesizehuman(fsize) {
+        var i = fsize == 0 ? 0 : Math.floor(Math.log(fsize) / Math.log(1024));
+        return +((fsize / Math.pow(1024, i)).toFixed(2)) * 1 + ' ' + ['Bytes', 'Kilobytes', 'Megabytes', 'Gigabytes', 'Terabytes'][i];
+    }
+}
+export { File };

.dist/index.js

@@ -208,15 +208,15 @@ function filetohtml(file) {
         return createunknownfile(file);
     }
 }
+import { File } from "./file.js";
 document.addEventListener('paste', async (e) => {
-    Array.from(e.clipboardData.files).forEach(async (file) => {
+    Array.from(e.clipboardData.files).forEach(async (f) => {
+        const file = File.initFromBlob(f);
         e.preventDefault();
-        const html = filetohtml(file);
+        const html = file.upHTML(images, f);
         pasteimage.appendChild(html);
-        const blob = URL.createObjectURL(file);
+        images.push(f);
-        images.push(file);
         imageshtml.push(html);
-        console.log(file.type);
     });
 });
 setTheme();

.dist/localuser.js

@@ -66,7 +66,11 @@ class Localuser {
             this.guildids[thing.guild_id].notisetting(thing);
         }
         for (const thing of ready.d.read_state.entries) {
-            const guild = this.resolveChannelFromID(thing.id).guild;
+            const channel = this.resolveChannelFromID(thing.id);
+            if (!channel) {
+                continue;
+            }
+            const guild = channel.guild;
             if (guild === undefined) {
                 continue;
             }
@@ -238,9 +242,11 @@ class Localuser {
         return;
     }
     resolveChannelFromID(ID) {
-        let resolve = this.guilds.find(guild => guild.channelids[ID]).channelids[ID];
+        let resolve = this.guilds.find(guild => guild.channelids[ID]);
-        resolve ??= undefined;
+        if (resolve) {
-        return resolve;
+            return resolve.channelids[ID];
+        }
+        return undefined;
     }
     updateChannel(JSON) {
         this.guildids[JSON.guild_id].updateChannel(JSON);
@@ -264,12 +270,12 @@ class Localuser {
     }
     init() {
         const location = window.location.href.split("/");
+        this.buildservers();
         if (location[3] === "channels") {
             const guild = this.loadGuild(location[4]);
             guild.loadChannel(location[5]);
             this.channelfocus = guild.channelids[location[5]];
         }
-        this.buildservers();
     }
     loaduser() {
         document.getElementById("username").textContent = this.user.username;
@@ -284,6 +290,12 @@ class Localuser {
         if (!guild) {
             guild = this.guildids["@me"];
         }
+        if (this.lookingguild) {
+            this.lookingguild.html.classList.remove("serveropen");
+        }
+        if (guild.html) {
+            guild.html.classList.add("serveropen");
+        }
         this.lookingguild = guild;
         document.getElementById("serverName").textContent = guild.properties.name;
         //console.log(this.guildids,id)
@@ -293,11 +305,18 @@ class Localuser {
     }
     buildservers() {
         const serverlist = document.getElementById("servers"); //
+        const outdiv = document.createElement("div");
         const div = document.createElement("div");
         div.textContent = "⌂";
         div.classList.add("home", "servericon");
         div["all"] = this.guildids["@me"];
-        serverlist.appendChild(div);
+        this.guildids["@me"].html = outdiv;
+        const unread = document.createElement("div");
+        unread.classList.add("unread");
+        outdiv.append(unread);
+        outdiv.appendChild(div);
+        outdiv.classList.add("servernoti");
+        serverlist.append(outdiv);
         div.onclick = function () {
             this["all"].loadGuild();
             this["all"].loadChannel();

.dist/message.js

@@ -3,7 +3,7 @@ import { User } from "./user.js";
 import { Member } from "./member.js";
 import { markdown } from "./markdown.js";
 import { Embed } from "./embed.js";
-import { Fullscreen } from "./fullscreen.js";
+import { File } from "./file.js";
 class Message {
     static contextmenu = new Contextmenu("message menu");
     owner;
@@ -67,6 +67,13 @@ class Message {
         this.owner = owner;
         this.headers = this.owner.headers;
         for (const thing of Object.keys(messagejson)) {
+            if (thing === "attachments") {
+                this.attachments = [];
+                for (const thing of messagejson.attachments) {
+                    this.attachments.push(new File(thing, this));
+                }
+                continue;
+            }
             this[thing] = messagejson[thing];
         }
         for (const thing in this.embeds) {
@@ -195,9 +202,9 @@ class Message {
             line2.classList.add("reply");
             line.classList.add("startreply");
             replyline.classList.add("replyflex");
-            fetch(this.info.api.toString() + "/v9/channels/" + this.message_reference.channel_id + "/messages?limit=1&around=" + this.message_reference.message_id, { headers: this.headers }).then(responce => responce.json()).then(responce => {
+            this.channel.getmessage(this.message_reference.message_id).then(message => {
-                const author = new User(responce[0].author, this.localuser);
+                const author = message.author;
-                reply.appendChild(markdown(responce[0].content, { stdsize: true }));
+                reply.appendChild(markdown(message.content, { stdsize: true }));
                 minipfp.src = author.getpfpsrc();
                 author.profileclick(minipfp);
                 username.textContent = author.username;
@@ -277,24 +284,7 @@ class Message {
                 console.log(this.attachments);
                 const attatch = document.createElement("tr");
                 for (const thing of this.attachments) {
-                    const array = thing.url.split("/");
+                    attatch.appendChild(thing.getHTML());
-                    array.shift();
-                    array.shift();
-                    array.shift();
-                    const src = this.info.cdn.toString() + array.join("/");
-                    if (thing.content_type.startsWith('image/')) {
-                        const img = document.createElement("img");
-                        img.classList.add("messageimg");
-                        img.onclick = function () {
-                            const full = new Fullscreen(["img", img.src, ["fit"]]);
-                            full.show();
-                        };
-                        img.src = src;
-                        attatch.appendChild(img);
-                    }
-                    else {
-                        attatch.appendChild(this.createunknown(thing.filename, thing.size, src));
-                    }
                 }
                 messagedwrap.appendChild(attatch);
             }

webpage/channel.ts

@@ -412,10 +412,23 @@ class Channel{
             headers:this.headers
         })
     }
+    async getmessage(id:string):Promise<Message>{
+        if(this.messageids[id]){
+            return this.messageids[id];
+        }else{
+            const gety=await fetch(this.info.api.toString()+"/v9/channels/"+this.id+"/messages?limit=1&around="+id,{headers:this.headers})
+            const json=await gety.json();
+            return new Message(json[0],this);
+        }
+    }
     async getHTML(){
         if(this.guild!==this.localuser.lookingguild){
             this.guild.loadGuild();
         }
+        if(this.localuser.channelfocus&&this.localuser.channelfocus.myhtml){
+            this.localuser.channelfocus.myhtml.classList.remove("viewChannel");
+        }
+        this.myhtml.classList.add("viewChannel")
         this.guild.prevchannel=this;
         this.localuser.channelfocus=this;
         const prom=Message.wipeChanel();
@@ -428,12 +441,15 @@ class Channel{
         (document.getElementById("typebox") as HTMLInputElement).disabled=!this.canMessage;
     }
     async putmessages(){
-        if(this.messages.length>=100){return};
+        if(this.messages.length>=100||this.allthewayup){return};
         const j=await fetch(this.info.api.toString()+"/channels/"+this.id+"/messages?limit=100",{
         method: 'GET',
         headers: this.headers,
         })
         const responce=await j.json();
+        if(responce.length!==100){
+            this.allthewayup=true;
+        }
         for(const thing of responce){
             const messager=new Message(thing,this)
             if(this.messageids[messager.id]===undefined){

webpage/file.ts

@@ -0,0 +1,126 @@
+import { Message } from "./message.js";
+import { Fullscreen } from "./fullscreen.js";
+type filejson= {id:string,filename:string,content_type:string,width:number,height:number,proxy_url:string|undefined,url:string,size:number};
+class File{
+    owner:Message;
+    id:string;
+    filename:string;
+    content_type:string;
+    width:number;
+    height:number;
+    proxy_url:string;
+    url:string;
+    size:number;
+    constructor(fileJSON:filejson,owner:Message){
+        console.log(fileJSON);
+        this.owner=owner;
+        this.id=fileJSON.id;
+        this.filename=fileJSON.filename;
+        this.content_type=fileJSON.content_type;
+        this.width=fileJSON.width;
+        this.height=fileJSON.height;
+        this.url=fileJSON.url;
+        this.proxy_url=fileJSON.proxy_url;
+        this.content_type=fileJSON.content_type;
+        this.size=fileJSON.size;
+    }
+    getHTML(temp:boolean=false):HTMLElement{
+        const src=this.proxy_url||this.url;
+        if(this.content_type.startsWith('image/')){
+            const img=document.createElement("img");
+            img.classList.add("messageimg");
+            img.onclick=function(){
+                const full=new Fullscreen(["img",img.src,["fit"]]);
+                full.show();
+            }
+            img.src=src;
+            img.height=this.height;
+            img.width=this.width;
+            return img;
+        }else if(this.content_type.startsWith('video/')){
+            const video=document.createElement("video");
+            const source=document.createElement("source");
+            source.src=src;
+            video.append(source);
+            source.type=this.content_type;
+            video.controls=!temp;
+            return video;
+        }else if(this.content_type.startsWith('audio/')){
+            const audio=document.createElement("audio");
+            const source=document.createElement("source");
+            source.src=src;
+            audio.append(source);
+            source.type=this.content_type;
+            audio.controls=!temp;
+            return audio;
+        }else{
+            return this.createunknown();
+        }
+    }
+    upHTML(files:Blob[],file:globalThis.File):HTMLElement{
+        const div=document.createElement("div");
+        const contained=this.getHTML(true);
+        div.classList.add("containedFile");
+        div.append(contained);
+        const controls=document.createElement("div");
+        const garbage=document.createElement("button");
+        garbage.textContent="🗑";
+        garbage.onclick=_=>{
+            div.remove();
+            files.splice(files.indexOf(file),1);
+        }
+        controls.classList.add("controls");
+        div.append(controls);
+        controls.append(garbage);
+        return div;
+    }
+    static initFromBlob(file:globalThis.File){
+        return new File({
+            filename:file.name,
+            size:file.size,
+            id:null,
+            content_type:file.type,
+            width:undefined,
+            height:undefined,
+            url:URL.createObjectURL(file),
+            proxy_url:undefined
+        },null)
+    }
+    createunknown():HTMLElement{
+        console.log("🗎")
+        const src=this.proxy_url||this.url;
+        const div=document.createElement("table");
+        div.classList.add("unknownfile");
+        const nametr=document.createElement("tr");
+        div.append(nametr);
+        const fileicon=document.createElement("td");
+        nametr.append(fileicon);
+        fileicon.append("🗎");
+        fileicon.classList.add("fileicon");
+        fileicon.rowSpan=2;
+        const nametd=document.createElement("td");
+        if(src){
+            const a=document.createElement("a");
+            a.href=src;
+            a.textContent=this.filename;
+            nametd.append(a);
+        }else{
+            nametd.textContent=this.filename;
+        }
+
+        nametd.classList.add("filename");
+        nametr.append(nametd);
+        const sizetr=document.createElement("tr");
+        const size=document.createElement("td");
+        sizetr.append(size);
+        size.textContent="Size:"+File.filesizehuman(this.size);
+        size.classList.add("filesize");
+        div.appendChild(sizetr);
+        return div;
+    }
+    static filesizehuman(fsize:number){
+        var i = fsize == 0 ? 0 : Math.floor(Math.log(fsize) / Math.log(1024));
+        return +((fsize / Math.pow(1024, i)).toFixed(2)) * 1 + ' ' + ['Bytes', 'Kilobytes', 'Megabytes', 'Gigabytes', 'Terabytes'][i];
+    }
+}
+export{File}

webpage/guild.ts

@@ -20,7 +20,7 @@ class Guild{
     position:number;
     parent_id:string;
     member:Member;
-    html:HTMLUnknownElement;
+    html:HTMLElement;
     static contextmenu=new Contextmenu("guild menu");
     static setupcontextmenu(){
         Guild.contextmenu.addbutton("Copy Guild id",function(){

webpage/index.html

@@ -10,27 +10,6 @@
     </head>
 
     <body class="Dark-theme">
-    <script type="importmap">
-        {
-            "imports": {
-                "localuser": "/localuser.js",
-                "guild": "/guild.js",
-                "direct": "/direct.js",
-                "channel":"/channel.js",
-                "message":"/message.js",
-                "audio":"/audio.js",
-                "user":"/user.js",
-                "member":"/member.js",
-                "markdown":"/markdown.js",
-                "embed":"/embed.js",
-                "contextmenu":"/contextmenu.js",
-                "role":"/role.js",
-                "permissions":"/permissions.js",
-                "fullscreen":"/fullscreen.js",
-                "login":"/login.js"
-            }
-        }
-    </script>
     <script src="/index.js" type="module"></script>
 
     <div id="loading" class="loading"><div id="centerdiv"><img src="/bitmap.svg" width="1in" height="1in"><h1>Jank Client is loading</h1><h2>This shouldn't take long</h2></div></div>

webpage/index.ts

@@ -189,7 +189,7 @@ function getguildinfo(){
 }
 
 
-const images=[];
+const images:Blob[]=[];
 const imageshtml=[];
 function createunknown(fname,fsize){
     const div=document.createElement("table");
@@ -235,17 +235,16 @@ function filetohtml(file){
         return createunknownfile(file);
     }
 }
+import { File } from "./file.js";
 document.addEventListener('paste', async (e) => {
-  Array.from(e.clipboardData.files).forEach(async (file) => {
+    Array.from(e.clipboardData.files).forEach(async (f) => {
-    e.preventDefault();
+        const file=File.initFromBlob(f);
-    const html=filetohtml(file);
+        e.preventDefault();
-    pasteimage.appendChild(html);
+        const html=file.upHTML(images,f);
-    const blob = URL.createObjectURL(file);
+        pasteimage.appendChild(html);
-    images.push(file)
+        images.push(f)
-    imageshtml.push(html);
+        imageshtml.push(html);
-
+    });
-    console.log(file.type)
-  });
 });
 
 setTheme();

webpage/localuser.ts

@@ -72,7 +72,9 @@ class Localuser{
         }
 
         for(const thing of ready.d.read_state.entries){
-            const guild=this.resolveChannelFromID(thing.id).guild;
+            const channel=this.resolveChannelFromID(thing.id);
+            if(!channel){continue;}
+            const guild=channel.guild;
             if(guild===undefined){
                 continue
             }
@@ -246,9 +248,11 @@ class Localuser{
         return;
     }
     resolveChannelFromID(ID:string):Channel{
-        let resolve=this.guilds.find(guild => guild.channelids[ID]).channelids[ID];
+        let resolve=this.guilds.find(guild => guild.channelids[ID]);
-        resolve??=undefined;
+        if(resolve){
-        return resolve;
+            return resolve.channelids[ID];
+        }
+        return undefined;
     }
     updateChannel(JSON):void{
         this.guildids[JSON.guild_id].updateChannel(JSON);
@@ -273,12 +277,13 @@ class Localuser{
     }
     init():void{
         const location=window.location.href.split("/");
+        this.buildservers();
         if(location[3]==="channels"){
             const guild=this.loadGuild(location[4]);
             guild.loadChannel(location[5]);
             this.channelfocus=guild.channelids[location[5]];
         }
-        this.buildservers();
+
     }
     loaduser():void{
         document.getElementById("username").textContent=this.user.username;
@@ -293,6 +298,12 @@ class Localuser{
         if(!guild){
             guild=this.guildids["@me"];
         }
+        if(this.lookingguild){
+            this.lookingguild.html.classList.remove("serveropen");
+        }
+        if(guild.html){
+            guild.html.classList.add("serveropen")
+        }
         this.lookingguild=guild;
         document.getElementById("serverName").textContent=guild.properties.name;
         //console.log(this.guildids,id)
@@ -302,12 +313,20 @@ class Localuser{
     }
     buildservers():void{
         const serverlist=document.getElementById("servers");//
-
+        const outdiv=document.createElement("div");
         const div=document.createElement("div");
+
         div.textContent="⌂";
         div.classList.add("home","servericon")
         div["all"]=this.guildids["@me"];
-        serverlist.appendChild(div)
+        this.guildids["@me"].html=outdiv;
+        const unread=document.createElement("div");
+        unread.classList.add("unread");
+        outdiv.append(unread);
+        outdiv.appendChild(div);
+
+        outdiv.classList.add("servernoti")
+        serverlist.append(outdiv);
         div.onclick=function(){
             this["all"].loadGuild();
             this["all"].loadChannel();

webpage/message.ts

@@ -7,6 +7,7 @@ import {Fullscreen} from "./fullscreen.js";
 import { Channel } from "./channel.js";
 import {Localuser} from "./localuser.js";
 import { Role } from "./role.js";
+import {File} from "./file.js";
 
 class Message{
     static contextmenu=new Contextmenu("message menu");
@@ -16,7 +17,7 @@ class Message{
     author:User;
     mentions:User[];
     mention_roles:Role[];
-    attachments;//probably should be its own class tbh, should be Attachments[]
+    attachments:File[];//probably should be its own class tbh, should be Attachments[]
     id:string;
     message_reference;
     type:number;
@@ -72,6 +73,13 @@ class Message{
         this.owner=owner;
         this.headers=this.owner.headers;
         for(const thing of Object.keys(messagejson)){
+            if(thing==="attachments"){
+                this.attachments=[];
+                for(const thing of messagejson.attachments){
+                    this.attachments.push(new File(thing,this));
+                }
+                continue;
+            }
             this[thing]=messagejson[thing];
         }
         for(const thing in this.embeds){
@@ -199,11 +207,9 @@ class Message{
             line2.classList.add("reply");
             line.classList.add("startreply");
             replyline.classList.add("replyflex")
-            fetch(this.info.api.toString()+"/v9/channels/"+this.message_reference.channel_id+"/messages?limit=1&around="+this.message_reference.message_id,{headers:this.headers}).then(responce=>responce.json()).then(responce=>{
+            this.channel.getmessage(this.message_reference.message_id).then(message=>{
-                const author=new User(responce[0].author,this.localuser);
+                const author=message.author;
-
+                reply.appendChild(markdown(message.content,{stdsize:true}));
-                reply.appendChild(markdown(responce[0].content,{stdsize:true}));
-
                 minipfp.src=author.getpfpsrc()
                 author.profileclick(minipfp)
                 username.textContent=author.username;
@@ -285,21 +291,7 @@ class Message{
                 console.log(this.attachments)
                 const attatch = document.createElement("tr")
                 for(const thing of this.attachments){
-                    const array=thing.url.split("/");array.shift();array.shift();array.shift();
+                    attatch.appendChild(thing.getHTML())
-                    const src=this.info.cdn.toString()+array.join("/");
-                    if(thing.content_type.startsWith('image/')){
-                        const img=document.createElement("img");
-                        img.classList.add("messageimg")
-                        img.onclick=function(){
-                            const full=new Fullscreen(["img",img.src,["fit"]]);
-                            full.show();
-                        }
-                        img.src=src;
-                        attatch.appendChild(img)
-                    }else{
-                        attatch.appendChild(this.createunknown(thing.filename,thing.size,src))
-                    }
-
                 }
                 messagedwrap.appendChild(attatch)
             }

webpage/style.css

@@ -8,6 +8,10 @@ body {
 	margin: 0;
 	padding: 0;
 }
+video{
+	max-width: 3in;
+	max-height: 4in;
+}
 .collapse{
 	width:0px !important;
 	overflow: hidden;
@@ -152,11 +156,14 @@ h2 {
 .servericon {
 	transition: border-radius .2s;
 	position: relative;
+	margin: .0in 0in 0.03in 0;
 }
 .servericon:hover {
 	border-radius: 30%;
 }
-
+.serveropen .servericon{
+	border-radius: 30%;
+}
 .contextbutton:hover {
 	background-color: var(--primary-bg);
 }
@@ -177,6 +184,7 @@ h2 {
 	vertical-align: top;
 	height: 100dvh;
 	overflow-x: hidden;
+	padding: 0.02in .05in 0.0in .05in;
 }
 
 #servers::-webkit-scrollbar {
@@ -556,8 +564,12 @@ textarea {
 .channel {
 	user-select: none;
 	cursor: pointer;
+	transition: font-weight .1s;
+}
+.viewChannel{
+	font-weight:900;
+	background: color-mix(in srgb, var(--channel-hover) 60%, transparent)
 }
-
 #servername {
 	margin-top: .1in;
 	margin-bottom: .1in;
@@ -845,17 +857,24 @@ span {
 	background-color: var(--primary-text);
 	height: .075in;
 	width: .075in;
-	transition: transform .2s, background .2s, height .2s, width .2s;
+	transition: transform .2s, background .2s, height .3s, width .2s;
-	transform: translate(-.20in, .2in);
+	transform: translate(-.14in, .2in);
 	z-index: 10;
-	border-radius: 50%;
+	border-radius: .2in;
 	border: solid;
 	border-width: .02in;
 	border-color: var(--black);
 }
-
+.servernoti:hover .unread{
+	transform: translate(-.1in, 0.15in);
+	height:.2in;
+}
+.serveropen .unread{
+	transform: translate(-.1in, 0.1in) !important;
+	height:.3in !important;
+}
 .notiunread {
-	transform: translate(0, .2in);
+	transform: translate(-.1in, .2in);
 }
 
 .pinged {
@@ -1025,3 +1044,13 @@ span {
 	overflow: hidden;
 	max-width: 100%;
 }
+.controls{
+	position:absolute;
+	top:0px;
+	right:0px;
+}
+.containedFile{
+	position:relative !important;
+	width: fit-content;
+	box-shadow:.02in .02in .05in black;
+}