From d20dbfd6a22e277edbad77c10c67005296123ba6 Mon Sep 17 00:00:00 2001 From: Waqar Bin zafar <110236004+WaqarNiaxi@users.noreply.github.com> Date: Wed, 20 May 2026 19:20:12 +0500 Subject: [PATCH] feat(editor): add page emoji display toggle #14987 (#14999) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR adds a display toggle for Page Emoji, so users can choose whether the add emoji option is shown in the page header when no emoji is set. What changed read editor setting for display add icon option hide emoji placeholder entry when the setting is disabled keep existing behavior for readonly mode and for pages that already have an emoji Why This implements the feature request to control Page Emoji visibility and improves header cleanliness for users who prefer a minimal UI. Issue Closes #14093 Screenshot 2026-05-19 at 3 44 14 PM Screenshot 2026-05-19 at 3 44 35 PM Testing verified in editable mode: setting ON: add emoji placeholder is visible when page has no emoji setting OFF: add emoji placeholder is hidden when page has no emoji verified in readonly mode: no emoji: nothing shown with emoji: existing emoji is shown verified no regression for selecting/changing/removing emoji Screenshots I will attach screenshots in this section. Quick rule checks before submit Base branch is canary. PR title follows conventional format: type(scope): subject. Scope editor is valid for this repo. Include Closes #14093 in the body. Add your screenshots before creating or right after opening the PR. ## Summary by CodeRabbit * **New Features** * Added an editor setting to toggle whether the "add icon" option is shown when creating new documents (default: enabled). * **User Experience** * When disabled, the add-icon trigger is hidden for documents that use a placeholder icon; readonly display remains unchanged. * **Tests** * Updated tests to cover the new setting and toggle behavior. * **Localization** * Added translations and updated i18n typings and completeness metrics. [![Review Change Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/toeverything/AFFiNE/pull/14999?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack) --- .../block-suite-editor/doc-icon-picker.tsx | 8 +++++++ .../general-setting/editor/general.spec.tsx | 20 ++++++++++++++++- .../general-setting/editor/general.tsx | 22 +++++++++++++++++++ .../core/src/modules/editor-setting/schema.ts | 1 + .../i18n/src/i18n-completenesses.json | 6 ++--- packages/frontend/i18n/src/i18n.gen.ts | 8 +++++++ packages/frontend/i18n/src/resources/en.json | 2 ++ 7 files changed, 63 insertions(+), 4 deletions(-) diff --git a/packages/frontend/core/src/blocksuite/block-suite-editor/doc-icon-picker.tsx b/packages/frontend/core/src/blocksuite/block-suite-editor/doc-icon-picker.tsx index c89cf666f1..755bf97a25 100644 --- a/packages/frontend/core/src/blocksuite/block-suite-editor/doc-icon-picker.tsx +++ b/packages/frontend/core/src/blocksuite/block-suite-editor/doc-icon-picker.tsx @@ -1,4 +1,5 @@ import { IconEditor, IconRenderer } from '@affine/component'; +import { EditorSettingService } from '@affine/core/modules/editor-setting'; import { ExplorerIconService } from '@affine/core/modules/explorer-icon/services/explorer-icon'; import { useI18n } from '@affine/i18n'; import { SmileSolidIcon } from '@blocksuite/icons/rc'; @@ -35,10 +36,13 @@ export const DocIconPicker = ({ }) => { const t = useI18n(); const explorerIconService = useService(ExplorerIconService); + const editorSetting = useService(EditorSettingService).editorSetting; const icon = useLiveData(explorerIconService.icon$('doc', docId)); + const settings = useLiveData(editorSetting.settings$); const isPlaceholder = !icon?.icon; + const shouldShowAddIconOption = settings.displayAddIconOption; if (readonly) { return isPlaceholder ? null : ( @@ -51,6 +55,10 @@ export const DocIconPicker = ({ ); } + if (isPlaceholder && !shouldShowAddIconOption) { + return null; + } + return ( { 'YYYY-MM-DD', 'com.affine.settings.editorSettings.general.auto-date-title.format.journal': 'Journal style (localized)', + 'com.affine.settings.editorSettings.general.add-icon-option.title': + 'Display add icon option', + 'com.affine.settings.editorSettings.general.add-icon-option.description': + 'Show or hide the add icon option for docs without an icon.', }; const useI18n = () => @@ -86,6 +91,7 @@ describe('NewDocDateTitleSettings', () => { editorSettingService.editorSetting['settings$'].value = { autoTitleNewDocWithCurrentDate: true, newDocDateTitleFormat: 'DD-MM-YYYY', + displayAddIconOption: true, }; }); @@ -97,7 +103,7 @@ describe('NewDocDateTitleSettings', () => { test('persists the auto title toggle through EditorSettingService', () => { render(); - fireEvent.click(screen.getByRole('checkbox')); + fireEvent.click(screen.getByTestId('auto-title-new-doc-trigger')); expect(editorSettingSet).toHaveBeenCalledWith( 'autoTitleNewDocWithCurrentDate', @@ -140,6 +146,7 @@ describe('NewDocDateTitleSettings', () => { editorSettingService.editorSetting['settings$'].value = { autoTitleNewDocWithCurrentDate: false, newDocDateTitleFormat: 'DD-MM-YYYY', + displayAddIconOption: true, }; render(); @@ -149,4 +156,15 @@ describe('NewDocDateTitleSettings', () => { ).toBeNull(); expect(screen.queryByText('New doc date format')).toBeNull(); }); + + test('persists the add icon option toggle through EditorSettingService', () => { + render(); + + fireEvent.click(screen.getByTestId('display-add-icon-option-trigger')); + + expect(editorSettingSet).toHaveBeenCalledWith( + 'displayAddIconOption', + false + ); + }); }); diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/general.tsx b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/general.tsx index 5a17c9e75a..e5baa97631 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/general.tsx +++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/general.tsx @@ -464,6 +464,13 @@ export const NewDocDateTitleSettings = () => { [editorSettingService.editorSetting] ); + const onToggleDisplayAddIconOption = useCallback( + (checked: boolean) => { + editorSettingService.editorSetting.set('displayAddIconOption', checked); + }, + [editorSettingService.editorSetting] + ); + return ( <> { ]()} > + + + {settings.autoTitleNewDocWithCurrentDate ? (