archipelagoandClaude Fable 5
876ecc4bdf
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>
38 lines
1.1 KiB
Vue
38 lines
1.1 KiB
Vue
<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>
|