enhance(frontend): make MkCondensedLine experimental

packages/frontend/src/components/global/MkAcct.vue

@@ -1,8 +1,12 @@
 <template>
-<MkCondensedLine>
+<MkCondensedLine v-if="defaultStore.state.enableCondensedLineForAcct">
 	<span>@{{ user.username }}</span>
 	<span v-if="user.host || detail || defaultStore.state.showFullAcct" style="opacity: 0.5;">@{{ user.host || host }}</span>
 </MkCondensedLine>
+<span v-else>
+	<span>@{{ user.username }}</span>
+	<span v-if="user.host || detail || defaultStore.state.showFullAcct" style="opacity: 0.5;">@{{ user.host || host }}</span>
+</span>
 </template>
 
 <script lang="ts" setup>

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

@@ -1,32 +1,48 @@
 <template>
 <div class="_gaps_m">
+	<!--
 	<MkSwitch v-model="$i.injectFeaturedNote" @update:model-value="onChangeInjectFeaturedNote">
-		{{ i18n.ts.showFeaturedNotesInTimeline }}
+		<template #label>{{ i18n.ts.showFeaturedNotesInTimeline }}</template>
 	</MkSwitch>
+	-->
 
 	<!--
 	<MkSwitch v-model="reportError">{{ i18n.ts.sendErrorReports }}<template #caption>{{ i18n.ts.sendErrorReportsDescription }}</template></MkSwitch>
 	-->
 
-	<FormLink to="/settings/account-info">{{ i18n.ts.accountInfo }}</FormLink>
-
+	<div class="_gaps_s">
+		<FormLink to="/settings/account-info"><template #icon><i class="ti ti-info-circle"></i></template>{{ i18n.ts.accountInfo }}</FormLink>
 		<FormLink to="/registry"><template #icon><i class="ti ti-adjustments"></i></template>{{ i18n.ts.registry }}</FormLink>
-
 		<FormLink to="/settings/delete-account"><template #icon><i class="ti ti-alert-triangle"></i></template>{{ i18n.ts.closeAccount }}</FormLink>
+	</div>
+
+	<MkFolder>
+		<template #icon><i class="ti ti-flask"></i></template>
+		<template #label>{{ i18n.ts.experimentalFeatures }}</template>
+
+		<div class="_gaps_m">
+			<MkSwitch v-model="enableCondensedLineForAcct">
+				<template #label>Enable condensed line for acct</template>
+			</MkSwitch>
+		</div>
+	</MkFolder>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import FormLink from '@/components/form/link.vue';
+import MkFolder from '@/components/MkFolder.vue';
 import * as os from '@/os';
 import { defaultStore } from '@/store';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { unisonReload } from '@/scripts/unison-reload';
 
 const reportError = computed(defaultStore.makeGetterSetter('reportError'));
+const enableCondensedLineForAcct = computed(defaultStore.makeGetterSetter('enableCondensedLineForAcct'));
 
 function onChangeInjectFeaturedNote(v) {
 	os.api('i/update', {
@@ -36,6 +52,22 @@ function onChangeInjectFeaturedNote(v) {
 	});
 }
 
+async function reloadAsk() {
+	const { canceled } = await os.confirm({
+		type: 'info',
+		text: i18n.ts.reloadToApplySetting,
+	});
+	if (canceled) return;
+
+	unisonReload();
+}
+
+watch([
+	enableCondensedLineForAcct,
+], async () => {
+	await reloadAsk();
+});
+
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);

packages/frontend/src/store.ts

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