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>
This commit is contained in:
Akshaj Rawat
2026-01-28 01:48:21 +05:30
committed by GitHub
parent 5041578768
commit 759aa1b684
9 changed files with 58 additions and 4 deletions

View File

@@ -17,6 +17,7 @@ export type AppSetting = {
autoDownloadUpdate: boolean;
enableTelemetry: boolean;
showLinkedDocInSidebar: boolean;
disableImageAntialiasing: boolean;
};
export const windowFrameStyleOptions: AppSetting['windowFrameStyle'][] = [
'frameless',
@@ -35,6 +36,7 @@ const appSettingBaseAtom = atomWithStorage<AppSetting>(
autoDownloadUpdate: true,
enableTelemetry: true,
showLinkedDocInSidebar: true,
disableImageAntialiasing: false,
},
undefined,
{