Merge remote-tracking branch 'upstream/master'

src/client/components/autocomplete.vue

@@ -35,6 +35,7 @@ import { twemojiSvgBase } from '@/misc/twemoji-base';
 import { getStaticImageUrl } from '@client/scripts/get-static-image-url';
 import { acct } from '@client/filters/user';
 import * as os from '@client/os';
+import { instance } from '@client/instance';
 
 type EmojiDef = {
 	emoji: string;
@@ -75,6 +76,36 @@ for (const x of lib) {
 
 emjdb.sort((a, b) => a.name.length - b.name.length);
 
+//#region Construct Emoji DB
+const customEmojis = instance.emojis;
+const emojiDefinitions: EmojiDef[] = [];
+
+for (const x of customEmojis) {
+	emojiDefinitions.push({
+		name: x.name,
+		emoji: `:${x.name}:`,
+		url: x.url,
+		isCustomEmoji: true
+	});
+
+	if (x.aliases) {
+		for (const alias of x.aliases) {
+			emojiDefinitions.push({
+				name: alias,
+				aliasOf: x.name,
+				emoji: `:${x.name}:`,
+				url: x.url,
+				isCustomEmoji: true
+			});
+		}
+	}
+}
+
+emojiDefinitions.sort((a, b) => a.name.length - b.name.length);
+
+const emojiDb = markRaw(emojiDefinitions.concat(emjdb));
+//#endregion
+
 export default defineComponent({
 	props: {
 		type: {
@@ -124,7 +155,6 @@ export default defineComponent({
 			emojis: [],
 			items: [],
 			select: -1,
-			emojiDb: [] as EmojiDef[]
 		}
 	},
 
@@ -144,36 +174,6 @@ export default defineComponent({
 	mounted() {
 		this.setPosition();
 
-		//#region Construct Emoji DB
-		const customEmojis = this.$instance.emojis;
-		const emojiDefinitions: EmojiDef[] = [];
-
-		for (const x of customEmojis) {
-			emojiDefinitions.push({
-				name: x.name,
-				emoji: `:${x.name}:`,
-				url: x.url,
-				isCustomEmoji: true
-			});
-
-			if (x.aliases) {
-				for (const alias of x.aliases) {
-					emojiDefinitions.push({
-						name: alias,
-						aliasOf: x.name,
-						emoji: `:${x.name}:`,
-						url: x.url,
-						isCustomEmoji: true
-					});
-				}
-			}
-		}
-
-		emojiDefinitions.sort((a, b) => a.name.length - b.name.length);
-
-		this.emojiDb = markRaw(emojiDefinitions.concat(emjdb));
-		//#endregion
-
 		this.textarea.addEventListener('keydown', this.onKeydown);
 
 		for (const el of Array.from(document.querySelectorAll('body *'))) {
@@ -203,6 +203,13 @@ export default defineComponent({
 		complete(type, value) {
 			this.$emit('done', { type, value });
 			this.$emit('closed');
+
+			if (type === 'emoji') {
+				let recents = this.$store.state.recentlyUsedEmojis;
+				recents = recents.filter((e: any) => e !== value);
+				recents.unshift(value);
+				this.$store.set('recentlyUsedEmojis', recents.splice(0, 32));
+			}
 		},
 
 		setPosition() {
@@ -281,29 +288,26 @@ export default defineComponent({
 				}
 			} else if (this.type == 'emoji') {
 				if (this.q == null || this.q == '') {
-					this.emojis = this.emojiDb.filter(x => x.isCustomEmoji && !x.aliasOf).sort((a, b) => {
-						var textA = a.name.toUpperCase();
-						var textB = b.name.toUpperCase();
-						return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
-					});
+					// 最近使った絵文字をサジェスト
+					this.emojis = this.$store.state.recentlyUsedEmojis.map(emoji => emojiDb.find(e => e.emoji == emoji)).filter(x => x != null);
 					return;
 				}
 
 				const matched = [];
 				const max = 30;
 
-				this.emojiDb.some(x => {
+				emojiDb.some(x => {
 					if (x.name.startsWith(this.q) && !x.aliasOf && !matched.some(y => y.emoji == x.emoji)) matched.push(x);
 					return matched.length == max;
 				});
 				if (matched.length < max) {
-					this.emojiDb.some(x => {
+					emojiDb.some(x => {
 						if (x.name.startsWith(this.q) && !matched.some(y => y.emoji == x.emoji)) matched.push(x);
 						return matched.length == max;
 					});
 				}
 				if (matched.length < max) {
-					this.emojiDb.some(x => {
+					emojiDb.some(x => {
 						if (x.name.includes(this.q) && !matched.some(y => y.emoji == x.emoji)) matched.push(x);
 						return matched.length == max;
 					});

src/client/init.ts

@@ -16,7 +16,7 @@ import { router } from '@client/router';
 import { applyTheme } from '@client/scripts/theme';
 import { isDeviceDarkmode } from '@client/scripts/is-device-darkmode';
 import { i18n } from '@client/i18n';
-import { stream, dialog, post } from '@client/os';
+import { stream, dialog, post, popup } from '@client/os';
 import * as sound from '@client/scripts/sound';
 import { $i, refreshAccount, login, updateAccount, signout } from '@client/account';
 import { defaultStore, ColdDeviceStorage } from '@client/store';
@@ -198,6 +198,19 @@ if (splash) {
 	splash.style.pointerEvents = 'none';
 }
 
+// クライアントが更新されたか？
+const lastVersion = localStorage.getItem('lastVersion');
+if (lastVersion !== version) {
+	localStorage.setItem('lastVersion', version);
+
+	// テーマリビルドするため
+	localStorage.removeItem('theme');
+
+	// TODO: バージョンが新しくなった時だけダイアログ出す
+	//popup();
+}
+
+// NOTE: この処理は必ず↑のクライアント更新時処理より後に来ること(テーマ再構築のため)
 watch(defaultStore.reactiveState.darkMode, (darkMode) => {
 	applyTheme(darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme'));
 }, { immediate: localStorage.theme == null });

src/client/pages/about-misskey.vue

@@ -4,14 +4,14 @@
 		<div id="debug"></div>
 		<section class="_formItem about">
 			<div class="_formPanel panel" :class="{ playing: easterEggEngine != null }" ref="about">
-				<img src="/static-assets/client/about-icon.png" alt="" class="icon" ref="icon" @load="iconLoaded" draggable="false"/>
+				<img src="/static-assets/client/about-icon.png" alt="" class="icon" @load="iconLoaded" draggable="false" @click="gravity"/>
 				<div class="misskey">Honisskey (Forked from Misskey)</div>
 				<div class="version">v{{ version }}</div>
 				<span class="emoji" v-for="emoji in easterEggEmojis" :key="emoji.id" :data-physics-x="emoji.left" :data-physics-y="emoji.top" :class="{ _physics_circle_: !emoji.emoji.startsWith(':') }"><MkEmoji class="emoji" :emoji="emoji.emoji" :custom-emojis="$instance.emojis" :is-reaction="false" :normal="true" :no-style="true"/></span>
 			</div>
 		</section>
-		<section class="_formItem" style="text-align: center; padding: 0 16px;" @click="gravity">
-			{{ $ts._aboutMisskey.about }}
+		<section class="_formItem" style="text-align: center; padding: 0 16px;">
+			{{ $ts._aboutMisskey.about }}<br><MkA class="_link" to="/docs/general/misskey">{{ $ts.learnMore }}</MkA>
 		</section>
 		<FormGroup>
 			<FormLink to="https://github.com/ThinaticSystem/honisskey" external>
@@ -54,7 +54,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import VanillaTilt from 'vanilla-tilt';
 import { version } from '@client/config';
 import FormLink from '@client/components/form/link.vue';
 import FormBase from '@client/components/form/base.vue';
@@ -62,7 +61,6 @@ import FormGroup from '@client/components/form/group.vue';
 import FormKeyValueView from '@client/components/form/key-value-view.vue';
 import MkLink from '@client/components/link.vue';
 import { physics } from '@client/scripts/physics.ts';
-import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 
 const patrons = [
@@ -145,15 +143,6 @@ export default defineComponent({
 		}
 	},
 
-	mounted() {
-		VanillaTilt.init(this.$refs.icon, {
-			max: 30,
-			perspective: 500,
-			scale: 1.125,
-			speed: 1000,
-		});
-	},
-
 	beforeUnmount() {
 		if (this.easterEggEngine) {
 			this.easterEggEngine.stop();
@@ -181,7 +170,6 @@ export default defineComponent({
 		gravity() {
 			if (!this.easterEggReady) return;
 			this.easterEggReady = false;
-			this.$refs.icon.vanillaTilt.destroy();
 			this.easterEggEngine = physics(this.$refs.about);
 		}
 	}