カスタム絵文字カテゴリ

locales/en-US.yml

@@ -1316,6 +1316,7 @@ admin/views/emoji.vue:
     title: "Add emoji"
     name: "Emoji name"
     name-desc: "You can use the characters a~z 0~9 _"
+    category: "Category"
     aliases: "Aliases"
     aliases-desc: "You can add more than one, separated by spaces."
     url: "Image URL"

locales/ja-JP.yml

@@ -1450,6 +1450,7 @@ admin/views/emoji.vue:
     title: "絵文字の登録"
     name: "絵文字名"
     name-desc: "a~z 0~9 _ の文字が使えます。"
+    category: "カテゴリ"
     aliases: "エイリアス"
     aliases-desc: "スペースで区切って複数設定できます。"
     url: "絵文字画像URL"

src/client/app/admin/views/emoji.vue

@@ -8,6 +8,9 @@
 					<span>{{ $t('add-emoji.name') }}</span>
 					<template #desc>{{ $t('add-emoji.name-desc') }}</template>
 				</ui-input>
+				<ui-input v-model="category">
+						<span>{{ $t('add-emoji.category') }}</span>
+				</ui-input>
 				<ui-input v-model="aliases">
 					<span>{{ $t('add-emoji.aliases') }}</span>
 					<template #desc>{{ $t('add-emoji.aliases-desc') }}</template>
@@ -24,7 +27,7 @@
 
 	<ui-card>
 		<template #title><fa :icon="faGrin"/> {{ $t('emojis.title') }}</template>
-		<section v-for="emoji in emojis" class="oryfrbft">
+		<section v-for="emoji in emojis" :key="emoji.name" class="oryfrbft">
 			<div>
 				<img :src="emoji.url" :alt="emoji.name" style="width: 64px;"/>
 			</div>
@@ -33,6 +36,9 @@
 					<ui-input v-model="emoji.name">
 						<span>{{ $t('add-emoji.name') }}</span>
 					</ui-input>
+					<ui-input v-model="emoji.category">
+						<span>{{ $t('add-emoji.category') }}</span>
+					</ui-input>
 					<ui-input v-model="emoji.aliases">
 						<span>{{ $t('add-emoji.aliases') }}</span>
 					</ui-input>
@@ -61,6 +67,7 @@ export default Vue.extend({
 	data() {
 		return {
 			name: '',
+			category: '',
 			url: '',
 			aliases: '',
 			emojis: [],
@@ -76,6 +83,7 @@ export default Vue.extend({
 		add() {
 			this.$root.api('admin/emoji/add', {
 				name: this.name,
+				category: this.category,
 				url: this.url,
 				aliases: this.aliases.split(' ').filter(x => x.length > 0)
 			}).then(() => {
@@ -106,6 +114,7 @@ export default Vue.extend({
 			this.$root.api('admin/emoji/update', {
 				id: emoji.id,
 				name: emoji.name,
+				category: emoji.category,
 				url: emoji.url,
 				aliases: emoji.aliases.split(' ').filter(x => x.length > 0)
 			}).then(() => {

src/client/app/common/views/components/emoji-picker.vue

@@ -24,17 +24,20 @@
 			</div>
 		</template>
 		<template v-else>
-			<div class="list">
-				<button v-for="emoji in customEmojis"
-					:title="emoji.name"
-					@click="chosen(`:${emoji.name}:`)"
-					:key="emoji.name"
-				>
-					<img :src="$store.state.device.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
-				</button>
+			<div v-for="(categoryEmojis, i) in customEmojis" :key="i">
+				<header class="sub">{{ categoryEmojis[0].category }}</header>
+				<div class="list">
+					<button v-for="emoji in categoryEmojis"
+						:title="emoji.name"
+						@click="chosen(`:${emoji.name}:`)"
+						:key="emoji.name"
+					>
+						<img :src="$store.state.device.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
+					</button>
+				</div>
 			</div>
-			
-			<header class="sub" v-if="this.includeRemote">Remote emojis</header>
+
+			<header class="category" v-if="this.includeRemote">Remote emojis</header>
 			<div class="list">
 				<button v-for="emoji in remoteEmojis"
 					:title="emoji.sources ? emoji.sources.map(x => `${x.name}@${x.host}`).join(',\n') : emoji.name"
@@ -56,6 +59,7 @@ import { emojilist } from '../../../../../misc/emojilist';
 import { getStaticImageUrl } from '../../../common/scripts/get-static-image-url';
 import { faAsterisk, faLeaf, faUtensils, faFutbol, faCity, faDice } from '@fortawesome/free-solid-svg-icons';
 import { faHeart, faFlag } from '@fortawesome/free-regular-svg-icons';
+import { groupOn } from '../../../../../prelude/array';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/emoji-picker.vue'),
@@ -123,8 +127,9 @@ export default Vue.extend({
 	},
 
 	created() {
-		const local = (this.$root.getMetaSync() || { emojis: [] }).emojis || [];
-		this.customEmojis = local.sort((a: any, b: any) => a.name > b.name ? 1 : a.name < b.name ? -1 : 0);
+		let local = (this.$root.getMetaSync() || { emojis: [] }).emojis || [];
+		local = groupOn((x: any) => x.category || '', local);
+		this.customEmojis = local;
 
 		if (this.includeRemote) {
 			this.$root.api('emojis/recommendation', {
@@ -187,13 +192,12 @@ export default Vue.extend({
 			color var(--text)
 			font-size 12px
 
-		> header.sub
+		>>> header.sub
 			padding 4px 8px
-			background var(--faceHeader)
 			color var(--text)
 			font-size 12px
 
-		> div.list
+		>>> div.list
 			display grid
 			grid-template-columns 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
 			gap 4px

src/models/emoji.ts

@@ -20,6 +20,7 @@ export type IEmoji = {
 	url: string;
 	aliases?: string[];
 	updatedAt?: Date;
+	category?: string;
 	/** AP object id */
 	uri?: string;
 	type?: string;

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

@@ -18,6 +18,10 @@ export const meta = {
 			validator: $.str.min(1)
 		},
 
+		category: {
+			validator: $.optional.str
+		},
+
 		url: {
 			validator: $.str.min(1)
 		},
@@ -35,6 +39,7 @@ export default define(meta, async (ps) => {
 	const emoji = await Emoji.insert({
 		updatedAt: new Date(),
 		name: ps.name,
+		category: ps.category,
 		host: null,
 		aliases: ps.aliases,
 		url: ps.url,

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

@@ -28,6 +28,7 @@ export default define(meta, async (ps) => {
 	return emojis.map(e => ({
 		id: e._id,
 		name: e.name,
+		category: e.category,
 		aliases: e.aliases,
 		host: e.host,
 		url: e.url

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

@@ -23,6 +23,10 @@ export const meta = {
 			validator: $.str
 		},
 
+		category: {
+			validator: $.optional.str
+		},
+
 		url: {
 			validator: $.str
 		},
@@ -46,6 +50,7 @@ export default define(meta, async (ps) => {
 		$set: {
 			updatedAt: new Date(),
 			name: ps.name,
+			category: ps.category,
 			aliases: ps.aliases,
 			url: ps.url,
 			type,

src/server/api/endpoints/meta.ts

@@ -83,6 +83,10 @@ export default define(meta, async (ps, me) => {
 	const emojis = await Emoji.find({ host: null }, {
 		fields: {
 			_id: false
+		},
+		sort: {
+			category: 1,
+			name: 1
 		}
 	});