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

feat: finish DM sidebar

Browse source
This commit is contained in:
Twig 2025-07-10 23:12:44 +02:00
parent c9bea94ef8
commit 34976b4f50
No known key found for this signature in database
4 changed files with 34 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

41
components/DirectMessagesSidebar.vue
View file

@ -1,20 +1,29 @@
<template> <template>
<div id="friend-sidebar"> <div id="middle-left-column">
<div id="server-title"> <div id="friend-sidebar">
<h3>Direct Messages</h3> <div id="server-title">
</div> <h3>Direct Messages</h3>
<verticalSpacer /> </div>
<div id="direct-message-list"> <VerticalSpacer />
<UserEntry v-for="user of friends" :user="user" :name="user.display_name || user.username" <NuxtLink class="user-item" :href="`/me/friends`" tabindex="0">
:href="`/me/${user.uuid}`"/> <Icon class="user-avatar" name="lucide:user" />
<!-- <Channel v-for="channel of channels" :name="channel.name" <span class="user-display-name">Friends</span>
:uuid="channel.uuid" :current-uuid="(route.params.channelId as string)" </NuxtLink>
:href="`/servers/${route.params.serverId}/channels/${channel.uuid}`" /> --> <VerticalSpacer />
<div id="direct-message-list">
<UserEntry v-for="user of friends" :user="user" :name="user.display_name || user.username"
:href="`/me/${user.uuid}`"/>
<!-- <Channel 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> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import VerticalSpacer from './UserInterface/VerticalSpacer.vue';
const { fetchFriends } = useApi(); const { fetchFriends } = useApi();
const friends = await fetchFriends() const friends = await fetchFriends()
@ -28,11 +37,13 @@ definePageMeta({
</script> </script>
<style> <style>
#friend-sidebar { #middle-left-column {
padding-left: .5em;
padding-right: .5em;
border-right: 1px solid var(--padding-color);
background: var(--optional-channel-list-background); background: var(--optional-channel-list-background);
background-color: var(--sidebar-background-color); background-color: var(--sidebar-background-color);
} }
#friend-sidebar {
padding-left: .5em;
padding-right: .5em;
}
</style> </style>

7
components/User/UserEntry.vue
View file

@ -24,7 +24,12 @@ const props = defineProps<{
margin-bottom: .5em; margin-bottom: .5em;
gap: .5em; gap: .5em;
cursor: pointer; text-decoration: none;
color: inherit;
}
.user-item:hover {
background-color: #00000020
} }
.user-avatar { .user-avatar {

9
components/UserInterface/VerticalSpacer.vue
View file

@ -2,15 +2,6 @@
<span class="spacer"></span> <span class="spacer"></span>
</template> </template>
<script lang="ts" setup>
import type { UserResponse } from '~/types/interfaces';
const props = defineProps<{
user: UserResponse,
}>();
</script>
<style scoped> <style scoped>
.spacer { .spacer {
height: 0.2dvh; height: 0.2dvh;

17
pages/me/index.vue
View file

@ -1,19 +1,6 @@
<template> <template>
<NuxtLayout> <NuxtLayout name="client">
<div id="left-bar"> <DirectMessagesSidebar />
</div>
<div id="middle-bar">
<h1>
Welcome to gorb :3
</h1>
<p>
Click on a guild to the left to view a guild.
<br>
Or click the button in the bottom left to join a guild.
</p>
</div>
<div id="right-bar">
</div>
</NuxtLayout> </NuxtLayout>
</template> </template>