From e3288c0787f0091a410c3c47193c7f7cb82175f8 Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Wed, 13 Aug 2025 21:23:29 +0200
Subject: [PATCH] feat: update navbar with new content

---
 components/Guild/GuildNavbar.vue              | 95 +++++++++----------
 components/MessageArea.vue                    |  2 +
 .../[serverId]/channels/[channelId].vue       | 16 ++--
 public/themes/layout/gorb.css                 |  1 -
 types/interfaces.ts                           |  1 +
 5 files changed, 56 insertions(+), 59 deletions(-)

diff --git a/components/Guild/GuildNavbar.vue b/components/Guild/GuildNavbar.vue
index da5212e..127057f 100644
--- a/components/Guild/GuildNavbar.vue
+++ b/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,
-#navbar-middle,
-#navbar-right {
-	top: 0;
-	height: var(--navbar-height);
+#channel-info {
+	margin-left: var(--side-margins);
+	gap: calc(var(--font-size) * 0.75);
 
-	display: inline-flex;
-	justify-content: center;
 	align-items: center;
-	gap: var(--navbar-gap);
 }
 
-#navbar-left {
-	left: var(--side-margins);
-}
-
-#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);
-
+#channel-name {
+	font-size: var(--font-size);
 	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;
-	display: flex;
+#buttons {
+	margin-right: var(--side-margins);
+
+	flex-grow: 1;
 	align-items: center;
-	height: var(--navbar-icon-size);
+	justify-content: end;
 }
 
-.navbar-item:hover {
-	color: var(--primary-highlighted-color);
-}
-
-.navbar-item-icon {
-	width: var(--navbar-icon-size);
-	height: 100%;
+.button {
+	color: var(--secondary-text-color);
+	right: 0;
 }
 </style>
\ No newline at end of file
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 26645cd..c3367b7 100644
--- a/components/MessageArea.vue
+++ b/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;
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 74466b9..b6ed93f 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/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"
-				:guild="guild" />
+				v-if="guild && channel"
+				: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();
diff --git a/public/themes/layout/gorb.css b/public/themes/layout/gorb.css
index 054ae91..37b5834 100644
--- a/public/themes/layout/gorb.css
+++ b/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;
diff --git a/types/interfaces.ts b/types/interfaces.ts
index 2ee2108..bb6489b 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -131,6 +131,7 @@ export interface NavbarItem {
 
 export interface INavbar {
 	guild: GuildResponse
+	channel: ChannelResponse
 }
 
 export interface NavbarOptions {