fix(core): add max-height to tag filter (#6442)

close TOV-778
close #6334

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',

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,16 +17,25 @@ export const MultiSelect = ({
     value: string;
   }[];
 }) => {
+  const t = useAFFiNEI18N();
   const optionMap = useMemo(
     () => Object.fromEntries(options.map(v => [v.value, v])),
     [options]
   );
 
+  const items = useMemo(() => {
     return (
-    <Menu
+      <Scrollable.Root>
-      items={
+        <Scrollable.Viewport
-        <div data-testid="multi-select" className={styles.optionList}>
+          data-testid="multi-select"
-          {options.map(option => {
+          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();
@@ -46,10 +56,16 @@ export const MultiSelect = ({
                   {option.label}
                 </MenuItem>
               );
-          })}
+            })
-        </div>
+          )}
-      }
+        </Scrollable.Viewport>
-    >
+        <Scrollable.Scrollbar className={styles.scrollbar} />
+      </Scrollable.Root>
+    );
+  }, [onChange, options, t, value]);
+
+  return (
+    <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>

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"
 }