Refactoring

src/client/pages/_error_.vue

@@ -22,10 +22,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('error'),
 				icon: faExclamationTriangle
-				}]
 			},
 			faExclamationTriangle
 		};

src/client/pages/about-misskey.vue

@@ -87,10 +87,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('aboutMisskey'),
 				icon: null
-				}]
 			},
 			version,
 			faInfoCircle

src/client/pages/about.vue

@@ -37,10 +37,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('about'),
 				icon: faInfoCircle
-				}]
 			},
 			version,
 			serverInfo: null,

src/client/pages/announcements.vue

@@ -31,10 +31,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('announcements'),
 				icon: faBroadcastTower
-				}]
 			},
 			pagination: {
 				endpoint: 'announcements',

src/client/pages/api-console.vue

@@ -41,10 +41,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: 'API console',
 				icon: faTerminal
-				}]
 			},
 
 			endpoint: '',

src/client/pages/apps.vue

@@ -51,10 +51,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('installedApps'),
 				icon: faPlug,
-				}],
 			},
 			pagination: {
 				endpoint: 'i/apps',

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,
-				}],
 			} : {
-				header: [{
 				title: this.$t('_channel.create'),
 				icon: faSatelliteDish,
-				}],
 			}),
 			channel: null,
 			name: null,

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,
-				}],
 			} : null),
 			channel: null,
 			showBanner: true,

src/client/pages/channels.vue

@@ -43,10 +43,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('channel'),
 				icon: faSatelliteDish
-				}]
 			},
 			tab: 'featured',
 			featuredPagination: {

src/client/pages/doc.vue

@@ -43,10 +43,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.title,
 				icon: faFileAlt
-				}],
 			},
 			faFileAlt,
 			title: '',

src/client/pages/docs.vue

@@ -21,10 +21,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('help'),
 				icon: faQuestionCircle
-				}],
 			},
 			docs: [],
 			faQuestionCircle

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,
-				}],
 				action: {
 					icon: faEllipsisH,
 					handler: this.menu

src/client/pages/explore.vue

@@ -93,10 +93,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('explore'),
 				icon: faHashtag
-				}],
 			},
 			pinnedUsers: { endpoint: 'pinned-users' },
 			popularUsers: { endpoint: 'users', limit: 10, noPaging: true, params: {

src/client/pages/favorites.vue

@@ -19,10 +19,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('favorites'),
 				icon: faStar
-				}]
 			},
 			pagination: {
 				endpoint: 'i/favorites',

src/client/pages/featured.vue

@@ -18,10 +18,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('featured'),
 				icon: faFireAlt
-				}],
 			},
 			pagination: {
 				endpoint: 'notes/featured',

src/client/pages/follow-requests.vue

@@ -44,10 +44,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('followRequests'),
 				icon: faUserClock,
-				}],
 			},
 			pagination: {
 				endpoint: 'following/requests/list',

src/client/pages/instance/abuses.vue

@@ -84,10 +84,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('abuseReports'),
 				icon: faExclamationCircle
-				}],
 			},
 			searchUsername: '',
 			searchHost: '',

src/client/pages/instance/announcements.vue

@@ -45,10 +45,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('announcements'),
 				icon: faBroadcastTower
-				}]
 			},
 			announcements: [],
 			faBroadcastTower, faSave, faTrashAlt, faPlus

src/client/pages/instance/emojis.vue

@@ -68,10 +68,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('customEmojis'),
-					icon: faLaugh
+				icon: faLaugh,
-				}],
 				action: {
 					icon: faPlus,
 					handler: this.add

src/client/pages/instance/federation.vue

@@ -79,10 +79,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('federation'),
 				icon: faGlobe
-				}],
 			},
 			host: '',
 			state: 'federating',

src/client/pages/instance/files.vue

@@ -84,10 +84,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('files'),
 				icon: faCloud
-				}],
 			},
 			q: null,
 			origin: 'local',

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'),

src/client/pages/instance/logs.vue

@@ -49,10 +49,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('serverLogs'),
 				icon: faStream
-				}]
 			},
 			logs: [],
 			logLevel: 'all',

src/client/pages/instance/queue.vue

@@ -31,10 +31,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('jobQueue'),
 				icon: faExchangeAlt,
-				}],
 			},
 			connection: os.stream.useSharedConnection('queueStats'),
 			faExchangeAlt, faTrashAlt

src/client/pages/instance/relays.vue

@@ -38,10 +38,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('relays'),
 				icon: faProjectDiagram,
-				}],
 			},
 			relays: [],
 			inbox: '',

src/client/pages/instance/settings.vue

@@ -257,10 +257,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('instance'),
 				icon: faCog,
-				}],
 			},
 			url,
 			proxyAccount: null,

src/client/pages/instance/users.vue

@@ -101,10 +101,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('users'),
-					icon: faUsers
+				icon: faUsers,
-				}],
 				action: {
 					icon: faSearch,
 					handler: this.searchUser

src/client/pages/mentions.vue

@@ -18,10 +18,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('mentions'),
 				icon: faAt
-				}],
 			},
 			pagination: {
 				endpoint: 'notes/mentions',

src/client/pages/messages.vue

@@ -18,10 +18,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('directNotes'),
 				icon: faEnvelope
-				}],
 			},
 			pagination: {
 				endpoint: 'notes/mentions',

src/client/pages/messaging/index.vue

@@ -53,10 +53,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('messaging'),
 				icon: faComments
-				}]
 			},
 			fetching: true,
 			moreFetching: false,

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,
-				}],
 				action: {
 					icon: faEllipsisH,
 					handler: this.menu,
 				},
 			} : {
-				header: [{
 				title: this.group.name,
-					icon: faUsers
+				icon: faUsers,
-				}],
 				action: {
 					icon: faEllipsisH,
 					handler: this.menu,

src/client/pages/my-antennas/index.vue

@@ -29,10 +29,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('manageAntennas'),
-					icon: faSatellite
+				icon: faSatellite,
-				}],
 				action: {
 					icon: faPlus,
 					handler: this.create

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,
-				}],
 			} : null),
 			group: null,
 			users: [],

src/client/pages/my-groups/index.vue

@@ -63,10 +63,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('groups'),
 				icon: faUsers
-				}],
 			},
 			tab: 'owned',
 			ownedPagination: {

src/client/pages/my-lists/index.vue

@@ -26,10 +26,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('manageLists'),
-					icon: faListUl
+				icon: faListUl,
-				}],
 				action: {
 					icon: faPlus,
 					handler: this.create

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,
-				}],
 			} : null),
 			list: null,
 			users: [],

src/client/pages/not-found.vue

@@ -16,10 +16,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('notFound'),
 				icon: faExclamationTriangle
-				}]
 			},
 		}
 	},

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,
-				}],
 			} : null),
 			note: null,
 			hasPrev: false,

src/client/pages/notifications.vue

@@ -21,10 +21,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('notifications'),
 				icon: faBell
-				}]
 			},
 		};
 	},

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,
-				}],
 			} : null),
 			page: null,
 			faHeartS, faHeartR

src/client/pages/pages.vue

@@ -35,10 +35,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('pages'),
-					icon: faStickyNote
+				icon: faStickyNote,
-				}],
 				action: {
 					icon: faPlus,
 					handler: this.create

src/client/pages/reversi/game.vue

@@ -27,10 +27,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('_reversi.reversi'),
 				icon: faGamepad
-				}]
 			},
 			game: null,
 			connection: null,

src/client/pages/reversi/index.vue

@@ -76,10 +76,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('_reversi.reversi'),
 				icon: faGamepad
-				}]
 			},
 			games: [],
 			gamesFetching: true,

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,
-				}],
 			} : null),
 			user: null,
 			objectSelected: false,

src/client/pages/scratchpad.vue

@@ -44,10 +44,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('scratchpad'),
 				icon: faTerminal,
-				}],
 			},
 			code: '',
 			logs: [],

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
-				}],
 			},
 			pagination: {
 				endpoint: 'notes/search',

src/client/pages/settings/api.vue

@@ -28,10 +28,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: 'API',
 				icon: faKey
-				}]
 			},
 			isDesktop: window.innerWidth >= 1100,
 		};

src/client/pages/settings/general.vue

@@ -107,10 +107,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('general'),
 				icon: faCogs
-				}]
 			},
 			langs,
 			lang: localStorage.getItem('lang'),

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
-			}]
 		});
 		const narrow = ref(false);
 		const view = ref(null);

src/client/pages/settings/integration.vue

@@ -41,10 +41,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('integration'),
 				icon: faShareAlt
-				}]
 			},
 			apiUrl,
 			twitterForm: null,

src/client/pages/settings/mute-block.vue

@@ -49,10 +49,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('muteAndBlock'),
 				icon: faBan
-				}]
 			},
 			tab: 'mute',
 			mutingPagination: {

src/client/pages/settings/notifications.vue

@@ -40,10 +40,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('notifications'),
 				icon: faBell
-				}]
 			},
 			faCog
 		}

src/client/pages/settings/other.vue

@@ -42,10 +42,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('other'),
 				icon: faEllipsisH
-				}]
 			},
 			debug
 		}

src/client/pages/settings/privacy.vue

@@ -38,10 +38,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('privacy'),
 				icon: faLockOpen
-				}]
 			},
 			isLocked: false,
 			autoAcceptFollowed: false,

src/client/pages/settings/profile.vue

@@ -81,10 +81,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('profile'),
 				icon: faUser
-				}]
 			},
 			host,
 			name: null,

src/client/pages/settings/reaction.vue

@@ -37,10 +37,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('reaction'),
 				icon: faLaugh
-				}]
 			},
 			reactions: this.$store.state.settings.reactions.join(''),
 			changed: false,

src/client/pages/settings/regedit.vue

@@ -46,10 +46,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: 'RegEdit',
 				icon: faCode
-				}]
 			},
 
 			settings: JSON5.stringify(this.$store.state.settings, null, '\t'),

src/client/pages/settings/security.vue

@@ -31,10 +31,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('security'),
 				icon: faLock
-				}]
 			},
 			faLock, faSyncAlt
 		}

src/client/pages/settings/sidebar.vue

@@ -43,10 +43,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('sidebar'),
 				icon: faListUl
-				}]
 			},
 			menuDef: sidebarDef,
 			items: '',

src/client/pages/settings/theme.vue

@@ -105,10 +105,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('theme'),
 				icon: faPalette
-				}]
 			},
 			builtinThemes,
 			installThemeCode: null,

src/client/pages/settings/word-mute.vue

@@ -48,10 +48,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('wordMute'),
 				icon: faCommentSlash
-				}]
 			},
 			tab: 'soft',
 			softMutedWords: '',

src/client/pages/share.vue

@@ -27,10 +27,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('share'),
 				icon: faShareAlt
-				}],
 			},
 			title: null,
 			text: null,

src/client/pages/tag.vue

@@ -25,10 +25,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.tag,
 				icon: faHashtag
-				}],
 			},
 			pagination: {
 				endpoint: 'notes/search-by-tag',

src/client/pages/test.vue

@@ -152,10 +152,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: 'TEST',
 				icon: faExclamationTriangle
-				}]
 			},
 			dialogTitle: 'Hello',
 			dialogBody: 'World!',

src/client/pages/theme-editor.vue

@@ -121,10 +121,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: this.$t('themeEditor'),
 				icon: faPalette,
-				}],
 			},
 			theme: [] as ThemeViewModel,
 			name: '',

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()

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,
-				}],
 				action: {
 					icon: faEllipsisH,
 					handler: this.menu

src/client/pages/welcome.vue

@@ -20,10 +20,8 @@ export default defineComponent({
 	data() {
 		return {
 			INFO: {
-				header: [{
 				title: instanceName || 'Misskey',
 				icon: null
-				}]
 			},
 		}
 	},

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">
+			<template v-if="info.tabs">
-				<Fa v-if="header.icon" :icon="header.icon" :key="header.icon" class="icon"/>
+				<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">
-				<MkAvatar v-else-if="header.avatar" class="avatar" :user="header.avatar" :disable-preview="true"/>
+					<Fa v-if="tab.icon" :icon="tab.icon" :key="tab.icon" class="icon"/>
-				<span v-if="header.title" class="text">{{ header.title }}</span>
+					<span v-if="tab.title" class="text">{{ tab.title }}</span>
-				<MkUserName v-else-if="header.userName" :user="header.userName" :nowrap="false" class="text"/>
 				</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>