From 1a54a28c8385489e41fb0ef82dbf6081d27c4660 Mon Sep 17 00:00:00 2001
From: ShowierData9978 <mellfang36@gmail.com>
Date: Mon, 11 Dec 2023 23:06:21 -0600
Subject: [PATCH 01/12] feat: Bans

---
 src/lib/getBannedUsers.js                 |  0
 src/lib/modals/chats/BanMember.svelte     | 38 +++++++++++++++
 src/lib/modals/chats/BannedMembers.svelte | 59 +++++++++++++++++++++++
 src/lib/modals/chats/GCMember.svelte      | 14 +++++-
 src/lib/stores.js                         |  1 +
 src/pages/chats/[chatid].svelte           | 16 ++++++
 6 files changed, 127 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/getBannedUsers.js
 create mode 100644 src/lib/modals/chats/BanMember.svelte
 create mode 100644 src/lib/modals/chats/BannedMembers.svelte

diff --git a/src/lib/getBannedUsers.js b/src/lib/getBannedUsers.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/lib/modals/chats/BanMember.svelte b/src/lib/modals/chats/BanMember.svelte
new file mode 100644
index 00000000..853a3f5c
--- /dev/null
+++ b/src/lib/modals/chats/BanMember.svelte
@@ -0,0 +1,38 @@
+<script>
+	import { authHeader } from './../../stores.js';
+	import Modal from "../../Modal.svelte";
+	import * as modals from "../../modals.js";
+	import { chat } from "../../stores";
+	import { apiUrl } from "../../urls";
+
+	export let modalData;
+
+	let {username} = modalData;
+
+    let reason = "";
+</script>
+
+<Modal on:close={modals.closeLastModal}>
+    <h2 slot="header">Remove {username}</h2>
+
+    <div slot="default">
+        Are you sure you want to ban {username}  from this chat?
+        <form on:submit|preventDefault={() => {
+            fetch(`${apiUrl}chats/${$chat._id}/bans/${username}`, {
+                method: "PUT",
+                headers: {
+                    ...$authHeader
+                },
+                body: reason
+            })
+            modals.closeLastModal();
+        }}>
+
+            <label for="reason">Reason</label>
+            <input type="text" id="reason" bind:value={reason}>
+
+            <button type="submit">Ban</button>
+
+        </form>
+    </div>
+</Modal>
\ No newline at end of file
diff --git a/src/lib/modals/chats/BannedMembers.svelte b/src/lib/modals/chats/BannedMembers.svelte
new file mode 100644
index 00000000..f5e614e1
--- /dev/null
+++ b/src/lib/modals/chats/BannedMembers.svelte
@@ -0,0 +1,59 @@
+<script>
+	import Member from './../../Member.svelte';
+	import { authHeader, chat } from './../../stores.js';
+	import { apiUrl } from './../../urls.js';
+	import Modal from "../../Modal.svelte";
+    import * as modals from "../../modals"
+	import Spinner from '../../Spinner.svelte';
+
+    async function fetchBannedMembers() {
+        const resp = await fetch(`${apiUrl}chats/${$chat._id}/bans`, {
+            headers: $authHeader
+        })
+        if (!resp.ok) {
+            if (resp.status === 429) {
+                throw new Error("Too many requests! Try again later.")
+            }
+            throw new Error("Response code is not OK; code is " + resp.status)
+        }
+        $chat.banned_users = (await resp.json()).bans;
+    }
+
+
+
+</script>
+
+<Modal on:close={modals.closeLastModal}>
+    <h2 slot="header">Banned Users</h2>
+    <div slot="default">
+    {#await fetchBannedMembers()}
+        <Spinner />
+    {:then _}
+
+
+    {#each $chat.banned_users as member}
+
+    <p>
+    <Member member={member.username} owner={false} />
+        Reason: {member.message}
+
+        <button on:click={() => {
+            fetch(`${apiUrl}chats/${$chat._id}/bans/${member.username}`, {
+                method: "DELETE",
+                headers: $authHeader
+            })
+            modals.closeLastModal()
+        }} >Unban</button>
+    </p>
+        {/each}
+        {/await}
+    </div>
+    </Modal>
+
+<style>
+    p {
+        display: flex;
+        justify-content: center;
+        text-align: center;
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/modals/chats/GCMember.svelte b/src/lib/modals/chats/GCMember.svelte
index e1813e43..6eb48f1d 100644
--- a/src/lib/modals/chats/GCMember.svelte
+++ b/src/lib/modals/chats/GCMember.svelte
@@ -1,5 +1,5 @@
 <script>
-	import Modal from "../../Modal.svelte";
+ 	import Modal from "../../Modal.svelte";
 	import ProfileView from "../../ProfileView.svelte";
 
 	import RemoveMemberModal from "./RemoveMember.svelte";
@@ -10,6 +10,7 @@
 	import * as modals from "../../modals.js";
 
 	import {params, goto} from "@roxi/routify";
+	import BanMember from "./BanMember.svelte";
 
 	export let modalData;
 
@@ -48,7 +49,18 @@
 			>
 				Make owner of chat
 			</button>
+			<button class="long"
+				on:click={() => {
+					modals.replaceLastModal(BanMember, {
+						username,
+					});
+				}}
+			>
+				Ban user from chat
+			</button>
 		{/if}
+
+
 	</div>
 </Modal>
 
diff --git a/src/lib/stores.js b/src/lib/stores.js
index d0248004..464d5ff2 100644
--- a/src/lib/stores.js
+++ b/src/lib/stores.js
@@ -39,6 +39,7 @@ export const chat = writable({
 	created: 0,
 	last_active: 0,
 	deleted: false,
+	banned_users: [],
 });
 
 // User list
diff --git a/src/pages/chats/[chatid].svelte b/src/pages/chats/[chatid].svelte
index 4a508ea3..a4d3c546 100644
--- a/src/pages/chats/[chatid].svelte
+++ b/src/pages/chats/[chatid].svelte
@@ -27,6 +27,7 @@
 
 	import {params, goto} from "@roxi/routify";
 	import {onMount, onDestroy} from "svelte/internal";
+	import BannedMembers from "../../lib/modals/chats/BannedMembers.svelte";
 
 	let chatsStoreSubscription;
 
@@ -43,6 +44,7 @@
 				created: 0,
 				last_active: 0,
 				deleted: false,
+				banned_users: []
 			});
 
 			clm.link.send({
@@ -139,6 +141,7 @@
 			created: 0,
 			last_active: 0,
 			deleted: false,
+			banned_users: [],
 		});
 	});
 </script>
@@ -177,6 +180,11 @@
 							/>
 						{/if}
 						{#if $chat.owner === $user.name || ($params.admin && hasPermission(adminPermissions.EDIT_CHATS))}
+							<button class="circle" id="HoverOver-Members" on:click|preventDefault={() => (
+								modals.showModal(BannedMembers, {})
+							)}>
+								<b>B</b>
+							</button>
 							<button
 								class="circle settings"
 								on:click={() => {
@@ -274,6 +282,7 @@
 						/>
 					</button>
 				{/each}
+
 			</div>
 			<div class="top">
 				<h2 class="members-title">
@@ -301,6 +310,7 @@
 								} else {
 									modals.showModal(AddMemberModeModal);
 								}
+
 							}}
 						/>
 					{/if}
@@ -412,4 +422,10 @@
 	.small {
 		font-size: 75%;
 	}
+
+	#HoverOver-Members {
+		cursor: pointer;
+	}
+
+
 </style>

From 2d3882eb80d544af5f187348c1bc97c7d630e5ff Mon Sep 17 00:00:00 2001
From: ShowierData9978 <mellfang36@gmail.com>
Date: Tue, 12 Dec 2023 16:45:14 -0600
Subject: [PATCH 02/12] default to my server

---
 src/lib/urls.js | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/lib/urls.js b/src/lib/urls.js
index f161e1cc..931adbb3 100644
--- a/src/lib/urls.js
+++ b/src/lib/urls.js
@@ -3,14 +3,9 @@
  */
 
 export const beta = false;
-
 export const linkUrl =
-	localStorage.getItem("meower_linkurl") ||
-	(beta
-		? "wss://beta.meower.org/api/v0/cloudlink"
-		: "wss://api.meower.org/v0/cloudlink");
+	localStorage.getItem("meower_linkurl") || "wss://meower-ws.showierdata.xyz/"
 export const apiUrl =
-	localStorage.getItem("meower_apiurl") ||
-	(beta ? "https://beta.meower.org/api/" : "https://api.meower.org/");
+	localStorage.getItem("meower_apiurl") || "https://meower-api.showierdata.xyz/"
 export const encodeApiURLParams =
 	localStorage.getItem("meower_encodeapi") || false;

From c358a4fe70ccadf2663a1af0e402993278c15ded Mon Sep 17 00:00:00 2001
From: ShowierData9978 <mellfang36@gmail.com>
Date: Tue, 12 Dec 2023 20:03:23 -0600
Subject: [PATCH 03/12] feat: Invites and better bans page

---
 src/lib/modals/chats/BannedMembers.svelte | 30 +++++++-
 src/lib/modals/chats/Invites.svelte       | 94 +++++++++++++++++++++++
 src/lib/stores.js                         |  1 +
 src/pages/chats/[chatid].svelte           | 12 ++-
 src/pages/invite/[invite].svelte          | 51 ++++++++++++
 5 files changed, 182 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/modals/chats/Invites.svelte
 create mode 100644 src/pages/invite/[invite].svelte

diff --git a/src/lib/modals/chats/BannedMembers.svelte b/src/lib/modals/chats/BannedMembers.svelte
index f5e614e1..63679e81 100644
--- a/src/lib/modals/chats/BannedMembers.svelte
+++ b/src/lib/modals/chats/BannedMembers.svelte
@@ -5,6 +5,7 @@
 	import Modal from "../../Modal.svelte";
     import * as modals from "../../modals"
 	import Spinner from '../../Spinner.svelte';
+	import Container from '../../Container.svelte';
 
     async function fetchBannedMembers() {
         const resp = await fetch(`${apiUrl}chats/${$chat._id}/bans`, {
@@ -33,18 +34,20 @@
 
     {#each $chat.banned_users as member}
 
-    <p>
+    <Container>
     <Member member={member.username} owner={false} />
-        Reason: {member.message}
+    <div class="inline">
+        <p> Reason: {member.message} </p>
 
-        <button on:click={() => {
+        <button class="delete" on:click={() => {
             fetch(`${apiUrl}chats/${$chat._id}/bans/${member.username}`, {
                 method: "DELETE",
                 headers: $authHeader
             })
             modals.closeLastModal()
         }} >Unban</button>
-    </p>
+    </div>
+    </Container>
         {/each}
         {/await}
     </div>
@@ -56,4 +59,23 @@
         justify-content: center;
         text-align: center;
     }
+
+    .delete {
+        justify-content: right;
+        flex: right;
+        height: 100%;
+    }
+
+    .inline {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: left;
+        vertical-align: middle;
+    }
+
+    .inline p {
+        justify-self: center;
+        align-self: center;
+    }
 </style>
\ No newline at end of file
diff --git a/src/lib/modals/chats/Invites.svelte b/src/lib/modals/chats/Invites.svelte
new file mode 100644
index 00000000..ee648022
--- /dev/null
+++ b/src/lib/modals/chats/Invites.svelte
@@ -0,0 +1,94 @@
+<script>
+	import Invites from './Invites.svelte';
+	import { chat, authHeader } from './../../stores.js';
+	import Spinner from './../../Spinner.svelte';
+	import { apiUrl } from '../../urls';
+	import Modal from "../../Modal.svelte";
+    import * as modals from "../../modals";
+	import { writable } from 'svelte/store';
+	import Container from '../../Container.svelte';
+
+    if (!$chat.invites) $chat.invites = [];
+    // @ts-ignore
+    if ((typeof $chat.invites) != 'Array') $chat.invites = [];
+
+
+    async function fetchInvites() {
+        let data = await (await fetch(`${apiUrl}chats/${$chat._id}/invites`, {
+            headers: $authHeader
+        })).json();
+        console.log(data)
+        $chat.invites = data.invites;
+    }
+</script>
+
+<Modal on:close={modals.closeLastModal}>
+    <h1 slot="header">
+        Chat Invites
+    </h1>
+
+    <div slot="default">
+        {#await fetchInvites()}
+            <Spinner />
+        {/await}
+
+        {#each $chat.invites as invite}
+        <Container>
+        <div class="inline">
+            <a href="https://app.meower.org/invite/{invite._id}" target="_blank">
+            https://app.meower.org/invite/{invite._id}
+        </a>
+        <div class="delete">
+            <button class="right_align"
+            on:click|preventDefault={() => {
+                fetch(`${apiUrl}chats/invites/${invite._id}`, {
+                    method: 'DELETE',
+                    headers: $authHeader
+                                });
+                                modals.closeLastModal();
+                            }}
+                        >
+                        Revoke Invite
+                    </button>
+            </div>
+        </div>
+
+    </Container>
+            {/each}
+        <hr>
+        <button on:click|preventDefault={async () => {
+            let invite = await (await fetch(`${apiUrl}chats/${$chat._id}/invites`, {
+                method: 'POST',
+                headers: $authHeader
+            })).json();
+
+
+            $chat.invites = [...$chat.invites, {_id: invite.invite, chat_id: $chat._id}];
+        }} >Create Invite</button>
+    </div>
+
+</Modal>
+
+<style>
+    .right_align {
+        align-self: right;
+    }
+
+    .delete {
+        justify-content: right;
+        flex: right;
+    }
+
+    .inline {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: left;
+        vertical-align: middle;
+    }
+
+    .inline a {
+        justify-self: center;
+        align-self: center;
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/stores.js b/src/lib/stores.js
index 464d5ff2..31730ac3 100644
--- a/src/lib/stores.js
+++ b/src/lib/stores.js
@@ -40,6 +40,7 @@ export const chat = writable({
 	last_active: 0,
 	deleted: false,
 	banned_users: [],
+	invites: []
 });
 
 // User list
diff --git a/src/pages/chats/[chatid].svelte b/src/pages/chats/[chatid].svelte
index a4d3c546..ca28eea0 100644
--- a/src/pages/chats/[chatid].svelte
+++ b/src/pages/chats/[chatid].svelte
@@ -2,6 +2,7 @@
 	Home but it's a group chat.
 -->
 <script>
+	import Invites from './../../lib/modals/chats/Invites.svelte';
 	import BasicModal from "../../lib/modals/Basic.svelte";
 	import ChangeChatNicknameModal from "../../lib/modals/chats/ChangeChatNickname.svelte";
 	import GCMemberModal from "../../lib/modals/chats/GCMember.svelte";
@@ -26,7 +27,7 @@
 	import PostList from "../../lib/PostList.svelte";
 
 	import {params, goto} from "@roxi/routify";
-	import {onMount, onDestroy} from "svelte/internal";
+	import {onMount, onDestroy, prevent_default} from "svelte/internal";
 	import BannedMembers from "../../lib/modals/chats/BannedMembers.svelte";
 
 	let chatsStoreSubscription;
@@ -44,7 +45,8 @@
 				created: 0,
 				last_active: 0,
 				deleted: false,
-				banned_users: []
+				banned_users: [],
+				invites: []
 			});
 
 			clm.link.send({
@@ -142,6 +144,7 @@
 			last_active: 0,
 			deleted: false,
 			banned_users: [],
+			invites: []
 		});
 	});
 </script>
@@ -185,6 +188,11 @@
 							)}>
 								<b>B</b>
 							</button>
+							<button class="circle" on:click|preventDefault={() => {
+								modals.showModal(Invites, {})
+							}}>
+								<b>I</b>
+							</button>
 							<button
 								class="circle settings"
 								on:click={() => {
diff --git a/src/pages/invite/[invite].svelte b/src/pages/invite/[invite].svelte
new file mode 100644
index 00000000..6852cae0
--- /dev/null
+++ b/src/pages/invite/[invite].svelte
@@ -0,0 +1,51 @@
+<script>
+	import {authHeader, chats, user} from "./../../lib/stores.js";
+	import {apiUrl} from "../../lib/urls";
+	import {params, goto} from "@roxi/routify";
+	import {onMount} from "svelte";
+	import Container from "../../lib/Container.svelte";
+	import Spinner from "../../lib/Spinner.svelte";
+	import { writable } from "svelte/store";
+
+    let ok = writable(true);
+	onMount(() => {
+		(async () => {
+			let response = await fetch(
+				`${apiUrl}chats/join/${$params.invite}`,
+				{
+					method: "GET",
+					headers: {
+						...$authHeader,
+					},
+				}
+			);
+
+			if (response.status === 404) {
+				$goto("/404");
+			} else if (!response.ok) {
+                $goto("/500");
+            }
+
+            let data = await response.json();
+
+            // Cursed code because the server does not seem to want to send a packet
+            $chats.findLast(
+                chat => chat._id === data.chat
+            ).members.push($user.name);
+            
+			$goto(`/chats/${data.chat}`);
+		})();
+	});
+</script>
+
+<Container>
+    <h1>Joining Invite...</h1>
+
+    {#if $ok}
+        <Spinner />
+    {:else}
+        <h1>Invalid Invite</h1>
+
+        Or you could have been banned.
+    {/if}
+</Container>
\ No newline at end of file

From ec555fd2ddf371ff5d26f7111c28d769dea819cd Mon Sep 17 00:00:00 2001
From: ShowierData9978 <mellfang36@gmail.com>
Date: Tue, 12 Dec 2023 20:13:34 -0600
Subject: [PATCH 04/12] make it so it doent look like you added yourself again

---
 src/pages/invite/[invite].svelte | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/pages/invite/[invite].svelte b/src/pages/invite/[invite].svelte
index 6852cae0..979f2862 100644
--- a/src/pages/invite/[invite].svelte
+++ b/src/pages/invite/[invite].svelte
@@ -29,10 +29,12 @@
             let data = await response.json();
 
             // Cursed code because the server does not seem to want to send a packet
-            $chats.findLast(
+            let chat = $chats.findLast(
                 chat => chat._id === data.chat
-            ).members.push($user.name);
-            
+            )
+
+            if (chat.members.indexOf($user.name) === -1) chat.members.push($user.name);
+
 			$goto(`/chats/${data.chat}`);
 		})();
 	});

From cd358c0e5018b35b72cac43eeea419b910efff20 Mon Sep 17 00:00:00 2001
From: ShowierData9978 <mellfang36@gmail.com>
Date: Tue, 12 Dec 2023 22:08:37 -0600
Subject: [PATCH 05/12] Run Formating

---
 src/lib/modals/chats/BanMember.svelte     |  54 ++++----
 src/lib/modals/chats/BannedMembers.svelte | 138 +++++++++---------
 src/lib/modals/chats/GCMember.svelte      |   7 +-
 src/lib/modals/chats/Invites.svelte       | 162 +++++++++++-----------
 src/lib/stores.js                         |   2 +-
 src/lib/urls.js                           |   6 +-
 src/pages/_layout.svelte                  |   6 +-
 src/pages/chats/[chatid].svelte           |  28 ++--
 src/pages/invite/[invite].svelte          |  35 +++--
 9 files changed, 225 insertions(+), 213 deletions(-)

diff --git a/src/lib/modals/chats/BanMember.svelte b/src/lib/modals/chats/BanMember.svelte
index 853a3f5c..d90a8d59 100644
--- a/src/lib/modals/chats/BanMember.svelte
+++ b/src/lib/modals/chats/BanMember.svelte
@@ -1,38 +1,38 @@
 <script>
-	import { authHeader } from './../../stores.js';
+	import {authHeader} from "./../../stores.js";
 	import Modal from "../../Modal.svelte";
 	import * as modals from "../../modals.js";
-	import { chat } from "../../stores";
-	import { apiUrl } from "../../urls";
+	import {chat} from "../../stores";
+	import {apiUrl} from "../../urls";
 
 	export let modalData;
 
 	let {username} = modalData;
 
-    let reason = "";
+	let reason = "";
 </script>
 
 <Modal on:close={modals.closeLastModal}>
-    <h2 slot="header">Remove {username}</h2>
-
-    <div slot="default">
-        Are you sure you want to ban {username}  from this chat?
-        <form on:submit|preventDefault={() => {
-            fetch(`${apiUrl}chats/${$chat._id}/bans/${username}`, {
-                method: "PUT",
-                headers: {
-                    ...$authHeader
-                },
-                body: reason
-            })
-            modals.closeLastModal();
-        }}>
-
-            <label for="reason">Reason</label>
-            <input type="text" id="reason" bind:value={reason}>
-
-            <button type="submit">Ban</button>
-
-        </form>
-    </div>
-</Modal>
\ No newline at end of file
+	<h2 slot="header">Remove {username}</h2>
+
+	<div slot="default">
+		Are you sure you want to ban {username} from this chat?
+		<form
+			on:submit|preventDefault={() => {
+				fetch(`${apiUrl}chats/${$chat._id}/bans/${username}`, {
+					method: "PUT",
+					headers: {
+						...$authHeader,
+					},
+					body: reason,
+				});
+				modals.closeLastModal();
+			}}
+		>
+			<label for="reason">Reason</label>
+			<input type="text" id="reason" bind:value={reason} />
+
+			<button type="submit">Ban</button>
+		</form>
+	</div>
+</Modal>
diff --git a/src/lib/modals/chats/BannedMembers.svelte b/src/lib/modals/chats/BannedMembers.svelte
index 63679e81..011f637b 100644
--- a/src/lib/modals/chats/BannedMembers.svelte
+++ b/src/lib/modals/chats/BannedMembers.svelte
@@ -1,81 +1,81 @@
 <script>
-	import Member from './../../Member.svelte';
-	import { authHeader, chat } from './../../stores.js';
-	import { apiUrl } from './../../urls.js';
+	import Member from "./../../Member.svelte";
+	import {authHeader, chat} from "./../../stores.js";
+	import {apiUrl} from "./../../urls.js";
 	import Modal from "../../Modal.svelte";
-    import * as modals from "../../modals"
-	import Spinner from '../../Spinner.svelte';
-	import Container from '../../Container.svelte';
-
-    async function fetchBannedMembers() {
-        const resp = await fetch(`${apiUrl}chats/${$chat._id}/bans`, {
-            headers: $authHeader
-        })
-        if (!resp.ok) {
-            if (resp.status === 429) {
-                throw new Error("Too many requests! Try again later.")
-            }
-            throw new Error("Response code is not OK; code is " + resp.status)
-        }
-        $chat.banned_users = (await resp.json()).bans;
-    }
-
-
+	import * as modals from "../../modals";
+	import Spinner from "../../Spinner.svelte";
+	import Container from "../../Container.svelte";
 
+	async function fetchBannedMembers() {
+		const resp = await fetch(`${apiUrl}chats/${$chat._id}/bans`, {
+			headers: $authHeader,
+		});
+		if (!resp.ok) {
+			if (resp.status === 429) {
+				throw new Error("Too many requests! Try again later.");
+			}
+			throw new Error("Response code is not OK; code is " + resp.status);
+		}
+		$chat.banned_users = (await resp.json()).bans;
+	}
 </script>
 
 <Modal on:close={modals.closeLastModal}>
-    <h2 slot="header">Banned Users</h2>
-    <div slot="default">
-    {#await fetchBannedMembers()}
-        <Spinner />
-    {:then _}
-
-
-    {#each $chat.banned_users as member}
-
-    <Container>
-    <Member member={member.username} owner={false} />
-    <div class="inline">
-        <p> Reason: {member.message} </p>
+	<h2 slot="header">Banned Users</h2>
+	<div slot="default">
+		{#await fetchBannedMembers()}
+			<Spinner />
+		{:then _}
+			{#each $chat.banned_users as member}
+				<Container>
+					<Member member={member.username} owner={false} />
+					<div class="inline">
+						<p>Reason: {member.message}</p>
 
-        <button class="delete" on:click={() => {
-            fetch(`${apiUrl}chats/${$chat._id}/bans/${member.username}`, {
-                method: "DELETE",
-                headers: $authHeader
-            })
-            modals.closeLastModal()
-        }} >Unban</button>
-    </div>
-    </Container>
-        {/each}
-        {/await}
-    </div>
-    </Modal>
+						<button
+							class="delete"
+							on:click={() => {
+								fetch(
+									`${apiUrl}chats/${$chat._id}/bans/${member.username}`,
+									{
+										method: "DELETE",
+										headers: $authHeader,
+									}
+								);
+								modals.closeLastModal();
+							}}>Unban</button
+						>
+					</div>
+				</Container>
+			{/each}
+		{/await}
+	</div>
+</Modal>
 
 <style>
-    p {
-        display: flex;
-        justify-content: center;
-        text-align: center;
-    }
+	p {
+		display: flex;
+		justify-content: center;
+		text-align: center;
+	}
 
-    .delete {
-        justify-content: right;
-        flex: right;
-        height: 100%;
-    }
+	.delete {
+		justify-content: right;
+		flex: right;
+		height: 100%;
+	}
 
-    .inline {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: left;
-        vertical-align: middle;
-    }
+	.inline {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: left;
+		vertical-align: middle;
+	}
 
-    .inline p {
-        justify-self: center;
-        align-self: center;
-    }
-</style>
\ No newline at end of file
+	.inline p {
+		justify-self: center;
+		align-self: center;
+	}
+</style>
diff --git a/src/lib/modals/chats/GCMember.svelte b/src/lib/modals/chats/GCMember.svelte
index 6eb48f1d..f9c94f4e 100644
--- a/src/lib/modals/chats/GCMember.svelte
+++ b/src/lib/modals/chats/GCMember.svelte
@@ -1,5 +1,5 @@
 <script>
- 	import Modal from "../../Modal.svelte";
+	import Modal from "../../Modal.svelte";
 	import ProfileView from "../../ProfileView.svelte";
 
 	import RemoveMemberModal from "./RemoveMember.svelte";
@@ -49,7 +49,8 @@
 			>
 				Make owner of chat
 			</button>
-			<button class="long"
+			<button
+				class="long"
 				on:click={() => {
 					modals.replaceLastModal(BanMember, {
 						username,
@@ -59,8 +60,6 @@
 				Ban user from chat
 			</button>
 		{/if}
-
-
 	</div>
 </Modal>
 
diff --git a/src/lib/modals/chats/Invites.svelte b/src/lib/modals/chats/Invites.svelte
index ee648022..832760a5 100644
--- a/src/lib/modals/chats/Invites.svelte
+++ b/src/lib/modals/chats/Invites.svelte
@@ -1,94 +1,100 @@
 <script>
-	import Invites from './Invites.svelte';
-	import { chat, authHeader } from './../../stores.js';
-	import Spinner from './../../Spinner.svelte';
-	import { apiUrl } from '../../urls';
+	import Invites from "./Invites.svelte";
+	import {chat, authHeader} from "./../../stores.js";
+	import Spinner from "./../../Spinner.svelte";
+	import {apiUrl} from "../../urls";
 	import Modal from "../../Modal.svelte";
-    import * as modals from "../../modals";
-	import { writable } from 'svelte/store';
-	import Container from '../../Container.svelte';
+	import * as modals from "../../modals";
+	import {writable} from "svelte/store";
+	import Container from "../../Container.svelte";
 
-    if (!$chat.invites) $chat.invites = [];
-    // @ts-ignore
-    if ((typeof $chat.invites) != 'Array') $chat.invites = [];
+	if (!$chat.invites) $chat.invites = [];
+	// @ts-ignore
+	if (typeof $chat.invites != "Array") $chat.invites = [];
 
-
-    async function fetchInvites() {
-        let data = await (await fetch(`${apiUrl}chats/${$chat._id}/invites`, {
-            headers: $authHeader
-        })).json();
-        console.log(data)
-        $chat.invites = data.invites;
-    }
+	async function fetchInvites() {
+		let data = await (
+			await fetch(`${apiUrl}chats/${$chat._id}/invites`, {
+				headers: $authHeader,
+			})
+		).json();
+		console.log(data);
+		$chat.invites = data.invites;
+	}
 </script>
 
 <Modal on:close={modals.closeLastModal}>
-    <h1 slot="header">
-        Chat Invites
-    </h1>
-
-    <div slot="default">
-        {#await fetchInvites()}
-            <Spinner />
-        {/await}
-
-        {#each $chat.invites as invite}
-        <Container>
-        <div class="inline">
-            <a href="https://app.meower.org/invite/{invite._id}" target="_blank">
-            https://app.meower.org/invite/{invite._id}
-        </a>
-        <div class="delete">
-            <button class="right_align"
-            on:click|preventDefault={() => {
-                fetch(`${apiUrl}chats/invites/${invite._id}`, {
-                    method: 'DELETE',
-                    headers: $authHeader
-                                });
-                                modals.closeLastModal();
-                            }}
-                        >
-                        Revoke Invite
-                    </button>
-            </div>
-        </div>
-
-    </Container>
-            {/each}
-        <hr>
-        <button on:click|preventDefault={async () => {
-            let invite = await (await fetch(`${apiUrl}chats/${$chat._id}/invites`, {
-                method: 'POST',
-                headers: $authHeader
-            })).json();
+	<h1 slot="header">Chat Invites</h1>
 
+	<div slot="default">
+		{#await fetchInvites()}
+			<Spinner />
+		{/await}
 
-            $chat.invites = [...$chat.invites, {_id: invite.invite, chat_id: $chat._id}];
-        }} >Create Invite</button>
-    </div>
+		{#each $chat.invites as invite}
+			<Container>
+				<div class="inline">
+					<a
+						href="https://app.meower.org/invite/{invite._id}"
+						target="_blank"
+					>
+						https://app.meower.org/invite/{invite._id}
+					</a>
+					<div class="delete">
+						<button
+							class="right_align"
+							on:click|preventDefault={() => {
+								fetch(`${apiUrl}chats/invites/${invite._id}`, {
+									method: "DELETE",
+									headers: $authHeader,
+								});
+							}}
+						>
+							Revoke Invite
+						</button>
+					</div>
+				</div>
+			</Container>
+		{/each}
+		<hr />
+		<button
+			on:click|preventDefault={async () => {
+				let invite = await (
+					await fetch(`${apiUrl}chats/${$chat._id}/invites`, {
+						method: "POST",
+						headers: $authHeader,
+					})
+				).json();
 
+				$chat.invites = [
+					...$chat.invites,
+					{_id: invite.invite, chat_id: $chat._id},
+				];
+			}}>Create Invite</button
+		>
+	</div>
 </Modal>
 
 <style>
-    .right_align {
-        align-self: right;
-    }
+	.right_align {
+		align-self: right;
+	}
 
-    .delete {
-        justify-content: right;
-        flex: right;
-    }
+	.delete {
+		justify-content: right;
+		flex: right;
+	}
 
-    .inline {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: left;
-        vertical-align: middle;
-    }
+	.inline {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: left;
+		vertical-align: middle;
+	}
 
-    .inline a {
-        justify-self: center;
-        align-self: center;
-    }
-</style>
\ No newline at end of file
+	.inline a {
+		justify-self: center;
+		align-self: center;
+	}
+</style>
diff --git a/src/lib/stores.js b/src/lib/stores.js
index 31730ac3..87fe8c93 100644
--- a/src/lib/stores.js
+++ b/src/lib/stores.js
@@ -40,7 +40,7 @@ export const chat = writable({
 	last_active: 0,
 	deleted: false,
 	banned_users: [],
-	invites: []
+	invites: [],
 });
 
 // User list
diff --git a/src/lib/urls.js b/src/lib/urls.js
index 931adbb3..71c1c336 100644
--- a/src/lib/urls.js
+++ b/src/lib/urls.js
@@ -4,8 +4,10 @@
 
 export const beta = false;
 export const linkUrl =
-	localStorage.getItem("meower_linkurl") || "wss://meower-ws.showierdata.xyz/"
+	localStorage.getItem("meower_linkurl") ||
+	"wss://meower-ws.showierdata.xyz/";
 export const apiUrl =
-	localStorage.getItem("meower_apiurl") || "https://meower-api.showierdata.xyz/"
+	localStorage.getItem("meower_apiurl") ||
+	"https://meower-api.showierdata.xyz/";
 export const encodeApiURLParams =
 	localStorage.getItem("meower_encodeapi") || false;
diff --git a/src/pages/_layout.svelte b/src/pages/_layout.svelte
index 472f1770..13961994 100644
--- a/src/pages/_layout.svelte
+++ b/src/pages/_layout.svelte
@@ -167,7 +167,11 @@
 		--orange: #4d97ff;
 		--orange-light: rgb(140, 189, 245);
 		--orange-dark: #3888f1;
-		--orange-scrollbar-back: color-mix(in srgb, #000000 20%, var(--orange-dark));
+		--orange-scrollbar-back: color-mix(
+			in srgb,
+			#000000 20%,
+			var(--orange-dark)
+		);
 		--background: white;
 		--foreground: black;
 		--foreground-orange: white;
diff --git a/src/pages/chats/[chatid].svelte b/src/pages/chats/[chatid].svelte
index ca28eea0..2507a312 100644
--- a/src/pages/chats/[chatid].svelte
+++ b/src/pages/chats/[chatid].svelte
@@ -2,7 +2,7 @@
 	Home but it's a group chat.
 -->
 <script>
-	import Invites from './../../lib/modals/chats/Invites.svelte';
+	import Invites from "./../../lib/modals/chats/Invites.svelte";
 	import BasicModal from "../../lib/modals/Basic.svelte";
 	import ChangeChatNicknameModal from "../../lib/modals/chats/ChangeChatNickname.svelte";
 	import GCMemberModal from "../../lib/modals/chats/GCMember.svelte";
@@ -46,7 +46,7 @@
 				last_active: 0,
 				deleted: false,
 				banned_users: [],
-				invites: []
+				invites: [],
 			});
 
 			clm.link.send({
@@ -144,7 +144,7 @@
 			last_active: 0,
 			deleted: false,
 			banned_users: [],
-			invites: []
+			invites: [],
 		});
 	});
 </script>
@@ -183,14 +183,20 @@
 							/>
 						{/if}
 						{#if $chat.owner === $user.name || ($params.admin && hasPermission(adminPermissions.EDIT_CHATS))}
-							<button class="circle" id="HoverOver-Members" on:click|preventDefault={() => (
-								modals.showModal(BannedMembers, {})
-							)}>
+							<button
+								class="circle"
+								id="HoverOver-Members"
+								on:click|preventDefault={() =>
+									modals.showModal(BannedMembers, {})}
+							>
 								<b>B</b>
 							</button>
-							<button class="circle" on:click|preventDefault={() => {
-								modals.showModal(Invites, {})
-							}}>
+							<button
+								class="circle"
+								on:click|preventDefault={() => {
+									modals.showModal(Invites, {});
+								}}
+							>
 								<b>I</b>
 							</button>
 							<button
@@ -290,7 +296,6 @@
 						/>
 					</button>
 				{/each}
-
 			</div>
 			<div class="top">
 				<h2 class="members-title">
@@ -318,7 +323,6 @@
 								} else {
 									modals.showModal(AddMemberModeModal);
 								}
-
 							}}
 						/>
 					{/if}
@@ -434,6 +438,4 @@
 	#HoverOver-Members {
 		cursor: pointer;
 	}
-
-
 </style>
diff --git a/src/pages/invite/[invite].svelte b/src/pages/invite/[invite].svelte
index 979f2862..fbfa5d41 100644
--- a/src/pages/invite/[invite].svelte
+++ b/src/pages/invite/[invite].svelte
@@ -5,9 +5,9 @@
 	import {onMount} from "svelte";
 	import Container from "../../lib/Container.svelte";
 	import Spinner from "../../lib/Spinner.svelte";
-	import { writable } from "svelte/store";
+	import {writable} from "svelte/store";
 
-    let ok = writable(true);
+	let ok = writable(true);
 	onMount(() => {
 		(async () => {
 			let response = await fetch(
@@ -23,17 +23,16 @@
 			if (response.status === 404) {
 				$goto("/404");
 			} else if (!response.ok) {
-                $goto("/500");
-            }
+				$goto("/500");
+			}
 
-            let data = await response.json();
+			let data = await response.json();
 
-            // Cursed code because the server does not seem to want to send a packet
-            let chat = $chats.findLast(
-                chat => chat._id === data.chat
-            )
+			// Cursed code because the server does not seem to want to send a packet
+			let chat = $chats.findLast(chat => chat._id === data.chat);
 
-            if (chat.members.indexOf($user.name) === -1) chat.members.push($user.name);
+			if (chat.members.indexOf($user.name) === -1)
+				chat.members.push($user.name);
 
 			$goto(`/chats/${data.chat}`);
 		})();
@@ -41,13 +40,13 @@
 </script>
 
 <Container>
-    <h1>Joining Invite...</h1>
+	<h1>Joining Invite...</h1>
 
-    {#if $ok}
-        <Spinner />
-    {:else}
-        <h1>Invalid Invite</h1>
+	{#if $ok}
+		<Spinner />
+	{:else}
+		<h1>Invalid Invite</h1>
 
-        Or you could have been banned.
-    {/if}
-</Container>
\ No newline at end of file
+		Or you could have been banned.
+	{/if}
+</Container>

From 43bfc7b26a1eea6f6171eae9e2376ad978f7c924 Mon Sep 17 00:00:00 2001
From: ShowierData9978 <mellfang36@gmail.com>
Date: Thu, 15 Feb 2024 23:46:37 -0600
Subject: [PATCH 06/12] Feat: Fixed Invite page. (added a cat) Fix: Rescaleble 
 Images

---
 src/lib/RescalebleImage.svelte   | 29 +++++++++++
 src/pages/_fallback.svelte       |  7 +--
 src/pages/invite/[invite].svelte | 85 +++++++++++++++++++++++++++-----
 3 files changed, 103 insertions(+), 18 deletions(-)
 create mode 100644 src/lib/RescalebleImage.svelte

diff --git a/src/lib/RescalebleImage.svelte b/src/lib/RescalebleImage.svelte
new file mode 100644
index 00000000..e0e60417
--- /dev/null
+++ b/src/lib/RescalebleImage.svelte
@@ -0,0 +1,29 @@
+<script>
+	export let src;
+	export let alt = "";
+
+	import {onMount} from "svelte";
+
+	let img;
+	onMount(() => {
+		img.classList.add("rescaleble-image");
+		img.style.backgroundImage = `url(${src})`;
+		img.title = alt;
+	})
+
+</script>
+
+<div id="img" bind:this={img} {...$$restProps}></div>
+
+<style>
+	.rescaleble-image {
+		display: flex;
+		flex-grow: 1;
+		min-width: 25%;
+		height: 500px;
+		background-image: url("https://meower.org/assets/cat_disks.jpg");
+		background-repeat: no-repeat;
+		object-fit: contain;
+		background-size: contain;
+	}
+</style>
\ No newline at end of file
diff --git a/src/pages/_fallback.svelte b/src/pages/_fallback.svelte
index a0bf9031..5416cc5c 100644
--- a/src/pages/_fallback.svelte
+++ b/src/pages/_fallback.svelte
@@ -1,4 +1,5 @@
 <script>
+	import RescalebleImage from "../lib/RescalebleImage.svelte";
 	import Container from "../lib/Container.svelte";
 </script>
 
@@ -10,8 +11,4 @@
 	>
 </Container>
 
-<img
-	src="https://meower.org/assets/cat_disks.jpg"
-	alt="cat disks"
-	style="max-width: 25%;"
-/>
+<RescalebleImage src="https://meower.org/assets/cat_disks.jpg" alt="Cat Disks" />
diff --git a/src/pages/invite/[invite].svelte b/src/pages/invite/[invite].svelte
index fbfa5d41..2b64d0d3 100644
--- a/src/pages/invite/[invite].svelte
+++ b/src/pages/invite/[invite].svelte
@@ -1,4 +1,6 @@
 <script>
+	import {scale} from "svelte/transition";
+	import {height, updateSize} from "./../../lib/responsiveness.js";
 	import {authHeader, chats, user} from "./../../lib/stores.js";
 	import {apiUrl} from "../../lib/urls";
 	import {params, goto} from "@roxi/routify";
@@ -6,8 +8,41 @@
 	import Container from "../../lib/Container.svelte";
 	import Spinner from "../../lib/Spinner.svelte";
 	import {writable} from "svelte/store";
+	import RescalebleImage from "../../lib/RescalebleImage.svelte";
+
+	let ok = true;
+	let errorText = "";
+
+	function resizeContainer(node) {
+		function updateHeight() {
+			const childrenHeight = [...node.children].reduce(
+				(acc, item) => acc + item.offsetHeight,
+				0
+			);
+			node.style.setProperty("height", `${childrenHeight}px`);
+		}
+
+		const observer = new MutationObserver(mutations => {
+			updateHeight();
+		});
+		observer.observe(node, {
+			characterData: true,
+			subtree: true,
+			childList: true,
+		});
+
+		updateHeight();
+
+		node.style.setProperty("overflow", "hidden");
+		node.style.setProperty("transition", "height 300ms ease");
+
+		return {
+			destroy() {
+				observer?.disconnect();
+			},
+		};
+	}
 
-	let ok = writable(true);
 	onMount(() => {
 		(async () => {
 			let response = await fetch(
@@ -19,11 +54,16 @@
 					},
 				}
 			);
+			if (!response.ok) {
+				ok = false;
+			}
 
 			if (response.status === 404) {
-				$goto("/404");
+				errorText = "Invite not found";
+			} else if (response.status === 403) {
+				errorText = "You are not allowed to join this chat";
 			} else if (!response.ok) {
-				$goto("/500");
+				errorText = "An error occurred";
 			}
 
 			let data = await response.json();
@@ -39,14 +79,33 @@
 	});
 </script>
 
-<Container>
-	<h1>Joining Invite...</h1>
-
-	{#if $ok}
-		<Spinner />
-	{:else}
-		<h1>Invalid Invite</h1>
+<div class="center">
+	<Container>
+		{#if ok}
+			<h1>Joining Invite...</h1>
+			<Spinner />
+		{:else}
+			<h1>Uh Oh, somthing went wrong</h1>
+			<span>{errorText}</span><br /><br />
+			Maybe you wanted a cat picture instead? <br /><br />
+			<RescalebleImage src="https://meower.org/assets/nova.png" alt="Nova the cat"/>
+		{/if}
+	</Container>
+</div>
 
-		Or you could have been banned.
-	{/if}
-</Container>
+<style>
+	.center {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: auto;
+		height: auto;
+		position: relative;
+		margin: 5px;
+	}
+	:global(.center *) {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+</style>

From 685235356adce90e245dacf3abe1789761c1c3c3 Mon Sep 17 00:00:00 2001
From: ShowierData9978 <mellfang36@gmail.com>
Date: Thu, 15 Feb 2024 23:50:46 -0600
Subject: [PATCH 07/12] Feat: Add status code to !responce.ok

---
 src/pages/invite/[invite].svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/invite/[invite].svelte b/src/pages/invite/[invite].svelte
index 2b64d0d3..0ab6f9bf 100644
--- a/src/pages/invite/[invite].svelte
+++ b/src/pages/invite/[invite].svelte
@@ -63,7 +63,7 @@
 			} else if (response.status === 403) {
 				errorText = "You are not allowed to join this chat";
 			} else if (!response.ok) {
-				errorText = "An error occurred";
+				errorText = `An unexpected error occurred: ${response.status}`;
 			}
 
 			let data = await response.json();

From d0675e6b3c8efe3a669ee158f536c9461ad203e2 Mon Sep 17 00:00:00 2001
From: ShowierData9978 <mellfang36@gmail.com>
Date: Thu, 15 Feb 2024 23:53:59 -0600
Subject: [PATCH 08/12] Fix: Rename invite center rule to invite-center instead
 of center

---
 src/pages/invite/[invite].svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/invite/[invite].svelte b/src/pages/invite/[invite].svelte
index 0ab6f9bf..b9d2e4bd 100644
--- a/src/pages/invite/[invite].svelte
+++ b/src/pages/invite/[invite].svelte
@@ -79,7 +79,7 @@
 	});
 </script>
 
-<div class="center">
+<div class="invite-center">
 	<Container>
 		{#if ok}
 			<h1>Joining Invite...</h1>
@@ -103,7 +103,7 @@
 		position: relative;
 		margin: 5px;
 	}
-	:global(.center *) {
+	:global(.invite-center *) {
 		position: relative;
 		width: 100%;
 		height: 100%;

From 6e649e7fd15f961958633f19533ebbd2afa8d6a8 Mon Sep 17 00:00:00 2001
From: ShowierData9978 <mellfang36@gmail.com>
Date: Thu, 15 Feb 2024 23:56:27 -0600
Subject: [PATCH 09/12] Fix rename other non global css rule

---
 src/pages/invite/[invite].svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/invite/[invite].svelte b/src/pages/invite/[invite].svelte
index b9d2e4bd..71245562 100644
--- a/src/pages/invite/[invite].svelte
+++ b/src/pages/invite/[invite].svelte
@@ -94,7 +94,7 @@
 </div>
 
 <style>
-	.center {
+	.invite-center {
 		display: flex;
 		justify-content: center;
 		align-items: center;

From 33f9ea2e34e7e7207a16c287613bbd46b23583f6 Mon Sep 17 00:00:00 2001
From: ShowierData9978 <mellfang36@gmail.com>
Date: Fri, 16 Feb 2024 00:03:51 -0600
Subject: [PATCH 10/12] chore: format

---
 src/lib/RescalebleImage.svelte   | 7 +++----
 src/pages/_fallback.svelte       | 5 ++++-
 src/pages/invite/[invite].svelte | 5 ++++-
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/lib/RescalebleImage.svelte b/src/lib/RescalebleImage.svelte
index e0e60417..89a2fc4d 100644
--- a/src/lib/RescalebleImage.svelte
+++ b/src/lib/RescalebleImage.svelte
@@ -9,11 +9,10 @@
 		img.classList.add("rescaleble-image");
 		img.style.backgroundImage = `url(${src})`;
 		img.title = alt;
-	})
-
+	});
 </script>
 
-<div id="img" bind:this={img} {...$$restProps}></div>
+<div id="img" bind:this={img} {...$$restProps} />
 
 <style>
 	.rescaleble-image {
@@ -26,4 +25,4 @@
 		object-fit: contain;
 		background-size: contain;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/pages/_fallback.svelte b/src/pages/_fallback.svelte
index 5416cc5c..343097a2 100644
--- a/src/pages/_fallback.svelte
+++ b/src/pages/_fallback.svelte
@@ -11,4 +11,7 @@
 	>
 </Container>
 
-<RescalebleImage src="https://meower.org/assets/cat_disks.jpg" alt="Cat Disks" />
+<RescalebleImage
+	src="https://meower.org/assets/cat_disks.jpg"
+	alt="Cat Disks"
+/>
diff --git a/src/pages/invite/[invite].svelte b/src/pages/invite/[invite].svelte
index 71245562..21b98824 100644
--- a/src/pages/invite/[invite].svelte
+++ b/src/pages/invite/[invite].svelte
@@ -88,7 +88,10 @@
 			<h1>Uh Oh, somthing went wrong</h1>
 			<span>{errorText}</span><br /><br />
 			Maybe you wanted a cat picture instead? <br /><br />
-			<RescalebleImage src="https://meower.org/assets/nova.png" alt="Nova the cat"/>
+			<RescalebleImage
+				src="https://meower.org/assets/nova.png"
+				alt="Nova the cat"
+			/>
 		{/if}
 	</Container>
 </div>

From 0d8da3de0be2e521d1179e1b8dfbb1c465bccd88 Mon Sep 17 00:00:00 2001
From: ShowierData9978 <mellfang36@gmail.com>
Date: Fri, 16 Feb 2024 19:33:40 -0600
Subject: [PATCH 11/12] Feat: Setting 1/?

---
 src/lib/Post.svelte                           |   3 +-
 src/lib/Report.svelte                         |   2 +-
 src/lib/settings/chats/Banned.svelte          |  85 ++++++
 .../{modals => settings}/chats/Invites.svelte |  21 +-
 src/lib/settings/chats/Members.svelte         |  76 ++++++
 src/pages/chats/[chatid].svelte               |   2 +-
 src/pages/chats/[chatid]/settings.svelte      | 248 ++++++++++++++++++
 7 files changed, 422 insertions(+), 15 deletions(-)
 create mode 100644 src/lib/settings/chats/Banned.svelte
 rename src/lib/{modals => settings}/chats/Invites.svelte (81%)
 create mode 100644 src/lib/settings/chats/Members.svelte
 create mode 100644 src/pages/chats/[chatid]/settings.svelte

diff --git a/src/lib/Post.svelte b/src/lib/Post.svelte
index d720eade..9e9c30da 100644
--- a/src/lib/Post.svelte
+++ b/src/lib/Post.svelte
@@ -328,7 +328,8 @@
 										editing = true;
 										await tick();
 										editContentInput.value =
-											post.unfiltered_content || post.content;
+											post.unfiltered_content ||
+											post.content;
 										editContentInput.focus();
 										autoresize(editContentInput);
 									}}
diff --git a/src/lib/Report.svelte b/src/lib/Report.svelte
index 8fecdb7b..77c519ca 100644
--- a/src/lib/Report.svelte
+++ b/src/lib/Report.svelte
@@ -8,7 +8,7 @@
 
 	import {authHeader} from "./stores.js";
 	import {apiUrl} from "./urls.js";
-	import { adminPermissions, hasPermission } from "./bitField.js";
+	import {adminPermissions, hasPermission} from "./bitField.js";
 	import * as modals from "./modals.js";
 
 	import {goto} from "@roxi/routify";
diff --git a/src/lib/settings/chats/Banned.svelte b/src/lib/settings/chats/Banned.svelte
new file mode 100644
index 00000000..5456117e
--- /dev/null
+++ b/src/lib/settings/chats/Banned.svelte
@@ -0,0 +1,85 @@
+<script>
+	import {authHeader} from "../../stores.js";
+	import {chat} from "../../stores.js";
+	import {apiUrl} from "../../urls.js";
+	import Container from "../../Container.svelte.js";
+	import ProfileView from "../../ProfileView.svelte.js";
+	import Member from "../../Member.svelte.js";
+
+	let bans = [];
+	async function fetchBans() {
+		const resp = await fetch(`${apiUrl}chats/${$chat._id}/bans`, {
+				headers: $authHeader,
+		})
+		if (!resp.ok) {
+			throw new Error("Failed to fetch bans");
+		}
+		const data = await resp.json();
+		bans = data.bans;
+
+	}
+</script>
+
+<Container>
+	<h1>Banned Users</h1>
+	<hr>
+	{#await fetchBans()}
+		<p>Loading...</p>
+	{:then}
+		{#if bans.length === 0}
+			<p>No banned users</p>
+		{:else}
+			{#each bans as ban}
+
+				<Container><div class="inline">
+					<Member member={ban.username} owner={false} />
+					<p class="right_align">Reason: {ban.message} </p>
+					<button
+						class="unban"
+						on:click={
+						async () => {
+							const resp = await fetch(`${apiUrl}chats/${$chat._id}/bans/${ban.username}`, {
+								method: "DELETE",
+								headers: $authHeader,
+							});
+							if (!resp.ok) {
+								throw new Error("Failed to unban user");
+							}
+							bans = bans.filter((b) => b.username !== ban.username);
+						}
+					}>Unban</button>
+
+</div>
+				</Container>
+
+			{/each}
+		{/if}
+	{:catch e}
+		<p>{e.message}</p>
+	{/await}
+</Container>
+
+<style>
+	.unban {
+		justify-content: right;
+		flex-direction: column;
+
+	}
+
+	.inline {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: left;
+		vertical-align: middle;
+	}
+
+	.inline p {
+		flex: right;
+		justify-self: right;
+	}
+
+	:global(.inline .member) {
+		max-width: 25%;
+	}
+</style>
\ No newline at end of file
diff --git a/src/lib/modals/chats/Invites.svelte b/src/lib/settings/chats/Invites.svelte
similarity index 81%
rename from src/lib/modals/chats/Invites.svelte
rename to src/lib/settings/chats/Invites.svelte
index 832760a5..128623b0 100644
--- a/src/lib/modals/chats/Invites.svelte
+++ b/src/lib/settings/chats/Invites.svelte
@@ -1,7 +1,6 @@
 <script>
-	import Invites from "./Invites.svelte";
-	import {chat, authHeader} from "./../../stores.js";
-	import Spinner from "./../../Spinner.svelte";
+	import {chat, authHeader} from "../../stores.js";
+	import Spinner from "../../Spinner.svelte";
 	import {apiUrl} from "../../urls";
 	import Modal from "../../Modal.svelte";
 	import * as modals from "../../modals";
@@ -23,22 +22,21 @@
 	}
 </script>
 
-<Modal on:close={modals.closeLastModal}>
-	<h1 slot="header">Chat Invites</h1>
+<Container>
+	<h1>Invites</h1>
 
-	<div slot="default">
 		{#await fetchInvites()}
 			<Spinner />
 		{/await}
+		<hr />
 
 		{#each $chat.invites as invite}
-			<Container>
 				<div class="inline">
 					<a
-						href="https://app.meower.org/invite/{invite._id}"
+						href="{window.location.protocol}://{window.location.host}/invite/{invite._id}"
 						target="_blank"
 					>
-						https://app.meower.org/invite/{invite._id}
+						{window.location.protocol}//{window.location.host}/invite/{invite._id}
 					</a>
 					<div class="delete">
 						<button
@@ -54,7 +52,6 @@
 						</button>
 					</div>
 				</div>
-			</Container>
 		{/each}
 		<hr />
 		<button
@@ -72,8 +69,7 @@
 				];
 			}}>Create Invite</button
 		>
-	</div>
-</Modal>
+</Container>
 
 <style>
 	.right_align {
@@ -83,6 +79,7 @@
 	.delete {
 		justify-content: right;
 		flex: right;
+		margin-top: 1rem;
 	}
 
 	.inline {
diff --git a/src/lib/settings/chats/Members.svelte b/src/lib/settings/chats/Members.svelte
new file mode 100644
index 00000000..fda256f0
--- /dev/null
+++ b/src/lib/settings/chats/Members.svelte
@@ -0,0 +1,76 @@
+<script>
+	import Container from "../../Container.svelte";
+	import Member from "../../Member.svelte";
+	import ProfileView from "../../ProfileView.svelte";
+	import { chat } from "../../stores";
+	import * as modals from "../../modals.js";
+	import GCMemberModal from "../../modals/chats/GCMember.svelte";
+
+</script>
+
+<Container>
+	<h1>Members</h1>
+	<hr>
+
+	<div id="members">
+		<div id="members-inner">
+
+			{#each $chat.members as chatmember}
+			<Container>
+				<button
+					class="member-button"
+					on:click={() => {
+						modals.showModal(GCMemberModal, {
+							username: chatmember,
+						});
+					}}
+				>
+					<Member
+						member={chatmember}
+						owner={chatmember === $chat.owner}
+					/>
+				</button>
+			</Container>
+			{/each}
+
+		</div>
+</Container>
+
+<style>
+
+	#members {
+		height: var(--view-height);
+
+
+		position: sticky;
+		top: 0;
+
+		flex-shrink: 0;
+		flex-grow: 0;
+		width: 100%;
+	}
+	#members-inner {
+		position: relative;
+
+		overflow-y: auto;
+		overflow-x: hidden;
+		overscroll-behavior: none;
+
+		height: calc(100% - 2.50em);
+		width: 100%;
+
+	}
+	.member-button {
+		padding: 0;
+		margin: 0;
+
+		width: 100%;
+
+		background-color: transparent;
+		color: var(--foreground);
+		border: none;
+
+		position: relative;
+		text-align: left;
+	}
+</style>
\ No newline at end of file
diff --git a/src/pages/chats/[chatid].svelte b/src/pages/chats/[chatid].svelte
index 2507a312..2b62b5d6 100644
--- a/src/pages/chats/[chatid].svelte
+++ b/src/pages/chats/[chatid].svelte
@@ -2,7 +2,7 @@
 	Home but it's a group chat.
 -->
 <script>
-	import Invites from "./../../lib/modals/chats/Invites.svelte";
+	import Invites from "../../lib/settings/chats/Invites.svelte";
 	import BasicModal from "../../lib/modals/Basic.svelte";
 	import ChangeChatNicknameModal from "../../lib/modals/chats/ChangeChatNickname.svelte";
 	import GCMemberModal from "../../lib/modals/chats/GCMember.svelte";
diff --git a/src/pages/chats/[chatid]/settings.svelte b/src/pages/chats/[chatid]/settings.svelte
new file mode 100644
index 00000000..e31de2a0
--- /dev/null
+++ b/src/pages/chats/[chatid]/settings.svelte
@@ -0,0 +1,248 @@
+<script>
+	import Members from '../../../lib/settings/chats/Members.svelte';
+	import {adminPermissions} from "./../../../lib/bitField.js";
+	import {params, goto} from "@roxi/routify";
+	import {onMount, onDestroy, prevent_default} from "svelte/internal";
+	import {mobile} from "../../../lib/responsiveness.js";
+	import {authHeader, chat, chats, user} from "../../../lib/stores.js";
+	import Badge from "../../../lib/Badge.svelte";
+	import Chat from "../../../assets/chat.svg";
+	import * as modals from "../../../lib/modals.js";
+	import BasicModal from "../../../lib/modals/Basic.svelte";
+
+	import {
+		User,
+		Paintbrush,
+		Lock,
+		Smartphone,
+		Contact,
+		ShieldBan,
+		Flag,
+		Info,
+	} from "lucide-svelte";
+	import {apiUrl} from "../../../lib/urls.js";
+	import {hasPermission} from "../../../lib/bitField.js";
+	import Invites from "../../../lib/settings/chats/Invites.svelte";
+	import Banned from "../../../lib/settings/chats/Banned.svelte";
+
+	let showTabs = !$mobile;
+	let hoveringTab = "";
+	let selectedTab = $user.name ? "overview" : "appearance";
+
+	export let chatid = $params;
+	let resp;
+	onMount(async () => {
+		if (chatid === "livechat") {
+			$goto("/chats");
+		}
+		try {
+			if ($params.admin) {
+				resp = await fetch(`${apiUrl}admin/chats/${$params.chatid}`, {
+					headers: $authHeader,
+				});
+				if (!resp.ok) {
+					throw new Error(
+						"Response code is not OK; code is " + resp.status
+					);
+				}
+			} else {
+				resp = await fetch(`${apiUrl}chats/${$params.chatid}`, {
+					headers: $authHeader,
+				});
+				if (!resp.ok) {
+					if (resp.status === 404) {
+						throw new Error(
+							`The chat you requested (${$params.chatid}) doesn't exist or you don't have access to it.`
+						);
+					}
+					throw new Error(
+						"Response code is not OK; code is " + resp.status
+					);
+				}
+			}
+		} catch (e) {
+			modals.showModal(BasicModal, {
+				title: "Failed getting chat",
+				desc: e,
+			});
+			return $goto("/chats");
+		}
+
+		chat.set(await resp.json());
+		if (
+			$chat.owner !== $user.name && !(hasPermission(adminPermissions.EDIT_CHATS) && $params.admin)
+		) {
+			$goto(`/chats/${$params.chatid}/`);
+		}
+	});
+</script>
+
+<div class="settings">
+	<div id="tabs">
+		<div class="top">
+			<h2 class="tabs-title">Chat Settings</h2>
+		</div>
+
+		<div id="tabs-inner">
+			{#if $user.name}
+				<button
+					class="tab-button"
+					class:selected={selectedTab == "overview"}
+					on:click={() => (selectedTab = "overview")}
+					on:mouseenter={() => (hoveringTab = "overview")}
+					on:mouseleave={() => (hoveringTab = "")}
+					><img src={Chat} />Overview</button
+				>
+			{/if}
+
+			<button
+				class="tab-button"
+				class:selected={selectedTab == "invites"}
+				on:click={() => (selectedTab = "invites")}
+				on:mouseenter={() => (hoveringTab = "invites")}
+				on:mouseleave={() => (hoveringTab = "")}
+				><Paintbrush
+					color={!$user.mode || selectedTab == "invites"
+						? "#fff"
+						: "#000"}
+					strokeWidth="2.5"
+				/>Invites</button
+			>
+
+			{#if $user.name}
+				<hr style="width: 90%;" />
+
+				<button
+					class="tab-button"
+					class:selected={selectedTab == "BannedUsers"}
+					on:click={() => (selectedTab = "BannedUsers")}
+					on:mouseenter={() => (hoveringTab = "BannedUsers")}
+					on:mouseleave={() => (hoveringTab = "")}
+					><ShieldBan
+						color={!$user.mode || selectedTab == "BannedUsers"
+							? "#fff"
+							: "#000"}
+						strokeWidth="2.5"
+					/>Banned Users</button
+				>
+
+				<button
+					class="tab-button"
+					class:selected={selectedTab == "members"}
+					on:click={() => (selectedTab = "members")}
+					on:mouseenter={() => (hoveringTab = "members")}
+					on:mouseleave={() => (hoveringTab = "")}
+					><User
+						color={!$user.mode || selectedTab == "members"
+							? "#fff"
+							: "#000"}
+						strokeWidth="2.5"
+					/>Members</button
+				>
+			{/if}
+		</div>
+	</div>
+
+	<div id="chat" class:active={!showTabs}>
+		{#if selectedTab == "invites"}
+			<Invites />
+		{:else if selectedTab == "BannedUsers"}
+			<Banned />
+		{:else if selectedTab == "members"}
+			<Members />
+
+		{/if}
+	</div>
+</div>
+
+<style>
+	.tab-button {
+		width: 100%;
+
+		background-color: transparent;
+		color: var(--foreground);
+		border: none;
+
+		position: relative;
+		text-align: left;
+
+		cursor: pointer;
+
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		flex-grow: 1;
+		min-width: 0;
+
+		margin: 0;
+		margin-bottom: 4px;
+	}
+
+	.selected {
+		background-color: var(--orange);
+		cursor: default;
+		color: var(--foreground-orange);
+	}
+
+	/* repetition because of CSS specificity */
+	:global(main.input-hover) .tab-button.tab-button:hover,
+	.tab-button.tab-button:focus-visible {
+		background-color: #7773;
+	}
+	:global(#main) .tab-button.tab-button:active {
+		background-color: #7776;
+	}
+
+	.settings {
+		display: flex;
+		flex-wrap: nowrap;
+		flex-direction: row;
+		gap: 0.4em;
+	}
+	#chat {
+		flex-shrink: 1;
+		flex-grow: 1;
+		overflow: auto;
+	}
+	#tabs {
+		height: var(--view-height);
+		width: min(45%, 12em);
+
+		background-color: var(--background);
+		background-color: var(--background);
+		border: solid 2px var(--orange);
+		border-radius: 5px;
+		box-sizing: border-box;
+
+		position: sticky;
+		top: 0;
+
+		flex-shrink: 0;
+		flex-grow: 0;
+	}
+	:global(#main.layout-mobile) #tabs {
+		width: 100%;
+	}
+	#tabs-inner {
+		position: relative;
+
+		overflow-y: auto;
+		overflow-x: hidden;
+		overscroll-behavior: none;
+
+		height: calc(100% - 2.25em);
+		margin-top: 2.25em;
+
+		padding-inline: 5px;
+	}
+
+	.top {
+		position: absolute;
+		top: 0;
+		width: 100%;
+	}
+
+	.tabs-title {
+		margin: 0.25em;
+	}
+</style>

From 1a04a030d4d2a08f3e141278c7e02d4d182a20fa Mon Sep 17 00:00:00 2001
From: ShowierData9978 <mellfang36@gmail.com>
Date: Tue, 20 Feb 2024 16:43:27 -0600
Subject: [PATCH 12/12] Feat: Settings v2 (2/2)

---
 src/lib/settings/chats/Banned.svelte     |  6 +--
 src/lib/settings/chats/Members.svelte    |  5 +-
 src/lib/settings/chats/Overview.svelte   | 66 ++++++++++++++++++++++++
 src/pages/chats/[chatid].svelte          | 33 +-----------
 src/pages/chats/[chatid]/settings.svelte | 11 ++--
 5 files changed, 82 insertions(+), 39 deletions(-)
 create mode 100644 src/lib/settings/chats/Overview.svelte

diff --git a/src/lib/settings/chats/Banned.svelte b/src/lib/settings/chats/Banned.svelte
index 5456117e..4cd1c281 100644
--- a/src/lib/settings/chats/Banned.svelte
+++ b/src/lib/settings/chats/Banned.svelte
@@ -2,9 +2,9 @@
 	import {authHeader} from "../../stores.js";
 	import {chat} from "../../stores.js";
 	import {apiUrl} from "../../urls.js";
-	import Container from "../../Container.svelte.js";
-	import ProfileView from "../../ProfileView.svelte.js";
-	import Member from "../../Member.svelte.js";
+	import Container from "../../Container.svelte";
+	import ProfileView from "../../ProfileView.svelte";
+	import Member from "../../Member.svelte";
 
 	let bans = [];
 	async function fetchBans() {
diff --git a/src/lib/settings/chats/Members.svelte b/src/lib/settings/chats/Members.svelte
index fda256f0..50ea3381 100644
--- a/src/lib/settings/chats/Members.svelte
+++ b/src/lib/settings/chats/Members.svelte
@@ -38,8 +38,8 @@
 
 <style>
 
+
 	#members {
-		height: var(--view-height);
 
 
 		position: sticky;
@@ -48,6 +48,9 @@
 		flex-shrink: 0;
 		flex-grow: 0;
 		width: 100%;
+		overflow-y: hidden !important;
+		overflow-x: hidden;
+		overscroll-behavior: none;
 	}
 	#members-inner {
 		position: relative;
diff --git a/src/lib/settings/chats/Overview.svelte b/src/lib/settings/chats/Overview.svelte
new file mode 100644
index 00000000..d32f681d
--- /dev/null
+++ b/src/lib/settings/chats/Overview.svelte
@@ -0,0 +1,66 @@
+<script>
+	import { chat } from './../../stores.js';
+	import Container from "../../Container.svelte";
+	import { authHeader } from "../../stores.js";
+	import { apiUrl } from "../../urls.js";
+	import { params } from '@roxi/routify';
+	let nickname = $chat.nickname;
+	let loading, error;
+
+</script>
+
+<Container>
+	<h2> Chat Overview </h2>
+	<form
+	on:change={() => (error = "")}
+	on:submit|preventDefault={async () => {
+		loading = true;
+		try {
+			const resp = await fetch(
+				`${apiUrl}${$params.admin ? "admin/" : ""}chats/${
+					$chat._id
+				}`,
+				{
+					method: "PATCH",
+					headers: {
+						"Content-Type": "application/json",
+						...$authHeader,
+					},
+					body: JSON.stringify({nickname: nickname}),
+				}
+			);
+			if (!resp.ok) {
+				if (resp.status === 429) {
+					throw new Error(
+						"Too many requests! Try again later."
+					);
+				}
+				throw new Error(
+					"Response code is not OK; code is " + resp.status
+				);
+			}
+			if ($params.admin) {
+				$chat = await resp.json();
+			}
+		} catch (e) {
+			loading = false;
+			error = e;
+		}
+	}}
+>
+	<label for="nickname" style={error ? "color: crimson;" : ""}
+		><b>Nickname</b>
+		{#if error}<i>- {error}</i>{/if}</label
+	>
+	<input
+		id="nickname"
+		type="text"
+		class="modal-input white"
+		placeholder="Chat Nickname"
+		maxlength="32"
+		disabled={loading}
+		bind:value={nickname}
+	/><br />
+	<br />
+
+</form></Container>
diff --git a/src/pages/chats/[chatid].svelte b/src/pages/chats/[chatid].svelte
index 2b62b5d6..d4967620 100644
--- a/src/pages/chats/[chatid].svelte
+++ b/src/pages/chats/[chatid].svelte
@@ -183,41 +183,10 @@
 							/>
 						{/if}
 						{#if $chat.owner === $user.name || ($params.admin && hasPermission(adminPermissions.EDIT_CHATS))}
-							<button
-								class="circle"
-								id="HoverOver-Members"
-								on:click|preventDefault={() =>
-									modals.showModal(BannedMembers, {})}
-							>
-								<b>B</b>
-							</button>
-							<button
-								class="circle"
-								on:click|preventDefault={() => {
-									modals.showModal(Invites, {});
-								}}
-							>
-								<b>I</b>
-							</button>
 							<button
 								class="circle settings"
 								on:click={() => {
-									if (
-										isRestricted(
-											userRestrictions.EDITING_CHAT_NICKNAMES
-										) &&
-										!$params.admin
-									) {
-										modals.showModal(AccountBannedModal, {
-											ban: $user.ban,
-											feature:
-												"editing group chat nicknames",
-										});
-									} else {
-										modals.showModal(
-											ChangeChatNicknameModal
-										);
-									}
+									$goto(`/chats/${$params.chatid}/settings`);
 								}}
 							/>
 						{/if}
diff --git a/src/pages/chats/[chatid]/settings.svelte b/src/pages/chats/[chatid]/settings.svelte
index e31de2a0..7d026dfd 100644
--- a/src/pages/chats/[chatid]/settings.svelte
+++ b/src/pages/chats/[chatid]/settings.svelte
@@ -1,4 +1,7 @@
 <script>
+// @ts-nocheck
+
+	// @ts-ignore
 	import Members from '../../../lib/settings/chats/Members.svelte';
 	import {adminPermissions} from "./../../../lib/bitField.js";
 	import {params, goto} from "@roxi/routify";
@@ -24,12 +27,13 @@
 	import {hasPermission} from "../../../lib/bitField.js";
 	import Invites from "../../../lib/settings/chats/Invites.svelte";
 	import Banned from "../../../lib/settings/chats/Banned.svelte";
+	import Overview from '../../../lib/settings/chats/Overview.svelte';
 
 	let showTabs = !$mobile;
 	let hoveringTab = "";
 	let selectedTab = $user.name ? "overview" : "appearance";
 
-	export let chatid = $params;
+	export let chatid = $params.chatid;
 	let resp;
 	onMount(async () => {
 		if (chatid === "livechat") {
@@ -91,7 +95,7 @@
 					on:click={() => (selectedTab = "overview")}
 					on:mouseenter={() => (hoveringTab = "overview")}
 					on:mouseleave={() => (hoveringTab = "")}
-					><img src={Chat} />Overview</button
+					><img src={Chat} alt="Chat Icon"/>Overview</button
 				>
 			{/if}
 
@@ -150,7 +154,8 @@
 			<Banned />
 		{:else if selectedTab == "members"}
 			<Members />
-
+		{:else if selectedTab == "overview"}
+			<Overview />
 		{/if}
 	</div>
 </div>