sort custom emoticons in picker by sortKey (#18)

packages/backend/migration/1733435351051-add-emoji-sort-key.js

@@ -0,0 +1,11 @@
+export class AddEmojiSortKey1733435351051 {
+    name = 'AddEmojiSortKey1733435351051'
+
+    async up(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "emoji" ADD "sortKey" character varying(64)`);
+    }
+
+    async down(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "emoji" DROP COLUMN "sortKey"`);
+    }
+}

packages/backend/src/core/CustomEmojiService.ts

@@ -76,6 +76,7 @@ export class CustomEmojiService implements OnApplicationShutdown {
 		isSensitive: boolean;
 		localOnly: boolean;
 		roleIdsThatCanBeUsedThisEmojiAsReaction: MiRole['id'][];
+		sortKey: string | null;
 	}, moderator?: MiUser): Promise<MiEmoji> {
 		const emoji = await this.emojisRepository.insertOne({
 			id: this.idService.gen(),
@@ -91,6 +92,7 @@ export class CustomEmojiService implements OnApplicationShutdown {
 			isSensitive: data.isSensitive,
 			localOnly: data.localOnly,
 			roleIdsThatCanBeUsedThisEmojiAsReaction: data.roleIdsThatCanBeUsedThisEmojiAsReaction,
+			sortKey: data.sortKey,
 		});
 
 		if (data.host == null) {
@@ -121,6 +123,7 @@ export class CustomEmojiService implements OnApplicationShutdown {
 		isSensitive?: boolean;
 		localOnly?: boolean;
 		roleIdsThatCanBeUsedThisEmojiAsReaction?: MiRole['id'][];
+		sortKey?: string | null;
 	}, moderator?: MiUser): Promise<void> {
 		const emoji = await this.emojisRepository.findOneByOrFail({ id: id });
 		const sameNameEmoji = await this.emojisRepository.findOneBy({ name: data.name, host: IsNull() });
@@ -138,6 +141,7 @@ export class CustomEmojiService implements OnApplicationShutdown {
 			publicUrl: data.driveFile != null ? (data.driveFile.webpublicUrl ?? data.driveFile.url) : undefined,
 			type: data.driveFile != null ? (data.driveFile.webpublicType ?? data.driveFile.type) : undefined,
 			roleIdsThatCanBeUsedThisEmojiAsReaction: data.roleIdsThatCanBeUsedThisEmojiAsReaction ?? undefined,
+			sortKey: data.sortKey,
 		});
 
 		this.localEmojisCache.refresh();

packages/backend/src/core/entities/EmojiEntityService.ts

@@ -34,6 +34,7 @@ export class EmojiEntityService {
 			localOnly: emoji.localOnly ? true : undefined,
 			isSensitive: emoji.isSensitive ? true : undefined,
 			roleIdsThatCanBeUsedThisEmojiAsReaction: emoji.roleIdsThatCanBeUsedThisEmojiAsReaction.length > 0 ? emoji.roleIdsThatCanBeUsedThisEmojiAsReaction : undefined,
+			sortKey: emoji.sortKey,
 		};
 	}
 
@@ -62,6 +63,7 @@ export class EmojiEntityService {
 			isSensitive: emoji.isSensitive,
 			localOnly: emoji.localOnly,
 			roleIdsThatCanBeUsedThisEmojiAsReaction: emoji.roleIdsThatCanBeUsedThisEmojiAsReaction,
+			sortKey: emoji.sortKey,
 		};
 	}
 

packages/backend/src/models/Emoji.ts

@@ -81,4 +81,9 @@ export class MiEmoji {
 		array: true, length: 128, default: '{}',
 	})
 	public roleIdsThatCanBeUsedThisEmojiAsReaction: string[];
+
+	@Column('varchar', {
+		length: 64, nullable: true,
+	})
+	public sortKey: string | null;
 }

packages/backend/src/models/json-schema/emoji.ts

@@ -44,6 +44,10 @@ export const packedEmojiSimpleSchema = {
 				format: 'id',
 			},
 		},
+		sortKey: {
+			type: 'string',
+			optional: false, nullable: true,
+		},
 	},
 } as const;
 
@@ -102,5 +106,9 @@ export const packedEmojiDetailedSchema = {
 				format: 'id',
 			},
 		},
+		sortKey: {
+			type: 'string',
+			optional: false, nullable: true,
+		},
 	},
 } as const;

packages/backend/src/queue/processors/ImportCustomEmojisProcessorService.ts

@@ -105,6 +105,7 @@ export class ImportCustomEmojisProcessorService {
 						isSensitive: emojiInfo.isSensitive,
 						localOnly: emojiInfo.localOnly,
 						roleIdsThatCanBeUsedThisEmojiAsReaction: [],
+						sortKey: emojiInfo.sortKey?.normalize('NFC'),
 					});
 				} catch (e) {
 					if (e instanceof Error || typeof e === 'string') {

packages/backend/src/server/api/endpoints/admin/emoji/add.ts

@@ -56,6 +56,7 @@ export const paramDef = {
 		roleIdsThatCanBeUsedThisEmojiAsReaction: { type: 'array', items: {
 			type: 'string',
 		} },
+		sortKey: { type: 'string', nullable: true },
 	},
 	required: ['name', 'fileId'],
 } as const;
@@ -91,6 +92,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				isSensitive: ps.isSensitive ?? false,
 				localOnly: ps.localOnly ?? false,
 				roleIdsThatCanBeUsedThisEmojiAsReaction: ps.roleIdsThatCanBeUsedThisEmojiAsReaction ?? [],
+				sortKey: ps.sortKey?.normalize('NFC') ?? null,
 			}, me);
 
 			return this.emojiEntityService.packDetailed(emoji);

packages/backend/src/server/api/endpoints/admin/emoji/copy.ts

@@ -97,6 +97,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				isSensitive: emoji.isSensitive,
 				localOnly: emoji.localOnly,
 				roleIdsThatCanBeUsedThisEmojiAsReaction: emoji.roleIdsThatCanBeUsedThisEmojiAsReaction,
+				sortKey: emoji.sortKey?.normalize('NFC') ?? null,
 			}, me);
 
 			return this.emojiEntityService.packDetailed(addedEmoji);

packages/backend/src/server/api/endpoints/admin/emoji/list.ts

@@ -56,6 +56,10 @@ export const meta = {
 					type: 'string',
 					optional: false, nullable: false,
 				},
+				sortKey: {
+					type: 'string',
+					optional: false, nullable: true,
+				},
 			},
 		},
 	},

packages/backend/src/server/api/endpoints/admin/emoji/update.ts

@@ -56,6 +56,7 @@ export const paramDef = {
 		roleIdsThatCanBeUsedThisEmojiAsReaction: { type: 'array', items: {
 			type: 'string',
 		} },
+		sortKey: { type: 'string', nullable: true },
 	},
 	anyOf: [
 		{ required: ['id'] },
@@ -104,6 +105,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				isSensitive: ps.isSensitive,
 				localOnly: ps.localOnly,
 				roleIdsThatCanBeUsedThisEmojiAsReaction: ps.roleIdsThatCanBeUsedThisEmojiAsReaction,
+				sortKey: ps.sortKey,
 			}, me);
 		});
 	}

packages/frontend-embed/vite.config.local-dev.ts

@@ -31,7 +31,7 @@ const devConfig: UserConfig = {
 	publicDir: '../assets',
 	base: '/embed',
 	server: {
-		host: 'localhost',
+		host: true,
 		port: 5174,
 		proxy: {
 			'/api': {

packages/frontend-embed/vite.config.ts

@@ -64,6 +64,7 @@ export function getConfig(): UserConfig {
 
 		server: {
 			port: 5174,
+			host: true
 		},
 
 		plugins: [

packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue

@@ -47,6 +47,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #key>{{ i18n.ts.emojiUrl }}</template>
 					<template #value>
 						<MkLink :url="emoji.url" target="_blank">{{ emoji.url }}</MkLink>
+					</template>
+				</MkKeyValue>
+				<MkKeyValue>
+					<template #key>{{ i18n.ts.sortKey }}</template>
+					<template #value>
+            <span v-if="emoji.sortKey === null || emoji.sortKey === undefined">{{ i18n.ts.none }}</span>
+            <span v-else :class="$style.alias">{{ emoji.sortKey }}</span>
           </template>
 				</MkKeyValue>
 			</div>

packages/frontend/src/components/MkEmojiPicker.section.vue

@@ -35,7 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			v-for="child in customEmojiTree"
 			:key="`custom:${child.value}`"
 			:initialShown="initialShown"
-			:emojis="computed(() => customEmojis.filter(e => e.category === child.category).map(e => `:${e.name}:`))"
+			:emojis="computed(() => customEmojis.filter(e => e.category === child.category).sort(compareBySortKey).map(e => `:${e.name}:`))"
 			:hasChildSection="child.children.length !== 0"
 			:customEmojiTree="child.children"
 			@chosen="nestedChosen"
@@ -64,7 +64,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref, computed, Ref } from 'vue';
 import { CustomEmojiFolderTree, getEmojiName } from '@@/js/emojilist.js';
 import { i18n } from '@/i18n.js';
-import { customEmojis } from '@/custom-emojis.js';
+import { customEmojis, compareBySortKey } from '@/custom-emojis.js';
 import MkEmojiPickerSection from '@/components/MkEmojiPicker.section.vue';
 
 const props = defineProps<{

packages/frontend/src/components/MkEmojiPicker.vue

@@ -91,7 +91,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				v-for="child in customEmojiFolderRoot.children"
 				:key="`custom:${child.value}`"
 				:initialShown="false"
-				:emojis="computed(() => customEmojis.filter(e => filterCategory(e, child.value)).map(e => `:${e.name}:`))"
+				:emojis="computed(() => customEmojis.filter(e => filterCategory(e, child.value)).sort(compareBySortKey).map(e => `:${e.name}:`))"
 				:disabledEmojis="computed(() => customEmojis.filter(e => filterCategory(e, child.value)).filter(e => !canReact(e)).map(e => `:${e.name}:`))"
 				:hasChildSection="child.children.length !== 0"
 				:customEmojiTree="child.children"
@@ -133,7 +133,7 @@ import { isTouchUsing } from '@/scripts/touch.js';
 import { deviceKind } from '@/scripts/device-kind.js';
 import { i18n } from '@/i18n.js';
 import { defaultStore } from '@/store.js';
-import { customEmojiCategories, customEmojis, customEmojisMap } from '@/custom-emojis.js';
+import { customEmojiCategories, customEmojis, customEmojisMap, compareBySortKey } from '@/custom-emojis.js';
 import { $i } from '@/account.js';
 import { checkReactionPermissions } from '@/scripts/check-reaction-permissions.js';
 

packages/frontend/src/custom-emojis.ts

@@ -20,6 +20,19 @@ export const customEmojiCategories = computed<[ ...string[], null ]>(() => {
 	return markRaw([...Array.from(categories), null]);
 });
 
+export function compareBySortKey(a: Misskey.entities.EmojiSimple, b: Misskey.entities.EmojiSimple): number {
+	if (a.sortKey === b.sortKey) {
+		if (a.name === b.name)
+			return 0;
+		return (a.name > b.name) ? 1 : -1;
+	}
+	if (a.sortKey === null)
+		return 1;
+	if (b.sortKey === null)
+		return -1;
+	return (a.sortKey > b.sortKey) ? 1 : -1;
+}
+
 export const customEmojisMap = new Map<string, Misskey.entities.EmojiSimple>();
 watch(customEmojis, emojis => {
 	customEmojisMap.clear();

packages/frontend/src/pages/emoji-edit-dialog.vue

@@ -68,6 +68,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkFolder>
 				<MkSwitch v-model="isSensitive">isSensitive</MkSwitch>
 				<MkSwitch v-model="localOnly">{{ i18n.ts.localOnly }}</MkSwitch>
+				<MkInput v-model="sortKey" autocapitalize="off">
+					<template #label>{{ i18n.ts.sortKey }}</template>
+				</MkInput>
 				<MkButton v-if="emoji" danger @click="del()"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
 			</div>
 		</MkSpacer>
@@ -107,6 +110,7 @@ const isSensitive = ref(props.emoji ? props.emoji.isSensitive : false);
 const localOnly = ref(props.emoji ? props.emoji.localOnly : false);
 const roleIdsThatCanBeUsedThisEmojiAsReaction = ref(props.emoji ? props.emoji.roleIdsThatCanBeUsedThisEmojiAsReaction : []);
 const rolesThatCanBeUsedThisEmojiAsReaction = ref<Misskey.entities.Role[]>([]);
+const sortKey = ref<string>(props.emoji ? (props.emoji.sortKey ?? '') : '');
 const file = ref<Misskey.entities.DriveFile>();
 
 watch(roleIdsThatCanBeUsedThisEmojiAsReaction, async () => {
@@ -153,6 +157,7 @@ async function done() {
 		isSensitive: isSensitive.value,
 		localOnly: localOnly.value,
 		roleIdsThatCanBeUsedThisEmojiAsReaction: rolesThatCanBeUsedThisEmojiAsReaction.value.map(x => x.id),
+		sortKey: sortKey.value === '' ? null : sortKey.value,
 	};
 
 	if (file.value) {

packages/frontend/vite.config.local-dev.ts

@@ -32,7 +32,7 @@ const devConfig: UserConfig = {
 	publicDir: '../assets',
 	base: './',
 	server: {
-		host: 'localhost',
+		host: true,
 		port: 5173,
 		proxy: {
 			'/api': {

packages/frontend/vite.config.ts

@@ -66,6 +66,7 @@ export function getConfig(): UserConfig {
 
 		server: {
 			port: 5173,
+			host: true,
 			headers: { // なんか効かない
 				'X-Frame-Options': 'DENY',
 			},