feat(core): open app in electron app entry (#8637)

fix PD-208
fix PD-210
fix PD-209
fix AF-1495

packages/frontend/core/src/modules/app-sidebar/views/app-download-button/index.tsx

@@ -6,7 +6,6 @@ import { useCallback, useState } from 'react';
 
 import * as styles from './index.css';
 
-// Although it is called an input, it is actually a button.
 export function AppDownloadButton({
   className,
   style,

packages/frontend/core/src/modules/app-sidebar/views/index.css.ts

@@ -9,6 +9,7 @@ export const navWrapperStyle = style({
       zIndex: -1,
     },
   },
+  paddingBottom: 8,
   selectors: {
     '&[data-has-border=true]': {
       borderRight: `0.5px solid ${cssVarV2('layer/insideBorder/border')}`,
@@ -16,9 +17,6 @@ export const navWrapperStyle = style({
     '&[data-is-floating="true"]': {
       backgroundColor: cssVarV2('layer/background/primary'),
     },
-    '&[data-client-border="true"]': {
-      paddingBottom: 8,
-    },
   },
 });
 export const hoverNavWrapperStyle = style({

packages/frontend/core/src/modules/app-sidebar/views/index.tsx

@@ -344,6 +344,7 @@ export * from './app-updater-button';
 export * from './category-divider';
 export * from './index.css';
 export * from './menu-item';
+export * from './open-in-app-card';
 export * from './quick-search-input';
 export * from './sidebar-containers';
 export * from './sidebar-header';

packages/frontend/core/src/modules/app-sidebar/views/open-in-app-card/index.tsx

@@ -0,0 +1 @@
+export * from './open-in-app-card';

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

@@ -0,0 +1,69 @@
+import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { style } from '@vanilla-extract/css';
+
+export const root = style({
+  background: cssVarV2('layer/background/primary'),
+  borderRadius: '8px',
+  border: `1px solid ${cssVarV2('layer/insideBorder/border')}`,
+  cursor: 'default',
+  userSelect: 'none',
+});
+
+export const pane = style({
+  padding: '10px 12px',
+  display: 'flex',
+  flexDirection: 'column',
+  rowGap: 6,
+  selectors: {
+    '&:not(:last-of-type)': {
+      borderBottom: `1px solid ${cssVarV2('layer/insideBorder/border')}`,
+    },
+  },
+});
+
+export const row = style({
+  fontSize: cssVar('fontSm'),
+  fontWeight: 400,
+  display: 'flex',
+  alignItems: 'center',
+  columnGap: 10,
+  color: cssVarV2('text/secondary'),
+});
+
+export const clickableRow = style([
+  row,
+  {
+    cursor: 'pointer',
+  },
+]);
+
+export const buttonGroup = style({
+  display: 'flex',
+  gap: 4,
+});
+
+export const button = style({
+  height: 26,
+  borderRadius: 4,
+  padding: '0 8px',
+});
+
+export const primaryRow = style([
+  row,
+  {
+    color: cssVarV2('text/primary'),
+  },
+]);
+
+export const icon = style({
+  width: 20,
+  height: 20,
+  flexShrink: 0,
+  fontSize: 20,
+  selectors: {
+    [`${primaryRow} &`]: {
+      color: cssVarV2('icon/activated'),
+    },
+  },
+});

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

@@ -0,0 +1,96 @@
+import { Button, Checkbox } from '@affine/component';
+import { useNavigateHelper } from '@affine/core/components/hooks/use-navigate-helper';
+import {
+  OpenInAppService,
+  OpenLinkMode,
+} from '@affine/core/modules/open-in-app';
+import { useI18n } from '@affine/i18n';
+import { track } from '@affine/track';
+import { DownloadIcon, LocalWorkspaceIcon } from '@blocksuite/icons/rc';
+import { useLiveData, useService } from '@toeverything/infra';
+import clsx from 'clsx';
+import { useCallback, useState } from 'react';
+
+import * as styles from './open-in-app-card.css';
+
+export const OpenInAppCard = ({ className }: { className?: string }) => {
+  const openInAppService = useService(OpenInAppService);
+  const show = useLiveData(openInAppService.showOpenInAppBanner$);
+  const navigateHelper = useNavigateHelper();
+  const t = useI18n();
+
+  const [remember, setRemember] = useState(false);
+
+  const onOpen = useCallback(() => {
+    navigateHelper.jumpToOpenInApp(window.location.href, true);
+    if (remember) {
+      openInAppService.setOpenLinkMode(OpenLinkMode.OPEN_IN_DESKTOP_APP);
+    }
+  }, [openInAppService, remember, navigateHelper]);
+
+  const onDismiss = useCallback(() => {
+    openInAppService.dismissBanner(
+      remember ? OpenLinkMode.OPEN_IN_WEB : undefined
+    );
+  }, [openInAppService, remember]);
+
+  const onToggleRemember = useCallback(() => {
+    setRemember(v => !v);
+  }, []);
+
+  const handleDownload = useCallback(() => {
+    track.$.navigationPanel.bottomButtons.downloadApp();
+    const url = `https://affine.pro/download?channel=stable`;
+    open(url, '_blank');
+  }, []);
+
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <div className={clsx(styles.root, className)}>
+      <div className={styles.pane}>
+        <div className={styles.primaryRow}>
+          <LocalWorkspaceIcon className={styles.icon} />
+          <div>{t.t('com.affine.open-in-app.card.title')}</div>
+        </div>
+        <div className={styles.row}>
+          <div className={styles.icon}>{/* placeholder */}</div>
+          <div className={styles.buttonGroup}>
+            <Button
+              variant="primary"
+              size="custom"
+              className={styles.button}
+              onClick={onOpen}
+            >
+              {t.t('com.affine.open-in-app.card.button.open')}
+            </Button>
+            <Button
+              variant="secondary"
+              size="custom"
+              className={styles.button}
+              onClick={onDismiss}
+            >
+              {t.t('com.affine.open-in-app.card.button.dismiss')}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.pane}>
+        <div className={styles.clickableRow} onClick={onToggleRemember}>
+          <Checkbox className={styles.icon} checked={remember} />
+          <div>{t.t('com.affine.open-in-app.card.remember')}</div>
+        </div>
+      </div>
+
+      <div className={styles.pane}>
+        <div className={styles.clickableRow} onClick={handleDownload}>
+          <DownloadIcon className={styles.icon} />
+          <div>{t.t('com.affine.open-in-app.card.download')}</div>
+        </div>
+      </div>
+    </div>
+  );
+};