From a9af11dcb84a81e0b57f74998c384e408c0b12ad Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Wed, 13 Aug 2025 20:52:10 +0200
Subject: [PATCH] refactor: move sidebar to own component

---
 components/UserInterface/SidebarColumn.vue    | 218 ++++++++++++++++++
 layouts/client.vue                            |   4 +-
 .../[serverId]/channels/[channelId].vue       | 169 ++------------
 3 files changed, 239 insertions(+), 152 deletions(-)
 create mode 100644 components/UserInterface/SidebarColumn.vue

diff --git a/components/UserInterface/SidebarColumn.vue b/components/UserInterface/SidebarColumn.vue
new file mode 100644
index 0000000..f09cee3
--- /dev/null
+++ b/components/UserInterface/SidebarColumn.vue
@@ -0,0 +1,218 @@
+<template>
+	<div id="sidebar-column">
+		<div class="side-column-segment">
+			<NuxtLink id="home-button" href="/me">
+				<img class="sidebar-icon" src="/public/icon.svg"/>
+			</NuxtLink>
+		</div>
+
+		<VerticalSpacer />
+		<div class="sidebar-column-segment" id="guild-column">
+			<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`" id="guild-icon-container">
+				<NuxtImg v-if="guild.icon"
+					class="sidebar-icon guild-icon"
+					:alt="guild.name"
+					:src="guild.icon" />
+				<DefaultIcon v-else 
+					class="sidebar-icon guild-icon" 
+					:alt="guild.name"
+					:name="guild.name" :seed="guild.uuid"/>
+			</NuxtLink>
+		</div>
+		<VerticalSpacer />
+
+		<div class="sidebar-column-segment">
+			<div ref="createButtonContainer">
+				<button id="create-button" class="sidebar-bottom-buttons" @click.prevent="createDropdown">
+					<Icon id="create-icon" name="lucide:square-plus" alt="Create or join guild"/>
+				</button>
+			</div>
+			<NuxtLink id="settings-menu" class="sidebar-bottom-buttons" href="/settings">
+				<Icon name="lucide:settings" alt="Settings menu" />
+			</NuxtLink>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ModalBase } from '#components';
+import { render } from 'vue';
+import GuildDropdown from '~/components/Guild/GuildDropdown.vue';
+import DefaultIcon from '~/components/DefaultIcon.vue';
+import Button from '~/components/UserInterface/Button.vue';
+import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
+import type { GuildResponse } from '~/types/interfaces';
+
+const { getDisplayName } = useProfile()
+const { fetchMyGuilds, joinGuild, createGuild, createChannel } = useApi();
+
+const createButtonContainer = ref<HTMLButtonElement>();
+
+const guilds = await fetchMyGuilds();
+
+// TODO we need to turn this into an actual modal
+const options = [
+	{ name: "Join", value: "join", callback: async () => {
+		console.log("join guild!");
+		const div = document.createElement("div");
+		const guildJoinModal = h(ModalBase, {
+			title: "Join Guild",
+			id: "guild-join-modal",
+			onClose: () => {
+				unrender(div);
+			},
+			onCancel: () => {
+				unrender(div);
+			},
+			style: "height: 20dvh; width: 15dvw"
+		},
+		[
+			h("input", {
+				id: "guild-invite-input",
+				type: "text",
+				placeholder: "oyqICZ",
+			}),
+			h(Button, {
+				text: "Join",
+				variant: "normal",
+				callback: async () => {
+					const input = document.getElementById("guild-invite-input") as HTMLInputElement;
+					const invite = input.value;
+					if (invite.length == 6) {
+						try {
+							const joinedGuild = await joinGuild(invite);
+							guilds.push(joinedGuild);
+							return await navigateTo(`/servers/${joinedGuild.uuid}`);
+						} catch (error) {
+							alert(`Couldn't use invite: ${error}`);
+						}
+					}
+				}
+			})
+		]);
+		document.body.appendChild(div);
+		render(guildJoinModal, div);
+	}
+},
+{ name: "Create", value: "create", callback: async () => {
+	console.log("create guild");
+	const user = await useAuth().getUser();
+	const div = document.createElement("div");
+	const guildCreateModal = h(ModalBase, {
+		title: "Create a Guild",
+		id: "guild-join-modal",
+		onClose: () => {
+			unrender(div);
+		},
+		onCancel: () => {
+			unrender(div);
+		},
+				style: "height: 20dvh; width: 15dvw;"
+			},
+			[
+				h("input", {
+					id: "guild-name-input",
+					type: "text",
+					placeholder: `${getDisplayName(user!)}'s Awesome Bouncy Castle'`,
+					style: "width: 100%"
+				}),
+				h(Button, {
+					text: "Create!",
+					variant: "normal",
+					callback: async () => {
+						const input = document.getElementById("guild-name-input") as HTMLInputElement;
+						const name = input.value;
+						try {
+							const guild = (await createGuild(name)) as GuildResponse;
+							await createChannel(guild.uuid, "general");
+						} catch (error) {
+							alert(`Couldn't create guild: ${error}`);
+						}
+					}
+				})
+			]);
+			document.body.appendChild(div);
+			render(guildCreateModal, div);
+		}
+	}
+];
+
+function createDropdown() {
+	const dropdown = h(GuildDropdown, { options });
+	const div = document.createElement("div");
+	div.classList.add("dropdown", "destroy-on-click");
+	if (createButtonContainer.value) {
+		createButtonContainer.value.appendChild(div);
+	} else {
+		document.body.appendChild(div);
+	}
+	render(dropdown, div);
+	div.addEventListener("keyup", (e) => {
+		if (e.key == "Escape") {
+			unrender(div);
+		}
+	});
+	div.focus();
+}
+</script>
+
+<style scoped>
+#sidebar-column {
+	display: flex;
+	flex-direction: column;
+
+	padding-left: var(--sidebar-margin);
+	padding-right: var(--sidebar-margin);
+	padding-top: .5em;
+	
+	background: var(--optional-sidebar-background);
+	background-color: var(--sidebar-background-color);
+
+	border-right: 1px solid var(--padding-color);
+	text-align: center;
+}
+
+#guild-column {
+	overflow-y: scroll;
+	flex-grow: 1;
+	gap: var(--sidebar-icon-gap);
+}
+#guild-icon-container {
+	text-decoration: none;
+}
+
+.sidebar-column-segment {
+	display: flex;
+	flex-direction: column;
+
+	scrollbar-width: none;
+}
+.guild-column-segment::-webkit-scrollbar {
+	display: none;
+}
+
+#home-button {
+	height: var(--sidebar-icon-width);
+}
+
+.guild-icon {
+	border-radius: var(--guild-icon-radius);
+}
+.sidebar-icon {
+	width: var(--sidebar-icon-width);
+	height: var(--sidebar-icon-width);
+}
+
+.sidebar-bottom-buttons {
+	color: var(--primary-color);
+	background-color: transparent;
+	border: none;
+	cursor: pointer;
+	font-size: 2.4rem;
+	padding: 0;
+	display: inline-block;
+}
+.sidebar-bottom-buttons:hover {
+	color: var(--primary-highlighted-color);
+}
+</style>
\ No newline at end of file
diff --git a/layouts/client.vue b/layouts/client.vue
index dd0ef44..eb1c524 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -3,7 +3,7 @@
 
 	<div :class="{ hidden: loading, visible: !loading }" id="client-root">
 		<div class="flex-container-row">
-			<GuildList />
+			<SidebarColumn />
 			<slot />
 		</div>
 	</div>
@@ -11,7 +11,7 @@
 
 <script lang="ts" setup>
 import Loading from '~/components/Popups/Loading.vue';
-import GuildList from '~/components/UserInterface/GuildList.vue';
+import SidebarColumn from '~/components/UserInterface/SidebarColumn.vue';
 
 definePageMeta({
 	keepalive: true
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index d8ca7ab..62844a7 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -1,169 +1,38 @@
 <template>
 	<NuxtLayout name="client">
-		<ResizableSidebar
-				width="14rem" min-width="8rem" max-width="30rem"
-				border-sides="right" local-storage-name="middleLeftColumn">
-			<div id="middle-left-column" class="main-grid-row">
-				<div id="server-name-container">
-					<span id="server-name" :title="server?.name">{{ server?.name }}</span>
-					<button id="server-settings-button" @click="toggleGuildSettings">
-						<Icon id="server-settings-icon" name="lucide:chevron-down" />
-					</button>
-					<GuildOptionsMenu v-if="showGuildSettings" />
-				</div>
-				<div id="channels-list">
-					<ChannelEntry v-for="channel of channels" :name="channel.name"
-						:uuid="channel.uuid" :current-uuid="(route.params.channelId as string)"
-						:href="`/servers/${route.params.serverId}/channels/${channel.uuid}`" />
-				</div>
+		<GuildSidebar v-if="guild" :guild="guild" />
+		<div class="flex-container-column">
+			<GuildNavbar id="navbar"
+				:guild="guild" />
+
+			<div class="flex-container-row">
+				<MessageArea :channel-url="channelUrlPath" />
+				<GuildMemberList v-if="guild" :guild="guild" />
 			</div>
-		</ResizableSidebar>
-		<MessageArea :channel-url="channelUrlPath" />
-		<ResizableSidebar
-				width="14rem" min-width="5.5rem" max-width="30rem"
-				border-sides="left" local-storage-name="membersListWidth">
-			<div id="members-container">
-				<div id="members-list">
-					<MemberEntry v-for="member of members" :member="member" tabindex="0"/>
-				</div>
-			</div>
-		</ResizableSidebar>
+		</div>
 	</NuxtLayout>
 </template>
 
 <script lang="ts" setup>
-import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
-import GuildOptionsMenu from "~/components/Guild/GuildOptionsMenu.vue";
-import MemberEntry from "~/components/Guild/MemberEntry.vue";
-import ResizableSidebar from "~/components/UserInterface/ResizableSidebar.vue";
-import type { ChannelResponse, GuildMemberResponse, GuildResponse, INavbar } from "~/types/interfaces";
+import type { GuildResponse, INavbar } from "~/types/interfaces";
 
 const route = useRoute();
-
-const loading = useState("loading");
+const { fetchGuild } = useApi()
 
 const channelUrlPath = `channels/${route.params.channelId}`;
 
-const server = ref<GuildResponse | undefined>();
-const channels = ref<ChannelResponse[] | undefined>();
-const channel = ref<ChannelResponse | undefined>();
+const guild: GuildResponse | undefined = await fetchGuild(route.params.serverId as string)
 
-const members = ref<GuildMemberResponse[]>();
+// function toggleInvitePopup(e: Event) {
+// 	e.preventDefault();
+// 	showInvitePopup.value = !showInvitePopup.value;
+// }
 
-const showInvitePopup = ref(false);
-const showGuildSettings = ref(false);
-
-//const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
-//console.log("channelid: servers:", servers);
-
-const { fetchMembers } = useApi();
-
-onMounted(async () => {
-	console.log("mounting");
-	const guildUrl = `guilds/${route.params.serverId}`;
-	server.value = await fetchWithApi(guildUrl);
-	console.log("fetched guild");
-	await setArrayVariables();
-	console.log("set array variables");
-
-	updateNavbar({guild: server.value})
-});
-
-onActivated(async () => {
-	console.log("activating");
-	updateNavbar({guild: server.value})
-
-	const guildUrl = `guilds/${route.params.serverId}`;
-	server.value = await fetchWithApi(guildUrl);
-	console.log("fetched guild");
-	
-	await setArrayVariables();
-	console.log("set array variables");
-});
-
-async function setArrayVariables() {
-	const membersRes = await fetchMembers(route.params.serverId as string);
-	members.value = membersRes.objects;
-	const guildUrl = `guilds/${route.params.serverId}`;
-	channels.value = await fetchWithApi(`${guildUrl}/channels`);
-	console.log("channels:", channels.value);
-	channel.value = await fetchWithApi(`/channels/${route.params.channelId}`);
-	console.log("channel:", channel.value);
-}
-
-function toggleGuildSettings(e: Event) {
-	e.preventDefault();
-	showGuildSettings.value = !showGuildSettings.value;
-}
-
-function toggleInvitePopup(e: Event) {
-	e.preventDefault();
-	showInvitePopup.value = !showInvitePopup.value;
-}
-
-function handleMemberClick(member: GuildMemberResponse) {
-}
+// function handleMemberClick(member: GuildMemberResponse) {
+// }
 
 </script>
 
-<style>
-#members-container {
-	background: var(--optional-member-list-background);
-}
+<style scoped>
 
-#members-list {
-	display: flex;
-	flex-direction: column;
-	overflow-x: hidden;
-	overflow-y: scroll;
-	padding-left: 1.25em;
-	padding-right: 1.25em;
-	padding-top: 0.75em;
-	padding-bottom: 0.75em;
-	max-height: calc(100% - 0.75em * 2); /* 100% - top and bottom */
-}
-
-.member-item {
-	display: flex;
-	margin-top: .5em;
-	margin-bottom: .5em;
-	gap: .5em;
-	align-items: center;
-	text-align: left;
-	cursor: pointer;
-}
-
-#channels-list {
-	display: flex;
-	flex-direction: column;
-	gap: .5em;
-	text-overflow: ellipsis;
-}
-
-.member-display-name {
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-#server-name-container {
-	padding-top: 3dvh;
-	padding-bottom: 3dvh;
-	display: flex;
-	justify-content: center;
-	position: relative;
-}
-
-#server-name {
-	font-size: 1.5em;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-#server-settings-button {
-	background-color: transparent;
-	font-size: 1em;
-	color: white;
-	border: none;
-	padding: 0%;
-}
 </style>
\ No newline at end of file