feat(core): add responsive styles to collection filter (#6486)

https://github.com/toeverything/AFFiNE/assets/102217452/caa4c09b-e1fd-4bd0-a504-535925607e2f

packages/frontend/core/src/components/page-list/filter/condition.tsx

@@ -1,5 +1,6 @@
-import { Menu, MenuItem } from '@affine/component';
+import { Menu, MenuItem, Tooltip } from '@affine/component';
 import type { Filter, Literal, PropertiesMeta } from '@affine/env/filter';
+import clsx from 'clsx';
 import type { ReactNode } from 'react';
 import { useMemo } from 'react';
 
@@ -45,14 +46,7 @@ export const Condition = ({
     (({ ast }) => {
       const args = renderArgs(value, onChange, data.type);
       return (
-        <div
+        <div className={styles.filterContainerStyle}>
-          style={{
-            display: 'flex',
-            userSelect: 'none',
-            alignItems: 'center',
-            overflow: 'hidden',
-          }}
-        >
           <Menu
             items={
               <VariableSelect
@@ -62,10 +56,15 @@ export const Condition = ({
               />
             }
           >
-            <div data-testid="variable-name" className={styles.filterTypeStyle}>
+            <div
+              data-testid="variable-name"
+              className={clsx(styles.filterTypeStyle, styles.ellipsisTextStyle)}
+            >
+              <Tooltip content={ast.left.name}>
                 <div className={styles.filterTypeIconStyle}>
                   {variableDefineMap[ast.left.name].icon}
                 </div>
+              </Tooltip>
               <FilterTag name={ast.left.name} />
             </div>
           </Menu>
@@ -78,7 +77,10 @@ export const Condition = ({
               />
             }
           >
-            <div className={styles.switchStyle} data-testid="filter-name">
+            <div
+              className={clsx(styles.switchStyle, styles.ellipsisTextStyle)}
+              data-testid="filter-name"
+            >
               <FilterTag name={ast.funcName} />
             </div>
           </Menu>
@@ -141,7 +143,7 @@ export const Arg = ({
   return (
     <div
       data-testid="filter-arg"
-      style={{ marginLeft: 4, fontWeight: 600, overflow: 'hidden' }}
+      className={clsx(styles.argStyle, styles.ellipsisTextStyle)}
     >
       {data.render({
         type,

packages/frontend/core/src/components/page-list/filter/filter-tag-translation.tsx

@@ -1,5 +1,7 @@
+import { Tooltip } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 
+import { ellipsisTextStyle } from './index.css';
 type FilterTagProps = {
   name: string;
 };
@@ -49,5 +51,11 @@ const useFilterTag = ({ name }: FilterTagProps) => {
 export const FilterTag = ({ name }: FilterTagProps) => {
   const tag = useFilterTag({ name });
 
-  return <span data-testid={`filler-tag-${tag}`}>{tag}</span>;
+  return (
+    <Tooltip content={tag}>
+      <span className={ellipsisTextStyle} data-testid={`filler-tag-${tag}`}>
+        {tag}
+      </span>
+    </Tooltip>
+  );
 };

packages/frontend/core/src/components/page-list/filter/index.css.ts

@@ -1,5 +1,13 @@
 import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
+
+export const filterContainerStyle = style({
+  display: 'flex',
+  userSelect: 'none',
+  alignItems: 'center',
+  overflow: 'hidden',
+});
+
 export const menuItemStyle = style({
   fontSize: cssVar('fontXs'),
 });
@@ -28,6 +36,7 @@ export const filterItemStyle = style({
   background: cssVar('white'),
   padding: '4px 8px',
   overflow: 'hidden',
+  justifyContent: 'space-between',
 });
 export const filterItemCloseStyle = style({
   display: 'flex',
@@ -53,12 +62,13 @@ export const switchStyle = style({
   transition: 'all 0.15s ease-in-out',
   display: 'flex',
   alignItems: 'center',
+  flex: '3 1 auto',
+  minWidth: '28px',
   ':hover': {
     cursor: 'pointer',
     background: cssVar('hoverColor'),
     borderRadius: '4px',
   },
-  whiteSpace: 'nowrap',
 });
 export const filterTypeStyle = style({
   fontSize: cssVar('fontSm'),
@@ -67,6 +77,7 @@ export const filterTypeStyle = style({
   padding: '2px 4px',
   transition: 'all 0.15s ease-in-out',
   marginRight: '6px',
+  flex: '1 0 auto',
   ':hover': {
     cursor: 'pointer',
     background: cssVar('hoverColor'),
@@ -81,3 +92,15 @@ export const filterTypeIconStyle = style({
   alignItems: 'center',
   color: cssVar('iconColor'),
 });
+
+export const argStyle = style({
+  marginLeft: 4,
+  fontWeight: 600,
+  flex: '1 0 auto',
+});
+
+export const ellipsisTextStyle = style({
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+});

packages/frontend/core/src/components/page-list/filter/multi-select.css.ts

@@ -16,6 +16,11 @@ export const text = style({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
   maxWidth: 350,
+  selectors: {
+    '&.empty': {
+      color: 'var(--affine-text-secondary-color)',
+    },
+  },
 });
 export const optionList = style({
   display: 'flex',

packages/frontend/core/src/components/page-list/filter/multi-select.tsx

@@ -1,5 +1,6 @@
-import { Menu, MenuItem, Scrollable } from '@affine/component';
+import { Menu, MenuItem, Scrollable, Tooltip } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import clsx from 'clsx';
 import type { MouseEvent } from 'react';
 import { useMemo } from 'react';
 
@@ -23,6 +24,11 @@ export const MultiSelect = ({
     [options]
   );
 
+  const content = useMemo(
+    () => value.map(id => optionMap[id]?.label).join(', '),
+    [optionMap, value]
+  );
+
   const items = useMemo(() => {
     return (
       <Scrollable.Root>
@@ -67,15 +73,19 @@ export const MultiSelect = ({
   return (
     <Menu items={items}>
       <div className={styles.content}>
+        <Tooltip
+          content={
+            content.length ? content : t['com.affine.filter.empty-tag']()
+          }
+        >
           {value.length ? (
-          <div className={styles.text}>
+            <div className={styles.text}>{content}</div>
-            {value.map(id => optionMap[id]?.label).join(', ')}
-          </div>
           ) : (
-          <div style={{ color: 'var(--affine-text-secondary-color)' }}>
+            <div className={clsx(styles.text, 'empty')}>
               {t['com.affine.filter.empty-tag']()}
             </div>
           )}
+        </Tooltip>
       </div>
     </Menu>
   );

packages/frontend/core/src/components/page-list/view/edit-collection/rules-mode.tsx

@@ -1,3 +1,4 @@
+import { Tooltip } from '@affine/component';
 import { FavoriteItemsAdapter } from '@affine/core/modules/workspace';
 import type { Collection } from '@affine/env/filter';
 import { Trans } from '@affine/i18n';
@@ -13,7 +14,7 @@ import type { DocMeta } from '@blocksuite/store';
 import { useLiveData, useService } from '@toeverything/infra';
 import clsx from 'clsx';
 import type { ReactNode } from 'react';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { FilterList } from '../../filter';
 import { List, ListScrollContainer } from '../../list';
@@ -96,15 +97,9 @@ export const RulesMode = ({
     },
     [allPageListConfig]
   );
-  return (
+
-    <>
+  const tips = useMemo(
-      {/*prevents modal autofocus to the first input*/}
+    () => (
-      <input
-        type="text"
-        style={{ width: 0, height: 0 }}
-        onFocus={e => requestAnimationFrame(() => e.target.blur())}
-      />
-      <div className={clsx(styles.rulesTitle, styles.ellipsis)}>
       <Trans
         i18nKey="com.affine.editCollection.rules.tips"
         values={{
@@ -114,7 +109,22 @@ export const RulesMode = ({
           2: <span className={styles.rulesTitleHighlight} />,
         }}
       />
-      </div>
+    ),
+    [t]
+  );
+
+  return (
+    <>
+      {/*prevents modal autofocus to the first input*/}
+      <input
+        type="text"
+        style={{ width: 0, height: 0 }}
+        onFocus={e => requestAnimationFrame(() => e.target.blur())}
+      />
+      <Tooltip content={tips}>
+        <div className={clsx(styles.rulesTitle, styles.ellipsis)}>{tips}</div>
+      </Tooltip>
+
       <div className={styles.rulesContainer}>
         <div className={styles.rulesContainerLeft}>
           <div className={styles.rulesContainerLeftTab}>{switchMode}</div>