Migrate to Vue3 (#6587)

* Update reaction.vue

* fix  bug

* wip

* wip

* wjio

* wip

* Revert "wip"

This reverts commit e427f2160adf4e8a4147006e25a89854edab0033.

* wip

* wip

* wip

* Update init.ts

* Update drive-window.vue

* wip

* wip

* Use PascalCase for components

* Use PascalCase for components

* update dep

* wip

* wip

* wip

* Update init.ts

* wip

* Update paging.ts

* Update test.vue

* watch deep

* wip

* lint

* wip

* wip

* wip

* wip

* wiop

* wip

* Update webpack.config.ts

* alllow null poll

* wip

* wip

* wip

* wiop

* UI redesign & refactor (#6714)

* wip

* wip

* wip

* wip

* wip

* Update drive.vue

* Update word-mute.vue

* wip

* wip

* wip

* clean up

* wip

* Update default.vue

* wip

* Update notes.vue

* Update mfm.ts

* Update index.home.vue

* Update post-form.vue

* Update post-form-attaches.vue

* wip

* Update post-form.vue

* Update sidebar.vue

* wip

* wip

* Update index.vue

* wip

* Update default.vue

* Update index.vue

* Update index.vue

* wip

* Update post-form-attaches.vue

* Update note.vue

* wip

* clean up

* Update notes.vue

* wip

* wip

* Update ja-JP.yml

* wip

* wip

* Update index.vue

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update default.vue

* wip

* Update _dark.json5

* wip

* wip

* wip

* clean up

* wip

* wip

* Update index.vue

* Update test.vue

* wip

* wip

* fix

* wip

* wip

* wip

* wip

* clena yop

* wip

* wip

* Update store.ts

* Update messaging-room.vue

* Update default.widgets.vue

* fix

* wip

* wip

* Update modal.vue

* wip

* Update os.ts

* Update os.ts

* Update deck.vue

* Update init.ts

* wip

* Update ja-JP.yml

* v-sizeは単にwindowのresizeを監視するだけで良いかもしれない

* Update modal.vue

* wip

* Update tooltip.ts

* wip

* wip

* wip

* wip

* wip

* Update image-viewer.vue

* wip

* wip

* Update style.scss

* Update style.scss

* Update visitor.vue

* wip

* Update init.ts

* Update init.ts

* wip

* wip

* Update visitor.vue

* Update visitor.vue

* Update visitor.vue

* Update visitor.vue

* wip

* wip

* Update modal.vue

* Update header.vue

* Update menu.vue

* Update about.vue

* Update about-misskey.vue

* wip

* wip

* Update visitor.vue

* Update tooltip.ts

* wip

* Update drive.vue

* wip

* Update style.scss

* Update header.vue

* wip

* wip

* Update users.user.vue

* Update announcements.vue

* wip

* wip

* wip

* Update emojis.vue

* wip

* Update emojis.vue

* Update style.scss

* Update users.vue

* wip

* Update style.scss

* wip

* Update welcome.entrance.vue

* Update radio.vue

* Update size.ts

* Update emoji-edit-dialog.vue

* wip

* Update emojis.vue

* wip

* Update emojis.vue

* Update emojis.vue

* Update emojis.vue

* wip

* wip

* wip

* wip

* Update file-dialog.vue

* wip

* wip

* Update token-generate-window.vue

* Update notification-setting-window.vue

* wip

* wip

* Update _error_.vue

* Update ja-JP.yml

* wip

* wip

* Update store.ts

* Update emojis.vue

* Update emojis.vue

* Update emojis.vue

* Update announcements.vue

* Update store.ts

* wip

* Update page-editor.vue

* wip

* wip

* Update modal.vue

* wip

* Update select-file.ts

* Update timeline.vue

* Update emojis.vue

* Update os.ts

* wip

* Update user-select.vue

* Update mfm.ts

* Update get-file-info.ts

* Update drive.vue

* Update init.ts

* Update mfm.ts

* wip

* wip

* Update window.vue

* Update note.vue

* wip

* wip

* Update user-info.vue

* wip

* wip

* wip

* wip

* wip

* Update header.vue

* Update header.vue

* wip

* Update explore.vue

* wip

* wip

* wip

* Update webpack.config.ts

* wip

* wip

* wip

* wip

* wip

* wip

* Update autocomplete.ts

* wip

* wip

* wip

* Update toast.vue

* wip

* Update post-form-dialog.vue

* wip

* wip

* wip

* wip

* wip

* Update users.vue

* wip

* Update explore.vue

* wip

* wip

* wip

* Update package.json

* wip

* Update icon-dialog.vue

* wip

* wip

* Update user-preview.ts

* wip

* wip

* wip

* wip

* wip

* Update instance.vue

* Update user-name.vue

* Update federation.vue

* Update instance.vue

* wip

* wip

* Update tag.vue

* wip

* wip

* wip

* wip

* wip

* Update instance.vue

* wip

* Update os.ts

* Update os.ts

* wip

* wip

* wip

* Update router.ts

* wip

* Update init.ts

* Update note.vue

* Update messages.vue

* wip

* wip

* wip

* wip

* wip

* google

* wip

* wip

* wip

* wip

* Update theme-editor.vue

* wip

* wip

* Update room.vue

* Update channel-editor.vue

* wip

* Update window.vue

* Update window.vue

* wip

* Update window.vue

* Update window.vue

* wip

* Update menu.vue

* wip

* wip

* wip

* wip

* Update messaging-room.vue

* wip

* Update post-form.vue

* Update default.widgets.vue

* Update window.vue

* wip

src/client/pages/instance/emojis.vue

@@ -1,80 +1,67 @@
 <template>
 <div class="mk-instance-emojis">
-	<portal to="icon"><fa :icon="faLaugh"/></portal>
-	<portal to="title">{{ $t('customEmojis') }}</portal>
+	<div class="_section" style="padding: 0;">
+		<MkTab v-model:value="tab" :items="[{ label: $t('local'), value: 'local' }, { label: $t('remote'), value: 'remote' }]"/>
+	</div>
 
-	<section class="_card _vMargin local">
-		<div class="_title"><fa :icon="faLaugh"/> {{ $t('customEmojis') }}</div>
-		<div class="_content">
-			<mk-pagination :pagination="pagination" class="emojis" ref="emojis">
+	<div class="_section">
+		<div class="_content local" v-if="tab === 'local'">
+			<MkButton primary @click="add" style="margin: 0 auto var(--margin) auto;"><Fa :icon="faPlus"/> {{ $t('addEmoji') }}</MkButton>
+			<MkInput v-model:value="query" :debounce="true" type="search"><template #icon><Fa :icon="faSearch"/></template><span>{{ $t('search') }}</span></MkInput>
+			<MkPagination :pagination="pagination" ref="emojis">
 				<template #empty><span>{{ $t('noCustomEmojis') }}</span></template>
 				<template #default="{items}">
-					<div class="emoji" v-for="(emoji, i) in items" :key="emoji.id" @click="selected = emoji" :class="{ selected: selected && (selected.id === emoji.id) }">
-						<img :src="emoji.url" class="img" :alt="emoji.name"/>
-						<div class="body">
-							<span class="name">{{ emoji.name }}</span>
-							<span class="info">
-								<b class="category">{{ emoji.category }}</b>
-								<span class="aliases">{{ emoji.aliases.join(' ') }}</span>
-							</span>
+					<div class="emojis">
+						<button class="emoji _panel _button" v-for="emoji in items" :key="emoji.id" @click="edit(emoji)">
+							<img :src="emoji.url" class="img" :alt="emoji.name"/>
+							<div class="body">
+								<span class="name">{{ emoji.name }}</span>
+								<span class="info">
+									<span class="category">{{ emoji.category }}</span>
+								</span>
+							</div>
+						</button>
+					</div>
+				</template>
+			</MkPagination>
+		</div>
+
+		<div class="_content remote" v-else-if="tab === 'remote'">
+			<MkInput v-model:value="queryRemote" :debounce="true" type="search"><template #icon><Fa :icon="faSearch"/></template><span>{{ $t('search') }}</span></MkInput>
+			<MkInput v-model:value="host" :debounce="true"><span>{{ $t('host') }}</span></MkInput>
+			<MkPagination :pagination="remotePagination" ref="remoteEmojis">
+				<template #empty><span>{{ $t('noCustomEmojis') }}</span></template>
+				<template #default="{items}">
+					<div class="emojis">
+						<div class="emoji _panel _button" v-for="emoji in items" :key="emoji.id" @click="remoteMenu(emoji, $event)">
+							<img :src="emoji.url" class="img" :alt="emoji.name"/>
+							<div class="body">
+								<span class="name">{{ emoji.name }}</span>
+								<span class="info">{{ emoji.host }}</span>
+							</div>
 						</div>
 					</div>
 				</template>
-			</mk-pagination>
+			</MkPagination>
 		</div>
-		<div class="_content" v-if="selected">
-			<mk-input v-model="name"><span>{{ $t('name') }}</span></mk-input>
-			<mk-input v-model="category" :datalist="categories"><span>{{ $t('category') }}</span></mk-input>
-			<mk-input v-model="aliases"><span>{{ $t('tags') }}</span></mk-input>
-			<mk-button inline primary @click="update"><fa :icon="faSave"/> {{ $t('save') }}</mk-button>
-			<mk-button inline :disabled="selected == null" @click="del()"><fa :icon="faTrashAlt"/> {{ $t('delete') }}</mk-button>
-		</div>
-		<div class="_footer">
-			<mk-button inline primary @click="add"><fa :icon="faPlus"/> {{ $t('addEmoji') }}</mk-button>
-		</div>
-	</section>
-	<section class="_card _vMargin remote">
-		<div class="_title"><fa :icon="faLaugh"/> {{ $t('customEmojisOfRemote') }}</div>
-		<div class="_content">
-			<mk-input v-model="host" :debounce="true"><span>{{ $t('host') }}</span></mk-input>
-			<mk-pagination :pagination="remotePagination" class="emojis" ref="remoteEmojis">
-				<template #empty><span>{{ $t('noCustomEmojis') }}</span></template>
-				<template #default="{items}">
-					<div class="emoji" v-for="(emoji, i) in items" :key="emoji.id" @click="selectedRemote = emoji" :class="{ selected: selectedRemote && (selectedRemote.id === emoji.id) }">
-						<img :src="emoji.url" class="img" :alt="emoji.name"/>
-						<div class="body">
-							<span class="name">{{ emoji.name }}</span>
-							<span class="info">{{ emoji.host }}</span>
-						</div>
-					</div>
-				</template>
-			</mk-pagination>
-		</div>
-		<div class="_footer">
-			<mk-button inline primary :disabled="selectedRemote == null" @click="im()"><fa :icon="faPlus"/> {{ $t('import') }}</mk-button>
-		</div>
-	</section>
+	</div>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import { faPlus, faSave } from '@fortawesome/free-solid-svg-icons';
+import { computed, defineComponent } from 'vue';
+import { faPlus, faSave, faSearch } from '@fortawesome/free-solid-svg-icons';
 import { faTrashAlt, faLaugh } from '@fortawesome/free-regular-svg-icons';
-import MkButton from '../../components/ui/button.vue';
-import MkInput from '../../components/ui/input.vue';
-import MkPagination from '../../components/ui/pagination.vue';
-import { selectFile } from '../../scripts/select-file';
-import { unique } from '../../../prelude/array';
-
-export default Vue.extend({
-	metaInfo() {
-		return {
-			title: `${this.$t('customEmojis')} | ${this.$t('instance')}`
-		};
-	},
+import MkButton from '@/components/ui/button.vue';
+import MkInput from '@/components/ui/input.vue';
+import MkPagination from '@/components/ui/pagination.vue';
+import MkTab from '@/components/tab.vue';
+import { selectFile } from '@/scripts/select-file';
+import * as os from '@/os';
 
+export default defineComponent({
 	components: {
+		MkTab,
 		MkButton,
 		MkInput,
 		MkPagination,
@@ -82,54 +69,44 @@ export default Vue.extend({
 
 	data() {
 		return {
-			selected: null,
-			selectedRemote: null,
-			name: null,
-			category: null,
-			aliases: null,
+			INFO: {
+				header: [{
+					title: this.$t('customEmojis'),
+					icon: faLaugh
+				}],
+				action: {
+					icon: faPlus,
+					handler: this.add
+				}
+			},
+			tab: 'local',
+			query: null,
+			queryRemote: null,
 			host: '',
 			pagination: {
 				endpoint: 'admin/emoji/list',
-				limit: 10,
+				limit: 15,
+				params: computed(() => ({
+					query: (this.query && this.query !== '') ? this.query : null
+				}))
 			},
 			remotePagination: {
 				endpoint: 'admin/emoji/list-remote',
-				limit: 10,
-				params: () => ({
-					host: this.host ? this.host : null
-				})
+				limit: 15,
+				params: computed(() => ({
+					query: (this.queryRemote && this.queryRemote !== '') ? this.queryRemote : null,
+					host: (this.host && this.host !== '') ? this.host : null
+				}))
 			},
-			faTrashAlt, faPlus, faLaugh, faSave
-		}
-	},
-
-	computed: {
-		categories() {
-			if (this.$store.state.instance.meta) {
-				return unique(this.$store.state.instance.meta.emojis.map((x: any) => x.category || '').filter((x: string) => x !== ''));
-			} else {
-				return [];
-			}
-		}
-	},
-
-	watch: {
-		host() {
-			this.$refs.remoteEmojis.reload();
-		},
-
-		selected() {
-			this.name = this.selected ? this.selected.name : null;
-			this.category = this.selected ? this.selected.category : null;
-			this.aliases = this.selected ? this.selected.aliases.join(' ') : null;
+			faTrashAlt, faPlus, faLaugh, faSave, faSearch,
 		}
 	},
 
 	methods: {
 		async add(e) {
-			const files = await selectFile(this, e.currentTarget || e.target, null, true);
+			const files = await selectFile(e.currentTarget || e.target, null, true);
 
-			const dialog = this.$root.dialog({
+			const dialog = os.dialog({
 				type: 'waiting',
 				text: this.$t('doing') + '...',
 				showOkButton: false,
@@ -137,133 +114,112 @@ export default Vue.extend({
 				cancelableByBgClick: false
 			});
 			
-			Promise.all(files.map(file => this.$root.api('admin/emoji/add', {
+			Promise.all(files.map(file => os.api('admin/emoji/add', {
 				fileId: file.id,
 			})))
 			.then(() => {
 				this.$refs.emojis.reload();
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
+				os.success();
 			})
 			.finally(() => {
-				dialog.close();
+				dialog.cancel();
 			});
 		},
 
-		async update() {
-			await this.$root.api('admin/emoji/update', {
-				id: this.selected.id,
-				name: this.name,
-				category: this.category,
-				aliases: this.aliases.split(' '),
-			});
-
-			this.$root.dialog({
-				type: 'success',
-				iconOnly: true, autoClose: true
-			});
-
-			this.$refs.emojis.reload();
+		async edit(emoji) {
+			os.popup(await import('./emoji-edit-dialog.vue'), {
+				emoji: emoji
+			}, {
+				done: result => {
+					if (result.updated) {
+						this.$refs.emojis.replaceItem(item => item.id === emoji.id, {
+							...emoji,
+							...result.updated
+						});
+					} else if (result.deleted) {
+						this.$refs.emojis.removeItem(item => item.id === emoji.id);
+					}
+				},
+			}, 'closed');
 		},
 
-		async del() {
-			const { canceled } = await this.$root.dialog({
-				type: 'warning',
-				text: this.$t('removeAreYouSure', { x: this.selected.name }),
-				showCancelButton: true
-			});
-			if (canceled) return;
-
-			this.$root.api('admin/emoji/remove', {
-				id: this.selected.id
-			}).then(() => {
-				this.$refs.emojis.reload();
+		im(emoji) {
+			os.apiWithDialog('admin/emoji/copy', {
+				emojiId: emoji.id,
 			});
 		},
 
-		im() {
-			this.$root.api('admin/emoji/copy', {
-				emojiId: this.selectedRemote.id,
-			}).then(() => {
-				this.$refs.emojis.reload();
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
-			}).catch(e => {
-				this.$root.dialog({
-					type: 'error',
-					text: e
-				});
-			});
-		},
+		remoteMenu(emoji, ev) {
+			os.modalMenu([{
+				type: 'label',
+				text: ':' + emoji.name + ':',
+			}, {
+				text: this.$t('import'),
+				icon: faPlus,
+				action: () => { this.im(emoji) }
+			}], ev.currentTarget || ev.target);
+		}
 	}
 });
 </script>
 
 <style lang="scss" scoped>
 .mk-instance-emojis {
-	> .local {
-		> ._content {
-			max-height: 300px;
-			overflow: auto;
-			
-			> .emojis {
+	> ._section {
+		> .local {
+			.emojis {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+				grid-gap: var(--margin);
+		
 				> .emoji {
 					display: flex;
 					align-items: center;
+					padding: 12px;
+					text-align: left;
 
-					&.selected {
-						background: var(--accent);
-						box-shadow: 0 0 0 8px var(--accent);
-						color: #fff;
+					&:hover {
+						color: var(--accent);
 					}
 
 					> .img {
-						width: 50px;
-						height: 50px;
+						width: 42px;
+						height: 42px;
 					}
 
 					> .body {
-						padding: 8px;
+						padding: 0 0 0 8px;
+						white-space: nowrap;
+						overflow: hidden;
 
 						> .name {
 							display: block;
+							text-overflow: ellipsis;
+							overflow: hidden;
 						}
 
 						> .info {
 							opacity: 0.5;
-
-							> .category {
-								margin-right: 16px;
-							}
-
-							> .aliases {
-								font-style: oblique;
-							}
 						}
 					}
 				}
 			}
 		}
-	}
 
-	> .remote {
-		> ._content {
-			max-height: 300px;
-			overflow: auto;
-			
-			> .emojis {
+		> .remote {
+			.emojis {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+				grid-gap: var(--margin);
+
 				> .emoji {
 					display: flex;
 					align-items: center;
+					padding: 12px;
+					text-align: left;
 
-					&.selected {
-						background: var(--accent);
-						box-shadow: 0 0 0 8px var(--accent);
-						color: #fff;
+					&:hover {
+						color: var(--accent);
 					}
 
 					> .img {
@@ -272,14 +228,21 @@ export default Vue.extend({
 					}
 
 					> .body {
-						padding: 0 8px;
+						padding: 0 0 0 8px;
+						white-space: nowrap;
+						overflow: hidden;
 
 						> .name {
 							display: block;
+							text-overflow: ellipsis;
+							overflow: hidden;
 						}
 
 						> .info {
 							opacity: 0.5;
+							display: block;
+							text-overflow: ellipsis;
+							overflow: hidden;
 						}
 					}
 				}