style: move profile functions into a composable

components/Avatar.vue

@@ -12,6 +12,8 @@
 import { NuxtImg } from '#components';
 import type { GuildMemberResponse, UserResponse } from '~/types/interfaces';
 
+const { getDisplayName } = useProfile()
+
 const props = defineProps<{
 	profile: UserResponse | GuildMemberResponse,
 }>();

components/Guild/MemberEntry.vue

@@ -11,6 +11,8 @@
 import { ModalProfilePopup } from '#components';
 import type { GuildMemberResponse } from '~/types/interfaces';
 
+const { getDisplayName } = useProfile()
+
 const props = defineProps<{
     member: GuildMemberResponse
 }>();

components/Me/FriendsList.vue

@@ -24,6 +24,8 @@
 </template>
 
 <script lang="ts" setup>
+
+const { getDisplayName } = useProfile()
 const { fetchFriends } = useApi();
 
 const friends = sortUsers(await fetchFriends())

components/Message.vue

@@ -69,6 +69,8 @@ import type { MessageProps } from '~/types/props';
 import MessageMedia from './MessageMedia.vue';
 import MessageReply from './UserInterface/MessageReply.vue';
 
+const { getDisplayName } = useProfile()
+
 const props = defineProps<MessageProps>();
 
 const messageElement = ref<HTMLDivElement>();

components/MessageArea.vue

@@ -44,6 +44,7 @@ import type { MessageResponse, ScrollPosition, UserResponse } from '~/types/inte
 import scrollToBottom from '~/utils/scrollToBottom';
 import { generateIrcColor } from '#imports';
 
+const { getDisplayName } = useProfile()
 const { fetchMe } = useApi()
 
 const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();

components/Modal/ProfilePopup.vue

@@ -62,6 +62,7 @@ import type { GuildMemberResponse, ModalProps, UserResponse } from '~/types/inte
 import VerticalSpacer from '../UserInterface/VerticalSpacer.vue';
 import Button from '../UserInterface/Button.vue';
 
+const { getDisplayName, getUsername, getPronouns, getAboutMe, getRegistrationDate, getGuildJoinDate, getFriendsSince, getUuid } = useProfile()
 const { addFriend, fetchMe } = useApi();
 
 const props = defineProps<ModalProps & {

components/User/UserEntry.vue

@@ -9,6 +9,8 @@
 <script lang="ts" setup>
 import type { UserResponse } from '~/types/interfaces';
 
+const { getDisplayName } = useProfile()
+
 const props = defineProps<{
     user: UserResponse
 }>();

components/User/UserPopup.vue

@@ -21,6 +21,8 @@
 <script lang="ts" setup>
 import type { UserResponse } from '~/types/interfaces';
 
+const { getDisplayName } = useProfile()
+
 const props = defineProps<{
 	user: UserResponse
 }>();