feat: replace settings with a full page

2026-10-08 08:06:06 -05:00
parent 2b9f8d64d7
commit ff33e9c573
21 changed files with 503 additions and 245 deletions
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { avatarColor, avatarInitial } from '~/utils/avatar';
+
+const props = defineProps<{
+    user: {
+        id: string;
+        name?: string | null;
+        image?: string | null;
+    } | null | undefined;
+}>();
+
+// fall back to the letter placeholder if the image fails to load
+const imageFailed = ref(false);
+
+watch(() => props.user?.image, () => {
+    imageFailed.value = false;
+});
+
+const showImage = computed(() => !!props.user?.image && !imageFailed.value);
+</script>
+
+<template>
+    <div class="flex-shrink-0 overflow-hidden flex items-center justify-center font-semibold text-white select-none"
+        :style="showImage ? {} : { backgroundColor: avatarColor(user?.id ?? '') }">
+        <img v-if="showImage" :src="user!.image!" alt="" class="w-full h-full object-cover"
+            @error="imageFailed = true" />
+        <span v-else aria-hidden="true">{{ avatarInitial(user?.name) }}</span>
+    </div>
+</template>