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

feat: finish entire friends menu
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details
ci/woodpecker/pr/build-and-publish Pipeline was successful
Details

Browse source
This commit is contained in:
Twig 2025-07-11 01:45:24 +02:00
parent 34976b4f50
commit 0562127e4a
No known key found for this signature in database
7 changed files with 243 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

20
pages/me/[userId].vue Normal file
View file

@ -0,0 +1,20 @@
<template>
<NuxtLayout name="client">
<DirectMessagesSidebar />
<MessageArea channel-url="channels/01970e8c-a09c-76a0-9c98-80a43364bea7"/>
</NuxtLayout>
</template>
<script lang="ts" setup>
import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
definePageMeta({
layout: "client"
});
</script>
<style>
</style>

82
pages/me/friends.vue Normal file
View file

@ -0,0 +1,82 @@
<template>
<NuxtLayout name="client">
<DirectMessagesSidebar />
<div id="friends-page-content">
<div id="navigation-bar">
<NuxtLink class="friends-sub-page-button" @click.prevent="updateHash('all')">All Friends</NuxtLink>
<NuxtLink class="friends-sub-page-button" @click.prevent="updateHash('online')">Online</NuxtLink>
<NuxtLink class="friends-sub-page-button" @click.prevent="updateHash('pending')">Pending</NuxtLink>
<NuxtLink class="friends-sub-page-button friend-primary-button" @click.prevent="updateHash('addfriend')">Add Friend</NuxtLink>
</div>
<div>
<AddFriend v-if="windowHash == '#addfriend'"></AddFriend>
<FriendsList v-else :variant="windowHash"></FriendsList>
</div>
</div>
</NuxtLayout>
</template>
<script lang="ts" setup>
import AddFriend from '~/components/Me/AddFriend.vue';
import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
import FriendsList from '~/components/Me/FriendsList.vue';
let windowHash = ref(window.location.hash)
function updateHash(newHash: string) {
window.location.hash = newHash
windowHash.value = `#${newHash}`;
}
</script>
<style>
#friends-page-content {
display: flex;
flex-direction: column;
flex-grow: 1;
margin: .75em;
}
#navigation-bar {
display: flex;
align-items: left;
text-align: left;
flex-direction: row;
gap: .5em;
}
.friends-sub-page-button {
text-decoration: none;
color: inherit;
font-weight: medium;
padding: 0.2em .5em;
flex-shrink: 0;
border-radius: 1em;
background-color: var(--accent-color);
display: inline-block;
text-align: center;
align-content: center;
cursor: pointer;
transition: background-color 300ms;
}
.friends-sub-page-button:hover {
background-color: var(--accent-highlighted-color);
}
.friend-primary-button {
background-color: var(--primary-color);
}
.friend-primary-button:hover {
background-color: var(--primary-highlighted-color);
}
</style>

2
pages/me/index.vue
View file

@ -5,6 +5,8 @@
</template>
<script lang="ts" setup>
import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
definePageMeta({
layout: "client"