feat(mobile): setting page ui (#8048)

AF-1275

packages/frontend/mobile/src/components/index.ts

@@ -3,4 +3,5 @@ export * from './doc-card';
 export * from './page-header';
 export * from './search-input';
 export * from './search-result';
+export * from './user-plan-tag';
 export * from './workspace-selector';

packages/frontend/mobile/src/components/page-header/index.tsx

@@ -16,6 +16,10 @@ export interface PageHeaderProps
    * whether to show back button
    */
   back?: boolean;
+  /**
+   * Override back button action
+   */
+  backAction?: () => void;
 
   /**
    * prefix content, shown after back button(if exists)
@@ -42,6 +46,7 @@ export const PageHeader = forwardRef<HTMLHeadElement, PageHeaderProps>(
   function PageHeader(
     {
       back,
+      backAction,
       prefix,
       suffix,
       children,
@@ -56,8 +61,8 @@ export const PageHeader = forwardRef<HTMLHeadElement, PageHeaderProps>(
     ref
   ) {
     const handleRouteBack = useCallback(() => {
-      history.back();
-    }, []);
+      backAction ? backAction() : history.back();
+    }, [backAction]);
 
     return (
       <header

packages/frontend/mobile/src/components/user-plan-tag/index.tsx

@@ -0,0 +1,52 @@
+import {
+  ServerConfigService,
+  SubscriptionService,
+} from '@affine/core/modules/cloud';
+import { SubscriptionPlan } from '@affine/graphql';
+import { useLiveData, useServices } from '@toeverything/infra';
+import clsx from 'clsx';
+import { forwardRef, type HTMLProps, useEffect } from 'react';
+
+import { tag } from './style.css';
+
+export const UserPlanTag = forwardRef<
+  HTMLDivElement,
+  HTMLProps<HTMLDivElement>
+>(function UserPlanTag({ className, ...attrs }, ref) {
+  const { serverConfigService, subscriptionService } = useServices({
+    ServerConfigService,
+    SubscriptionService,
+  });
+  const hasPayment = useLiveData(
+    serverConfigService.serverConfig.features$.map(r => r?.payment)
+  );
+  const plan = useLiveData(
+    subscriptionService.subscription.pro$.map(subscription =>
+      subscription !== null ? subscription?.plan : null
+    )
+  );
+  const isBeliever = useLiveData(subscriptionService.subscription.isBeliever$);
+  const isLoading = plan === null;
+
+  useEffect(() => {
+    // revalidate subscription to get the latest status
+    subscriptionService.subscription.revalidate();
+  }, [subscriptionService]);
+
+  if (!hasPayment) return null;
+
+  if (isLoading) return null;
+
+  const planLabel = isBeliever ? 'Believer' : (plan ?? SubscriptionPlan.Free);
+
+  return (
+    <div
+      ref={ref}
+      className={clsx(tag, className)}
+      data-is-believer={isBeliever}
+      {...attrs}
+    >
+      {planLabel}
+    </div>
+  );
+});

packages/frontend/mobile/src/components/user-plan-tag/style.css.ts

@@ -0,0 +1,22 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const tag = style({
+  display: 'flex',
+  fontSize: cssVar('fontXs'),
+  height: 20,
+  fontWeight: 500,
+  cursor: 'pointer',
+  color: cssVar('pureWhite'),
+  backgroundColor: cssVar('brandColor'),
+  padding: '0 4px',
+  borderRadius: 4,
+  justifyContent: 'center',
+  alignItems: 'center',
+
+  selectors: {
+    '&[data-is-believer="true"]': {
+      backgroundColor: '#374151',
+    },
+  },
+});