feat(core): add confirm modal for delete tag action (#6268)

packages/frontend/core/src/components/affine/page-properties/tags-inline-editor.tsx

@@ -6,7 +6,7 @@ import {
   Scrollable,
 } from '@affine/component';
 import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
-import { TagService } from '@affine/core/modules/tag';
+import { DeleteTagConfirmModal, TagService } from '@affine/core/modules/tag';
 import { WorkspaceLegacyProperties } from '@affine/core/modules/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { DeleteIcon, MoreHorizontalIcon, TagsIcon } from '@blocksuite/icons';
@@ -74,8 +74,12 @@ const InlineTagsList = ({
 
 export const EditTagMenu = ({
   tagId,
+  onTagDelete,
   children,
-}: PropsWithChildren<{ tagId: string }>) => {
+}: PropsWithChildren<{
+  tagId: string;
+  onTagDelete: (tagIds: string[]) => void;
+}>) => {
   const t = useAFFiNEI18N();
   const legacyProperties = useService(WorkspaceLegacyProperties);
   const tagService = useService(TagService);
@@ -116,7 +120,7 @@ export const EditTagMenu = ({
       icon: <DeleteIcon />,
       type: 'danger',
       onClick() {
-        tagService.deleteTag(tag?.id || '');
+        onTagDelete([tag?.id || '']);
       },
     });
 
@@ -164,10 +168,10 @@ export const EditTagMenu = ({
   }, [
     legacyProperties.workspaceId,
     navigate,
+    onTagDelete,
     t,
     tag,
     tagColor,
-    tagService,
     tagValue,
   ]);
 
@@ -180,6 +184,24 @@ export const TagsEditor = ({ pageId, readonly }: TagsEditorProps) => {
   const tags = useLiveData(tagService.tags);
   const tagIds = useLiveData(tagService.tagIdsByPageId(pageId));
   const [inputValue, setInputValue] = useState('');
+  const [open, setOpen] = useState(false);
+  const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
+
+  const handleCloseModal = useCallback(
+    (open: boolean) => {
+      setOpen(open);
+      setSelectedTagIds([]);
+    },
+    [setOpen]
+  );
+
+  const onTagDelete = useCallback(
+    (tagIds: string[]) => {
+      setOpen(true);
+      setSelectedTagIds(tagIds);
+    },
+    [setOpen, setSelectedTagIds]
+  );
 
   const exactMatch = useLiveData(tagService.tagByTagValue(inputValue));
 
@@ -280,7 +302,7 @@ export const TagsEditor = ({ pageId, readonly }: TagsEditorProps) => {
                 >
                   <TagItem maxWidth="100%" tag={tag} mode="inline" />
                   <div className={styles.spacer} />
-                  <EditTagMenu tagId={tag.id}>
+                  <EditTagMenu tagId={tag.id} onTagDelete={onTagDelete}>
                     <IconButton
                       className={styles.tagEditIcon}
                       type="plain"
@@ -307,6 +329,11 @@ export const TagsEditor = ({ pageId, readonly }: TagsEditorProps) => {
           <Scrollable.Scrollbar style={{ transform: 'translateX(6px)' }} />
         </Scrollable.Root>
       </div>
+      <DeleteTagConfirmModal
+        open={open}
+        onOpenChange={handleCloseModal}
+        selectedTagIds={selectedTagIds}
+      />
     </div>
   );
 };

packages/frontend/core/src/components/page-list/operation-cell.tsx

@@ -4,7 +4,6 @@ import {
   Menu,
   MenuIcon,
   MenuItem,
-  toast,
   Tooltip,
 } from '@affine/component';
 import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
@@ -334,8 +333,7 @@ export const TagOperationCell = ({
 
   const handleDelete = useCallback(() => {
     onTagDelete([tag.id]);
-    toast(t['com.affine.tags.delete-tags.toast']());
-  }, [onTagDelete, t, tag.id]);
+  }, [onTagDelete, tag.id]);
   return (
     <>
       <div className={styles.editTagWrapper} data-show={open}>

packages/frontend/core/src/components/page-list/tags/virtualized-tag-list.tsx

@@ -1,7 +1,5 @@
-import { toast } from '@affine/component';
 import type { Tag } from '@affine/core/modules/tag';
 import { Trans } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useService } from '@toeverything/infra';
 import { Workspace } from '@toeverything/infra';
 import { useCallback, useMemo, useRef, useState } from 'react';
@@ -25,7 +23,6 @@ export const VirtualizedTagList = ({
   tagMetas: TagMeta[];
   onTagDelete: (tagIds: string[]) => void;
 }) => {
-  const t = useAFFiNEI18N();
   const listRef = useRef<ItemListHandle>(null);
   const [showFloatingToolbar, setShowFloatingToolbar] = useState(false);
   const [showCreateTagInput, setShowCreateTagInput] = useState(false);
@@ -74,10 +71,9 @@ export const VirtualizedTagList = ({
 
   const handleDelete = useCallback(() => {
     onTagDelete(selectedTagIds);
-    toast(t['com.affine.delete-tags.count']({ count: selectedTagIds.length }));
     hideFloatingToolbar();
     return;
-  }, [hideFloatingToolbar, onTagDelete, selectedTagIds, t]);
+  }, [hideFloatingToolbar, onTagDelete, selectedTagIds]);
 
   const onOpenCreate = useCallback(() => {
     setShowCreateTagInput(true);