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

4 files changed, 81 insertions, 5 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>
diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index d2b163a38f..7cd54f01ef 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -13,6 +13,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div :class="[$style.main, { [$style.withWallpaper]: withWallpaper, [$style.withSidebarAndTitlebar]: !isMobile && prefer.r['deck.navbarPosition'].value === 'left' && prefer.r.showTitlebar.value }]" :style="{ backgroundImage: prefer.s['deck.wallpaper'] != null ? `url(${ prefer.s['deck.wallpaper'] })` : null }">
 			<XNavbarH v-if="!isMobile && prefer.r['deck.navbarPosition'].value === 'top'"/>
 
+			<XReloadSuggest v-if="shouldSuggestReload"/>
+			<XPreferenceRestore v-if="shouldSuggestRestoreBackup"/>
 			<XAnnouncements v-if="$i"/>
 			<XStatusBars/>
 			<div :class="$style.columnsWrapper">
@@ -81,12 +83,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { defineAsyncComponent, ref, useTemplateRef } from 'vue';
-import { genId } from '@/utility/id.js';
 import XCommon from './_common_/common.vue';
+import { genId } from '@/utility/id.js';
 import XSidebar from '@/ui/_common_/navbar.vue';
 import XNavbarH from '@/ui/_common_/navbar-h.vue';
 import XMobileFooterMenu from '@/ui/_common_/mobile-footer-menu.vue';
 import XTitlebar from '@/ui/_common_/titlebar.vue';
+import XPreferenceRestore from '@/ui/_common_/PreferenceRestore.vue';
+import XReloadSuggest from '@/ui/_common_/ReloadSuggest.vue';
 import * as os from '@/os.js';
 import { $i } from '@/i.js';
 import { i18n } from '@/i18n.js';
@@ -105,6 +109,8 @@ import XRoleTimelineColumn from '@/ui/deck/role-timeline-column.vue';
 import XChatColumn from '@/ui/deck/chat-column.vue';
 import { mainRouter } from '@/router.js';
 import { columns, layout, columnTypes, switchProfileMenu, addColumn as addColumnToStore, deleteProfile as deleteProfile_ } from '@/deck.js';
+import { shouldSuggestRestoreBackup } from '@/preferences/utility.js';
+import { shouldSuggestReload } from '@/utility/reload-suggest.js';
 
 const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
 const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue'));
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index f8793d7c75..7529f21ffb 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -12,6 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 		<div :class="[$style.contents, !isMobile && prefer.r.showTitlebar.value ? $style.withSidebarAndTitlebar : null]" @contextmenu.stop="onContextmenu">
 			<div>
+				<XReloadSuggest v-if="shouldSuggestReload"/>
 				<XPreferenceRestore v-if="shouldSuggestRestoreBackup"/>
 				<XAnnouncements v-if="$i"/>
 				<XStatusBars :class="$style.statusbars"/>
@@ -38,6 +39,7 @@ import XCommon from './_common_/common.vue';
 import type { PageMetadata } from '@/page.js';
 import XMobileFooterMenu from '@/ui/_common_/mobile-footer-menu.vue';
 import XPreferenceRestore from '@/ui/_common_/PreferenceRestore.vue';
+import XReloadSuggest from '@/ui/_common_/ReloadSuggest.vue';
 import XTitlebar from '@/ui/_common_/titlebar.vue';
 import XSidebar from '@/ui/_common_/navbar.vue';
 import * as os from '@/os.js';
@@ -50,6 +52,7 @@ import { mainRouter } from '@/router.js';
 import { prefer } from '@/preferences.js';
 import { shouldSuggestRestoreBackup } from '@/preferences/utility.js';
 import { DI } from '@/di.js';
+import { shouldSuggestReload } from '@/utility/reload-suggest.js';
 
 const XWidgets = defineAsyncComponent(() => import('./_common_/widgets.vue'));
 const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));