AFFiNE-Mirror/blocksuite/affine/data-view/src/widget-presets/quick-setting-bar/index.ts

import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
import { IS_MOBILE } from '@blocksuite/global/env';
import { html, nothing } from 'lit';

import {
  type DataViewWidgetProps,
  defineUniComponent,
} from '../../core/index.js';
import { ShowQuickSettingBarContextKey } from './context.js';
import { renderFilterBar } from './filter/index.js';
import { renderSortBar } from './sort/index.js';

export const widgetQuickSettingBar = defineUniComponent(
  (props: DataViewWidgetProps) => {
    const view = props.dataViewInstance.view;
    const barList = [renderSortBar(props), renderFilterBar(props)].filter(
      Boolean
    );
    if (!IS_MOBILE) {
      if (!view.contextGet(ShowQuickSettingBarContextKey).value[view.id]) {
        return html``;
      }
      if (!barList.length) {
        return html``;
      }
    }
    return html` <div
      style="display: flex;margin-top: 8px;align-items: center;width: 100%;gap:8px"
    >
      ${barList.map((bar, index) => {
        return html`
          ${index !== 0
            ? html` <div
                style="width: 1px;height:27px;background-color: ${unsafeCSSVarV2(
                  'layer/insideBorder/border'
                )}"
              ></div>`
            : nothing}
          ${bar}
        `;
      })}
    </div>`;
  }
);