gorb/frontend
4
0
Fork 0
Code Issues 15 Pull requests 8 Projects Releases Packages 1 Wiki Activity Actions

Refactor the client to implement a channel navbar #76

Open
twig wants to merge 22 commits from navbar into main
pull from: navbar
merge into: gorb:main
Conversation 3 Commits 22 Files changed 13 +157 -227
4 changed files with 157 additions and 227 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 2a43f2b678 - Show all commits

90
components/Guild/GuildSidebar.vue Normal file
View file

@ -0,0 +1,90 @@
<!-- TODO -->
<template>
<ResizableSidebar
width="14rem" min-width="8rem" max-width="30rem"
border-sides="right" local-storage-name="middleLeftColumn">
<div id="guild-sidebar">
<div id="guild-top-container">
<span id="guild-name" :title="props.guild?.name">{{ props.guild?.name }}</span>
<button id="guild-settings-button" @click="toggleGuildSettings">
<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>
</div>
</ResizableSidebar>
</template>
<script lang="ts" setup>
import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
import ResizableSidebar from "../UserInterface/ResizableSidebar.vue";
import type { ChannelResponse, GuildResponse, INavbar } from "~/types/interfaces";
const props = defineProps<{
guild: GuildResponse
}>();
const route = useRoute();
const { fetchChannels } = useApi();
const showGuildSettings = ref(false);
const channels: ChannelResponse[] = await fetchChannels(props.guild.uuid);
function toggleGuildSettings(e: Event) {
e.preventDefault();
showGuildSettings.value = !showGuildSettings.value;
}
</script>
<style scoped>
#channels-list {
background: var(--optional-channel-list-background);
background-color: var(--sidebar-background-color);
display: flex;
flex-direction: column;
gap: .5em;
text-overflow: ellipsis;
padding-top: .5em;
padding-bottom: .5em;
max-height: calc(100% - 1em); /* 100% - top and bottom padding */
}
#guild-top-container {
min-height: var(--navbar-height);
max-height: var(--navbar-height);
width: 100%;
display: flex;
justify-content: center;
position: relative;
border-bottom: 1px solid var(--padding-color);
}
#guild-name {
font-size: 1.5em;
overflow: hidden;
text-overflow: ellipsis;
}
#guild-settings-button {
background-color: transparent;
font-size: 1em;
color: white;
border: none;
padding: 0%;
}
</style>

13
components/Guild/MemberEntry.vue
View file

@ -32,7 +32,13 @@ function hideModalPopup() {
<style>
.member-item {
position: relative;
display: flex;
margin-top: .5em;
margin-bottom: .5em;
gap: .5em;
align-items: center;
text-align: left;
cursor: pointer;
}
.member-avatar {
@ -41,4 +47,9 @@ function hideModalPopup() {
min-width: 2.3em;
max-width: 2.3em;
}
.member-display-name {
overflow: hidden;
text-overflow: ellipsis;
}
</style>

44
components/Guild/MemberList.vue Normal file
View file

@ -0,0 +1,44 @@
<template>
<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.objects" :member="member" tabindex="0"/>
</div>
</div>
</ResizableSidebar>
</template>
<script lang="ts" setup>
import ResizableSidebar from "../UserInterface/ResizableSidebar.vue";
import MemberEntry from "./MemberEntry.vue";
import type { GuildResponse } from "~/types/interfaces";
const props = defineProps<{
guild: GuildResponse
}>();
const { fetchMembers } = useApi();
// TODO implement paging
const members = await fetchMembers(props.guild.uuid)
</script>
<style scoped>
#members-container {
background: var(--optional-member-list-background);
padding-top: .5em;
padding-bottom: .5em;
max-height: calc(100% - 1em); /* 100% - top and bottom padding */
}
#members-list {
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: scroll;
}
</style>

237
layouts/client.vue
View file

@ -1,183 +1,23 @@
<template>
<Loading v-show="loading" />
<div :class="{ hidden: loading, visible: !loading }" id="client-root">
<Navbar id="navbar" v-bind="navbar" />
<div id="page-content">
<div id="left-column">
<div class="left-column-segment">
<NuxtLink id="home-button" href="/me">
<img class="sidebar-icon" src="/public/icon.svg"/>
</NuxtLink>
</div>
<VerticalSpacer />
<div class="left-column-segment" id="left-column-middle">
<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="left-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>
<div class="flex-container-row">
<GuildList />
<slot />
</div>
</div>
</template>
<script lang="ts" setup>
import { ModalBase } from '#components';
import { render } from 'vue';
import DefaultIcon from '~/components/DefaultIcon.vue';
import GuildDropdown from '~/components/Guild/GuildDropdown.vue';
import Loading from '~/components/Popups/Loading.vue';
import Button from '~/components/UserInterface/Button.vue';
import Navbar from '~/components/UserInterface/Navbar.vue';
import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
import type { GuildResponse, INavbar, NavbarItem } from '~/types/interfaces';
import GuildList from '~/components/UserInterface/GuildList.vue';
definePageMeta({
keepalive: true
});
const loading = useState("loading", () => false);
const navbar = useState<INavbar>("navbar", () => {
return {
clientItems: [
{
title: "Source",
icon: "lucide:code-xml",
callback: () => { open("https://git.gorb.app/gorb/frontend") }
}
],
channelItems: [] // set by the channel
}
})
const createButtonContainer = ref<HTMLButtonElement>();
const { getDisplayName } = useProfile()
const api = useApi();
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 api.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 api.createGuild(name)) as GuildResponse;
await api.createChannel(guild.uuid, "general");
} catch (error) {
alert(`Couldn't create guild: ${error}`);
}
}
})
]);
document.body.appendChild(div);
render(guildCreateModal, div);
}
}
];
const guilds = await api.fetchMyGuilds();
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>
@ -186,8 +26,6 @@ function createDropdown() {
height: 100dvh;
width: 100dvw;
display: flex;
flex-direction: column;
text-align: center;
}
.hidden {
@ -199,73 +37,20 @@ function createDropdown() {
transition: opacity 500ms;
}
#page-content {
.flex-container-row,
.flex-container-column {
display: flex;
flex-direction: row;
flex-grow: 1;
overflow: auto;
}
#left-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);
}
.left-column-segment {
display: flex;
flex-direction: column;
scrollbar-width: none;
}
.left-column-segment::-webkit-scrollbar {
display: none;
}
#left-column-middle {
overflow-y: scroll;
flex-grow: 1;
gap: var(--sidebar-icon-gap);
}
#home-button {
height: var(--sidebar-icon-width);
.flex-container-row {
flex-direction: row;
}
#guild-icon-container {
text-decoration: none;
}
.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);
.flex-container-column {
flex-direction: column;
}
</style>