fix(ui): replace native confirm() dialogs with the global in-app modal
window.confirm blocks the JS event loop, which froze companion remote input while open — the remote user could raise the mesh "Clear" prompt (or reboot / backup-delete / uninstall confirms) and then never dismiss it, because the synthetic events that would dismiss it queue behind the dialog itself. New promise-based appConfirm() (useAppConfirm.ts) + one AppConfirmModal mounted globally in App.vue, built on BaseModal (Teleport-to-body, full-viewport backdrop, glass card — the canonical modal contract). All six native confirm() call sites migrated: mesh clear-all, mesh message delete, dashboard reboot, backup delete, backup USB copy, app uninstall. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Fable 5
parent
458444d700
commit
876ecc4bdf
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<BaseModal
|
||||
:show="!!state"
|
||||
:title="state?.title || 'Are you sure?'"
|
||||
z-index="z-[4000]"
|
||||
@close="resolveConfirm(false)"
|
||||
>
|
||||
<p class="text-white/80 text-sm whitespace-pre-line">{{ state?.message }}</p>
|
||||
<template #footer>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="flex-1 rounded-lg bg-white/10 hover:bg-white/20 text-white text-sm font-medium py-2.5 transition-colors"
|
||||
@click="resolveConfirm(false)"
|
||||
>
|
||||
{{ state?.cancelLabel || t('common.cancel') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="flex-1 glass-button rounded-lg text-sm font-semibold py-2.5"
|
||||
:class="state?.danger ? 'text-orange-400 border-orange-400/30' : ''"
|
||||
@click="resolveConfirm(true)"
|
||||
>
|
||||
{{ state?.confirmLabel || 'Confirm' }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</BaseModal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import BaseModal from '@/components/BaseModal.vue'
|
||||
import { confirmState as state, resolveConfirm } from '@/composables/useAppConfirm'
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
Reference in New Issue
Block a user