enhance(client): サーバーから切断されたときにダイアログで警告を表示できるように

src/client/components/stream-indicator.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="nsbbhtug" v-if="hasDisconnected" @click="resetDisconnected">
+<div class="nsbbhtug" v-if="hasDisconnected && $store.state.device.serverDisconnectedBehavior === 'quiet'" @click="resetDisconnected">
 	<div>{{ $t('disconnectedFromServer') }}</div>
 	<div class="command">
 		<button class="_textButton" @click="reload">{{ $t('reload') }}</button>
@@ -23,21 +23,12 @@ export default Vue.extend({
 		},
 	},
 	created() {
-		this.$root.stream.on('_connected_', this.onConnected);
 		this.$root.stream.on('_disconnected_', this.onDisconnected);
 	},
 	beforeDestroy() {
-		this.$root.stream.off('_connected_', this.onConnected);
 		this.$root.stream.off('_disconnected_', this.onDisconnected);
 	},
 	methods: {
-		onConnected() {
-			if (this.hasDisconnected) {
-				if (this.$store.state.device.autoReload) {
-					this.reload();
-				}
-			}
-		},
 		onDisconnected() {
 			this.hasDisconnected = true;
 		},

src/client/init.ts

@@ -237,6 +237,26 @@ os.init(async () => {
 		document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none');
 	}, { immediate: true });
 
+	let reloadDialogShowing = false;
+	os.stream.on('_disconnected_', async () => {
+		if (store.state.device.serverDisconnectedBehavior === 'reload') {
+			location.reload();
+		} else if (store.state.device.serverDisconnectedBehavior === 'dialog') {
+			if (reloadDialogShowing) return;
+			reloadDialogShowing = true;
+			const { canceled } = await app.dialog({
+				type: 'warning',
+				title: app.$t('disconnectedFromServer'),
+				text: app.$t('reloadConfirm'),
+				showCancelButton: true
+			});
+			reloadDialogShowing = false;
+			if (!canceled) {
+				location.reload();
+			}
+		}
+	});
+
 	os.stream.on('emojiAdded', data => {
 		// TODO
 		//store.commit('instance/set', );

src/client/pages/preferences/index.vue

@@ -95,9 +95,10 @@
 	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faCog"/> {{ $t('general') }}</div>
 		<div class="_content">
-			<mk-switch v-model="autoReload">
-				{{ $t('autoReloadWhenDisconnected') }}
-			</mk-switch>
+			<div>{{ $t('whenServerDisconnected') }}</div>
+			<mk-radio v-model="serverDisconnectedBehavior" value="reload">{{ $t('_serverDisconnectedBehavior.reload') }}</mk-radio>
+			<mk-radio v-model="serverDisconnectedBehavior" value="dialog">{{ $t('_serverDisconnectedBehavior.dialog') }}</mk-radio>
+			<mk-radio v-model="serverDisconnectedBehavior" value="quiet">{{ $t('_serverDisconnectedBehavior.quiet') }}</mk-radio>
 		</div>
 		<div class="_content">
 			<mk-switch v-model="imageNewTab">{{ $t('openImageInNewTab') }}</mk-switch>
@@ -186,9 +187,9 @@ export default Vue.extend({
 	},
 
 	computed: {
-		autoReload: {
-			get() { return this.$store.state.device.autoReload; },
-			set(value) { this.$store.commit('device/set', { key: 'autoReload', value }); }
+		serverDisconnectedBehavior: {
+			get() { return this.$store.state.device.serverDisconnectedBehavior; },
+			set(value) { this.$store.commit('device/set', { key: 'serverDisconnectedBehavior', value }); }
 		},
 
 		reduceAnimation: {

src/client/store.ts

@@ -60,7 +60,7 @@ export const defaultDeviceSettings = {
 	loadRawImages: false,
 	alwaysShowNsfw: false,
 	useOsNativeEmojis: false,
-	autoReload: false,
+	serverDisconnectedBehavior: 'quiet',
 	accounts: [],
 	recentEmojis: [],
 	themes: [],