Skip to content

Commit

Permalink
fix(core): improve doc title and icon display (#9755)
Browse files Browse the repository at this point in the history 
Closes: [AF-2132](https://linear.app/affine-design/issue/AF-2132/优化-emoji-title-和-icon-显示)
  • Loading branch information
@fundon
fundon committed Jan 17, 2025
1 parent df910d7 commit d6042d5
Show file tree
Hide file tree
Showing 13 changed files with 159 additions and 74 deletions.
3 changes: 1 addition & 2 deletions blocksuite/affine/block-embed/src/embed-linked-doc-block/embed-linked-doc-block.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,10 +229,9 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
title$ = computed(() => {
const { pageId, params, title } = this.referenceInfo$.value;
return (
title ||
this.std
.get(DocDisplayMetaProvider)
.title(pageId, { params, title, referenced: true })
.title(pageId, { params, title, referenced: true }) || title
);
});

Expand Down
3 changes: 1 addition & 2 deletions ...ite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-node.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,10 +145,9 @@ export class AffineReference extends WithDisposable(ShadowlessElement) {
get _title() {
const { pageId, params, title } = this.referenceInfo;
return (
title ||
this.block?.std
?.get(DocDisplayMetaProvider)
.title(pageId, { params, title, referenced: true }).value
.title(pageId, { params, title, referenced: true }).value || title
);
}

Expand Down
2 changes: 1 addition & 1 deletion packages/frontend/core/src/components/affine/reference-link/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ function AffinePageReferenceInner({
mode: referenceWithMode ?? undefined,
reference: true,
referenceToNode,
hasTitleAlias: Boolean(title),
title,
})
);
})
Expand Down
6 changes: 3 additions & 3 deletions ...ges/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/root-block.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,8 +186,8 @@ export function buildDocDisplayMetaExtension(framework: FrameworkProvider) {
const icon$ = docDisplayMetaService
.icon$(docId, {
type: 'lit',
title,
reference: referenced,
hasTitleAlias: Boolean(title),
referenceToNode: referenceToNode({ pageId: docId, params }),
})
.map(iconBuilder);
Expand All @@ -204,15 +204,15 @@ export function buildDocDisplayMetaExtension(framework: FrameworkProvider) {

title(
docId: string,
{ title = '', referenced }: DocDisplayMetaParams = {}
{ title, referenced }: DocDisplayMetaParams = {}
): Signal<string> {
const title$ = docDisplayMetaService.title$(docId, {
title,
reference: referenced,
});

const { signal: titleSignal, cleanup } =
createSignalFromObservable<string>(title$, title);
createSignalFromObservable<string>(title$, title ?? '');

this.disposables.push(cleanup);

Expand Down
3 changes: 1 addition & 2 deletions packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/journal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,7 @@ const PageItem = ({
const Icon = useLiveData(
docDisplayMetaService.icon$(docId, { compareDate: new Date() })
);
const titleMeta = useLiveData(docDisplayMetaService.title$(docId));
const title = i18n.t(titleMeta);
const title = useLiveData(docDisplayMetaService.title$(docId));

return (
<WorkbenchLink
Expand Down
3 changes: 1 addition & 2 deletions packages/frontend/core/src/mobile/pages/workspace/detail/journal-conflict-block.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,7 @@ const ConflictItem = ({ docRecord }: { docRecord: DocRecord }) => {
const docId = docRecord.id;
const i18n = useI18n();
const docDisplayMetaService = useService(DocDisplayMetaService);
const titleMeta = useLiveData(docDisplayMetaService.title$(docId));
const title = i18n.t(titleMeta);
const title = useLiveData(docDisplayMetaService.title$(docId));

return (
<WorkbenchLink className={styles.docItem} to={`/${docId}`}>
Expand Down
3 changes: 1 addition & 2 deletions packages/frontend/core/src/mobile/pages/workspace/detail/menu/journal-conflicts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,8 +84,7 @@ const DocItem = ({ docRecord }: { docRecord: DocRecord }) => {
const Icon = useLiveData(
docDisplayMetaService.icon$(docId, { compareDate: new Date() })
);
const titleMeta = useLiveData(docDisplayMetaService.title$(docId));
const title = i18n.t(titleMeta);
const title = useLiveData(docDisplayMetaService.title$(docId));
return (
<WorkbenchLink aria-label={title} to={`/${docId}`}>
<MobileMenuItem
Expand Down
4 changes: 1 addition & 3 deletions packages/frontend/core/src/mobile/pages/workspace/detail/menu/journal-today-activity.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,11 @@ interface JournalTodayActivityMenuItemProps {
type Category = 'created' | 'updated';

const DocItem = ({ docId }: { docId: string }) => {
const i18n = useI18n();
const docDisplayMetaService = useService(DocDisplayMetaService);
const Icon = useLiveData(
docDisplayMetaService.icon$(docId, { compareDate: new Date() })
);
const titleMeta = useLiveData(docDisplayMetaService.title$(docId));
const title = i18n.t(titleMeta);
const title = useLiveData(docDisplayMetaService.title$(docId));
return (
<WorkbenchLink aria-label={title} to={`/${docId}`}>
<MenuItem prefixIcon={<Icon />}>{title}</MenuItem>
Expand Down
6 changes: 1 addition & 5 deletions packages/frontend/core/src/modules/at-menu-config/services/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,14 +91,10 @@ export class AtMenuConfigService extends Service {
return null;
}

let title = docDisplayMetaService.title$(meta.id, {
const title = docDisplayMetaService.title$(meta.id, {
reference: true,
}).value;

if (typeof title === 'object' && 'i18nKey' in title) {
title = I18n.t(title);
}

if (!fuzzyMatch(title, query)) {
return null;
}
Expand Down
90 changes: 43 additions & 47 deletions packages/frontend/core/src/modules/doc-display-meta/services/doc-display-meta.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,16 +40,15 @@ interface DocDisplayIconOptions<T extends IconType> {
* by default, it will use the `primaryMode$` of the doc.
*/
mode?: 'edgeless' | 'page';
title?: string; // title alias
reference?: boolean;
referenceToNode?: boolean;
hasTitleAlias?: boolean;
/**
* @default true
*/
enableEmojiIcon?: boolean;
}
interface DocDisplayTitleOptions {
originalTitle?: string;
title?: string; // title alias
reference?: boolean;
/**
Expand Down Expand Up @@ -130,47 +129,45 @@ export class DocDisplayMetaService extends Service {
const iconSet = icons[options?.type ?? 'rc'];

return LiveData.computed(get => {
const enableEmojiIcon =
get(this.featureFlagService.flags.enable_emoji_doc_icon.$) &&
options?.enableEmojiIcon !== false;
const doc = get(this.docsService.list.doc$(docId));
const title = doc ? get(doc.title$) : '';
const referenced = !!options?.reference;
const titleAlias = referenced ? options?.title : undefined;
const originalTitle = doc ? get(doc.title$) : '';
const title = titleAlias ?? originalTitle;
const mode = doc ? get(doc.primaryMode$) : undefined;
const finalMode = options?.mode ?? mode ?? 'page';
const referenceToNode = !!(options?.reference && options.referenceToNode);
const hasTitleAlias = !!(options?.reference && options?.hasTitleAlias);
const referenceToNode = !!(referenced && options.referenceToNode);

// increases block link priority with title alias
if (hasTitleAlias) {
return iconSet.AliasIcon;
// emoji title
if (enableEmojiIcon && title) {
const { emoji } = extractEmojiIcon(title);
if (emoji) return () => emoji;
}

// increases block link priority
if (referenceToNode) {
return iconSet.BlockLinkIcon;
}
// title alias
if (titleAlias) return iconSet.AliasIcon;

// link to specified block
if (referenceToNode) return iconSet.BlockLinkIcon;

// journal icon
// link to journal doc
const journalDate = this._toDayjs(
get(this.journalService.journalDate$(docId))
);
if (journalDate) {
return this.getJournalIcon(journalDate, options);
}

// reference icon
// link to regular doc (reference)
if (options?.reference) {
return finalMode === 'edgeless'
? iconSet.LinkedEdgelessIcon
: iconSet.LinkedPageIcon;
}

// emoji icon
const enableEmojiIcon =
get(this.featureFlagService.flags.enable_emoji_doc_icon.$) &&
options?.enableEmojiIcon !== false;
if (enableEmojiIcon) {
const { emoji } = extractEmojiIcon(title);
if (emoji) return () => emoji;
}

// default icon
return finalMode === 'edgeless' ? iconSet.EdgelessIcon : iconSet.PageIcon;
});
Expand All @@ -183,14 +180,28 @@ export class DocDisplayMetaService extends Service {
options?.enableEmojiIcon !== false;
const lng = get(this.i18nService.i18n.currentLanguageKey$);
const doc = get(this.docsService.list.doc$(docId));
const referenced = !!options?.reference;
const titleAlias = referenced ? options?.title : undefined;
const originalTitle = doc ? get(doc.title$) : '';
const title = titleAlias ?? originalTitle;

// emoji title
if (enableEmojiIcon && title) {
const { rest } = extractEmojiIcon(title);
if (rest) return rest;

// When the title has only one emoji character,
// if it's a journal document, the date should be displayed.
const journalDateString = get(this.journalService.journalDate$(docId));
if (journalDateString) {
return i18nTime(journalDateString, { absolute: { accuracy: 'day' } });
}
}

// title alias
if (options?.title) {
return enableEmojiIcon
? extractEmojiIcon(options.title).rest
: options.title;
}
if (titleAlias) return titleAlias;

// doc not found
if (!doc) {
return this.i18nService.i18n.i18next.t(
'com.affine.notFoundPage.title',
Expand All @@ -205,31 +216,16 @@ export class DocDisplayMetaService extends Service {
}

// original title
if (options?.originalTitle) return options.originalTitle;

const docTitle = get(doc.title$);
if (originalTitle) return originalTitle;

// empty title
if (!docTitle) {
return this.i18nService.i18n.i18next.t('Untitled', { lng });
}

// reference
if (options?.reference) return docTitle;

// emoji icon
if (enableEmojiIcon) {
return extractEmojiIcon(docTitle).rest;
}

// default
return docTitle;
return this.i18nService.i18n.i18next.t('Untitled', { lng });
});
}

getDocDisplayMeta(docRecord: DocRecord, originalTitle?: string) {
getDocDisplayMeta(docRecord: DocRecord) {
return {
title: this.title$(docRecord.id, { originalTitle }).value,
title: this.title$(docRecord.id).value,
icon: this.icon$(docRecord.id).value,
updatedDate: docRecord.meta$.value.updatedDate,
};
Expand Down
5 changes: 1 addition & 4 deletions packages/frontend/core/src/modules/quicksearch/impls/docs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,10 +66,7 @@ export class DocsQuickSearchSession
)
.map(([doc, docRecord]) => {
const { title, icon, updatedDate } =
this.docDisplayMetaService.getDocDisplayMeta(
docRecord,
'title' in doc ? doc.title : undefined
);
this.docDisplayMetaService.getDocDisplayMeta(docRecord);
return {
id: 'doc:' + docRecord.id,
source: 'docs',
Expand Down
Loading

0 comments on commit d6042d5

Please sign in to comment.