feat: Implement Logout Confirmation Dialog

- Introduce a new LogoutConfirmDialog component to confirm user logout actions.
- Update ProfileDialog.vue, UserProfile.vue, and Navbar.vue to utilize the new dialog for logout confirmation, enhancing user experience and preventing accidental logouts.
- Ensure consistent styling and functionality across all instances where logout confirmation is required.

src/components/ui/LogoutConfirmDialog/LogoutConfirmDialog.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { LogOut, AlertTriangle } from 'lucide-vue-next'
+
+// Define component name for better debugging
+defineOptions({
+  name: 'LogoutConfirmDialog'
+})
+
+interface Props {
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
+  size?: 'default' | 'sm' | 'lg' | 'icon'
+  class?: string
+  children?: any
+}
+
+interface Emits {
+  (e: 'confirm'): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'outline',
+  size: 'default'
+})
+
+const emit = defineEmits<Emits>()
+const isOpen = ref(false)
+
+const handleConfirm = () => {
+  isOpen.value = false
+  emit('confirm')
+}
+
+const handleCancel = () => {
+  isOpen.value = false
+}
+</script>
+
+<template>
+  <Dialog v-model:open="isOpen">
+    <DialogTrigger as-child>
+      <slot>
+        <Button :variant="variant" :size="size" :class="class">
+          <LogOut class="h-4 w-4 mr-2" />
+          Logout
+        </Button>
+      </slot>
+    </DialogTrigger>
+    
+    <DialogContent class="sm:max-w-md">
+      <DialogHeader class="space-y-4">
+        <div class="mx-auto w-12 h-12 rounded-full bg-gradient-to-br from-destructive to-destructive/80 p-0.5">
+          <div class="w-full h-full rounded-full bg-background flex items-center justify-center">
+            <AlertTriangle class="h-6 w-6 text-destructive" />
+          </div>
+        </div>
+        <div class="text-center space-y-2">
+          <DialogTitle class="text-xl font-semibold text-foreground">
+            Confirm Logout
+          </DialogTitle>
+          <DialogDescription class="text-muted-foreground">
+            Are you sure you want to logout? You will need to log in again to access your account.
+          </DialogDescription>
+        </div>
+      </DialogHeader>
+      
+      <DialogFooter class="flex flex-col sm:flex-row gap-2 sm:gap-3">
+        <Button variant="ghost" @click="handleCancel" class="flex-1 sm:flex-none">
+          Cancel
+        </Button>
+        <Button variant="destructive" @click="handleConfirm" class="flex-1 sm:flex-none">
+          <LogOut class="h-4 w-4 mr-2" />
+          Logout
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>