enhnace(frontend): リロードのサジェストをダイアログではなくバナー表示に

2 files changed, 71 insertions, 4 deletions

diff --git a/packages/frontend/src/ui/_common_/PreferenceRestore.vue b/packages/frontend/src/ui/_common_/PreferenceRestore.vue
index 5fd9f5e44b..b9d54cddc6 100644
--- a/packages/frontend/src/ui/_common_/PreferenceRestore.vue
+++ b/packages/frontend/src/ui/_common_/PreferenceRestore.vue
@@ -48,10 +48,6 @@ function skip() {
 .title {
 	padding: 0 10px;
 	font-weight: bold;
-
-	&:empty {
-		display: none;
-	}
 }
 
 .body {
diff --git a/packages/frontend/src/ui/_common_/ReloadSuggest.vue b/packages/frontend/src/ui/_common_/ReloadSuggest.vue
new file mode 100644
index 0000000000..8fcfe0b12f
--- /dev/null
+++ b/packages/frontend/src/ui/_common_/ReloadSuggest.vue
@@ -0,0 +1,71 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div :class="$style.root">
+	<span :class="$style.icon">
+		<i class="ti ti-info-circle"></i>
+	</span>
+	<span :class="$style.title">{{ i18n.ts.reloadRequiredToApplySettings }}</span>
+	<span :class="$style.body"><button class="_textButton" style="color: var(--MI_THEME-fgOnAccent);" @click="reload">{{ i18n.ts.reload }}</button> | <button class="_textButton" style="color: var(--MI_THEME-fgOnAccent);" @click="skip">{{ i18n.ts.skip }}</button></span>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { i18n } from '@/i18n.js';
+import { shouldSuggestReload } from '@/utility/reload-suggest.js';
+import { unisonReload } from '@/utility/unison-reload.js';
+
+function reload() {
+	unisonReload();
+}
+
+function skip() {
+	shouldSuggestReload.value = false;
+}
+</script>
+
+<style lang="scss" module>
+.root {
+	--height: 24px;
+	font-size: 0.85em;
+	display: flex;
+	vertical-align: bottom;
+	width: 100%;
+	line-height: var(--height);
+	height: var(--height);
+	overflow: clip;
+	contain: strict;
+	background: var(--MI_THEME-accent);
+	color: var(--MI_THEME-fgOnAccent);
+}
+
+.icon {
+	margin-left: 10px;
+	animation: blink 2s infinite;
+}
+
+.title {
+	padding: 0 10px;
+	font-weight: bold;
+	animation: blink 2s infinite;
+}
+
+.body {
+	min-width: 0;
+	flex: 1;
+	overflow: clip;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+@keyframes blink {
+	0% { opacity: 1; }
+	10% { opacity: 1; }
+	50% { opacity: 0; }
+	90% { opacity: 1; }
+	100% { opacity: 1; }
+}
+</style>