From c145488f525e34d7c333557ec2c1de64cd5344a6 Mon Sep 17 00:00:00 2001
From: Alan Ye <git@wrye.dev>
Date: Mon, 20 Jan 2025 19:12:16 +0800
Subject: [PATCH 1/2] feat(profile): settings dialog and user profile component

---
 app/pages/profile.vue | 47 +++++++++++++++++++++++++++++++++----------
 1 file changed, 36 insertions(+), 11 deletions(-)

diff --git a/app/pages/profile.vue b/app/pages/profile.vue
index c311660a..aef9de26 100644
--- a/app/pages/profile.vue
+++ b/app/pages/profile.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import type { AllClubs } from '@@/types/api/user/all_clubs'
+import { Button } from '@/components/ui/button'
+import { dark } from '@clerk/themes'
+import { Dialog, DialogContent } from '@/components/ui/dialog'
 import type { MyRecords } from '@@/types/api/cas/record/my'
 import { useUser } from 'vue-clerk'
 import { usePreferredDark } from '@vueuse/core'
@@ -9,6 +12,9 @@ import {
   Settings,
   Clock,
 } from 'lucide-vue-next'
+import { UserProfile } from 'vue-clerk'
+
+const isDark = usePreferredDark()
 
 definePageMeta({
   middleware: ['auth'],
@@ -29,6 +35,9 @@ const stats = ref({
 
 const isLoading = ref(true)
 
+// Add this with your other refs
+const isSettingsOpen = ref(false)
+
 // Fetch clubs data
 const { data: clubs } = await useQuery<AllClubs>({
   queryKey: ['/api/user/all_clubs'],
@@ -84,24 +93,40 @@ onMounted(() => {
     <Card>
       <CardHeader>
         <CardTitle class="text-3xl">
-          <div class="flex items-center gap-4">
-            <Avatar class="h-16 w-16 rounded-lg">
-              <AvatarImage v-if="user" :src="user.imageUrl" :alt="user.firstName" />
-              <AvatarFallback class="rounded-lg">
-                {{ user?.firstName?.slice(0, 2) }}
-              </AvatarFallback>
-            </Avatar>
-            <div>
-              👋 Hi, {{ user?.firstName }}!
-              <div class="text-base font-normal text-muted-foreground">
-                {{ user?.primaryEmailAddress }}
+          <div class="flex items-center justify-between w-full">
+            <div class="flex items-center gap-4">
+              <Avatar class="h-16 w-16 rounded-lg">
+                <AvatarImage v-if="user" :src="user.imageUrl" :alt="user.firstName" />
+                <AvatarFallback class="rounded-lg">
+                  {{ user?.firstName?.slice(0, 2) }}
+                </AvatarFallback>
+              </Avatar>
+              <div>
+                👋 Hi, {{ user?.firstName }}!
+                <div class="text-base font-normal text-muted-foreground">
+                  {{ user?.primaryEmailAddress }}
+                </div>
               </div>
             </div>
+            <Button variant="ghost" size="icon" @click="isSettingsOpen = true">
+              <Settings class="h-5 w-5" />
+              <span class="sr-only">Open settings</span>
+            </Button>
           </div>
         </CardTitle>
       </CardHeader>
+      <!-- Rest of your existing card content -->
     </Card>
 
+    <!-- Settings Dialog -->
+    <Dialog :open="isSettingsOpen" @update:open="isSettingsOpen = false">
+      <DialogContent class="sm:max-w-[880px] p-0">
+        <UserProfile 
+          :appearance="{ baseTheme: isDark ? dark : undefined }"
+        />
+      </DialogContent>
+    </Dialog>
+
     <div class="grid gap-4 md:grid-cols-2">
       <!-- Account Info Card -->
       <Card>

From 820ec2222ac4bd03ca82103a0f86bfedac2bd0a5 Mon Sep 17 00:00:00 2001
From: Alan Ye <git@wrye.dev>
Date: Mon, 20 Jan 2025 19:14:58 +0800
Subject: [PATCH 2/2] feat(docs): add changeset

---
 .changeset/fast-spies-tease.md | 5 +++++
 app/pages/profile.vue          | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/fast-spies-tease.md

diff --git a/.changeset/fast-spies-tease.md b/.changeset/fast-spies-tease.md
new file mode 100644
index 00000000..85069a49
--- /dev/null
+++ b/.changeset/fast-spies-tease.md
@@ -0,0 +1,5 @@
+---
+"enspire": minor
+---
+
+Settings dialog and user profile component
diff --git a/app/pages/profile.vue b/app/pages/profile.vue
index aef9de26..f341a204 100644
--- a/app/pages/profile.vue
+++ b/app/pages/profile.vue
@@ -102,7 +102,7 @@ onMounted(() => {
                 </AvatarFallback>
               </Avatar>
               <div>
-                👋 Hi, {{ user?.firstName }}!
+                👋🏻 Hi, {{ user?.firstName }}!
                 <div class="text-base font-normal text-muted-foreground">
                   {{ user?.primaryEmailAddress }}
                 </div>