feat(core): add indicator for general ai onboarding dialog (#6687)

packages/frontend/core/src/components/affine/ai-onboarding/general.dialog.css.ts

@@ -98,11 +98,21 @@ export const footer = style({
   gap: 12,
   display: 'flex',
   justifyContent: 'space-between',
-  selectors: {
-    '&[data-is-last="true"], &[data-is-first="true"]': {
-      justifyContent: 'flex-end',
-    },
-  },
+  alignItems: 'center',
+});
+export const actionAndIndicator = style({
+  display: 'flex',
+  gap: 16,
+  alignItems: 'center',
+  fontWeight: 500,
+  fontSize: cssVar('fontXs'),
+  lineHeight: '20px',
+  color: cssVar('textSecondaryColor'),
+});
+export const subscribeActions = style({
+  display: 'flex',
+  gap: 12,
+  alignItems: 'center',
 });
 export const baseActionButton = style({
   fontSize: cssVar('fontBase'),
@@ -112,3 +122,9 @@ export const baseActionButton = style({
     },
   },
 });
+export const transparentActionButton = style([
+  baseActionButton,
+  {
+    backgroundColor: 'transparent',
+  },
+]);

packages/frontend/core/src/components/affine/ai-onboarding/general.dialog.tsx

@@ -1,4 +1,4 @@
-import { Button, Modal } from '@affine/component';
+import { Button, IconButton, Modal } from '@affine/component';
 import { openSettingModalAtom } from '@affine/core/atoms';
 import { useBlurRoot } from '@affine/core/hooks/use-blur-root';
 import { SubscriptionService } from '@affine/core/modules/cloud';
@@ -90,6 +90,9 @@ export const AIOnboardingGeneral = ({
   const isFirst = index === 0;
   const isLast = index === list.length - 1;
 
+  const remindLater = useCallback(() => {
+    showAIOnboardingGeneral$.next(false);
+  }, []);
   const closeAndDismiss = useCallback(() => {
     showAIOnboardingGeneral$.next(false);
     onDismiss();
@@ -216,37 +219,55 @@ export const AIOnboardingGeneral = ({
           data-is-first={isFirst}
         >
           {isLast ? (
-            aiSubscription ? (
-              <Button
+            <>
+              <IconButton
+                size="default"
+                icon={<ArrowLeftSmallIcon width={20} height={20} />}
+                onClick={onPrev}
+                type="plain"
                 className={styles.baseActionButton}
-                size="large"
-                onClick={closeAndDismiss}
-                type="primary"
-              >
-                {t['com.affine.ai-onboarding.general.get-started']()}
-              </Button>
-            ) : (
-              <>
+              />
+              {aiSubscription ? (
                 <Button
                   className={styles.baseActionButton}
                   size="large"
                   onClick={closeAndDismiss}
-                >
-                  {t['com.affine.ai-onboarding.general.try-for-free']()}
-                </Button>
-                <Button
-                  className={styles.baseActionButton}
-                  size="large"
-                  onClick={goToPricingPlans}
                   type="primary"
                 >
-                  {t['com.affine.ai-onboarding.general.purchase']()}
+                  {t['com.affine.ai-onboarding.general.get-started']()}
                 </Button>
-              </>
-            )
+              ) : (
+                <div className={styles.subscribeActions}>
+                  <Button
+                    className={styles.baseActionButton}
+                    size="large"
+                    onClick={closeAndDismiss}
+                  >
+                    {t['com.affine.ai-onboarding.general.try-for-free']()}
+                  </Button>
+                  <Button
+                    className={styles.baseActionButton}
+                    size="large"
+                    onClick={goToPricingPlans}
+                    type="primary"
+                  >
+                    {t['com.affine.ai-onboarding.general.purchase']()}
+                  </Button>
+                </div>
+              )}
+            </>
           ) : (
             <>
-              {isFirst ? null : (
+              {isFirst ? (
+                <Button
+                  className={styles.transparentActionButton}
+                  onClick={remindLater}
+                  size="large"
+                  type="default"
+                >
+                  {t['com.affine.ai-onboarding.general.skip']()}
+                </Button>
+              ) : (
                 <Button
                   icon={<ArrowLeftSmallIcon />}
                   className={styles.baseActionButton}
@@ -257,14 +278,19 @@ export const AIOnboardingGeneral = ({
                   {t['com.affine.ai-onboarding.general.prev']()}
                 </Button>
               )}
-              <Button
-                className={styles.baseActionButton}
-                size="large"
-                type="primary"
-                onClick={onNext}
-              >
-                {t['com.affine.ai-onboarding.general.next']()}
-              </Button>
+              <div className={styles.actionAndIndicator}>
+                <div>
+                  {index + 1} / {list.length}
+                </div>
+                <Button
+                  className={styles.baseActionButton}
+                  size="large"
+                  type="primary"
+                  onClick={onNext}
+                >
+                  {t['com.affine.ai-onboarding.general.next']()}
+                </Button>
+              </div>
             </>
           )}
         </footer>

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

@@ -1294,7 +1294,7 @@
   "com.affine.ai-onboarding.general.4.description": "From concept to completion, turn ideas into reality.",
   "com.affine.ai-onboarding.general.5.title": "AFFiNE AI is ready",
   "com.affine.ai-onboarding.general.5.description": "Go to <a>{{link}}</a> for learn more details about AFFiNE AI.",
-  "com.affine.ai-onboarding.general.skip": "Alert me later",
+  "com.affine.ai-onboarding.general.skip": "Remind me Later",
   "com.affine.ai-onboarding.general.next": "Next",
   "com.affine.ai-onboarding.general.prev": "Back",
   "com.affine.ai-onboarding.general.try-for-free": "Try for Free",