chore: fix code style issues (#4857)

packages/frontend/core/src/components/affine/auth/use-captcha.tsx

@@ -43,7 +43,7 @@ export const Captcha = () => {
   const [response] = useAtom(responseAtom);
 
   if (!runtimeConfig.enableCaptcha) {
-    return <></>;
+    return null;
   }
 
   if (environment.isDesktop) {

packages/frontend/core/src/components/affine/auth/user-plan-button.tsx

@@ -2,7 +2,7 @@ import { SubscriptionPlan } from '@affine/graphql';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import Tooltip from '@toeverything/components/tooltip';
 import { useSetAtom } from 'jotai';
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { withErrorBoundary } from 'react-error-boundary';
 
 import { openSettingModalAtom } from '../../../atoms';
@@ -39,5 +39,5 @@ const UserPlanButtonWithData = () => {
 
 // If fetch user data failed, just render empty.
 export const UserPlanButton = withErrorBoundary(UserPlanButtonWithData, {
-  fallbackRender: () => <React.Fragment />,
+  fallbackRender: () => null,
 });

packages/frontend/core/src/components/affine/new-workspace-setting-detail/export.tsx

@@ -86,16 +86,14 @@ export const ExportPanel = ({ workspace }: ExportPanelProps) => {
   }, [pushNotification, syncing, t, workspace, workspaceId]);
 
   return (
-    <>
-      <SettingRow name={t['Export']()} desc={t['Export Description']()}>
-        <Button
-          data-testid="export-affine-backup"
-          onClick={onExport}
-          disabled={syncing}
-        >
-          {t['Export']()}
-        </Button>
-      </SettingRow>
-    </>
+    <SettingRow name={t['Export']()} desc={t['Export Description']()}>
+      <Button
+        data-testid="export-affine-backup"
+        onClick={onExport}
+        disabled={syncing}
+      >
+        {t['Export']()}
+      </Button>
+    </SettingRow>
   );
 };

packages/frontend/core/src/components/affine/setting-modal/account-setting/index.tsx

@@ -121,48 +121,46 @@ export const AvatarAndName = () => {
   }, [allowUpdate, input, user]);
 
   return (
-    <>
-      <SettingRow
-        name={t['com.affine.settings.profile']()}
-        desc={t['com.affine.settings.profile.message']()}
-        spreadCol={false}
-      >
-        <FlexWrapper style={{ margin: '12px 0 24px 0' }} alignItems="center">
-          <Suspense>
-            <UserAvatar />
-          </Suspense>
+    <SettingRow
+      name={t['com.affine.settings.profile']()}
+      desc={t['com.affine.settings.profile.message']()}
+      spreadCol={false}
+    >
+      <FlexWrapper style={{ margin: '12px 0 24px 0' }} alignItems="center">
+        <Suspense>
+          <UserAvatar />
+        </Suspense>
 
-          <div className={style.profileInputWrapper}>
-            <label>{t['com.affine.settings.profile.name']()}</label>
-            <FlexWrapper alignItems="center">
-              <Input
-                defaultValue={input}
-                data-testid="user-name-input"
-                placeholder={t['com.affine.settings.profile.placeholder']()}
-                maxLength={64}
-                minLength={0}
-                width={280}
-                height={28}
-                onChange={setInput}
-                onEnter={handleUpdateUserName}
-              />
-              {allowUpdate ? (
-                <Button
-                  data-testid="save-user-name"
-                  onClick={handleUpdateUserName}
-                  className={style.button}
-                  style={{
-                    marginLeft: '12px',
-                  }}
-                >
-                  {t['com.affine.editCollection.save']()}
-                </Button>
-              ) : null}
-            </FlexWrapper>
-          </div>
-        </FlexWrapper>
-      </SettingRow>
-    </>
+        <div className={style.profileInputWrapper}>
+          <label>{t['com.affine.settings.profile.name']()}</label>
+          <FlexWrapper alignItems="center">
+            <Input
+              defaultValue={input}
+              data-testid="user-name-input"
+              placeholder={t['com.affine.settings.profile.placeholder']()}
+              maxLength={64}
+              minLength={0}
+              width={280}
+              height={28}
+              onChange={setInput}
+              onEnter={handleUpdateUserName}
+            />
+            {allowUpdate ? (
+              <Button
+                data-testid="save-user-name"
+                onClick={handleUpdateUserName}
+                className={style.button}
+                style={{
+                  marginLeft: '12px',
+                }}
+              >
+                {t['com.affine.editCollection.save']()}
+              </Button>
+            ) : null}
+          </FlexWrapper>
+        </div>
+      </FlexWrapper>
+    </SettingRow>
   );
 };
 

packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/index.tsx

@@ -9,7 +9,7 @@ import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useQuery } from '@affine/workspace/affine/gql';
 import { useSetAtom } from 'jotai';
-import React, { Suspense, useEffect, useRef, useState } from 'react';
+import { Suspense, useEffect, useRef, useState } from 'react';
 import type { FallbackProps } from 'react-error-boundary';
 
 import { SWRErrorBoundary } from '../../../../../components/pure/swr-error-bundary';
@@ -205,9 +205,9 @@ const PlansErrorBoundary = ({ resetErrorBoundary }: FallbackProps) => {
   const t = useAFFiNEI18N();
 
   const title = t['com.affine.payment.title']();
-  const subtitle = <React.Fragment />;
-  const tabs = <React.Fragment />;
-  const footer = <React.Fragment />;
+  const subtitle = '';
+  const tabs = '';
+  const footer = '';
 
   const scroll = (
     <div className={styles.errorTip}>

packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx

@@ -406,17 +406,15 @@ const Upgrade = ({
   }, [onClose]);
 
   return (
-    <>
-      <Button
-        className={styles.planAction}
-        type="primary"
-        onClick={upgrade}
-        disabled={isMutating}
-        loading={isMutating}
-      >
-        {t['com.affine.payment.upgrade']()}
-      </Button>
-    </>
+    <Button
+      className={styles.planAction}
+      type="primary"
+      onClick={upgrade}
+      disabled={isMutating}
+      loading={isMutating}
+    >
+      {t['com.affine.payment.upgrade']()}
+    </Button>
   );
 };
 

packages/frontend/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx

@@ -218,17 +218,15 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
     return null;
   }
   return (
-    <>
-      <FlexWrapper alignItems="center" justifyContent="center" ref={ref}>
-        <Menu
-          items={EditMenu}
-          contentOptions={{
-            align: 'center',
-          }}
-        >
-          <HeaderDropDownButton />
-        </Menu>
-      </FlexWrapper>
-    </>
+    <FlexWrapper alignItems="center" justifyContent="center" ref={ref}>
+      <Menu
+        items={EditMenu}
+        contentOptions={{
+          align: 'center',
+        }}
+      >
+        <HeaderDropDownButton />
+      </Menu>
+    </FlexWrapper>
   );
 };

packages/frontend/core/src/components/cloud/provider.tsx

@@ -2,7 +2,7 @@ import { pushNotificationAtom } from '@affine/component/notification-center';
 import { assertExists } from '@blocksuite/global/utils';
 import { GraphQLError } from 'graphql';
 import { useSetAtom } from 'jotai';
-import type { PropsWithChildren, ReactElement } from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
 import { useCallback } from 'react';
 import type { SWRConfiguration } from 'swr';
 import { SWRConfig } from 'swr';
@@ -49,9 +49,9 @@ const cloudConfig: SWRConfiguration = {
   ],
 };
 
-export const Provider = (props: PropsWithChildren): ReactElement => {
+export const Provider = (props: PropsWithChildren): ReactNode => {
   if (!runtimeConfig.enableCloud) {
-    return <>{props.children}</>;
+    return props.children;
   }
 
   return <SWRConfig value={cloudConfig}>{props.children}</SWRConfig>;

packages/frontend/core/src/components/page-detail-editor.tsx

@@ -328,10 +328,8 @@ export const PageDetailEditor = (props: PageDetailEditorProps) => {
   }
 
   return (
-    <>
-      <Suspense>
-        <LayoutPanel node={layout} editorProps={props} depth={0} />
-      </Suspense>
-    </>
+    <Suspense>
+      <LayoutPanel node={layout} editorProps={props} depth={0} />
+    </Suspense>
   );
 };

packages/frontend/core/src/components/pure/footer/index.tsx

@@ -49,53 +49,49 @@ export const WorkspaceAvatar = forwardRef<HTMLDivElement, WorkspaceAvatarProps>(
     const size = props.size || 20;
     const sizeStr = size + 'px';
 
-    return (
-      <>
-        {props.avatar ? (
-          <div
-            style={{
-              ...props.style,
-              width: sizeStr,
-              height: sizeStr,
-              color: '#fff',
-              borderRadius: '50%',
-              overflow: 'hidden',
-              display: 'inline-block',
-              verticalAlign: 'middle',
-            }}
-            ref={ref}
-          >
-            <picture>
-              <img
-                style={{ width: sizeStr, height: sizeStr }}
-                src={props.avatar}
-                alt=""
-                referrerPolicy="no-referrer"
-              />
-            </picture>
-          </div>
-        ) : (
-          <div
-            style={{
-              ...props.style,
-              width: sizeStr,
-              height: sizeStr,
-              border: '1px solid #fff',
-              color: '#fff',
-              fontSize: Math.ceil(0.5 * size) + 'px',
-              background: stringToColour(props.name || 'AFFiNE'),
-              borderRadius: '50%',
-              textAlign: 'center',
-              lineHeight: size + 'px',
-              display: 'inline-block',
-              verticalAlign: 'middle',
-            }}
-            ref={ref}
-          >
-            {(props.name || 'AFFiNE').substring(0, 1)}
-          </div>
-        )}
-      </>
+    return props.avatar ? (
+      <div
+        style={{
+          ...props.style,
+          width: sizeStr,
+          height: sizeStr,
+          color: '#fff',
+          borderRadius: '50%',
+          overflow: 'hidden',
+          display: 'inline-block',
+          verticalAlign: 'middle',
+        }}
+        ref={ref}
+      >
+        <picture>
+          <img
+            style={{ width: sizeStr, height: sizeStr }}
+            src={props.avatar}
+            alt=""
+            referrerPolicy="no-referrer"
+          />
+        </picture>
+      </div>
+    ) : (
+      <div
+        style={{
+          ...props.style,
+          width: sizeStr,
+          height: sizeStr,
+          border: '1px solid #fff',
+          color: '#fff',
+          fontSize: Math.ceil(0.5 * size) + 'px',
+          background: stringToColour(props.name || 'AFFiNE'),
+          borderRadius: '50%',
+          textAlign: 'center',
+          lineHeight: size + 'px',
+          display: 'inline-block',
+          verticalAlign: 'middle',
+        }}
+        ref={ref}
+      >
+        {(props.name || 'AFFiNE').substring(0, 1)}
+      </div>
     );
   }
 );

packages/frontend/core/src/components/root-app-sidebar/index.tsx

@@ -170,109 +170,105 @@ export const RootAppSidebar = ({
   useRegisterBlocksuiteEditorCommands(router.back, router.forward);
   const userInfo = useDeleteCollectionInfo();
   return (
-    <>
-      <AppSidebar
-        router={router}
-        hasBackground={
-          !(
-            appSettings.enableBlurBackground &&
-            environment.isDesktop &&
-            environment.isMacOs
-          )
-        }
-        generalShortcutsInfo={generalShortcutsInfo}
-      >
-        <MoveToTrash.ConfirmModal
-          open={trashConfirmOpen}
-          onConfirm={handleOnConfirm}
-          onOpenChange={onTrashConfirmOpenChange}
-          titles={deletePageTitles}
-        />
-        <SidebarContainer>
-          <Menu
-            rootOptions={{
-              open: openUserWorkspaceList,
-            }}
-            items={
-              <UserWithWorkspaceList onEventEnd={closeUserWorkspaceList} />
-            }
-            contentOptions={{
-              // hide trigger
-              sideOffset: -58,
-              onInteractOutside: closeUserWorkspaceList,
-              onEscapeKeyDown: closeUserWorkspaceList,
-              style: {
-                width: '300px',
-              },
-            }}
-          >
-            <WorkspaceCard
-              currentWorkspace={currentWorkspace}
-              onClick={useCallback(() => {
-                setOpenUserWorkspaceList(true);
-              }, [setOpenUserWorkspaceList])}
-            />
-          </Menu>
-          <QuickSearchInput
-            data-testid="slider-bar-quick-search-button"
-            onClick={onOpenQuickSearchModal}
+    <AppSidebar
+      router={router}
+      hasBackground={
+        !(
+          appSettings.enableBlurBackground &&
+          environment.isDesktop &&
+          environment.isMacOs
+        )
+      }
+      generalShortcutsInfo={generalShortcutsInfo}
+    >
+      <MoveToTrash.ConfirmModal
+        open={trashConfirmOpen}
+        onConfirm={handleOnConfirm}
+        onOpenChange={onTrashConfirmOpenChange}
+        titles={deletePageTitles}
+      />
+      <SidebarContainer>
+        <Menu
+          rootOptions={{
+            open: openUserWorkspaceList,
+          }}
+          items={<UserWithWorkspaceList onEventEnd={closeUserWorkspaceList} />}
+          contentOptions={{
+            // hide trigger
+            sideOffset: -58,
+            onInteractOutside: closeUserWorkspaceList,
+            onEscapeKeyDown: closeUserWorkspaceList,
+            style: {
+              width: '300px',
+            },
+          }}
+        >
+          <WorkspaceCard
+            currentWorkspace={currentWorkspace}
+            onClick={useCallback(() => {
+              setOpenUserWorkspaceList(true);
+            }, [setOpenUserWorkspaceList])}
           />
-          <RouteMenuLinkItem
-            icon={<FolderIcon />}
-            currentPath={currentPath}
-            path={paths.all(currentWorkspaceId)}
-            onClick={backToAll}
+        </Menu>
+        <QuickSearchInput
+          data-testid="slider-bar-quick-search-button"
+          onClick={onOpenQuickSearchModal}
+        />
+        <RouteMenuLinkItem
+          icon={<FolderIcon />}
+          currentPath={currentPath}
+          path={paths.all(currentWorkspaceId)}
+          onClick={backToAll}
+        >
+          <span data-testid="all-pages">
+            {t['com.affine.workspaceSubPath.all']()}
+          </span>
+        </RouteMenuLinkItem>
+        {runtimeConfig.enableNewSettingModal ? (
+          <MenuItem
+            data-testid="slider-bar-workspace-setting-button"
+            icon={<SettingsIcon />}
+            onClick={onOpenSettingModal}
           >
-            <span data-testid="all-pages">
-              {t['com.affine.workspaceSubPath.all']()}
+            <span data-testid="settings-modal-trigger">
+              {t['com.affine.settingSidebar.title']()}
             </span>
-          </RouteMenuLinkItem>
-          {runtimeConfig.enableNewSettingModal ? (
-            <MenuItem
-              data-testid="slider-bar-workspace-setting-button"
-              icon={<SettingsIcon />}
-              onClick={onOpenSettingModal}
-            >
-              <span data-testid="settings-modal-trigger">
-                {t['com.affine.settingSidebar.title']()}
-              </span>
-            </MenuItem>
-          ) : null}
-        </SidebarContainer>
+          </MenuItem>
+        ) : null}
+      </SidebarContainer>
 
-        <SidebarScrollableContainer>
-          <CategoryDivider label={t['com.affine.rootAppSidebar.favorites']()}>
-            <AddFavouriteButton workspace={blockSuiteWorkspace} />
-          </CategoryDivider>
-          <FavoriteList workspace={blockSuiteWorkspace} />
-          <CategoryDivider label={t['com.affine.rootAppSidebar.collections']()}>
-            <AddCollectionButton />
-          </CategoryDivider>
-          <CollectionsList workspace={blockSuiteWorkspace} info={userInfo} />
-          <CategoryDivider label={t['com.affine.rootAppSidebar.others']()} />
-          {/* fixme: remove the following spacer */}
-          <div style={{ height: '4px' }} />
-          <RouteMenuLinkItem
-            ref={trashDroppable.setNodeRef}
-            isDraggedOver={trashDroppable.isOver}
-            icon={<AnimatedDeleteIcon closed={trashDroppable.isOver} />}
-            currentPath={currentPath}
-            path={paths.trash(currentWorkspaceId)}
-          >
-            <span data-testid="trash-page">
-              {t['com.affine.workspaceSubPath.trash']()}
-            </span>
-          </RouteMenuLinkItem>
-          {blockSuiteWorkspace && (
-            <ImportPage blocksuiteWorkspace={blockSuiteWorkspace} />
-          )}
-        </SidebarScrollableContainer>
-        <SidebarContainer>
-          {environment.isDesktop && <AppUpdaterButton />}
-          <div style={{ height: '4px' }} />
-          <AddPageButton onClick={onClickNewPage} />
-        </SidebarContainer>
-      </AppSidebar>
-    </>
+      <SidebarScrollableContainer>
+        <CategoryDivider label={t['com.affine.rootAppSidebar.favorites']()}>
+          <AddFavouriteButton workspace={blockSuiteWorkspace} />
+        </CategoryDivider>
+        <FavoriteList workspace={blockSuiteWorkspace} />
+        <CategoryDivider label={t['com.affine.rootAppSidebar.collections']()}>
+          <AddCollectionButton />
+        </CategoryDivider>
+        <CollectionsList workspace={blockSuiteWorkspace} info={userInfo} />
+        <CategoryDivider label={t['com.affine.rootAppSidebar.others']()} />
+        {/* fixme: remove the following spacer */}
+        <div style={{ height: '4px' }} />
+        <RouteMenuLinkItem
+          ref={trashDroppable.setNodeRef}
+          isDraggedOver={trashDroppable.isOver}
+          icon={<AnimatedDeleteIcon closed={trashDroppable.isOver} />}
+          currentPath={currentPath}
+          path={paths.trash(currentWorkspaceId)}
+        >
+          <span data-testid="trash-page">
+            {t['com.affine.workspaceSubPath.trash']()}
+          </span>
+        </RouteMenuLinkItem>
+        {blockSuiteWorkspace && (
+          <ImportPage blocksuiteWorkspace={blockSuiteWorkspace} />
+        )}
+      </SidebarScrollableContainer>
+      <SidebarContainer>
+        {environment.isDesktop && <AppUpdaterButton />}
+        <div style={{ height: '4px' }} />
+        <AddPageButton onClick={onClickNewPage} />
+      </SidebarContainer>
+    </AppSidebar>
   );
 };