[Client] Some performance optimizations

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

@@ -37,6 +37,8 @@
 import Vue from 'vue';
 import i18n from '../../../i18n';
 import { lib } from 'emojilib';
+import { faAsterisk, faLeaf, faUtensils, faFutbol, faCity, faDice } from '@fortawesome/free-solid-svg-icons';
+import { faHeart, faFlag } from '@fortawesome/free-regular-svg-icons';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/emoji-picker.vue'),
@@ -48,7 +50,7 @@ export default Vue.extend({
 			categories: [{
 				ref: 'customEmojiSection',
 				text: this.$t('custom-emoji'),
-				icon: ['fas', 'asterisk'],
+				icon: faAsterisk,
 				isActive: true
 			}, {
 				name: 'people',
@@ -60,43 +62,43 @@ export default Vue.extend({
 				name: 'animals_and_nature',
 				ref: 'animalsAndNatureSection',
 				text: this.$t('animals-and-nature'),
-				icon: ['fas', 'leaf'],
+				icon: faLeaf,
 				isActive: false
 			}, {
 				name: 'food_and_drink',
 				ref: 'foodAndDrinkSection',
 				text: this.$t('food-and-drink'),
-				icon: ['fas', 'utensils'],
+				icon: faUtensils,
 				isActive: false
 			}, {
 				name: 'activity',
 				ref: 'activitySection',
 				text: this.$t('activity'),
-				icon: ['fas', 'futbol'],
+				icon: faFutbol,
 				isActive: false
 			}, {
 				name: 'travel_and_places',
 				ref: 'travelAndPlacesSection',
 				text: this.$t('travel-and-places'),
-				icon: ['fas', 'city'],
+				icon: faCity,
 				isActive: false
 			}, {
 				name: 'objects',
 				ref: 'objectsSection',
 				text: this.$t('objects'),
-				icon: ['fas', 'poo-storm'],
+				icon: faDice,
 				isActive: false
 			}, {
 				name: 'symbols',
 				ref: 'symbolsSection',
 				text: this.$t('symbols'),
-				icon: ['far', 'heart'],
+				icon: faHeart,
 				isActive: false
 			}, {
 				name: 'flags',
 				ref: 'flagsSection',
 				text: this.$t('flags'),
-				icon: ['far', 'flag'],
+				icon: faFlag,
 				isActive: false
 			}]
 		}

src/client/app/common/views/widgets/server.memory.vue

@@ -2,7 +2,7 @@
 <div class="memory">
 	<x-pie class="pie" :value="usage"/>
 	<div>
-		<p><fa icon="flask"/>Memory</p>
+		<p><fa icon="memory"/>Memory</p>
 		<p>Total: {{ total | bytes(1) }}</p>
 		<p>Used: {{ used | bytes(1) }}</p>
 		<p>Free: {{ free | bytes(1) }}</p>

src/client/app/desktop/views/components/post-form.vue

@@ -41,7 +41,7 @@
 	<button class="drive" :title="$t('attach-media-from-drive')" @click="chooseFileFromDrive"><fa icon="cloud"/></button>
 	<button class="kao" :title="$t('insert-a-kao')" @click="kao"><fa :icon="['far', 'smile']"/></button>
 	<button class="poll" :title="$t('create-poll')" @click="poll = !poll"><fa icon="chart-pie"/></button>
-	<button class="cw" :title="$t('hide-contents')" @click="useCw = !useCw"><fa icon="eye-slash"/></button>
+	<button class="cw" :title="$t('hide-contents')" @click="useCw = !useCw"><fa :icon="['far', 'eye-slash']"/></button>
 	<button class="geo" :title="$t('attach-location-information')" @click="geo ? removeGeo() : setGeo()"><fa icon="map-marker-alt"/></button>
 	<button class="visibility" :title="$t('visibility')" @click="setVisibility" ref="visibilityButton">
 		<span v-if="visibility === 'public'"><fa icon="globe"/></span>

src/client/app/desktop/views/pages/user/user.profile.vue

@@ -11,7 +11,7 @@
 	<div class="action-form">
 		<ui-button @click="user.isMuted ? unmute() : mute()" v-if="$store.state.i.id != user.id">
 			<span v-if="user.isMuted"><fa icon="eye"/> {{ $t('unmute') }}</span>
-			<span v-else><fa icon="eye-slash"/> {{ $t('mute') }}</span>
+			<span v-else><fa :icon="['far', 'eye-slash']"/> {{ $t('mute') }}</span>
 		</ui-button>
 		<ui-button @click="user.isBlocking ? unblock() : block()" v-if="$store.state.i.id != user.id">
 			<span v-if="user.isBlocking"><fa icon="user"/> {{ $t('unblock') }}</span>

src/client/app/desktop/views/pages/user/user.timeline.vue

@@ -3,7 +3,7 @@
 	<header>
 		<span :data-active="mode == 'default'" @click="mode = 'default'"><fa :icon="['far', 'comment-alt']"/> {{ $t('default') }}</span>
 		<span :data-active="mode == 'with-replies'" @click="mode = 'with-replies'"><fa icon="comments"/> {{ $t('with-replies') }}</span>
-		<span :data-active="mode == 'with-media'" @click="mode = 'with-media'"><fa icon="images"/> {{ $t('with-media') }}</span>
+		<span :data-active="mode == 'with-media'" @click="mode = 'with-media'"><fa :icon="['far', 'images']"/> {{ $t('with-media') }}</span>
 	</header>
 	<mk-notes ref="timeline" :more="existMore ? more : null">
 		<p class="empty" slot="empty"><fa :icon="['far', 'comments']"/>{{ $t('empty') }}</p>

src/client/app/desktop/views/pages/welcome.vue

@@ -50,7 +50,7 @@
 			</div>
 
 			<div class="photos block">
-				<header><fa icon="images"/> {{ $t('photos') }}</header>
+				<header><fa :icon="['far', 'images']"/> {{ $t('photos') }}</header>
 				<div>
 					<div v-for="photo in photos" :style="`background-image: url(${photo.thumbnailUrl})`"></div>
 				</div>

src/client/app/init.ts

@@ -25,47 +25,112 @@ if (localStorage.getItem('theme') == null) {
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
-/* なぜか動かない
-import faRetweet from '@fortawesome/free-solid-svg-icons/faRetweet';
-import faPlus from '@fortawesome/free-solid-svg-icons/faPlus';
-import faUser from '@fortawesome/free-solid-svg-icons/faUser';
-import faCog from '@fortawesome/free-solid-svg-icons/faCog';
-import faCheck from '@fortawesome/free-solid-svg-icons/faCheck';
-import faStar from '@fortawesome/free-solid-svg-icons/faStar';
-import faReply from '@fortawesome/free-solid-svg-icons/faReply';
-import faEllipsisH from '@fortawesome/free-solid-svg-icons/faEllipsisH';
-import faQuoteLeft from '@fortawesome/free-solid-svg-icons/faQuoteLeft';
-import faQuoteRight from '@fortawesome/free-solid-svg-icons/faQuoteRight';
-import faAngleUp from '@fortawesome/free-solid-svg-icons/faAngleUp';
-import faAngleDown from '@fortawesome/free-solid-svg-icons/faAngleDown';
-import faAt from '@fortawesome/free-solid-svg-icons/faAt';
-import faHashtag from '@fortawesome/free-solid-svg-icons/faHashtag';
-import faHome from '@fortawesome/free-solid-svg-icons/faHome';
-import faGlobe from '@fortawesome/free-solid-svg-icons/faGlobe';
-import faCircle from '@fortawesome/free-solid-svg-icons/faCircle';
-import faList from '@fortawesome/free-solid-svg-icons/faList';
-import faHeart from '@fortawesome/free-solid-svg-icons/faHeart';
-import faUnlock from '@fortawesome/free-solid-svg-icons/faUnlock';
-import faRssSquare from '@fortawesome/free-solid-svg-icons/faRssSquare';
-import faSort from '@fortawesome/free-solid-svg-icons/faSort';
-import faChartPie from '@fortawesome/free-solid-svg-icons/faChartPie';
-import faChartBar from '@fortawesome/free-solid-svg-icons/faChartBar';
-import faPencilAlt from '@fortawesome/free-solid-svg-icons/faPencilAlt';
-import faColumns from '@fortawesome/free-solid-svg-icons/faColumns';
-import faComments from '@fortawesome/free-solid-svg-icons/faComments';
-import faGamepad from '@fortawesome/free-solid-svg-icons/faGamepad';
-import faCloud from '@fortawesome/free-solid-svg-icons/faCloud';
-import faPowerOff from '@fortawesome/free-solid-svg-icons/faPowerOff';
-import faChevronCircleLeft from '@fortawesome/free-solid-svg-icons/faChevronCircleLeft';
-import faChevronCircleRight from '@fortawesome/free-solid-svg-icons/faChevronCircleRight';
-import faShareAlt from '@fortawesome/free-solid-svg-icons/faShareAlt';
-import faTimes from '@fortawesome/free-solid-svg-icons/faTimes';
-import faThumbtack from '@fortawesome/free-solid-svg-icons/faThumbtack';
-import faSearch from '@fortawesome/free-solid-svg-icons/faSearch';
+import {
+	faRetweet,
+	faPlus,
+	faUser,
+	faCog,
+	faCheck,
+	faStar,
+	faReply,
+	faEllipsisH,
+	faQuoteLeft,
+	faQuoteRight,
+	faAngleUp,
+	faAngleDown,
+	faAt,
+	faHashtag,
+	faHome,
+	faGlobe,
+	faCircle,
+	faList,
+	faHeart,
+	faUnlock,
+	faRssSquare,
+	faSort,
+	faChartPie,
+	faChartBar,
+	faPencilAlt,
+	faColumns,
+	faComments,
+	faGamepad,
+	faCloud,
+	faPowerOff,
+	faChevronCircleLeft,
+	faChevronCircleRight,
+	faShareAlt,
+	faTimes,
+	faThumbtack,
+	faSearch,
+	faAngleRight,
+	faWrench,
+	faTerminal,
+	faMoon,
+	faPalette,
+	faSlidersH,
+	faDesktop,
+	faVolumeUp,
+	faLanguage,
+	faInfoCircle,
+	faExclamationTriangle,
+	faKey,
+	faBan,
+	faCogs,
+	faUnlockAlt,
+	faPuzzlePiece,
+	faMobileAlt,
+	faSignInAlt,
+	faSyncAlt,
+	faPaperPlane,
+	faUpload,
+	faMapMarkerAlt,
+	faEnvelope,
+	faLock,
+	faFolderOpen,
+	faBirthdayCake,
+	faImage,
+	faEye,
+	faDownload,
+	faFileImport,
+	faLink,
+	faArrowRight,
+	faICursor,
+	faCaretRight,
+	faReplyAll,
+	faCamera,
+	faMinus,
+	faCaretDown,
+	faCalculator,
+	faUsers,
+	faBars,
+	faFileImage,
+	faPollH,
+	faFolder,
+	faMicrochip,
+	faMemory,
+	faServer,
+	faExclamationCircle,
+} from '@fortawesome/free-solid-svg-icons';
 
-import farBell from '@fortawesome/free-regular-svg-icons/faBell';
-import farEnvelope from '@fortawesome/free-regular-svg-icons/faEnvelope';
-import farComments from '@fortawesome/free-regular-svg-icons/faComments';
+import {
+	faBell as farBell,
+	faEnvelope as farEnvelope,
+	faComments as farComments,
+	faTrashAlt as farTrashAlt,
+	faWindowRestore as farWindowRestore,
+	faFolder as farFolder,
+	faLaugh as farLaugh,
+	faSmile as farSmile,
+	faEyeSlash as farEyeSlash,
+	faFolderOpen as farFolderOpen,
+	faSave as farSave,
+	faImages as farImages,
+	faChartBar as farChartBar,
+	faCommentAlt as farCommentAlt,
+	faClock as farClock,
+	faCalendarAlt as farCalendarAlt,
+	faHdd as farHdd,
+} from '@fortawesome/free-regular-svg-icons';
 
 library.add(
 	faRetweet,
@@ -104,16 +169,73 @@ library.add(
 	faTimes,
 	faThumbtack,
 	faSearch,
+	faAngleRight,
+	faWrench,
+	faTerminal,
+	faMoon,
+	faPalette,
+	faSlidersH,
+	faDesktop,
+	faVolumeUp,
+	faLanguage,
+	faInfoCircle,
+	faExclamationTriangle,
+	faKey,
+	faBan,
+	faCogs,
+	faUnlockAlt,
+	faPuzzlePiece,
+	faMobileAlt,
+	faSignInAlt,
+	faSyncAlt,
+	faPaperPlane,
+	faUpload,
+	faMapMarkerAlt,
+	faEnvelope,
+	faLock,
+	faFolderOpen,
+	faBirthdayCake,
+	faImage,
+	faEye,
+	faDownload,
+	faFileImport,
+	faLink,
+	faArrowRight,
+	faICursor,
+	faCaretRight,
+	faReplyAll,
+	faCamera,
+	faMinus,
+	faCaretDown,
+	faCalculator,
+	faUsers,
+	faBars,
+	faFileImage,
+	faPollH,
+	faFolder,
+	faMicrochip,
+	faMemory,
+	faServer,
+	faExclamationCircle,
+
 	farBell,
 	farEnvelope,
 	farComments,
+	farTrashAlt,
+	farWindowRestore,
+	farFolder,
+	farLaugh,
+	farSmile,
+	farEyeSlash,
+	farFolderOpen,
+	farSave,
+	farImages,
+	farChartBar,
+	farCommentAlt,
+	farClock,
+	farCalendarAlt,
+	farHdd,
 );
-*/
-
-import { fas } from '@fortawesome/free-solid-svg-icons';
-import { far } from '@fortawesome/free-regular-svg-icons';
-
-library.add(fas, far);
 //#endregion
 
 Vue.use(Vuex);

src/client/app/mobile/views/components/drive.file-detail.vue

@@ -31,7 +31,7 @@
 			<span class="created-at" @click="showCreatedAt"><fa :icon="['far', 'clock']"/><mk-time :time="file.createdAt"/></span>
 			<template v-if="file.isSensitive">
 				<span class="separator"></span>
-				<span class="nsfw"><fa icon="eye-slash"/> {{ $t('nsfw') }}</span>
+				<span class="nsfw"><fa :icon="['far', 'eye-slash']"/> {{ $t('nsfw') }}</span>
 			</template>
 		</div>
 	</div>

src/client/app/mobile/views/components/drive.file.vue

@@ -15,7 +15,7 @@
 				<span class="created-at"><fa :icon="['far', 'clock']"/><mk-time :time="file.createdAt"/></span>
 				<template v-if="file.isSensitive">
 					<span class="separator"></span>
-					<span class="nsfw"><fa icon="eye-slash"/> {{ $t('nsfw') }}</span>
+					<span class="nsfw"><fa :icon="['far', 'eye-slash']"/> {{ $t('nsfw') }}</span>
 				</template>
 			</footer>
 		</div>

src/client/app/mobile/views/components/drive.folder.vue

@@ -51,8 +51,6 @@ export default Vue.extend({
 			top 0
 			bottom 0
 			right 20px
-
-			> *
-				height 100%
+			height 100%
 
 </style>

src/client/app/mobile/views/components/post-form.vue

@@ -32,7 +32,7 @@
 				<button class="drive" @click="chooseFileFromDrive"><fa icon="cloud"/></button>
 				<button class="kao" @click="kao"><fa :icon="['far', 'smile']"/></button>
 				<button class="poll" @click="poll = true"><fa icon="chart-pie"/></button>
-				<button class="poll" @click="useCw = !useCw"><fa icon="eye-slash"/></button>
+				<button class="poll" @click="useCw = !useCw"><fa :icon="['far', 'eye-slash']"/></button>
 				<button class="geo" @click="geo ? removeGeo() : setGeo()"><fa icon="map-marker-alt"/></button>
 				<button class="visibility" @click="setVisibility" ref="visibilityButton">
 					<span v-if="visibility === 'public'"><fa icon="globe"/></span>

src/client/app/mobile/views/pages/user.vue

@@ -116,7 +116,7 @@ export default Vue.extend({
 
 		menu() {
 			let menu = [{
-				icon: this.user.isMuted ? '<fa icon="eye"/>' : '<fa icon="eye-slash"/>',
+				icon: this.user.isMuted ? ['fas', 'eye'] : ['far', 'eye-slash'],
 				text: this.user.isMuted ? this.$t('unmute') : this.$t('mute'),
 				action: () => {
 					if (this.user.isMuted) {
@@ -138,7 +138,7 @@ export default Vue.extend({
 					}
 				}
 			}, {
-				icon: this.user.isBlocking ? '<fa icon="user"/>' : '<fa icon="user-slash"/>',
+				icon: this.user.isBlocking ? ['fas', 'user'] : ['fas', 'user-slash'],
 				text: this.user.isBlocking ? this.$t('unblock') : this.$t('block'),
 				action: () => {
 					if (this.user.isBlocking) {