feat(core): add i18n to descriptions of experimental feature (#8788)

close AF-1554 AF-1556 OPE-185

packages/frontend/core/src/desktop/dialogs/setting/general-setting/appearance/theme-editor-setting.tsx

@@ -3,6 +3,7 @@ import { SettingRow } from '@affine/component/setting-components';
 import { DesktopApiService } from '@affine/core/modules/desktop-api';
 import { ThemeEditorService } from '@affine/core/modules/theme-editor';
 import { UrlService } from '@affine/core/modules/url';
+import { useI18n } from '@affine/i18n';
 import { DeleteIcon } from '@blocksuite/icons/rc';
 import {
   useLiveData,
@@ -26,10 +27,12 @@ export const ThemeEditorSetting = () => {
     }
   }, [desktopApi, urlService]);
 
+  const t = useI18n();
+
   return (
     <SettingRow
-      name="Customize Theme"
-      desc="Edit all AFFiNE theme variables here"
+      name={t['com.affine.appearanceSettings.customize-theme.title']()}
+      desc={t['com.affine.appearanceSettings.customize-theme.description']()}
     >
       <div style={{ display: 'flex', gap: 16 }}>
         {modified ? (
@@ -45,10 +48,12 @@ export const ThemeEditorSetting = () => {
             variant="secondary"
             prefix={<DeleteIcon />}
           >
-            Reset all
+            {t['com.affine.appearanceSettings.customize-theme.reset']()}
           </Button>
         ) : null}
-        <Button onClick={open}>Open Theme Editor</Button>
+        <Button onClick={open}>
+          {t['com.affine.appearanceSettings.customize-theme.open']()}
+        </Button>
       </div>
     </SettingRow>
   );

packages/frontend/core/src/desktop/dialogs/setting/general-setting/experimental-features/index.tsx

@@ -108,6 +108,7 @@ const feedbackLink: Record<NonNullable<Flag['feedbackType']>, string> = {
 
 const ExperimentalFeaturesItem = ({ flag }: { flag: Flag }) => {
   const value = useLiveData(flag.$);
+  const t = useI18n();
   const onChange = useCallback(
     (checked: boolean) => {
       flag.set(checked);
@@ -127,12 +128,12 @@ const ExperimentalFeaturesItem = ({ flag }: { flag: Flag }) => {
   return (
     <div className={styles.rowContainer}>
       <div className={styles.switchRow}>
-        {flag.displayName}
+        {t[flag.displayName]()}
         <Switch checked={value} onChange={onChange} />
       </div>
       {!!flag.description && (
-        <Tooltip content={flag.description}>
-          <div className={styles.description}>{flag.description}</div>
+        <Tooltip content={t[flag.description]()}>
+          <div className={styles.description}>{t[flag.description]()}</div>
         </Tooltip>
       )}
       {!!flag.feedbackType && (

packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/labels.tsx

@@ -1,4 +1,6 @@
 import { WorkspacePermissionService } from '@affine/core/modules/permissions';
+import { useI18n } from '@affine/i18n';
+import type { Workspace } from '@toeverything/infra';
 import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
 import { useEffect, useMemo } from 'react';
 
@@ -34,47 +36,12 @@ const Label = ({ value, background }: LabelProps) => {
     </div>
   );
 };
-export const LabelsPanel = () => {
-  const workspace = useService(WorkspaceService).workspace;
-  const permissionService = useService(WorkspacePermissionService);
-  const isOwner = useLiveData(permissionService.permission.isOwner$);
-  useEffect(() => {
-    permissionService.permission.revalidate();
-  }, [permissionService]);
-  const labelMap: LabelMap = useMemo(
-    () => ({
-      local: {
-        value: 'Local',
-        background: 'var(--affine-tag-orange)',
-      },
-      syncCloud: {
-        value: 'Sync with AFFiNE Cloud',
-        background: 'var(--affine-tag-blue)',
-      },
-      syncDocker: {
-        value: 'Sync with AFFiNE Docker',
-        background: 'var(--affine-tag-green)',
-      },
-      selfHosted: {
-        value: 'Self-Hosted Server',
-        background: 'var(--affine-tag-purple)',
-      },
-      joinedWorkspace: {
-        value: 'Joined Workspace',
-        background: 'var(--affine-tag-yellow)',
-      },
-      availableOffline: {
-        value: 'Available Offline',
-        background: 'var(--affine-tag-green)',
-      },
-      publishedToWeb: {
-        value: 'Published to Web',
-        background: 'var(--affine-tag-blue)',
-      },
-    }),
-    []
-  );
-  const labelConditions: labelConditionsProps[] = [
+
+const getConditions = (
+  isOwner: boolean | null,
+  workspace: Workspace
+): labelConditionsProps[] => {
+  return [
     { condition: !isOwner, label: 'joinedWorkspace' },
     { condition: workspace.flavour === 'local', label: 'local' },
     {
@@ -82,6 +49,55 @@ export const LabelsPanel = () => {
       label: 'syncCloud',
     },
   ];
+};
+
+const getLabelMap = (t: ReturnType<typeof useI18n>): LabelMap => ({
+  local: {
+    value: t['com.affine.settings.workspace.state.local'](),
+    background: 'var(--affine-tag-orange)',
+  },
+  syncCloud: {
+    value: t['com.affine.settings.workspace.state.sync-affine-cloud'](),
+    background: 'var(--affine-tag-blue)',
+  },
+  syncDocker: {
+    value: t['com.affine.settings.workspace.state.sync-affine-docker'](),
+    background: 'var(--affine-tag-green)',
+  },
+  selfHosted: {
+    value: t['com.affine.settings.workspace.state.self-hosted'](),
+    background: 'var(--affine-tag-purple)',
+  },
+  joinedWorkspace: {
+    value: t['com.affine.settings.workspace.state.joined'](),
+    background: 'var(--affine-tag-yellow)',
+  },
+  availableOffline: {
+    value: t['com.affine.settings.workspace.state.available-offline'](),
+    background: 'var(--affine-tag-green)',
+  },
+  publishedToWeb: {
+    value: t['com.affine.settings.workspace.state.published'](),
+    background: 'var(--affine-tag-blue)',
+  },
+});
+
+export const LabelsPanel = () => {
+  const workspace = useService(WorkspaceService).workspace;
+  const permissionService = useService(WorkspacePermissionService);
+  const isOwner = useLiveData(permissionService.permission.isOwner$);
+  const t = useI18n();
+
+  useEffect(() => {
+    permissionService.permission.revalidate();
+  }, [permissionService]);
+
+  const labelMap = useMemo(() => getLabelMap(t), [t]);
+
+  const labelConditions = useMemo(
+    () => getConditions(isOwner, workspace),
+    [isOwner, workspace]
+  );
 
   return (
     <div className={style.labelWrapper}>