fix: open in app card style (#8667)

packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/links.tsx

@@ -44,10 +44,7 @@ export const OpenInAppLinksMenu = () => {
         align: 'end',
       }}
     >
-      <MenuTrigger
-        style={{ textTransform: 'capitalize', fontWeight: 600, width: '250px' }}
-        block={true}
-      >
+      <MenuTrigger style={{ fontWeight: 600, width: '250px' }} block={true}>
         {options.find(option => option.value === currentOpenInAppMode)?.label}
       </MenuTrigger>
     </Menu>

packages/frontend/core/src/components/layouts/workspace-layout.tsx

@@ -3,7 +3,10 @@ import {
   pushGlobalLoadingEventAtom,
   resolveGlobalLoadingEventAtom,
 } from '@affine/component/global-loading';
-import { SidebarSwitch } from '@affine/core/modules/app-sidebar/views';
+import {
+  OpenInAppCard,
+  SidebarSwitch,
+} from '@affine/core/modules/app-sidebar/views';
 import { WorkspaceDesktopApiService } from '@affine/core/modules/desktop-api/service';
 import { useI18n } from '@affine/i18n';
 import { type DocMode, ZipTransformer } from '@blocksuite/affine/blocks';
@@ -205,6 +208,7 @@ const DesktopLayout = ({ children }: PropsWithChildren) => {
 const BrowserLayout = ({ children }: PropsWithChildren) => {
   return (
     <div className={styles.browserAppViewContainer}>
+      <OpenInAppCard />
       <RootAppSidebar />
       <MainContainer>{children}</MainContainer>
     </div>

packages/frontend/core/src/components/root-app-sidebar/index.tsx

@@ -5,11 +5,11 @@ import {
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
 import {
   AddPageButton,
+  AppDownloadButton,
   AppSidebar,
   CategoryDivider,
   MenuItem,
   MenuLinkItem,
-  OpenInAppCard,
   QuickSearchInput,
   SidebarContainer,
   SidebarScrollableContainer,
@@ -191,7 +191,7 @@ export const RootAppSidebar = (): ReactElement => {
         </div>
       </SidebarScrollableContainer>
       <SidebarContainer>
-        {BUILD_CONFIG.isElectron ? <UpdaterButton /> : <OpenInAppCard />}
+        {BUILD_CONFIG.isElectron ? <UpdaterButton /> : <AppDownloadButton />}
       </SidebarContainer>
     </AppSidebar>
   );

packages/frontend/core/src/desktop/pages/workspace/share/share-page.css.ts

@@ -57,9 +57,3 @@ export const linkText = style({
   fontWeight: 700,
   whiteSpace: 'nowrap',
 });
-
-export const shareCard = style({
-  position: 'fixed',
-  bottom: '16px',
-  left: '16px',
-});

packages/frontend/core/src/desktop/pages/workspace/share/share-page.tsx

@@ -167,7 +167,7 @@ const SharePageWebContainer = ({
           {children}
           <SharePageFooter />
         </div>
-        <OpenInAppCard className={styles.shareCard} />
+        <OpenInAppCard />
       </div>
     </MainContainer>
   );

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

@@ -2,12 +2,28 @@ import { cssVar } from '@toeverything/theme';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
+const width = 440;
+
 export const root = style({
   background: cssVarV2('layer/background/primary'),
   borderRadius: '8px',
   border: `1px solid ${cssVarV2('layer/insideBorder/border')}`,
   cursor: 'default',
-  userSelect: 'none',
+  padding: '12px 10px',
+  boxShadow: cssVar('shadow1'),
+  display: 'flex',
+  gap: 8,
+  position: 'fixed',
+  bottom: 16,
+  left: `calc(50dvw - ${width / 2}px)`,
+  width,
+  zIndex: cssVar('zIndexPopover'),
+  transition: 'transform 0.2s ease-in-out',
+  selectors: {
+    '&[data-hidden="true"]': {
+      transform: 'translateY(200%)',
+    },
+  },
 });
 
 export const pane = style({
@@ -22,48 +38,86 @@ export const pane = style({
   },
 });
 
-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,
+  justifyContent: 'flex-end',
 });
 
 export const button = style({
   height: 26,
-  borderRadius: 4,
-  padding: '0 8px',
+  borderRadius: 8,
+  padding: '0 12px',
+  fontSize: cssVar('fontXs'),
 });
 
-export const primaryRow = style([
-  row,
-  {
-    color: cssVarV2('text/primary'),
-  },
-]);
+export const titleRow = style({
+  display: 'inline-flex',
+  alignItems: 'center',
+  fontSize: cssVar('fontSm'),
+  color: cssVarV2('text/primary'),
+  fontWeight: 500,
+});
+
+export const subtitleRow = style({
+  fontSize: cssVar('fontXs'),
+  color: cssVarV2('text/primary'),
+  marginTop: 4,
+});
 
-export const icon = style({
+export const controlsRow = style({
+  display: 'flex',
+  alignItems: 'center',
+  marginTop: 8,
+});
+
+export const rememberLabel = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 4,
+  fontWeight: 500,
+  fontSize: cssVar('fontXs'),
+  cursor: 'pointer',
+});
+
+export const rememberCheckbox = style({
   width: 20,
   height: 20,
   flexShrink: 0,
   fontSize: 20,
-  selectors: {
-    [`${primaryRow} &`]: {
-      color: cssVarV2('icon/activated'),
-    },
-  },
+  color: cssVarV2('icon/primary'),
+});
+
+export const closeButton = style({
+  width: 24,
+  height: 24,
+  flexShrink: 0,
+  fontSize: 24,
+});
+
+export const contentCol = style({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'flex-start',
+  flex: 1,
+});
+
+export const appIconCol = style({
+  display: 'flex',
+  justifyContent: 'flex-start',
+});
+
+export const appIcon = style({
+  width: 48,
+  height: 48,
+  flexShrink: 0,
+});
+
+export const spacer = style({
+  flex: 1,
+});
+
+export const link = style({
+  color: cssVarV2('text/link'),
+  textDecoration: 'underline',
 });

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

@@ -1,18 +1,17 @@
-import { Button, Checkbox } from '@affine/component';
+import { Button, Checkbox, IconButton } from '@affine/component';
 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 { appIconMap } from '@affine/core/utils';
+import { Trans, useI18n } from '@affine/i18n';
+import { CloseIcon } 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 }) => {
+export const OpenInAppCard = () => {
   const openInAppService = useService(OpenInAppService);
   const show = useLiveData(openInAppService.showOpenInAppBanner$);
   const t = useI18n();
@@ -22,7 +21,7 @@ export const OpenInAppCard = ({ className }: { className?: string }) => {
   const onOpen = useCallback(() => {
     openInAppService.showOpenInAppPage();
     if (remember) {
-      openInAppService.setOpenLinkMode(OpenLinkMode.OPEN_IN_DESKTOP_APP);
+      openInAppService.dismissBanner(OpenLinkMode.OPEN_IN_DESKTOP_APP);
     }
   }, [openInAppService, remember]);
 
@@ -36,59 +35,67 @@ export const OpenInAppCard = ({ className }: { className?: string }) => {
     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;
-  }
+  const appIcon = appIconMap[BUILD_CONFIG.appBuildType];
 
   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 className={styles.root} data-hidden={!show}>
+      <div className={styles.appIconCol}>
+        <img src={appIcon} alt="app icon" width={48} height={48} />
+      </div>
+      <div className={styles.contentCol}>
+        <div className={styles.titleRow}>
+          {t.t('com.affine.open-in-app.card.title')}
+          <div className={styles.spacer} />
+          <IconButton
+            className={styles.closeButton}
+            icon={<CloseIcon />}
+            onClick={onDismiss}
+          />
         </div>
-        <div className={styles.row}>
-          <div className={styles.icon}>{/* placeholder */}</div>
+        <div className={styles.subtitleRow}>
+          <Trans i18nKey="com.affine.open-in-app.card.subtitle">
+            No desktop app?
+            <a
+              href="https://affine.pro/download"
+              target="_blank"
+              rel="noreferrer"
+              className={styles.link}
+            >
+              Click to download
+            </a>
+            .
+          </Trans>
+        </div>
+        <div className={styles.controlsRow}>
+          <label className={styles.rememberLabel}>
+            <Checkbox
+              className={styles.rememberCheckbox}
+              checked={remember}
+              onChange={onToggleRemember}
+            />
+            {t.t('com.affine.open-in-app.card.remember')}
+          </label>
+          <div className={styles.spacer} />
           <div className={styles.buttonGroup}>
             <Button
-              variant="primary"
+              variant="secondary"
               size="custom"
               className={styles.button}
-              onClick={onOpen}
+              onClick={onDismiss}
             >
-              {t.t('com.affine.open-in-app.card.button.open')}
+              {t.t('com.affine.open-in-app.card.button.dismiss')}
             </Button>
             <Button
-              variant="secondary"
+              variant="primary"
               size="custom"
               className={styles.button}
-              onClick={onDismiss}
+              onClick={onOpen}
             >
-              {t.t('com.affine.open-in-app.card.button.dismiss')}
+              {t.t('com.affine.open-in-app.card.button.open')}
             </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>
   );
 };

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

@@ -1029,10 +1029,11 @@
   "com.affine.setting.appearance.open-in-app.open-in-desktop-app": "Open links in desktop app",
   "com.affine.setting.appearance.open-in-app.open-in-web": "Open links in browser",
   "com.affine.setting.appearance.open-in-app.title": "Open AFFiNE links",
-  "com.affine.open-in-app.card.title": "Open this page in app?",
+  "com.affine.open-in-app.card.title": "Open this page in AFFiNE app",
+  "com.affine.open-in-app.card.subtitle": "No desktop app? <1>Click to download</1>.",
   "com.affine.open-in-app.card.button.open": "Open in app",
   "com.affine.open-in-app.card.button.dismiss": "Dismiss",
-  "com.affine.open-in-app.card.remember": "Remember my choice",
+  "com.affine.open-in-app.card.remember": "Remember choice",
   "com.affine.open-in-app.card.download": "Download desktop app",
   "com.affine.settings.auto-check-description": "If enabled, it will automatically check for new versions at regular intervals.",
   "com.affine.settings.auto-download-description": "If enabled, new versions will be automatically downloaded to the current device.",