From 8337f81b854f16dd25a1b5c2eb36a380b7fce566 Mon Sep 17 00:00:00 2001
From: Andy Burke <andy.burke@mailbox.earth>
Date: Wed, 8 Oct 2025 19:07:21 -0700
Subject: [PATCH] fix: add a way to close the invite box

---
 public/base.css             | 29 +++++++++++++++++++++++++++++
 public/sidebar/sidebar.html | 26 +++++++++++++++++++++-----
 2 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/public/base.css b/public/base.css
index 7e49cce..6d3fd9a 100644
--- a/public/base.css
+++ b/public/base.css
@@ -755,6 +755,35 @@ body[data-perms*="files.write.own"] [data-requires-permission="files.write.own"]
 	border-radius: 100px;
 }
 
+/* ICON - CLOSE */
+.icon.close {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 22px;
+	height: 22px;
+	border: 2px solid;
+	border-radius: var(--border-radius);
+}
+.icon.close::after,
+.icon.close::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	width: 12px;
+	height: 2px;
+	background: currentColor;
+	transform: rotate(45deg);
+	border-radius: var(--border-radius);
+	top: 8px;
+	left: 3px;
+}
+.icon.close::after {
+	transform: rotate(-45deg);
+}
+
 /* ICON - CONTROLLER */
 .icon.controller {
 	box-sizing: border-box;
diff --git a/public/sidebar/sidebar.html b/public/sidebar/sidebar.html
index 18cdbba..65a3303 100644
--- a/public/sidebar/sidebar.html
+++ b/public/sidebar/sidebar.html
@@ -33,14 +33,21 @@
 	document.addEventListener("topic_changed", update_topic_indicators);
 	document.addEventListener("user_logged_in", update_topic_indicators);
 
+	function clear_invite_popup() {
+		document.body.querySelectorAll(".invitepopover").forEach((element) => element.remove());
+	}
+
 	function generate_invite(click_event) {
+		click_event.preventDefault();
+
 		const button = click_event.target;
 
-		document.body.querySelectorAll(".invitepopover").forEach((element) => element.remove());
-
+		clear_invite_popup();
 		const invite_div = document.createElement("div");
 		invite_div.classList.add("invitepopover");
-		invite_div.innerHTML = `<form>
+		invite_div.innerHTML = `
+		<div class="icon close" onclick="clear_invite_popup()"></div>
+		<form>
 			<input name="code" type="text" placeholder="Custom code (optional)">
 			<button onclick="create_invite(event);">Generate</button>
 		</form>`;
@@ -89,6 +96,7 @@
 
 		invite_popover.innerHTML = `
 			<div>
+				<div class="icon close" onclick="clear_invite_popup()"></div>
 				<div class="share-option">
 					<span class="name">Code</span>
 					<input readonly type="text" name="code" value="${invite_code.code}" />
@@ -234,7 +242,15 @@
 		display: inline-block;
 	}
 
-	.share-option input {
+	.invitepopover .icon.close {
+		cursor: pointer;
+		margin-right: -0.25rem;
+		margin-top: -0.25rem;
+		margin-bottom: 0.75rem;
+		margin-left: auto;
+	}
+
+	.invitepopover .share-option input {
 		padding: 0.75rem;
 		margin: 0 1rem 1rem 0;
 		background: none;
@@ -246,7 +262,7 @@
 		width: 15rem;
 	}
 
-	.share-option button {
+	.invitepopover .share-option button {
 		padding: 1rem;
 		text-transform: uppercase;
 		border: 1px solid var(--border-subtle);