Initial commit

app/components/Profile/Avatar.vue

@@ -0,0 +1,21 @@
+<template>
+  <UAvatar
+    v-bind="forwardedProps"
+    :src="src ?? undefined"
+    :alt="name ?? undefined"
+    :icon="icon"
+  />
+</template>
+
+<script setup lang="ts">
+import type { AvatarProps } from '@nuxt/ui'
+
+const forwardedProps = defineProps<Omit<AvatarProps, 'src' | 'alt' | 'icon'>>()
+
+const { name, src } = storeToRefs(useAvatar())
+
+// show initials if name is present, otherwise show icon
+const icon = computed(() => {
+  return !name.value ? 'i-lucide-user' : undefined
+})
+</script>

app/components/Profile/AvatarUpload.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="flex flex-wrap items-center gap-3">
+    <ProfileAvatar
+      size="lg"
+    />
+    <UButton
+      :label="$t('profile.choose')"
+      color="neutral"
+      :loading="uploading"
+      @click="onFileClick"
+    />
+    <input
+      ref="fileRef"
+      type="file"
+      class="hidden"
+      accept=".jpg, .jpeg, .png, .gif"
+      @change="onFileChange"
+    >
+  </div>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+const toast = useToast()
+
+const fileRef = ref<HTMLInputElement>()
+const uploading = ref(false)
+
+async function onFileChange(e: Event) {
+  const input = e.target as HTMLInputElement
+
+  const files = input.files
+  try {
+    uploading.value = true
+    if (!files || files.length === 0) {
+      throw new Error('You must select an image to upload.')
+    }
+    const file = files[0]
+    await useAvatar().uploadAvatar(file!)
+
+    toast.add({
+      title: t('profile.success'),
+      description: t('profile.avatarUploaded'),
+      icon: 'i-lucide-check',
+      color: 'success'
+    })
+  } catch (error) {
+    toast.add({ color: 'error', description: (error as Error).message })
+  } finally {
+    uploading.value = false
+  }
+}
+
+function onFileClick() {
+  fileRef.value?.click()
+}
+</script>

app/components/Profile/LangSelect.vue

@@ -0,0 +1,25 @@
+<template>
+  <ULocaleSelect
+    :model-value="locale"
+    :locales="availableLocales"
+    @update:model-value="setLanguage($event as LanguageCode)"
+  />
+</template>
+
+<script setup lang="ts">
+import * as allLocales from '@nuxt/ui/locale'
+import type { LanguageCode } from '~/types/i18n.types'
+import type { UsersLanguageOptions } from '~/types/pocketbase.types'
+
+const { locale, locales, setLocale } = useI18n()
+const availableLocales = computed(() =>
+  locales.value.map(l => allLocales[l.code])
+)
+
+const { updateUser } = useUser()
+
+const setLanguage = (language: LanguageCode) => {
+  setLocale(language)
+  updateUser({ language: language as UsersLanguageOptions })
+}
+</script>