From f816764f37d70a7707d653409f7227b72511b91e Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Wed, 4 Oct 2023 17:31:33 +0900
Subject: [PATCH] tweak d627cdbf

---
 packages/frontend/src/pages/admin/index.vue   |   9 +-
 packages/frontend/src/pages/admin/update.vue  | 133 +++++++++---------
 .../src/ui/_common_/navbar-for-mobile.vue     |  30 ++--
 packages/frontend/src/ui/_common_/navbar.vue  |  30 ++--
 packages/frontend/src/ui/classic.header.vue   |  24 ++++
 packages/frontend/src/ui/classic.sidebar.vue  |  30 ++--
 .../src/ui/friendly/navbar-for-mobile.vue     |  30 ++--
 packages/frontend/src/ui/friendly/navbar.vue  |  30 ++--
 8 files changed, 181 insertions(+), 135 deletions(-)

diff --git a/packages/frontend/src/pages/admin/index.vue b/packages/frontend/src/pages/admin/index.vue
index 0bcbba07b7..efd2d2a731 100644
--- a/packages/frontend/src/pages/admin/index.vue
+++ b/packages/frontend/src/pages/admin/index.vue
@@ -64,7 +64,7 @@ let noEmailServer = !instance.enableEmail;
 let thereIsUnresolvedAbuseReport = $ref(false);
 let currentPage = $computed(() => router.currentRef.value.child);
 let updateAvailable = $ref(false);
-let releasesCherryPick = $ref(null);
+let releasesCherryPick = $ref();
 
 os.api('admin/abuse-user-reports', {
 	state: 'unresolved',
@@ -76,9 +76,10 @@ os.api('admin/abuse-user-reports', {
 fetch('https://api.github.com/repos/kokonect-link/cherrypick/releases', {
 	method: 'GET',
 }).then(res => res.json())
-	.then(res => {
-		if (meta.enableReceivePrerelease) releasesMisskey = res.filter(x => x.prerelease === true);
-		else releasesMisskey = res.filter(x => x.prerelease === false);
+	.then(async res => {
+		const meta = await os.api('admin/meta');
+		if (meta.enableReceivePrerelease) releasesCherryPick = res.filter(x => x.prerelease === true);
+		else releasesCherryPick = res.filter(x => x.prerelease === false);
 		if (version < releasesCherryPick[0].tag_name) updateAvailable = true;
 	});
 
diff --git a/packages/frontend/src/pages/admin/update.vue b/packages/frontend/src/pages/admin/update.vue
index 1be01905de..dfd9bb96ef 100644
--- a/packages/frontend/src/pages/admin/update.vue
+++ b/packages/frontend/src/pages/admin/update.vue
@@ -7,64 +7,66 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
-		<div class="_gaps_m">
-			<div class="_panel" style="padding: 16px;">
-				<MkSwitch v-model="enableReceivePrerelease">
-					<template #label>{{ i18n.ts.enableReceivePrerelease }}</template>
-				</MkSwitch>
+		<FormSuspense :p="init">
+			<div class="_gaps_m">
+				<div class="_panel" style="padding: 16px;">
+					<MkSwitch v-model="enableReceivePrerelease">
+						<template #label>{{ i18n.ts.enableReceivePrerelease }}</template>
+					</MkSwitch>
+				</div>
+
+				<template>
+					<FormInfo v-if="version > releasesCherryPick[0].tag_name">{{ i18n.ts.youAreRunningBetaClient }}</FormInfo>
+					<FormInfo v-else-if="version === releasesCherryPick[0].tag_name">{{ i18n.ts.youAreRunningUpToDateClient }}</FormInfo>
+					<FormInfo v-else warn>{{ i18n.ts.newVersionOfClientAvailable }}</FormInfo>
+				</template>
+
+				<FormSection first>
+					<template #label>{{ instanceName }}</template>
+					<MkKeyValue @click="whatIsNewCherryPick">
+						<template #key>{{ i18n.ts.currentVersion }} <i class="ti ti-external-link"></i></template>
+						<template #value>{{ version }}</template>
+					</MkKeyValue>
+					<MkKeyValue v-if="version < releasesCherryPick[0].tag_name" style="margin-top: 10px;" @click="whatIsNewLatestCherryPick">
+						<template #key>{{ i18n.ts.latestVersion }} <i class="ti ti-external-link"></i></template>
+						<template v-if="releasesCherryPick" #value>{{ releasesCherryPick[0].tag_name }}</template>
+						<template v-else #value><MkEllipsis/></template>
+					</MkKeyValue>
+				</FormSection>
+
+				<FormSection @click="whatIsNewLatestCherryPick">
+					<template #label>CherryPick <i class="ti ti-external-link"></i></template>
+					<MkKeyValue>
+						<template #key>{{ i18n.ts.latestVersion }}</template>
+						<template v-if="releasesCherryPick" #value>{{ releasesCherryPick[0].tag_name }}</template>
+						<template v-else #value><MkEllipsis/></template>
+					</MkKeyValue>
+					<MkKeyValue style="margin: 8px 0 0; color: var(--fgTransparentWeak); font-size: 0.85em;">
+						<template v-if="releasesCherryPick" #value><MkTime :time="releasesCherryPick[0].published_at" mode="detail"/></template>
+						<template v-else #value><MkEllipsis/></template>
+					</MkKeyValue>
+				</FormSection>
+
+				<FormSection @click="whatIsNewLatestMisskey">
+					<template #label>Misskey <i class="ti ti-external-link"></i></template>
+					<MkKeyValue>
+						<template #key>{{ i18n.ts.latestVersion }}</template>
+						<template v-if="releasesMisskey" #value>{{ releasesMisskey[0].tag_name }}</template>
+						<template v-else #value><MkEllipsis/></template>
+					</MkKeyValue>
+					<MkKeyValue style="margin: 8px 0 0; color: var(--fgTransparentWeak); font-size: 0.85em;">
+						<template v-if="releasesMisskey" #value><MkTime :time="releasesMisskey[0].published_at" mode="detail"/></template>
+						<template v-else #value><MkEllipsis/></template>
+					</MkKeyValue>
+				</FormSection>
 			</div>
-
-			<template>
-				<FormInfo v-if="version > releasesCherryPick[0].tag_name">{{ i18n.ts.youAreRunningBetaClient }}</FormInfo>
-				<FormInfo v-else-if="version === releasesCherryPick[0].tag_name">{{ i18n.ts.youAreRunningUpToDateClient }}</FormInfo>
-				<FormInfo v-else warn>{{ i18n.ts.newVersionOfClientAvailable }}</FormInfo>
-			</template>
-
-			<FormSection first>
-				<template #label>{{ instanceName }}</template>
-				<MkKeyValue @click="whatIsNewCherryPick">
-					<template #key>{{ i18n.ts.currentVersion }} <i class="ti ti-external-link"></i></template>
-					<template #value>{{ version }}</template>
-				</MkKeyValue>
-				<MkKeyValue v-if="version < releasesCherryPick[0].tag_name" style="margin-top: 10px;" @click="whatIsNewLatestCherryPick">
-					<template #key>{{ i18n.ts.latestVersion }} <i class="ti ti-external-link"></i></template>
-					<template v-if="releasesCherryPick" #value>{{ releasesCherryPick[0].tag_name }}</template>
-					<template v-else #value><MkEllipsis/></template>
-				</MkKeyValue>
-			</FormSection>
-
-			<FormSection @click="whatIsNewLatestCherryPick">
-				<template #label>CherryPick <i class="ti ti-external-link"></i></template>
-				<MkKeyValue>
-					<template #key>{{ i18n.ts.latestVersion }}</template>
-					<template v-if="releasesCherryPick" #value>{{ releasesCherryPick[0].tag_name }}</template>
-					<template v-else #value><MkEllipsis/></template>
-				</MkKeyValue>
-				<MkKeyValue style="margin: 8px 0 0; color: var(--fgTransparentWeak); font-size: 0.85em;">
-					<template v-if="releasesCherryPick" #value><MkTime :time="releasesCherryPick[0].published_at" mode="detail"/></template>
-					<template v-else #value><MkEllipsis/></template>
-				</MkKeyValue>
-			</FormSection>
-
-			<FormSection @click="whatIsNewLatestMisskey">
-				<template #label>Misskey <i class="ti ti-external-link"></i></template>
-				<MkKeyValue>
-					<template #key>{{ i18n.ts.latestVersion }}</template>
-					<template v-if="releasesMisskey" #value>{{ releasesMisskey[0].tag_name }}</template>
-					<template v-else #value><MkEllipsis/></template>
-				</MkKeyValue>
-				<MkKeyValue style="margin: 8px 0 0; color: var(--fgTransparentWeak); font-size: 0.85em;">
-					<template v-if="releasesMisskey" #value><MkTime :time="releasesMisskey[0].published_at" mode="detail"/></template>
-					<template v-else #value><MkEllipsis/></template>
-				</MkKeyValue>
-			</FormSection>
-		</div>
+		</FormSuspense>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, watch } from 'vue';
+import { onMounted } from 'vue';
 import * as os from '@/os.js';
 import FormInfo from '@/components/MkInfo.vue';
 import FormSection from '@/components/form/section.vue';
@@ -75,14 +77,16 @@ import { i18n } from '@/i18n.js';
 import XHeader from '@/pages/admin/_header_.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import { fetchInstance } from '@/instance.js';
+import FormSuspense from '@/components/form/suspense.vue';
 
 let enableReceivePrerelease: boolean = $ref(false);
 
-let releasesCherryPick = $ref(null);
-let releasesMisskey = $ref(null);
+let releasesCherryPick = $ref();
+let releasesMisskey = $ref();
+
+const meta = await os.api('admin/meta');
 
 async function init() {
-	const meta = await os.api('admin/meta');
 	enableReceivePrerelease = meta.enableReceivePrerelease;
 }
 
@@ -94,20 +98,12 @@ function save() {
 	});
 }
 
-watch([
-	enableReceivePrerelease,
-], () => {
-	save();
-});
-
 onMounted(() => {
-	init();
-
 	fetch('https://api.github.com/repos/kokonect-link/cherrypick/releases', {
 		method: 'GET',
 	}).then(res => res.json())
 		.then(res => {
-			if (enableReceivePrerelease) releasesCherryPick = res.filter(x => x.prerelease === true);
+			if (meta.enableReceivePrerelease) releasesCherryPick = res.filter(x => x.prerelease === true);
 			else releasesCherryPick = res.filter(x => x.prerelease === false);
 		});
 
@@ -115,7 +111,7 @@ onMounted(() => {
 		method: 'GET',
 	}).then(res => res.json())
 		.then(res => {
-			if (enableReceivePrerelease) releasesMisskey = res.filter(x => x.prerelease === true);
+			if (meta.enableReceivePrerelease) releasesMisskey = res.filter(x => x.prerelease === true);
 			else releasesMisskey = res.filter(x => x.prerelease === false);
 		});
 });
@@ -136,7 +132,12 @@ const whatIsNewLatestMisskey = () => {
 	window.open(`https://misskey-hub.net/docs/releases.html#_${releasesMisskey[0].tag_name.replace(/\./g, '-')}`, '_blank');
 };
 
-const headerActions = $computed(() => []);
+const headerActions = $computed(() => [{
+	asFullButton: true,
+	icon: 'ti ti-check',
+	text: i18n.ts.save,
+	handler: save,
+}]);
 
 const headerTabs = $computed(() => []);
 
diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
index 2ea6a96b4a..2c7f17ef3a 100644
--- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@@ -70,21 +70,25 @@ const otherMenuItemIndicated = computed(() => {
 let controlPanelIndicated = $ref(false);
 let releasesCherryPick = $ref(null);
 
-os.api('admin/abuse-user-reports', {
-	state: 'unresolved',
-	limit: 1,
-}).then(reports => {
-	if (reports.length > 0) controlPanelIndicated = true;
-});
-
-fetch('https://api.github.com/repos/kokonect-link/cherrypick/releases', {
-	method: 'GET',
-}).then(res => res.json())
-	.then(res => {
-		releasesCherryPick = res;
-		if (version < releasesCherryPick[0].tag_name) controlPanelIndicated = true;
+if ($i.isAdmin || $i.isModerator) {
+	os.api('admin/abuse-user-reports', {
+		state: 'unresolved',
+		limit: 1,
+	}).then(reports => {
+		if (reports.length > 0) controlPanelIndicated = true;
 	});
 
+	fetch('https://api.github.com/repos/kokonect-link/cherrypick/releases', {
+		method: 'GET',
+	}).then(res => res.json())
+		.then(async res => {
+			const meta = await os.api('admin/meta');
+			if (meta.enableReceivePrerelease) releasesCherryPick = res.filter(x => x.prerelease === true);
+			else releasesCherryPick = res.filter(x => x.prerelease === false);
+			if (version < releasesCherryPick[0].tag_name) controlPanelIndicated = true;
+		});
+}
+
 function openAccountMenu(ev: MouseEvent) {
 	openAccountMenu_({
 		withExtraOperation: true,
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index 6677907da5..1bdaba9a23 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -84,21 +84,25 @@ const otherMenuItemIndicated = computed(() => {
 let controlPanelIndicated = $ref(false);
 let releasesCherryPick = $ref(null);
 
-os.api('admin/abuse-user-reports', {
-	state: 'unresolved',
-	limit: 1,
-}).then(reports => {
-	if (reports.length > 0) controlPanelIndicated = true;
-});
-
-fetch('https://api.github.com/repos/kokonect-link/cherrypick/releases', {
-	method: 'GET',
-}).then(res => res.json())
-	.then(res => {
-		releasesCherryPick = res;
-		if (version < releasesCherryPick[0].tag_name) controlPanelIndicated = true;
+if ($i.isAdmin || $i.isModerator) {
+	os.api('admin/abuse-user-reports', {
+		state: 'unresolved',
+		limit: 1,
+	}).then(reports => {
+		if (reports.length > 0) controlPanelIndicated = true;
 	});
 
+	fetch('https://api.github.com/repos/kokonect-link/cherrypick/releases', {
+		method: 'GET',
+	}).then(res => res.json())
+		.then(async res => {
+			const meta = await os.api('admin/meta');
+			if (meta.enableReceivePrerelease) releasesCherryPick = res.filter(x => x.prerelease === true);
+			else releasesCherryPick = res.filter(x => x.prerelease === false);
+			if (version < releasesCherryPick[0].tag_name) controlPanelIndicated = true;
+		});
+}
+
 const calcViewState = () => {
 	iconOnly.value = (window.innerWidth <= 1279) || (defaultStore.state.menuDisplay === 'sideIcon');
 };
diff --git a/packages/frontend/src/ui/classic.header.vue b/packages/frontend/src/ui/classic.header.vue
index 486ed0d2f7..1ad12808e6 100644
--- a/packages/frontend/src/ui/classic.header.vue
+++ b/packages/frontend/src/ui/classic.header.vue
@@ -23,6 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div class="divider"></div>
 			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip="i18n.ts.controlPanel" class="item" activeClass="active" to="/admin" :behavior="settingsWindowed ? 'window' : null">
 				<i class="ti ti-dashboard ti-fw"></i>
+				<span v-if="controlPanelIndicated" class="indicator"><i class="_indicatorCircle"></i></span>
 			</MkA>
 			<button v-click-anime v-vibrate="5" class="item _button" @click="more">
 				<i class="ti ti-dots ti-fw"></i>
@@ -56,6 +57,7 @@ import MkButton from '@/components/MkButton.vue';
 import { defaultStore } from '@/store.js';
 import { instance } from '@/instance.js';
 import { i18n } from '@/i18n.js';
+import { version } from '@/config.js';
 
 const WINDOW_THRESHOLD = 1400;
 
@@ -70,6 +72,28 @@ let otherNavItemIndicated = computed<boolean>(() => {
 	return false;
 });
 
+let controlPanelIndicated = $ref(false);
+let releasesCherryPick = $ref(null);
+
+if ($i.isAdmin || $i.isModerator) {
+	os.api('admin/abuse-user-reports', {
+		state: 'unresolved',
+		limit: 1,
+	}).then(reports => {
+		if (reports.length > 0) controlPanelIndicated = true;
+	});
+
+	fetch('https://api.github.com/repos/kokonect-link/cherrypick/releases', {
+		method: 'GET',
+	}).then(res => res.json())
+		.then(async res => {
+			const meta = await os.api('admin/meta');
+			if (meta.enableReceivePrerelease) releasesCherryPick = res.filter(x => x.prerelease === true);
+			else releasesCherryPick = res.filter(x => x.prerelease === false);
+			if (version < releasesCherryPick[0].tag_name) controlPanelIndicated = true;
+		});
+}
+
 function more(ev: MouseEvent) {
 	os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
 		src: ev.currentTarget ?? ev.target,
diff --git a/packages/frontend/src/ui/classic.sidebar.vue b/packages/frontend/src/ui/classic.sidebar.vue
index 689773ad88..fadcf1b744 100644
--- a/packages/frontend/src/ui/classic.sidebar.vue
+++ b/packages/frontend/src/ui/classic.sidebar.vue
@@ -81,21 +81,25 @@ let settingsWindowed = $ref(false);
 let controlPanelIndicated = $ref(false);
 let releasesCherryPick = $ref(null);
 
-os.api('admin/abuse-user-reports', {
-	state: 'unresolved',
-	limit: 1,
-}).then(reports => {
-	if (reports.length > 0) controlPanelIndicated = true;
-});
-
-fetch('https://api.github.com/repos/kokonect-link/cherrypick/releases', {
-	method: 'GET',
-}).then(res => res.json())
-	.then(res => {
-		releasesCherryPick = res;
-		if (version < releasesCherryPick[0].tag_name) controlPanelIndicated = true;
+if ($i.isAdmin || $i.isModerator) {
+	os.api('admin/abuse-user-reports', {
+		state: 'unresolved',
+		limit: 1,
+	}).then(reports => {
+		if (reports.length > 0) controlPanelIndicated = true;
 	});
 
+	fetch('https://api.github.com/repos/kokonect-link/cherrypick/releases', {
+		method: 'GET',
+	}).then(res => res.json())
+		.then(async res => {
+			const meta = await os.api('admin/meta');
+			if (meta.enableReceivePrerelease) releasesCherryPick = res.filter(x => x.prerelease === true);
+			else releasesCherryPick = res.filter(x => x.prerelease === false);
+			if (version < releasesCherryPick[0].tag_name) controlPanelIndicated = true;
+		});
+}
+
 function calcViewState() {
 	iconOnly = (window.innerWidth <= WINDOW_THRESHOLD) || (menuDisplay.value === 'sideIcon');
 	settingsWindowed = (window.innerWidth > WINDOW_THRESHOLD);
diff --git a/packages/frontend/src/ui/friendly/navbar-for-mobile.vue b/packages/frontend/src/ui/friendly/navbar-for-mobile.vue
index 52291be456..d199d55c30 100644
--- a/packages/frontend/src/ui/friendly/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/friendly/navbar-for-mobile.vue
@@ -74,21 +74,25 @@ const otherMenuItemIndicated = computed(() => {
 let controlPanelIndicated = $ref(false);
 let releasesCherryPick = $ref(null);
 
-os.api('admin/abuse-user-reports', {
-	state: 'unresolved',
-	limit: 1,
-}).then(reports => {
-	if (reports.length > 0) controlPanelIndicated = true;
-});
-
-fetch('https://api.github.com/repos/kokonect-link/cherrypick/releases', {
-	method: 'GET',
-}).then(res => res.json())
-	.then(res => {
-		releasesCherryPick = res;
-		if (version < releasesCherryPick[0].tag_name) controlPanelIndicated = true;
+if ($i.isAdmin || $i.isModerator) {
+	os.api('admin/abuse-user-reports', {
+		state: 'unresolved',
+		limit: 1,
+	}).then(reports => {
+		if (reports.length > 0) controlPanelIndicated = true;
 	});
 
+	fetch('https://api.github.com/repos/kokonect-link/cherrypick/releases', {
+		method: 'GET',
+	}).then(res => res.json())
+		.then(async res => {
+			const meta = await os.api('admin/meta');
+			if (meta.enableReceivePrerelease) releasesCherryPick = res.filter(x => x.prerelease === true);
+			else releasesCherryPick = res.filter(x => x.prerelease === false);
+			if (version < releasesCherryPick[0].tag_name) controlPanelIndicated = true;
+		});
+}
+
 function openAccountMenu(ev: MouseEvent) {
 	openAccountMenu_({
 		withExtraOperation: true,
diff --git a/packages/frontend/src/ui/friendly/navbar.vue b/packages/frontend/src/ui/friendly/navbar.vue
index eb954851fe..f29fb7ed3d 100644
--- a/packages/frontend/src/ui/friendly/navbar.vue
+++ b/packages/frontend/src/ui/friendly/navbar.vue
@@ -91,21 +91,25 @@ const otherMenuItemIndicated = computed(() => {
 let controlPanelIndicated = $ref(false);
 let releasesCherryPick = $ref(null);
 
-os.api('admin/abuse-user-reports', {
-	state: 'unresolved',
-	limit: 1,
-}).then(reports => {
-	if (reports.length > 0) controlPanelIndicated = true;
-});
-
-fetch('https://api.github.com/repos/kokonect-link/cherrypick/releases', {
-	method: 'GET',
-}).then(res => res.json())
-	.then(res => {
-		releasesCherryPick = res;
-		if (version < releasesCherryPick[0].tag_name) controlPanelIndicated = true;
+if ($i.isAdmin || $i.isModerator) {
+	os.api('admin/abuse-user-reports', {
+		state: 'unresolved',
+		limit: 1,
+	}).then(reports => {
+		if (reports.length > 0) controlPanelIndicated = true;
 	});
 
+	fetch('https://api.github.com/repos/kokonect-link/cherrypick/releases', {
+		method: 'GET',
+	}).then(res => res.json())
+		.then(async res => {
+			const meta = await os.api('admin/meta');
+			if (meta.enableReceivePrerelease) releasesCherryPick = res.filter(x => x.prerelease === true);
+			else releasesCherryPick = res.filter(x => x.prerelease === false);
+			if (version < releasesCherryPick[0].tag_name) controlPanelIndicated = true;
+		});
+}
+
 const calcViewState = () => {
 	iconOnly.value = (window.innerWidth <= 1279) || (defaultStore.state.menuDisplay === 'sideIcon');
 };