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

AF-1275

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

@@ -17,30 +17,30 @@ import { DateFormatSetting } from './date-format-setting';
 import { settingWrapper } from './style.css';
 import { ThemeEditorSetting } from './theme-editor-setting';
 
+export const getThemeOptions = (t: ReturnType<typeof useI18n>) =>
+  [
+    {
+      value: 'system',
+      label: t['com.affine.themeSettings.system'](),
+      testId: 'system-theme-trigger',
+    },
+    {
+      value: 'light',
+      label: t['com.affine.themeSettings.light'](),
+      testId: 'light-theme-trigger',
+    },
+    {
+      value: 'dark',
+      label: t['com.affine.themeSettings.dark'](),
+      testId: 'dark-theme-trigger',
+    },
+  ] satisfies RadioItem[];
+
 export const ThemeSettings = () => {
   const t = useI18n();
   const { setTheme, theme } = useTheme();
 
-  const radioItems = useMemo<RadioItem[]>(
-    () => [
-      {
-        value: 'system',
-        label: t['com.affine.themeSettings.system'](),
-        testId: 'system-theme-trigger',
-      },
-      {
-        value: 'light',
-        label: t['com.affine.themeSettings.light'](),
-        testId: 'light-theme-trigger',
-      },
-      {
-        value: 'dark',
-        label: t['com.affine.themeSettings.dark'](),
-        testId: 'dark-theme-trigger',
-      },
-    ],
-    [t]
-  );
+  const radioItems = useMemo<RadioItem[]>(() => getThemeOptions(t), [t]);
 
   return (
     <RadioGroup

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

@@ -41,51 +41,67 @@ import { Virtuoso } from 'react-virtuoso';
 import { DropdownMenu } from './menu';
 import * as styles from './style.css';
 
+const getLabel = (fontKey: FontFamily, t: ReturnType<typeof useI18n>) => {
+  switch (fontKey) {
+    case 'Sans':
+      return t['com.affine.appearanceSettings.fontStyle.sans']();
+    case 'Serif':
+      return t['com.affine.appearanceSettings.fontStyle.serif']();
+    case 'Mono':
+      return t[`com.affine.appearanceSettings.fontStyle.mono`]();
+    case 'Custom':
+      return t['com.affine.settings.editorSettings.edgeless.custom']();
+    default:
+      return '';
+  }
+};
+
+export const getBaseFontStyleOptions = (
+  t: ReturnType<typeof useI18n>
+): Array<Omit<RadioItem, 'value'> & { value: FontFamily }> => {
+  return fontStyleOptions
+    .map(({ key, value }) => {
+      if (key === 'Custom') {
+        return null;
+      }
+      const label = getLabel(key, t);
+      return {
+        value: key,
+        label,
+        testId: 'system-font-style-trigger',
+        style: {
+          fontFamily: value,
+        },
+      } satisfies RadioItem;
+    })
+    .filter(item => item !== null);
+};
+
 const FontFamilySettings = () => {
   const t = useI18n();
   const { editorSettingService } = useServices({ EditorSettingService });
   const settings = useLiveData(editorSettingService.editorSetting.settings$);
 
-  const getLabel = useCallback(
-    (fontKey: FontFamily) => {
-      switch (fontKey) {
-        case 'Sans':
-          return t['com.affine.appearanceSettings.fontStyle.sans']();
-        case 'Serif':
-          return t['com.affine.appearanceSettings.fontStyle.serif']();
-        case 'Mono':
-          return t[`com.affine.appearanceSettings.fontStyle.mono`]();
-        case 'Custom':
-          return t['com.affine.settings.editorSettings.edgeless.custom']();
-        default:
-          return '';
-      }
-    },
-    [t]
-  );
-
   const radioItems = useMemo(() => {
-    return fontStyleOptions
-      .map(({ key, value }) => {
-        if (key === 'Custom' && !environment.isDesktop) {
-          return null;
-        }
-        const label = getLabel(key);
-        let fontFamily = value;
-        if (key === 'Custom' && settings.customFontFamily) {
-          fontFamily = `${settings.customFontFamily}, ${value}`;
-        }
-        return {
-          value: key,
-          label,
-          testId: 'system-font-style-trigger',
-          style: {
-            fontFamily,
-          },
-        } satisfies RadioItem;
-      })
-      .filter(item => item !== null);
-  }, [getLabel, settings.customFontFamily]);
+    const items = getBaseFontStyleOptions(t);
+    if (!environment.isDesktop) return items;
+
+    // resolve custom fonts
+    const customOption = fontStyleOptions.find(opt => opt.key === 'Custom');
+    if (customOption) {
+      const fontFamily = settings.customFontFamily
+        ? `${settings.customFontFamily}, ${customOption.value}`
+        : customOption.value;
+      items.push({
+        value: customOption.key,
+        label: getLabel(customOption.key, t),
+        testId: 'system-font-style-trigger',
+        style: { fontFamily },
+      });
+    }
+
+    return items;
+  }, [settings.customFontFamily, t]);
 
   const handleFontFamilyChange = useCallback(
     (value: FontFamily) => {

packages/frontend/core/src/components/affine/sign-out-modal/index.tsx

@@ -9,6 +9,9 @@ type SignOutConfirmModalI18NKeys =
   | 'cancel'
   | 'confirm';
 
+/**
+ * @deprecated use `useSignOut` instead
+ */
 export const SignOutModal = ({ ...props }: ConfirmModalProps) => {
   const { title, description, cancelText, confirmText } = props;
   const t = useI18n();