feat(client): Misskey更新時にダイアログを表示するように

CHANGELOG.md

@@ -7,6 +7,13 @@
 
 -->
 
+## 12.x.x (unreleased)
+
+### Improvements
+- Misskey更新時にダイアログを表示するように
+
+### Bugfixes
+
 ## 12.87.0 (2021/08/12)
 
 ### Improvements

locales/ja-JP.yml

@@ -773,6 +773,8 @@ hashtags: "ハッシュタグ"
 troubleshooting: "トラブルシューティング"
 useBlurEffect: "UIにぼかし効果を使用"
 learnMore: "詳しく"
+misskeyUpdated: "Misskeyが更新されました！"
+whatIsNew: "更新情報を見る"
 
 _docs: 
   continueReading: "続きを読む"

package.json

@@ -61,9 +61,6 @@
 		"@types/jsonld": "1.5.6",
 		"@types/katex": "0.11.1",
 		"@types/koa": "2.13.4",
-		"@types/koa__cors": "3.0.3",
-		"@types/koa__multer": "2.0.3",
-		"@types/koa__router": "8.0.7",
 		"@types/koa-bodyparser": "4.3.3",
 		"@types/koa-cors": "0.0.2",
 		"@types/koa-favicon": "2.0.21",
@@ -71,6 +68,9 @@
 		"@types/koa-mount": "4.0.0",
 		"@types/koa-send": "4.1.3",
 		"@types/koa-views": "7.0.0",
+		"@types/koa__cors": "3.0.3",
+		"@types/koa__multer": "2.0.3",
+		"@types/koa__router": "8.0.7",
 		"@types/markdown-it": "12.0.3",
 		"@types/matter-js": "0.17.5",
 		"@types/mocha": "8.2.3",
@@ -122,6 +122,7 @@
 		"chart.js": "2.9.4",
 		"cli-highlight": "2.1.11",
 		"commander": "7.2.0",
+		"compare-versions": "3.6.0",
 		"concurrently": "6.2.0",
 		"content-disposition": "0.5.3",
 		"core-js": "3.16.1",

src/client/components/updated.vue

@@ -0,0 +1,58 @@
+<template>
+<MkModal ref="modal" @click="$refs.modal.close()" @closed="$emit('closed')">
+	<div class="ewlycnyt">
+		<div class="title">{{ $ts.misskeyUpdated }}</div>
+		<div class="version">✨{{ version }}🚀</div>
+		<MkButton full @click="whatIsNew">{{ $ts.whatIsNew }}</MkButton>
+		<MkButton primary full @click="$refs.modal.close()">{{ $ts.gotIt }}</MkButton>
+	</div>
+</MkModal>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MkModal from '@client/components/ui/modal.vue';
+import MkButton from '@client/components/ui/button.vue';
+import { version } from '@client/config';
+
+export default defineComponent({
+	components: {
+		MkModal,
+		MkButton,
+	},
+
+	data() {
+		return {
+			version: version,
+		};
+	},
+
+	methods: {
+		whatIsNew() {
+			this.$refs.modal.close();
+			this.$router.push('/docs/general/changelog');
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.ewlycnyt {
+	position: relative;
+	padding: 32px;
+	min-width: 320px;
+	max-width: 480px;
+	box-sizing: border-box;
+	text-align: center;
+	background: var(--panel);
+	border-radius: var(--radius);
+
+	> .title {
+		font-weight: bold;
+	}
+
+	> .version {
+		margin: 1em 0;
+	}
+}
+</style>

src/client/init.ts

@@ -7,6 +7,7 @@ import '@client/style.scss';
 import * as Sentry from '@sentry/browser';
 import { Integrations } from '@sentry/tracing';
 import { computed, createApp, watch, markRaw } from 'vue';
+import compareVersions from 'compare-versions';
 
 import widgets from '@client/widgets';
 import directives from '@client/directives';
@@ -206,8 +207,9 @@ if (lastVersion !== version) {
 	// テーマリビルドするため
 	localStorage.removeItem('theme');
 
-	// TODO: バージョンが新しくなった時だけダイアログ出す
-	//popup();
+	if (lastVersion != null && compareVersions(version, lastVersion) === 1) {
+		popup(import('@client/components/updated.vue'), {}, {}, 'closed');
+	}
 }
 
 // NOTE: この処理は必ず↑のクライアント更新時処理より後に来ること(テーマ再構築のため)

yarn.lock

@@ -3364,6 +3364,11 @@ commondir@^1.0.1:
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
   integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
 
+compare-versions@3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-3.6.0.tgz#1a5689913685e5a87637b8d3ffca75514ec41d62"
+  integrity sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==
+
 component-emitter@^1.2.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"