feat: remove loading on this page in favor of layout-wide loading

app.vue

@@ -1,14 +1,11 @@
 <template>
   <div>
-	<Loading v-if="loading" />
     <NuxtPage />
   </div>
 </template>
 
 <script lang="ts" setup>
 
-const loading = useState("loading");
-
 </script>
 
 <style>
@@ -18,7 +15,6 @@ body {
   box-sizing: border-box;
   color: rgb(190, 190, 190);
   background-color: rgb(30, 30, 30);
-  height: 100%;
   margin: 0;
 }
 

components/MessageArea.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="message-area">
-	<div id="messages">
+	<div id="messages" ref="messagesElement">
 		<Message v-for="message of messages" :username="displayNames[message.user_uuid]" :text="message.message"
 			:timestamp="uuidToTimestamp(message.uuid)" format="12" />
 	</div>
@@ -29,7 +29,7 @@ if (messagesRes && props.reverse) {
   messagesRes.reverse();
 }
 
-const messages = ref(messagesRes ?? []);
+const messages = ref<MessageResponse[]>([]);
 
 const displayNames = ref<Record<string, string>>({});
 
@@ -37,6 +37,18 @@ const route = useRoute();
 
 const messageInput = ref<string>();
 
+const messagesElement = ref<HTMLDivElement>();
+
+if (messagesRes) messages.value = messagesRes;
+	const displayNamesArr: Record<string, string> = {};
+	for (const message of messages.value) {
+		if (!displayNamesArr[message.user_uuid]) {
+			const displayName = await getDisplayName(message.user_uuid);
+			displayNamesArr[message.user_uuid] = displayName;
+		}
+	}
+	displayNames.value = displayNamesArr;
+
 const accessToken = useCookie("access_token").value;
 const apiBase = useCookie("api_base").value;
 const { refresh } = useAuth();
@@ -88,14 +100,7 @@ function sendMessage(e: Event) {
 }
 
 onMounted(async () => {
-	const displayNamesArr: Record<string, string> = {};
+	messagesElement.value?.scrollTo({ top: messagesElement.value.scrollHeight });
-	for (const message of messages.value) {
-		if (!displayNamesArr[message.user_uuid]) {
-			const displayName = await getDisplayName(message.user_uuid);
-			displayNamesArr[message.user_uuid] = displayName;
-		}
-	}
-	displayNames.value = displayNamesArr;
 });
 
 </script>
@@ -117,17 +122,9 @@ onMounted(async () => {
 
 #message-box {
 	border: 1px solid rgb(70, 70, 70);
+	padding-bottom: 1dvh;
+	padding-top: 1dvh;
 	margin-bottom: 1dvh;
-	height: 7%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	width: 100%;
-}
-
-#message-form {
-	height: 50%;
-	width: 100%;
 }
 
 #message-input {

composables/auth.ts

@@ -64,8 +64,12 @@ export const useAuth = () => {
       method: "POST"
     }) as any;
     console.log("finished refreshing:", res);
-	accessToken.value = res?.access_token;
+    if (res.access_token) {
+      accessToken.value = res.access_token;
       console.log("set new access token");
+    } else {
+      console.log("refresh didn't return access token");
+    }
   }
 
   async function fetchUser() {

layouts/auth.vue

@@ -1,6 +1,6 @@
 <template>
-  <Loading v-if="!mounted" />
+  <NuxtLayout>
-  <div v-else id="root-container" style="margin-top: 5dvh;">
+    <div id="root-container" style="margin-top: 5dvh;">
       <div id="main-container">
         <div v-if="!instanceUrl">
           <div v-if="instanceError" style="color: red;">
@@ -44,12 +44,12 @@
         </div>
       </div>
     </div>
+  </NuxtLayout>
 </template>
 
 <script lang="ts" setup>
 import { FetchError } from 'ofetch';
 
-const mounted = ref(false);
 const redirectTo = useRoute().query.redirect_to;
 
 const apiVersion = useRuntimeConfig().public.apiVersion;
@@ -64,7 +64,6 @@ if (auth.accessToken.value) {
 }
 
 onMounted(() => {
-  mounted.value = true;
   const cookie = useCookie("instance_url").value;
   instanceUrl.value = cookie;
   console.log(cookie);

layouts/client.vue

@@ -1,5 +1,6 @@
 <template>
-	<div id="client-root">
+	<Loading v-show="loading" />
+	<div :class="{ hidden: loading, visible: !loading }" id="client-root">
 		<div id="homebar">
 			<div class="homebar-item">
 				main bar
@@ -21,6 +22,8 @@
 
 <script lang="ts" setup>
 
+const loading = useState("loading", () => false);
+
 const servers = [
 	{
 		name: "Test",
@@ -90,11 +93,21 @@ function sendMessage(e: Event) {
 <style>
 #client-root {
 	/* border: 1px solid white; */
-	height: 100%;
+	height: 100dvh;
 	display: grid;
 	grid-template-columns: 1fr 4fr 18fr 4fr;
 	grid-template-rows: 4dvh auto;
 	text-align: center;
+	
+}
+
+.hidden {
+	opacity: 0%;
+}
+
+.visible {
+	opacity: 100%;
+	transition-duration: 500ms;
 }
 
 #homebar {
@@ -114,7 +127,6 @@ function sendMessage(e: Event) {
 #__nuxt {
 	display: flex;
 	flex-flow: column;
-	height: 100%;
 }
 
 .grid-column {

middleware/auth.global.ts

@@ -1,5 +1,6 @@
 export default defineNuxtRouteMiddleware(async (to, from) => {
 	console.log("to.path:", to.path);
+	const loading = useState("loading");
 	const accessToken = useCookie("access_token").value;
 	if (["/login", "/register"].includes(to.path)) {
 		if (accessToken) {
@@ -9,9 +10,15 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 	};
 
 	if (!accessToken) {
+		loading.value = true;
+		console.log("set loading to true");
 		const { refresh } = useAuth();
 		console.log("hi");
 		await refresh();
-		return await navigateTo("/login");
+		const query = new URLSearchParams();
+		query.set("redirect_to", to.path);
+		loading.value = false;
+		console.log("set loading to false");
+		return await navigateTo("/login" + (query ?? ""));
 	}
 })

nuxt.config.ts

@@ -10,7 +10,19 @@ export default defineNuxtConfig({
       E.g.: baseURL set to "/web" would host at https://gorb.app/web
       Default is "/" (aka root), which hosts at https://gorb.app/
     */
-    baseURL: "/web"
+    baseURL: "/",
+    head: {
+      title: 'Gorb',
+      // this is purely used to embed in that other chat app, and similar stuff
+      meta: [
+        { property: 'og:title', content: 'Gorb' },
+        { property: 'og:description', content: 'Gorb is an open-source (and eventually federated) chat platform where you can join and chat in servers, chat privately in DMs, and more.' },
+        { property: 'og:url', content: 'https://gorb.app/web' },
+        { property: 'og:type', content: 'website' },
+        { property: 'og:site_name', content: 'Gorb' },
+        { property: 'theme-color', content: "#df5f0b" }
+      ]
+    }
   },
   runtimeConfig: {
     public: {

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

@@ -39,25 +39,20 @@
 
 const route = useRoute();
 
-const server: GuildResponse | undefined = await fetchWithApi(`servers/${route.params.serverId}`);
+const loading = useState("loading");
-
-const channels: ChannelResponse[] | undefined = await fetchWithApi(
-	`servers/${route.params.serverId}/channels`
-);
-const channel: ChannelResponse | undefined = await fetchWithApi(
-	route.path
-);
 
 const channelUrlPath = `servers/${route.params.serverId}/channels/${route.params.channelId}`;
 
-console.log("channel:", channel);
+const server = ref<GuildResponse | undefined>();
+const channels = ref<ChannelResponse[] | undefined>();
+const channel = ref<ChannelResponse | undefined>();
 
 const showInvitePopup = ref(false);
 
 import type { ChannelResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
 
 //const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
-//console.log("servers:", servers);
+//console.log("channelid: servers:", servers);
 const members = [
 	{
 		id: "3287484395",
@@ -106,6 +101,24 @@ 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(
+		`servers/${route.params.serverId}/channels`
+	);
+	channel.value = await fetchWithApi(
+		route.path
+	);
+
+	console.log("channelid: channel:", channel);
+	await sleep(3000);
+	loading.value = false;
+	console.log("channelid: set loading to false");
+});
+
 function showServerSettings() { }
 
 function toggleInvitePopup(e: Event) {