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

Code cleanup #81

Open
twig wants to merge 7 commits from temmie-random-cleanup into main
pull from: temmie-random-cleanup
merge into: gorb:main
Conversation 0 Commits 7 Files changed 10 +114 -96
10 changed files with 114 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

17
components/Avatar.vue
View file

@ -6,7 +6,7 @@
<DefaultIcon v-else <DefaultIcon v-else
class="display-avatar" class="display-avatar"
:name="displayName" :name="displayName"
:seed="user.uuid" :seed="getUserUuid(props.profile)"
:alt="displayName" /> :alt="displayName" />
</template> </template>
@ -14,25 +14,14 @@
import { NuxtImg } from '#components'; import { NuxtImg } from '#components';
import type { GuildMemberResponse, UserResponse } from '~/types/interfaces'; import type { GuildMemberResponse, UserResponse } from '~/types/interfaces';
const { getDisplayName } = useProfile() const { getDisplayName, getAvatarUrl, getUserUuid } = useProfile()
const props = defineProps<{ const props = defineProps<{
profile: UserResponse | GuildMemberResponse, profile: UserResponse | GuildMemberResponse,
}>(); }>();
const displayName = getDisplayName(props.profile) const displayName = getDisplayName(props.profile)
let user: UserResponse const displayAvatar = getAvatarUrl(props.profile)
let displayAvatar: string | null
if ("username" in props.profile) {
// assume it's a UserResponse
displayAvatar = props.profile.avatar
user = props.profile
} else {
// assume it's a GuildMemberResponse
displayAvatar = props.profile.user.avatar
user = props.profile.user
}
</script> </script>

1
components/DefaultIcon.vue
View file

@ -17,6 +17,7 @@ const props = defineProps<{
}>(); }>();
let previewName = ""; let previewName = "";
// include the entire name if it's 3 chars or less, use the first char of the first 3 words otherwise
if (props.name.length > 3) { if (props.name.length > 3) {
let guildName: string[] = props.name.split(' ') let guildName: string[] = props.name.split(' ')
for (let i = 0; i < 3; i ++) { for (let i = 0; i < 3; i ++) {

18
components/Modal/ProfilePopup.vue
View file

@ -27,15 +27,17 @@
</div> </div>
<VerticalSpacer /> <VerticalSpacer />
<div v-if="aboutMe" id="profile-body"> <div v-if="aboutMe">
<div v-if="aboutMe" id="about-me-container"> <div id="profile-body">
<div><Icon name="lucide:info" size="1.1em"/></div> <div id="about-me-container">
<div id="about-me-text"> <div><Icon name="lucide:info" size="1.1em"/></div>
{{ " " + aboutMe }} <div id="about-me-text">
{{ " " + aboutMe }}
</div>
</div> </div>
</div> </div>
<VerticalSpacer />
</div> </div>
<VerticalSpacer v-if="aboutMe" />
<div id="profile-footer"> <div id="profile-footer">
<div id="dates"> <div id="dates">
@ -62,7 +64,7 @@ import type { GuildMemberResponse, ModalProps, UserResponse } from '~/types/inte
import VerticalSpacer from '../UserInterface/VerticalSpacer.vue'; import VerticalSpacer from '../UserInterface/VerticalSpacer.vue';
import Button from '../UserInterface/Button.vue'; import Button from '../UserInterface/Button.vue';
const { getDisplayName, getUsername, getPronouns, getAboutMe, getRegistrationDate, getGuildJoinDate, getFriendsSince, getUuid } = useProfile() const { getDisplayName, getUsername, getPronouns, getAboutMe, getRegistrationDate, getGuildJoinDate, getFriendsSince, getUserUuid } = useProfile()
const { addFriend, fetchMe } = useApi(); const { addFriend, fetchMe } = useApi();
const props = defineProps<ModalProps & { const props = defineProps<ModalProps & {
@ -81,7 +83,7 @@ const registrationDate = getRegistrationDate(props.profile)
const joinDate = getGuildJoinDate(props.profile) const joinDate = getGuildJoinDate(props.profile)
const friendsSince = await getFriendsSince(props.profile) const friendsSince = await getFriendsSince(props.profile)
const uuid = getUuid(props.profile) const uuid = getUserUuid(props.profile)
function toDateString(date: Date): string { function toDateString(date: Date): string {

30
components/Settings/AppSettings/Appearance.vue
View file

@ -45,26 +45,15 @@
<!-- <p class="subtitle">Icons</p> <!-- <p class="subtitle">Icons</p>
<div class="icons"> <div class="icons">
</div> --> </div> -->
<p class="subtitle">TIME FORMAT</p>
<div class="icons">
<RadioButtons :button-count="3" :text-strings="timeFormatTextStrings"
:default-button-index="settingsLoad().timeFormat?.index ?? 0" :callback="onTimeFormatClicked"></RadioButtons>
</div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import RadioButtons from '~/components/UserInterface/RadioButtons.vue';
import type { TimeFormat } from '~/types/settings';
import { settingSave, settingsLoad } from '#imports';
const runtimeConfig = useRuntimeConfig() const runtimeConfig = useRuntimeConfig()
const baseURL = runtimeConfig.app.baseURL; const baseURL = runtimeConfig.app.baseURL;
const styleFolder = `${baseURL}/themes/style`
const layoutFolder = `${baseURL}/themes/layout`
const timeFormatTextStrings = ["Auto", "12-Hour", "24-Hour"] const styleFolder = `${baseURL}themes/style`
const layoutFolder = `${baseURL}themes/layout`
enum StyleLayout { enum StyleLayout {
Style, Style,
@ -171,21 +160,6 @@ function changeTheme(themeType: StyleLayout, theme: Theme) {
} }
loadPreferredThemes() loadPreferredThemes()
} }
async function onTimeFormatClicked(index: number) {
let format: "auto" | "12" | "24" = "auto"
if (index == 0) {
format = "auto"
} else if (index == 1) {
format = "12"
} else if (index == 2) {
format = "24"
}
const timeFormat: TimeFormat = {index, format}
settingSave("timeFormat", timeFormat)
}
</script> </script>
<style scoped> <style scoped>

17
components/Settings/AppSettings/Language.vue
View file

@ -1,10 +1,25 @@
<template> <template>
<div> <div>
<h1>Language (TBA)</h1> <h1>Language</h1>
<p class="subtitle">TIME FORMAT</p>
<div class="icons">
<RadioButtons
:text-strings="timeFormatTextStrings"
:default-button-key='settingsLoad().timeFormat ?? "Auto"'
:callback="(index: number) => {settingSave('timeFormat', timeFormatTextStrings[index])}"
/>
</div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import RadioButtons from '~/components/UserInterface/RadioButtons.vue';
import type { TimeFormat } from '~/types/settings';
const timeFormatTextStrings: TimeFormat[] = ["Auto", "4:18 PM", "16:18"]
</script> </script>
<style scoped> <style scoped>

59
components/UserInterface/RadioButtons.vue
View file

@ -1,8 +1,10 @@
<template> <template>
<div class="radio-buttons-container" ref="radioButtonsContainer"> <div class="radio-buttons-container" ref="radioButtonsContainer">
<div v-for="index in indices" :key="index" class="radio-button" @click="onClick(index)"> <div v-for="(textString, index) in props.textStrings"
class="radio-button"
@click="onClick(index)">
<span class="radio-button-radio"></span> <span class="radio-button-radio"></span>
<span class="radio-button-text">{{ textStrings[index] }}</span> <span class="radio-button-text">{{ textString }}</span>
</div> </div>
</div> </div>
</template> </template>
@ -13,42 +15,65 @@ const radioButtonsContainer = ref<HTMLDivElement>()
const props = defineProps<{ const props = defineProps<{
textStrings: string[], textStrings: string[],
buttonCount: number, defaultButtonKey?: string,
defaultButtonIndex: number, defaultButtonIndex?: number,
callback: CallableFunction, callback: CallableFunction,
}>(); }>();
// makes an array from 0 to buttonCount - 1
const indices = Array.from({ length: props.buttonCount }, (_, i) => i)
// select default selected button
onMounted(async () => { onMounted(async () => {
await nextTick() await nextTick()
if (props.defaultButtonIndex != undefined && radioButtonsContainer.value) { // select default selected button
if (radioButtonsContainer.value) {
const children = radioButtonsContainer.value.children const children = radioButtonsContainer.value.children
const defaultButton = children.item(props.defaultButtonIndex)
defaultButton?.classList.add("selected-radio-button") // set the button based on key
defaultButton?.children.item(0)?.classList.add("selected-radio-button-radio") if (props.defaultButtonKey != undefined) {
const newIndex = props.textStrings.indexOf(props.defaultButtonKey)
const defaultButton = children.item(newIndex)
if (defaultButton) {
selectButton(defaultButton)
return // note the return if you're extending this
}
}
// if that fails, set it based on index, defaulting to 0
const defaultButton = children.item(props.defaultButtonIndex ?? 0)
if (defaultButton) {
selectButton(defaultButton)
}
} }
}) })
function onClick(clickedIndex: number) { function onClick(clickedIndex: number) {
// remove selected-radio-button class from all buttons except the clicked one
if (radioButtonsContainer.value) { if (radioButtonsContainer.value) {
// remove selected-radio-button class from all buttons except the clicked one
const children = radioButtonsContainer.value.children const children = radioButtonsContainer.value.children
for (let i = 0; i < children.length; i++) { for (let i = 0; i < children.length; i++) {
children.item(i)?.classList.remove("selected-radio-button") const button = children.item(i)
children.item(i)?.children.item(0)?.classList.remove("selected-radio-button-radio") if (button) {
unSelectButton(button)
}
} }
children.item(clickedIndex)?.classList.add("selected-radio-button") const button = children.item(clickedIndex)
children.item(clickedIndex)?.children.item(0)?.classList.add("selected-radio-button-radio") if (button) {
selectButton(button)
}
} }
props.callback(clickedIndex) props.callback(clickedIndex)
} }
function unSelectButton(button: Element) {
button.classList.remove("selected-radio-button")
button.children.item(0)?.classList.remove("selected-radio-button-radio")
}
function selectButton(button: Element) {
button.classList.add("selected-radio-button")
button.children.item(0)?.classList.add("selected-radio-button-radio")
}
</script> </script>
<style scoped> <style scoped>

38
composables/profile.ts
View file

@ -3,7 +3,7 @@ import type { GuildMemberResponse, UserResponse } from "~/types/interfaces"
const { fetchFriends } = useApi(); const { fetchFriends } = useApi();
export const useProfile = () => { export const useProfile = () => {
function getAboutMe (profile: UserResponse | GuildMemberResponse): string | null { function getAboutMe(profile: UserResponse | GuildMemberResponse): string | null {
if ("username" in profile) { if ("username" in profile) {
return profile.about return profile.about
} else { } else {
@ -11,7 +11,7 @@ export const useProfile = () => {
} }
} }
function getDisplayName (profile: UserResponse | GuildMemberResponse): string { function getDisplayName(profile: UserResponse | GuildMemberResponse): string {
if ("username" in profile) { if ("username" in profile) {
// assume it's a UserResponse // assume it's a UserResponse
if (profile.display_name) return profile.display_name if (profile.display_name) return profile.display_name
@ -24,7 +24,15 @@ export const useProfile = () => {
} }
} }
async function getFriendsSince (profile: UserResponse | GuildMemberResponse): Promise<Date | null> { function getAvatarUrl(profile: UserResponse | GuildMemberResponse): string | null {
if ("username" in profile) {
return profile.avatar
} else {
return profile.user.avatar
}
}
async function getFriendsSince(profile: UserResponse | GuildMemberResponse): Promise<Date | null> {
let user_uuid: string; let user_uuid: string;
if ("username" in profile) { if ("username" in profile) {
@ -42,15 +50,15 @@ export const useProfile = () => {
return null return null
} }
function getGuildJoinDate (profile: UserResponse | GuildMemberResponse): Date | null { function getGuildJoinDate(profile: UserResponse | GuildMemberResponse): Date | undefined {
if ("username" in profile) { if ("username" in profile) {
return null return undefined
} else { } else {
return uuidToDate(profile.uuid) return uuidToDate(profile.uuid)
} }
} }
function getPronouns (profile: UserResponse | GuildMemberResponse): string | null { function getPronouns(profile: UserResponse | GuildMemberResponse): string | null {
if ("username" in profile) { if ("username" in profile) {
return profile.pronouns return profile.pronouns
} else { } else {
@ -58,7 +66,7 @@ export const useProfile = () => {
} }
} }
function getRegistrationDate (profile: UserResponse | GuildMemberResponse): Date | null { function getRegistrationDate(profile: UserResponse | GuildMemberResponse): Date {
if ("username" in profile) { if ("username" in profile) {
return uuidToDate(profile.uuid) return uuidToDate(profile.uuid)
} else { } else {
@ -66,7 +74,7 @@ export const useProfile = () => {
} }
} }
function getUsername (profile: UserResponse | GuildMemberResponse): string { function getUsername(profile: UserResponse | GuildMemberResponse): string {
if ("username" in profile) { if ("username" in profile) {
return profile.username return profile.username
} else { } else {
@ -74,7 +82,7 @@ export const useProfile = () => {
} }
} }
function getUuid (profile: UserResponse | GuildMemberResponse): string | null { function getUserUuid(profile: UserResponse | GuildMemberResponse): string {
if ("username" in profile) { if ("username" in profile) {
return profile.uuid return profile.uuid
} else { } else {
@ -82,14 +90,24 @@ export const useProfile = () => {
} }
} }
function getUser(profile: UserResponse | GuildMemberResponse): UserResponse {
if ("username" in profile) {
return profile
} else {
return profile.user
}
}
return { return {
getAboutMe, getAboutMe,
getDisplayName, getDisplayName,
getAvatarUrl,
getFriendsSince, getFriendsSince,
getGuildJoinDate, getGuildJoinDate,
getRegistrationDate, getRegistrationDate,
getPronouns, getPronouns,
getUsername, getUsername,
getUuid getUserUuid,
getUser
} }
} }

5
types/settings.ts
View file

@ -4,7 +4,4 @@ export interface ClientSettings {
selectedThemeLayout?: string // URL selectedThemeLayout?: string // URL
} }
export interface TimeFormat { export type TimeFormat = "Auto" | "4:18 PM" | "16:18"
index: number,
format: "auto" | "12" | "24"
}

6
utils/getPreferredTimeFormat.ts
View file

@ -1,9 +1,9 @@
export default (): "12" | "24" => { export default (): "12" | "24" => {
const format = settingsLoad().timeFormat?.format ?? "auto" const format = settingsLoad().timeFormat ?? "Auto"
if (format == "12") { if (format == "4:18 PM") {
return "12" return "12"
} else if (format == "24") { } else if (format == "16:18") {
return "24" return "24"
} }

15
utils/loadPreferredThemes.ts
View file

@ -6,16 +6,13 @@ export default () => {
const runtimeConfig = useRuntimeConfig() const runtimeConfig = useRuntimeConfig()
const baseURL = runtimeConfig.app.baseURL; const baseURL = runtimeConfig.app.baseURL;
let currentStyle = settingsLoad().selectedThemeStyle ?? undefined let currentStyle = settingsLoad().selectedThemeStyle ?? (
let currentLayout = settingsLoad().selectedThemeLayout ?? `${baseURL}themes/layout/gorb.css` prefersLight()
? `${baseURL}themes/style/light.css`
: `${baseURL}themes/style/dark.css`
);
if (!currentStyle) { let currentLayout = settingsLoad().selectedThemeLayout ?? `${baseURL}themes/layout/gorb.css`
if (prefersLight()) {
currentStyle = `${baseURL}themes/style/light.css`
} else {
currentStyle = `${baseURL}themes/style/dark.css`
}
}
if (styleLinkElement) { if (styleLinkElement) {
styleLinkElement.href = currentStyle; styleLinkElement.href = currentStyle;