fix(core): adjust new doc list filter style (#12629)

close AF-2678, AF-2677, AF-2674, AF-2655

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

- **New Features**
  - Added customizable spacing for dividers.
  - Introduced a flexible filter value menu for easier filter editing.
- Added options to control visibility of creation actions in empty
document views.

- **Improvements**
- Enhanced menu components for filter values with a more declarative and
simplified interface.
  - Improved vertical alignment in some UI containers.
  - Updated divider spacing for more consistent UI appearance.

- **Bug Fixes**
  - Menu popups for filters now appear in correct positions.

- **Removals**
- Removed support for the "zotero" integration type from integration
settings and filters.

- **Style**
  - Updated CSS for better menu positioning and alignment.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/component/src/ui/divider/divider.tsx

@@ -1,3 +1,4 @@
+import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
 import type { HTMLAttributes, PropsWithChildren } from 'react';
 import { forwardRef } from 'react';
@@ -8,6 +9,7 @@ export type DividerProps = PropsWithChildren &
   Omit<HTMLAttributes<HTMLDivElement>, 'type'> & {
     orientation?: DividerOrientation;
     size?: 'thinner' | 'default';
+    space?: number;
     dividerColor?: string;
   };
 
@@ -16,6 +18,7 @@ export const Divider = forwardRef<HTMLDivElement, DividerProps>(
     {
       orientation = 'horizontal',
       size = 'default',
+      space: propSpace,
       dividerColor,
       style,
       className,
@@ -23,6 +26,8 @@ export const Divider = forwardRef<HTMLDivElement, DividerProps>(
     },
     ref
   ) => {
+    const space = propSpace ?? (orientation === 'horizontal' ? 8 : 2);
+
     return (
       <div
         data-divider
@@ -38,6 +43,7 @@ export const Divider = forwardRef<HTMLDivElement, DividerProps>(
         style={{
           borderColor: dividerColor ? dividerColor : undefined,
           ...style,
+          ...assignInlineVars({ [styles.dividerSpace]: `${space}px` }),
         }}
         {...otherProps}
       />

packages/frontend/component/src/ui/divider/style.css.ts

@@ -1,9 +1,15 @@
 import { cssVar } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
+import { createVar, style } from '@vanilla-extract/css';
+
+export const dividerSpace = createVar('dividerSpace');
+
 export const divider = style({
+  vars: {
+    [dividerSpace]: '8px',
+  },
   borderBottom: `1px solid ${cssVar('borderColor')}`,
   height: 0,
-  margin: '8px 0',
+  margin: `${dividerSpace} 0`,
   width: '100%',
 });
 
@@ -11,7 +17,7 @@ export const verticalDivider = style({
   borderLeft: `1px solid ${cssVar('borderColor')}`,
   width: 0,
   height: '100%',
-  margin: '0 2px',
+  margin: `0 ${dividerSpace}`,
 });
 
 export const thinner = style({