feat(core): add tooltip and toast for organize operations (#7725)

close AF-1138, AF-1139, AF-1165

packages/frontend/core/src/components/app-sidebar/menu-item/index.css.ts

@@ -1,4 +1,5 @@
 import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 export const linkItemRoot = style({
   color: 'inherit',
@@ -71,7 +72,7 @@ export const postfix = style({
   },
 });
 export const icon = style({
-  color: cssVar('iconColor'),
+  color: cssVarV2('icon/primary'),
   fontSize: '20px',
 });
 export const collapsedIconContainer = style({

packages/frontend/core/src/modules/explorer/views/nodes/collection/operations.tsx

@@ -139,7 +139,13 @@ export const useExplorerCollectionNodeOperations = (
         index: 0,
         inline: true,
         view: (
-          <IconButton size="16" onClick={handleAddDocToCollection}>
+          <IconButton
+            size="16"
+            onClick={handleAddDocToCollection}
+            tooltip={t[
+              'com.affine.rootAppSidebar.explorer.collection-add-tooltip'
+            ]()}
+          >
             <PlusIcon />
           </IconButton>
         ),

packages/frontend/core/src/modules/explorer/views/nodes/doc/operations.tsx

@@ -1,4 +1,5 @@
 import {
+  IconButton,
   MenuIcon,
   MenuItem,
   MenuSeparator,
@@ -18,6 +19,7 @@ import {
   InformationIcon,
   LinkedPageIcon,
   OpenInNewIcon,
+  PlusIcon,
   SplitViewIcon,
 } from '@blocksuite/icons/rc';
 import { DocsService, useLiveData, useServices } from '@toeverything/infra';
@@ -129,6 +131,18 @@ export const useExplorerDocNodeOperations = (
 
   return useMemo(
     () => [
+      {
+        index: 0,
+        inline: true,
+        view: (
+          <IconButton
+            size="16"
+            icon={<PlusIcon />}
+            tooltip={t['com.affine.rootAppSidebar.explorer.doc-add-tooltip']()}
+            onClick={handleAddLinkedPage}
+          />
+        ),
+      },
       ...(runtimeConfig.enableInfoModal
         ? [
             {

packages/frontend/core/src/modules/explorer/views/nodes/folder/index.tsx

@@ -8,6 +8,7 @@ import {
   MenuItem,
   MenuSeparator,
   MenuSub,
+  notify,
 } from '@affine/component';
 import {
   useSelectCollection,
@@ -182,7 +183,13 @@ export const ExplorerFolderNodeFolder = ({
       module: 'organize',
       control: `delete folder`,
     });
-  }, [node]);
+    notify.success({
+      title: t['com.affine.rootAppSidebar.organize.delete.notify-title']({
+        name,
+      }),
+      message: t['com.affine.rootAppSidebar.organize.delete.notify-message'](),
+    });
+  }, [name, node, t]);
 
   const children = useLiveData(node.sortedChildren$);
 
@@ -636,7 +643,13 @@ export const ExplorerFolderNodeFolder = ({
         index: 0,
         inline: true,
         view: (
-          <IconButton size="16" onClick={handleNewDoc}>
+          <IconButton
+            size="16"
+            onClick={handleNewDoc}
+            tooltip={t[
+              'com.affine.rootAppSidebar.explorer.organize-add-tooltip'
+            ]()}
+          >
             <PlusIcon />
           </IconButton>
         ),

packages/frontend/core/src/modules/explorer/views/nodes/tag/operations.tsx

@@ -115,7 +115,11 @@ export const useExplorerTagNodeOperations = (
         index: 0,
         inline: true,
         view: (
-          <IconButton size="16" onClick={handleNewDoc}>
+          <IconButton
+            size="16"
+            onClick={handleNewDoc}
+            tooltip={t['com.affine.rootAppSidebar.explorer.tag-add-tooltip']()}
+          >
             <PlusIcon />
           </IconButton>
         ),

packages/frontend/core/src/modules/explorer/views/sections/collections/index.tsx

@@ -64,6 +64,9 @@ export const ExplorerCollections = () => {
             data-testid="explorer-bar-add-collection-button"
             onClick={handleCreateCollection}
             size="16"
+            tooltip={t[
+              'com.affine.rootAppSidebar.explorer.collection-section-add-tooltip'
+            ]()}
           >
             <PlusIcon />
           </IconButton>

packages/frontend/core/src/modules/explorer/views/sections/favorites/index.tsx

@@ -240,6 +240,9 @@ export const ExplorerFavorites = () => {
             data-testid="explorer-bar-add-favorite-button"
             onClick={handleCreateNewFavoriteDoc}
             size="16"
+            tooltip={t[
+              'com.affine.rootAppSidebar.explorer.fav-section-add-tooltip'
+            ]()}
           >
             <PlusIcon />
           </IconButton>

packages/frontend/core/src/modules/explorer/views/sections/organize/index.tsx

@@ -123,6 +123,9 @@ export const ExplorerOrganize = () => {
           data-testid="explorer-bar-add-organize-button"
           onClick={handleCreateFolder}
           size="16"
+          tooltip={t[
+            'com.affine.rootAppSidebar.explorer.organize-section-add-tooltip'
+          ]()}
         >
           <PlusIcon />
         </IconButton>

packages/frontend/core/src/modules/explorer/views/sections/tags/index.tsx

@@ -54,6 +54,9 @@ export const ExplorerTags = () => {
           data-testid="explorer-bar-add-favorite-button"
           onClick={handleCreateNewFavoriteDoc}
           size="16"
+          tooltip={t[
+            'com.affine.rootAppSidebar.explorer.tag-section-add-tooltip'
+          ]()}
         >
           <PlusIcon />
         </IconButton>

packages/frontend/i18n/src/resources/en.json

@@ -1139,6 +1139,12 @@
   "com.affine.rootAppSidebar.organize.new-folders": "New Folder",
   "com.affine.rootAppSidebar.organize.delete": "Delete",
   "com.affine.rootAppSidebar.organize.delete-from-folder": "Remove from folder",
+  "com.affine.rootAppSidebar.organize.delete.notify-title": "Delete {{name}}",
+  "com.affine.rootAppSidebar.organize.delete.notify-message": "Delete the folder will not delete any docs, tags, or collections.",
+  "com.affine.rootAppSidebar.organize.move.notify-title": "Successfully added to {{to}}",
+  "com.affine.rootAppSidebar.organize.move.notify-message": "Add {{from}} to {{to}}",
+  "com.affine.rootAppSidebar.organize.link.notify-title": "Successfully linked to {{to}}",
+  "com.affine.rootAppSidebar.organize.link.notify-message": "Link {{from}} to {{to}}",
   "com.affine.rootAppSidebar.organize.root-folder-only": "Only folder can be placed on here",
   "com.affine.rootAppSidebar.organize.folder-add-favorite": "Add to favorites",
   "com.affine.rootAppSidebar.organize.folder-rm-favorite": "Remove from favorites",
@@ -1152,6 +1158,14 @@
   "com.affine.rootAppSidebar.explorer.drop-effect.link": "Link",
   "com.affine.rootAppSidebar.explorer.drop-effect.move": "Move",
   "com.affine.rootAppSidebar.explorer.drop-effect.copy": "Copy",
+  "com.affine.rootAppSidebar.explorer.tag-section-add-tooltip": "New Tag",
+  "com.affine.rootAppSidebar.explorer.tag-add-tooltip": "New Doc",
+  "com.affine.rootAppSidebar.explorer.fav-section-add-tooltip": "New Doc",
+  "com.affine.rootAppSidebar.explorer.organize-section-add-tooltip": "New Folder",
+  "com.affine.rootAppSidebar.explorer.organize-add-tooltip": "New Doc",
+  "com.affine.rootAppSidebar.explorer.collection-section-add-tooltip": "New Collection",
+  "com.affine.rootAppSidebar.explorer.collection-add-tooltip": "New Doc",
+  "com.affine.rootAppSidebar.explorer.doc-add-tooltip": "New Linked Doc",
   "com.affine.rootAppSidebar.docs.no-subdoc": "No linked docs",
   "com.affine.rootAppSidebar.favorites.empty": "No Favorites",
   "com.affine.rootAppSidebar.others": "Others",