feat(core): intilize integration module and basic readwise impl (#10726)

close AF-2257, AF-2261, AF-2260, AF-2259

### Feat

- New `Integration` Module
- Basic Readwise integration
  - connect
  - import
  - disconnect
- Common Integration UI
- Common Integration Writer  (Transform markdown to AFFiNE Doc)

### Not Implemented

>  will be implemented in down-stack
- delete docs when disconnect
- readwise settiing UI
- integration property rendering

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

@@ -1,3 +1,4 @@
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
 
@@ -9,19 +10,23 @@ export interface LoadingProps {
   speed?: number;
   progress?: number;
   strokeColor?: string;
+  strokeWidth?: number;
+  className?: string;
 }
 
 export const Loading = ({
   size,
   speed = 1.2,
   progress = 0.2,
+  strokeWidth = 4,
   strokeColor,
+  className,
 }: LoadingProps) => {
   // allow `string` such as `16px` | `100%` | `1em`
   const sizeWithUnit = size ? withUnit(size, 'px') : '16px';
   return (
     <svg
-      className={clsx(loading, speed !== 0 && rotateAnimation)}
+      className={clsx(loading, speed !== 0 && rotateAnimation, className)}
       width={sizeWithUnit}
       height={sizeWithUnit}
       viewBox="0 0 24 24"
@@ -37,15 +42,15 @@ export const Loading = ({
         cx={12}
         cy={12}
         r={8}
-        strokeWidth={4}
+        strokeWidth={strokeWidth}
         stroke="var(--affine-black-10)"
       />
       <circle
         cx={12}
         cy={12}
         r={8}
-        strokeWidth={4}
-        stroke={strokeColor || 'var(--affine-primary-color)'}
+        strokeWidth={strokeWidth}
+        stroke={strokeColor || cssVarV2.loading.foreground}
         strokeDasharray={`${2 * Math.PI * 8 * progress} ${
           2 * Math.PI * 8 * (1 - progress)
         }`}