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/composables/useAppConfirm.ts

@@ -0,0 +1,86 @@
+import { computed, reactive, readonly } from 'vue';
+
+export type AppConfirmOptions = {
+  message: string;
+  header?: string;
+  acceptLabel?: string;
+  rejectLabel?: string;
+  accept?: () => void | Promise<void>;
+  reject?: () => void;
+};
+
+type AppConfirmState = {
+  visible: boolean;
+  loading: boolean;
+  message: string;
+  header: string;
+  acceptLabel: string;
+  rejectLabel: string;
+  accept?: () => void | Promise<void>;
+  reject?: () => void;
+};
+
+const state = reactive<AppConfirmState>({
+  visible: false,
+  loading: false,
+  message: '',
+  header: 'Confirm',
+  acceptLabel: 'OK',
+  rejectLabel: 'Cancel',
+});
+
+const requireConfirm = (options: AppConfirmOptions) => {
+  state.visible = true;
+  state.loading = false;
+  state.message = options.message;
+  state.header = options.header ?? 'Confirm';
+  state.acceptLabel = options.acceptLabel ?? 'OK';
+  state.rejectLabel = options.rejectLabel ?? 'Cancel';
+  state.accept = options.accept;
+  state.reject = options.reject;
+};
+
+const close = () => {
+  state.visible = false;
+  state.loading = false;
+  state.message = '';
+  state.accept = undefined;
+  state.reject = undefined;
+};
+
+const onReject = () => {
+  try {
+    state.reject?.();
+  } finally {
+    close();
+  }
+};
+
+const onAccept = async () => {
+  state.loading = true;
+  try {
+    await state.accept?.();
+    close();
+  } catch (e) {
+    // Keep dialog open on error; caller can show a toast.
+    throw e;
+  } finally {
+    state.loading = false;
+  }
+};
+
+export const useAppConfirm = () => {
+  return {
+    require: requireConfirm,
+    close,
+    accept: onAccept,
+    reject: onReject,
+    visible: computed(() => state.visible),
+    loading: computed(() => state.loading),
+    message: computed(() => state.message),
+    header: computed(() => state.header),
+    acceptLabel: computed(() => state.acceptLabel),
+    rejectLabel: computed(() => state.rejectLabel),
+    _state: readonly(state),
+  };
+};