feat(core): page preview ui optimize (#5442)

![CleanShot 2023-12-28 at 23.42.44@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/16b66e74-4b0d-48a5-9062-c86c94f6b065.png)
fix TOV-92

No animations right now.

packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx

@@ -120,41 +120,43 @@ const HistoryEditorPreview = ({
 
   return (
     <div className={styles.previewWrapper}>
-      <div className={styles.previewHeader}>
-        <StyledEditorModeSwitch switchLeft={mode === 'page'}>
-          <PageSwitchItem
-            data-testid="switch-page-mode-button"
-            active={mode === 'page'}
-            onClick={onSwitchToPageMode}
-          />
-          <EdgelessSwitchItem
-            data-testid="switch-edgeless-mode-button"
-            active={mode === 'edgeless'}
-            onClick={onSwitchToEdgelessMode}
-          />
-        </StyledEditorModeSwitch>
-
-        <div className={styles.previewHeaderTitle}>{title}</div>
-
-        <div className={styles.previewHeaderTimestamp}>
-          {ts ? timestampToLocalTime(ts) : null}
+      <div className={styles.previewContainerStack2} />
+      <div className={styles.previewContainerStack1} />
+      <div className={styles.previewContainer}>
+        <div className={styles.previewHeader}>
+          <StyledEditorModeSwitch switchLeft={mode === 'page'}>
+            <PageSwitchItem
+              data-testid="switch-page-mode-button"
+              active={mode === 'page'}
+              onClick={onSwitchToPageMode}
+            />
+            <EdgelessSwitchItem
+              data-testid="switch-edgeless-mode-button"
+              active={mode === 'edgeless'}
+              onClick={onSwitchToEdgelessMode}
+            />
+          </StyledEditorModeSwitch>
+          <div className={styles.previewHeaderTitle}>{title}</div>
+          <div className={styles.previewHeaderTimestamp}>
+            {ts ? timestampToLocalTime(ts) : null}
+          </div>
         </div>
+
+        {snapshotPage ? (
+          <AffineErrorBoundary>
+            <BlockSuiteEditor
+              className={styles.editor}
+              mode={mode}
+              page={snapshotPage}
+              onModeChange={onModeChange}
+            />
+          </AffineErrorBoundary>
+        ) : (
+          <div className={styles.loadingContainer}>
+            <Loading size={24} />
+          </div>
+        )}
       </div>
-
-      {snapshotPage ? (
-        <AffineErrorBoundary>
-          <BlockSuiteEditor
-            className={styles.editor}
-            mode={mode}
-            page={snapshotPage}
-            onModeChange={onModeChange}
-          />
-        </AffineErrorBoundary>
-      ) : (
-        <div className={styles.loadingContainer}>
-          <Loading size={24} />
-        </div>
-      )}
     </div>
   );
 };
@@ -182,43 +184,57 @@ const PlanPrompt = () => {
 
   const t = useAFFiNEI18N();
 
+  const planTitle = useMemo(() => {
+    return (
+      <div className={styles.planPromptTitle}>
+        {freePlan
+          ? t[
+              'com.affine.history.confirm-restore-modal.plan-prompt.limited-title'
+            ]()
+          : t['com.affine.history.confirm-restore-modal.plan-prompt.title']()}
+
+        <IconButton
+          size="small"
+          icon={<CloseIcon />}
+          onClick={closeFreePlanPrompt}
+        />
+      </div>
+    );
+  }, [closeFreePlanPrompt, freePlan, t]);
+
+  const planDescription = useMemo(() => {
+    if (freePlan) {
+      return (
+        <>
+          <Trans i18nKey="com.affine.history.confirm-restore-modal.free-plan-prompt.description">
+            Free users can view up to the <b>last 7 days</b> of page history.
+          </Trans>
+          {isOwner ? (
+            <span
+              className={styles.planPromptUpdateButton}
+              onClick={onClickUpgrade}
+            >
+              {t[
+                'com.affine.history.confirm-restore-modal.pro-plan-prompt.upgrade'
+              ]()}
+            </span>
+          ) : null}
+        </>
+      );
+    } else {
+      return (
+        <Trans i18nKey="com.affine.history.confirm-restore-modal.pro-plan-prompt.description">
+          Pro users can view up to the <b>last 30 days</b> of page history.
+        </Trans>
+      );
+    }
+  }, [freePlan, isOwner, onClickUpgrade, t]);
+
   return !planPromptClosed ? (
     <div className={styles.planPromptWrapper}>
       <div className={styles.planPrompt}>
-        <div className={styles.planPromptTitle}>
-          {freePlan
-            ? t[
-                'com.affine.history.confirm-restore-modal.plan-prompt.limited-title'
-              ]()
-            : t['com.affine.history.confirm-restore-modal.plan-prompt.title']()}
-
-          <IconButton
-            size="small"
-            icon={<CloseIcon />}
-            onClick={closeFreePlanPrompt}
-          />
-        </div>
-        {freePlan ? (
-          <>
-            <Trans i18nKey="com.affine.history.confirm-restore-modal.free-plan-prompt.description">
-              Free users can view up to the <b>last 7 days</b> of page history.
-            </Trans>
-            {isOwner ? (
-              <span
-                className={styles.planPromptUpdateButton}
-                onClick={onClickUpgrade}
-              >
-                {t[
-                  'com.affine.history.confirm-restore-modal.pro-plan-prompt.upgrade'
-                ]()}
-              </span>
-            ) : null}
-          </>
-        ) : (
-          <Trans i18nKey="com.affine.history.confirm-restore-modal.pro-plan-prompt.description">
-            Pro users can view up to the <b>last 30 days</b> of page history.
-          </Trans>
-        )}
+        {planTitle}
+        {planDescription}
       </div>
     </div>
   ) : null;

packages/frontend/core/src/components/affine/page-history-modal/styles.css.ts

@@ -32,10 +32,46 @@ export const previewWrapper = style({
   flexDirection: 'column',
   flexGrow: 1,
   height: '100%',
+  position: 'relative',
+  overflow: 'hidden',
   width: `calc(100% - ${historyListWidth})`,
   backgroundColor: 'var(--affine-background-secondary-color)',
 });
 
+export const previewContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 1,
+  position: 'absolute',
+  bottom: 0,
+  left: 40,
+  borderTopLeftRadius: 8,
+  borderTopRightRadius: 8,
+  overflow: 'hidden',
+  boxShadow: 'var(--affine-shadow-3)',
+  height: 'calc(100% - 40px)',
+  width: `calc(100% - 80px)`,
+  backgroundColor: 'var(--affine-background-secondary-color)',
+});
+
+export const previewContainerStack1 = style([
+  previewContainer,
+  {
+    left: 48,
+    height: 'calc(100% - 32px)',
+    width: `calc(100% - 96px)`,
+  },
+]);
+
+export const previewContainerStack2 = style([
+  previewContainer,
+  {
+    left: 56,
+    height: 'calc(100% - 24px)',
+    width: `calc(100% - 112px)`,
+  },
+]);
+
 export const previewHeader = style({
   display: 'flex',
   alignItems: 'center',