From 0ea12e7f0056cde27e44b4d2319304162d1f603c Mon Sep 17 00:00:00 2001 From: JustTemmie <47639983+JustTemmie@users.noreply.github.com> Date: Fri, 18 Jul 2025 11:36:06 +0200 Subject: [PATCH 1/4] feat: HorizontalSpacer --- components/UserInterface/HorizontalSpacer.vue | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 components/UserInterface/HorizontalSpacer.vue diff --git a/components/UserInterface/HorizontalSpacer.vue b/components/UserInterface/HorizontalSpacer.vue new file mode 100644 index 0000000..9a72645 --- /dev/null +++ b/components/UserInterface/HorizontalSpacer.vue @@ -0,0 +1,12 @@ + + + From 58fe9a2eacadce1cf4b00fdd909bea110271144d Mon Sep 17 00:00:00 2001 From: JustTemmie <47639983+JustTemmie@users.noreply.github.com> Date: Fri, 18 Jul 2025 12:43:18 +0200 Subject: [PATCH 2/4] feat: implement fetchMe --- components/MessageArea.vue | 4 +++- composables/api.ts | 5 +++++ utils/editMessage.ts | 7 +++++-- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/components/MessageArea.vue b/components/MessageArea.vue index 17b4a3e..0fe702e 100644 --- a/components/MessageArea.vue +++ b/components/MessageArea.vue @@ -44,9 +44,11 @@ import type { MessageResponse, ScrollPosition, UserResponse } from '~/types/inte import scrollToBottom from '~/utils/scrollToBottom'; import { generateIrcColor } from '#imports'; +const { fetchMe } = useApi() + const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>(); -const me = await fetchWithApi("/me") as UserResponse; +const me = await fetchMe() as UserResponse; const messageTimestamps = ref>({}); const messagesType = ref>({}); diff --git a/composables/api.ts b/composables/api.ts index eff2c73..723fb6b 100644 --- a/composables/api.ts +++ b/composables/api.ts @@ -21,6 +21,10 @@ export const useApi = () => { return ensureIsArray(await fetchWithApi(`/me/guilds`)); } + async function fetchMe(): Promise { + return await fetchWithApi("/me") + } + async function fetchChannels(guildId: string): Promise { return ensureIsArray(await fetchWithApi(`/guilds/${guildId}/channels`)); } @@ -98,6 +102,7 @@ export const useApi = () => { fetchGuilds, fetchGuild, fetchMyGuilds, + fetchMe, fetchChannels, fetchChannel, fetchMembers, diff --git a/utils/editMessage.ts b/utils/editMessage.ts index 5cc3ce8..d8ad005 100644 --- a/utils/editMessage.ts +++ b/utils/editMessage.ts @@ -1,9 +1,12 @@ import type { MessageProps } from "~/types/props"; +const { fetchMe } = useApi() + export default async (element: HTMLDivElement, props: MessageProps) => { console.log("message:", element); - const me = await fetchWithApi("/me") as any; - if (props.author?.uuid == me.uuid) { + const me = await fetchMe(); + + if (me && props.author?.uuid == me.uuid) { const text = element.getElementsByClassName("message-text")[0] as HTMLDivElement; text.contentEditable = "true"; text.focus(); From 69feff6cf813cdeacec772a53e7534a5018a0c47 Mon Sep 17 00:00:00 2001 From: JustTemmie <47639983+JustTemmie@users.noreply.github.com> Date: Fri, 18 Jul 2025 12:56:33 +0200 Subject: [PATCH 3/4] feat: add a fuck ton of get functions --- utils/getAboutMe.ts | 9 +++++++++ utils/getFriendsSince.ts | 21 +++++++++++++++++++++ utils/getGuildJoinDate.ts | 9 +++++++++ utils/getPronouns.ts | 9 +++++++++ utils/getRegistrationDate.ts | 9 +++++++++ utils/getUsername.ts | 9 +++++++++ utils/getUuid.ts | 9 +++++++++ utils/uuidToDate.ts | 6 ++++++ 8 files changed, 81 insertions(+) create mode 100644 utils/getAboutMe.ts create mode 100644 utils/getFriendsSince.ts create mode 100644 utils/getGuildJoinDate.ts create mode 100644 utils/getPronouns.ts create mode 100644 utils/getRegistrationDate.ts create mode 100644 utils/getUsername.ts create mode 100644 utils/getUuid.ts create mode 100644 utils/uuidToDate.ts diff --git a/utils/getAboutMe.ts b/utils/getAboutMe.ts new file mode 100644 index 0000000..9f67a29 --- /dev/null +++ b/utils/getAboutMe.ts @@ -0,0 +1,9 @@ +import type { GuildMemberResponse, UserResponse } from "~/types/interfaces"; + +export default (profile: UserResponse | GuildMemberResponse): string | null => { + if ("username" in profile) { + return profile.about + } else { + return profile.user.about + } +} \ No newline at end of file diff --git a/utils/getFriendsSince.ts b/utils/getFriendsSince.ts new file mode 100644 index 0000000..3f6d859 --- /dev/null +++ b/utils/getFriendsSince.ts @@ -0,0 +1,21 @@ +import type { GuildMemberResponse, UserResponse } from "~/types/interfaces"; + +const { fetchFriends } = useApi(); + +export default async (profile: UserResponse | GuildMemberResponse): Promise => { + let user_uuid: string; + + if ("username" in profile) { + user_uuid = profile.uuid + } else { + user_uuid = profile.user_uuid + } + + const friends = await fetchFriends() + const friend = friends.find(friend => friend.uuid === user_uuid); + if (friend?.friends_since) { + return new Date(friend.friends_since); + } + + return null +} \ No newline at end of file diff --git a/utils/getGuildJoinDate.ts b/utils/getGuildJoinDate.ts new file mode 100644 index 0000000..1b89e9a --- /dev/null +++ b/utils/getGuildJoinDate.ts @@ -0,0 +1,9 @@ +import type { GuildMemberResponse, UserResponse } from "~/types/interfaces"; + +export default (profile: UserResponse | GuildMemberResponse): Date | null => { + if ("username" in profile) { + return null + } else { + return uuidToDate(profile.uuid) + } +} \ No newline at end of file diff --git a/utils/getPronouns.ts b/utils/getPronouns.ts new file mode 100644 index 0000000..b7cb55d --- /dev/null +++ b/utils/getPronouns.ts @@ -0,0 +1,9 @@ +import type { GuildMemberResponse, UserResponse } from "~/types/interfaces"; + +export default (profile: UserResponse | GuildMemberResponse): string | null => { + if ("username" in profile) { + return profile.pronouns + } else { + return profile.user.pronouns + } +} \ No newline at end of file diff --git a/utils/getRegistrationDate.ts b/utils/getRegistrationDate.ts new file mode 100644 index 0000000..010d871 --- /dev/null +++ b/utils/getRegistrationDate.ts @@ -0,0 +1,9 @@ +import type { GuildMemberResponse, UserResponse } from "~/types/interfaces"; + +export default (profile: UserResponse | GuildMemberResponse): Date | null => { + if ("username" in profile) { + return uuidToDate(profile.uuid) + } else { + return uuidToDate(profile.user_uuid) + } +} \ No newline at end of file diff --git a/utils/getUsername.ts b/utils/getUsername.ts new file mode 100644 index 0000000..ba0dfbb --- /dev/null +++ b/utils/getUsername.ts @@ -0,0 +1,9 @@ +import type { GuildMemberResponse, UserResponse } from "~/types/interfaces"; + +export default (profile: UserResponse | GuildMemberResponse): string => { + if ("username" in profile) { + return profile.username + } else { + return profile.user.username + } +} \ No newline at end of file diff --git a/utils/getUuid.ts b/utils/getUuid.ts new file mode 100644 index 0000000..0bc7316 --- /dev/null +++ b/utils/getUuid.ts @@ -0,0 +1,9 @@ +import type { GuildMemberResponse, UserResponse } from "~/types/interfaces"; + +export default (profile: UserResponse | GuildMemberResponse): string | null => { + if ("username" in profile) { + return profile.uuid + } else { + return profile.user.uuid + } +} \ No newline at end of file diff --git a/utils/uuidToDate.ts b/utils/uuidToDate.ts new file mode 100644 index 0000000..f0ab6f3 --- /dev/null +++ b/utils/uuidToDate.ts @@ -0,0 +1,6 @@ +export default (uuid: string): Date => { + const timeHex = uuid.substring(0, 8) + uuid.substring(9, 13); + const timestamp = parseInt(timeHex, 16); + + return new Date(timestamp); +} \ No newline at end of file From b3ef59ac48d02a9785a258f0263fe9366a83a47b Mon Sep 17 00:00:00 2001 From: JustTemmie <47639983+JustTemmie@users.noreply.github.com> Date: Fri, 18 Jul 2025 13:03:20 +0200 Subject: [PATCH 4/4] feat: finish up the profile popup --- components/Modal/ProfilePopup.vue | 188 +++++++++++++++++++- components/UserInterface/Button.vue | 7 +- components/UserInterface/VerticalSpacer.vue | 4 +- 3 files changed, 187 insertions(+), 12 deletions(-) diff --git a/components/Modal/ProfilePopup.vue b/components/Modal/ProfilePopup.vue index 1708c2b..5f674fb 100644 --- a/components/Modal/ProfilePopup.vue +++ b/components/Modal/ProfilePopup.vue @@ -5,28 +5,119 @@
+ +
+
{{ displayName }}
+
+ {{ username }} + + • + {{ pronouns }} + +
+
Status goes here lorem ipsum or something
+ +
+ + +
+
+ +
+
+ + +
+
+
+
+ {{ " " + aboutMe }} +
+
+
+ + + \ No newline at end of file diff --git a/components/UserInterface/Button.vue b/components/UserInterface/Button.vue index 90d5d2b..ad4cdb5 100644 --- a/components/UserInterface/Button.vue +++ b/components/UserInterface/Button.vue @@ -22,11 +22,12 @@ const props = defineProps<{ background-color: var(--primary-color); color: var(--text-color); - padding: 0.4em 0.75em; - font-size: 1.1em; + padding: 0.35em 0.65em; + font-size: 1em; + transition: background-color 0.2s; - border-radius: 0.7rem; + border-radius: var(--standard-radius); text-decoration: none; display: inline-block; diff --git a/components/UserInterface/VerticalSpacer.vue b/components/UserInterface/VerticalSpacer.vue index 8ac1bd6..e3a9322 100644 --- a/components/UserInterface/VerticalSpacer.vue +++ b/components/UserInterface/VerticalSpacer.vue @@ -1,9 +1,9 @@