hunk.code_window:         isLoading: !applicationIdentifier,
           header: header,
           footer: footer,
           emptyState: emptyState,
           listItem: listItem,
           actionsResultBlock: actionsResultBlock,
           tabs: tabs,
           showUserPreferences: showUserPreferences ?? true,
           onTabClick: onTabClick ? onTabClick : () => {},
  
hunk.labels: keep keep keep replace keep keep keep keep keep
hunk.after_edit:         emptyState: () => emptyState,
  
hunk.file_path: packages/notification-center/src/components/notification-center/NotificationCenter.tsx
hunk.type: replace
file: import { useRef, useState } from 'react';
  import { useFormContext, Controller } from 'react-hook-form';
  import { ActionIcon, useMantineTheme } from '@mantine/core';
  import styled from '@emotion/styled';
  import { AlignCenterOutlined, AlignLeftOutlined, AlignRightOutlined } from '@ant-design/icons';
  import { TextAlignEnum } from '@novu/shared';
  
  import { DotsHorizontalOutlined, Trash } from '../../../design-system/icons';
  import { Button, colors, Dropdown } from '../../../design-system';
  import { useEnvController } from '../../../store/useEnvController';
  
  export function ContentRow({
    children,
    onHoverElement,
    onRemove,
    allowRemove,
    stepIndex,
    blockIndex,
  }: {
    children: JSX.Element | JSX.Element[];
    onHoverElement: (data: { top: number; height: number }) => void;
    onRemove: () => void;
    allowRemove: boolean;
    stepIndex: number;
    blockIndex: number;
  }) {
    const methods = useFormContext();
    const { readonly } = useEnvController();
    const theme = useMantineTheme();
    const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
    const parentRef = useRef<HTMLDivElement>(null);
  
    const textAlignments = [
      ['left', <AlignLeftOutlined key="left-align-icon" />],
      ['center', <AlignCenterOutlined key="center-align-icon" />],
      ['right', <AlignRightOutlined key="right-align-icon" />],
    ];
  
    function onHover() {
      if (!parentRef.current) return;
  
      onHoverElement({
        top: parentRef.current.offsetTop,
        height: parentRef.current.offsetHeight,
      });
    }
  
    const rowStyleMenu = [
      <Dropdown.Label key="alignBtn" sx={{ fontSize: '14px' }}>
        Align Text
      </Dropdown.Label>,
      <Controller
        key="button-wrapper"
        name={`steps.${stepIndex}.template.content.${blockIndex}.styles.textAlign`}
        defaultValue={TextAlignEnum.LEFT}
        control={methods.control}
        render={({ field }) => {
          return (
            <TextAlignmentWrapper colorScheme={theme.colorScheme}>
              {textAlignments.map(([dir, icon], i) => (
                <Button
                  key={`align-${dir}-btn`}
                  onClick={(e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    field.onChange(dir);
                  }}
                  data-test-id={`align-${dir}-btn`}
                  variant={dir === field.value ? 'gradient' : 'outline'}
                >
                  {icon}
                </Button>
              ))}
            </TextAlignmentWrapper>
          );
        }}
      />,
      <Dropdown.Item
        key="remove-row-btn"
        disabled={!allowRemove}
        data-test-id="remove-row-btn"
        onClick={onRemove}
        icon={<Trash />}
      >
        Remove Row
      </Dropdown.Item>,
    ];
  
    return (
      <div onMouseEnter={onHover} ref={parentRef} role="presentation" data-test-id="editor-row">
        <ContentRowWrapper>
          <div style={{ width: '100%' }}>{children}</div>
          <SettingsWrapper>
            {!readonly && (
              <Dropdown
                onClose={() => setDropdownOpen(false)}
                onOpen={() => setDropdownOpen(true)}
                control={
                  <SettingsButton data-test-id="settings-row-btn" visible={dropdownOpen}>
                    <ActionIcon variant="transparent">
                      <DotsHorizontalOutlined color={colors.B60} />
                    </ActionIcon>
                  </SettingsButton>
                }
              >
                {rowStyleMenu}
              </Dropdown>
            )}
          </SettingsWrapper>
        </ContentRowWrapper>
      </div>
    );
  }
  
  const SettingsWrapper = styled.div`
    width: 50px;
    height: 0;
    display: flex;
    align-items: center;
    justify-content: end;
  `;
  
  const SettingsButton = styled.div<{ visible: boolean }>`
    display: ${({ visible }) => (visible ? 'inline-block' : 'none')};
  `;
  
  const ContentRowWrapper = styled.div`
    width: 100%;
    outline: transparent;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
  
    &:hover {
      ${SettingsButton} {
        display: inline-block;
      }
    }
  `;
  
  const TextAlignmentWrapper = styled.div<{ colorScheme: 'light' | 'dark' }>`
    display: flex;
    justify-content: space-between;
    padding: 5px 15px 15px 15px;
  
    button {
      padding: 0;
      margin: 0 5px;
      width: 100%;
    }
  
    .anticon svg {
      color: ${({ colorScheme }) => (colorScheme === 'dark' ? colors.white : colors.B40)};
    }
  `;
  