add rules channel and move settings arround

src/webpage/channel.ts

@@ -656,7 +656,15 @@ class Channel extends SnowFlake {
 			if (this.type === 0) {
 				const decoration = document.createElement("span");
 				button.appendChild(decoration);
-				decoration.classList.add("space", "svgicon", this.nsfw ? "svg-channelnsfw" : "svg-channel");
+				if (this.guild.properties.rules_channel_id === this.id) {
+					decoration.classList.add("space", "svgicon", "svg-rules");
+				} else {
+					decoration.classList.add(
+						"space",
+						"svgicon",
+						this.nsfw ? "svg-channelnsfw" : "svg-channel",
+					);
+				}
 			} else if (this.type === 2) {
 				//
 				const decoration = document.createElement("span");
@@ -1038,7 +1046,10 @@ class Channel extends SnowFlake {
 				d.options.addHTMLArea(new MarkDown(this.topic, this).makeHTML());
 				d.show();
 			};
-		} else channelTopic.setAttribute("hidden", "");
+		} else {
+			channelTopic.setAttribute("hidden", "");
+			channelTopic.onclick = () => {};
+		}
 		if (this.guild !== this.localuser.lookingguild) {
 			this.guild.loadGuild();
 		}

src/webpage/direct.ts

@@ -85,6 +85,7 @@ class Direct extends Guild {
 		const channelTopic = document.getElementById("channelTopic") as HTMLSpanElement;
 		channelTopic.removeAttribute("hidden");
 		channelTopic.textContent = "";
+		channelTopic.onclick = () => {};
 
 		const loading = document.getElementById("loadingdiv") as HTMLDivElement;
 		loading.classList.remove("loading");

src/webpage/guild.ts

@@ -150,36 +150,21 @@ class Guild extends SnowFlake {
 			form.addTextInput(I18n.getTranslation("guild.name:"), "name", {
 				initText: this.properties.name,
 			});
-			form.addMDInput(I18n.getTranslation("guild.description:"), "description", {
-				initText: this.properties.description,
-			});
 
 			form.addFileInput(I18n.getTranslation("guild.banner:"), "banner", {clear: true});
 			form.addFileInput(I18n.getTranslation("guild.icon:"), "icon", {clear: true});
 
 			form.addHR();
 
-			const sysmap = [null, ...textChannels.map((e) => e.id)];
-			form.addSelect(
-				I18n.getTranslation("guild.systemSelect:"),
-				"system_channel_id",
-				["No system messages", ...textChannels.map((e) => e.name)],
-				{defaultIndex: sysmap.indexOf(this.properties.system_channel_id)},
-				sysmap,
-			);
 			console.log(textChannels, this.channels);
-			const options: ["DISCOVERABLE", "COMMUNITY", "INVITES_DISABLED"] = [
-				"DISCOVERABLE",
-				"COMMUNITY",
-				"INVITES_DISABLED",
-			];
+			const options = ["DISCOVERABLE", "COMMUNITY", "INVITES_DISABLED"] as const;
 			const defaultIndex = options.findIndex((_) => this.properties.features.includes(_));
 			form.addSelect(
 				I18n.guild.howJoin(),
 				"features",
 				options.map((_) => I18n.guild[_]()),
 				{
-					defaultIndex: defaultIndex == -1 ? 1 : defaultIndex,
+					defaultIndex: defaultIndex == -1 ? 2 : defaultIndex,
 				},
 				options,
 			);
@@ -211,8 +196,16 @@ class Guild extends SnowFlake {
 				console.log([...temp]);
 				//@ts-ignore
 				temp = temp.filter((_) => !options.includes(_));
-				console.log(temp, options);
 				temp.push(e.features);
+				if (e.features === "DISCOVERABLE") {
+					temp.push("COMMUNITY");
+				}
+				if (temp.includes("COMMUNITY")) {
+					if (!com) {
+						this.addCommunity(settings, textChannels);
+						com = true;
+					}
+				}
 				e.features = temp;
 			});
 
@@ -348,8 +341,52 @@ class Guild extends SnowFlake {
 		})();
 		const webhooks = settings.addButton(I18n.webhooks.base());
 		webhookMenu(this, this.info.api + `/guilds/${this.id}/webhooks`, webhooks);
+		console.log(this.properties.features, this.properties.features.includes("COMMUNITY"));
+		let com = false;
+		if (this.properties.features.includes("COMMUNITY")) {
+			this.addCommunity(settings, textChannels);
+			com = true;
+		}
 		settings.show();
 	}
+	addCommunity(settings: Settings, textChannels: Channel[]) {
+		const com = settings.addButton(I18n.guild.community()).addForm("", () => {}, {
+			fetchURL: this.info.api + "/guilds/" + this.id,
+			method: "PATCH",
+			headers: this.headers,
+			traditionalSubmit: true,
+		});
+		{
+			com.addMDInput(I18n.getTranslation("guild.description:"), "description", {
+				initText: this.properties.description,
+			});
+		}
+		{
+			let defaultIndex = textChannels.findIndex((_) => this.properties.rules_channel_id == _.id);
+			if (defaultIndex === -1) {
+				defaultIndex = textChannels.length;
+			}
+			com.addSelect(
+				I18n.guild.ruleId(),
+				"rules_channel_id",
+				[...textChannels.map((_) => _.name), "none"],
+				{
+					defaultIndex,
+				},
+				[...textChannels.map((_) => _.id), undefined],
+			);
+		}
+		{
+			const sysmap = [null, ...textChannels.map((e) => e.id)];
+			com.addSelect(
+				I18n.getTranslation("guild.systemSelect:"),
+				"system_channel_id",
+				["No system messages", ...textChannels.map((e) => e.name)],
+				{defaultIndex: sysmap.indexOf(this.properties.system_channel_id)},
+				sysmap,
+			);
+		}
+	}
 	makeInviteMenu(options: Options, valid: void | Channel[]) {
 		if (!valid) {
 			valid = this.channels.filter((e) => {

src/webpage/icons/rules.svg

@@ -0,0 +1 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg"><path d="M83 43v101a35 35 0 0 1 45 4l64 63L317 65a35 35 0 0 1 24-13 35 35 0 0 1 10 1V43z" style="baseline-shift:baseline;display:inline;overflow:visible;vector-effect:none;fill:#fe0000;stroke-width:1.17942;stroke-linecap:round;stroke-linejoin:round;enable-background:accumulate;stop-color:#000;stop-opacity:1"/><path d="M92 3C69 3 50 22 50 46v326c0 23 19 42 42 42h243c23 0 42-19 42-42V46c0-24-19-43-42-43Zm0 43h243v9a32 32 0 0 1 14 7 32 32 0 0 1 4 45l-18 21v244H92V190l-4-4a32 32 0 0 1 0-45 32 32 0 0 1 4-4z" style="baseline-shift:baseline;display:inline;overflow:visible;vector-effect:none;fill:#fe0000;stroke-width:1.06583;stroke-linecap:round;stroke-linejoin:round;enable-background:accumulate;stop-color:#000;stop-opacity:1"/><path d="M342 120 218 265a34 34 0 0 1-49 2l-83-81v192h256Z" style="baseline-shift:baseline;display:inline;overflow:visible;vector-effect:none;fill:#fe0000;stroke-width:1.12485;stroke-linecap:round;stroke-linejoin:round;enable-background:accumulate;stop-color:#000;stop-opacity:1"/><path style="fill:none;stroke:#fe0000;stroke-width:46.1123;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none" d="M435 77v400l-359 3-2-126"/></svg>

src/webpage/settings.ts

@@ -24,9 +24,15 @@ export class Buttons implements OptionsElement<unknown> {
 		if (!thing) {
 			thing = new Options(name, this);
 		}
-		this.buttons.push([name, thing]);
+		const button = [name, thing] as [string, string | Options];
+		this.buttons.push(button);
+		const htmlarea = this.htmlarea.deref();
+		const buttonTable = this.buttonTable.deref();
+		if (buttonTable && htmlarea) buttonTable.append(this.makeButtonHTML(button, htmlarea));
 		return thing;
 	}
+	htmlarea = new WeakRef(document.createElement("div"));
+	buttonTable = new WeakRef(document.createElement("div"));
 	generateHTML() {
 		const buttonList = document.createElement("div");
 		buttonList.classList.add("Buttons");
@@ -40,8 +46,22 @@ export class Buttons implements OptionsElement<unknown> {
 		}
 		buttonList.append(buttonTable);
 		buttonList.append(htmlarea);
+		this.htmlarea = new WeakRef(htmlarea);
+		this.buttonTable = new WeakRef(buttonTable);
 		return buttonList;
 	}
+	makeButtonHTML(buttond: [string, string | Options], optionsArea: HTMLElement) {
+		const button = document.createElement("button");
+		button.classList.add("SettingsButton");
+		button.textContent = buttond[0];
+		button.onclick = (_) => {
+			this.generateHTMLArea(buttond[1], optionsArea);
+			if (this.warndiv) {
+				this.warndiv.remove();
+			}
+		};
+		return button;
+	}
 	generateButtons(optionsArea: HTMLElement) {
 		const buttonTable = document.createElement("div");
 		buttonTable.classList.add("settingbuttons");
@@ -49,16 +69,7 @@ export class Buttons implements OptionsElement<unknown> {
 			buttonTable.classList.add("flexltr");
 		}
 		for (const thing of this.buttons) {
-			const button = document.createElement("button");
-			button.classList.add("SettingsButton");
-			button.textContent = thing[0];
-			button.onclick = (_) => {
-				this.generateHTMLArea(thing[1], optionsArea);
-				if (this.warndiv) {
-					this.warndiv.remove();
-				}
-			};
-			buttonTable.append(button);
+			buttonTable.append(this.makeButtonHTML(thing, optionsArea));
 		}
 		return buttonTable;
 	}
@@ -1082,13 +1093,13 @@ class Form implements OptionsElement<object> {
 			(this.button.deref() as HTMLElement).hidden = false;
 		}
 	}
-	selectMap = new WeakMap<SelectInput, (number | string | null)[]>();
+	selectMap = new WeakMap<SelectInput, readonly (number | string | null | undefined)[]>();
 	addSelect(
 		label: string,
 		formName: string,
 		selections: string[],
 		{defaultIndex = 0, required = false, radio = false} = {},
-		correct: (string | number | null)[] = selections,
+		correct: readonly (string | number | null | undefined)[] = selections,
 	) {
 		const select = this.options.addSelect(label, (_) => {}, selections, {
 			defaultIndex,
@@ -1219,7 +1230,7 @@ class Form implements OptionsElement<object> {
 	addPreprocessor(func: (obj: Object) => void) {
 		this.preprocessor = func;
 	}
-	onFormError = (f: FormError) => {};
+	onFormError = (_: FormError) => {};
 	async submit() {
 		if (this.options.subOptions) {
 			this.options.subOptions.submit();

src/webpage/style.css

@@ -404,6 +404,10 @@ textarea {
 	mask: url(/icons/pin.svg);
 	mask-size: cover;
 }
+.svg-rules {
+	mask: url(/icons/rules.svg);
+	mask-size: cover;
+}
 .svg-unspoiler {
 	mask: url(/icons/unspoiler.svg);
 }

translations/en.json

@@ -245,6 +245,8 @@
 	"nevermind": "Nevermind",
 	"submit": "submit",
 	"guild": {
+		"ruleId": "Rules Channel:",
+		"community": "Community",
 		"creating": "Creating guild",
 		"copyId": "Copy guild id",
 		"markRead": "Mark as read",