From c8f0077e22dba4e357a8920061756db73777829d Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Wed, 7 Sep 2022 16:16:28 +0900
Subject: [PATCH] improve(friendly): UI improvement of the warning window
 displayed when the connection to the server is lost in a mobile environment

---
 CHANGELOG_CHERRYPICK.md                       |  1 +
 packages/client/src/init.ts                   |  4 ++-
 .../src/ui/_common_/stream-indicator.vue      | 31 ++++++++++++++++---
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
index 9deb8cdb22..8443f28dd1 100644
--- a/CHANGELOG_CHERRYPICK.md
+++ b/CHANGELOG_CHERRYPICK.md
@@ -15,6 +15,7 @@
 - 클라이언트: DeepL과 Google Translate를 선택할 수 있는 옵션 추가
 - 클라이언트: Enter 키를 눌러 보내기 옵션 추가
 - 클라이언트: 서버와 연결이 끊어졌을 때 경고를 표시하지 않는 옵션 추가
+- 클라이언트: (friendly) 모바일 환경에서 서버와 연결이 끊어졌을 때 표시되는 경고창의 UI 개선
 
 ## 12.x.x-cp-2.x.x (unreleased)_legacy
 
diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index 807dc71607..282010c8c0 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -317,7 +317,9 @@ import { getAccountFromId } from '@/scripts/get-account-from-id';
 			if (!canceled) {
 				location.reload();
 			}
-		} else if (defaultStore.state.serverDisconnectedBehavior === 'none') {}
+		} else if (defaultStore.state.serverDisconnectedBehavior === 'none') {
+			// none }
+		}
 	});
 
 	stream.on('emojiAdded', emojiData => {
diff --git a/packages/client/src/ui/_common_/stream-indicator.vue b/packages/client/src/ui/_common_/stream-indicator.vue
index a855de8ab9..9e5790e61d 100644
--- a/packages/client/src/ui/_common_/stream-indicator.vue
+++ b/packages/client/src/ui/_common_/stream-indicator.vue
@@ -1,6 +1,6 @@
 <template>
-<div v-if="hasDisconnected && $store.state.serverDisconnectedBehavior === 'quiet'" class="nsbbhtug" @click="resetDisconnected">
-	<div>{{ i18n.ts.disconnectedFromServer }}</div>
+<div v-if="hasDisconnected && $store.state.serverDisconnectedBehavior === 'quiet'" class="nsbbhtug" :class="{ friendly: isFriendly }" @click="resetDisconnected">
+	<div class="text">{{ i18n.ts.disconnectedFromServer }}</div>
 	<div class="command">
 		<button class="_textButton" @click="reload">{{ i18n.ts.reload }}</button>
 		<button class="_textButton">{{ i18n.ts.doNothing }}</button>
@@ -9,10 +9,12 @@
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted } from 'vue';
+import { onUnmounted, ref } from 'vue';
 import { stream } from '@/stream';
 import { i18n } from '@/i18n';
 
+const isFriendly = $ref(localStorage.getItem('ui') === 'friendly');
+
 let hasDisconnected = $ref(false);
 
 function onDisconnected() {
@@ -45,10 +47,31 @@ onUnmounted(() => {
 	font-size: 0.9em;
 	color: #fff;
 	background: #000;
-	opacity: 0.8;
+	opacity: 0.7;
 	border-radius: 4px;
 	max-width: 320px;
 
+	&.friendly {
+		@media (max-width: 1099px) {
+			display: flex;
+			width: 100%;
+			max-width: initial;
+			top: 55px;
+			bottom: initial;
+			right: initial;
+			border-radius: initial;
+
+			> .text {
+				padding: 0.7em;
+			}
+
+			> .command {
+				position: fixed;
+				right: 0;
+			}
+		}
+	}
+
 	> .command {
 		display: flex;
 		justify-content: space-around;