refactor: Simplify Logout Confirmation Handling in Navbar

- Remove the showLogoutConfirm state variable from Navbar.vue to streamline the logout confirmation process.
- Update the LogoutConfirmDialog component to manage its own visibility state internally, enhancing encapsulation.
- Refactor the logout button to directly trigger the confirmation dialog, improving code clarity and user experience.

feat: Enhance Logout Confirmation Handling Across Components

- Introduce a showLogoutConfirm state variable in ProfileDialog.vue, UserProfile.vue, and Navbar.vue to manage the visibility of the Logout Confirmation dialog.
- Refactor logout buttons in these components to trigger the confirmation dialog, improving user experience and preventing accidental logouts.
- Update the LogoutConfirmDialog component to accept an isOpen prop for better control of its visibility, ensuring consistent functionality across the application.

src/components/ui/LogoutConfirmDialog/LogoutConfirmDialog.vue

@@ -1,19 +1,13 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, watch } 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
   isOpen?: boolean
 }
 
@@ -23,27 +17,28 @@ interface Emits {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  variant: 'destructive',
+  variant: 'ghost',
   size: 'default'
 })
 
-// Default classes for the logout button styling
-const defaultClasses = computed(() => {
-  const baseClasses = 'gap-2 text-destructive hover:text-destructive/90 hover:bg-destructive/10'
-  
-  if (props.class) {
-    // Merge custom classes with base classes, ensuring red styling is preserved
-    return `${props.class} ${baseClasses}`
+const emit = defineEmits<Emits>()
+const internalIsOpen = ref(false)
+
+// Use external control if provided, otherwise use internal state
+const isOpen = computed({
+  get: () => props.isOpen !== undefined ? props.isOpen : internalIsOpen.value,
+  set: (value: boolean) => {
+    if (props.isOpen !== undefined) {
+      emit('update:isOpen', value)
+    } else {
+      internalIsOpen.value = value
+    }
   }
-  
-  // Default styling that matches the original red logout button
-  return baseClasses
 })
 
-const emit = defineEmits<Emits>()
-const isOpen = computed({
-  get: () => props.isOpen ?? false,
-  set: (value: boolean) => emit('update:isOpen', value)
+const buttonClasses = computed(() => {
+  const baseClasses = 'text-destructive hover:text-destructive/90 hover:bg-destructive/10'
+  return props.class ? `${baseClasses} ${props.class}` : baseClasses
 })
 
 const handleConfirm = () => {
@@ -58,10 +53,10 @@ const handleCancel = () => {
 
 <template>
   <Dialog v-model:open="isOpen">
-    <DialogTrigger v-if="props.isOpen === undefined" as-child>
+    <DialogTrigger as-child v-if="props.isOpen === undefined">
       <slot>
-        <Button :variant="variant" :size="size" :class="defaultClasses">
-          <LogOut class="h-4 w-4" />
+        <Button :variant="variant" :size="size" :class="buttonClasses">
+          <LogOut class="h-4 w-4 mr-2" />
           Logout
         </Button>
       </slot>