app.vue

@@ -49,9 +49,4 @@ a {
   border-radius: .3rem;
 }
 
-
-.invisible {
-	visibility: hidden;
-}
-
 </style>

components/Channel.vue

@@ -1,21 +1,19 @@
 <template>
-  <div v-if="isCurrentChannel" class="channel-list-link-container rounded-corners current-channel">
+  <div v-if="current" class="channel-list-link-container">
 	<NuxtLink class="channel-list-link" :href="props.href">
-		# {{ props.name }}
+		# {{ name }}
 	</NuxtLink>
   </div>
-  <div v-else class="channel-list-link-container rounded-corners">
+  <div v-else class="channel-list-link-container current-channel">
 	<NuxtLink class="channel-list-link" :href="props.href">
-		# {{ props.name }}
+		# {{ name }}
 	</NuxtLink>
   </div>
 </template>
 
 <script lang="ts" setup>
 
-const props = defineProps<{ name: string, uuid: string, currentUuid: string, href: string }>();
+const props = defineProps<{ name: string, href: string, current?: boolean }>();
-
-const isCurrentChannel = props.uuid == props.currentUuid;
 
 </script>
 
@@ -32,7 +30,6 @@ const isCurrentChannel = props.uuid == props.currentUuid;
 	display: flex;
 	height: 4dvh;
 	white-space: nowrap;
-	align-items: center;
 }
 
 .current-channel {

components/Message.vue

@@ -1,6 +1,6 @@
 <template>
-	<div v-if="props.type == 'normal'" class="message normal-message" :class="{ 'message-margin-bottom': props.marginBottom }">
+	<div class="message">
-		<div class="left-column">
+		<div>
 			<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username">
 			<Icon v-else name="lucide:user" class="message-author-avatar" />
 		</div>
@@ -11,6 +11,10 @@
 				</span>
 				<span class="message-date" :title="date.toString()">
 					{{ messageDate }}
+					<!--
+					<div class="message-date-hover" v-if="showHover">
+					</div>
+					-->
 				</span>
 			</div>
 			<div class="message-text">
@@ -18,45 +22,17 @@
 			</div>
 		</div>
 	</div>
-	<div v-else ref="messageElement" class="message compact-message">
-		<div class="left-column">
-			<div>
-				<span :class="{ 'invisible': dateHidden }" class="message-date" :title="date.toString()">
-					{{ messageDate }}
-				</span>
-			</div>
-		</div>
-		<div class="message-data">
-			<div class="message-text">
-				{{ text }}
-			</div>
-		</div>
-	</div>
 </template>
 
 <script lang="ts" setup>
-const props = defineProps<{
+const props = defineProps<{ class?: string, img?: string | null, username: string, text: string, timestamp: number, format: "12" | "24" }>();
-	class?: string,
-	img?: string | null,
-	username: string,
-	text: string,
-	timestamp: number,
-	format: "12" | "24",
-	type: "normal" | "compact",
-	marginBottom: boolean
-}>();
 
 const messageDate = ref<string>();
-
+const showHover = ref(false);
-const messageElement = ref<HTMLDivElement>();
-
-const dateHidden = ref<boolean>(true);
 
 const date = new Date(props.timestamp);
 
-console.log("Message.vue: message:", props.text);
+console.log("message:", props.text);
-console.log("Message.vue: message type:", props.type);
-
 let dateHour = date.getHours();
 let dateMinute = date.getMinutes();
 if (props.format == "12") {
@@ -71,19 +47,7 @@ if (props.format == "12") {
 	}
 } else {
 	messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute}`
-}
+	}
-
-onMounted(() => {
-	messageElement.value?.addEventListener("mouseenter", (e: Event) => {
-		console.log("mouse enter");
-		dateHidden.value = false;
-	});
-
-	messageElement.value?.addEventListener("mouseleave", (e: Event) => {
-		console.log("mouse leave");
-		dateHidden.value = true;
-	});
-});
 
 //function toggleTooltip(e: Event) {
 //	showHover.value = !showHover.value;
@@ -95,13 +59,10 @@ onMounted(() => {
 .message {
 	text-align: left;
 	/* border: 1px solid lightcoral; */
-	display: grid;
-	grid-template-columns: 1fr 19fr;
-	align-items: center;
-}
-
-.message-margin-bottom {
 	margin-bottom: 1dvh;
+	display: grid;
+	grid-template-columns: auto 1fr;
+	align-items: center;
 }
 
 .message-metadata {
@@ -125,25 +86,22 @@ onMounted(() => {
 }
 
 .message-author-avatar {
-	height: 2.3em;
+	margin-right: 1dvw;
-	width: 2.3em;
+	width: 3em;
 	border-radius: 50%;
 }
 
-.left-column {
-	margin-right: .5dvw;
-	text-align: center;
-	align-content: center;
-}
-
 .author-username {
 	margin-right: .5dvw;
 	color: white;
 }
 
 .message-date {
-	font-size: .7em;
+	font-size: small;
 	color: rgb(150, 150, 150);
+}
+
+.message-date:hover {
 	cursor: default;
 }
 

components/MessageArea.vue

@@ -1,23 +1,18 @@
 <template>
-	<div id="message-area">
+  <div id="message-area">
-		<div id="messages" ref="messagesElement">
+	<div id="messages" ref="messagesElement">
-			<div v-for="(message, i) of messages">
+		<Message v-for="message of messages" :username="message.user.display_name ?? message.user.username" :text="message.message"
-				<Message :username="message.user.display_name ?? message.user.username"
+			:timestamp="uuidToTimestamp(message.uuid)" :img="message.user.avatar" format="12" />
-					:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar"
-					format="12" :type="messagesType[message.uuid]"
-					:margin-bottom="messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal'" />
-			</div>
-		</div>
-		<div id="message-box" class="rounded-corners">
-			<form id="message-form" @submit="sendMessage">
-				<input v-model="messageInput" id="message-box-input" class="rounded-corners" type="text"
-					name="message-input" autocomplete="off">
-				<button id="submit-button" type="submit">
-					<Icon name="lucide:send" />
-				</button>
-			</form>
-		</div>
 	</div>
+	<div id="message-box" class="rounded-corners">
+		<form id="message-form" @submit="sendMessage">
+			<input v-model="messageInput" id="message-box-input" class="rounded-corners" type="text" name="message-input" autocomplete="off">
+			<button id="submit-button" type="submit">
+				<Icon name="lucide:send" />
+			</button>
+		</form>
+	</div>
+</div>
 </template>
 
 <script lang="ts" setup>
@@ -26,59 +21,12 @@ import scrollToBottom from '~/utils/scrollToBottom';
 
 const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
 
-const messageTimestamps = ref<Record<string, number>>({});
-const messagesType = ref<Record<string, "normal" | "compact">>({});
-
 const messagesRes: MessageResponse[] | undefined = await fetchWithApi(
 	`${props.channelUrl}/messages`,
 	{ query: { "amount": props.amount ?? 100, "offset": props.offset ?? 0 } }
 );
 if (messagesRes) {
-	messagesRes.reverse();
+  messagesRes.reverse();
-	console.log("messages res:", messagesRes.map(msg => msg.message));
-	const firstMessageByUsers = ref<Record<string, MessageResponse | undefined>>({});
-	for (const message of messagesRes) {
-		messageTimestamps.value[message.uuid] = uuidToTimestamp(message.uuid);
-
-		console.log("message:", message.message);
-		const firstByUser = firstMessageByUsers.value[message.user.uuid];
-		if (firstByUser) {
-			console.log("first by user exists");
-			if (message.user.uuid != firstByUser.user.uuid) {
-				console.log("message is by new user, setting their first message")
-				firstMessageByUsers.value[message.user.uuid] = message;
-				console.log("RETURNING FALSE");
-				messagesType.value[message.uuid] = "normal";
-				continue;
-			}
-		} else {
-			console.log("first by user doesn't exist");
-			console.log(`setting first post by user ${message.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`);
-			firstMessageByUsers.value[message.user.uuid] = message;
-			console.log("RETURNING FALSE");
-			messagesType.value[message.uuid] = "normal";
-			continue;
-		}
-		const messageGroupingMaxDifference = useRuntimeConfig().public.messageGroupingMaxDifference;
-		const prevTimestamp = messageTimestamps.value[firstByUser.uuid];
-		const timestamp = messageTimestamps.value[message.uuid];
-		console.log("first message timestamp:", prevTimestamp);
-		console.log("timestamp:", timestamp);
-		const diff = (timestamp - prevTimestamp);
-		console.log("min diff:", messageGroupingMaxDifference);
-		console.log("diff:", diff);
-		const lessThanMax = diff <= messageGroupingMaxDifference;
-		console.log("group?", lessThanMax);
-		if (!lessThanMax) {
-			console.log("diff exceeds max");
-			console.log(`setting first post by user ${message.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`)
-			firstMessageByUsers.value[message.user.uuid] = message;
-			messagesType.value[message.uuid] = "normal";
-			continue;
-		}
-		console.log("RETURNING " + lessThanMax.toString().toUpperCase());
-		messagesType.value[message.uuid] = "compact";
-	}
 }
 
 const messages = ref<MessageResponse[]>([]);
@@ -101,28 +49,29 @@ if (accessToken && apiBase) {
 	do {
 		console.log("Trying to connect to channel WebSocket...");
 		ws = new WebSocket(`${apiBase.replace("http", "ws").replace("3000", "8080")}/${props.channelUrl}/socket`,
-			["Authorization", accessToken]
+		["Authorization", accessToken]
-		);
+	);
-		if (ws) break;
+	if (ws) break;
-		await sleep(5000);
+	await sleep(5000);
-	} while (!ws);
+} while (!ws);
+
+ws.addEventListener("open", (event) => {
+	console.log("WebSocket connected!");
+});
+
+ws.addEventListener("message", async (event) => {
+	console.log("event data:", event.data);
+	messages.value?.push(
+		JSON.parse(event.data)
+	);
+	await nextTick();
+	if (messagesElement.value) {
+		console.log("scrolling to bottom");
+		scrollToBottom(messagesElement);
+	}
+});
 
-	ws.addEventListener("open", (event) => {
-		console.log("WebSocket connected!");
-	});
 
-	ws.addEventListener("message", async (event) => {
-		console.log("event data:", event.data);
-		console.log("message uuid:", event.data.uuid);
-		const parsedData = JSON.parse(event.data);
-		messageTimestamps.value[parsedData.uuid] = uuidToTimestamp(parsedData.uuid);
-		messages.value.push(parsedData);
-		await nextTick();
-		if (messagesElement.value) {
-			console.log("scrolling to bottom");
-			scrollToBottom(messagesElement);
-		}
-	});
 
 } else {
 	await refresh();
@@ -133,7 +82,7 @@ function sendMessage(e: Event) {
 	const text = messageInput.value;
 	console.log("text:", text);
 	if (text) {
-		ws.send(text);
+		ws.send(text);	
 		messageInput.value = "";
 		console.log("MESSAGE SENT!!!");
 	}
@@ -148,11 +97,13 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+
 #message-area {
 	display: grid;
 	grid-template-columns: 1fr;
 	grid-template-rows: 8fr 1fr;
 	justify-content: space-between;
+	padding-top: 3dvh;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	overflow: hidden;
@@ -167,7 +118,7 @@ onMounted(async () => {
 	padding-bottom: 1dvh;
 	padding-top: 1dvh;
 	margin-bottom: 1dvh;
-	margin-top: 2dvh;
+	margin-top: 1dvh;
 }
 
 #message-form {
@@ -201,4 +152,5 @@ onMounted(async () => {
 #submit-button:hover {
 	color: rgb(255, 255, 255);
 }
+
 </style>

layouts/auth.vue

@@ -48,30 +48,24 @@
 <script lang="ts" setup>
 import { FetchError } from 'ofetch';
 
+const redirectTo = useRoute().query.redirect_to;
+
 const apiVersion = useRuntimeConfig().public.apiVersion;
 const instanceUrl = ref<string | null | undefined>(null);
 const instanceUrlInput = ref<string>();
 const instanceError = ref<string>();
-const requestUrl = useRequestURL();
-const apiBase = useCookie("api_base");
 
 const auth = useAuth();
 
-const { status, data: gorbTxt } = await useFetch(`${requestUrl.protocol}//${requestUrl.host}/.well-known/gorb.txt`, { responseType: "text" });
+if (auth.accessToken.value) {
-if (status.value == "success" && gorbTxt.value) {
+  //navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string);
-	console.log("got gorb.txt:", gorbTxt.value);
-	const parsed = parseWellKnown(gorbTxt.value as string);
-	if (parsed.ApiBaseUrl) {
-		apiBase.value = parsed.ApiBaseUrl;
-		console.log("set apiBase to:", parsed.ApiBaseUrl);
-	}
 }
 
-onMounted(async () => {
+onMounted(() => {
-	const cookie = useCookie("instance_url").value;
+  const cookie = useCookie("instance_url").value;
-	instanceUrl.value = cookie;
+  instanceUrl.value = cookie;
-	console.log(cookie);
+  console.log(cookie);
-	console.log("set instance url to:", instanceUrl.value);
+  console.log("set instance url to:", instanceUrl.value);
 });
 
 async function selectInstance(e: Event) {
@@ -80,13 +74,14 @@ async function selectInstance(e: Event) {
     const instanceUrlObj = new URL(`api/v${apiVersion}/stats`, instanceUrlInput.value.endsWith("/") ? instanceUrlInput.value : instanceUrlInput.value + "/");
     try {
       const res = await $fetch.raw(instanceUrlObj.href);
+      console.log("instance res:", res);
       instanceError.value = "";
-	  
       const origin = new URL(res.url).origin;
+      localStorage.setItem("instanceUrl", origin);
       instanceUrl.value = origin;
       useCookie("instance_url").value = origin;
-
+      useCookie("api_base").value = origin + `/api/v${apiVersion}`;
-      if (!apiBase.value) apiBase.value = origin + `/api/v${apiVersion}`;
+      localStorage.setItem("apiBase", origin + `/api/v${apiVersion}`);
     } catch (error: any) {
       if (error instanceof FetchError) {
         console.log("Status code:", error.response?.status);

layouts/client.vue

@@ -21,12 +21,23 @@
 </template>
 
 <script lang="ts" setup>
-import type { GuildResponse } from '~/types/interfaces';
-
 
 const loading = useState("loading", () => false);
 
-const servers: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
+const servers = [
+	{
+		name: "Test",
+		uuid: "0197088b-e4e8-7033-8e6b-7ceb065e9acd"
+	},
+	{
+		name: "Test",
+		uuid: "0197088b-e4e8-7033-8e6b-7ceb065e9acd"
+	},
+	{
+		name: "Test",
+		uuid: "0197088b-e4e8-7033-8e6b-7ceb065e9acd"
+	}
+];
 
 //const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
 //console.log("servers:", servers);
@@ -69,6 +80,14 @@ const members = [
 	}
 ];
 
+function sendMessage(e: Event) {
+	e.preventDefault();
+	const textInput = document.getElementById("message-box-input") as HTMLInputElement;
+	const text = textInput.value;
+	console.log("MESSAGE SENT!!!");
+	console.log("text:", text);
+}
+
 </script>
 
 <style>

nuxt.config.ts

@@ -26,8 +26,7 @@ export default defineNuxtConfig({
   },
   runtimeConfig: {
     public: {
-      apiVersion: 1,
+      apiVersion: 1
-      messageGroupingMaxDifference: 300000
     }
   },
   /* nitro: {

pages/login.vue

@@ -15,15 +15,13 @@
 				<button type="submit">Login</button>
 			</div>
 		</form>
-		<div v-if="registrationEnabled">
+		<div>
 			Don't have an account? <NuxtLink :href="registerUrl">Register</NuxtLink> one!
 		</div>
 	</NuxtLayout>
 </template>
 
 <script lang="ts" setup>
-import type { StatsResponse } from '~/types/interfaces';
-
 
 definePageMeta({
 	layout: "auth"
@@ -38,18 +36,6 @@ const form = reactive({
 
 const query = useRoute().query as Record<string, string>;
 const searchParams = new URLSearchParams(query);
-
-const instanceUrl = useCookie("instance_url").value;
-const registrationEnabled = ref<boolean>(true);
-
-if (instanceUrl) {
-	const statsUrl = new URL("/stats", instanceUrl).href;
-	const { status, data } = await useFetch<StatsResponse>(statsUrl);
-	if (status.value == "success" && data.value) {
-		registrationEnabled.value = data.value.registration_enabled;
-	}
-}
-
 const registerUrl = `/register?${searchParams}`
 
 const { login } = useAuth();

pages/register.vue

@@ -1,6 +1,6 @@
 <template>
   <NuxtLayout>
-    <form v-if="registrationEnabled" @submit="register">
+    <form @submit="register">
       <div>
         <!--
         <span class="form-error" v-if="errors.username.length > 0">
@@ -32,9 +32,6 @@
         <button type="submit">Register</button>
       </div>
     </form>
-    <div v-else>
-      <h3>This instance has disabled registration.</h3>
-    </div>
     <div>
       Already have an account? <NuxtLink :href="loginUrl">Log in</NuxtLink>!
     </div>
@@ -42,22 +39,11 @@
 </template>
 
 <script lang="ts" setup>
-import type { StatsResponse } from '~/types/interfaces';
+
 definePageMeta({
   layout: "auth"
 })
 
-const instanceUrl = useCookie("instance_url").value;
-const registrationEnabled = ref<boolean>(false);
-
-if (instanceUrl) {
-	const statsUrl = new URL("/stats", instanceUrl).href;
-	const { status, data, error } = await useFetch<StatsResponse>(statsUrl);
-	if (status.value == "success" && data.value) {
-		registrationEnabled.value = data.value.registration_enabled;
-	}
-}
-
 const form = reactive({
   username: "",
   email: "",

pages/servers/[serverId]/channels/[channelId].vue

@@ -18,9 +18,10 @@
 				</h3>
 			</div>
 			<div id="channels-list">
-				<Channel v-for="channel of channels" :name="channel.name"
+				<Channel v-for="channel of channels" v-if="route.params.channelId == channel?.uuid" :name="channel.name"
-					:uuid="channel.uuid" :current-uuid="(route.params.channelId as string)"
+					:href="route.path" :current="true" />
-					:href="`/guilds/${route.params.serverId}/channels/${channel.uuid}`" />
+				<Channel v-for="channel of channels" v-else :name="channel.name"
+					:href="`/servers/${route.params.serverId}/channels/${channel.uuid}`" />
 			</div>
 		</div>
 		<MessageArea :channel-url="channelUrlPath" />
@@ -40,7 +41,7 @@ const route = useRoute();
 
 const loading = useState("loading");
 
-const channelUrlPath = `/channels/${route.params.channelId}`;
+const channelUrlPath = `servers/${route.params.serverId}/channels/${route.params.channelId}`;
 
 const server = ref<GuildResponse | undefined>();
 const channels = ref<ChannelResponse[] | undefined>();
@@ -101,15 +102,19 @@ const members = [
 ];
 
 onMounted(async () => {
+	loading.value = true;
 	console.log("channelid: set loading to true");
 	server.value = await fetchWithApi(`servers/${route.params.serverId}`);
 
-	channels.value = await fetchWithApi(`/channels`);
+	channels.value = await fetchWithApi(
-	console.log("channels:", channels.value);
+		`servers/${route.params.serverId}/channels`
-	channel.value = await fetchWithApi(route.path);
+	);
-	console.log("channel:", channel.value);
+	channel.value = await fetchWithApi(
+		route.path
+	);
 
 	console.log("channelid: channel:", channel);
+	loading.value = false;
 	console.log("channelid: set loading to false");
 });
 
@@ -146,10 +151,4 @@ function toggleInvitePopup(e: Event) {
 	border-left: 1px solid rgb(70, 70, 70);
 }
 
-#channels-list {
-	display: flex;
-	flex-direction: column;
-	gap: 1dvh;
-}
-
 </style>

pages/servers/[serverId]/index.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-const server = await fetchWithApi(`/guilds/${useRoute().params.serverId}`);
+const server = await fetchWithApi(`/servers/${useRoute().params.serverId}`);
 console.log("server:", server);
 
 </script>

types/interfaces.ts

@@ -53,12 +53,3 @@ export interface UserResponse {
 	email?: string,
 	email_verified?: boolean
   }
-
-export interface StatsResponse {
-	accounts: number,
-    uptime: number,
-    version: string,
-    registration_enabled: boolean,
-    email_verification_required: boolean,
-    build_number: string
-}

utils/fetchMember.ts

@@ -1,6 +1,6 @@
 import type { UserResponse } from "~/types/interfaces"
 
 export default async (serverId: string, memberId: string): Promise<UserResponse> => {
-	const user = await fetchWithApi(`/guilds/${serverId}/members/${memberId}`) as UserResponse;
+	const user = await fetchWithApi(`/servers/${serverId}/members/${memberId}`) as UserResponse;
 	return user;
 }

utils/parseWellKnown.ts

@@ -1,11 +0,0 @@
-export default (wellKnownText: string): Record<string, string> => {
-	const lines = wellKnownText.trim().replaceAll(" ", "").split("\n");
-	const settings: Record<string, string> = {};
-	for (const line of lines) {
-		const separatorIndex = line.search(":");
-		const key = line.slice(0, separatorIndex);
-		const value = line.slice(separatorIndex + 1, line.length);
-		settings[key] = value;
-	}
-	return settings;
-}