fix(core): add open in app hint text (#8728)

fix AF-1625

packages/frontend/core/src/desktop/dialogs/setting/style.css.ts

@@ -10,6 +10,7 @@ export const centerContainer = style({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
+  height: 'fit-content',
 });
 export const content = style({
   position: 'relative',

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

@@ -59,6 +59,21 @@ export const editSettingsLink = style({
   textDecoration: 'none',
   color: cssVar('linkColor'),
   fontSize: cssVar('fontSm'),
+});
+
+export const docFooter = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  rowGap: 12,
   position: 'absolute',
   bottom: 48,
 });
+
+export const docFooterText = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 10,
+  fontSize: cssVar('fontXs'),
+  color: cssVar('textSecondaryColor'),
+});

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

@@ -2,7 +2,7 @@ import { Button } from '@affine/component/ui/button';
 import { resolveLinkToDoc } from '@affine/core/modules/navigation';
 import { appIconMap, appNames } from '@affine/core/utils/channel';
 import { Trans, useI18n } from '@affine/i18n';
-import { Logo1Icon } from '@blocksuite/icons/rc';
+import { LocalWorkspaceIcon, Logo1Icon } from '@blocksuite/icons/rc';
 import { useService } from '@toeverything/infra';
 import type { MouseEvent } from 'react';
 import { useCallback } from 'react';
@@ -150,14 +150,19 @@ export const OpenInAppPage = ({ urlToOpen, openHereClicked }: OpenAppProps) => {
       </div>
 
       {maybeDocLink ? (
-        <a
+        <div className={styles.docFooter}>
-          className={styles.editSettingsLink}
+          <button
-          onClick={goToAppearanceSetting}
+            className={styles.editSettingsLink}
-          target="_blank"
+            onClick={goToAppearanceSetting}
-          rel="noreferrer"
+          >
-        >
+            {t['com.affine.auth.open.affine.doc.edit-settings']()}
-          {t['com.affine.auth.open.affine.doc.edit-settings']()}
+          </button>
-        </a>
+
+          <div className={styles.docFooterText}>
+            <LocalWorkspaceIcon width={16} height={16} />
+            {t['com.affine.auth.open.affine.doc.footer-text']()}
+          </div>
+        </div>
       ) : null}
     </div>
   );

packages/frontend/i18n/src/i18n-completenesses.json

@@ -10,7 +10,7 @@
   "fr": 71,
   "hi": 2,
   "it": 1,
-  "ja": 95,
+  "ja": 94,
   "ko": 84,
   "pl": 0,
   "pt-BR": 91,

packages/frontend/i18n/src/resources/en.json

@@ -231,6 +231,7 @@
   "com.affine.auth.open.affine.try-again": "Try again",
   "com.affine.auth.open.affine.doc.open-here": "Open here instead",
   "com.affine.auth.open.affine.doc.edit-settings": "Edit settings",
+  "com.affine.auth.open.affine.doc.footer-text": "Requires AFFiNE desktop app version 0.18 or later.",
   "com.affine.auth.page.sent.email.subtitle": "Please set a password of {{min}}-{{max}} characters with both letters and numbers to continue signing up with ",
   "com.affine.auth.page.sent.email.title": "Welcome to AFFiNE Cloud, you are almost there!",
   "com.affine.auth.password": "Password",