From 158600d799805e90040e52966e5d7badf065e9d6 Mon Sep 17 00:00:00 2001
From: hijiki <arumaaru@proton.me>
Date: Sat, 19 Oct 2024 00:57:39 +0900
Subject: [PATCH] u

---
 packages/frontend/src/pages/about.vue        |  28 +-
 packages/frontend/src/ui/_common_/common.vue | 406 ++++++-------------
 2 files changed, 131 insertions(+), 303 deletions(-)

diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue
index f35cbe8d5a..1ae11a53c2 100644
--- a/packages/frontend/src/pages/about.vue
+++ b/packages/frontend/src/pages/about.vue
@@ -1,11 +1,8 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<template #header>
+		<MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/>
+	</template>
 	<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
 		<MkSpacer v-if="tab === 'overview'" :contentMax="600" :marginMin="20">
 			<XOverview/>
@@ -13,12 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkSpacer v-else-if="tab === 'emojis'" :contentMax="1000" :marginMin="20">
 			<XEmojis/>
 		</MkSpacer>
-		<MkSpacer v-else-if="tab === 'federation'" :contentMax="1000" :marginMin="20">
-			<XFederation/>
-		</MkSpacer>
-		<MkSpacer v-else-if="tab === 'charts'" :contentMax="1000" :marginMin="20">
-			<MkInstanceStats/>
-		</MkSpacer>
+		<!-- 連携とチャートのタブは削除 -->
 	</MkHorizontalSwipe>
 </MkStickyContainer>
 </template>
@@ -32,8 +24,6 @@ import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 
 const XOverview = defineAsyncComponent(() => import('@/pages/about.overview.vue'));
 const XEmojis = defineAsyncComponent(() => import('@/pages/about.emojis.vue'));
-const XFederation = defineAsyncComponent(() => import('@/pages/about.federation.vue'));
-const MkInstanceStats = defineAsyncComponent(() => import('@/components/MkInstanceStats.vue'));
 
 const props = withDefaults(defineProps<{
 	initialTab?: string;
@@ -58,15 +48,7 @@ const headerTabs = computed(() => [{
 	key: 'emojis',
 	title: i18n.ts.customEmojis,
 	icon: 'ph-smiley ph-bold ph-lg',
-}, {
-	key: 'federation',
-	title: i18n.ts.federation,
-	icon: 'ti ti-whirl',
-}, {
-	key: 'charts',
-	title: i18n.ts.charts,
-	icon: 'ti ti-chart-line',
-}]);
+}]); // 連携とチャートを削除
 
 definePageMetadata(() => ({
 	title: i18n.ts.instanceInfo,
diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
index 442b6479dd..56c280590d 100644
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -1,288 +1,134 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
-<template>
-<component
-	:is="popup.component"
-	v-for="popup in popups"
-	:key="popup.id"
-	v-bind="popup.props"
-	v-on="popup.events"
-/>
-
-<XUpload v-if="uploads.length > 0"/>
-
-<TransitionGroup
-	tag="div"
-	:class="[$style.notifications, {
-		[$style.notificationsPosition_leftTop]: defaultStore.state.notificationPosition === 'leftTop',
-		[$style.notificationsPosition_leftBottom]: defaultStore.state.notificationPosition === 'leftBottom',
-		[$style.notificationsPosition_rightTop]: defaultStore.state.notificationPosition === 'rightTop',
-		[$style.notificationsPosition_rightBottom]: defaultStore.state.notificationPosition === 'rightBottom',
-		[$style.notificationsStackAxis_vertical]: defaultStore.state.notificationStackAxis === 'vertical',
-		[$style.notificationsStackAxis_horizontal]: defaultStore.state.notificationStackAxis === 'horizontal',
-	}]"
-	:moveClass="defaultStore.state.animation ? $style.transition_notification_move : ''"
-	:enterActiveClass="defaultStore.state.animation ? $style.transition_notification_enterActive : ''"
-	:leaveActiveClass="defaultStore.state.animation ? $style.transition_notification_leaveActive : ''"
-	:enterFromClass="defaultStore.state.animation ? $style.transition_notification_enterFrom : ''"
-	:leaveToClass="defaultStore.state.animation ? $style.transition_notification_leaveTo : ''"
->
-	<div v-for="notification in notifications" :key="notification.id" :class="$style.notification">
-		<XNotification :notification="notification"/>
-	</div>
-</TransitionGroup>
-
-<XStreamIndicator/>
-
-<div v-if="pendingApiRequestsCount > 0" id="wait"></div>
-
-<div v-if="dev" id="devTicker"><span>DEV BUILD</span></div>
-
-<div v-if="$i && $i.isBot" id="botWarn"><span>{{ i18n.ts.loggedInAsBot }}</span></div>
-
-<SkOneko v-if="defaultStore.state.oneko"/>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent, ref } from 'vue';
-import * as Misskey from 'misskey-js';
-import { swInject } from './sw-inject.js';
-import XNotification from './notification.vue';
-import { popups } from '@/os.js';
-import { pendingApiRequestsCount } from '@/scripts/misskey-api.js';
-import { uploads } from '@/scripts/upload.js';
-import * as sound from '@/scripts/sound.js';
-import { $i } from '@/account.js';
-import { useStream } from '@/stream.js';
+import { defineAsyncComponent } from 'vue';
+import type { MenuItem } from '@/types/menu.js';
+import * as os from '@/os.js';
+import { instance } from '@/instance.js';
+import { host } from '@/config.js';
 import { i18n } from '@/i18n.js';
-import { defaultStore } from '@/store.js';
-import { globalEvents } from '@/events.js';
+import { $i } from '@/account.js';
 
-const SkOneko = defineAsyncComponent(() => import('@/components/SkOneko.vue'));
-
-const XStreamIndicator = defineAsyncComponent(() => import('./stream-indicator.vue'));
-const XUpload = defineAsyncComponent(() => import('./upload.vue'));
-
-const dev = _DEV_;
-
-const notifications = ref<Misskey.entities.Notification[]>([]);
-
-function onNotification(notification: Misskey.entities.Notification, isClient = false) {
-	if (document.visibilityState === 'visible') {
-		if (!isClient && notification.type !== 'test') {
-			// サーバーサイドのテスト通知の際は自動で既読をつけない（テストできないので）
-			useStream().send('readNotification');
-		}
-
-		notifications.value.unshift(notification);
-		window.setTimeout(() => {
-			if (notifications.value.length > 3) notifications.value.pop();
-		}, 500);
-
-		window.setTimeout(() => {
-			notifications.value = notifications.value.filter(x => x.id !== notification.id);
-		}, 6000);
-	}
-
-	sound.playMisskeySfx('notification');
+function toolsMenuItems(): MenuItem[] {
+	return [{
+		type: 'link',
+		to: '/scratchpad',
+		text: i18n.ts.scratchpad,
+		icon: 'ti ti-terminal-2',
+	}, {
+		type: 'link',
+		to: '/api-console',
+		text: 'API Console',
+		icon: 'ti ti-terminal-2',
+	}, {
+		type: 'link',
+		to: '/clicker',
+		text: '🍪👈',
+		icon: 'ti ti-cookie',
+	}, ($i && ($i.isAdmin || $i.policies.canManageCustomEmojis)) ? {
+		type: 'link',
+		to: '/custom-emojis-manager',
+		text: i18n.ts.manageCustomEmojis,
+		icon: 'ti ti-icons',
+	} : undefined, ($i && ($i.isAdmin || $i.policies.canManageAvatarDecorations)) ? {
+		type: 'link',
+		to: '/avatar-decorations',
+		text: i18n.ts.manageAvatarDecorations,
+		icon: 'ti ti-sparkles',
+	} : undefined];
 }
 
-if ($i) {
-	const connection = useStream().useChannel('main', null, 'UI');
-	connection.on('notification', onNotification);
-
-	globalEvents.on('clientNotification', notification => onNotification(notification, true));
-
-	//#region Listen message from SW
-	if ('serviceWorker' in navigator) {
-		swInject();
-	}
-}
-</script>
-
-<style lang="scss" module>
-.transition_notification_move,
-.transition_notification_enterActive,
-.transition_notification_leaveActive {
-	transition: opacity 0.3s, transform 0.3s !important;
-}
-.transition_notification_enterFrom {
-	opacity: 0;
-	transform: translateX(250px);
-}
-.transition_notification_leaveTo {
-	opacity: 0;
-	transform: translateX(-250px);
+export function openInstanceMenu(ev: MouseEvent) {
+	os.popupMenu([{
+		text: instance.name ?? host,
+		type: 'label',
+	}, {
+		type: 'link',
+		text: i18n.ts.instanceInfo,
+		icon: 'ti ti-info-circle',
+		to: '/about',
+	}, {
+		type: 'link',
+		text: i18n.ts.customEmojis,
+		icon: 'ti ti-icons',
+		to: '/about#emojis',
+	}, 
+     {
+	type: 'link',
+		text: i18n.ts.federation,
+		icon: 'ti ti-whirl',
+		to: '/about#federation',
+ }, {
+ 	type: 'link',
+	text: i18n.ts.charts,
+ 	icon: 'ti ti-chart-line',
+		to: '/about#charts',
+ }, 
+	{ type: 'divider' }, {
+		type: 'link',
+		text: i18n.ts.ads,
+		icon: 'ti ti-ad',
+		to: '/ads',
+	}, ($i && ($i.isAdmin || $i.policies.canInvite) && instance.disableRegistration) ? {
+		type: 'link',
+		to: '/invite',
+		text: i18n.ts.invite,
+		icon: 'ti ti-user-plus',
+	} : undefined, {
+		type: 'parent',
+		text: i18n.ts.tools,
+		icon: 'ti ti-tool',
+		children: toolsMenuItems(),
+	}, { type: 'divider' }, {
+		type: 'link',
+		text: i18n.ts.inquiry,
+		icon: 'ti ti-help-circle',
+		to: '/contact',
+	}, (instance.impressumUrl) ? {
+		type: 'a',
+		text: i18n.ts.impressum,
+		icon: 'ti ti-file-invoice',
+		href: instance.impressumUrl,
+		target: '_blank',
+	} : undefined, (instance.tosUrl) ? {
+		type: 'a',
+		text: i18n.ts.termsOfService,
+		icon: 'ti ti-notebook',
+		href: instance.tosUrl,
+		target: '_blank',
+	} : undefined, (instance.privacyPolicyUrl) ? {
+		type: 'a',
+		text: i18n.ts.privacyPolicy,
+		icon: 'ti ti-shield-lock',
+		href: instance.privacyPolicyUrl,
+		target: '_blank',
+	} : undefined, (!instance.impressumUrl && !instance.tosUrl && !instance.privacyPolicyUrl) ? undefined : { type: 'divider' }, {
+		type: 'a',
+		text: i18n.ts.document,
+		icon: 'ti ti-bulb',
+		href: 'https://misskey-hub.net/docs/for-users/',
+		target: '_blank',
+	}, ($i) ? {
+		text: i18n.ts._initialTutorial.launchTutorial,
+		icon: 'ti ti-presentation',
+		action: () => {
+			const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTutorialDialog.vue')), {}, {
+				closed: () => dispose(),
+			});
+		},
+	} : undefined, {
+		type: 'link',
+		text: i18n.ts.aboutMisskey,
+		to: '/about-misskey',
+	}], ev.currentTarget ?? ev.target, {
+		align: 'left',
+	});
 }
 
-.notifications {
-	position: fixed;
-	z-index: 3900000;
-	padding: 0 var(--margin);
-	pointer-events: none;
-	display: flex;
-
-	&.notificationsPosition_leftTop {
-		top: var(--margin);
-		left: 0;
-	}
-
-	&.notificationsPosition_rightTop {
-		top: var(--margin);
-		right: 0;
-	}
-
-	&.notificationsPosition_leftBottom {
-		bottom: calc(var(--minBottomSpacing) + var(--margin));
-		left: 0;
-	}
-
-	&.notificationsPosition_rightBottom {
-		bottom: calc(var(--minBottomSpacing) + var(--margin));
-		right: 0;
-	}
-
-	&.notificationsStackAxis_vertical {
-		width: 250px;
-
-		&.notificationsPosition_leftTop,
-		&.notificationsPosition_rightTop {
-			flex-direction: column;
-
-			.notification {
-				& + .notification {
-					margin-top: 8px;
-				}
-			}
-		}
-
-		&.notificationsPosition_leftBottom,
-		&.notificationsPosition_rightBottom {
-			flex-direction: column-reverse;
-
-			.notification {
-				& + .notification {
-					margin-bottom: 8px;
-				}
-			}
-		}
-	}
-
-	&.notificationsStackAxis_horizontal {
-		width: 100%;
-
-		&.notificationsPosition_leftTop,
-		&.notificationsPosition_leftBottom {
-			flex-direction: row;
-
-			.notification {
-				& + .notification {
-					margin-left: 8px;
-				}
-			}
-		}
-
-		&.notificationsPosition_rightTop,
-		&.notificationsPosition_rightBottom {
-			flex-direction: row-reverse;
-
-			.notification {
-				& + .notification {
-					margin-right: 8px;
-				}
-			}
-		}
-
-		.notification {
-			width: 250px;
-			flex-shrink: 0;
-		}
-	}
+export function openToolsMenu(ev: MouseEvent) {
+	os.popupMenu(toolsMenuItems(), ev.currentTarget ?? ev.target, {
+		align: 'left',
+	});
 }
-
-.notification {
-	container-type: inline-size;
-}
-</style>
-
-<style lang="scss">
-@keyframes dev-ticker-blink {
-	0% { opacity: 1; }
-	50% { opacity: 0; }
-	100% { opacity: 1; }
-}
-
-@keyframes progress-spinner {
-	0% {
-		transform: rotate(0deg);
-	}
-	100% {
-		transform: rotate(360deg);
-	}
-}
-
-#wait {
-	display: block;
-	position: fixed;
-	z-index: 4000000;
-	top: 15px;
-	right: 15px;
-	pointer-events: none;
-
-	&::before {
-		content: "";
-		display: block;
-		width: 18px;
-		height: 18px;
-		box-sizing: border-box;
-		border: solid 2px transparent;
-		border-top-color: var(--accent);
-		border-left-color: var(--accent);
-		border-radius: 50%;
-		animation: progress-spinner 400ms linear infinite;
-	}
-}
-
-#botWarn {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	margin: auto;
-	width: 100%;
-	height: max-content;
-	text-align: center;
-	z-index: 2147483647;
-	color: #ff0;
-	background: rgba(0, 0, 0, 0.5);
-	padding: 4px 7px;
-	font-size: 14px;
-	pointer-events: none;
-	user-select: none;
-
-	> span {
-		animation: dev-ticker-blink 2s infinite;
-	}
-}
-
-#devTicker {
-	position: fixed;
-	top: 0;
-	left: 0;
-	z-index: 2147483647;
-	color: #ff0;
-	background: rgba(0, 0, 0, 0.5);
-	padding: 4px 5px;
-	font-size: 14px;
-	pointer-events: none;
-	user-select: none;
-
-	> span {
-		animation: dev-ticker-blink 2s infinite;
-	}
-}
-</style>