fix: add tip for database page (#7090)

frontend/appflowy_web_app/src/components/_shared/notify/InfoSnackbar.tsx

@@ -31,7 +31,10 @@ const InfoSnackbar = forwardRef<HTMLDivElement, InfoSnackbarProps>(
     };
 
     return (
-      <SnackbarContent ref={ref} className={'flex items-center justify-center'}>
+      <SnackbarContent
+        ref={ref}
+        className={'flex items-center justify-center'}
+      >
         <Paper className={`relative flex flex-col gap-4 border p-5 ${getBorderColor(type)}`}>
           <div className={'flex w-full items-center justify-between text-base font-medium'}>
             <div className={'flex flex-1 items-center gap-2 text-left font-semibold'}>
@@ -39,13 +42,18 @@ const InfoSnackbar = forwardRef<HTMLDivElement, InfoSnackbarProps>(
               <div>{title}</div>
             </div>
             <div className={'relative -right-1.5'}>
-              <IconButton size={'small'} color={'inherit'} className={'h-6 w-6'} onClick={handleClose}>
+              <IconButton
+                size={'small'}
+                color={'inherit'}
+                className={'h-6 w-6'}
+                onClick={handleClose}
+              >
                 <CloseIcon className={'h-4 w-4'} />
               </IconButton>
             </div>
           </div>
 
-          <div className={'mx-8 flex-1'}>{message}</div>
+          <div className={'flex-1'}>{message}</div>
           {showActions && (
             <div className={'flex w-full justify-end gap-4'}>
               <Button
@@ -64,12 +72,12 @@ const InfoSnackbar = forwardRef<HTMLDivElement, InfoSnackbarProps>(
         </Paper>
       </SnackbarContent>
     );
-  }
+  },
 );
 
 export default InfoSnackbar;
 
-function getIcon(type: 'success' | 'info' | 'warning' | 'error') {
+function getIcon (type: 'success' | 'info' | 'warning' | 'error') {
   switch (type) {
     case 'success':
       return <CheckCircle className={'h-6 w-6 text-[var(--function-success)]'} />;
@@ -82,7 +90,7 @@ function getIcon(type: 'success' | 'info' | 'warning' | 'error') {
   }
 }
 
-function getButtonBgColor(type: 'success' | 'info' | 'warning' | 'error') {
+function getButtonBgColor (type: 'success' | 'info' | 'warning' | 'error') {
   switch (type) {
     case 'success':
       return 'bg-[var(--function-success)]';
@@ -95,7 +103,7 @@ function getButtonBgColor(type: 'success' | 'info' | 'warning' | 'error') {
   }
 }
 
-function getButtonHoverBgColor(type: 'success' | 'info' | 'warning' | 'error') {
+function getButtonHoverBgColor (type: 'success' | 'info' | 'warning' | 'error') {
   switch (type) {
     case 'success':
       return 'hover:bg-[var(--function-success-hover)]';
@@ -108,7 +116,7 @@ function getButtonHoverBgColor(type: 'success' | 'info' | 'warning' | 'error') {
   }
 }
 
-function getBorderColor(type: 'success' | 'info' | 'warning' | 'error') {
+function getBorderColor (type: 'success' | 'info' | 'warning' | 'error') {
   switch (type) {
     case 'success':
       return 'border-[var(--function-success)]';

frontend/appflowy_web_app/src/components/editor/components/blocks/database/DatabaseBlock.tsx

@@ -9,7 +9,6 @@ import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useSt
 import { useTranslation } from 'react-i18next';
 import { ReactEditor, useReadOnly, useSlateStatic } from 'slate-react';
 import { Element } from 'slate';
-import { ReactComponent as TipIcon } from '@/assets/warning.svg';
 
 export const DatabaseBlock = memo(
   forwardRef<HTMLDivElement, EditorElementProps<DatabaseNode>>(({ node, children, ...attributes }, ref) => {
@@ -159,13 +158,6 @@ export const DatabaseBlock = memo(
             {children}
           </div>
 
-          <div style={{
-            display: showActions ? 'flex' : 'none',
-          }}
-               className={'absolute text-text-caption break-words whitespace-pre-wrap top-0 left-0 z-[10] bg-content-blue-50 p-2 w-full min-h-[34px] rounded flex '}>
-            <TipIcon className={'relative top-1 w-4 h-4 mr-1'}/>
-            <span>Read-only: Use the AppFlowy app to create or edit database pages. This feature will be available soon.</span>
-          </div>
           <TableContainer
             paddingLeft={scrollLeft}
             blockId={node.blockId}
@@ -207,7 +199,7 @@ export const DatabaseBlock = memo(
                       <div className={'text-base font-medium'}>{t('publish.hasNotBeenPublished')}</div>
                     </>
                   ) : (
-                    <CircularProgress/>
+                    <CircularProgress />
                   )}
                 </div>
               )}

frontend/appflowy_web_app/src/pages/AppPage.tsx

@@ -1,25 +1,24 @@
 import { UIVariant, ViewComponentProps, ViewLayout, ViewMetaProps, YDoc } from '@/application/types';
 import Help from '@/components/_shared/help/Help';
+import { notify } from '@/components/_shared/notify';
 import { findView } from '@/components/_shared/outline/utils';
-
+import { ReactComponent as TipIcon } from '@/assets/warning.svg';
-import {
+import { AppContext, useAppHandlers, useAppOutline, useAppViewId } from '@/components/app/app.hooks';
-  AppContext,
-  useAppHandlers,
-  useAppOutline,
-  useAppViewId,
-} from '@/components/app/app.hooks';
 import DatabaseView from '@/components/app/DatabaseView';
 import { Document } from '@/components/document';
 import RecordNotFound from '@/components/error/RecordNotFound';
 import { getPlatform } from '@/utils/platform';
+import { desktopDownloadLink, openAppFlowySchema } from '@/utils/url';
+import { Button, Checkbox, FormControlLabel } from '@mui/material';
 import React, { lazy, memo, Suspense, useCallback, useContext, useEffect, useMemo } from 'react';
 
 const ViewHelmet = lazy(() => import('@/components/_shared/helmet/ViewHelmet'));
 
-function AppPage() {
+function AppPage () {
   const viewId = useAppViewId();
   const outline = useAppOutline();
   const ref = React.useRef<HTMLDivElement>(null);
+
   const {
     toView,
     loadViewMeta,
@@ -135,20 +134,69 @@ function AppPage() {
     localStorage.setItem('last_view_id', viewId);
   }, [View, viewId, doc]);
 
+  const layout = view?.layout;
+
+  useEffect(() => {
+    if (layout !== undefined && layout !== ViewLayout.Document && !localStorage.getItem('open_edit_tip')) {
+      notify.clear();
+      notify.info({
+        autoHideDuration: null,
+        type: 'info',
+        title: 'Edit in app',
+        message: <div className={'w-full gap-2 flex flex-col items-start'}>
+          <div>{`Editing databases is supported in AppFlowy's desktop and mobile apps`}
+          </div>
+          <div className={'text-sm flex items-center gap-2 text-text-caption'}>
+            <TipIcon className={'h-4 w-4 text-function-warning'} />
+            Don't have AppFlowy? <a
+            className={'text-fill-default hover:underline'}
+            href={desktopDownloadLink}
+          >Download</a></div>
+          <div className={'flex items-center max-sm:my-4 max-sm:flex-col mt-2 w-full justify-between'}>
+            <FormControlLabel
+              className={' max-sm:w-full'}
+              value="end"
+              onChange={(_e, value) => {
+                if (value) {
+                  localStorage.setItem('open_edit_tip', 'true');
+                } else {
+                  localStorage.removeItem('open_edit_tip');
+                }
+              }}
+              control={<Checkbox />}
+              label="Don't remind me again"
+            />
+            <Button
+              color={'primary'}
+              className={'max-sm:w-full max-sm:py-4 max-sm:text-base'}
+              onClick={() => window.open(openAppFlowySchema, '_current')}
+              variant={'contained'}
+            >
+              Open in AppFlowy
+            </Button>
+          </div>
+        </div>,
+        showActions: false,
+      });
+    }
+  }, [layout]);
+
   if (!viewId) return null;
   return (
-    <div ref={ref} className={'relative w-full h-full'}>
+    <div
+      ref={ref}
+      className={'relative w-full h-full'}
+    >
       {helmet}
 
       {notFound ? (
-        <RecordNotFound/>
+        <RecordNotFound />
       ) : (
         <div className={'w-full h-full'}>
           {viewDom}
         </div>
       )}
-      {view && doc && <Help/>}
+      {view && doc && <Help />}
-
     </div>
   );
 }