feat(mobile): add mobile detail page (#7993)

fix AF-1241

packages/frontend/core/src/components/affine/page-properties/info-modal/info-modal.css.ts

@@ -43,3 +43,8 @@ export const hiddenInput = style({
   height: '0',
   position: 'absolute',
 });
+
+export const timeRow = style({
+  marginTop: 20,
+  borderBottom: 4,
+});

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

@@ -78,7 +78,7 @@ export const InfoModal = ({
   );
 };
 
-const InfoTable = ({
+export const InfoTable = ({
   onClose,
   docId,
   readonly,
@@ -106,8 +106,8 @@ const InfoTable = ({
   );
 
   return (
-    <div>
-      <TimeRow docId={docId} />
+    <div className={styles.container}>
+      <TimeRow className={styles.timeRow} docId={docId} />
       <Divider size="thinner" />
       {backlinks && backlinks.length > 0 ? (
         <>

packages/frontend/core/src/components/affine/page-properties/info-modal/links-row.tsx

@@ -8,15 +8,17 @@ import * as styles from './links-row.css';
 export const LinksRow = ({
   references,
   label,
+  className,
   onClick,
 }: {
   references: Backlink[] | Link[];
   label: string;
+  className?: string;
   onClick?: () => void;
 }) => {
   const manager = useContext(managerContext);
   return (
-    <div>
+    <div className={className}>
       <div className={styles.title}>
         {label} · {references.length}
       </div>

packages/frontend/core/src/components/affine/page-properties/info-modal/tags-row.css.ts

@@ -1,5 +1,7 @@
 import { cssVar } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
+import { fallbackVar, style } from '@vanilla-extract/css';
+
+import { rowHPadding } from '../styles.css';
 
 export const icon = style({
   fontSize: 16,
@@ -65,7 +67,7 @@ export const rowValueCell = style({
   ':hover': {
     backgroundColor: cssVar('hoverColor'),
   },
-  padding: '6px 8px',
+  padding: `6px ${fallbackVar(rowHPadding, '8px')} 6px 8px`,
   border: `1px solid transparent`,
   color: cssVar('textPrimaryColor'),
   ':focus': {

packages/frontend/core/src/components/affine/page-properties/info-modal/tags-row.tsx

@@ -11,16 +11,21 @@ import * as styles from './tags-row.css';
 export const TagsRow = ({
   docId,
   readonly,
+  className,
 }: {
   docId: string;
   readonly: boolean;
+  className?: string;
 }) => {
   const t = useI18n();
   const tagList = useService(TagService).tagList;
   const tagIds = useLiveData(tagList.tagIdsByPageId$(docId));
   const empty = !tagIds || tagIds.length === 0;
   return (
-    <div className={styles.rowCell} data-testid="info-modal-tags-row">
+    <div
+      className={clsx(styles.rowCell, className)}
+      data-testid="info-modal-tags-row"
+    >
       <div className={styles.rowNameContainer}>
         <div className={styles.icon}>
           <TagsIcon />

packages/frontend/core/src/components/affine/page-properties/info-modal/time-row.css.ts

@@ -46,6 +46,4 @@ export const rowCell = style({
 export const container = style({
   display: 'flex',
   flexDirection: 'column',
-  marginTop: 20,
-  marginBottom: 4,
 });

packages/frontend/core/src/components/affine/page-properties/info-modal/time-row.tsx

@@ -1,6 +1,7 @@
 import { i18nTime, useI18n } from '@affine/i18n';
 import { DateTimeIcon, HistoryIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
+import clsx from 'clsx';
 import type { ConfigType } from 'dayjs';
 import { useDebouncedValue } from 'foxact/use-debounced-value';
 import { type ReactNode, useContext, useMemo } from 'react';
@@ -28,7 +29,13 @@ const RowComponent = ({
   );
 };
 
-export const TimeRow = ({ docId }: { docId: string }) => {
+export const TimeRow = ({
+  docId,
+  className,
+}: {
+  docId: string;
+  className?: string;
+}) => {
   const t = useI18n();
   const manager = useContext(managerContext);
   const workspaceService = useService(WorkspaceService);
@@ -88,5 +95,7 @@ export const TimeRow = ({ docId }: { docId: string }) => {
 
   const dTimestampElement = useDebouncedValue(timestampElement, 500);
 
-  return <div className={styles.container}>{dTimestampElement}</div>;
+  return (
+    <div className={clsx(styles.container, className)}>{dTimestampElement}</div>
+  );
 };

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

@@ -2,6 +2,8 @@ import { cssVar } from '@toeverything/theme';
 import { createVar, globalStyle, style } from '@vanilla-extract/css';
 
 const propertyNameCellWidth = createVar();
+export const rowHPadding = createVar();
+export const fontSize = createVar();
 
 export const root = style({
   display: 'flex',
@@ -10,6 +12,16 @@ export const root = style({
   fontFamily: cssVar('fontSansFamily'),
   vars: {
     [propertyNameCellWidth]: '160px',
+    [rowHPadding]: '6px',
+    [fontSize]: cssVar('fontSm'),
+  },
+  '@container': {
+    [`viewport (width <= 640px)`]: {
+      vars: {
+        [rowHPadding]: '0px',
+        [fontSize]: cssVar('fontXs'),
+      },
+    },
   },
 });
 
@@ -22,7 +34,7 @@ export const rootCentered = style({
   padding: `0 ${cssVar('editorSidePadding', '24px')}`,
   '@container': {
     [`viewport (width <= 640px)`]: {
-      padding: '0 24px',
+      padding: '0 16px',
     },
   },
 });
@@ -39,7 +51,7 @@ export const tableHeaderInfoRow = style({
   justifyContent: 'space-between',
   alignItems: 'center',
   color: cssVar('textSecondaryColor'),
-  fontSize: cssVar('fontSm'),
+  fontSize: fontSize,
   fontWeight: 500,
   minHeight: 34,
   '@media': {
@@ -54,9 +66,9 @@ export const tableHeaderSecondaryRow = style({
   flexDirection: 'row',
   alignItems: 'center',
   color: cssVar('textPrimaryColor'),
-  fontSize: cssVar('fontSm'),
+  fontSize: fontSize,
   fontWeight: 500,
-  padding: '0 6px',
+  padding: `0 ${rowHPadding}`,
   gap: '8px',
   height: 24,
   '@media': {
@@ -82,7 +94,7 @@ export const spacer = style({
 });
 
 export const tableHeaderBacklinksHint = style({
-  padding: '6px',
+  padding: `0 ${rowHPadding}`,
   cursor: 'pointer',
   borderRadius: '4px',
   ':hover': {
@@ -103,7 +115,7 @@ export const tableHeaderTimestamp = style({
   alignItems: 'start',
   gap: '8px',
   cursor: 'default',
-  padding: '0 6px',
+  padding: `0 ${rowHPadding}`,
 });
 
 export const tableHeaderDivider = style({
@@ -273,7 +285,7 @@ export const editablePropertyRowCell = style([
 export const propertyRowNameCell = style([
   propertyRowCell,
   {
-    padding: 6,
+    padding: `6px ${rowHPadding}`,
     flexShrink: 0,
     color: cssVar('textSecondaryColor'),
     width: propertyNameCellWidth,
@@ -316,7 +328,7 @@ export const propertyRowValueCell = style([
   propertyRowCell,
   editablePropertyRowCell,
   {
-    padding: '6px 8px',
+    padding: `6px ${rowHPadding} 6px 6px`,
     border: `1px solid transparent`,
     color: cssVar('textPrimaryColor'),
     ':focus': {
@@ -353,7 +365,7 @@ export const propertyRowValueTextarea = style([
   propertyRowValueCell,
   {
     border: 'none',
-    padding: '6px 8px',
+    padding: `6px ${rowHPadding} 6px 8px`,
     height: '100%',
     position: 'absolute',
     top: 0,
@@ -368,7 +380,7 @@ export const propertyRowValueTextareaInvisible = style([
   propertyRowValueCell,
   {
     border: 'none',
-    padding: '6px 8px',
+    padding: `6px ${rowHPadding} 6px 8px`,
     visibility: 'hidden',
     whiteSpace: 'break-spaces',
     wordBreak: 'break-all',
@@ -379,7 +391,7 @@ export const propertyRowValueTextareaInvisible = style([
 export const propertyRowValueNumberCell = style([
   propertyRowValueTextCell,
   {
-    padding: '6px 8px',
+    padding: `6px ${rowHPadding} 6px 8px`,
   },
 ]);
 

packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx

@@ -191,7 +191,7 @@ export const BlocksuiteDocEditor = forwardRef<
         ) : (
           <BlocksuiteEditorJournalDocTitle page={page} />
         )}
-        <PagePropertiesTable docId={page.id} />
+        {!shared ? <PagePropertiesTable docId={page.id} /> : null}
         <adapted.DocEditor
           className={styles.docContainer}
           ref={onDocRef}