feat: add tooltips for collection bar action buttons (#3545)

Co-authored-by: Alex Yang <himself65@outlook.com>

packages/component/src/components/page-list/view/collection-bar.tsx

@@ -19,26 +19,28 @@ import { Button } from '../../../ui/button/button';
 import { useCollectionManager } from '../use-collection-manager';
 import * as styles from './collection-bar.css';
 
-export const CollectionBar = ({
+interface CollectionBarProps {
-  getPageInfo,
-  propertiesMeta,
-  columnsCount,
-  workspaceId,
-}: {
   getPageInfo: GetPageInfoById;
   propertiesMeta: PropertiesMeta;
   columnsCount: number;
   workspaceId: string;
-}) => {
+}
+
+interface CollectionBarAction {
+  icon: ReactNode;
+  click: () => void;
+  className?: string;
+  name: string;
+  tooltip: string;
+}
+
+export const CollectionBar = (props: CollectionBarProps) => {
+  const { getPageInfo, propertiesMeta, columnsCount, workspaceId } = props;
+  const t = useAFFiNEI18N();
   const setting = useCollectionManager(workspaceId);
   const collection = setting.currentCollection;
   const [open, setOpen] = useState(false);
-  const actions: {
+  const actions = useMemo<CollectionBarAction[]>(
-    icon: ReactNode;
-    click: () => void;
-    className?: string;
-    name: string;
-  }[] = useMemo(
     () => [
       {
         icon: (
@@ -56,6 +58,9 @@ export const CollectionBar = ({
           </>
         ),
         name: 'pin',
+        tooltip: collection.pinned
+          ? t['com.affine.collection-bar.action.tooltip.unpin']()
+          : t['com.affine.collection-bar.action.tooltip.pin'](),
         className: styles.pin,
         click: () => {
           return setting.updateCollection({
@@ -67,6 +72,7 @@ export const CollectionBar = ({
       {
         icon: <FilterIcon />,
         name: 'edit',
+        tooltip: t['com.affine.collection-bar.action.tooltip.edit'](),
         click: () => {
           setOpen(true);
         },
@@ -74,6 +80,7 @@ export const CollectionBar = ({
       {
         icon: <DeleteIcon style={{ color: 'var(--affine-error-color)' }} />,
         name: 'delete',
+        tooltip: t['com.affine.collection-bar.action.tooltip.delete'](),
         click: () => {
           setting.deleteCollection(collection.id).catch(err => {
             console.error(err);
@@ -81,10 +88,10 @@ export const CollectionBar = ({
         },
       },
     ],
-    [setting, collection]
+    [collection, t, setting]
   );
   const onClose = useCallback(() => setOpen(false), []);
-  const t = useAFFiNEI18N();
+
   return !setting.isDefault ? (
     <tr style={{ userSelect: 'none' }}>
       <td>
@@ -120,14 +127,19 @@ export const CollectionBar = ({
           </Tooltip>
           {actions.map(action => {
             return (
-              <div
+              <Tooltip
                 key={action.name}
-                data-testid={`collection-bar-option-${action.name}`}
+                content={action.tooltip}
-                onClick={action.click}
+                placement="top-start"
-                className={clsx(styles.option, action.className)}
               >
-                {action.icon}
+                <div
-              </div>
+                  data-testid={`collection-bar-option-${action.name}`}
+                  onClick={action.click}
+                  className={clsx(styles.option, action.className)}
+                >
+                  {action.icon}
+                </div>
+              </Tooltip>
             );
           })}
         </div>

packages/i18n/src/resources/en.json

@@ -374,6 +374,10 @@
   "Collections": "Collections",
   "Save As New Collection": "Save As New Collection",
   "Update Collection": "Update Collection",
+  "com.affine.collection-bar.action.tooltip.pin": "Pin to Sidebar",
+  "com.affine.collection-bar.action.tooltip.unpin": "Unpin",
+  "com.affine.collection-bar.action.tooltip.edit": "Edit",
+  "com.affine.collection-bar.action.tooltip.delete": "Delete",
   "Back to all": "Back to all",
   "Edit Filter": "Edit Filter",
   "Unpin": "Unpin",

packages/i18n/src/resources/zh-Hans.json

@@ -404,5 +404,9 @@
   "com.affine.settings.workspace.remove.message": "从此设备中删除工作区，并可选择删除所有数据。",
   "com.affine.settings.appearance.sidebar.noise": "侧边栏的噪点背景",
   "com.affine.settings.appearance.sidebar.translucent": "侧边栏的透明效果",
-  "com.affine.settings.appearance.sidebar.translucent.message": "在侧边栏使用半透明效果。"
+  "com.affine.settings.appearance.sidebar.translucent.message": "在侧边栏使用半透明效果。",
+  "com.affine.collection-bar.action.tooltip.pin": "固定到侧边栏",
+  "com.affine.collection-bar.action.tooltip.unpin": "取消固定",
+  "com.affine.collection-bar.action.tooltip.edit": "编辑",
+  "com.affine.collection-bar.action.tooltip.delete": "删除"
 }