feat(core): adjust filter area style (#12534)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
  - Added support for displaying the "Add Filter" action as either an icon button or a labeled button, depending on the filter state.
  - Introduced a localized label for the "Add Filter" button.

- **Style**
  - Improved filter area layout and styling for better visual consistency.
  - Adjusted padding and added styles to hide empty filter values.

- **Bug Fixes**
  - Updated test identifiers for filter value elements to improve test reliability.

- **Documentation**
  - Added a new English localization string for the "Add Filter" button.

- **Chores**
  - Updated translation completeness percentages for various locales.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/core/src/components/filter/add-filter.tsx

@@ -1,4 +1,10 @@
-import { IconButton, Menu, MenuItem, MenuSeparator } from '@affine/component';
+import {
+  Button,
+  IconButton,
+  Menu,
+  MenuItem,
+  MenuSeparator,
+} from '@affine/component';
 import type { FilterParams } from '@affine/core/modules/collection-rules';
 import { WorkspacePropertyService } from '@affine/core/modules/workspace-property';
 import { useI18n } from '@affine/i18n';
@@ -142,9 +148,12 @@ export const AddFilterMenu = ({
 
 export const AddFilter = ({
   onAdd,
+  variant = 'icon-button',
 }: {
   onAdd: (params: FilterParams) => void;
+  variant?: 'icon-button' | 'button';
 }) => {
+  const t = useI18n();
   return (
     <Menu
       items={<AddFilterMenu onAdd={onAdd} />}
@@ -152,9 +161,15 @@ export const AddFilter = ({
         className: styles.addFilterMenuContent,
       }}
     >
-      <IconButton size="16">
-        <PlusIcon />
-      </IconButton>
+      {variant === 'icon-button' ? (
+        <IconButton size="16">
+          <PlusIcon />
+        </IconButton>
+      ) : (
+        <Button prefix={<PlusIcon />} className={styles.addFilterButton}>
+          {t['com.affine.filter.add-filter']()}
+        </Button>
+      )}
     </Menu>
   );
 };

packages/frontend/core/src/components/filter/conditions/condition.tsx

@@ -87,7 +87,7 @@ export const Condition = ({
                   styles.filterValueStyle,
                   styles.ellipsisTextStyle
                 )}
-                data-testid="filter-method"
+                data-testid="filter-value"
               >
                 <Value
                   filter={filter}

packages/frontend/core/src/components/filter/conditions/styles.css.ts

@@ -6,7 +6,7 @@ export const filterTypeStyle = style({
   fontSize: cssVar('fontSm'),
   display: 'flex',
   alignItems: 'center',
-  padding: '0px 4px',
+  padding: '0px 4px 0 0',
   lineHeight: '22px',
   color: cssVar('textPrimaryColor'),
 });
@@ -25,6 +25,9 @@ export const filterValueStyle = style({
       background: cssVar('hoverColor'),
       borderRadius: '4px',
     },
+    '&:empty': {
+      display: 'none',
+    },
   },
 });
 

packages/frontend/core/src/components/filter/filters.tsx

@@ -82,7 +82,14 @@ export const Filters = ({
         />
       )}
 
-      <AddFilter onAdd={handleAdd} />
+      <AddFilter
+        variant={
+          filters.length === 0 && draftFilter === null
+            ? 'button'
+            : 'icon-button'
+        }
+        onAdd={handleAdd}
+      />
     </div>
   );
 };

packages/frontend/core/src/components/filter/styles.css.ts

@@ -68,3 +68,7 @@ export const filterTypeItemName = style({
 export const addFilterMenuContent = style({
   width: '230px',
 });
+
+export const addFilterButton = style({
+  height: '32px',
+});