mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-15 05:37:32 +00:00

Files

CatsJuice 2e3b721603 feat(core): new all docs list ui (#12102 )

### New all docs list ui
close AF-2531, AF-2585, AF-2586, AF-2580

### What changed

- a new `display-menu` component
- properties visibility
- quick actions visibility
- extend DocPropertyType definition
- `showInDocList`: configure whether to show in doc and how to show (stack | inline)
- `docListProperty`: define how to render property in doc
- `groupHeader`: define how to render group header when grouped
- implement all properties's `docListProperty` renderer and `groupHeader` renderer
- new `docs-view` component
- render doc in `card` | `list` view
- split doc card into minimal components for reuse in list and card views, as well as visibility control
- implement docs-list with `<Masonry />` and multi-view support
- for list view, make masonry column count always `1`

## Summary by CodeRabbit

- **New Features**
- Redesigned document explorer with multiple view modes (list, grid, masonry), grouping, selection, and multi-delete.
- Added customizable display properties and quick actions (favorite, trash, split view, new tab, select) for documents.
- Introduced new group header and document item components with improved styling and interaction.
- Enabled dynamic rendering of document properties including tags, dates, users, templates, and themes.
- Added filtering support for trash status and enhanced localization for UI elements.
- Introduced drag handle size customization and expanded masonry layout configurability.
- Added contextual "More" menu with document operations like favorite, info, duplicate, and trash.
- Implemented shared context for explorer state management and multi-selection logic.

- **Enhancements**
- Improved virtual scrolling with active item tracking and configurable preload and debounce settings.
- Responsive, theme-aware styling applied across explorer and property components.
- Configurable UI elements and quick actions via user preferences.
- Enhanced error messages for unsupported property types in filters.
- Refined padding and layout calculations in masonry component for better visual consistency.
- Avatar and date components refactored for explicit prop-driven rendering and customization.

- **Bug Fixes**
- Improved error messages for unsupported property types in filters.

- **Documentation**
- Added new localization keys and updated language completeness for new features.

- **Chores**
- Modularized workspace property types with list and group header display components.
- Consolidated imports and enhanced code maintainability.
- Added new CSS styling modules for explorer components and workspace property types.

2025-05-09 05:31:11 +00:00

src

feat(core): new all docs list ui (#12102 )

2025-05-09 05:31:11 +00:00

.gitignore

refactor(i18n): lazy load languages (#8456 )

2024-10-10 09:03:06 +00:00

.i18n-codegen.json

chore: add monorepo tools (#9196 )

2024-12-24 15:29:48 +08:00

build.ts

feat(i18n): introduce server error i18n (#9953 )

2025-02-05 12:30:19 +00:00

cleanup.mjs

chore(i18n): cleanup i18n file (#8318 )

2024-09-20 06:25:17 +00:00

crowdin.yml

feat: sync i18n with crowdin (#8293 )

2024-09-19 05:30:18 +00:00

package.json

chore: bump up all non-major npm dependencies (#12151 )

2025-05-06 14:47:24 +00:00

README.md

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

2024-06-20 02:19:41 +00:00

tsconfig.json

chore(server): stdout is enough for collecting server logging (#9964 )

2025-02-05 13:25:11 +00:00

README.md

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

README.md

i18n

Usages

How the i18n workflow works?

How to sync translations manually

References