refactor: replace PrimeVue components with custom App components for buttons, dialogs, and inputs

- Updated DangerZone.vue to use AppButton and AppDialog, replacing PrimeVue Button and Dialog components.
- Refactored DomainsDns.vue to utilize AppButton, AppDialog, and AppInput, enhancing the UI consistency.
- Modified NotificationSettings.vue and PlayerSettings.vue to implement AppButton and AppSwitch for better styling.
- Replaced PrimeVue components in SecurityNConnected.vue with AppButton, AppDialog, and AppInput for a cohesive design.
- Introduced AppConfirmHost for handling confirmation dialogs with a custom design.
- Created AppToastHost for managing toast notifications with custom styling and behavior.
- Added utility composables useAppConfirm and useAppToast for managing confirmation dialogs and toast notifications.
- Implemented AppProgressBar and AppSwitch components for improved UI elements.

src/components/app/AppDialog.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import XIcon from '@/components/icons/XIcon.vue';
+import { cn } from '@/lib/utils';
+import { onBeforeUnmount, watch } from 'vue';
+
+const props = withDefaults(defineProps<{
+  visible: boolean;
+  title?: string;
+  closable?: boolean;
+  maxWidthClass?: string;
+}>(), {
+  title: '',
+  closable: true,
+  maxWidthClass: 'max-w-lg',
+});
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void;
+  (e: 'close'): void;
+}>();
+
+const close = () => {
+  emit('update:visible', false);
+  emit('close');
+};
+
+const onKeydown = (e: KeyboardEvent) => {
+  if (!props.visible) return;
+  if (!props.closable) return;
+  if (e.key === 'Escape') close();
+};
+
+watch(
+  () => props.visible,
+  (v) => {
+    if (typeof window === 'undefined') return;
+    if (v) window.addEventListener('keydown', onKeydown);
+    else window.removeEventListener('keydown', onKeydown);
+  },
+  { immediate: true }
+);
+
+onBeforeUnmount(() => {
+  if (typeof window === 'undefined') return;
+  window.removeEventListener('keydown', onKeydown);
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-all duration-200 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition-all duration-150 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div v-if="visible" class="fixed inset-0 z-[9999]">
+        <!-- Backdrop -->
+        <div
+          class="absolute inset-0 bg-black/30"
+          @click="closable && close()"
+          aria-hidden="true"
+        />
+
+        <!-- Panel -->
+        <div class="absolute inset-0 flex items-center justify-center p-4">
+          <div :class="cn('w-full bg-surface border border-border rounded-lg shadow-lg overflow-hidden', maxWidthClass)">
+            <div class="flex items-center justify-between gap-3 px-5 py-4 border-b border-border">
+              <h3 class="text-sm font-semibold text-foreground">
+                {{ title }}
+              </h3>
+              <button
+                v-if="closable"
+                type="button"
+                class="p-1 rounded-md text-foreground/60 hover:text-foreground hover:bg-muted/50 transition-all"
+                @click="close"
+                aria-label="Close"
+              >
+                <XIcon class="w-4 h-4" />
+              </button>
+            </div>
+
+            <div class="p-5">
+              <slot />
+            </div>
+
+            <div v-if="$slots.footer" class="px-5 py-4 border-t border-border bg-muted/20">
+              <slot name="footer" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>