From ede576061d473143aaa463b9921fb169bd177248 Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Wed, 31 Jul 2024 02:41:53 +0000
Subject: [PATCH] fix(core): adjust sidebar explorer empty status (#7657)

Close AF-1126,AF-1132
---
 .../component/src/ui/button/styles.css.ts     |  5 +-
 .../empty-layout.css.ts}                      | 20 +++++---
 .../explorer/views/layouts/empty-layout.tsx   | 49 +++++++++++++++++++
 .../explorer/views/nodes/folder/empty.css.ts  | 33 -------------
 .../explorer/views/nodes/folder/empty.tsx     | 28 +++++------
 .../explorer/views/nodes/folder/index.tsx     |  6 ++-
 .../views/sections/collections/empty.css.ts   | 35 -------------
 .../views/sections/collections/empty.tsx      | 24 +++------
 .../views/sections/favorites/empty.tsx        | 22 ++++-----
 .../views/sections/organize/empty.css.ts      | 36 --------------
 .../views/sections/organize/empty.tsx         | 26 ++++------
 .../explorer/views/sections/tags/empty.css.ts | 36 --------------
 .../explorer/views/sections/tags/empty.tsx    | 28 +++--------
 .../explorer/views/sections/tags/index.tsx    |  4 +-
 packages/frontend/i18n/src/resources/en.json  |  2 +-
 15 files changed, 116 insertions(+), 238 deletions(-)
 rename packages/frontend/core/src/modules/explorer/views/{sections/favorites/empty.css.ts => layouts/empty-layout.css.ts} (62%)
 create mode 100644 packages/frontend/core/src/modules/explorer/views/layouts/empty-layout.tsx
 delete mode 100644 packages/frontend/core/src/modules/explorer/views/sections/collections/empty.css.ts
 delete mode 100644 packages/frontend/core/src/modules/explorer/views/sections/organize/empty.css.ts
 delete mode 100644 packages/frontend/core/src/modules/explorer/views/sections/tags/empty.css.ts

diff --git a/packages/frontend/component/src/ui/button/styles.css.ts b/packages/frontend/component/src/ui/button/styles.css.ts
index 147696ed0d..344ae12f60 100644
--- a/packages/frontend/component/src/ui/button/styles.css.ts
+++ b/packages/frontend/component/src/ui/button/styles.css.ts
@@ -1,4 +1,5 @@
 import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { globalStyle, style } from '@vanilla-extract/css';
 export const dropdownBtn = style({
   display: 'inline-flex',
@@ -124,8 +125,8 @@ export const button = style({
   // changeable
   height: '28px',
   background: cssVar('white'),
-  borderColor: cssVar('borderColor'),
-  color: cssVar('textPrimaryColor'),
+  borderColor: cssVarV2('layer/border'),
+  color: cssVarV2('text/primary'),
   selectors: {
     '&.text-bold': {
       fontWeight: 600,
diff --git a/packages/frontend/core/src/modules/explorer/views/sections/favorites/empty.css.ts b/packages/frontend/core/src/modules/explorer/views/layouts/empty-layout.css.ts
similarity index 62%
rename from packages/frontend/core/src/modules/explorer/views/sections/favorites/empty.css.ts
rename to packages/frontend/core/src/modules/explorer/views/layouts/empty-layout.css.ts
index c9fb078fe3..68168e6d31 100644
--- a/packages/frontend/core/src/modules/explorer/views/sections/favorites/empty.css.ts
+++ b/packages/frontend/core/src/modules/explorer/views/layouts/empty-layout.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 content = style({
@@ -6,8 +7,8 @@ export const content = style({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
-  gap: 6,
-  padding: '9px 20px 25px 21px',
+  gap: 4,
+  padding: '12px 0px',
 });
 export const iconWrapper = style({
   width: 36,
@@ -16,21 +17,24 @@ export const iconWrapper = style({
   alignItems: 'center',
   justifyContent: 'center',
   borderRadius: '50%',
-  backgroundColor: cssVar('hoverColor'),
+  backgroundColor: cssVarV2('button/emptyIconBackground'),
 });
 export const icon = style({
   fontSize: 20,
-  color: cssVar('iconSecondary'),
+  color: cssVarV2('icon/secondary'),
 });
 export const message = style({
   fontSize: cssVar('fontSm'),
   textAlign: 'center',
-  color: cssVar('black30'),
+  color: cssVarV2('text/tertiary'),
   userSelect: 'none',
+  fontWeight: 400,
+  lineHeight: '22px',
 });
 
 export const newButton = style({
-  padding: '0 8px',
-  height: '28px',
-  fontSize: cssVar('fontXs'),
+  marginTop: 8,
+  padding: '4px 8px',
+  height: '30px',
+  fontSize: cssVar('fontSm'),
 });
diff --git a/packages/frontend/core/src/modules/explorer/views/layouts/empty-layout.tsx b/packages/frontend/core/src/modules/explorer/views/layouts/empty-layout.tsx
new file mode 100644
index 0000000000..2ffdd11bdf
--- /dev/null
+++ b/packages/frontend/core/src/modules/explorer/views/layouts/empty-layout.tsx
@@ -0,0 +1,49 @@
+import { Button } from '@affine/component';
+import clsx from 'clsx';
+import {
+  forwardRef,
+  type HTMLAttributes,
+  type Ref,
+  type SVGProps,
+} from 'react';
+
+import * as styles from './empty-layout.css';
+
+interface ExplorerGroupEmptyProps extends HTMLAttributes<HTMLDivElement> {
+  icon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+  message: string;
+  messageTestId?: string;
+  actionText?: string;
+  onActionClick?: () => void;
+}
+
+export const ExplorerGroupEmpty = forwardRef(function ExplorerGroupEmpty(
+  {
+    icon: Icon,
+    message,
+    messageTestId,
+    actionText,
+    children,
+    className,
+    onActionClick,
+    ...attrs
+  }: ExplorerGroupEmptyProps,
+  ref: Ref<HTMLDivElement>
+) {
+  return (
+    <div className={clsx(styles.content, className)} ref={ref} {...attrs}>
+      <div className={styles.iconWrapper}>
+        <Icon className={styles.icon} />
+      </div>
+      <div data-testid={messageTestId} className={styles.message}>
+        {message}
+      </div>
+      {actionText ? (
+        <Button className={styles.newButton} onClick={onActionClick}>
+          {actionText}
+        </Button>
+      ) : null}
+      {children}
+    </div>
+  );
+});
diff --git a/packages/frontend/core/src/modules/explorer/views/nodes/folder/empty.css.ts b/packages/frontend/core/src/modules/explorer/views/nodes/folder/empty.css.ts
index d0bb8ae9ee..0fe8f49f21 100644
--- a/packages/frontend/core/src/modules/explorer/views/nodes/folder/empty.css.ts
+++ b/packages/frontend/core/src/modules/explorer/views/nodes/folder/empty.css.ts
@@ -1,39 +1,6 @@
 import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
 
-export const content = style({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  gap: 6,
-  padding: '9px 20px 25px 21px',
-});
-export const iconWrapper = style({
-  width: 36,
-  height: 36,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: '50%',
-  backgroundColor: cssVar('hoverColor'),
-});
-export const icon = style({
-  fontSize: 20,
-  color: cssVar('iconSecondary'),
-});
-export const message = style({
-  fontSize: cssVar('fontSm'),
-  textAlign: 'center',
-  color: cssVar('black30'),
-  userSelect: 'none',
-});
-
-export const newButton = style({
-  padding: '0 8px',
-  height: '28px',
-  fontSize: cssVar('fontXs'),
-});
-
 export const draggedOverHighlight = style({
   selectors: {
     '&[data-dragged-over="true"]': {
diff --git a/packages/frontend/core/src/modules/explorer/views/nodes/folder/empty.tsx b/packages/frontend/core/src/modules/explorer/views/nodes/folder/empty.tsx
index f7e6c1f2df..097f7cc8d8 100644
--- a/packages/frontend/core/src/modules/explorer/views/nodes/folder/empty.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/nodes/folder/empty.tsx
@@ -1,5 +1,4 @@
 import {
-  Button,
   type DropTargetDropEvent,
   type DropTargetOptions,
   useDropTarget,
@@ -9,6 +8,7 @@ import { useI18n } from '@affine/i18n';
 import { FolderIcon } from '@blocksuite/icons/rc';
 import clsx from 'clsx';
 
+import { ExplorerGroupEmpty } from '../../layouts/empty-layout';
 import * as styles from './empty.css';
 
 export const FolderEmpty = ({
@@ -32,22 +32,16 @@ export const FolderEmpty = ({
 
   const t = useI18n();
   return (
-    <div
-      className={clsx(styles.content, styles.draggedOverHighlight, className)}
+    <ExplorerGroupEmpty
+      className={clsx(styles.draggedOverHighlight, className)}
       ref={dropTargetRef}
-    >
-      <div className={styles.iconWrapper}>
-        <FolderIcon className={styles.icon} />
-      </div>
-      <div
-        data-testid="slider-bar-organize-empty-message"
-        className={styles.message}
-      >
-        {t['com.affine.rootAppSidebar.organize.empty-folder']()}
-      </div>
-      <Button className={styles.newButton} onClick={onClickCreate}>
-        {t['com.affine.rootAppSidebar.organize.empty-folder.add-pages']()}
-      </Button>
-    </div>
+      icon={FolderIcon}
+      message={t['com.affine.rootAppSidebar.organize.empty-folder']()}
+      messageTestId="slider-bar-organize-empty-message"
+      actionText={t[
+        'com.affine.rootAppSidebar.organize.empty-folder.add-pages'
+      ]()}
+      onActionClick={onClickCreate}
+    />
   );
 };
diff --git a/packages/frontend/core/src/modules/explorer/views/nodes/folder/index.tsx b/packages/frontend/core/src/modules/explorer/views/nodes/folder/index.tsx
index 6c0c783f79..e564ff96c0 100644
--- a/packages/frontend/core/src/modules/explorer/views/nodes/folder/index.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/nodes/folder/index.tsx
@@ -814,7 +814,11 @@ export const ExplorerFolderNodeFolder = ({
       operations={finalOperations}
       canDrop={handleCanDrop}
       childrenPlaceholder={
-        <FolderEmpty canDrop={handleCanDrop} onDrop={handleDropOnPlaceholder} />
+        <FolderEmpty
+          canDrop={handleCanDrop}
+          onDrop={handleDropOnPlaceholder}
+          onClickCreate={() => handleAddToFolder('doc')}
+        />
       }
       dropEffect={handleDropEffect}
       data-testid={`explorer-folder-${node.id}`}
diff --git a/packages/frontend/core/src/modules/explorer/views/sections/collections/empty.css.ts b/packages/frontend/core/src/modules/explorer/views/sections/collections/empty.css.ts
deleted file mode 100644
index ca05081fad..0000000000
--- a/packages/frontend/core/src/modules/explorer/views/sections/collections/empty.css.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { cssVar } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
-
-export const content = style({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  gap: 6,
-  padding: '9px 20px 25px 21px',
-});
-export const iconWrapper = style({
-  width: 36,
-  height: 36,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: '50%',
-  backgroundColor: cssVar('hoverColor'),
-});
-export const icon = style({
-  fontSize: 20,
-  color: cssVar('iconSecondary'),
-});
-export const message = style({
-  fontSize: cssVar('fontSm'),
-  textAlign: 'center',
-  color: cssVar('black30'),
-  userSelect: 'none',
-});
-
-export const newButton = style({
-  padding: '0 8px',
-  height: '28px',
-  fontSize: cssVar('fontXs'),
-});
diff --git a/packages/frontend/core/src/modules/explorer/views/sections/collections/empty.tsx b/packages/frontend/core/src/modules/explorer/views/sections/collections/empty.tsx
index 6d45ad1c8a..cdd5212a3c 100644
--- a/packages/frontend/core/src/modules/explorer/views/sections/collections/empty.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/sections/collections/empty.tsx
@@ -1,8 +1,7 @@
-import { Button } from '@affine/component';
 import { useI18n } from '@affine/i18n';
 import { ViewLayersIcon } from '@blocksuite/icons/rc';
 
-import * as styles from './empty.css';
+import { ExplorerGroupEmpty } from '../../layouts/empty-layout';
 
 export const RootEmpty = ({
   onClickCreate,
@@ -12,19 +11,12 @@ export const RootEmpty = ({
   const t = useI18n();
 
   return (
-    <div className={styles.content}>
-      <div className={styles.iconWrapper}>
-        <ViewLayersIcon className={styles.icon} />
-      </div>
-      <div
-        data-testid="slider-bar-collection-empty-message"
-        className={styles.message}
-      >
-        {t['com.affine.collections.empty.message']()}
-      </div>
-      <Button className={styles.newButton} onClick={onClickCreate}>
-        {t['com.affine.collections.empty.new-collection-button']()}
-      </Button>
-    </div>
+    <ExplorerGroupEmpty
+      icon={ViewLayersIcon}
+      message={t['com.affine.collections.empty.message']()}
+      messageTestId="slider-bar-collection-empty-message"
+      actionText={t['com.affine.collections.empty.new-collection-button']()}
+      onActionClick={onClickCreate}
+    />
   );
 };
diff --git a/packages/frontend/core/src/modules/explorer/views/sections/favorites/empty.tsx b/packages/frontend/core/src/modules/explorer/views/sections/favorites/empty.tsx
index ca3f483d90..84720e57ff 100644
--- a/packages/frontend/core/src/modules/explorer/views/sections/favorites/empty.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/sections/favorites/empty.tsx
@@ -5,10 +5,10 @@ import {
 } from '@affine/component';
 import type { AffineDNDData } from '@affine/core/types/dnd';
 import { useI18n } from '@affine/i18n';
-import { FolderIcon } from '@blocksuite/icons/rc';
+import { FavoriteIcon } from '@blocksuite/icons/rc';
 
+import { ExplorerGroupEmpty } from '../../layouts/empty-layout';
 import { DropEffect, type ExplorerTreeNodeDropEffect } from '../../tree';
-import * as styles from './empty.css';
 
 export const RootEmpty = ({
   onDrop,
@@ -34,16 +34,12 @@ export const RootEmpty = ({
     );
 
   return (
-    <div className={styles.content} ref={dropTargetRef}>
-      <div className={styles.iconWrapper}>
-        <FolderIcon className={styles.icon} />
-      </div>
-      <div
-        data-testid="slider-bar-favorites-empty-message"
-        className={styles.message}
-      >
-        {t['com.affine.rootAppSidebar.favorites.empty']()}
-      </div>
+    <ExplorerGroupEmpty
+      ref={dropTargetRef}
+      icon={FavoriteIcon}
+      message={t['com.affine.rootAppSidebar.favorites.empty']()}
+      messageTestId="slider-bar-favorites-empty-message"
+    >
       {dropEffect && draggedOverDraggable && (
         <DropEffect
           position={{
@@ -56,6 +52,6 @@ export const RootEmpty = ({
           })}
         />
       )}
-    </div>
+    </ExplorerGroupEmpty>
   );
 };
diff --git a/packages/frontend/core/src/modules/explorer/views/sections/organize/empty.css.ts b/packages/frontend/core/src/modules/explorer/views/sections/organize/empty.css.ts
deleted file mode 100644
index 1d7c13992b..0000000000
--- a/packages/frontend/core/src/modules/explorer/views/sections/organize/empty.css.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { cssVar } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
-
-export const content = style({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  gap: 6,
-  padding: '9px 20px 25px 21px',
-  position: 'relative',
-});
-export const iconWrapper = style({
-  width: 36,
-  height: 36,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: '50%',
-  backgroundColor: cssVar('hoverColor'),
-});
-export const icon = style({
-  fontSize: 20,
-  color: cssVar('iconSecondary'),
-});
-export const message = style({
-  fontSize: cssVar('fontSm'),
-  textAlign: 'center',
-  color: cssVar('black30'),
-  userSelect: 'none',
-});
-
-export const newButton = style({
-  padding: '0 8px',
-  height: '28px',
-  fontSize: cssVar('fontXs'),
-});
diff --git a/packages/frontend/core/src/modules/explorer/views/sections/organize/empty.tsx b/packages/frontend/core/src/modules/explorer/views/sections/organize/empty.tsx
index 5c4f9a3842..393decad5f 100644
--- a/packages/frontend/core/src/modules/explorer/views/sections/organize/empty.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/sections/organize/empty.tsx
@@ -1,8 +1,7 @@
-import { Button } from '@affine/component';
 import { useI18n } from '@affine/i18n';
 import { FolderIcon } from '@blocksuite/icons/rc';
 
-import * as styles from './empty.css';
+import { ExplorerGroupEmpty } from '../../layouts/empty-layout';
 
 export const RootEmpty = ({
   onClickCreate,
@@ -12,19 +11,14 @@ export const RootEmpty = ({
   const t = useI18n();
 
   return (
-    <div className={styles.content}>
-      <div className={styles.iconWrapper}>
-        <FolderIcon className={styles.icon} />
-      </div>
-      <div
-        data-testid="slider-bar-organize-empty-message"
-        className={styles.message}
-      >
-        {t['com.affine.rootAppSidebar.organize.empty']()}
-      </div>
-      <Button className={styles.newButton} onClick={onClickCreate}>
-        {t['com.affine.rootAppSidebar.organize.empty.new-folders-button']()}
-      </Button>
-    </div>
+    <ExplorerGroupEmpty
+      icon={FolderIcon}
+      message={t['com.affine.rootAppSidebar.organize.empty']()}
+      messageTestId="slider-bar-organize-empty-message"
+      actionText={t[
+        'com.affine.rootAppSidebar.organize.empty.new-folders-button'
+      ]()}
+      onActionClick={onClickCreate}
+    />
   );
 };
diff --git a/packages/frontend/core/src/modules/explorer/views/sections/tags/empty.css.ts b/packages/frontend/core/src/modules/explorer/views/sections/tags/empty.css.ts
deleted file mode 100644
index 1d7c13992b..0000000000
--- a/packages/frontend/core/src/modules/explorer/views/sections/tags/empty.css.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { cssVar } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
-
-export const content = style({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  gap: 6,
-  padding: '9px 20px 25px 21px',
-  position: 'relative',
-});
-export const iconWrapper = style({
-  width: 36,
-  height: 36,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: '50%',
-  backgroundColor: cssVar('hoverColor'),
-});
-export const icon = style({
-  fontSize: 20,
-  color: cssVar('iconSecondary'),
-});
-export const message = style({
-  fontSize: cssVar('fontSm'),
-  textAlign: 'center',
-  color: cssVar('black30'),
-  userSelect: 'none',
-});
-
-export const newButton = style({
-  padding: '0 8px',
-  height: '28px',
-  fontSize: cssVar('fontXs'),
-});
diff --git a/packages/frontend/core/src/modules/explorer/views/sections/tags/empty.tsx b/packages/frontend/core/src/modules/explorer/views/sections/tags/empty.tsx
index 4625b5e41a..a4bb490030 100644
--- a/packages/frontend/core/src/modules/explorer/views/sections/tags/empty.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/sections/tags/empty.tsx
@@ -1,30 +1,16 @@
-import { Button } from '@affine/component';
 import { useI18n } from '@affine/i18n';
 import { TagIcon } from '@blocksuite/icons/rc';
 
-import * as styles from './empty.css';
+import { ExplorerGroupEmpty } from '../../layouts/empty-layout';
 
-export const RootEmpty = ({
-  onClickCreate,
-}: {
-  onClickCreate?: () => void;
-}) => {
+export const RootEmpty = () => {
   const t = useI18n();
 
   return (
-    <div className={styles.content}>
-      <div className={styles.iconWrapper}>
-        <TagIcon className={styles.icon} />
-      </div>
-      <div
-        data-testid="slider-bar-tags-empty-message"
-        className={styles.message}
-      >
-        {t['com.affine.rootAppSidebar.tags.empty']()}
-      </div>
-      <Button className={styles.newButton} onClick={onClickCreate}>
-        {t['com.affine.rootAppSidebar.tags.empty.new-tag-button']()}
-      </Button>
-    </div>
+    <ExplorerGroupEmpty
+      icon={TagIcon}
+      message={t['com.affine.rootAppSidebar.tags.empty']()}
+      messageTestId="slider-bar-tags-empty-message"
+    />
   );
 };
diff --git a/packages/frontend/core/src/modules/explorer/views/sections/tags/index.tsx b/packages/frontend/core/src/modules/explorer/views/sections/tags/index.tsx
index f29ae4f8d1..1fb3027dc9 100644
--- a/packages/frontend/core/src/modules/explorer/views/sections/tags/index.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/sections/tags/index.tsx
@@ -69,9 +69,7 @@ export const ExplorerTags = ({
         </IconButton>
       </CategoryDivider>
       <Collapsible.Content>
-        <ExplorerTreeRoot
-          placeholder={<RootEmpty onClickCreate={handleCreateNewFavoriteDoc} />}
-        >
+        <ExplorerTreeRoot placeholder={<RootEmpty />}>
           {tags.map(tag => (
             <ExplorerTagNode
               key={tag.id}
diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json
index 97fde1bd00..a4d8e66ec9 100644
--- a/packages/frontend/i18n/src/resources/en.json
+++ b/packages/frontend/i18n/src/resources/en.json
@@ -1149,7 +1149,7 @@
   "com.affine.rootAppSidebar.explorer.drop-effect.move": "Move",
   "com.affine.rootAppSidebar.explorer.drop-effect.copy": "Copy",
   "com.affine.rootAppSidebar.docs.no-subdoc": "No linked docs",
-  "com.affine.rootAppSidebar.favorites.empty": "You can add documents to your favourites",
+  "com.affine.rootAppSidebar.favorites.empty": "No Favorites",
   "com.affine.rootAppSidebar.others": "Others",
   "com.affine.rootAppSidebar.docs.references-loading": "Loading linked docs...",
   "com.affine.search-tags.placeholder": "Type here ...",