refactor(i18n): new hook api (#7273)

# NEW HOOK API

`useI18n`: same as `useAFFiNEI18N`, with additional APIs

```ts
import { useI18n } from '@affine/i18n'

const i18n = useI18n()
i18n['hello world']() -> 你好世界
```

# NEW GLOBAL i18n Instance

`I18n`: use i18n capabilities outside of React

```ts
import { I18n } from '@affine/i18n'

I18n['hello world']() -> 你好世界
```

# NEW TYPES

`I18nKeys` -> all i18n keys

`I18nString` -> An i18n message (key&options)
transfer and store i18n text outside of React
```ts
const msg: I18nString = {
  key: 'helloworld',
  options: {
    arg1: '123'
  }
}

I18n.t(msg) -> 你好世界123
```

before:

```ts
registerCommand('open-page', {
  name: t('command.open-page')
  // ^- translation happens here,
})
```

after:

```ts
registerCommand('open-page', {
  name: { key: 'command.open-page' }
  // ^- store I18nString here, translate when the command render to UI
})
```

packages/frontend/component/src/components/member-components/accept-invite-page.tsx

@@ -1,6 +1,6 @@
 import { AuthPageContainer } from '@affine/component/auth-components';
 import type { GetInviteInfoQuery } from '@affine/graphql';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 
 import { Avatar } from '../../ui/avatar';
 import { Button } from '../../ui/button';
@@ -13,7 +13,7 @@ export const AcceptInvitePage = ({
   onOpenWorkspace: () => void;
   inviteInfo: GetInviteInfoQuery['getInviteInfo'];
 }) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   return (
     <AuthPageContainer
       title={t['Successfully joined!']()}

packages/frontend/component/src/components/member-components/invite-modal.tsx

@@ -1,5 +1,5 @@
 import { Permission } from '@affine/graphql';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useCallback, useEffect, useState } from 'react';
 
 import { ConfirmModal } from '../../ui/modal';
@@ -19,7 +19,7 @@ export const InviteModal = ({
   onConfirm,
   isMutating,
 }: InviteModalProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const [inviteEmail, setInviteEmail] = useState('');
   const [permission] = useState(Permission.Write);
   const [isValidEmail, setIsValidEmail] = useState(true);

packages/frontend/component/src/components/member-components/member-limit-modal.tsx

@@ -1,5 +1,5 @@
 import { ConfirmModal } from '@affine/component/ui/modal';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useI18n } from '@affine/i18n';
 import { useCallback } from 'react';
 
 export interface MemberLimitModalProps {
@@ -19,7 +19,7 @@ export const MemberLimitModal = ({
   setOpen,
   onConfirm,
 }: MemberLimitModalProps) => {
-  const t = useAFFiNEI18N();
+  const t = useI18n();
   const handleConfirm = useCallback(() => {
     setOpen(false);
     if (isFreePlan) {