refactor(component): migrate design components (#5000)

```[tasklist]
### Tasks
- [x] Migrate components from [design](https://github.com/toeverything/design)
- [x] Replace all imports from `@toeverything/components`
- [x] Clean up `@toeverything/components` dependencies
- [x] Storybook
```

### Influence

Here are all the components that are influenced by `@toeverything/components`

- `@affine/component`
    - App update `Button` `Tooltip`
    - App sidebar header `IconButton`, `Tooltip`
    - Back `Button`
    - Auth
      - Change email page save `Button`
      - Change password page all `Button`s (Save, Later, Open)
      - Confirm change email `Button`
      - Set password page `Button`
      - Sign in success page `Button`
      - Sign up page `Button`
      - Auth `Modal`
    - Workspace card `Avatar`, `Divider`, `Tooltip`, `IconButton`
    - Share
      - Disable shared public link `Modal`
    - Import page `IconButton`, `Tooltip`
    - Accept invite page `Avatar`, `Button`
    - Invite member `Modal`
    - 404 Page `Avatar`, `Button`, `IconButton`, `Tooltip`
    - Notification center `IconButton`
    - Page list
      - operation cell `IconButton`, `Menu`, `ConfirmModal`, `Tooltip`
      - tags more `Menu`
      - favorite `IconButton`, `Tooltip`
      - new page dropdown `Menu`
      - filter `Menu`, `Button`, `IconButton`
    - Page operation `Menu`
      - export `MenuItem`
      - move to trash `MenuItem`, `ConfirmModal`
    - Workspace header filter `Menu`, `Button`
    - Collection bar `Button`, `Tooltip` (*⚠️ seems not used*)
    - Collection operation `Menu`, `MenuItem`
      - Create collection `Modal`, `Button`
      - Edit collection `Modal`, `Button`
      - Page mode filter `Menu`
      - Page mode `Button`, `Menu`
    - Setting modal
      - storage usage progress `Button`, `Tooltip`
    - On boarding tour `Modal`
- `@affine/core`
  - Bookmark `Menu`
  - Affine error boundary `Button`
  - After sign in send email `Button`
  - After sign up send email `Button`
  - Send email `Button`
  - Sign in `Button`
  - Subscription redirect `Loading`, `Button`
  - Setting `Modal`
    - User plan button `Tooltip`
    - Members `Avatar`, `Button`, `IconButton`, `Loading`, `Tooltip`, `Menu`
    - Profile `Button`, `Avatar`
    - Workspace
      - publish panel `Button`, `Tooltip`
      - export panel `Button`
      - storage panel `Button`, `Tooltip`
      - delete `ConfirmModal`
    - Language `Menu`
    - Account setting `Avatar`, `Button`
    - Date format setting `Menu`
    - Billing `Button`, `IconButton`, `Loading`
    - Payment plans `Button`, `ConfirmModal`, `Modal`, `Tooltip`
  - Create workspace `Modal`, `ConfirmModal`, `Button`
  - Payment disabled `ConfirmModal`
  - Share/Export `Menu`, `Button`, `Divider`
  - Sign out `ConfirmModal`
  - Temp disable affine cloud `Modal`
  - Page detail operation `Menu`
  - Blocksuite mode switch `Tooltip`
  - Login card `Avatar`
  - Help island `Tooltip`
- `plugin`
  - copilot
  - hello world
  - image preview
  - outline

packages/frontend/component/src/ui/popover/index.ts

@@ -0,0 +1 @@
+export * from './popover';

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

@@ -0,0 +1,50 @@
+import type {
+  PopoverContentProps,
+  PopoverPortalProps,
+  PopoverProps as PopoverPrimitiveProps,
+} from '@radix-ui/react-popover';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import clsx from 'clsx';
+import { type ReactNode, useMemo } from 'react';
+
+import * as styles from './styles.css';
+
+export interface PopoverProps extends PopoverPrimitiveProps {
+  content?: ReactNode;
+  portalOptions?: PopoverPortalProps;
+  contentOptions?: PopoverContentProps;
+}
+export const Popover = ({
+  content,
+  children,
+  portalOptions,
+  contentOptions: {
+    className: contentClassName,
+    style: contentStyle,
+    ...otherContentOptions
+  } = {},
+  ...props
+}: PopoverProps) => {
+  return (
+    <PopoverPrimitive.Root {...props}>
+      <PopoverPrimitive.Trigger asChild>{children}</PopoverPrimitive.Trigger>
+
+      <PopoverPrimitive.Portal {...portalOptions}>
+        <PopoverPrimitive.Content
+          className={useMemo(
+            () => clsx(styles.popoverContent, contentClassName),
+            [contentClassName]
+          )}
+          sideOffset={5}
+          align="start"
+          style={{ zIndex: 'var(--affine-z-index-popover)', ...contentStyle }}
+          {...otherContentOptions}
+        >
+          {content}
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  );
+};
+
+Popover.displayName = 'Popover';

packages/frontend/component/src/ui/popover/styles.css.ts

@@ -0,0 +1,13 @@
+import { style } from '@vanilla-extract/css';
+
+export const popoverContent = style({
+  minWidth: '180px',
+  color: 'var(--affine-text-primary-color)',
+  borderRadius: '8px',
+  padding: '8px',
+  fontSize: 'var(--affine-font-sm)',
+  fontWeight: '400',
+  backgroundColor: 'var(--affine-background-overlay-panel-color)',
+  boxShadow: 'var(--affine-menu-shadow)',
+  userSelect: 'none',
+});