feat: update navbar with new content

components/Guild/GuildNavbar.vue

@@ -1,6 +1,20 @@
 <template>
-	<div id="navbar">
+	<div id="navbar" class="navbar-row">
-		<!--  -->
+		<div id="channel-info" class="navbar-row">
+			<!-- h1 to help screen readers -->
+			<h1 id="channel-name">
+				# {{ channel.name }}
+			</h1>
+			<span id="channel-description">
+				{{ channel.description }}
+			</span>
+		</div>
+
+		<div id="buttons" class="navbar-row">
+			<a class="button" href="https://git.gorb.app/gorb/frontend">
+				<Icon name="lucide:code-xml" title="Source"/>
+			</a>
+		</div>
 	</div>
 </template>
 
@@ -12,77 +26,54 @@ const props = defineProps<INavbar>();
 </script>
 
 <style scoped>
+.navbar-row {
+	display: flex;
+	flex-direction: row;
+}
+
 #navbar {
+	--font-size: calc(var(--navbar-height) * 0.45);
+	--side-margins: calc(var(--font-size) * 0.5);
+	
 	min-height: var(--navbar-height);
 	max-height: var(--navbar-height);
 	width: 100%;
 
-	display: flex;
-	justify-content: center;
-
 	background: var(--optional-topbar-background);
 	background-color: var(--topbar-background-color);
 	border-bottom: 1px solid var(--padding-color);
 }
 
-#navbar-left,
+#channel-info {
-#navbar-middle,
+	margin-left: var(--side-margins);
-#navbar-right {
+	gap: calc(var(--font-size) * 0.75);
-	top: 0;
-	height: var(--navbar-height);
 
-	display: inline-flex;
-	justify-content: center;
 	align-items: center;
-	gap: var(--navbar-gap);
 }
 
-#navbar-left {
+#channel-name {
-	left: var(--side-margins);
+	font-size: var(--font-size);
-}
-
-#navbar-middle {
-	max-width: 50dvw;
-}
-
-#navbar-right {
-	right: var(--side-margins);
-}
-
-.context-icon {
-	height: calc(var(--navbar-height) * 0.7);
-	width: calc(var(--navbar-height) * 0.7);
-	border-radius: var(--guild-icon-radius);
-}
-
-.context-title {
-	min-height: var(--navbar-height);
-	max-height: var(--navbar-height);
-
 	font-weight: 500;
-	font-size: calc(var(--navbar-height) * .5);
-	line-height: var(--navbar-height);
 }
 
-.navbar-item {
+#channel-description {
+	font-size: calc(var(--font-size) * 0.8);
+	text-overflow: ellipsis;
+
+	/* TODO make new theme colour? unsure of it's name, this is good enough for now */
 	color: var(--reply-text-color);
-	background-color: transparent;
+}
-	border: none;
-	cursor: pointer;
-	padding: 0;
 
-	transition: color 300ms;
+#buttons {
-	display: flex;
+	margin-right: var(--side-margins);
+
+	flex-grow: 1;
 	align-items: center;
-	height: var(--navbar-icon-size);
+	justify-content: end;
 }
 
-.navbar-item:hover {
+.button {
-	color: var(--primary-highlighted-color);
+	color: var(--secondary-text-color);
-}
+	right: 0;
-
-.navbar-item-icon {
-	width: var(--navbar-icon-size);
-	height: 100%;
 }
 </style>

components/MessageArea.vue

@@ -47,6 +47,8 @@ import { generateIrcColor } from '#imports';
 const { getDisplayName } = useProfile()
 const { fetchMe } = useApi()
 
+// TODO this file is a mess, and we need to stop using fetchWithApi
+
 const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
 
 const me = await fetchMe() as UserResponse;

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

@@ -3,8 +3,9 @@
 		<GuildSidebar v-if="guild" :guild="guild" />
 		<div class="flex-container-column">
 			<GuildNavbar id="navbar" 
-				v-if="guild"
+				v-if="guild && channel"
-				:guild="guild" />
+				:guild="guild"
+				:channel="channel"/>
 
 			<div class="flex-container-row">
 				<MessageArea :channel-url="channelUrlPath" />
@@ -15,14 +16,17 @@
 </template>
 
 <script lang="ts" setup>
-import type { GuildResponse, INavbar } from "~/types/interfaces";
 
 const route = useRoute();
-const { fetchGuild } = useApi()
+const { fetchGuild, fetchChannel } = useApi()
 
-const channelUrlPath = `channels/${route.params.channelId}`;
+const channelId = route.params.channelId as string
+const guildId = route.params.serverId as string
 
-const guild: GuildResponse | undefined = await fetchGuild(route.params.serverId as string)
+const channelUrlPath = `channels/${channelId}`;
+
+const guild = await fetchGuild(guildId)
+const channel = await fetchChannel(channelId)
 
 // function toggleInvitePopup(e: Event) {
 // 	e.preventDefault();

public/themes/layout/gorb.css

@@ -12,7 +12,6 @@ complementaryColor = white
 	--navbar-height: 5dvh;
 	--navbar-icon-size: 3dvh;
 	--navbar-gap: calc(3dvh * .2);
-	--side-margins: calc(.6dvw + .35dvh); /* try to make it reasonable at any aspect ratio */
 	
 	--standard-radius: .5em;
 	--button-radius: .6em;

types/interfaces.ts

@@ -131,6 +131,7 @@ export interface NavbarItem {
 
 export interface INavbar {
 	guild: GuildResponse
+	channel: ChannelResponse
 }
 
 export interface NavbarOptions {