fix: modals not showing properly due to imports not being updated after components folder restructuring

components/Modal/Base.vue

@@ -0,0 +1,84 @@
+<template>
+  <dialog ref="dialog" class="modal" :class="props.obscure ? 'modal-obscure' : 'modal-regular'">
+	<span class="modal-exit-button-container" style="position: absolute; right: 2em; top: .2em; width: .5em; height: .5em;">
+		<Button text="X" variant="neutral" :callback="() => dialog?.remove()" />
+	</span>
+	<div class="modal-content">
+		<h1 class="modal-title">{{ title }}</h1>
+		<slot />
+	</div>
+  </dialog>
+</template>
+
+<script lang="ts" setup>
+import type { ModalProps } from '~/types/interfaces';
+import Button from '~/components/UserInterface/Button.vue';
+
+const props = defineProps<ModalProps>();
+const dialog = ref<HTMLDialogElement>();
+
+console.log("props:", props);
+
+onMounted(() => {
+  if (dialog.value) {
+    dialog.value.showModal();
+    if (props.onClose) {
+      dialog.value.addEventListener("close", props.onClose);
+    }
+    if (props.onCancel) {
+      dialog.value.addEventListener("cancel", props.onCancel);
+    }
+  }
+});
+
+
+</script>
+
+<style>
+.modal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 1em;
+  opacity: 100%;
+  padding: 1%;
+  background-color: var(--sidebar-highlighted-background-color);
+  color: var(--text-color);
+  overflow: hidden;
+}
+
+.modal-regular::backdrop {
+	background-color: var(--chat-background-color);
+	opacity: 0%;
+}
+
+.modal-obscure::backdrop {
+	background-color: var(--chat-background-color);
+	opacity: 80%;
+}
+
+.modal-top-container {
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}
+
+.modal-title {
+  font-size: 1.5rem;
+  padding: 0;
+}
+
+.modal-content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 1em;
+	margin: 1em;
+	width: 100%;
+}
+
+</style>

components/Modal/Invite.vue

@@ -0,0 +1,70 @@
+<template>
+	<ModalBase v-bind="props" :title="props.title || 'Create an invite'">
+		<div v-if="invite" id="invite-body">
+			<div id="invite-label">{{ invite }}</div>
+			<div id="invite-buttons">
+				<Button text="Copy as link" variant="neutral" :callback="() => copyInvite('link')" />
+				<Button text="Copy as code" variant="neutral" :callback="() => copyInvite('code')" />
+			</div>
+		</div>
+		<div v-else>
+			<Button text="Generate Invite" variant="normal" :callback="generateInvite">Generate Invite</Button>
+		</div>
+	</ModalBase>
+</template>
+
+<script lang="ts" setup>
+import type { InviteResponse, ModalProps } from '~/types/interfaces';
+import Button from '~/components/UserInterface/Button.vue';
+
+const props = defineProps<ModalProps & { guildId: string }>();
+
+const invite = ref<string>();
+
+async function generateInvite(): Promise<void> {
+  const chars = "ABCDEFGHIJKLMNOQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890"
+  let randCode = "";
+  for (let i = 0; i < 6; i++) {
+    randCode += chars[Math.floor(Math.random() * chars.length)];
+  }
+  const createdInvite: InviteResponse | undefined = await fetchWithApi(
+    `/guilds/${props.guildId}/invites`,
+    { method: "POST", body: { custom_id: randCode } }
+  );
+
+  invite.value = createdInvite?.id;
+  return;
+}
+
+function copyInvite(type: "link" | "code") {
+  if (!invite.value) return;
+
+  if (type == "link") {
+    const inviteUrl = URL.parse(`invite/${invite.value}`, `${window.location.protocol}//${window.location.host}`);
+    if (inviteUrl) {
+      navigator.clipboard.writeText(inviteUrl.href);
+    }
+  } else {
+    navigator.clipboard.writeText(invite.value);
+  }
+}
+
+</script>
+
+<style scoped>
+
+#invite-body, #invite-buttons {
+	display: flex;
+	gap: 1em;
+}
+
+#invite-body {
+	flex-direction: column;
+}
+
+#invite-label {
+  text-align: center;
+  color: aquamarine;
+}
+
+</style>