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/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>