mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-14 00:26:51 +08:00

Files

T

Akshaj Rawat 759aa1b684 feat: add option to disable image anti-aliasing (#14278 )

## What this PR does

Closes #13869 
Adds a global setting to toggle image anti-aliasing in AFFiNE.

When disabled, images are rendered using nearest-neighbor scaling
(`image-rendering: pixelated`), preserving crisp pixels for pixel art,
sprites, icons, and low-resolution images.

## Why

Anti-aliasing causes small images to become blurry when scaled,
making it difficult to work with pixel art and technical assets.

## How to test

1. Open Settings → Appearance → Images
2. Toggle “Smooth image rendering”
3. Observe image scaling behavior:
   - ON: smooth / anti-aliased
   - OFF: pixelated / nearest-neighbor

## Notes

- Frontend-only change
- No backend required

# BEFORE
<img width="1911" height="909" alt="Screenshot 2026-01-18 202651"
src="https://github.com/user-attachments/assets/a40816c3-93fa-416d-90ec-38a919da182f"
/>

# AFTER
<img width="1919" height="910" alt="Screenshot 2026-01-18 202705"
src="https://github.com/user-attachments/assets/19fc348b-5f14-4e32-b6a8-a0905e569af5"
/>



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

* **New Features**
* Added an Images section in Appearance with a toggle to switch image
antialiasing on/off (setting is persisted).

* **Style**
* When antialiasing is turned off, images render with pixelated scaling
for a crisp, non-smoothed look.

* **Localization**
* Added English labels and description for the new Images and
antialiasing options.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: DarkSky <25152247+darkskygit@users.noreply.github.com>

2026-01-27 20:18:21 +00:00

src

feat: add option to disable image anti-aliasing (#14278 )

2026-01-27 20:18:21 +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(core): integrate google calendar sync (#14248 )

2026-01-13 02:38:16 +08: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 version & deps

2026-01-15 00:33:51 +08: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