wip

src/client/components/global/header.vue

@@ -26,7 +26,10 @@
 	</template>
 	<div class="buttons right">
 		<template v-if="info && info.actions && !narrow">
-			<button v-for="action in info.actions" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag" v-tooltip="action.text"><i :class="action.icon"></i></button>
+			<template v-for="action in info.actions">
+				<MkButton class="fullButton" v-if="action.asFullButton" @click.stop="action.handler" primary><i :class="action.icon" style="margin-right: 6px;"></i>{{ action.text }}</MkButton>
+				<button v-else class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag" v-tooltip="action.text"><i :class="action.icon"></i></button>
+			</template>
 		</template>
 		<button v-if="shouldShowMenu" class="_button button" @click.stop="showMenu" @touchstart="preventDrag" v-tooltip="$ts.menu"><i class="fas fa-ellipsis-h"></i></button>
 	</div>
@@ -39,8 +42,13 @@ import * as tinycolor from 'tinycolor2';
 import { popupMenu } from '@client/os';
 import { url } from '@client/config';
 import { scrollToTop } from '@client/scripts/scroll';
+import MkButton from '@client/components/ui/button.vue';
 
 export default defineComponent({
+	components: {
+		MkButton
+	},
+
 	props: {
 		info: {
 			required: true
@@ -208,6 +216,12 @@ export default defineComponent({
 				color: var(--accent);
 			}
 		}
+
+		> .fullButton {
+			& + .fullButton {
+				margin-left: 12px;
+			}
+		}
 	}
 
 	> .titleContainer {

src/client/pages/instance/emojis.vue

@@ -1,12 +1,8 @@
 <template>
 <div class="ogwlenmc">
-	<MkTab v-model="tab">
-		<option value="local">{{ $ts.local }}</option>
-		<option value="remote">{{ $ts.remote }}</option>
-	</MkTab>
+	<MkHeader :info="header"/>
 
 	<div class="local" v-if="tab === 'local'">
-		<MkButton primary @click="add" style="margin: var(--margin) auto;"><i class="fas fa-plus"></i> {{ $ts.addEmoji }}</MkButton>
 		<MkInput v-model="query" :debounce="true" type="search" style="margin: var(--margin);">
 			<template #prefix><i class="fas fa-search"></i></template>
 			<template #label>{{ $ts.search }}</template>
@@ -79,11 +75,27 @@ export default defineComponent({
 				title: this.$ts.customEmojis,
 				icon: 'fas fa-laugh',
 				bg: 'var(--bg)',
-				action: {
-					icon: 'fas fa-plus',
-					handler: this.add
-				}
 			},
+			header: computed(() => ({
+				title: this.$ts.customEmojis,
+				icon: 'fas fa-laugh',
+				bg: 'var(--bg)',
+				actions: [{
+					asFullButton: true,
+					icon: 'fas fa-plus',
+					text: this.$ts.addEmoji,
+					handler: this.add,
+				}],
+				tabs: [{
+					active: this.tab === 'local',
+					title: this.$ts.local,
+					onClick: () => { this.tab = 'local'; },
+				}, {
+					active: this.tab === 'remote',
+					title: this.$ts.remote,
+					onClick: () => { this.tab = 'remote'; },
+				},]
+			})),
 			tab: 'local',
 			query: null,
 			queryRemote: null,

src/client/pages/instance/users.vue

@@ -1,9 +1,6 @@
 <template>
 <div class="lknzcolw">
-	<div class="actions">
-		<MkButton inline primary @click="addUser()"><i class="fas fa-plus"></i> {{ $ts.addUser }}</MkButton>
-		<MkButton inline primary @click="lookupUser()"><i class="fas fa-search"></i> {{ $ts.lookup }}</MkButton>
-	</div>
+	<MkHeader :info="header"/>
 
 	<div class="users">
 		<div class="inputs">
@@ -91,10 +88,26 @@ export default defineComponent({
 				title: this.$ts.users,
 				icon: 'fas fa-users',
 				bg: 'var(--bg)',
-				action: {
+			},
+			header: {
+				title: this.$ts.users,
+				icon: 'fas fa-users',
+				bg: 'var(--bg)',
+				actions: [{
 					icon: 'fas fa-search',
+					text: this.$ts.search,
 					handler: this.searchUser
-				}
+				}, {
+					asFullButton: true,
+					icon: 'fas fa-plus',
+					text: this.$ts.addUser,
+					handler: this.addUser
+				}, {
+					asFullButton: true,
+					icon: 'fas fa-search',
+					text: this.$ts.lookup,
+					handler: this.lookupUser
+				}]
 			},
 			sort: '+createdAt',
 			state: 'all',
@@ -173,10 +186,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .lknzcolw {
-	> .actions {
-		margin: var(--margin);
-	}
-
 	> .users {
 		margin: var(--margin);