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

@@ -4,6 +4,7 @@ import { useRouter } from 'vue-router'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
+import { LogoutConfirmDialog } from '@/components/ui/LogoutConfirmDialog'
 import { User, LogOut, Settings } from 'lucide-vue-next'
 import { auth } from '@/composables/useAuth'
 import { toast } from 'vue-sonner'
@@ -58,10 +59,10 @@ function handleLogout() {
             <Settings class="w-4 h-4 mr-2" />
             Settings
           </Button>
-          <Button variant="destructive" size="sm" @click="handleLogout" class="flex-1">
+          <LogoutConfirmDialog variant="destructive" size="sm" class="flex-1" @confirm="handleLogout">
             <LogOut class="w-4 h-4 mr-2" />
             Logout
-          </Button>
+          </LogoutConfirmDialog>
         </div>
       </CardContent>
     </Card>