Enhance(frontend): サーバー情報から公式タグの一覧を見れるように

CHANGELOG_YOJO.md

@@ -27,6 +27,7 @@
   - (Cherry-picked from https://github.com/MisskeyIO/misskey/pull/696)
 
 ### Client
+- Enhance: `/about`で公式タグを表示できるように
 - Fix: 検索画面の不具合を修正
   - リモートユーザー高度な検索画面で照会しますか？のダイアログが出ない問題
   - ユーザー検索画面で照会しますか？のダイアログが2つ出る問題 

locales/index.d.ts

@@ -5588,6 +5588,10 @@ export interface Locale extends ILocale {
          * 優先度の値が小さいものが上に表示されます
          */
         "adminTopInfo": string;
+        /**
+         * タグ名
+         */
+        "adminTagName": string;
     };
     /**
      * マスコット画像のリンク

locales/ja-JP.yml

@@ -1393,6 +1393,7 @@ _official_tag:
   title: "公式タグ"
   navbar: "公式タグ"
   adminTopInfo: "優先度の値が小さいものが上に表示されます"
+  adminTagName: "タグ名"
 mascotImageUrl: "マスコット画像のリンク"
 _checkR18:
   title: "成人指定のメディアです"

packages/frontend/src/pages/about.vue

@@ -19,6 +19,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkSpacer v-else-if="tab === 'charts'" :contentMax="1000" :marginMin="20">
 			<MkInstanceStats/>
 		</MkSpacer>
+		<MkSpacer v-else-if="tab === 'officialTags'" :contentMax="1000" :marginMin="20">
+			<XOfficialTag :showHeader="false"/>
+		</MkSpacer>
 	</MkHorizontalSwipe>
 </MkStickyContainer>
 </template>
@@ -34,6 +37,7 @@ 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 XOfficialTag = defineAsyncComponent(() => import('@/pages/official-tags.vue'));
 
 const props = withDefaults(defineProps<{
 	initialTab?: string;
@@ -66,6 +70,10 @@ const headerTabs = computed(() => [{
 	key: 'charts',
 	title: i18n.ts.charts,
 	icon: 'ti ti-chart-line',
+}, {
+	key: 'officialTags',
+	title: i18n.ts._official_tag.title,
+	icon: 'ti ti-bookmarks',
 }]);
 
 definePageMetadata(() => ({

packages/frontend/src/pages/admin/official-tags.vue

@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkFolder>
 					<template #label>{{ tag.tag }}</template>
 					<MkInput v-model="tag.tag" class="input">
-						<template #label>タグ名</template>
+						<template #label>{{ i18n.ts._official_tag.adminTagName }}</template>
 					</MkInput>
 					<MkInput v-model="tag.bannerUrl" type="url" class="input">
 						<template #label>{{ i18n.ts.imageUrl }}</template>

packages/frontend/src/pages/official-tags.vue

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader/></template>
+	<template v-if="showHeader" #header><MkPageHeader/></template>
 
 	<MkSpacer :contentMax="500">
 		<div class="_gaps">
@@ -22,6 +22,12 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 
+const props = withDefaults(defineProps<{
+	showHeader?: boolean;
+}>(), {
+	showHeader: true,
+});
+
 const official_tags = ref<Misskey.entities.OfficialTagsShowResponse>([]);
 (async () => {
 	official_tags.value = await misskeyApi('official-tags/show', {});

packages/frontend/src/ui/_common_/common.ts

@@ -74,6 +74,11 @@ export function openInstanceMenu(ev: MouseEvent) {
 		text: i18n.ts.charts,
 		icon: 'ti ti-chart-line',
 		to: '/about#charts',
+	}, {
+		type: 'link',
+		text: i18n.ts._official_tag.title,
+		icon: 'ti ti-bookmarks',
+		to: '/about#officialTags',
 	}, { type: 'divider' }, {
 		type: 'link',
 		text: i18n.ts.ads,