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

feat: change to fetch guild members list and improve appearance of members list

Browse source
This commit is contained in:
SauceyRed 2025-05-31 17:12:07 +02:00
parent 00d6eb0a00
commit 1c5b136323
Signed by: sauceyred
GPG key ID: 2BF92EB6D8A5CCA7
1 changed files with 13 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

63
pages/servers/[serverId]/channels/[channelId].vue
View file

@ -26,9 +26,9 @@
<MessageArea :channel-url="channelUrlPath" /> <MessageArea :channel-url="channelUrlPath" />
<div id="members-list"> <div id="members-list">
<div class="member-item" v-for="member of members"> <div class="member-item" v-for="member of members">
<img v-if="member.avatar" :src="member.avatar" :alt="member.displayName" height="30" /> <img v-if="member.user.avatar" class="member-avatar" :src="member.user.avatar" :alt="member.user.display_name ?? member.user.username" />
<Icon v-else name="lucide:user" size="30" /> <Icon v-else class="member-avatar" name="lucide:user" />
<span class="member-display-name">{{ member.displayName }}</span> <span class="member-display-name">{{ member.user.display_name ?? member.user.username }}</span>
</div> </div>
</div> </div>
</NuxtLayout> </NuxtLayout>
@ -52,53 +52,9 @@ import type { ChannelResponse, GuildResponse, MessageResponse } from "~/types/in
//const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[]; //const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
//console.log("channelid: servers:", servers); //console.log("channelid: servers:", servers);
const members = [
{ const { fetchMembers } = useApi();
id: "3287484395", const members = await fetchMembers(route.params.serverId as string);
displayName: "SauceyRed",
avatar: ""
},
{
id: "3287484395",
displayName: "JustTemmie",
avatar: ""
},
{
id: "3287484395",
displayName: "GOIN!!!!!!",
avatar: ""
},
{
id: "3287484395",
displayName: "SauceyRed",
avatar: ""
},
{
id: "3287484395",
displayName: "Hatsune Miku Official",
avatar: ""
},
{
id: "3287484395",
displayName: "Hatsune Miku Official",
avatar: ""
},
{
id: "3287484395",
displayName: "Hatsune Miku Official",
avatar: ""
},
{
id: "3287484395",
displayName: "SauceyRed",
avatar: ""
},
{
id: "3287484395",
displayName: "SauceyRed",
avatar: ""
}
];
onMounted(async () => { onMounted(async () => {
console.log("channelid: set loading to true"); console.log("channelid: set loading to true");
@ -129,6 +85,7 @@ function toggleInvitePopup(e: Event) {
align-items: center; align-items: center;
margin-top: .5em; margin-top: .5em;
margin-bottom: .5em; margin-bottom: .5em;
gap: .5em;
} }
#members-list { #members-list {
@ -153,4 +110,10 @@ function toggleInvitePopup(e: Event) {
gap: 1dvh; gap: 1dvh;
} }
.member-avatar {
height: 2.3em;
width: 2.3em;
border-radius: 50%;
}
</style> </style>