From e5856c6b3b739e0ee7afebb66321a43133a36671 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sat, 28 Sep 2024 14:02:48 +0900
Subject: [PATCH] :art:

---
 packages/frontend/src/components/MkNoteHeader.vue | 5 +++--
 packages/frontend/src/pages/settings/other.vue    | 4 ++++
 packages/frontend/src/store.ts                    | 4 ++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkNoteHeader.vue b/packages/frontend/src/components/MkNoteHeader.vue
index 37fcfa3cb9..0499e09046 100644
--- a/packages/frontend/src/components/MkNoteHeader.vue
+++ b/packages/frontend/src/components/MkNoteHeader.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <header :class="$style.root">
-	<MkCondensedLine :minScale="0" style="min-width: 0;">
+	<component :is="defaultStore.state.enableCondensedLine ? 'MkCondensedLine' : 'div'" :minScale="0" style="min-width: 0;">
 		<div style="display: flex; white-space: nowrap; align-items: baseline;">
 			<div v-if="mock" :class="$style.name">
 				<MkUserName :user="note.user"/>
@@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div v-if="note.user.isBot" :class="$style.isBot">bot</div>
 			<div :class="$style.username"><MkAcct :user="note.user"/></div>
 		</div>
-	</MkCondensedLine>
+	</component>
 	<div v-if="note.user.badgeRoles" :class="$style.badgeRoles">
 		<img v-for="(role, i) in note.user.badgeRoles" :key="i" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl!"/>
 	</div>
@@ -44,6 +44,7 @@ import * as Misskey from 'misskey-js';
 import { i18n } from '@/i18n.js';
 import { notePage } from '@/filters/note.js';
 import { userPage } from '@/filters/user.js';
+import { defaultStore } from '@/store.js';
 
 defineProps<{
 	note: Misskey.entities.Note;
diff --git a/packages/frontend/src/pages/settings/other.vue b/packages/frontend/src/pages/settings/other.vue
index ab48703824..410a3f53c7 100644
--- a/packages/frontend/src/pages/settings/other.vue
+++ b/packages/frontend/src/pages/settings/other.vue
@@ -51,6 +51,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #label>{{ i18n.ts.experimentalFeatures }}</template>
 
 				<div class="_gaps_m">
+					<MkSwitch v-model="enableCondensedLine">
+						<template #label>Enable condensed line</template>
+					</MkSwitch>
 				</div>
 			</MkFolder>
 
@@ -101,6 +104,7 @@ import FormSection from '@/components/form/section.vue';
 const $i = signinRequired();
 
 const reportError = computed(defaultStore.makeGetterSetter('reportError'));
+const enableCondensedLine = computed(defaultStore.makeGetterSetter('enableCondensedLine'));
 const devMode = computed(defaultStore.makeGetterSetter('devMode'));
 const defaultWithReplies = computed(defaultStore.makeGetterSetter('defaultWithReplies'));
 
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index fd5cfcc196..1ddcca5afe 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -392,6 +392,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: 'horizontal' as 'vertical' | 'horizontal',
 	},
+	enableCondensedLine: {
+		where: 'device',
+		default: true,
+	},
 	additionalUnicodeEmojiIndexes: {
 		where: 'device',
 		default: {} as Record<string, Record<string, string[]>>,