more better right click menus

src/webpage/contextmenu.ts

@@ -101,8 +101,14 @@ class ContextButton<x, y> implements menuPart<x, y> {
 	}
 }
 class Seperator<x, y> implements menuPart<x, y> {
-	makeContextHTML(_obj1: x, _obj2: y, menu: HTMLDivElement): void {
-		menu.append(document.createElement("hr"));
+	private visable?: (obj1: x, obj2: y) => boolean;
+	constructor(visable?: (obj1: x, obj2: y) => boolean) {
+		this.visable = visable;
+	}
+	makeContextHTML(obj1: x, obj2: y, menu: HTMLDivElement): void {
+		if (!this.visable || this.visable(obj1, obj2)) {
+			menu.append(document.createElement("hr"));
+		}
 	}
 }
 class Contextmenu<x, y> {
@@ -139,8 +145,8 @@ class Contextmenu<x, y> {
 	) {
 		this.buttons.push(new ContextButton(text, onClick, addProps));
 	}
-	addSeperator() {
-		this.buttons.push(new Seperator());
+	addSeperator(visable?: (obj1: x, obj2: y) => boolean) {
+		this.buttons.push(new Seperator(visable));
 	}
 	private makemenu(x: number, y: number, addinfo: x, other: y) {
 		const div = document.createElement("div");

src/webpage/direct.ts

@@ -342,13 +342,6 @@ class Group extends Channel {
 	user: User;
 	static contextmenu = new Contextmenu<Group, undefined>("channel menu");
 	static setupcontextmenu() {
-		this.contextmenu.addButton(
-			() => I18n.getTranslation("DMs.copyId"),
-			function (this: Group) {
-				navigator.clipboard.writeText(this.id);
-			},
-		);
-
 		this.contextmenu.addButton(
 			() => I18n.getTranslation("DMs.markRead"),
 			function (this: Group) {
@@ -356,19 +349,32 @@ class Group extends Channel {
 			},
 		);
 
+		this.contextmenu.addSeperator();
+
 		this.contextmenu.addButton(
 			() => I18n.getTranslation("DMs.close"),
 			function (this: Group) {
 				this.deleteChannel();
 			},
+			{
+				color: "red",
+			},
 		);
 
+		this.contextmenu.addSeperator();
+
 		this.contextmenu.addButton(
 			() => I18n.getTranslation("user.copyId"),
 			function () {
 				navigator.clipboard.writeText(this.user.id);
 			},
 		);
+		this.contextmenu.addButton(
+			() => I18n.getTranslation("DMs.copyId"),
+			function (this: Group) {
+				navigator.clipboard.writeText(this.id);
+			},
+		);
 	}
 	constructor(json: dirrectjson, owner: Direct) {
 		super(-1, owner, json.id);

src/webpage/style.css

@@ -835,6 +835,7 @@ span.instanceStatus {
 	align-items: center;
 	gap: 8px;
 	cursor: pointer;
+	flex-shrink: 0;
 }
 .liststyle .statusDiv {
 	right: -1px;
@@ -2280,6 +2281,35 @@ fieldset input[type="radio"] {
 	display: flex;
 	width: 100%;
 	padding: 0.2in;
+	overflow: scroll;
+	height: 100%;
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
 	> div {
 		background: #00000030;
 		margin-bottom: 0.1in;

src/webpage/user.ts

@@ -164,18 +164,22 @@ class User extends SnowFlake {
 		this.relationshipType = type;
 	}
 	static setUpContextMenu(): void {
-		this.contextmenu.addButton(
-			() => I18n.getTranslation("user.copyId"),
-			function (this: User) {
-				navigator.clipboard.writeText(this.id);
-			},
-		);
 		this.contextmenu.addButton(
 			() => I18n.getTranslation("user.message"),
 			function (this: User) {
 				this.opendm();
 			},
+			{
+				icon: {
+					css: "svg-frmessage",
+				},
+			},
 		);
+
+		this.contextmenu.addSeperator((user) => {
+			return user.id !== user.localuser.user.id;
+		});
+
 		this.contextmenu.addButton(
 			() => I18n.getTranslation("user.block"),
 			function (this: User) {
@@ -211,6 +215,9 @@ class User extends SnowFlake {
 						this.id !== this.localuser.user.id
 					);
 				},
+				icon: {
+					css: "svg-addfriend",
+				},
 			},
 		);
 		this.contextmenu.addButton(
@@ -224,6 +231,23 @@ class User extends SnowFlake {
 				},
 			},
 		);
+
+		this.contextmenu.addSeperator();
+
+		this.contextmenu.addButton(
+			() => I18n.getTranslation("user.editServerProfile"),
+			function (this: User, member: Member | undefined) {
+				if (!member) return;
+				member.showEditProfile();
+			},
+			{
+				visable: function (member) {
+					return member?.id === this.localuser.user.id;
+				},
+			},
+		);
+
+		//TODO kick icon
 		this.contextmenu.addButton(
 			() => I18n.getTranslation("user.kick"),
 			function (this: User, member: Member | undefined) {
@@ -241,21 +265,11 @@ class User extends SnowFlake {
 					}
 					return us.hasPermission("KICK_MEMBERS") && this.id !== this.localuser.user.id;
 				},
+				color: "red",
 			},
 		);
 
-		this.contextmenu.addButton(
-			() => I18n.getTranslation("user.editServerProfile"),
-			function (this: User, member: Member | undefined) {
-				if (!member) return;
-				member.showEditProfile();
-			},
-			{
-				visable: function (member) {
-					return member?.id === this.localuser.user.id;
-				},
-			},
-		);
+		//TODO ban icon
 		this.contextmenu.addButton(
 			() => I18n.getTranslation("user.ban"),
 			function (this: User, member: Member | undefined) {
@@ -273,8 +287,12 @@ class User extends SnowFlake {
 					}
 					return us.hasPermission("BAN_MEMBERS") && this.id !== this.localuser.user.id;
 				},
+				color: "red",
 			},
 		);
+
+		this.contextmenu.addSeperator();
+
 		this.contextmenu.addButton(
 			() => I18n.getTranslation("user.addRole"),
 			async function (this: User, member: Member | undefined, e) {
@@ -329,6 +347,14 @@ class User extends SnowFlake {
 				},
 			},
 		);
+
+		this.contextmenu.addSeperator();
+		this.contextmenu.addButton(
+			() => I18n.getTranslation("user.copyId"),
+			function (this: User) {
+				navigator.clipboard.writeText(this.id);
+			},
+		);
 	}
 
 	static checkuser(user: User | userjson, owner: Localuser): User {