Files
AFFiNE-Mirror/packages/frontend/i18n
CatsJuice 20af4c35ee feat(core): card view drag handle for doc explorer (#12431)
close AF-2624, AF-2628, AF-2581

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a draggable handle to document cards in the explorer, visible on hover in card view.
  - Added an option to remove grouping in the display menu.
  - Added contextual tooltips for user avatars indicating creation or last update.
  - Enabled optional tooltips on public user labels.
  - Extended dropdown buttons to accept custom styling classes.
  - Added a new masonry story showcasing item heights determined by ratios.

- **Style**
  - Enhanced drag handle appearance and visibility for card view items.
  - Replaced static shadows with theme-aware, smoothly transitioning shadows on card items.
  - Adjusted spacing between items in the document explorer for improved layout, with increased horizontal and (in card view) vertical gaps.
  - Reduced top padding in workspace page styles.
  - Added new button background style for secondary buttons.

- **Bug Fixes**
  - Removed duplicate internal property declarations to eliminate redundancy.

- **Refactor**
  - Simplified layout props by removing fixed height parameters in multiple components.
  - Updated masonry layout logic to support ratio-based item sizing alongside fixed heights.
  - Removed randomized skeleton loading placeholders, replacing them with fixed or no placeholders.
  - Refined masonry component typings and scrollbar placement for improved styling and layout.
  - Improved selection logic to activate selection mode when selecting all documents.

- **Localization**
  - Added new translation keys for grouping removal and user attribution tooltips.
  - Updated English locale with new strings for "Remove group" and user-created/updated tooltips.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-05-26 03:17:19 +00:00
..

i18n

Usages

  • Update missing translations into the base resources, a.k.a the src/resources/en.json
  • Replace literal text with translation keys
import { useI18n, LOCALES } 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 i18n = useI18n();
  const changeLanguage = (language: string) => {
    i18n.changeLanguage(language);
  };

  return (
    <div>
      <div>{i18n['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 the languages-sync action.
  • The languages-sync action 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:check to check all languages
  • Run the sync-languages script to add new keys to the Tolgee platform
  • Run the download-resources script to download the latest full-translation translation resources from the Tolgee platform

References