Refactoring

69 files changed, 157 insertions, 285 deletions

diff --git a/src/client/pages/_error_.vue b/src/client/pages/_error_.vue
index c2497c17b3..c063b12b2e 100644
--- a/src/client/pages/_error_.vue
+++ b/src/client/pages/_error_.vue
@@ -22,10 +22,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('error'),
-					icon: faExclamationTriangle
-				}]
+				title: this.$t('error'),
+				icon: faExclamationTriangle
 			},
 			faExclamationTriangle
 		};
diff --git a/src/client/pages/about-misskey.vue b/src/client/pages/about-misskey.vue
index 721e736902..0cd6049649 100644
--- a/src/client/pages/about-misskey.vue
+++ b/src/client/pages/about-misskey.vue
@@ -87,10 +87,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('aboutMisskey'),
-					icon: null
-				}]
+				title: this.$t('aboutMisskey'),
+				icon: null
 			},
 			version,
 			faInfoCircle
diff --git a/src/client/pages/about.vue b/src/client/pages/about.vue
index 042122ceec..7599ee693a 100644
--- a/src/client/pages/about.vue
+++ b/src/client/pages/about.vue
@@ -37,10 +37,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('about'),
-					icon: faInfoCircle
-				}]
+				title: this.$t('about'),
+				icon: faInfoCircle
 			},
 			version,
 			serverInfo: null,
diff --git a/src/client/pages/announcements.vue b/src/client/pages/announcements.vue
index 9815f2df9e..6fedb5da57 100644
--- a/src/client/pages/announcements.vue
+++ b/src/client/pages/announcements.vue
@@ -31,10 +31,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('announcements'),
-					icon: faBroadcastTower
-				}]
+				title: this.$t('announcements'),
+				icon: faBroadcastTower
 			},
 			pagination: {
 				endpoint: 'announcements',
diff --git a/src/client/pages/api-console.vue b/src/client/pages/api-console.vue
index 2b05038acf..dd5cacaeec 100644
--- a/src/client/pages/api-console.vue
+++ b/src/client/pages/api-console.vue
@@ -41,10 +41,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: 'API console',
-					icon: faTerminal
-				}]
+				title: 'API console',
+				icon: faTerminal
 			},
 
 			endpoint: '',
diff --git a/src/client/pages/apps.vue b/src/client/pages/apps.vue
index 790fd80961..f9dd0a3584 100644
--- a/src/client/pages/apps.vue
+++ b/src/client/pages/apps.vue
@@ -51,10 +51,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('installedApps'),
-					icon: faPlug,
-				}],
+				title: this.$t('installedApps'),
+				icon: faPlug,
 			},
 			pagination: {
 				endpoint: 'i/apps',
diff --git a/src/client/pages/channel-editor.vue b/src/client/pages/channel-editor.vue
index c011acc52e..02ce97374f 100644
--- a/src/client/pages/channel-editor.vue
+++ b/src/client/pages/channel-editor.vue
@@ -46,15 +46,11 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: computed(() => this.channelId ? {
-				header: [{
-					title: this.$t('_channel.edit'),
-					icon: faSatelliteDish,
-				}],
+				title: this.$t('_channel.edit'),
+				icon: faSatelliteDish,
 			} : {
-				header: [{
-					title: this.$t('_channel.create'),
-					icon: faSatelliteDish,
-				}],
+				title: this.$t('_channel.create'),
+				icon: faSatelliteDish,
 			}),
 			channel: null,
 			name: null,
diff --git a/src/client/pages/channel.vue b/src/client/pages/channel.vue
index 72fe1252a1..33339bbc95 100644
--- a/src/client/pages/channel.vue
+++ b/src/client/pages/channel.vue
@@ -54,10 +54,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: computed(() => this.channel ? {
-				header: [{
-					title: this.channel.name,
-					icon: faSatelliteDish,
-				}],
+				title: this.channel.name,
+				icon: faSatelliteDish,
 			} : null),
 			channel: null,
 			showBanner: true,
diff --git a/src/client/pages/channels.vue b/src/client/pages/channels.vue
index 7d18e8cb51..a57f974c4d 100644
--- a/src/client/pages/channels.vue
+++ b/src/client/pages/channels.vue
@@ -43,10 +43,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('channel'),
-					icon: faSatelliteDish
-				}]
+				title: this.$t('channel'),
+				icon: faSatelliteDish
 			},
 			tab: 'featured',
 			featuredPagination: {
diff --git a/src/client/pages/doc.vue b/src/client/pages/doc.vue
index f2c70df212..fe9873c6ab 100644
--- a/src/client/pages/doc.vue
+++ b/src/client/pages/doc.vue
@@ -43,10 +43,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.title,
-					icon: faFileAlt
-				}],
+				title: this.title,
+				icon: faFileAlt
 			},
 			faFileAlt,
 			title: '',
diff --git a/src/client/pages/docs.vue b/src/client/pages/docs.vue
index 245dff6b57..1ed7684a8d 100644
--- a/src/client/pages/docs.vue
+++ b/src/client/pages/docs.vue
@@ -21,10 +21,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('help'),
-					icon: faQuestionCircle
-				}],
+				title: this.$t('help'),
+				icon: faQuestionCircle
 			},
 			docs: [],
 			faQuestionCircle
diff --git a/src/client/pages/drive.vue b/src/client/pages/drive.vue
index 1456fb2922..b7ed04e10e 100644
--- a/src/client/pages/drive.vue
+++ b/src/client/pages/drive.vue
@@ -18,10 +18,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: computed(() => this.folder ? this.folder.name : this.$t('drive')),
-					icon: faCloud,
-				}],
+				title: computed(() => this.folder ? this.folder.name : this.$t('drive')),
+				icon: faCloud,
 				action: {
 					icon: faEllipsisH,
 					handler: this.menu
diff --git a/src/client/pages/explore.vue b/src/client/pages/explore.vue
index c7378e0ddc..bca7373705 100644
--- a/src/client/pages/explore.vue
+++ b/src/client/pages/explore.vue
@@ -93,10 +93,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('explore'),
-					icon: faHashtag
-				}],
+				title: this.$t('explore'),
+				icon: faHashtag
 			},
 			pinnedUsers: { endpoint: 'pinned-users' },
 			popularUsers: { endpoint: 'users', limit: 10, noPaging: true, params: {
diff --git a/src/client/pages/favorites.vue b/src/client/pages/favorites.vue
index 4360dc6ec3..b207c4af06 100644
--- a/src/client/pages/favorites.vue
+++ b/src/client/pages/favorites.vue
@@ -19,10 +19,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('favorites'),
-					icon: faStar
-				}]
+				title: this.$t('favorites'),
+				icon: faStar
 			},
 			pagination: {
 				endpoint: 'i/favorites',
diff --git a/src/client/pages/featured.vue b/src/client/pages/featured.vue
index c3a9e25105..c09eadc94d 100644
--- a/src/client/pages/featured.vue
+++ b/src/client/pages/featured.vue
@@ -18,10 +18,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('featured'),
-					icon: faFireAlt
-				}],
+				title: this.$t('featured'),
+				icon: faFireAlt
 			},
 			pagination: {
 				endpoint: 'notes/featured',
diff --git a/src/client/pages/follow-requests.vue b/src/client/pages/follow-requests.vue
index 9f67a8a9e5..d72efb5a3c 100644
--- a/src/client/pages/follow-requests.vue
+++ b/src/client/pages/follow-requests.vue
@@ -44,10 +44,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('followRequests'),
-					icon: faUserClock,
-				}],
+				title: this.$t('followRequests'),
+				icon: faUserClock,
 			},
 			pagination: {
 				endpoint: 'following/requests/list',
diff --git a/src/client/pages/instance/abuses.vue b/src/client/pages/instance/abuses.vue
index 90a2656e10..2c5969e743 100644
--- a/src/client/pages/instance/abuses.vue
+++ b/src/client/pages/instance/abuses.vue
@@ -84,10 +84,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('abuseReports'),
-					icon: faExclamationCircle
-				}],
+				title: this.$t('abuseReports'),
+				icon: faExclamationCircle
 			},
 			searchUsername: '',
 			searchHost: '',
diff --git a/src/client/pages/instance/announcements.vue b/src/client/pages/instance/announcements.vue
index 7abec88042..0dd669d456 100644
--- a/src/client/pages/instance/announcements.vue
+++ b/src/client/pages/instance/announcements.vue
@@ -45,10 +45,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('announcements'),
-					icon: faBroadcastTower
-				}]
+				title: this.$t('announcements'),
+				icon: faBroadcastTower
 			},
 			announcements: [],
 			faBroadcastTower, faSave, faTrashAlt, faPlus
diff --git a/src/client/pages/instance/emojis.vue b/src/client/pages/instance/emojis.vue
index f33383776c..dcd12edc91 100644
--- a/src/client/pages/instance/emojis.vue
+++ b/src/client/pages/instance/emojis.vue
@@ -68,10 +68,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('customEmojis'),
-					icon: faLaugh
-				}],
+				title: this.$t('customEmojis'),
+				icon: faLaugh,
 				action: {
 					icon: faPlus,
 					handler: this.add
diff --git a/src/client/pages/instance/federation.vue b/src/client/pages/instance/federation.vue
index f2143fa003..f084feba1c 100644
--- a/src/client/pages/instance/federation.vue
+++ b/src/client/pages/instance/federation.vue
@@ -79,10 +79,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('federation'),
-					icon: faGlobe
-				}],
+				title: this.$t('federation'),
+				icon: faGlobe
 			},
 			host: '',
 			state: 'federating',
diff --git a/src/client/pages/instance/files.vue b/src/client/pages/instance/files.vue
index 3c1d90f24f..fcbedf388c 100644
--- a/src/client/pages/instance/files.vue
+++ b/src/client/pages/instance/files.vue
@@ -84,10 +84,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('files'),
-					icon: faCloud
-				}],
+				title: this.$t('files'),
+				icon: faCloud
 			},
 			q: null,
 			origin: 'local',
diff --git a/src/client/pages/instance/index.vue b/src/client/pages/instance/index.vue
index 9383f256eb..79fe452589 100644
--- a/src/client/pages/instance/index.vue
+++ b/src/client/pages/instance/index.vue
@@ -86,7 +86,7 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
+				tabs: [{
 					id: 'index',
 					title: null,
 					tooltip: this.$t('instance'),
diff --git a/src/client/pages/instance/logs.vue b/src/client/pages/instance/logs.vue
index 5549bd5a1a..5743deec6a 100644
--- a/src/client/pages/instance/logs.vue
+++ b/src/client/pages/instance/logs.vue
@@ -49,10 +49,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('serverLogs'),
-					icon: faStream
-				}]
+				title: this.$t('serverLogs'),
+				icon: faStream
 			},
 			logs: [],
 			logLevel: 'all',
diff --git a/src/client/pages/instance/queue.vue b/src/client/pages/instance/queue.vue
index 5dec95c670..e824e8ae28 100644
--- a/src/client/pages/instance/queue.vue
+++ b/src/client/pages/instance/queue.vue
@@ -31,10 +31,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('jobQueue'),
-					icon: faExchangeAlt,
-				}],
+				title: this.$t('jobQueue'),
+				icon: faExchangeAlt,
 			},
 			connection: os.stream.useSharedConnection('queueStats'),
 			faExchangeAlt, faTrashAlt
diff --git a/src/client/pages/instance/relays.vue b/src/client/pages/instance/relays.vue
index 82b7b006ed..885f861290 100644
--- a/src/client/pages/instance/relays.vue
+++ b/src/client/pages/instance/relays.vue
@@ -38,10 +38,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('relays'),
-					icon: faProjectDiagram,
-				}],
+				title: this.$t('relays'),
+				icon: faProjectDiagram,
 			},
 			relays: [],
 			inbox: '',
diff --git a/src/client/pages/instance/settings.vue b/src/client/pages/instance/settings.vue
index 83fb834910..1015b5f98d 100644
--- a/src/client/pages/instance/settings.vue
+++ b/src/client/pages/instance/settings.vue
@@ -257,10 +257,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('instance'),
-					icon: faCog,
-				}],
+				title: this.$t('instance'),
+				icon: faCog,
 			},
 			url,
 			proxyAccount: null,
diff --git a/src/client/pages/instance/users.vue b/src/client/pages/instance/users.vue
index 43ea79656d..f0203cb367 100644
--- a/src/client/pages/instance/users.vue
+++ b/src/client/pages/instance/users.vue
@@ -101,10 +101,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('users'),
-					icon: faUsers
-				}],
+				title: this.$t('users'),
+				icon: faUsers,
 				action: {
 					icon: faSearch,
 					handler: this.searchUser
diff --git a/src/client/pages/mentions.vue b/src/client/pages/mentions.vue
index 0ad3def03c..396f22c0b8 100644
--- a/src/client/pages/mentions.vue
+++ b/src/client/pages/mentions.vue
@@ -18,10 +18,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('mentions'),
-					icon: faAt
-				}],
+				title: this.$t('mentions'),
+				icon: faAt
 			},
 			pagination: {
 				endpoint: 'notes/mentions',
diff --git a/src/client/pages/messages.vue b/src/client/pages/messages.vue
index 4803891d0e..b8d7156098 100644
--- a/src/client/pages/messages.vue
+++ b/src/client/pages/messages.vue
@@ -18,10 +18,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('directNotes'),
-					icon: faEnvelope
-				}],
+				title: this.$t('directNotes'),
+				icon: faEnvelope
 			},
 			pagination: {
 				endpoint: 'notes/mentions',
diff --git a/src/client/pages/messaging/index.vue b/src/client/pages/messaging/index.vue
index 6538ce3e73..c56542c689 100644
--- a/src/client/pages/messaging/index.vue
+++ b/src/client/pages/messaging/index.vue
@@ -53,10 +53,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('messaging'),
-					icon: faComments
-				}]
+				title: this.$t('messaging'),
+				icon: faComments
 			},
 			fetching: true,
 			moreFetching: false,
diff --git a/src/client/pages/messaging/messaging-room.vue b/src/client/pages/messaging/messaging-room.vue
index 73c8e2a6df..f414ccbaa4 100644
--- a/src/client/pages/messaging/messaging-room.vue
+++ b/src/client/pages/messaging/messaging-room.vue
@@ -62,19 +62,15 @@ const Component = defineComponent({
 	data() {
 		return {
 			INFO: computed(() => !this.fetching ? this.user ? {
-				header: [{
-					userName: this.user,
-					avatar: this.user,
-				}],
+				userName: this.user,
+				avatar: this.user,
 				action: {
 					icon: faEllipsisH,
 					handler: this.menu,
 				},
 			} : {
-				header: [{
-					title: this.group.name,
-					icon: faUsers
-				}],
+				title: this.group.name,
+				icon: faUsers,
 				action: {
 					icon: faEllipsisH,
 					handler: this.menu,
diff --git a/src/client/pages/my-antennas/index.vue b/src/client/pages/my-antennas/index.vue
index 08e4d43c26..c4f8ce31f7 100644
--- a/src/client/pages/my-antennas/index.vue
+++ b/src/client/pages/my-antennas/index.vue
@@ -29,10 +29,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('manageAntennas'),
-					icon: faSatellite
-				}],
+				title: this.$t('manageAntennas'),
+				icon: faSatellite,
 				action: {
 					icon: faPlus,
 					handler: this.create
diff --git a/src/client/pages/my-groups/group.vue b/src/client/pages/my-groups/group.vue
index 008c71d1fa..36fed3f9d0 100644
--- a/src/client/pages/my-groups/group.vue
+++ b/src/client/pages/my-groups/group.vue
@@ -48,10 +48,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: computed(() => this.group ? {
-				header: [{
-					title: this.group.name,
-					icon: faUsers,
-				}],
+				title: this.group.name,
+				icon: faUsers,
 			} : null),
 			group: null,
 			users: [],
diff --git a/src/client/pages/my-groups/index.vue b/src/client/pages/my-groups/index.vue
index e384dfc363..d81165b2dc 100644
--- a/src/client/pages/my-groups/index.vue
+++ b/src/client/pages/my-groups/index.vue
@@ -63,10 +63,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('groups'),
-					icon: faUsers
-				}],
+				title: this.$t('groups'),
+				icon: faUsers
 			},
 			tab: 'owned',
 			ownedPagination: {
diff --git a/src/client/pages/my-lists/index.vue b/src/client/pages/my-lists/index.vue
index 9d0e192286..edd4ff9449 100644
--- a/src/client/pages/my-lists/index.vue
+++ b/src/client/pages/my-lists/index.vue
@@ -26,10 +26,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('manageLists'),
-					icon: faListUl
-				}],
+				title: this.$t('manageLists'),
+				icon: faListUl,
 				action: {
 					icon: faPlus,
 					handler: this.create
diff --git a/src/client/pages/my-lists/list.vue b/src/client/pages/my-lists/list.vue
index 4d965b06b3..4f352e05c4 100644
--- a/src/client/pages/my-lists/list.vue
+++ b/src/client/pages/my-lists/list.vue
@@ -47,10 +47,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: computed(() => this.list ? {
-				header: [{
-					title: this.list.name,
-					icon: faListUl,
-				}],
+				title: this.list.name,
+				icon: faListUl,
 			} : null),
 			list: null,
 			users: [],
diff --git a/src/client/pages/not-found.vue b/src/client/pages/not-found.vue
index a90a6344e4..0349b3c1b1 100644
--- a/src/client/pages/not-found.vue
+++ b/src/client/pages/not-found.vue
@@ -16,10 +16,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('notFound'),
-					icon: faExclamationTriangle
-				}]
+				title: this.$t('notFound'),
+				icon: faExclamationTriangle
 			},
 		}
 	},
diff --git a/src/client/pages/note.vue b/src/client/pages/note.vue
index a458d6c063..7f416c7558 100644
--- a/src/client/pages/note.vue
+++ b/src/client/pages/note.vue
@@ -51,10 +51,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: computed(() => this.note ? {
-				header: [{
-					title: this.$t('note'),
-					avatar: this.note.user,
-				}],
+				title: this.$t('note'),
+				avatar: this.note.user,
 			} : null),
 			note: null,
 			hasPrev: false,
diff --git a/src/client/pages/notifications.vue b/src/client/pages/notifications.vue
index 97ed36a750..4dfcb3fa33 100644
--- a/src/client/pages/notifications.vue
+++ b/src/client/pages/notifications.vue
@@ -21,10 +21,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('notifications'),
-					icon: faBell
-				}]
+				title: this.$t('notifications'),
+				icon: faBell
 			},
 		};
 	},
diff --git a/src/client/pages/page.vue b/src/client/pages/page.vue
index e8a8a6bdfd..d1df8f796f 100644
--- a/src/client/pages/page.vue
+++ b/src/client/pages/page.vue
@@ -57,10 +57,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: computed(() => this.page ? {
-				header: [{
-					title: computed(() => this.page.title || this.page.name),
-					avatar: this.page.user,
-				}],
+				title: computed(() => this.page.title || this.page.name),
+				avatar: this.page.user,
 			} : null),
 			page: null,
 			faHeartS, faHeartR
diff --git a/src/client/pages/pages.vue b/src/client/pages/pages.vue
index b4112cbbf3..4e0ff5dd3c 100644
--- a/src/client/pages/pages.vue
+++ b/src/client/pages/pages.vue
@@ -35,10 +35,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('pages'),
-					icon: faStickyNote
-				}],
+				title: this.$t('pages'),
+				icon: faStickyNote,
 				action: {
 					icon: faPlus,
 					handler: this.create
diff --git a/src/client/pages/reversi/game.vue b/src/client/pages/reversi/game.vue
index dd47ca16dd..3887ff465c 100644
--- a/src/client/pages/reversi/game.vue
+++ b/src/client/pages/reversi/game.vue
@@ -27,10 +27,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('_reversi.reversi'),
-					icon: faGamepad
-				}]
+				title: this.$t('_reversi.reversi'),
+				icon: faGamepad
 			},
 			game: null,
 			connection: null,
diff --git a/src/client/pages/reversi/index.vue b/src/client/pages/reversi/index.vue
index 1969b6be83..95806c4088 100644
--- a/src/client/pages/reversi/index.vue
+++ b/src/client/pages/reversi/index.vue
@@ -76,10 +76,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('_reversi.reversi'),
-					icon: faGamepad
-				}]
+				title: this.$t('_reversi.reversi'),
+				icon: faGamepad
 			},
 			games: [],
 			gamesFetching: true,
diff --git a/src/client/pages/room/room.vue b/src/client/pages/room/room.vue
index 89e141c436..91d8077c64 100644
--- a/src/client/pages/room/room.vue
+++ b/src/client/pages/room/room.vue
@@ -82,10 +82,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: computed(() => this.user ? {
-				header: [{
-					title: this.$t('room'),
-					avatar: this.user,
-				}],
+				title: this.$t('room'),
+				avatar: this.user,
 			} : null),
 			user: null,
 			objectSelected: false,
diff --git a/src/client/pages/scratchpad.vue b/src/client/pages/scratchpad.vue
index 7549ed32c6..bbdb20112d 100644
--- a/src/client/pages/scratchpad.vue
+++ b/src/client/pages/scratchpad.vue
@@ -44,10 +44,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('scratchpad'),
-					icon: faTerminal,
-				}],
+				title: this.$t('scratchpad'),
+				icon: faTerminal,
 			},
 			code: '',
 			logs: [],
diff --git a/src/client/pages/search.vue b/src/client/pages/search.vue
index 7a395a964f..f95848cfd3 100644
--- a/src/client/pages/search.vue
+++ b/src/client/pages/search.vue
@@ -20,10 +20,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('searchWith', { q: this.$route.query.q }),
-					icon: faSearch
-				}],
+				title: this.$t('searchWith', { q: this.$route.query.q }),
+				icon: faSearch
 			},
 			pagination: {
 				endpoint: 'notes/search',
diff --git a/src/client/pages/settings/api.vue b/src/client/pages/settings/api.vue
index 80a558ff85..f4cebbee36 100644
--- a/src/client/pages/settings/api.vue
+++ b/src/client/pages/settings/api.vue
@@ -28,10 +28,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: 'API',
-					icon: faKey
-				}]
+				title: 'API',
+				icon: faKey
 			},
 			isDesktop: window.innerWidth >= 1100,
 		};
diff --git a/src/client/pages/settings/general.vue b/src/client/pages/settings/general.vue
index 0db571ff14..aef3cf2f16 100644
--- a/src/client/pages/settings/general.vue
+++ b/src/client/pages/settings/general.vue
@@ -107,10 +107,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('general'),
-					icon: faCogs
-				}]
+				title: this.$t('general'),
+				icon: faCogs
 			},
 			langs,
 			lang: localStorage.getItem('lang'),
diff --git a/src/client/pages/settings/index.vue b/src/client/pages/settings/index.vue
index e6ccaf9fea..16098d3bf0 100644
--- a/src/client/pages/settings/index.vue
+++ b/src/client/pages/settings/index.vue
@@ -55,10 +55,8 @@ export default defineComponent({
 
 	setup(props, context) {
 		const INFO = ref({
-			header: [{
-				title: i18n.global.t('settings'),
-				icon: faCog
-			}]
+			title: i18n.global.t('settings'),
+			icon: faCog
 		});
 		const narrow = ref(false);
 		const view = ref(null);
diff --git a/src/client/pages/settings/integration.vue b/src/client/pages/settings/integration.vue
index 961f4b9cab..e980e18dbc 100644
--- a/src/client/pages/settings/integration.vue
+++ b/src/client/pages/settings/integration.vue
@@ -41,10 +41,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('integration'),
-					icon: faShareAlt
-				}]
+				title: this.$t('integration'),
+				icon: faShareAlt
 			},
 			apiUrl,
 			twitterForm: null,
diff --git a/src/client/pages/settings/mute-block.vue b/src/client/pages/settings/mute-block.vue
index 87f5b88d3c..2143d108b5 100644
--- a/src/client/pages/settings/mute-block.vue
+++ b/src/client/pages/settings/mute-block.vue
@@ -49,10 +49,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('muteAndBlock'),
-					icon: faBan
-				}]
+				title: this.$t('muteAndBlock'),
+				icon: faBan
 			},
 			tab: 'mute',
 			mutingPagination: {
diff --git a/src/client/pages/settings/notifications.vue b/src/client/pages/settings/notifications.vue
index 6d73e79a31..0b709a504b 100644
--- a/src/client/pages/settings/notifications.vue
+++ b/src/client/pages/settings/notifications.vue
@@ -40,10 +40,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('notifications'),
-					icon: faBell
-				}]
+				title: this.$t('notifications'),
+				icon: faBell
 			},
 			faCog
 		}
diff --git a/src/client/pages/settings/other.vue b/src/client/pages/settings/other.vue
index 0faf4e4c85..9c44d1b4f4 100644
--- a/src/client/pages/settings/other.vue
+++ b/src/client/pages/settings/other.vue
@@ -42,10 +42,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('other'),
-					icon: faEllipsisH
-				}]
+				title: this.$t('other'),
+				icon: faEllipsisH
 			},
 			debug
 		}
diff --git a/src/client/pages/settings/privacy.vue b/src/client/pages/settings/privacy.vue
index a92baca9d9..27a949836a 100644
--- a/src/client/pages/settings/privacy.vue
+++ b/src/client/pages/settings/privacy.vue
@@ -38,10 +38,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('privacy'),
-					icon: faLockOpen
-				}]
+				title: this.$t('privacy'),
+				icon: faLockOpen
 			},
 			isLocked: false,
 			autoAcceptFollowed: false,
diff --git a/src/client/pages/settings/profile.vue b/src/client/pages/settings/profile.vue
index 4444b4f484..6a523e08cf 100644
--- a/src/client/pages/settings/profile.vue
+++ b/src/client/pages/settings/profile.vue
@@ -81,10 +81,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('profile'),
-					icon: faUser
-				}]
+				title: this.$t('profile'),
+				icon: faUser
 			},
 			host,
 			name: null,
diff --git a/src/client/pages/settings/reaction.vue b/src/client/pages/settings/reaction.vue
index 8d76d65ed1..7de2f72f61 100644
--- a/src/client/pages/settings/reaction.vue
+++ b/src/client/pages/settings/reaction.vue
@@ -37,10 +37,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('reaction'),
-					icon: faLaugh
-				}]
+				title: this.$t('reaction'),
+				icon: faLaugh
 			},
 			reactions: this.$store.state.settings.reactions.join(''),
 			changed: false,
diff --git a/src/client/pages/settings/regedit.vue b/src/client/pages/settings/regedit.vue
index fcc249bef3..3db60c5905 100644
--- a/src/client/pages/settings/regedit.vue
+++ b/src/client/pages/settings/regedit.vue
@@ -46,10 +46,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: 'RegEdit',
-					icon: faCode
-				}]
+				title: 'RegEdit',
+				icon: faCode
 			},
 
 			settings: JSON5.stringify(this.$store.state.settings, null, '\t'),
diff --git a/src/client/pages/settings/security.vue b/src/client/pages/settings/security.vue
index e56d4ae99d..98863679c4 100644
--- a/src/client/pages/settings/security.vue
+++ b/src/client/pages/settings/security.vue
@@ -31,10 +31,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('security'),
-					icon: faLock
-				}]
+				title: this.$t('security'),
+				icon: faLock
 			},
 			faLock, faSyncAlt
 		}
diff --git a/src/client/pages/settings/sidebar.vue b/src/client/pages/settings/sidebar.vue
index e55899df97..2ab5acf936 100644
--- a/src/client/pages/settings/sidebar.vue
+++ b/src/client/pages/settings/sidebar.vue
@@ -43,10 +43,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('sidebar'),
-					icon: faListUl
-				}]
+				title: this.$t('sidebar'),
+				icon: faListUl
 			},
 			menuDef: sidebarDef,
 			items: '',
diff --git a/src/client/pages/settings/theme.vue b/src/client/pages/settings/theme.vue
index 866790bd26..7bca14adac 100644
--- a/src/client/pages/settings/theme.vue
+++ b/src/client/pages/settings/theme.vue
@@ -105,10 +105,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('theme'),
-					icon: faPalette
-				}]
+				title: this.$t('theme'),
+				icon: faPalette
 			},
 			builtinThemes,
 			installThemeCode: null,
diff --git a/src/client/pages/settings/word-mute.vue b/src/client/pages/settings/word-mute.vue
index a517536a1c..aeae031830 100644
--- a/src/client/pages/settings/word-mute.vue
+++ b/src/client/pages/settings/word-mute.vue
@@ -48,10 +48,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('wordMute'),
-					icon: faCommentSlash
-				}]
+				title: this.$t('wordMute'),
+				icon: faCommentSlash
 			},
 			tab: 'soft',
 			softMutedWords: '',
diff --git a/src/client/pages/share.vue b/src/client/pages/share.vue
index dd1e82dedb..d56307466c 100644
--- a/src/client/pages/share.vue
+++ b/src/client/pages/share.vue
@@ -27,10 +27,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('share'),
-					icon: faShareAlt
-				}],
+				title: this.$t('share'),
+				icon: faShareAlt
 			},
 			title: null,
 			text: null,
diff --git a/src/client/pages/tag.vue b/src/client/pages/tag.vue
index bbaf5b81ca..910e7cd028 100644
--- a/src/client/pages/tag.vue
+++ b/src/client/pages/tag.vue
@@ -25,10 +25,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.tag,
-					icon: faHashtag
-				}],
+				title: this.tag,
+				icon: faHashtag
 			},
 			pagination: {
 				endpoint: 'notes/search-by-tag',
diff --git a/src/client/pages/test.vue b/src/client/pages/test.vue
index bcfe891c8f..820cd950a1 100644
--- a/src/client/pages/test.vue
+++ b/src/client/pages/test.vue
@@ -152,10 +152,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: 'TEST',
-					icon: faExclamationTriangle
-				}]
+				title: 'TEST',
+				icon: faExclamationTriangle
 			},
 			dialogTitle: 'Hello',
 			dialogBody: 'World!',
diff --git a/src/client/pages/theme-editor.vue b/src/client/pages/theme-editor.vue
index e5b593137e..4b1ec59cfe 100644
--- a/src/client/pages/theme-editor.vue
+++ b/src/client/pages/theme-editor.vue
@@ -121,10 +121,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: this.$t('themeEditor'),
-					icon: faPalette,
-				}],
+				title: this.$t('themeEditor'),
+				icon: faPalette,
 			},
 			theme: [] as ThemeViewModel,
 			name: '',
diff --git a/src/client/pages/timeline.vue b/src/client/pages/timeline.vue
index cefcf54b6d..af4de09af0 100644
--- a/src/client/pages/timeline.vue
+++ b/src/client/pages/timeline.vue
@@ -50,7 +50,7 @@ export default defineComponent({
 			queue: 0,
 			width: 0,
 			INFO: computed(() => {
-				const header = [{
+				const tabs = [{
 					id: 'home',
 					title: null,
 					tooltip: this.$t('_timelines.home'),
@@ -60,7 +60,7 @@ export default defineComponent({
 				}];
 
 				if (!this.$store.state.instance.meta.disableLocalTimeline || this.$store.state.i.isModerator || this.$store.state.i.isAdmin) {
-					header.push({
+					tabs.push({
 						id: 'local',
 						title: null,
 						tooltip: this.$t('_timelines.local'),
@@ -69,7 +69,7 @@ export default defineComponent({
 						selected: computed(() => this.src === 'local')
 					});
 
-					header.push({
+					tabs.push({
 						id: 'social',
 						title: null,
 						tooltip: this.$t('_timelines.social'),
@@ -80,7 +80,7 @@ export default defineComponent({
 				}
 
 				if (!this.$store.state.instance.meta.disableGlobalTimeline || this.$store.state.i.isModerator || this.$store.state.i.isAdmin) {
-					header.push({
+					tabs.push({
 						id: 'global',
 						title: null,
 						tooltip: this.$t('_timelines.global'),
@@ -90,7 +90,7 @@ export default defineComponent({
 					});
 				}
 
-				header.push({
+				tabs.push({
 					id: 'other',
 					title: null,
 					icon: faEllipsisH,
@@ -99,7 +99,7 @@ export default defineComponent({
 				});
 
 				return {
-					header,
+					tabs,
 					action: {
 						icon: faPencilAlt,
 						handler: () => os.post()
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index 01f0deac49..015d83f755 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -160,10 +160,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: computed(() => this.user ? {
-				header: [{
-					userName: this.user,
-					avatar: this.user,
-				}],
+				userName: this.user,
+				avatar: this.user,
 				action: {
 					icon: faEllipsisH,
 					handler: this.menu
diff --git a/src/client/pages/welcome.vue b/src/client/pages/welcome.vue
index fb130cba5c..32ac43eb9d 100644
--- a/src/client/pages/welcome.vue
+++ b/src/client/pages/welcome.vue
@@ -20,10 +20,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
-					title: instanceName || 'Misskey',
-					icon: null
-				}]
+				title: instanceName || 'Misskey',
+				icon: null
 			},
 		}
 	},
diff --git a/src/client/ui/_common_/header.vue b/src/client/ui/_common_/header.vue
index 5d7253c368..13f6420aa8 100644
--- a/src/client/ui/_common_/header.vue
+++ b/src/client/ui/_common_/header.vue
@@ -5,12 +5,20 @@
 	</transition>
 	<template v-if="info">
 		<div class="titleContainer">
-			<div class="title" v-for="header in info.header" :key="header.id" :class="{ _button: header.onClick, selected: header.selected }" @click="header.onClick" v-tooltip="header.tooltip">
-				<Fa v-if="header.icon" :icon="header.icon" :key="header.icon" class="icon"/>
-				<MkAvatar v-else-if="header.avatar" class="avatar" :user="header.avatar" :disable-preview="true"/>
-				<span v-if="header.title" class="text">{{ header.title }}</span>
-				<MkUserName v-else-if="header.userName" :user="header.userName" :nowrap="false" class="text"/>
-			</div>
+			<template v-if="info.tabs">
+				<div class="title" v-for="tab in info.tabs" :key="tab.id" :class="{ _button: tab.onClick, selected: tab.selected }" @click="tab.onClick" v-tooltip="tab.tooltip">
+					<Fa v-if="tab.icon" :icon="tab.icon" :key="tab.icon" class="icon"/>
+					<span v-if="tab.title" class="text">{{ tab.title }}</span>
+				</div>
+			</template>
+			<template v-else>
+				<div class="title">
+					<Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/>
+					<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true"/>
+					<span v-if="info.title" class="text">{{ info.title }}</span>
+					<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
+				</div>
+			</template>
 		</div>
 		<button class="_button action" v-if="info.action" @click="info.action.handler"><Fa :icon="info.action.icon" :key="info.action.icon"/></button>
 	</template>