enhance(frontend): re-organize settings page

locales/index.d.ts

@@ -5429,6 +5429,10 @@ export interface Locale extends ILocale {
          * クライアントで再生するサウンドの設定が行えます。
          */
         "soundsBanner": string;
+        /**
+         * タイムラインとノート
+         */
+        "timelineAndNote": string;
     };
     "_preferencesProfile": {
         /**

locales/ja-JP.yml

@@ -1356,6 +1356,7 @@ _settings:
   preferencesBanner: "好みに応じた、クライアントの全体的な動作の設定が行えます。"
   appearanceBanner: "好みに応じた、クライアントの見た目・表示方法に関する設定が行えます。"
   soundsBanner: "クライアントで再生するサウンドの設定が行えます。"
+  timelineAndNote: "タイムラインとノート"
 
 _preferencesProfile:
   profileName: "プロファイル名"

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

@@ -88,6 +88,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 									</MkSwitch>
 								</MkPreferenceContainer>
 							</SearchMarker>
+
+							<SearchMarker :keywords="['mfm', 'enable', 'show', 'advanced']">
+								<MkPreferenceContainer k="advancedMfm">
+									<MkSwitch v-model="advancedMfm">
+										<template #label><SearchLabel>{{ i18n.ts.enableAdvancedMfm }}</SearchLabel></template>
+									</MkSwitch>
+								</MkPreferenceContainer>
+							</SearchMarker>
+
+							<SearchMarker :keywords="['auto', 'load', 'auto', 'more', 'scroll']">
+								<MkPreferenceContainer k="enableInfiniteScroll">
+									<MkSwitch v-model="enableInfiniteScroll">
+										<template #label><SearchLabel>{{ i18n.ts.enableInfiniteScroll }}</SearchLabel></template>
+									</MkSwitch>
+								</MkPreferenceContainer>
+							</SearchMarker>
 						</div>
 
 						<SearchMarker :keywords="['emoji', 'style', 'native', 'system', 'fluent', 'twemoji']">
@@ -116,10 +132,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkFolder>
 			</SearchMarker>
 
-			<SearchMarker :keywords="['timeline']">
+			<SearchMarker :keywords="['timeline', 'note']">
 				<MkFolder>
-					<template #label><SearchLabel>{{ i18n.ts.timeline }}</SearchLabel></template>
+					<template #label><SearchLabel>{{ i18n.ts._settings.timelineAndNote }}</SearchLabel></template>
 
+					<div class="_gaps_m">
 						<div class="_gaps_s">
 							<SearchMarker :keywords="['post', 'form', 'timeline']">
 								<MkPreferenceContainer k="showFixedPostForm">
@@ -154,14 +171,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 								</MkPreferenceContainer>
 							</SearchMarker>
 
-						<SearchMarker :keywords="['load', 'auto', 'more']">
-							<MkPreferenceContainer k="enableInfiniteScroll">
-								<MkSwitch v-model="enableInfiniteScroll">
-									<template #label><SearchLabel>{{ i18n.ts.enableInfiniteScroll }}</SearchLabel></template>
-								</MkSwitch>
-							</MkPreferenceContainer>
-						</SearchMarker>
-
 							<SearchMarker :keywords="['disable', 'streaming', 'timeline']">
 								<MkPreferenceContainer k="disableStreamingTimeline">
 									<MkSwitch v-model="disableStreamingTimeline">
@@ -170,12 +179,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 								</MkPreferenceContainer>
 							</SearchMarker>
 						</div>
-				</MkFolder>
-			</SearchMarker>
 
-			<SearchMarker :keywords="['note']">
+						<hr>
-				<MkFolder>
-					<template #label><SearchLabel>{{ i18n.ts.note }}</SearchLabel></template>
 
 						<div class="_gaps_m">
 							<div class="_gaps_s">
@@ -195,14 +200,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 									</MkPreferenceContainer>
 								</SearchMarker>
 
-							<SearchMarker :keywords="['mfm', 'enable', 'show', 'advanced']">
-								<MkPreferenceContainer k="advancedMfm">
-									<MkSwitch v-model="advancedMfm">
-										<template #label><SearchLabel>{{ i18n.ts.enableAdvancedMfm }}</SearchLabel></template>
-									</MkSwitch>
-								</MkPreferenceContainer>
-							</SearchMarker>
-
 								<SearchMarker :keywords="['reaction', 'count', 'show']">
 									<MkPreferenceContainer k="showReactionsCount">
 										<MkSwitch v-model="showReactionsCount">
@@ -289,6 +286,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 								</MkPreferenceContainer>
 							</SearchMarker>
 						</div>
+					</div>
 				</MkFolder>
 			</SearchMarker>
 

packages/frontend/src/style.scss

@@ -130,6 +130,7 @@ optgroup, option {
 hr {
 	margin: 0;
 	border: none;
+	border-radius: 999px;
 	height: 1px;
 	background: var(--MI_THEME-divider);
 }

packages/frontend/src/utility/autogen/settings-search-index.ts

@@ -314,12 +314,22 @@ export const searchIndexes: SearchIndexItem[] = [
 						keywords: ['sensitive', 'nsfw', 'media', 'image', 'photo', 'picture', 'attachment', 'confirm'],
 					},
 					{
-						id: '4LxdiOMNh',
+						id: 'aefexW9fD',
+						label: i18n.ts.enableAdvancedMfm,
+						keywords: ['mfm', 'enable', 'show', 'advanced'],
+					},
+					{
+						id: 'lu9v5Spqg',
+						label: i18n.ts.enableInfiniteScroll,
+						keywords: ['auto', 'load', 'auto', 'more', 'scroll'],
+					},
+					{
+						id: '6kMj4HVOg',
 						label: i18n.ts.emojiStyle,
 						keywords: ['emoji', 'style', 'native', 'system', 'fluent', 'twemoji'],
 					},
 					{
-						id: '67knC3FWp',
+						id: 'DftdlLbNu',
 						label: i18n.ts.pinnedList,
 						keywords: ['pinned', 'list'],
 					},
@@ -328,129 +338,112 @@ export const searchIndexes: SearchIndexItem[] = [
 				keywords: ['general'],
 			},
 			{
-				id: 'hDdVkBFJP',
+				id: 'CQldliCSi',
 				children: [
 					{
-						id: 'igFN7RIUa',
+						id: 'kMB2hPyq3',
 						label: i18n.ts.showFixedPostForm,
 						keywords: ['post', 'form', 'timeline'],
 					},
 					{
-						id: '9uxocbLO0',
+						id: 'jC7LtTnmc',
 						label: i18n.ts.showFixedPostFormInChannel,
 						keywords: ['post', 'form', 'timeline', 'channel'],
 					},
 					{
-						id: 'eaT1O1Fao',
+						id: 'p2wlrnwLo',
 						label: i18n.ts.collapseRenotes,
 						keywords: ['renote', i18n.ts.collapseRenotesDescription],
 					},
 					{
-						id: 'jC7LtTnmc',
+						id: '6SFn3t8VS',
 						label: i18n.ts.showGapBetweenNotesInTimeline,
 						keywords: ['note', 'timeline', 'gap'],
 					},
 					{
-						id: 'p2wlrnwLo',
+						id: 'nygexkaUk',
-						label: i18n.ts.enableInfiniteScroll,
-						keywords: ['load', 'auto', 'more'],
-					},
-					{
-						id: 'eqMBMY6LU',
 						label: i18n.ts.disableStreamingTimeline,
 						keywords: ['disable', 'streaming', 'timeline'],
 					},
-				],
-				label: i18n.ts.timeline,
-				keywords: ['timeline'],
-			},
 					{
-				id: '2LNjwv1cr',
+						id: '7vnQgR42v',
-				children: [
-					{
-						id: '6ylW3eIcD',
 						label: i18n.ts.showNoteActionsOnlyHover,
 						keywords: ['hover', 'show', 'footer', 'action'],
 					},
 					{
-						id: 'lBbtAg0Hm',
+						id: 'x5q4XZ7Kv',
 						label: i18n.ts.showClipButtonInNoteFooter,
 						keywords: ['footer', 'action', 'clip', 'show'],
 					},
 					{
-						id: 'E9whefUtX',
+						id: 'x9irZWjaF',
-						label: i18n.ts.enableAdvancedMfm,
-						keywords: ['mfm', 'enable', 'show', 'advanced'],
-					},
-					{
-						id: 'iQaBbJBva',
 						label: i18n.ts.showReactionsCount,
 						keywords: ['reaction', 'count', 'show'],
 					},
 					{
-						id: 'hgEVGgJa1',
+						id: 'dHPv9mrxi',
 						label: i18n.ts.confirmOnReact,
 						keywords: ['reaction', 'confirm'],
 					},
 					{
-						id: 'yxehrHZ6x',
+						id: 'bj42W4cvN',
 						label: i18n.ts.loadRawImages,
 						keywords: ['image', 'photo', 'picture', 'media', 'thumbnail', 'quality', 'raw', 'attachment'],
 					},
 					{
-						id: 'DdoFLaSG8',
+						id: 'fzPca1Gk9',
 						label: i18n.ts.useReactionPickerForContextMenu,
 						keywords: ['reaction', 'picker', 'contextmenu', 'open'],
 					},
 					{
-						id: 'fyod6U3QX',
+						id: 'mNU5IBln7',
 						label: i18n.ts.reactionsDisplaySize,
 						keywords: ['reaction', 'size', 'scale', 'display'],
 					},
 					{
-						id: 'kmdsnVIQX',
+						id: 'kYgorbLUy',
 						label: i18n.ts.limitWidthOfReaction,
 						keywords: ['reaction', 'size', 'scale', 'display', 'width', 'limit'],
 					},
 					{
-						id: 'hacQ9br20',
+						id: 'm75VEWI3S',
 						label: i18n.ts.mediaListWithOneImageAppearance,
 						keywords: ['attachment', 'image', 'photo', 'picture', 'media', 'thumbnail', 'list', 'size', 'height'],
 					},
 					{
-						id: 'vE7KeV4U4',
+						id: 'CA42sC9Mx',
 						label: i18n.ts.instanceTicker,
 						keywords: ['ticker', 'information', 'label', 'instance', 'server', 'host', 'federation'],
 					},
 					{
-						id: '3reoOxO26',
+						id: 'knEhibyFp',
 						label: i18n.ts.displayOfSensitiveMedia,
 						keywords: ['attachment', 'image', 'photo', 'picture', 'media', 'thumbnail', 'nsfw', 'sensitive', 'display', 'show', 'hide', 'visibility'],
 					},
 				],
-				label: i18n.ts.note,
+				label: i18n.ts._settings.timelineAndNote,
-				keywords: ['note'],
+				keywords: ['timeline', 'note'],
 			},
 			{
-				id: 'eROFRMtXv',
+				id: 'yIR4YP0yU',
 				children: [
 					{
-						id: 'bezWaWd6M',
+						id: 'cBkUgQNpH',
 						label: i18n.ts.keepCw,
 						keywords: ['remember', 'keep', 'note', 'cw'],
 					},
 					{
-						id: '90ngq28Nx',
+						id: 'Bv4YywaKL',
 						label: i18n.ts.rememberNoteVisibility,
 						keywords: ['remember', 'keep', 'note', 'visibility'],
 					},
 					{
-						id: 'ERGQVw6ml',
+						id: 'F3kpUNvSQ',
 						label: i18n.ts.enableQuickAddMfmFunction,
 						keywords: ['mfm', 'enable', 'show', 'advanced', 'picker', 'form', 'function', 'fn'],
 					},
 					{
-						id: 'g0otcvWv3',
+						id: 'BBxwy4F6E',
 						label: i18n.ts.defaultNoteVisibility,
 						keywords: ['default', 'note', 'visibility'],
 					},
@@ -459,20 +452,20 @@ export const searchIndexes: SearchIndexItem[] = [
 				keywords: ['post', 'form'],
 			},
 			{
-				id: 'AWLIP02IT',
+				id: 'e5XnQWk68',
 				children: [
 					{
-						id: 'rDLJRu99',
+						id: 'rOttgccaS',
 						label: i18n.ts.useGroupedNotifications,
 						keywords: ['group'],
 					},
 					{
-						id: '70WDijfPH',
+						id: 'Ek4Cw3VPq',
 						label: i18n.ts.position,
 						keywords: ['position'],
 					},
 					{
-						id: 'xKUzsSrKy',
+						id: 'pZLzt3i0s',
 						label: i18n.ts.stackAxis,
 						keywords: ['stack', 'axis', 'direction'],
 					},
@@ -481,55 +474,55 @@ export const searchIndexes: SearchIndexItem[] = [
 				keywords: ['notification'],
 			},
 			{
-				id: '2E7vdIUQd',
+				id: 'c9mbgmHQp',
 				label: i18n.ts.dataSaver,
 				keywords: ['datasaver'],
 			},
 			{
-				id: '6ZbRRIhA6',
+				id: '5h8vhCX1S',
 				children: [
 					{
-						id: 'soNZaKfiW',
+						id: 'bDv03znUy',
 						label: i18n.ts.squareAvatars,
 						keywords: ['avatar', 'icon', 'square'],
 					},
 					{
-						id: 'nhwHJJ2tl',
+						id: 'nkR2LWURW',
 						label: i18n.ts.seasonalScreenEffect,
 						keywords: ['effect', 'show'],
 					},
 					{
-						id: 'oMAVUuxTm',
+						id: 'sCscGhMmH',
 						label: i18n.ts.openImageInNewTab,
 						keywords: ['image', 'photo', 'picture', 'media', 'thumbnail', 'new', 'tab'],
 					},
 					{
-						id: 'hSqX5JKM7',
+						id: '4yCgcFElF',
 						label: i18n.ts.withRepliesByDefaultForNewlyFollowed,
 						keywords: ['follow', 'replies'],
 					},
 					{
-						id: 'fm98eqzke',
+						id: '5iMpm5rES',
 						label: i18n.ts.whenServerDisconnected,
 						keywords: ['server', 'disconnect', 'reconnect', 'reload', 'streaming'],
 					},
 					{
-						id: '1rWDVig8Y',
+						id: 'dlQjnWBVU',
 						label: i18n.ts.numberOfPageCache,
 						keywords: ['cache', 'page'],
 					},
 					{
-						id: 'vXLtihtCp',
+						id: 'qY5xTzl35',
 						label: i18n.ts.forceShowAds,
 						keywords: ['ad', 'show'],
 					},
 					{
-						id: '77YljFpiH',
+						id: '2VSnj81vC',
 						label: i18n.ts.hemisphere,
 						keywords: [],
 					},
 					{
-						id: 'CZgDNPP1h',
+						id: 'vuG3aG3IE',
 						label: i18n.ts.additionalEmojiDictionary,
 						keywords: ['emoji', 'dictionary', 'additional', 'extra'],
 					},