fix(core): handle the situation where the app cannot be opened after logging in (#8915)

Added buttons to open the web version of AFFiNE and download the latest client to handle the situation where the application cannot be opened after logging in.

![CleanShot 2024-11-25 at 17 19 37@2x](https://github.com/user-attachments/assets/fd4e00fa-61a2-45ac-9bbc-fc4e4a8abc4e)

packages/frontend/core/src/modules/open-in-app/views/open-in-app-page.css.ts

@@ -43,6 +43,7 @@ export const promptLink = style({
   fontWeight: 500,
   textDecoration: 'none',
   fontSize: cssVar('fontSm'),
+  cursor: 'pointer',
 });
 export const centerContent = style({
   display: 'flex',
@@ -54,6 +55,14 @@ export const prompt = style({
   marginTop: 20,
   marginBottom: 12,
 });
+
+export const accidentHandling = style({
+  marginTop: 20,
+  display: 'flex',
+  flexDirection: 'column',
+  rowGap: 12,
+  alignItems: 'center',
+});
 export const editSettingsLink = style({
   fontWeight: 500,
   textDecoration: 'none',

packages/frontend/core/src/modules/open-in-app/views/open-in-app-page.tsx

@@ -6,6 +6,7 @@ import { LocalWorkspaceIcon, Logo1Icon } from '@blocksuite/icons/rc';
 import { useService } from '@toeverything/infra';
 import type { MouseEvent } from 'react';
 import { useCallback } from 'react';
+import { Link } from 'react-router-dom';
 
 import { GlobalDialogService } from '../../dialogs';
 import { getOpenUrlInDesktopAppLink } from '../utils';
@@ -17,19 +18,19 @@ interface OpenAppProps {
   urlToOpen?: string | null;
   openHereClicked?: (e: MouseEvent) => void;
 }
+const channel = BUILD_CONFIG.appBuildType;
+const url =
+  'https://affine.pro/download' + (channel !== 'stable' ? '/beta-canary' : '');
 
 export const OpenInAppPage = ({ urlToOpen, openHereClicked }: OpenAppProps) => {
   // default to open the current page in desktop app
   urlToOpen ??= getOpenUrlInDesktopAppLink(window.location.href, true);
   const globalDialogService = useService(GlobalDialogService);
   const t = useI18n();
-  const channel = BUILD_CONFIG.appBuildType;
+
   const openDownloadLink = useCallback(() => {
-    const url =
-      'https://affine.pro/download' +
-      (channel !== 'stable' ? '/beta-canary' : '');
     open(url, '_blank');
-  }, [channel]);
+  }, []);
 
   const appIcon = appIconMap[channel];
   const appName = appNames[channel];
@@ -139,6 +140,22 @@ export const OpenInAppPage = ({ urlToOpen, openHereClicked }: OpenAppProps) => {
             {t['com.affine.auth.open.affine.try-again']()}
           </a>
         </div>
+        <div className={styles.accidentHandling}>
+          <div className={styles.prompt}>
+            {t['com.affine.auth.open.affine.still-have-problems']()}
+          </div>
+          <Link to="/" replace className={styles.promptLink}>
+            {t['com.affine.auth.open.affine.continue-with-browser']()}
+          </Link>
+          <a
+            className={styles.promptLink}
+            href={url}
+            target="_blank"
+            rel="noreferrer"
+          >
+            {t['com.affine.auth.open.affine.download-latest-client']()}
+          </a>
+        </div>
       </div>
 
       {maybeDocLink ? (