From db734f9e553de4518d07ee6dea0a5a7122a9e356 Mon Sep 17 00:00:00 2001
From: taiy <53635909+taiyme@users.noreply.github.com>
Date: Tue, 2 Jul 2024 00:04:47 +0900
Subject: [PATCH 1/6] =?UTF-8?q?improve(frontend):=20=E3=82=B5=E3=83=BC?=
 =?UTF-8?q?=E3=83=90=E3=83=BC=E6=83=85=E5=A0=B1=E3=83=BB=E3=81=8A=E5=95=8F?=
 =?UTF-8?q?=E3=81=84=E5=90=88=E3=82=8F=E3=81=9B=E3=83=9A=E3=83=BC=E3=82=B8?=
 =?UTF-8?q?=E3=82=92=E6=94=B9=E4=BF=AE=20(#238)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Revert "Revert "enhance(frontend): add contact page" (#208)" (This reverts commit 5a329a09c987b3249f97f9d53af67d1bffb09eea.)

* improve(frontend): サーバー情報・お問い合わせページを改修

(cherry picked from commit e72758d8cda3db009c5d1bf1f4141682931b91f8)
---
 packages/frontend/src/components/MkMenu.vue   |   1 +
 .../src/components/MkVisitorDashboard.vue     |  11 +-
 .../frontend/src/pages/about.overview.vue     | 169 +++++++++++++++
 packages/frontend/src/pages/about.vue         | 201 +-----------------
 packages/frontend/src/pages/contact.vue       |  26 ++-
 packages/frontend/src/ui/_common_/common.ts   |  24 +--
 6 files changed, 212 insertions(+), 220 deletions(-)
 create mode 100644 packages/frontend/src/pages/about.overview.vue

diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index 68479989b2a8..2276da1d21af 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -54,6 +54,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				:class="['_button', $style.item]"
 				:href="item.href"
 				:target="item.target"
+				:rel="item.target === '_blank' ? 'noopener noreferrer' : undefined"
 				:download="item.download"
 				@click.passive="close(true)"
 				@mouseenter.passive="onItemMouseEnter"
diff --git a/packages/frontend/src/components/MkVisitorDashboard.vue b/packages/frontend/src/components/MkVisitorDashboard.vue
index 4d81bd02838f..445780eca73d 100644
--- a/packages/frontend/src/components/MkVisitorDashboard.vue
+++ b/packages/frontend/src/components/MkVisitorDashboard.vue
@@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 			<div class="_gaps_s" :class="$style.mainActions">
 				<MkButton :class="$style.mainAction" full rounded gradate data-cy-signup style="margin-right: 12px;" @click="signup()">{{ i18n.ts.joinThisServer }}</MkButton>
-				<MkButton :class="$style.mainAction" full rounded @click="exploreOtherServers()">{{ i18n.ts.exploreOtherServers }}</MkButton>
+				<MkButton :class="$style.mainAction" full rounded link to="https://misskey-hub.net/servers/">{{ i18n.ts.exploreOtherServers }}</MkButton>
 				<MkButton :class="$style.mainAction" full rounded data-cy-signin @click="signin()">{{ i18n.ts.login }}</MkButton>
 			</div>
 		</div>
@@ -65,7 +65,8 @@ import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import MkNumber from '@/components/MkNumber.vue';
 import XActiveUsersChart from '@/components/MkVisitorDashboard.ActiveUsersChart.vue';
-import { openInstanceMenu } from '@/ui/_common_/common';
+import { openInstanceMenu } from '@/ui/_common_/common.js';
+import type { MenuItem } from '@/types/menu.js';
 
 const stats = ref<Misskey.entities.StatsResponse | null>(null);
 
@@ -89,13 +90,9 @@ function signup() {
 	});
 }
 
-function showMenu(ev) {
+function showMenu(ev: MouseEvent) {
 	openInstanceMenu(ev);
 }
-
-function exploreOtherServers() {
-	window.open('https://misskey-hub.net/servers/', '_blank', 'noopener');
-}
 </script>
 
 <style lang="scss" module>
diff --git a/packages/frontend/src/pages/about.overview.vue b/packages/frontend/src/pages/about.overview.vue
new file mode 100644
index 000000000000..14033ee07e39
--- /dev/null
+++ b/packages/frontend/src/pages/about.overview.vue
@@ -0,0 +1,169 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_gaps_m">
+	<TmsServerBanner/>
+
+	<MkKeyValue>
+		<template #key>{{ i18n.ts.description }}</template>
+		<template #value><div v-html="instance.description || i18n.ts.headlineMisskey"></div></template>
+	</MkKeyValue>
+
+	<FormSection>
+		<div class="_gaps_m">
+			<TmsSoftwareVersions/>
+			<div v-html="i18n.tsx._tms.poweredByTaiyme({ name: instance.name ?? host })"></div>
+			<div class="_gaps_s">
+				<FormLink to="/tms/about">
+					<template #icon><i class="ti ti-info-circle"></i></template>
+					<template #default>{{ i18n.ts._tms.aboutTaiyme }}</template>
+				</FormLink>
+				<TmsSoftwareRepository/>
+			</div>
+		</div>
+	</FormSection>
+
+	<FormSection>
+		<div class="_gaps_m">
+			<FormSplit>
+				<MkKeyValue :copy="instance.maintainerName">
+					<template #key>{{ i18n.ts.administrator }}</template>
+					<template #value>
+						<template v-if="instance.maintainerName">{{ instance.maintainerName }}</template>
+						<span v-else style="opacity: 0.7;">({{ i18n.ts._tms.notYetProvided }})</span>
+					</template>
+				</MkKeyValue>
+				<MkKeyValue :copy="instance.maintainerEmail">
+					<template #key>{{ i18n.ts.contact }}</template>
+					<template #value>
+						<template v-if="instance.maintainerEmail">{{ instance.maintainerEmail }}</template>
+						<span v-else style="opacity: 0.7;">({{ i18n.ts._tms.notYetProvided }})</span>
+					</template>
+				</MkKeyValue>
+				<MkKeyValue>
+					<template #key>{{ i18n.ts.inquiry }}</template>
+					<template #value>
+						<MkLink v-if="instance.inquiryUrl" :url="instance.inquiryUrl" target="_blank">{{ instance.inquiryUrl }}</MkLink>
+						<span v-else style="opacity: 0.7;">({{ i18n.ts._tms.notYetProvided }})</span>
+					</template>
+				</MkKeyValue>
+			</FormSplit>
+			<div class="_gaps_s">
+				<FormLink v-if="instance.impressumUrl" :to="instance.impressumUrl" external>
+					<template #icon><i class="ti ti-user-shield"></i></template>
+					<template #default>{{ i18n.ts.impressum }}</template>
+				</FormLink>
+				<MkFolder v-if="instance.serverRules.length > 0">
+					<template #icon><i class="ti ti-checkup-list"></i></template>
+					<template #label>{{ i18n.ts.serverRules }}</template>
+					<ol class="_gaps_s" :class="$style.rules">
+						<li v-for="item in instance.serverRules" :key="item" :class="$style.rule">
+							<div :class="$style.ruleText" v-html="item"></div>
+						</li>
+					</ol>
+				</MkFolder>
+				<FormLink v-if="instance.tosUrl" :to="instance.tosUrl" external>
+					<template #icon><i class="ti ti-license"></i></template>
+					<template #default>{{ i18n.ts.termsOfService }}</template>
+				</FormLink>
+				<FormLink v-if="instance.privacyPolicyUrl" :to="instance.privacyPolicyUrl" external>
+					<template #icon><i class="ti ti-shield-lock"></i></template>
+					<template #default>{{ i18n.ts.privacyPolicy }}</template>
+				</FormLink>
+				<FormLink v-if="instance.feedbackUrl" :to="instance.feedbackUrl" external>
+					<template #icon><i class="ti ti-message"></i></template>
+					<template #default>{{ i18n.ts.feedback }}</template>
+				</FormLink>
+			</div>
+		</div>
+	</FormSection>
+
+	<FormSuspense :p="initStats" v-slot="{ result: stats }">
+		<FormSection>
+			<template #label>{{ i18n.ts.statistics }}</template>
+			<FormSplit>
+				<MkKeyValue>
+					<template #key>{{ i18n.ts.users }}</template>
+					<template #value>{{ number(stats.originalUsersCount) }}</template>
+				</MkKeyValue>
+				<MkKeyValue>
+					<template #key>{{ i18n.ts.notes }}</template>
+					<template #value>{{ number(stats.originalNotesCount) }}</template>
+				</MkKeyValue>
+			</FormSplit>
+		</FormSection>
+	</FormSuspense>
+
+	<FormSection>
+		<template #label>Well-known resources</template>
+		<div class="_gaps_s">
+			<FormLink to="/.well-known/host-meta" external>host-meta</FormLink>
+			<FormLink to="/.well-known/host-meta.json" external>host-meta.json</FormLink>
+			<FormLink to="/.well-known/nodeinfo" external>nodeinfo</FormLink>
+			<FormLink to="/robots.txt" external>robots.txt</FormLink>
+			<FormLink to="/manifest.json" external>manifest.json</FormLink>
+		</div>
+	</FormSection>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { host } from '@/config.js';
+import { i18n } from '@/i18n.js';
+import { instance } from '@/instance.js';
+import number from '@/filters/number.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
+import FormLink from '@/components/form/link.vue';
+import FormSection from '@/components/form/section.vue';
+import FormSplit from '@/components/form/split.vue';
+import FormSuspense from '@/components/form/suspense.vue';
+import MkFolder from '@/components/MkFolder.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
+import MkLink from '@/components/MkLink.vue';
+import TmsServerBanner from '@/components/TmsServerBanner.vue';
+import TmsSoftwareRepository from '@/components/TmsSoftwareRepository.vue';
+import TmsSoftwareVersions from '@/components/TmsSoftwareVersions.vue';
+
+const initStats = () => misskeyApi('stats', {});
+</script>
+
+<style lang="scss" module>
+.rules {
+	counter-reset: item;
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+.rule {
+	display: flex;
+	gap: 8px;
+	word-break: break-word;
+
+	&::before {
+		flex-shrink: 0;
+		display: flex;
+		position: sticky;
+		top: calc(var(--stickyTop, 0px) + 8px);
+		counter-increment: item;
+		content: counter(item);
+		width: 32px;
+		height: 32px;
+		line-height: 32px;
+		background-color: var(--accentedBg);
+		color: var(--accent);
+		font-size: 13px;
+		font-weight: bold;
+		align-items: center;
+		justify-content: center;
+		border-radius: 999px;
+	}
+}
+
+.ruleText {
+	padding-top: 6px;
+}
+</style>
diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue
index 324d1c11defe..8dfeb6d2a73e 100644
--- a/packages/frontend/src/pages/about.vue
+++ b/packages/frontend/src/pages/about.vue
@@ -8,113 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<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">
-			<div class="_gaps_m">
-				<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }">
-					<div style="overflow: clip;">
-						<img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.bannerIcon"/>
-						<div :class="$style.bannerName">
-							<b>{{ instance.name ?? host }}</b>
-						</div>
-					</div>
-				</div>
-
-				<MkKeyValue>
-					<template #key>{{ i18n.ts.description }}</template>
-					<template #value><div v-html="instance.description"></div></template>
-				</MkKeyValue>
-
-				<FormSection>
-					<div class="_gaps_m">
-						<MkKeyValue :copy="version">
-							<template #key>Misskey</template>
-							<template #value>{{ version }}</template>
-						</MkKeyValue>
-						<div v-html="i18n.tsx.poweredByMisskeyDescription({ name: instance.name ?? host })">
-						</div>
-						<FormLink to="/about-misskey">
-							<template #icon><i class="ti ti-info-circle"></i></template>
-							{{ i18n.ts.aboutMisskey }}
-						</FormLink>
-						<FormLink v-if="instance.repositoryUrl || instance.providesTarball" :to="instance.repositoryUrl || `/tarball/misskey-${version}.tar.gz`" external>
-							<template #icon><i class="ti ti-code"></i></template>
-							{{ i18n.ts.sourceCode }}
-						</FormLink>
-						<MkInfo v-else warn>
-							{{ i18n.ts.sourceCodeIsNotYetProvided }}
-						</MkInfo>
-					</div>
-				</FormSection>
-
-				<FormSection>
-					<div class="_gaps_m">
-						<FormSplit>
-							<MkKeyValue>
-								<template #key>{{ i18n.ts.administrator }}</template>
-								<template #value>{{ instance.maintainerName }}</template>
-							</MkKeyValue>
-							<MkKeyValue>
-								<template #key>{{ i18n.ts.contact }}</template>
-								<template #value>{{ instance.maintainerEmail }}</template>
-							</MkKeyValue>
-						</FormSplit>
-						<FormLink v-if="instance.impressumUrl" :to="instance.impressumUrl" external>
-							<template #icon><i class="ti ti-user-shield"></i></template>
-							{{ i18n.ts.impressum }}
-						</FormLink>
-						<div class="_gaps_s">
-							<MkFolder v-if="instance.serverRules.length > 0">
-								<template #label>
-									<i class="ti ti-checkup-list"></i>
-									{{ i18n.ts.serverRules }}
-								</template>
-
-								<ol class="_gaps_s" :class="$style.rules">
-									<li v-for="(item, index) in instance.serverRules" :key="index" :class="$style.rule"><div :class="$style.ruleText" v-html="item"></div></li>
-								</ol>
-							</MkFolder>
-							<FormLink v-if="instance.tosUrl" :to="instance.tosUrl" external>
-								<template #icon><i class="ti ti-license"></i></template>
-								{{ i18n.ts.termsOfService }}
-							</FormLink>
-							<FormLink v-if="instance.privacyPolicyUrl" :to="instance.privacyPolicyUrl" external>
-								<template #icon><i class="ti ti-shield-lock"></i></template>
-								{{ i18n.ts.privacyPolicy }}
-							</FormLink>
-							<FormLink v-if="instance.feedbackUrl" :to="instance.feedbackUrl" external>
-								<template #icon><i class="ti ti-message"></i></template>
-								{{ i18n.ts.feedback }}
-							</FormLink>
-						</div>
-					</div>
-				</FormSection>
-
-				<FormSuspense :p="initStats">
-					<FormSection>
-						<template #label>{{ i18n.ts.statistics }}</template>
-						<FormSplit>
-							<MkKeyValue>
-								<template #key>{{ i18n.ts.users }}</template>
-								<template #value>{{ number(stats.originalUsersCount) }}</template>
-							</MkKeyValue>
-							<MkKeyValue>
-								<template #key>{{ i18n.ts.notes }}</template>
-								<template #value>{{ number(stats.originalNotesCount) }}</template>
-							</MkKeyValue>
-						</FormSplit>
-					</FormSection>
-				</FormSuspense>
-
-				<FormSection>
-					<template #label>Well-known resources</template>
-					<div class="_gaps_s">
-						<FormLink :to="`/.well-known/host-meta`" external>host-meta</FormLink>
-						<FormLink :to="`/.well-known/host-meta.json`" external>host-meta.json</FormLink>
-						<FormLink :to="`/.well-known/nodeinfo`" external>nodeinfo</FormLink>
-						<FormLink :to="`/robots.txt`" external>robots.txt</FormLink>
-						<FormLink :to="`/manifest.json`" external>manifest.json</FormLink>
-					</div>
-				</FormSection>
-			</div>
+			<XOverview/>
 		</MkSpacer>
 		<MkSpacer v-else-if="tab === 'emojis'" :contentMax="1000" :marginMin="20">
 			<XEmojis/>
@@ -130,26 +24,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, ref } from 'vue';
-import * as Misskey from 'misskey-js';
-import XEmojis from './about.emojis.vue';
-import XFederation from './about.federation.vue';
-import { version, host } from '@/config.js';
-import FormLink from '@/components/form/link.vue';
-import FormSection from '@/components/form/section.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import FormSplit from '@/components/form/split.vue';
-import MkFolder from '@/components/MkFolder.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import MkInstanceStats from '@/components/MkInstanceStats.vue';
-import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
-import { misskeyApi } from '@/scripts/misskey-api.js';
-import number from '@/filters/number.js';
+import { computed, defineAsyncComponent, ref, watch } from 'vue';
 import { i18n } from '@/i18n.js';
-import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { claimAchievement } from '@/scripts/achievements.js';
-import { instance } from '@/instance.js';
+import { definePageMetadata } from '@/scripts/page-metadata.js';
+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;
@@ -157,7 +41,6 @@ const props = withDefaults(defineProps<{
 	initialTab: 'overview',
 });
 
-const stats = ref<Misskey.entities.StatsResponse | null>(null);
 const tab = ref(props.initialTab);
 
 watch(tab, () => {
@@ -166,11 +49,6 @@ watch(tab, () => {
 	}
 });
 
-const initStats = () => misskeyApi('stats', {
-}).then((res) => {
-	stats.value = res;
-});
-
 const headerActions = computed(() => []);
 
 const headerTabs = computed(() => [{
@@ -195,64 +73,3 @@ definePageMetadata(() => ({
 	icon: 'ti ti-info-circle',
 }));
 </script>
-
-<style lang="scss" module>
-.banner {
-	text-align: center;
-	border-radius: 10px;
-	overflow: clip;
-	background-size: cover;
-	background-position: center center;
-}
-
-.bannerIcon {
-	display: block;
-	margin: 16px auto 0 auto;
-	height: 64px;
-	border-radius: 8px;
-}
-
-.bannerName {
-	display: block;
-	padding: 16px;
-	color: #fff;
-	text-shadow: 0 0 8px #000;
-	background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
-}
-
-.rules {
-	counter-reset: item;
-	list-style: none;
-	padding: 0;
-	margin: 0;
-}
-
-.rule {
-	display: flex;
-	gap: 8px;
-	word-break: break-word;
-
-	&::before {
-		flex-shrink: 0;
-		display: flex;
-		position: sticky;
-		top: calc(var(--stickyTop, 0px) + 8px);
-		counter-increment: item;
-		content: counter(item);
-		width: 32px;
-		height: 32px;
-		line-height: 32px;
-		background-color: var(--accentedBg);
-		color: var(--accent);
-		font-size: 13px;
-		font-weight: bold;
-		align-items: center;
-		justify-content: center;
-		border-radius: 999px;
-	}
-}
-
-.ruleText {
-	padding-top: 6px;
-}
-</style>
diff --git a/packages/frontend/src/pages/contact.vue b/packages/frontend/src/pages/contact.vue
index bcdcf4327552..b78c239d3785 100644
--- a/packages/frontend/src/pages/contact.vue
+++ b/packages/frontend/src/pages/contact.vue
@@ -7,18 +7,26 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader/></template>
 	<MkSpacer :contentMax="600" :marginMin="20">
-		<div class="_gaps">
-			<MkKeyValue>
-				<template #key>{{ i18n.ts.inquiry }}</template>
+		<div class="_gaps_m">
+			<MkKeyValue :copy="instance.maintainerName">
+				<template #key>{{ i18n.ts.administrator }}</template>
 				<template #value>
-					<MkLink :url="instance.inquiryUrl" target="_blank">{{ instance.inquiryUrl }}</MkLink>
+					<template v-if="instance.maintainerName">{{ instance.maintainerName }}</template>
+					<span v-else style="opacity: 0.7;">({{ i18n.ts._tms.notYetProvided }})</span>
 				</template>
 			</MkKeyValue>
-
-			<MkKeyValue>
-				<template #key>{{ i18n.ts.email }}</template>
+			<MkKeyValue :copy="instance.maintainerEmail">
+				<template #key>{{ i18n.ts.contact }}</template>
+				<template #value>
+					<template v-if="instance.maintainerEmail">{{ instance.maintainerEmail }}</template>
+					<span v-else style="opacity: 0.7;">({{ i18n.ts._tms.notYetProvided }})</span>
+				</template>
+			</MkKeyValue>
+			<MkKeyValue :copy="instance.inquiryUrl">
+				<template #key>{{ i18n.ts.inquiry }}</template>
 				<template #value>
-					<div>{{ instance.maintainerEmail }}</div>
+					<MkLink v-if="instance.inquiryUrl" :url="instance.inquiryUrl" target="_blank">{{ instance.inquiryUrl }}</MkLink>
+					<span v-else style="opacity: 0.7;">({{ i18n.ts._tms.notYetProvided }})</span>
 				</template>
 			</MkKeyValue>
 		</div>
@@ -28,8 +36,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { i18n } from '@/i18n.js';
-import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { instance } from '@/instance.js';
+import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 import MkLink from '@/components/MkLink.vue';
 
diff --git a/packages/frontend/src/ui/_common_/common.ts b/packages/frontend/src/ui/_common_/common.ts
index 20a280f681e9..74c30287450f 100644
--- a/packages/frontend/src/ui/_common_/common.ts
+++ b/packages/frontend/src/ui/_common_/common.ts
@@ -85,29 +85,29 @@ export function openInstanceMenu(ev: MouseEvent) {
 		icon: 'ti ti-help-circle',
 		to: '/contact',
 	}, (instance.impressumUrl) ? {
+		type: 'a',
 		text: i18n.ts.impressum,
 		icon: 'ti ti-file-invoice',
-		action: () => {
-			window.open(instance.impressumUrl, '_blank', 'noopener');
-		},
+		href: instance.impressumUrl,
+		target: '_blank',
 	} : undefined, (instance.tosUrl) ? {
+		type: 'a',
 		text: i18n.ts.termsOfService,
 		icon: 'ti ti-notebook',
-		action: () => {
-			window.open(instance.tosUrl, '_blank', 'noopener');
-		},
+		href: instance.tosUrl,
+		target: '_blank',
 	} : undefined, (instance.privacyPolicyUrl) ? {
+		type: 'a',
 		text: i18n.ts.privacyPolicy,
 		icon: 'ti ti-shield-lock',
-		action: () => {
-			window.open(instance.privacyPolicyUrl, '_blank', 'noopener');
-		},
+		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',
-		action: () => {
-			window.open('https://misskey-hub.net/docs/for-users/', '_blank', 'noopener');
-		},
+		href: 'https://misskey-hub.net/docs/for-users/',
+		target: '_blank',
 	}, ($i) ? {
 		text: i18n.ts._initialTutorial.launchTutorial,
 		icon: 'ti ti-presentation',

From 567bf20627df9ba7f3047cb8a92152c2f4e4e5b2 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 14 Jul 2024 00:47:13 +0900
Subject: [PATCH 2/6] fix

---
 locales/index.d.ts                            |  4 ++
 locales/ja-JP.yml                             |  1 +
 .../frontend/src/pages/about.overview.vue     | 69 ++++++++++++++-----
 3 files changed, 57 insertions(+), 17 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 5089f7802e82..65b829ef5e76 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -4984,6 +4984,10 @@ export interface Locale extends ILocale {
      * お問い合わせ
      */
     "inquiry": string;
+    /**
+     * まだ提供されていません
+     */
+    "notYetProvided": string;
     "_delivery": {
         /**
          * 配信状態
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index a03d7921401d..1c4bf8bc0ea0 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1242,6 +1242,7 @@ keepOriginalFilenameDescription: "この設定をオフにすると、アップ
 noDescription: "説明文はありません"
 alwaysConfirmFollow: "フォローの際常に確認する"
 inquiry: "お問い合わせ"
+notYetProvided: "まだ提供されていません"
 
 _delivery:
   status: "配信状態"
diff --git a/packages/frontend/src/pages/about.overview.vue b/packages/frontend/src/pages/about.overview.vue
index 14033ee07e39..e20dd75b0ac5 100644
--- a/packages/frontend/src/pages/about.overview.vue
+++ b/packages/frontend/src/pages/about.overview.vue
@@ -5,24 +5,39 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div class="_gaps_m">
-	<TmsServerBanner/>
+	<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }">
+		<div style="overflow: clip;">
+			<img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.bannerIcon"/>
+			<div :class="$style.bannerName">
+				<b>{{ instance.name ?? host }}</b>
+			</div>
+		</div>
+	</div>
 
 	<MkKeyValue>
 		<template #key>{{ i18n.ts.description }}</template>
-		<template #value><div v-html="instance.description || i18n.ts.headlineMisskey"></div></template>
+		<template #value><div v-html="instance.description"></div></template>
 	</MkKeyValue>
 
 	<FormSection>
 		<div class="_gaps_m">
-			<TmsSoftwareVersions/>
-			<div v-html="i18n.tsx._tms.poweredByTaiyme({ name: instance.name ?? host })"></div>
-			<div class="_gaps_s">
-				<FormLink to="/tms/about">
-					<template #icon><i class="ti ti-info-circle"></i></template>
-					<template #default>{{ i18n.ts._tms.aboutTaiyme }}</template>
-				</FormLink>
-				<TmsSoftwareRepository/>
+			<MkKeyValue :copy="version">
+				<template #key>Misskey</template>
+				<template #value>{{ version }}</template>
+			</MkKeyValue>
+			<div v-html="i18n.tsx.poweredByMisskeyDescription({ name: instance.name ?? host })">
 			</div>
+			<FormLink to="/about-misskey">
+				<template #icon><i class="ti ti-info-circle"></i></template>
+				{{ i18n.ts.aboutMisskey }}
+			</FormLink>
+			<FormLink v-if="instance.repositoryUrl || instance.providesTarball" :to="instance.repositoryUrl || `/tarball/misskey-${version}.tar.gz`" external>
+				<template #icon><i class="ti ti-code"></i></template>
+				{{ i18n.ts.sourceCode }}
+			</FormLink>
+			<MkInfo v-else warn>
+				{{ i18n.ts.sourceCodeIsNotYetProvided }}
+			</MkInfo>
 		</div>
 	</FormSection>
 
@@ -33,21 +48,21 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #key>{{ i18n.ts.administrator }}</template>
 					<template #value>
 						<template v-if="instance.maintainerName">{{ instance.maintainerName }}</template>
-						<span v-else style="opacity: 0.7;">({{ i18n.ts._tms.notYetProvided }})</span>
+						<span v-else style="opacity: 0.7;">({{ i18n.ts.notYetProvided }})</span>
 					</template>
 				</MkKeyValue>
 				<MkKeyValue :copy="instance.maintainerEmail">
 					<template #key>{{ i18n.ts.contact }}</template>
 					<template #value>
 						<template v-if="instance.maintainerEmail">{{ instance.maintainerEmail }}</template>
-						<span v-else style="opacity: 0.7;">({{ i18n.ts._tms.notYetProvided }})</span>
+						<span v-else style="opacity: 0.7;">({{ i18n.ts.notYetProvided }})</span>
 					</template>
 				</MkKeyValue>
 				<MkKeyValue>
 					<template #key>{{ i18n.ts.inquiry }}</template>
 					<template #value>
 						<MkLink v-if="instance.inquiryUrl" :url="instance.inquiryUrl" target="_blank">{{ instance.inquiryUrl }}</MkLink>
-						<span v-else style="opacity: 0.7;">({{ i18n.ts._tms.notYetProvided }})</span>
+						<span v-else style="opacity: 0.7;">({{ i18n.ts.notYetProvided }})</span>
 					</template>
 				</MkKeyValue>
 			</FormSplit>
@@ -111,7 +126,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { host } from '@/config.js';
+import { host, version } from '@/config.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import number from '@/filters/number.js';
@@ -123,14 +138,34 @@ import FormSuspense from '@/components/form/suspense.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 import MkLink from '@/components/MkLink.vue';
-import TmsServerBanner from '@/components/TmsServerBanner.vue';
-import TmsSoftwareRepository from '@/components/TmsSoftwareRepository.vue';
-import TmsSoftwareVersions from '@/components/TmsSoftwareVersions.vue';
 
 const initStats = () => misskeyApi('stats', {});
 </script>
 
 <style lang="scss" module>
+.banner {
+	text-align: center;
+	border-radius: 10px;
+	overflow: clip;
+	background-size: cover;
+	background-position: center center;
+}
+
+.bannerIcon {
+	display: block;
+	margin: 16px auto 0 auto;
+	height: 64px;
+	border-radius: 8px;
+}
+
+.bannerName {
+	display: block;
+	padding: 16px;
+	color: #fff;
+	text-shadow: 0 0 8px #000;
+	background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+}
+
 .rules {
 	counter-reset: item;
 	list-style: none;

From 8298ffc2b49c5c3c57e5749b7a72cda3c1e52e84 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 14 Jul 2024 00:48:14 +0900
Subject: [PATCH 3/6] Update Changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5533e3b518de..9ef216e66668 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,8 @@
 - Enhance: 非ログイン時のハイライトTLのデザインを改善
 - Enhance: フロントエンドのアクセシビリティ改善  
   (Based on https://github.com/taiyme/misskey/pull/226)
+- Enhance: サーバー情報ページ・お問い合わせページを改善  
+  (Cherry-picked from https://github.com/taiyme/misskey/pull/238)
 - Fix: `/about#federation` ページなどで各インスタンスのチャートが表示されなくなっていた問題を修正
 - Fix: ユーザーページの追加情報のラベルを投稿者のサーバーの絵文字で表示する (#13968)
 - Fix: リバーシの対局を正しく共有できないことがある問題を修正

From 0003dd825c2ad80b86d50143983c3eeac4d4fa79 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 14 Jul 2024 00:54:09 +0900
Subject: [PATCH 4/6] tweak

---
 packages/frontend/src/pages/about.overview.vue | 1 +
 packages/frontend/src/pages/contact.vue        | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/pages/about.overview.vue b/packages/frontend/src/pages/about.overview.vue
index e20dd75b0ac5..9ca1a8d22943 100644
--- a/packages/frontend/src/pages/about.overview.vue
+++ b/packages/frontend/src/pages/about.overview.vue
@@ -147,6 +147,7 @@ const initStats = () => misskeyApi('stats', {});
 	text-align: center;
 	border-radius: 10px;
 	overflow: clip;
+	background-color: var(--panel);
 	background-size: cover;
 	background-position: center center;
 }
diff --git a/packages/frontend/src/pages/contact.vue b/packages/frontend/src/pages/contact.vue
index b78c239d3785..8c9968236a53 100644
--- a/packages/frontend/src/pages/contact.vue
+++ b/packages/frontend/src/pages/contact.vue
@@ -12,21 +12,21 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #key>{{ i18n.ts.administrator }}</template>
 				<template #value>
 					<template v-if="instance.maintainerName">{{ instance.maintainerName }}</template>
-					<span v-else style="opacity: 0.7;">({{ i18n.ts._tms.notYetProvided }})</span>
+					<span v-else style="opacity: 0.7;">({{ i18n.ts.notYetProvided }})</span>
 				</template>
 			</MkKeyValue>
 			<MkKeyValue :copy="instance.maintainerEmail">
 				<template #key>{{ i18n.ts.contact }}</template>
 				<template #value>
 					<template v-if="instance.maintainerEmail">{{ instance.maintainerEmail }}</template>
-					<span v-else style="opacity: 0.7;">({{ i18n.ts._tms.notYetProvided }})</span>
+					<span v-else style="opacity: 0.7;">({{ i18n.ts.notYetProvided }})</span>
 				</template>
 			</MkKeyValue>
 			<MkKeyValue :copy="instance.inquiryUrl">
 				<template #key>{{ i18n.ts.inquiry }}</template>
 				<template #value>
 					<MkLink v-if="instance.inquiryUrl" :url="instance.inquiryUrl" target="_blank">{{ instance.inquiryUrl }}</MkLink>
-					<span v-else style="opacity: 0.7;">({{ i18n.ts._tms.notYetProvided }})</span>
+					<span v-else style="opacity: 0.7;">({{ i18n.ts.notYetProvided }})</span>
 				</template>
 			</MkKeyValue>
 		</div>

From a2f40c96ace92cadb2fd1deab976a899bef22144 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 14 Jul 2024 01:04:55 +0900
Subject: [PATCH 5/6] lint

---
 packages/frontend/src/pages/about.overview.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/about.overview.vue b/packages/frontend/src/pages/about.overview.vue
index 9ca1a8d22943..834f7f8b2e99 100644
--- a/packages/frontend/src/pages/about.overview.vue
+++ b/packages/frontend/src/pages/about.overview.vue
@@ -96,7 +96,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 	</FormSection>
 
-	<FormSuspense :p="initStats" v-slot="{ result: stats }">
+	<FormSuspense v-slot="{ result: stats }" :p="initStats">
 		<FormSection>
 			<template #label>{{ i18n.ts.statistics }}</template>
 			<FormSplit>

From 8de1cfa05fa063142dadd2f2092bb89000662364 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 14 Jul 2024 14:47:36 +0900
Subject: [PATCH 6/6] =?UTF-8?q?=E6=97=A2=E5=AD=98=E3=81=AE=E7=BF=BB?=
 =?UTF-8?q?=E8=A8=B3=E3=82=92=E4=BD=BF=E7=94=A8=E3=81=99=E3=82=8B=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/index.d.ts                             | 4 ----
 locales/ja-JP.yml                              | 1 -
 packages/frontend/src/pages/about.overview.vue | 6 +++---
 packages/frontend/src/pages/contact.vue        | 6 +++---
 4 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 65b829ef5e76..5089f7802e82 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -4984,10 +4984,6 @@ export interface Locale extends ILocale {
      * お問い合わせ
      */
     "inquiry": string;
-    /**
-     * まだ提供されていません
-     */
-    "notYetProvided": string;
     "_delivery": {
         /**
          * 配信状態
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 1c4bf8bc0ea0..a03d7921401d 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1242,7 +1242,6 @@ keepOriginalFilenameDescription: "この設定をオフにすると、アップ
 noDescription: "説明文はありません"
 alwaysConfirmFollow: "フォローの際常に確認する"
 inquiry: "お問い合わせ"
-notYetProvided: "まだ提供されていません"
 
 _delivery:
   status: "配信状態"
diff --git a/packages/frontend/src/pages/about.overview.vue b/packages/frontend/src/pages/about.overview.vue
index 834f7f8b2e99..84419b3bef17 100644
--- a/packages/frontend/src/pages/about.overview.vue
+++ b/packages/frontend/src/pages/about.overview.vue
@@ -48,21 +48,21 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #key>{{ i18n.ts.administrator }}</template>
 					<template #value>
 						<template v-if="instance.maintainerName">{{ instance.maintainerName }}</template>
-						<span v-else style="opacity: 0.7;">({{ i18n.ts.notYetProvided }})</span>
+						<span v-else style="opacity: 0.7;">({{ i18n.ts.none }})</span>
 					</template>
 				</MkKeyValue>
 				<MkKeyValue :copy="instance.maintainerEmail">
 					<template #key>{{ i18n.ts.contact }}</template>
 					<template #value>
 						<template v-if="instance.maintainerEmail">{{ instance.maintainerEmail }}</template>
-						<span v-else style="opacity: 0.7;">({{ i18n.ts.notYetProvided }})</span>
+						<span v-else style="opacity: 0.7;">({{ i18n.ts.none }})</span>
 					</template>
 				</MkKeyValue>
 				<MkKeyValue>
 					<template #key>{{ i18n.ts.inquiry }}</template>
 					<template #value>
 						<MkLink v-if="instance.inquiryUrl" :url="instance.inquiryUrl" target="_blank">{{ instance.inquiryUrl }}</MkLink>
-						<span v-else style="opacity: 0.7;">({{ i18n.ts.notYetProvided }})</span>
+						<span v-else style="opacity: 0.7;">({{ i18n.ts.none }})</span>
 					</template>
 				</MkKeyValue>
 			</FormSplit>
diff --git a/packages/frontend/src/pages/contact.vue b/packages/frontend/src/pages/contact.vue
index 8c9968236a53..1f2bee5a778a 100644
--- a/packages/frontend/src/pages/contact.vue
+++ b/packages/frontend/src/pages/contact.vue
@@ -12,21 +12,21 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #key>{{ i18n.ts.administrator }}</template>
 				<template #value>
 					<template v-if="instance.maintainerName">{{ instance.maintainerName }}</template>
-					<span v-else style="opacity: 0.7;">({{ i18n.ts.notYetProvided }})</span>
+					<span v-else style="opacity: 0.7;">({{ i18n.ts.none }})</span>
 				</template>
 			</MkKeyValue>
 			<MkKeyValue :copy="instance.maintainerEmail">
 				<template #key>{{ i18n.ts.contact }}</template>
 				<template #value>
 					<template v-if="instance.maintainerEmail">{{ instance.maintainerEmail }}</template>
-					<span v-else style="opacity: 0.7;">({{ i18n.ts.notYetProvided }})</span>
+					<span v-else style="opacity: 0.7;">({{ i18n.ts.none }})</span>
 				</template>
 			</MkKeyValue>
 			<MkKeyValue :copy="instance.inquiryUrl">
 				<template #key>{{ i18n.ts.inquiry }}</template>
 				<template #value>
 					<MkLink v-if="instance.inquiryUrl" :url="instance.inquiryUrl" target="_blank">{{ instance.inquiryUrl }}</MkLink>
-					<span v-else style="opacity: 0.7;">({{ i18n.ts.notYetProvided }})</span>
+					<span v-else style="opacity: 0.7;">({{ i18n.ts.none }})</span>
 				</template>
 			</MkKeyValue>
 		</div>