Merge branch 'main' into password-reset

components/Avatar.vue

@@ -0,0 +1,44 @@
+<template>
+	<NuxtImg v-if="displayAvatar" 
+		class="display-avatar"
+		:src="displayAvatar"
+		:alt="displayName" />
+	<Icon v-else
+		name="lucide:user"
+		:alt="displayName" />
+</template>
+
+<script lang="ts" setup>
+import { NuxtImg } from '#components';
+import type { GuildMemberResponse, UserResponse } from '~/types/interfaces';
+
+const props = defineProps<{
+	user?: UserResponse,
+	member?: GuildMemberResponse,
+}>();
+
+
+let displayName: string
+let displayAvatar: string | null
+
+const user = props.user || props.member?.user
+
+if (user) {
+	displayName = getDisplayName(user, props.member)
+	
+	if (user.avatar) {
+		displayAvatar = user.avatar
+	} else if (!isCanvasBlocked()){
+		displayAvatar = generateDefaultIcon(displayName, user.uuid)
+	} else {
+		displayAvatar = null
+	}
+}
+
+</script>
+
+<style scoped>
+.display-avatar {
+	border-radius: var(--pfp-radius);
+}
+</style>

components/Guild/MemberEntry.vue

@@ -1,8 +1,7 @@
 <template>
     <div class="member-item" @click="togglePopup" @blur="hidePopup" tabindex="0">
-        <img v-if="props.member.user.avatar" class="member-avatar" :src="props.member.user.avatar" :alt="props.member.user.display_name ?? props.member.user.username" />
-        <Icon v-else class="member-avatar" name="lucide:user" />
-        <span class="member-display-name">{{ props.member.user.display_name || props.member.user.username }}</span>
+        <Avatar :member="props.member" class="member-avatar"/>
+        <span class="member-display-name">{{ getDisplayName(props.member.user, props.member) }}</span>
         <UserPopup v-if="isPopupVisible" :user="props.member.user" id="profile-popup" />
     </div>
 </template>

components/Me/DirectMessagesSidebar.vue

@@ -6,14 +6,14 @@
 			</div>
 			<VerticalSpacer />
 
-			<NuxtLink class="user-item" :href="`/me/friends`" tabindex="0">
+			<NuxtLink class="user-item" :href="`/me`" tabindex="0">
 				<Icon class="user-avatar" name="lucide:user" />
 				<span class="user-display-name">Friends</span>
 			</NuxtLink>
 			<VerticalSpacer />
 			
 			<div id="direct-message-list">
-				<UserEntry v-for="user of friends" :user="user" :name="user.display_name || user.username"
+				<UserEntry v-for="user of friends" :user="user"
 						:href="`/me/${user.uuid}`"/> 
 			</div>
 		</div>

components/Me/FriendsList.vue

@@ -17,7 +17,7 @@
 		</div>
 
 		<div v-else>
-			<UserEntry v-for="user of friends" :user="user" :name="user.display_name || user.username"
+			<UserEntry v-for="user of friends" :user="user" :name="getDisplayName(user)"
 			:href="`/me/${user.uuid}`"/> 
 		</div>
 	</div>
@@ -26,7 +26,9 @@
 <script lang="ts" setup>
 const { fetchFriends } = useApi();
 
-const friends = await fetchFriends()
+const friends = await fetchFriends().then((response) => {
+	return response.sort((a, b) => getDisplayName(a).localeCompare(getDisplayName(b)))
+})
 
 const props = defineProps<{
     variant: string

components/Message.vue

@@ -4,22 +4,14 @@
 			:editing.sync="props.editing" :replying-to.sync="props.replyingTo">
 		<div v-if="props.replyMessage" class="message-reply-svg">
 			<svg
-				width="1.5em"
-				height="1.5em"
-				viewBox="0 0 151.14355 87.562065"
-				version="1.1"
-				id="svg1"
-				xmlns="http://www.w3.org/2000/svg"
-				xmlns:svg="http://www.w3.org/2000/svg"
+				width="1.5em" height="1.5em"
+				viewBox="0 0 150 87.5" version="1.1" id="svg1"
 				style="overflow: visible;">
-				<defs
-					id="defs1" />
-				<g
-					id="layer1"
+				<defs id="defs1" />
+				<g id="layer1"
 					transform="translate(40,-35)">
-					<g
-					id="g3"
-					transform="translate(-35,-20)">
+					<g id="g3"
+						transform="translate(-35,-20)">
 					<path
 						style="stroke:var(--reply-text-color);stroke-width:8;stroke-opacity:1"
 						d="m 120.02168,87.850978 100.76157,2.4e-5"
@@ -32,16 +24,17 @@
 				</g>
 			</svg>
 		</div>
-		<MessageReply v-if="props.replyMessage" :author="props.replyMessage.user.display_name || props.replyMessage.user.username" :text="props.replyMessage?.message"
-			:id="props.message.uuid" :reply-id="props.replyMessage.uuid" max-width="reply" />
+		<MessageReply v-if="props.replyMessage" :id="props.message.uuid"
+			:author="getDisplayName(props.replyMessage.user)"
+			:text="props.replyMessage?.message"
+			:reply-id="props.replyMessage.uuid" max-width="reply" />
 		<div class="left-column">
-			<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="author?.display_name || author?.username" />
-			<Icon v-else name="lucide:user" class="message-author-avatar" />
+			<Avatar :user="props.author" class="message-author-avatar"/>
 		</div>
 		<div class="message-data">
 			<div class="message-metadata">
-				<span class="message-author-username" tabindex="0">
-					{{ author?.display_name || author?.username }}
+				<span class="message-author-username" tabindex="0" :style="`color: ${props.authorColor}`">
+					{{ getDisplayName(props.author) }}
 				</span>
 				<span class="message-date" :title="date.toString()">
 					<span v-if="getDayDifference(date, currentDate) === 1">Yesterday at</span>
@@ -228,7 +221,6 @@ function getDayDifference(date1: Date, date2: Date) {
 
 .message-author-avatar {
 	width: 100%;
-	border-radius: 50%;
 }
 
 .left-column {

components/MessageArea.vue

@@ -1,12 +1,13 @@
 <template>
 	<div id="message-area">
 		<div id="messages" ref="messagesElement">
-			<Message v-for="(message, i) of messages" :username="message.user.display_name ?? message.user.username"
+			<Message v-for="(message, i) of messages" :username="getDisplayName(message.user)"
 				:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar"
 				:format="timeFormat" :type="messagesType[message.uuid]"
 				:margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false"
 				:last="i == messages.length - 1" :message-id="message.uuid" :author="message.user" :me="me"
 				:message="message" :is-reply="message.reply_to"
+				:author-color="`${generateIrcColor(message.user.uuid)}`"
 				:reply-message="message.reply_to ? getReplyMessage(message.reply_to) : undefined" />
 		</div>
 		<div id="message-box" class="rounded-corners">
@@ -41,6 +42,7 @@
 <script lang="ts" setup>
 import type { MessageResponse, ScrollPosition, UserResponse } from '~/types/interfaces';
 import scrollToBottom from '~/utils/scrollToBottom';
+import { generateIrcColor } from '#imports';
 
 const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
 

components/Settings/AppSettings/index.ts

@@ -0,0 +1,11 @@
+import Appearance from './Appearance.vue';
+import Notifications from './Notifications.vue';
+import Keybinds from './Keybinds.vue';
+import Language from './Language.vue';
+
+export {
+	Appearance,
+	Notifications,
+	Keybinds,
+	Language,
+}

components/Settings/UserSettings/index.ts

@@ -0,0 +1,13 @@
+import Profile from './Profile.vue';
+import Account from './Account.vue';
+import Privacy from './Privacy.vue';
+import Devices from './Devices.vue';
+import Connections from './Connections.vue';
+
+export {
+	Profile,
+	Account,
+	Privacy,
+	Devices,
+	Connections,
+}

components/User/UserEntry.vue

@@ -1,8 +1,8 @@
 <template>
     <NuxtLink class="user-item" :href="`/me/${user.uuid}`" tabindex="0">
-        <img v-if="props.user.avatar" class="user-avatar" :src="props.user.avatar" :alt="props.user.display_name ?? props.user.username" />
-        <Icon v-else class="user-avatar" name="lucide:user" />
-        <span class="user-display-name">{{ props.user.display_name || props.user.username }}</span>
+        <Avatar :user="props.user" class="user-avatar"/>
+
+        <span class="user-display-name">{{ getDisplayName(props.user) }}</span>
 	</NuxtLink>
 </template>
 
@@ -12,6 +12,7 @@ import type { UserResponse } from '~/types/interfaces';
 const props = defineProps<{
     user: UserResponse
 }>();
+
 </script>
 
 <style>
@@ -35,6 +36,5 @@ const props = defineProps<{
 .user-avatar {
     width: 2.3em;
     height: 2.3em;
-    border-radius: 50%;
 }
 </style>

components/User/UserPopup.vue

@@ -1,12 +1,11 @@
 <template>
   <div id="profile-popup">
-    <img v-if="props.user.avatar" id="avatar" :src="props.user.avatar" alt="profile avatar">
-    <Icon v-else id="avatar" name="lucide:user" />
+    <Avatar :user="props.user" id="avatar"/>
 
     <div id="cover-color"></div>
     <div id="main-body">
       <p id="display-name">
-        <strong>{{ props.user.display_name }}</strong>
+        <strong>{{ getDisplayName(props.user) }}</strong>
       </p>
       <p id="username-and-pronouns">
         {{ props.user.username }}