From e7de20f648649e37b80300a9bbe895a2c51fe1de Mon Sep 17 00:00:00 2001
From: JimmFly <447268514@qq.com>
Date: Wed, 3 Apr 2024 04:04:36 +0000
Subject: [PATCH] fix(core): add max-height to tag filter (#6442)

close TOV-778
close #6334
---
 .../page-list/filter/multi-select.css.ts      |  6 ++
 .../page-list/filter/multi-select.tsx         | 76 +++++++++++--------
 packages/frontend/i18n/src/resources/en.json  |  3 +-
 3 files changed, 54 insertions(+), 31 deletions(-)

diff --git a/packages/frontend/core/src/components/page-list/filter/multi-select.css.ts b/packages/frontend/core/src/components/page-list/filter/multi-select.css.ts
index 9c595e3971..6eac712031 100644
--- a/packages/frontend/core/src/components/page-list/filter/multi-select.css.ts
+++ b/packages/frontend/core/src/components/page-list/filter/multi-select.css.ts
@@ -22,6 +22,12 @@ export const optionList = style({
   flexDirection: 'column',
   gap: 4,
   padding: '0 4px',
+  maxHeight: '220px',
+});
+export const scrollbar = style({
+  vars: {
+    '--scrollbar-width': '4px',
+  },
 });
 export const selectOption = style({
   display: 'flex',
diff --git a/packages/frontend/core/src/components/page-list/filter/multi-select.tsx b/packages/frontend/core/src/components/page-list/filter/multi-select.tsx
index 41dd71552a..d0eae8daa5 100644
--- a/packages/frontend/core/src/components/page-list/filter/multi-select.tsx
+++ b/packages/frontend/core/src/components/page-list/filter/multi-select.tsx
@@ -1,4 +1,5 @@
-import { Menu, MenuItem } from '@affine/component';
+import { Menu, MenuItem, Scrollable } from '@affine/component';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { MouseEvent } from 'react';
 import { useMemo } from 'react';
 
@@ -16,40 +17,55 @@ export const MultiSelect = ({
     value: string;
   }[];
 }) => {
+  const t = useAFFiNEI18N();
   const optionMap = useMemo(
     () => Object.fromEntries(options.map(v => [v.value, v])),
     [options]
   );
 
+  const items = useMemo(() => {
+    return (
+      <Scrollable.Root>
+        <Scrollable.Viewport
+          data-testid="multi-select"
+          className={styles.optionList}
+        >
+          {options.length === 0 ? (
+            <MenuItem checked={true}>
+              {t['com.affine.filter.empty-tag']()}
+            </MenuItem>
+          ) : (
+            options.map(option => {
+              const selected = value.includes(option.value);
+              const click = (e: MouseEvent<HTMLDivElement>) => {
+                e.stopPropagation();
+                e.preventDefault();
+                if (selected) {
+                  onChange(value.filter(v => v !== option.value));
+                } else {
+                  onChange([...value, option.value]);
+                }
+              };
+              return (
+                <MenuItem
+                  data-testid={`multi-select-${option.label}`}
+                  checked={selected}
+                  onClick={click}
+                  key={option.value}
+                >
+                  {option.label}
+                </MenuItem>
+              );
+            })
+          )}
+        </Scrollable.Viewport>
+        <Scrollable.Scrollbar className={styles.scrollbar} />
+      </Scrollable.Root>
+    );
+  }, [onChange, options, t, value]);
+
   return (
-    <Menu
-      items={
-        <div data-testid="multi-select" className={styles.optionList}>
-          {options.map(option => {
-            const selected = value.includes(option.value);
-            const click = (e: MouseEvent<HTMLDivElement>) => {
-              e.stopPropagation();
-              e.preventDefault();
-              if (selected) {
-                onChange(value.filter(v => v !== option.value));
-              } else {
-                onChange([...value, option.value]);
-              }
-            };
-            return (
-              <MenuItem
-                data-testid={`multi-select-${option.label}`}
-                checked={selected}
-                onClick={click}
-                key={option.value}
-              >
-                {option.label}
-              </MenuItem>
-            );
-          })}
-        </div>
-      }
-    >
+    <Menu items={items}>
       <div className={styles.content}>
         {value.length ? (
           <div className={styles.text}>
@@ -57,7 +73,7 @@ export const MultiSelect = ({
           </div>
         ) : (
           <div style={{ color: 'var(--affine-text-secondary-color)' }}>
-            Empty
+            {t['com.affine.filter.empty-tag']()}
           </div>
         )}
       </div>
diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json
index 2a79b0dc6d..eddf6da245 100644
--- a/packages/frontend/i18n/src/resources/en.json
+++ b/packages/frontend/i18n/src/resources/en.json
@@ -1193,5 +1193,6 @@
   "will be moved to Trash": "{{title}} will be moved to Trash",
   "will delete member": "will delete member",
   "com.affine.collection.add-doc.confirm.title": "Add new doc to this collection",
-  "com.affine.collection.add-doc.confirm.description": "Do you want to add a document to the current collection? If it is filtered based on rules, this will add a set of included rules."
+  "com.affine.collection.add-doc.confirm.description": "Do you want to add a document to the current collection? If it is filtered based on rules, this will add a set of included rules.",
+  "com.affine.filter.empty-tag": "Empty"
 }