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',
+});

packages/frontend/core/src/desktop/pages/workspace/all-page/all-page.css.ts

@@ -1,3 +1,4 @@
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 export const scrollContainer = style({
   flex: 1,
@@ -55,11 +56,8 @@ export const pinnedCollection = style({
 });
 
 export const filterArea = style({
-  display: 'flex',
-  flexDirection: 'row',
-  gap: 8,
   padding: '0 24px',
-  paddingTop: '24px',
+  paddingTop: '12px',
   '@container': {
     'docs-body (width <= 500px)': {
       padding: '0 20px',
@@ -70,6 +68,15 @@ export const filterArea = style({
   },
 });
 
+export const filterInnerArea = style({
+  display: 'flex',
+  flexDirection: 'row',
+  gap: 8,
+  padding: '8px',
+  background: cssVarV2('layer/background/secondary'),
+  borderRadius: '12px',
+});
+
 export const filters = style({
   flex: 1,
 });

packages/frontend/core/src/desktop/pages/workspace/all-page/all-page.tsx

@@ -302,27 +302,29 @@ export const AllPage = () => {
               hiddenAdd={tempFilters !== null}
             />
           </div>
-          {tempFilters !== null && (
-            <div className={styles.filterArea}>
-              <Filters
-                // When the selected collection changes, the filters internal state should be reset
-                key={selectedCollectionId ?? 'all'}
-                className={styles.filters}
-                filters={tempFilters}
-                onChange={handleFilterChange}
-                defaultDraftFilter={tempFiltersInitial}
-              />
-              <Button
-                variant="plain"
-                onClick={() => {
-                  setTempFilters(null);
-                }}
-              >
-                {t['Cancel']()}
-              </Button>
-              <Button onClick={handleSaveFilters}>{t['save']()}</Button>
-            </div>
-          )}
+          <div className={styles.filterArea}>
+            {tempFilters !== null && (
+              <div className={styles.filterInnerArea}>
+                <Filters
+                  // When the selected collection changes, the filters internal state should be reset
+                  key={selectedCollectionId ?? 'all'}
+                  className={styles.filters}
+                  filters={tempFilters}
+                  onChange={handleFilterChange}
+                  defaultDraftFilter={tempFiltersInitial}
+                />
+                <Button
+                  variant="plain"
+                  onClick={() => {
+                    setTempFilters(null);
+                  }}
+                >
+                  {t['Cancel']()}
+                </Button>
+                <Button onClick={handleSaveFilters}>{t['save']()}</Button>
+              </div>
+            )}
+          </div>
           <div className={styles.scrollArea}>
             <DocsExplorer />
           </div>

packages/frontend/i18n/src/i18n-completenesses.json

@@ -1,26 +1,26 @@
 {
-  "ar": 94,
+  "ar": 93,
   "ca": 4,
   "da": 4,
-  "de": 94,
-  "el-GR": 94,
+  "de": 93,
+  "el-GR": 93,
   "en": 100,
-  "es-AR": 94,
-  "es-CL": 95,
-  "es": 94,
-  "fa": 94,
-  "fr": 94,
+  "es-AR": 93,
+  "es-CL": 94,
+  "es": 93,
+  "fa": 93,
+  "fr": 93,
   "hi": 2,
-  "it-IT": 94,
+  "it-IT": 93,
   "it": 1,
-  "ja": 94,
+  "ja": 93,
   "ko": 54,
-  "pl": 94,
-  "pt-BR": 94,
-  "ru": 94,
-  "sv-SE": 94,
-  "uk": 94,
+  "pl": 93,
+  "pt-BR": 93,
+  "ru": 93,
+  "sv-SE": 93,
+  "uk": 93,
   "ur": 2,
-  "zh-Hans": 94,
-  "zh-Hant": 94
+  "zh-Hans": 93,
+  "zh-Hant": 93
 }

packages/frontend/i18n/src/i18n.gen.ts

@@ -2073,6 +2073,10 @@ export function useAFFiNEI18N(): {
       * `Filter`
       */
     ["com.affine.filter"](): string;
+    /**
+      * `Add Filter Rule`
+      */
+    ["com.affine.filter.add-filter"](): string;
     /**
       * `after`
       */

packages/frontend/i18n/src/resources/en.json

@@ -517,6 +517,7 @@
   "com.affine.favoritePageOperation.add": "Add to favourites",
   "com.affine.favoritePageOperation.remove": "Remove from favourites",
   "com.affine.filter": "Filter",
+  "com.affine.filter.add-filter": "Add Filter Rule",
   "com.affine.filter.after": "after",
   "com.affine.filter.before": "before",
   "com.affine.filter.contains all": "contains all",