feat: add inline confirm dialog and always-visible actions options

[lauralesteves]

Summary

This PR adds two new opt-in configuration options to improve the comment widget UX, especially on mobile devices.

Problem

window.confirm() is blocked by iOS Safari inside iframes. This means users on iPhones cannot delete their own comments when the Remark42 widget is embedded via iframe — the confirm dialog never appears and the action silently fails.

Additionally, comment actions (Copy, Pin, Block, Delete) require hover to be visible, which doesn't work on touch devices.

Solution

Two new backwards-compatible config options:

1. inline_confirm (default: false)

Replaces window.confirm() with an inline confirmation dialog rendered directly in the comment component.

Before (broken on iOS):

User taps "Delete" → window.confirm() → blocked by Safari → nothing happens

After:

User taps "Delete" → inline dialog appears below actions → user confirms/cancels

Affected methods in comment.tsx:

• deleteComment(), togglePin(), toggleVerify(), blockUser(), unblockUser(), hideUser()

Also updated in settings.tsx:

• block(), unblock()

2. actions_always_visible (default: false)

Shows comment actions (Copy, Pin, Block, Delete) without requiring hover. Improves usability on touch devices.

Usage

var remark_config = {
  host: '...',
  site_id: '...',
  inline_confirm: true,
  actions_always_visible: true,
};

New component

ConfirmDialog — a lightweight inline confirmation dialog that:

• Renders in-place below the comment actions
• Uses existing CSS custom properties (works in both dark and light themes)
• Supports i18n via react-intl (confirm-dialog.confirm, confirm-dialog.cancel)
• Has role="alertdialog" for accessibility
• Animates in with a subtle slide-in effect

Files changed

File	Change
app/typings/global.d.ts	Added inline_confirm and actions_always_visible to RemarkConfig
app/common/settings.ts	Parse new config options from query params
app/components/confirm-dialog/	New — ConfirmDialog component (tsx + CSS module + index)
app/components/comment/comment.tsx	Replace window.confirm() with confirmWithMessage() helper
app/components/comment/comment-actions.tsx	Apply alwaysVisible class based on config
app/components/comment/comment-actions.module.css	Add .alwaysVisible modifier to skip hover behavior
app/components/settings/settings.tsx	Use confirmWithMessage() pattern

Backwards compatibility

Both options default to false, preserving the current behavior. No changes for existing users unless they explicitly opt in.

Test plan

• Default behavior: window.confirm() works as before
• inline_confirm=true: inline dialog appears for delete, pin, block, etc.
• inline_confirm=true on iOS Safari: confirm dialog works inside iframe
• actions_always_visible=true: actions visible without hover
• actions_always_visible=false: actions hidden until hover (default)
• Dark theme: dialog styled correctly
• Light theme: dialog styled correctly
• Build passes: pnpm run build and pnpm run type-check succeed
• Lint passes: stylelint and eslint clean