mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-18 18:46:19 +08:00
Peng Xiao
5352736eba
Refactor AFFiNE layout to support new right sidebar. The new layout:  **Highlights:** - new sidebar UI/UX - favoring top-down UI components that are composed by basic building blocks in each route, instead of creating universal component like `WorkspaceHeader` that renders every possible cases (which I think is really hard to maintain) - remove plugin based solution **Pros/cons for current plugin-based solution:** The current solution is somewhat a Dependency Injection (DI) approach, where the layout is defined at the top and UI items can be injected using Jotai atom slots. This approach works well if we want a fully configurable system with everything being handled by plugins. It provides flexibility for custom extensions. However, this solution is more suitable for single-page applications where the UI is completely controlled by configuration. It becomes challenging to achieve an optimized and visually appealing UI that remains under our control. An example of such a scenario would be a customizable dashboard like Grafana. Another drawback of the existing solution is that we need to use Jotai and hooks to access context values, resulting in an unclear data flow within the component hierarchy. **Alternatively, our approach in this PR** provides layout building blocks such as headers and sidebars, which can then be composed in individual route components. The good is that we have cleaner biz component instead of vague all-in-one layout component (like `<WorkspaceHeader />`). **Issues of the implementation in this PR:** Some UI layouts that that seems to be defined at the root layout are now defined in individual route component instead. New 3-col layout component like the right sidebar still needs some abstraction and they are right now just for the detail editor only.
i18n
Usages
- Update missing translations into the base resources, a.k.a the
src/resources/en.json - Replace literal text with translation keys
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { LOCALES, useI18N } from '@affine/i18n';
// src/resources/en.json
// {
// 'Text': 'some text',
// 'Switch to language': 'Switch to {{language}}', // <- you can interpolation by curly brackets
// };
const App = () => {
const t = useAFFiNEI18N();
const i18n = useI18N();
const changeLanguage = (language: string) => {
i18n.changeLanguage(language);
};
return (
<div>
<div>{t['Workspace Settings']()}</div>
<>
{LOCALES.map(option => {
return (
<button
key={option.name}
onClick={() => {
changeLanguage(option.tag);
}}
>
{option.originalName}
</button>
);
})}
</>
</div>
);
};
How the i18n workflow works?
- When the
src/resources/en.json(base language) updated and merged to the develop branch, will trigger thelanguages-syncaction. - The
languages-syncaction will check the base language and add missing translations to the Tolgee platform. - This way, partners from the community can update the translations.
How to sync translations manually
- Set token as environment variable
export TOLGEE_API_KEY=tgpak_XXXXXXX
- Run the
sync-languages:checkto check all languages - Run the
sync-languagesscript to add new keys to the Tolgee platform - Run the
download-resourcesscript to download the latest full-translation translation resources from the Tolgee platform