collapseUnexpectedLangs

packages/frontend/src/components/MkNote.vue

@@ -12,6 +12,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover, [$style.skipRender]: defaultStore.state.skipNoteRender || defaultStore.state.enableRenderingOptimization }]"
 	:tabindex="isDeleted ? '-1' : '0'"
 >
+
+    <div v-if="collapsedUnexpectedLangs && isUnexpectedLanguage && !languageExpanded" :class="$style.collapsedLanguage">
+        <MkAvatar :class="$style.collapsedLanguageAvatar" :user="appearNote.user" link preview/>
+        <span :class="$style.collapsedLanguageText" @click.stop="languageExpanded = true">
+            <I18n :src="i18n.ts.userSaysInOtherLanguage" tag="small">
+                <template #name>
+                    <MkUserName :user="appearNote.user"/>
+                </template>
+            </I18n>
+        </span>
+    </div>
+	<template v-else>
     <div v-if="appearNote.reply && inReplyToCollapsed && !isRenote" :class="$style.collapsedInReplyTo">
 		<MkAvatar :class="$style.collapsedInReplyToAvatar" :user="appearNote.reply.user" link preview/>
 		<Mfm :text="getNoteSummary(appearNote.reply)" :plain="true" :nowrap="true" :author="appearNote.reply.user" :nyaize="'respect'" :class="$style.collapsedInReplyToText" @click.stop="inReplyToCollapsed = false"/>
@@ -157,6 +169,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</footer>
 		</div>
 	</article>
+    </template>
 </div>
 <div v-else-if="!hardMuted" :class="$style.muted" @click="muted = false">
 	<I18n v-if="muted === 'sensitiveMute'" :src="i18n.ts.userSaysSomethingSensitive" tag="small">
@@ -307,12 +320,15 @@ const renoteCollapsed = ref(
 
 const inReplyToCollapsed = ref(defaultStore.state.collapseNotesRepliedTo);
 const disableReactionsViewer = ref(defaultStore.reactiveState.disableReactionsViewer);
+const collapsedUnexpectedLangs = ref(defaultStore.reactiveState.collapsedUnexpectedLangs);
 
 const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
 	type: 'lookup',
 	url: `https://${host}/notes/${appearNote.value.id}`,
 }));
 
+const languageExpanded = ref(false);
+
 /* Overload FunctionにLintが対応していないのでコメントアウト
 function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array<string | string[]> | undefined | null, checkOnly: true): boolean;
 function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array<string | string[]> | undefined | null, checkOnly: false): boolean | 'sensitiveMute';
@@ -1168,4 +1184,47 @@ function emitUpdReaction(emoji: string, delta: number) {
 	cursor: pointer;
 	-webkit-tap-highlight-color: transparent;
 }
+
+.collapsedLanguage {
+    display: flex;
+    align-items: center;
+    padding: 16px 32px;
+    line-height: 28px;
+    white-space: pre;
+    opacity: 0.7;
+}
+
+.collapsedLanguageAvatar {
+    flex-shrink: 0;
+    display: inline-block;
+    width: 28px;
+    height: 28px;
+    margin: 0 8px 0 0;
+}
+
+.collapsedLanguageText {
+    overflow: hidden;
+    flex-shrink: 1;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 90%;
+    cursor: pointer;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+@container (max-width: 480px) {
+    .collapsedLanguage {
+        padding: 12px 16px;
+    }
+}
+
+@container (max-width: 350px) {
+    .collapsedLanguageAvatar {
+        width: 24px;
+        height: 24px;
+    }
+}
 </style>

packages/frontend/src/pages/settings/pari.vue

@@ -73,6 +73,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch v-model="enableUndoClearPostForm">{{ i18n.ts.enableUndoClearPostForm }}</MkSwitch>
 				<MkSwitch v-model="collapseNotesRepliedTo">{{ i18n.ts.collapseNotesRepliedTo }}</MkSwitch>
 				<MkSwitch v-model="disableReactionsViewer">{{ i18n.ts.disableReactionsViewer }}</MkSwitch>
+				<MkSwitch v-model="collapsedUnexpectedLangs">collapsedUnexpectedLangs</MkSwitch>
 				<MkSelect v-model="autoSpacingBehaviour">
 					<template #label>{{ i18n.ts.autoSpacing }}</template>
 					<option :value="null">{{ i18n.ts.disabled }}</option>
@@ -128,6 +129,7 @@ const enableUndoClearPostForm = computed(defaultStore.makeGetterSetter('enableUn
 const autoSpacingBehaviour = computed(defaultStore.makeGetterSetter('autoSpacingBehaviour'));
 const collapseNotesRepliedTo = computed(defaultStore.makeGetterSetter('collapseNotesRepliedTo'));
 const disableReactionsViewer = computed(defaultStore.makeGetterSetter('disableReactionsViewer'));
+const collapsedUnexpectedLangs = computed(defaultStore.makeGetterSetter('collapsedUnexpectedLangs'));
 
 definePageMetadata(() => ({
 	title: 'Pari Plus!',

packages/frontend/src/store.ts

@@ -552,6 +552,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: false,
 	},
+	collapsedUnexpectedLangs: {
+		where: 'device',
+		default: false,
+	}
 }));
 
 // TODO: 他のタブと永続化されたstateを同期