feat(infra): framework

packages/frontend/component/src/components/auth-components/onboarding-page.tsx

@@ -1,5 +1,4 @@
 import { apis } from '@affine/electron-api';
-import { fetchWithTraceReport } from '@affine/graphql';
 import { ArrowRightSmallIcon } from '@blocksuite/icons';
 import clsx from 'clsx';
 import { useEffect, useMemo, useState } from 'react';
@@ -112,7 +111,7 @@ export const OnboardingPage = ({
   const [questionIdx, setQuestionIdx] = useState(0);
   const { data: questions } = useSWR<Question[]>(
     '/api/worker/questionnaire',
-    url => fetchWithTraceReport(url).then(r => r.json()),
+    url => fetch(url).then(r => r.json()),
     { suspense: true, revalidateOnFocus: false }
   );
   const [options, setOptions] = useState(new Set<string>());
@@ -242,7 +241,7 @@ export const OnboardingPage = ({
                   };
 
                   // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                  fetchWithTraceReport('/api/worker/questionnaire', {
+                  fetch('/api/worker/questionnaire', {
                     method: 'POST',
                     body: JSON.stringify(answer),
                   }).finally(() => {

packages/frontend/component/src/components/auth-components/sign-up-page.tsx

@@ -7,11 +7,10 @@ import { Button } from '../../ui/button';
 import { notify } from '../../ui/notification';
 import { AuthPageContainer } from './auth-page-container';
 import { SetPassword } from './set-password';
-import type { User } from './type';
 
 export const SignUpPage: FC<{
   passwordLimits: PasswordLimitsFragment;
-  user: User;
+  user: { email?: string };
   onSetPassword: (password: string) => Promise<void>;
   openButtonText?: string;
   onOpenAffine: () => void;

packages/frontend/component/src/components/auth-components/type.ts

@@ -1,7 +1,7 @@
 export interface User {
   id: string;
-  name: string;
-  email: string;
+  label: string;
+  email?: string;
   image?: string | null;
-  avatarUrl: string | null;
+  avatar?: string | null;
 }

packages/frontend/component/src/components/not-found-page/not-found-page.tsx

@@ -47,7 +47,7 @@ export const NoPermissionOrNotFound = ({
               </Button>
             </div>
             <div className={wrapper}>
-              <Avatar url={user.avatarUrl ?? user.image} name={user.name} />
+              <Avatar url={user.avatar ?? user.image} name={user.label} />
               <span style={{ margin: '0 12px' }}>{user.email}</span>
               <Tooltip content={t['404.signOut']()}>
                 <IconButton onClick={onSignOut}>
@@ -91,7 +91,7 @@ export const NotFoundPage = ({
 
         {user ? (
           <div className={wrapper}>
-            <Avatar url={user.avatarUrl ?? user.image} name={user.name} />
+            <Avatar url={user.avatar ?? user.image} name={user.label} />
             <span style={{ margin: '0 12px' }}>{user.email}</span>
             <Tooltip content={t['404.signOut']()}>
               <IconButton onClick={onSignOut}>

packages/frontend/component/src/components/resize-panel/resize-panel.tsx

@@ -175,7 +175,7 @@ export const ResizePanel = forwardRef<HTMLDivElement, ResizePanelProps>(
         data-handle-position={resizeHandlePos}
         data-enable-animation={enableAnimation && !resizing}
       >
-        {children}
+        {status !== 'exited' && children}
         <ResizeHandle
           resizeHandlePos={resizeHandlePos}
           resizeHandleOffset={resizeHandleOffset}

packages/frontend/component/src/components/workspace-list/index.tsx

@@ -24,7 +24,9 @@ export interface WorkspaceListProps {
   onSettingClick: (workspace: WorkspaceMetadata) => void;
   onEnableCloudClick?: (meta: WorkspaceMetadata) => void;
   onDragEnd: (event: DragEndEvent) => void;
-  useIsWorkspaceOwner: (workspaceMetadata: WorkspaceMetadata) => boolean;
+  useIsWorkspaceOwner: (
+    workspaceMetadata: WorkspaceMetadata
+  ) => boolean | undefined;
   useWorkspaceAvatar: (
     workspaceMetadata: WorkspaceMetadata
   ) => string | undefined;

packages/frontend/component/src/index.ts

@@ -8,6 +8,7 @@ export * from './ui/date-picker';
 export * from './ui/divider';
 export * from './ui/editable';
 export * from './ui/empty';
+export * from './ui/error-message';
 export * from './ui/input';
 export * from './ui/layout';
 export * from './ui/loading';

packages/frontend/component/src/ui/error-message/error-message.tsx

@@ -0,0 +1,28 @@
+import clsx from 'clsx';
+import type React from 'react';
+
+import { errorMessage } from './style.css';
+
+export const ErrorMessage = ({
+  children,
+  inline,
+  style,
+  className,
+}: React.PropsWithChildren<{
+  inline?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+}>) => {
+  if (inline) {
+    return (
+      <span style={style} className={clsx(className, errorMessage)}>
+        {children}
+      </span>
+    );
+  }
+  return (
+    <div style={style} className={clsx(className, errorMessage)}>
+      {children}
+    </div>
+  );
+};

packages/frontend/component/src/ui/error-message/index.ts

@@ -0,0 +1 @@
+export { ErrorMessage } from './error-message';

packages/frontend/component/src/ui/error-message/style.css.ts

@@ -0,0 +1,8 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const errorMessage = style({
+  color: cssVar('--affine-error-color'),
+  fontSize: '0.6rem',
+  margin: '4px 8px 2px 2px',
+});