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/i18n/README.md

@@ -6,8 +6,7 @@
 - Replace literal text with translation keys
 
 ```tsx
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { LOCALES, useI18N } from '@affine/i18n';
+import { useI18n, LOCALES } from '@affine/i18n';
 // src/resources/en.json
 // {
 //     'Text': 'some text',
@@ -15,15 +14,14 @@ import { LOCALES, useI18N } from '@affine/i18n';
 // };
 
 const App = () => {
-  const t = useAFFiNEI18N();
-  const i18n = useI18N();
+  const i18n = useI18n();
   const changeLanguage = (language: string) => {
     i18n.changeLanguage(language);
   };
 
   return (
     <div>
-      <div>{t['Workspace Settings']()}</div>
+      <div>{i18n['Workspace Settings']()}</div>
       <>
         {LOCALES.map(option => {
           return (