From f5f8630812ed8bcaffd731951430f95d011f7a90 Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Wed, 9 Aug 2023 16:38:55 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E6=96=B0=E3=81=97?=
 =?UTF-8?q?=E3=81=84=E9=80=9A=E5=A0=B1=E3=81=8C=E3=81=82=E3=82=8B=E5=A0=B4?=
 =?UTF-8?q?=E5=90=88=E3=80=81=E3=83=8A=E3=83=93=E3=82=B2=E3=83=BC=E3=82=B7?=
 =?UTF-8?q?=E3=83=A7=E3=83=B3=E3=83=90=E3=83=BC=E3=81=AE=E3=82=B3=E3=83=B3?=
 =?UTF-8?q?=E3=83=88=E3=83=AD=E3=83=BC=E3=83=AB=E3=83=91=E3=83=8D=E3=83=AB?=
 =?UTF-8?q?=E3=82=A2=E3=82=A4=E3=82=B3=E3=83=B3=E3=81=A8=E3=82=B3=E3=83=B3?=
 =?UTF-8?q?=E3=83=88=E3=83=AD=E3=83=BC=E3=83=AB=E3=83=91=E3=83=8D=E3=83=AB?=
 =?UTF-8?q?=E3=83=9A=E3=83=BC=E3=82=B8=E3=81=AE=E9=80=9A=E5=A0=B1=E3=82=BB?=
 =?UTF-8?q?=E3=82=AF=E3=82=B7=E3=83=A7=E3=83=B3=E3=81=AB=E7=82=B9=E3=81=8C?=
 =?UTF-8?q?=E8=A1=A8=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG_CHERRYPICK.md                           |  1 +
 packages/frontend/src/components/MkSuperMenu.vue  | 15 +++++++++++++++
 packages/frontend/src/pages/admin/index.vue       |  3 ++-
 .../src/ui/_common_/navbar-for-mobile.vue         |  9 +++++++++
 packages/frontend/src/ui/_common_/navbar.vue      |  9 +++++++++
 packages/frontend/src/ui/classic.sidebar.vue      |  9 +++++++++
 .../src/ui/friendly/navbar-for-mobile.vue         |  9 +++++++++
 packages/frontend/src/ui/friendly/navbar.vue      |  9 +++++++++
 8 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
index 6d42f69b8f..26f2a11f6f 100644
--- a/CHANGELOG_CHERRYPICK.md
+++ b/CHANGELOG_CHERRYPICK.md
@@ -34,6 +34,7 @@
 ### Client
 - 이모티콘 피커의 검색 건수를 100개로 증가 (misskey-dev/misskey#11371)
 - about-misskey 페이지에서 클라이언트 버전을 누르면 변경 사항을 볼 수 있음
+- 새로운 신고가 있는 경우, 네비게이션 바의 제어판 아이콘과 제어판 페이지의 신고 섹션에 점을 표시
 - Enhance: 제어판 - 신고 페이지의 버튼 가독성 향상
 - Fix: (Friendly) 흐림 효과를 사용할 때 하단 내비게이션 바의 가독성이 매우 떨어지는 문제
 - Fix: 움직임이 있는 MFM 설정을 사용하지 않아도 `$[rainbow ]`문자를 볼 수 있음 (misskey-dev/misskey#11361)
diff --git a/packages/frontend/src/components/MkSuperMenu.vue b/packages/frontend/src/components/MkSuperMenu.vue
index 8d1cd42d11..bfb832a5c8 100644
--- a/packages/frontend/src/components/MkSuperMenu.vue
+++ b/packages/frontend/src/components/MkSuperMenu.vue
@@ -13,14 +13,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<a v-if="item.type === 'a'" :href="item.href" :target="item.target" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }">
 					<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
 					<span class="text">{{ item.text }}</span>
+          <span v-if="item.indicated" class="itemIndicator"><i class="_indicatorCircle"></i></span>
 				</a>
 				<button v-else-if="item.type === 'button'" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="ev => item.action(ev)">
 					<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
 					<span class="text">{{ item.text }}</span>
+          <span v-if="item.indicated" class="itemIndicator"><i class="_indicatorCircle"></i></span>
 				</button>
 				<MkA v-else :to="item.to" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }">
 					<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
 					<span class="text">{{ item.text }}</span>
+          <span v-if="item.indicated" class="itemIndicator"><i class="_indicatorCircle"></i></span>
 				</MkA>
 			</template>
 		</div>
@@ -90,6 +93,13 @@ defineProps<{
 					flex-shrink: 1;
 				}
 
+        > .itemIndicator {
+          position: absolute;
+          left: 1px;
+          color: var(--navIndicator);
+          font-size: 8px;
+          animation: blink 1s infinite;
+        }
 			}
 		}
 	}
@@ -149,6 +159,11 @@ defineProps<{
 						width: 100%;
 						font-size: 0.8em;
 					}
+
+          > .itemIndicator {
+            left: 15px;
+            font-size: 0.8em;
+          }
 				}
 			}
 		}
diff --git a/packages/frontend/src/pages/admin/index.vue b/packages/frontend/src/pages/admin/index.vue
index 67e1e099a9..aec90bbcd7 100644
--- a/packages/frontend/src/pages/admin/index.vue
+++ b/packages/frontend/src/pages/admin/index.vue
@@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onActivated, onMounted, onUnmounted, provide, watch } from 'vue';
+import {computed, onActivated, onMounted, onUnmounted, provide, watch} from 'vue';
 import { i18n } from '@/i18n';
 import MkSuperMenu from '@/components/MkSuperMenu.vue';
 import MkInfo from '@/components/MkInfo.vue';
@@ -143,6 +143,7 @@ const menuDef = $computed(() => [{
 	}, {
 		icon: 'ti ti-exclamation-circle',
 		text: i18n.ts.abuseReports,
+    indicated: computed(() => thereIsUnresolvedAbuseReport),
 		to: '/admin/abuses',
 		active: currentPage?.route.name === 'abuses',
 	}],
diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
index 9a7058b723..a1c9fc5ad3 100644
--- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@@ -26,6 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div :class="$style.divider"></div>
 		<MkA v-if="$i.isAdmin || $i.isModerator" :class="$style.item" :activeClass="$style.active" to="/admin">
 			<i :class="$style.itemIcon" class="ti ti-dashboard ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.controlPanel }}</span>
+      <span v-if="controlPanelIndicated" :class="$style.itemIndicator"><i class="_indicatorCircle"></i></span>
 		</MkA>
 		<button :class="$style.item" class="_button" @click="more">
 			<i :class="$style.itemIcon" class="ti ti-grid-dots ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.more }}</span>
@@ -65,6 +66,14 @@ const otherMenuItemIndicated = computed(() => {
 	}
 	return false;
 });
+let controlPanelIndicated = $ref(false);
+
+os.api('admin/abuse-user-reports', {
+  state: 'unresolved',
+  limit: 1,
+}).then(reports => {
+  if (reports.length > 0) controlPanelIndicated = true;
+});
 
 function openAccountMenu(ev: MouseEvent) {
 	openAccountMenu_({
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index 710fbb0d91..6c13ef525e 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -36,6 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div :class="$style.divider"></div>
 			<MkA v-if="$i.isAdmin || $i.isModerator" v-tooltip.noDelay.right="i18n.ts.controlPanel" :class="$style.item" :activeClass="$style.active" to="/admin">
 				<i :class="$style.itemIcon" class="ti ti-dashboard ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.controlPanel }}</span>
+        <span v-if="controlPanelIndicated" :class="$style.itemIndicator"><i class="_indicatorCircle"></i></span>
 			</MkA>
 			<button class="_button" :class="$style.item" @click="more">
 				<i :class="$style.itemIcon" class="ti ti-grid-dots ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.more }}</span>
@@ -78,6 +79,14 @@ const otherMenuItemIndicated = computed(() => {
 	}
 	return false;
 });
+let controlPanelIndicated = $ref(false);
+
+os.api('admin/abuse-user-reports', {
+  state: 'unresolved',
+  limit: 1,
+}).then(reports => {
+  if (reports.length > 0) controlPanelIndicated = true;
+});
 
 const calcViewState = () => {
 	iconOnly.value = (window.innerWidth <= 1279) || (defaultStore.state.menuDisplay === 'sideIcon');
diff --git a/packages/frontend/src/ui/classic.sidebar.vue b/packages/frontend/src/ui/classic.sidebar.vue
index 375c552c6d..e64e1b974d 100644
--- a/packages/frontend/src/ui/classic.sidebar.vue
+++ b/packages/frontend/src/ui/classic.sidebar.vue
@@ -27,6 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div class="divider"></div>
 	<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" activeClass="active" to="/admin" :behavior="settingsWindowed ? 'window' : null">
 		<i class="ti ti-dashboard ti-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
+    <span v-if="controlPanelIndicated" class="indicator"><i class="_indicatorCircle"></i></span>
 	</MkA>
 	<button v-click-anime class="item _button" @click="more">
 		<i class="ti ti-dots ti-fw"></i><span class="text">{{ i18n.ts.more }}</span>
@@ -76,6 +77,14 @@ let el = $shallowRef<HTMLElement>();
 // let connection = $ref(null);
 let iconOnly = $ref(false);
 let settingsWindowed = $ref(false);
+let controlPanelIndicated = $ref(false);
+
+os.api('admin/abuse-user-reports', {
+  state: 'unresolved',
+  limit: 1,
+}).then(reports => {
+  if (reports.length > 0) controlPanelIndicated = true;
+});
 
 function calcViewState() {
 	iconOnly = (window.innerWidth <= WINDOW_THRESHOLD) || (menuDisplay.value === 'sideIcon');
diff --git a/packages/frontend/src/ui/friendly/navbar-for-mobile.vue b/packages/frontend/src/ui/friendly/navbar-for-mobile.vue
index ed530cc7cd..d5de36532a 100644
--- a/packages/frontend/src/ui/friendly/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/friendly/navbar-for-mobile.vue
@@ -26,6 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div :class="$style.divider"></div>
 		<MkA v-if="$i.isAdmin || $i.isModerator" :class="$style.item" :activeClass="$style.active" to="/admin">
 			<i :class="$style.itemIcon" class="ti ti-dashboard ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.controlPanel }}</span>
+      <span v-if="controlPanelIndicated" :class="$style.itemIndicator"><i class="_indicatorCircle"></i></span>
 		</MkA>
 		<button :class="$style.item" class="_button" @click="more">
 			<i :class="$style.itemIcon" class="ti ti-grid-dots ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.more }}</span>
@@ -69,6 +70,14 @@ const otherMenuItemIndicated = computed(() => {
 	}
 	return false;
 });
+let controlPanelIndicated = $ref(false);
+
+os.api('admin/abuse-user-reports', {
+  state: 'unresolved',
+  limit: 1,
+}).then(reports => {
+  if (reports.length > 0) controlPanelIndicated = true;
+});
 
 function openAccountMenu(ev: MouseEvent) {
 	openAccountMenu_({
diff --git a/packages/frontend/src/ui/friendly/navbar.vue b/packages/frontend/src/ui/friendly/navbar.vue
index 6834b6ca8d..c3ace35c95 100644
--- a/packages/frontend/src/ui/friendly/navbar.vue
+++ b/packages/frontend/src/ui/friendly/navbar.vue
@@ -36,6 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div :class="$style.divider"></div>
 			<MkA v-if="$i.isAdmin || $i.isModerator" v-tooltip.noDelay.right="i18n.ts.controlPanel" :class="$style.item" :activeClass="$style.active" to="/admin">
 				<i :class="$style.itemIcon" class="ti ti-dashboard ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.controlPanel }}</span>
+        <span v-if="controlPanelIndicated" :class="$style.itemIndicator"><i class="_indicatorCircle"></i></span>
 			</MkA>
 			<button class="_button" :class="$style.item" @click="more">
 				<i :class="$style.itemIcon" class="ti ti-grid-dots ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.more }}</span>
@@ -85,6 +86,14 @@ const otherMenuItemIndicated = computed(() => {
 	}
 	return false;
 });
+let controlPanelIndicated = $ref(false);
+
+os.api('admin/abuse-user-reports', {
+  state: 'unresolved',
+  limit: 1,
+}).then(reports => {
+  if (reports.length > 0) controlPanelIndicated = true;
+});
 
 const calcViewState = () => {
 	iconOnly.value = (window.innerWidth <= 1279) || (defaultStore.state.menuDisplay === 'sideIcon');