enhance(frontend): メモ・モデレーションノートが共有されるかどうかを明記する (#244)

taiyme · Aug 12, 2024 · c5fbb2f · c5fbb2f
1 parent a32af6c
commit c5fbb2f
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 4 deletions.
diff --git a/locales/index.d.ts b/locales/index.d.ts
@@ -10281,6 +10281,14 @@ export interface Locale extends ILocale {
          * まだ提供されていません
          */
         readonly "notYetProvided": string;
+        /**
+         * モデレーションノートはモデレーター間で共有されます。
+         */
+        readonly "moderationNoteIsSharedAmongModerators": string;
+        /**
+         * あなたのメモは他のユーザーと共有されません。
+         */
+        readonly "memoIsNotShared": string;
         readonly "_about": {
             /**
              * taiymeについて

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
@@ -2741,6 +2741,8 @@ _tms:
   resolvedBy: "{user}によって解決済み"
   forwardedReport: "リモートサーバーに転送済み"
   notYetProvided: "まだ提供されていません"
+  moderationNoteIsSharedAmongModerators: "モデレーションノートはモデレーター間で共有されます。"
+  memoIsNotShared: "あなたのメモは他のユーザーと共有されません。"
   _about:
     title: "taiymeについて"
     description: "taiymeは、Misskeyから派生したオープンソースのソフトウェアです。"

diff --git a/packages/frontend/src/components/TmsUserMemo.input.vue b/packages/frontend/src/components/TmsUserMemo.input.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div class="_gaps_s">
+<div>
 	<div :class="$style.textarea" @click="focus">
 		<div :class="$style.heading"><slot name="heading"></slot></div>
 		<textarea
@@ -15,8 +15,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 			@input="adjustInputEl"
 		/>
 	</div>
-	<div v-if="changed" class="_buttons">
-		<MkButton small primary @click="update"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
+	<div v-if="changed" :class="$style.footer">
+		<div :class="$style.caption"><slot name="caption"></slot></div>
+		<MkButton small primary :class="$style.save" @click="update"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
 	</div>
 </div>
 </template>
@@ -100,4 +101,26 @@ defineExpose({
 	background: transparent;
 	font-family: inherit;
 }
+
+.footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	flex-wrap: wrap;
+	gap: 4px;
+	padding: 6px 0 0 0;
+}
+
+.caption {
+	font-size: 0.85em;
+	color: var(--fgTransparentWeak);
+
+	&:empty {
+		display: none;
+	}
+}
+
+.save {
+	margin-left: auto;
+}
 </style>
diff --git a/packages/frontend/src/components/TmsUserMemo.vue b/packages/frontend/src/components/TmsUserMemo.vue
@@ -7,16 +7,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div v-if="$i != null" class="_gaps_s">
 	<XMemoInput v-if="iAmModerator" v-model="moderationNote" @update:modelValue="updateModerationNote">
 		<template #heading>{{ i18n.ts.moderationNote }}</template>
+		<template #caption>{{ i18n.ts._tms.moderationNoteIsSharedAmongModerators }}</template>
 	</XMemoInput>
 	<XMemoInput v-model="userMemo" @update:modelValue="updateUserMemo">
 		<template #heading>{{ i18n.ts.memo }}</template>
+		<template #caption>{{ i18n.ts._tms.memoIsNotShared }}</template>
 	</XMemoInput>
 </div>
 </template>
 
 <script lang="ts" setup>
 import { defineAsyncComponent, ref } from 'vue';
-import * as Misskey from 'misskey-js';
+import type * as Misskey from 'misskey-js';
 import { $i, iAmModerator } from '@/account.js';
 import { i18n } from '@/i18n.js';
 import { apiWithDialog } from '@/os.js';