feat: Delete Page Confirmation (#809)

Author: liksunrice

ui/components/Navigator.tsx

@@ -8,6 +8,14 @@ import { useHotkeys } from 'react-hotkeys-hook'
 import { useTranslation } from 'react-i18next'
 
 import { PageManagerDialog } from '@/components/PageManagerDialog'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { useScene } from '@/hooks/useScene'
@@ -36,6 +44,12 @@ export function Navigator() {
   const viewportRef = useRef<HTMLDivElement | null>(null)
   const { t } = useTranslation()
   const [pageManagerOpen, setPageManagerOpen] = useState(false)
+  const [pageToDeleteId, setPageToDeleteId] = useState<string | null>(null)
+
+  const pageToDeleteIndex = useMemo(() => {
+    if (!pageToDeleteId) return -1
+    return pages.findIndex((p) => p.id === pageToDeleteId)
+  }, [pageToDeleteId, pages])
 
   const handleSelect = useCallback(
     (id: string, event: React.MouseEvent | React.KeyboardEvent) => {
@@ -122,12 +136,9 @@ export function Navigator() {
     [pages, pagesMap, pageId, setPage, totalPages, t, setSelectedPageIds],
   )
 
-  const handleDeletePage = useCallback(
-    (id: string) => {
-      void handleDeletePages(new Set([id]))
-    },
-    [handleDeletePages],
-  )
+  const handleDeletePage = useCallback((id: string) => {
+    setPageToDeleteId(id)
+  }, [])
 
   const handleBatchDelete = useCallback(() => {
     void handleDeletePages(selectedPageIds)
@@ -221,6 +232,36 @@ export function Navigator() {
       </ScrollArea>
 
       <PageManagerDialog open={pageManagerOpen} onOpenChange={setPageManagerOpen} />
+
+      <AlertDialog
+        open={!!pageToDeleteId}
+        onOpenChange={(open) => !open && setPageToDeleteId(null)}
+      >
+        <AlertDialogContent>
+          <div className='flex flex-col gap-1.5 text-center sm:text-left'>
+            <AlertDialogTitle>{t('navigator.deleteConfirmTitle')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('navigator.deleteConfirmDescription', {
+                index: pageToDeleteIndex + 1,
+              })}
+            </AlertDialogDescription>
+          </div>
+          <div className='flex flex-col-reverse gap-2 sm:flex-row sm:justify-end'>
+            <AlertDialogCancel>{t('common.cancel', 'Cancel')}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => {
+                if (pageToDeleteId) {
+                  void handleDeletePages(new Set([pageToDeleteId]))
+                  setPageToDeleteId(null)
+                }
+              }}
+              className='text-destructive-foreground bg-destructive hover:bg-destructive/90'
+            >
+              {t('common.delete', 'Delete')}
+            </AlertDialogAction>
+          </div>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   )
 }

ui/public/locales/en-US/translation.json

@@ -100,6 +100,8 @@
     "pages_other": "{{count}} pages",
     "empty": "No documents",
     "prompt": "Select or import a page to begin",
+    "deleteConfirmTitle": "Delete Page",
+    "deleteConfirmDescription": "Are you sure you want to delete page {{index}}? This action cannot be undone.",
     "pageManager": {
       "title": "Page Manager",
       "description": "Drag and drop pages to reorder them."

ui/public/locales/es-ES/translation.json

@@ -83,6 +83,8 @@
     "pages_other": "{{count}} páginas",
     "empty": "No hay documentos",
     "prompt": "Selecciona o importa una página para comenzar",
+    "deleteConfirmTitle": "Eliminar página",
+    "deleteConfirmDescription": "¿Está seguro de que desea eliminar la página {{index}}? Esta acción no se puede deshacer.",
     "pageManager": {
       "title": "Gestor de páginas",
       "description": "Arrastra y suelta las páginas para reordenarlas."

ui/public/locales/ja-JP/translation.json

@@ -83,6 +83,8 @@
     "pages_other": "{{count}} ページ",
     "empty": "ドキュメントがありません",
     "prompt": "ページを選択または読み込んで開始してください",
+    "deleteConfirmTitle": "ページの削除",
+    "deleteConfirmDescription": "ページ {{index}} を削除してもよろしいですか？この操作は取り消せません。",
     "pageManager": {
       "title": "ページ管理",
       "description": "ドラッグ＆ドロップでページの順番を変更します。"

ui/public/locales/ko-KR/translation.json

@@ -88,6 +88,8 @@
     "pages_other": "{{count}} 페이지",
     "empty": "문서 없음",
     "prompt": "시작하려면 페이지를 선택하거나 가져오세요",
+    "deleteConfirmTitle": "페이지 삭제",
+    "deleteConfirmDescription": "페이지 {{index}}을(를) 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.",
     "pageManager": {
       "title": "페이지 관리",
       "description": "드래그 앤 드롭으로 페이지 순서를 변경하세요."

ui/public/locales/pt-BR/translation.json

@@ -84,6 +84,8 @@
     "pages_other": "{{count}} páginas",
     "empty": "Nenhum documento",
     "prompt": "Selecione ou importe uma página para começar",
+    "deleteConfirmTitle": "Excluir página",
+    "deleteConfirmDescription": "Tem certeza de que deseja excluir a página {{index}}? Esta ação não pode ser desfeita.",
     "pageManager": {
       "title": "Gerenciador de páginas",
       "description": "Arraste e solte as páginas para reordená-las."

ui/public/locales/ru-RU/translation.json

@@ -83,6 +83,8 @@
     "pages_other": "{{count}} стр.",
     "empty": "Нет документов",
     "prompt": "Выберите или импортируйте страницу для начала",
+    "deleteConfirmTitle": "Удалить страницу",
+    "deleteConfirmDescription": "Вы уверены, что хотите удалить страницу {{index}}? Это действие невозможно отменить.",
     "pageManager": {
       "title": "Управление страницами",
       "description": "Перетащите страницы для изменения порядка."

ui/public/locales/tr-TR/translation.json

@@ -83,6 +83,8 @@
     "pages_other": "{{count}} sayfa",
     "empty": "Belge yok",
     "prompt": "Başlamak için bir sayfa seçin veya içe aktarın",
+    "deleteConfirmTitle": "Sayfayı Sil",
+    "deleteConfirmDescription": "Sayfa {{index}}'yi silmek istediğinizden emin misiniz? Bu işlem geri alınamaz.",
     "pageManager": {
       "title": "Sayfa Yöneticisi",
       "description": "Sayfaları yeniden sıralamak için sürükleyip bırakın."

ui/public/locales/zh-CN/translation.json

@@ -83,6 +83,8 @@
     "pages_other": "{{count}} 页",
     "empty": "没有文档",
     "prompt": "选择或导入页面开始",
+    "deleteConfirmTitle": "删除页面",
+    "deleteConfirmDescription": "您确定要删除第 {{index}} 页吗？此操作无法撤销。",
     "pageManager": {
       "title": "页面管理",
       "description": "拖放页面以重新排列顺序。"

ui/public/locales/zh-TW/translation.json

@@ -83,6 +83,8 @@
     "pages_other": "{{count}} 頁",
     "empty": "沒有文件",
     "prompt": "選擇或匯入頁面以開始",
+    "deleteConfirmTitle": "刪除頁面",
+    "deleteConfirmDescription": "您確定要刪除第 {{index}} 頁嗎？此動作無法復原。",
     "pageManager": {
       "title": "頁面管理",
       "description": "拖放頁面以重新排列順序。"