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/auth/UserProfile.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
@@ -11,6 +11,7 @@ import { toast } from 'vue-sonner'
 
 const router = useRouter()
 const userDisplay = computed(() => auth.userDisplay.value)
+const showLogoutConfirm = ref(false)
 
 function handleLogout() {
   auth.logout()
@@ -59,12 +60,18 @@ function handleLogout() {
             <Settings class="w-4 h-4 mr-2" />
             Settings
           </Button>
-          <LogoutConfirmDialog variant="destructive" size="sm" class="flex-1" @confirm="handleLogout">
-            <LogOut class="w-4 h-4 mr-2" />
-            Logout
-          </LogoutConfirmDialog>
+                  <Button variant="ghost" size="sm" @click="showLogoutConfirm = true" class="flex-1 text-destructive hover:text-destructive/90 hover:bg-destructive/10">
+          <LogOut class="w-4 h-4 mr-2" />
+          Logout
+        </Button>
         </div>
       </CardContent>
     </Card>
   </div>
+
+  <!-- Logout Confirm Dialog -->
+  <LogoutConfirmDialog v-model:is-open="showLogoutConfirm" variant="ghost" size="sm" class="flex-1 text-destructive hover:text-destructive/90 hover:bg-destructive/10" @confirm="handleLogout">
+    <LogOut class="w-4 h-4 mr-2" />
+    Logout
+  </LogoutConfirmDialog>
 </template>