feat(core): add download app button to web (#5023)

packages/frontend/component/src/components/affine-banner/download-client.tsx

@@ -1,47 +0,0 @@
-import { Trans } from '@affine/i18n';
-import { CloseIcon, Logo1Icon } from '@blocksuite/icons';
-
-import {
-  downloadCloseButtonStyle,
-  downloadMessageStyle,
-  downloadTipContainerStyle,
-  downloadTipIconStyle,
-  downloadTipStyle,
-  linkStyle,
-} from './index.css';
-
-export const DownloadTips = ({ onClose }: { onClose: () => void }) => {
-  return (
-    <div
-      className={downloadTipContainerStyle}
-      data-testid="download-client-tip"
-    >
-      <div className={downloadTipStyle}>
-        <Logo1Icon className={downloadTipIconStyle} />
-        <div className={downloadMessageStyle}>
-          <Trans i18nKey="com.affine.banner.content">
-            This demo is limited.
-            <a
-              className={linkStyle}
-              href="https://affine.pro/download"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Download the AFFiNE Client
-            </a>
-            for the latest features and Performance.
-          </Trans>
-        </div>
-      </div>
-      <div
-        className={downloadCloseButtonStyle}
-        onClick={onClose}
-        data-testid="download-client-tip-close-button"
-      >
-        <CloseIcon className={downloadTipIconStyle} />
-      </div>
-    </div>
-  );
-};
-
-export default DownloadTips;

packages/frontend/component/src/components/affine-banner/index.css.ts

@@ -1,13 +1,4 @@
-import { keyframes, style } from '@vanilla-extract/css';
-
-const slideDown = keyframes({
-  '0%': {
-    height: '0px',
-  },
-  '100%': {
-    height: '44px',
-  },
-});
+import { style } from '@vanilla-extract/css';
 
 export const browserWarningStyle = style({
   backgroundColor: 'var(--affine-background-warning-color)',
@@ -36,52 +27,31 @@ export const closeIconStyle = style({
   position: 'relative',
   zIndex: 1,
 });
-export const downloadTipContainerStyle = style({
-  backgroundColor: 'var(--affine-primary-color)',
-  color: 'var(--affine-white)',
+export const tipsContainer = style({
+  backgroundColor: 'var(--affine-background-error-color)',
+  color: 'var(--affine-error-color)',
   width: '100%',
-  height: '44px',
-  fontSize: 'var(--affine-font-base)',
+  fontSize: 'var(--affine-font-sm)',
+  fontWeight: '700',
   display: 'flex',
-  justifyContent: 'center',
+  justifyContent: 'space-between',
   alignItems: 'center',
-  position: 'relative',
-  animation: `${slideDown} .3s ease-in-out forwards`,
+  padding: '12px 16px',
+  position: 'sticky',
+  gap: '16px',
+  containerType: 'inline-size',
 });
-export const downloadTipStyle = style({
+
+export const tipsMessage = style({
+  color: 'var(--affine-error-color)',
+  flexGrow: 1,
+  flexShrink: 1,
+});
+
+export const tipsRightItem = style({
   display: 'flex',
-  justifyContent: 'center',
+  flexShrink: 0,
+  justifyContent: 'space-between',
   alignItems: 'center',
-});
-export const downloadTipIconStyle = style({
-  color: 'var(--affine-white)',
-  width: '24px',
-  height: '24px',
-  fontSize: '24px',
-  position: 'relative',
-  zIndex: 1,
-});
-export const downloadCloseButtonStyle = style({
-  color: 'var(--affine-white)',
-  cursor: 'pointer',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  position: 'absolute',
-  right: '24px',
-});
-export const downloadMessageStyle = style({
-  color: 'var(--affine-white)',
-  marginLeft: '8px',
-});
-export const linkStyle = style({
-  color: 'var(--affine-white)',
-  textDecoration: 'underline',
-  ':hover': {
-    textDecoration: 'underline',
-  },
-  ':visited': {
-    color: 'var(--affine-white)',
-    textDecoration: 'underline',
-  },
+  gap: '16px',
 });

packages/frontend/component/src/components/affine-banner/index.tsx

@@ -1,2 +1,2 @@
 export * from './browser-warning';
-export * from './download-client';
+export * from './local-demo-tips';

packages/frontend/component/src/components/affine-banner/local-demo-tips.tsx

@@ -0,0 +1,54 @@
+import { CloseIcon } from '@blocksuite/icons';
+import { Button, IconButton } from '@toeverything/components/button';
+import { useCallback } from 'react';
+
+import * as styles from './index.css';
+
+type LocalDemoTipsProps = {
+  isLoggedIn: boolean;
+  onLogin: () => void;
+  onEnableCloud: () => void;
+  onClose: () => void;
+};
+
+export const LocalDemoTips = ({
+  onClose,
+  isLoggedIn,
+  onLogin,
+  onEnableCloud,
+}: LocalDemoTipsProps) => {
+  const content = isLoggedIn
+    ? 'This is a local demo workspace, and the data is stored locally. We recommend enabling AFFiNE Cloud.'
+    : 'This is a local demo workspace, and the data is stored locally in the browser. We recommend Enabling AFFiNE Cloud or downloading the client for a better experience.';
+
+  const buttonLabel = isLoggedIn
+    ? 'Enable AFFiNE Cloud'
+    : 'Sign in with AFFiNE Cloud';
+
+  const handleClick = useCallback(() => {
+    if (isLoggedIn) {
+      return onEnableCloud();
+    }
+    return onLogin();
+  }, [isLoggedIn, onEnableCloud, onLogin]);
+
+  return (
+    <div className={styles.tipsContainer} data-testid="local-demo-tips">
+      <div className={styles.tipsMessage}>{content}</div>
+
+      <div className={styles.tipsRightItem}>
+        <div>
+          <Button onClick={handleClick}>{buttonLabel}</Button>
+        </div>
+        <IconButton
+          onClick={onClose}
+          data-testid="local-demo-tips-close-button"
+        >
+          <CloseIcon />
+        </IconButton>
+      </div>
+    </div>
+  );
+};
+
+export default LocalDemoTips;

packages/frontend/component/src/components/app-sidebar/app-download-button/index.css.ts

@@ -0,0 +1,22 @@
+import { style } from '@vanilla-extract/css';
+export {
+  closeIcon,
+  ellipsisTextOverflow,
+  halo,
+  icon,
+  particles,
+  root,
+} from '../app-updater-button/index.css';
+
+export const rootPadding = style({
+  padding: '0 24px',
+});
+
+export const label = style({
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  height: '100%',
+  fontSize: 'var(--affine-font-sm)',
+  whiteSpace: 'nowrap',
+});

packages/frontend/component/src/components/app-sidebar/app-download-button/index.tsx

@@ -0,0 +1,53 @@
+import { CloseIcon, DownloadIcon } from '@blocksuite/icons';
+import clsx from 'clsx';
+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,
+}: {
+  className?: string;
+  style?: React.CSSProperties;
+}) {
+  const [show, setShow] = useState(true);
+
+  const handleClose = useCallback(() => {
+    setShow(false);
+  }, []);
+
+  // TODO: unify this type of literal value.
+  const handleClick = useCallback(() => {
+    const url = `https://affine.pro/download?channel=stable`;
+    open(url, '_blank');
+  }, []);
+
+  if (!show) {
+    return null;
+  }
+  return (
+    <button
+      style={style}
+      className={clsx([styles.root, styles.rootPadding, className])}
+      onClick={handleClick}
+    >
+      <div className={clsx([styles.label])}>
+        <DownloadIcon className={styles.icon} />
+        <span className={styles.ellipsisTextOverflow}>Download App</span>
+      </div>
+      <div
+        className={styles.closeIcon}
+        onClick={e => {
+          e.stopPropagation();
+          handleClose();
+        }}
+      >
+        <CloseIcon />
+      </div>
+      <div className={styles.particles} aria-hidden="true"></div>
+      <span className={styles.halo} aria-hidden="true"></span>
+    </button>
+  );
+}

packages/frontend/component/src/components/app-sidebar/index.tsx

@@ -159,6 +159,7 @@ export const AppSidebarFallback = (): ReactElement | null => {
 };
 
 export * from './add-page-button';
+export * from './app-download-button';
 export * from './app-updater-button';
 export * from './category-divider';
 export * from './index.css';