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,6 +120,9 @@ const HistoryEditorPreview = ({
 
   return (
     <div className={styles.previewWrapper}>
+      <div className={styles.previewContainerStack2} />
+      <div className={styles.previewContainerStack1} />
+      <div className={styles.previewContainer}>
         <div className={styles.previewHeader}>
           <StyledEditorModeSwitch switchLeft={mode === 'page'}>
             <PageSwitchItem
@@ -133,9 +136,7 @@ const HistoryEditorPreview = ({
               onClick={onSwitchToEdgelessMode}
             />
           </StyledEditorModeSwitch>
-
           <div className={styles.previewHeaderTitle}>{title}</div>
-
           <div className={styles.previewHeaderTimestamp}>
             {ts ? timestampToLocalTime(ts) : null}
           </div>
@@ -156,6 +157,7 @@ const HistoryEditorPreview = ({
           </div>
         )}
       </div>
+    </div>
   );
 };
 const planPromptClosedAtom = atom(false);
@@ -182,9 +184,8 @@ const PlanPrompt = () => {
 
   const t = useAFFiNEI18N();
 
-  return !planPromptClosed ? (
+  const planTitle = useMemo(() => {
-    <div className={styles.planPromptWrapper}>
+    return (
-      <div className={styles.planPrompt}>
       <div className={styles.planPromptTitle}>
         {freePlan
           ? t[
@@ -198,7 +199,12 @@ const PlanPrompt = () => {
           onClick={closeFreePlanPrompt}
         />
       </div>
-        {freePlan ? (
+    );
+  }, [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.
@@ -214,11 +220,21 @@ const PlanPrompt = () => {
             </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}>
+        {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',