fix(frontend): ロールのタイトルのバグを解決、Reactivity Transformで型エラーを出さないように (#10729)

* fix: #10569を解決

* fix: ロールが存在しない場合、タイトルにエラーメッセージを表示させる

* fix: Reactivity Transformで型エラーを出さないように

* feat: i18n対応

* feat: タブでエラー表示

* fix: エラーメッセージを分ける

* fix: 使う変数の間違えを修正

* productionビルドできない問題を修正

---------

Co-authored-by: tamaina <tamaina@hotmail.co.jp>

4 files changed, 45 insertions, 3 deletions

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 09ddfa4c51..5b1318fb1d 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -22,6 +22,7 @@
 		"@syuilo/aiscript": "0.13.1",
 		"@tabler/icons-webfont": "2.16.0",
 		"@vitejs/plugin-vue": "4.1.0",
+		"@vue-macros/reactivity-transform": "^0.3.5",
 		"@vue/compiler-sfc": "3.2.47",
 		"autosize": "5.0.2",
 		"blurhash": "2.0.5",
diff --git a/packages/frontend/src/pages/role.vue b/packages/frontend/src/pages/role.vue
index f2645394a2..fe39c594ba 100644
--- a/packages/frontend/src/pages/role.vue
+++ b/packages/frontend/src/pages/role.vue
@@ -1,8 +1,16 @@
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :tabs="headerTabs"/></template>
-
-	<MkSpacer v-if="tab === 'users'" :content-max="1200">
+	<MKSpacer v-if="!(typeof error === 'undefined')" :content-max="1200">
+		<div :class="$style.root">
+			<img :class="$style.img" src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
+			<p :class="$style.text">
+				<i class="ti ti-alert-triangle"></i>
+				{{ error }}
+			</p>
+		</div>
+	</MKSpacer>
+	<MkSpacer v-else-if="tab === 'users'" :content-max="1200">
 		<div class="_gaps_s">
 			<div v-if="role">{{ role.description }}</div>
 			<MkUserList :pagination="users" :extractor="(item) => item.user"/>
@@ -13,7 +21,6 @@
 	</MkSpacer>
 </MkStickyContainer>
 </template>
-
 <script lang="ts" setup>
 import { computed, watch } from 'vue';
 import * as os from '@/os';
@@ -21,6 +28,7 @@ import MkUserList from '@/components/MkUserList.vue';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { i18n } from '@/i18n';
 import MkTimeline from '@/components/MkTimeline.vue';
+import { instanceName } from '@/config';
 
 const props = withDefaults(defineProps<{
 	role: string;
@@ -31,12 +39,21 @@ const props = withDefaults(defineProps<{
 
 let tab = $ref(props.initialTab);
 let role = $ref();
+let error = $ref();
 
 watch(() => props.role, () => {
 	os.api('roles/show', {
 		roleId: props.role,
 	}).then(res => {
 		role = res;
+		document.title = `${role?.name} | ${instanceName}`;
+	}).catch((err) => {
+		if (err.code === 'NO_SUCH_ROLE') {
+			error = i18n.ts.noRole;
+		} else {
+			error = i18n.ts.somethingHappened;
+		}
+		document.title = `${error} | ${instanceName}`;
 	});
 }, { immediate: true });
 
@@ -63,4 +80,23 @@ definePageMetadata(computed(() => ({
 	icon: 'ti ti-badge',
 })));
 </script>
+<style lang="scss" module>
+.root {
+	padding: 32px;
+	text-align: center;
+  align-items: center;
+}
+
+.text {
+	margin: 0 0 8px 0;
+}
+
+.img {
+	vertical-align: bottom;
+  width: 128px;
+	height: 128px;
+	margin-bottom: 16px;
+	border-radius: 16px;
+}
+</style>
 
diff --git a/packages/frontend/tsconfig.json b/packages/frontend/tsconfig.json
index 4d582daa3c..514b304246 100644
--- a/packages/frontend/tsconfig.json
+++ b/packages/frontend/tsconfig.json
@@ -27,10 +27,12 @@
 		},
 		"typeRoots": [
 			"node_modules/@types",
+			"node_modules/@vue-macros",
 			"@types",
 		],
 		"types": [
 			"vite/client",
+			"reactivity-transform/macros-global"
 		],
 		"lib": [
 			"esnext",
diff --git a/packages/frontend/vite.config.ts b/packages/frontend/vite.config.ts
index 003a1fe4df..295380af82 100644
--- a/packages/frontend/vite.config.ts
+++ b/packages/frontend/vite.config.ts
@@ -2,6 +2,8 @@ import path from 'path';
 import pluginReplace from '@rollup/plugin-replace';
 import pluginVue from '@vitejs/plugin-vue';
 import { type UserConfig, defineConfig } from 'vite';
+// @ts-expect-error https://github.com/sxzz/unplugin-vue-macros/issues/257#issuecomment-1410752890
+import ReactivityTransform from '@vue-macros/reactivity-transform/vite';
 
 import locales from '../../locales';
 import meta from '../../package.json';
@@ -46,6 +48,7 @@ export function getConfig(): UserConfig {
 			pluginVue({
 				reactivityTransform: true,
 			}),
+			ReactivityTransform(),
 			pluginJson5(),
 			...process.env.NODE_ENV === 'production'
 				? [