From d9a5633e486aae82e6849213568a737bdcb79f19 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 22 Aug 2020 09:12:15 +0900
Subject: [PATCH] wip

---
 src/client/components/ui/range.vue            |  2 +-
 src/client/deck.vue                           |  8 +-------
 src/client/default.vue                        | 10 +---------
 src/client/pages/about-misskey.vue            |  2 +-
 src/client/pages/about.vue                    |  3 +--
 src/client/pages/announcements.vue            |  3 +--
 src/client/pages/apps.vue                     |  3 +--
 src/client/pages/channel-editor.vue           |  3 +--
 src/client/pages/channel.vue                  |  3 +--
 src/client/pages/channels.vue                 |  3 +--
 src/client/pages/doc.vue                      |  3 +--
 src/client/pages/docs.vue                     |  3 +--
 src/client/pages/drive.vue                    |  4 ++--
 src/client/pages/explore.vue                  |  3 +--
 src/client/pages/favorites.vue                |  3 +--
 src/client/pages/featured.vue                 |  3 +--
 src/client/pages/follow-requests.vue          |  3 +--
 src/client/pages/index.home.vue               |  4 ++--
 src/client/pages/index.welcome.vue            |  2 +-
 src/client/pages/instance/announcements.vue   |  3 +--
 src/client/pages/instance/emojis.vue          |  3 +--
 src/client/pages/instance/federation.vue      |  3 +--
 src/client/pages/instance/index.vue           |  3 +--
 src/client/pages/instance/queue.vue           |  3 +--
 src/client/pages/instance/relays.vue          |  3 +--
 src/client/pages/instance/settings.vue        |  3 +--
 src/client/pages/instance/users.user.vue      |  3 +--
 src/client/pages/instance/users.vue           |  3 +--
 src/client/pages/mentions.vue                 |  3 +--
 src/client/pages/messages.vue                 |  3 +--
 src/client/pages/messaging/index.vue          |  3 +--
 src/client/pages/messaging/messaging-room.vue |  6 ++----
 src/client/pages/my-antennas/index.vue        |  3 +--
 src/client/pages/my-groups/group.vue          |  3 +--
 src/client/pages/my-groups/index.vue          |  3 +--
 src/client/pages/my-lists/index.vue           |  3 +--
 src/client/pages/my-lists/list.vue            |  3 +--
 src/client/pages/my-settings/index.vue        |  3 +--
 src/client/pages/not-found.vue                |  3 +--
 src/client/pages/note.vue                     |  6 +++---
 src/client/pages/notifications.vue            |  3 +--
 src/client/pages/page.vue                     |  3 +--
 src/client/pages/pages.vue                    |  3 +--
 src/client/pages/preferences/index.vue        |  3 +--
 src/client/pages/room/room.vue                |  6 +++---
 src/client/pages/scratchpad.vue               |  3 +--
 src/client/pages/search.vue                   |  3 +--
 src/client/pages/share.vue                    |  3 +--
 src/client/pages/tag.vue                      |  3 +--
 src/client/pages/theme-editor.vue             |  3 +--
 src/client/pages/user/index.vue               |  3 +--
 51 files changed, 58 insertions(+), 115 deletions(-)

diff --git a/src/client/components/ui/range.vue b/src/client/components/ui/range.vue
index 5a40b22914..237ad7826e 100644
--- a/src/client/components/ui/range.vue
+++ b/src/client/components/ui/range.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import { defineComponent } from 'vue';
 export default defineComponent({
 	props: {
 		value: {
diff --git a/src/client/deck.vue b/src/client/deck.vue
index fe46356bf4..897d548fdb 100644
--- a/src/client/deck.vue
+++ b/src/client/deck.vue
@@ -10,13 +10,7 @@
 
 		<template #header>
 			<div class="iwnjqeul">
-				<div class="default">
-					<portal-target name="avatar" slim/>
-					<span class="title"><portal-target name="icon" slim/><portal-target name="title" slim/></span>
-				</div>
-				<div class="custom">
-					<portal-target name="header" slim/>
-				</div>
+				<div class="body" id="_teleport_header"></div>
 			</div>
 		</template>
 
diff --git a/src/client/default.vue b/src/client/default.vue
index 83c62fda23..edf88e8eb1 100644
--- a/src/client/default.vue
+++ b/src/client/default.vue
@@ -6,15 +6,7 @@
 				<button class="_button back" v-if="canBack" @click="back()"><fa :icon="faChevronLeft"/></button>
 			</transition>
 			<transition :name="$store.state.device.animation ? 'header' : ''" mode="out-in" appear>
-				<div class="body" :key="pageKey">
-					<div class="default">
-						<portal-target name="avatar" slim/>
-						<h1 class="title"><portal-target name="icon" slim/><portal-target name="title" slim/></h1>
-					</div>
-					<div class="custom">
-						<portal-target name="header" slim/>
-					</div>
-				</div>
+				<div class="body" :key="pageKey" id="_teleport_header"></div>
 			</transition>
 		</div>
 		<div class="sub">
diff --git a/src/client/pages/about-misskey.vue b/src/client/pages/about-misskey.vue
index 424241e9d9..635af7c031 100644
--- a/src/client/pages/about-misskey.vue
+++ b/src/client/pages/about-misskey.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="znqjceqz">
-	<portal to="title">{{ $t('aboutMisskey') }}</portal>
+	<teleport to="#_teleport_header">{{ $t('aboutMisskey') }}</teleport>
 
 	<section class="_card">
 		<div class="_title">{{ $t('aboutMisskey') }}</div>
diff --git a/src/client/pages/about.vue b/src/client/pages/about.vue
index 102fd218a5..a1f36a88c1 100644
--- a/src/client/pages/about.vue
+++ b/src/client/pages/about.vue
@@ -1,7 +1,6 @@
 <template>
 <div class="mmnnbwxb">
-	<portal to="icon"><fa :icon="faInfoCircle"/></portal>
-	<portal to="title">{{ $t('about') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faInfoCircle"/>{{ $t('about') }}</teleport>
 
 	<section class="_card info" v-if="meta">
 		<div class="_title"><fa :icon="faInfoCircle"/> {{ $t('instanceInfo') }}</div>
diff --git a/src/client/pages/announcements.vue b/src/client/pages/announcements.vue
index 8edaf248bf..0b30325741 100644
--- a/src/client/pages/announcements.vue
+++ b/src/client/pages/announcements.vue
@@ -1,7 +1,6 @@
 <template>
 <div>
-	<portal to="icon"><fa :icon="faBroadcastTower"/></portal>
-	<portal to="title">{{ $t('announcements') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faBroadcastTower"/>{{ $t('announcements') }}</teleport>
 
 	<mk-pagination :pagination="pagination" #default="{items}" class="ruryvtyk" ref="list">
 		<section class="_card announcement" v-for="(announcement, i) in items" :key="announcement.id">
diff --git a/src/client/pages/apps.vue b/src/client/pages/apps.vue
index c1ff5f22db..c3cb1d2ee6 100644
--- a/src/client/pages/apps.vue
+++ b/src/client/pages/apps.vue
@@ -1,7 +1,6 @@
 <template>
 <div>
-	<portal to="icon"><fa :icon="faPlug"/></portal>
-	<portal to="title">{{ $t('installedApps') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faPlug"/>{{ $t('installedApps') }}</teleport>
 
 	<mk-pagination :pagination="pagination" class="bfomjevm" ref="list">
 		<template #empty>
diff --git a/src/client/pages/channel-editor.vue b/src/client/pages/channel-editor.vue
index 9c9a4b171d..17ef6e1470 100644
--- a/src/client/pages/channel-editor.vue
+++ b/src/client/pages/channel-editor.vue
@@ -1,7 +1,6 @@
 <template>
 <div>
-	<portal to="icon"><fa :icon="faSatelliteDish"/></portal>
-	<portal to="title">{{ channelId ? $t('_channel.edit') : $t('_channel.create') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faSatelliteDish"/>{{ channelId ? $t('_channel.edit') : $t('_channel.create') }}</teleport>
 
 	<div class="_card">
 		<div class="_content">
diff --git a/src/client/pages/channel.vue b/src/client/pages/channel.vue
index 1b64db8f87..6fad038167 100644
--- a/src/client/pages/channel.vue
+++ b/src/client/pages/channel.vue
@@ -1,7 +1,6 @@
 <template>
 <div v-if="channel">
-	<portal to="icon"><fa :icon="faSatelliteDish"/></portal>
-	<portal to="title">{{ channel.name }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faSatelliteDish"/>{{ channel.name }}</teleport>
 
 	<div class="wpgynlbz _panel _vMargin" :class="{ hide: !showBanner }">
 		<x-channel-follow-button :channel="channel" :full="true" class="subscribe"/>
diff --git a/src/client/pages/channels.vue b/src/client/pages/channels.vue
index e5f932b696..bff4de95dd 100644
--- a/src/client/pages/channels.vue
+++ b/src/client/pages/channels.vue
@@ -1,7 +1,6 @@
 <template>
 <div>
-	<portal to="icon"><fa :icon="faSatelliteDish"/></portal>
-	<portal to="title">{{ $t('channel') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faSatelliteDish"/>{{ $t('channel') }}</teleport>
 
 	<mk-tab v-model="tab" :items="[{ label: $t('_channel.featured'), value: 'featured', icon: faFireAlt }, { label: $t('_channel.following'), value: 'following', icon: faHeart }, { label: $t('_channel.owned'), value: 'owned', icon: faEdit }]"/>
 
diff --git a/src/client/pages/doc.vue b/src/client/pages/doc.vue
index 629e6ffd5f..42b0c4abab 100644
--- a/src/client/pages/doc.vue
+++ b/src/client/pages/doc.vue
@@ -1,7 +1,6 @@
 <template>
 <div>
-	<portal to="icon"><fa :icon="faFileAlt"/></portal>
-	<portal to="title">{{ title }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faFileAlt"/>{{ title }}</teleport>
 	<main class="_card">
 		<div class="_title"><fa :icon="faFileAlt"/> {{ title }}</div>
 		<div class="_content">
diff --git a/src/client/pages/docs.vue b/src/client/pages/docs.vue
index 0d24b2a475..a3bde8ef4f 100644
--- a/src/client/pages/docs.vue
+++ b/src/client/pages/docs.vue
@@ -1,7 +1,6 @@
 <template>
 <div>
-	<portal to="icon"><fa :icon="faQuestionCircle"/></portal>
-	<portal to="title">{{ $t('help') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faQuestionCircle"/>{{ $t('help') }}</teleport>
 	<main class="_card">
 		<div class="_content">
 			<ul>
diff --git a/src/client/pages/drive.vue b/src/client/pages/drive.vue
index 4eb2595c60..90788db321 100644
--- a/src/client/pages/drive.vue
+++ b/src/client/pages/drive.vue
@@ -1,13 +1,13 @@
 <template>
 <div class="full">
-	<portal to="header">
+	<teleport to="#_teleport_header">
 		<button @click="menu" class="_button _jmoebdiw_">
 			<fa :icon="faCloud" style="margin-right: 8px;"/>
 			<span v-if="folder">{{ $t('drive') }} ({{ folder.name }})</span>
 			<span v-else>{{ $t('drive') }}</span>
 			<fa :icon="menuOpened ? faAngleUp : faAngleDown" style="margin-left: 8px;"/>
 		</button>
-	</portal>
+	</teleport>
 	<x-drive ref="drive" @cd="x => folder = x"/>
 </div>
 </template>
diff --git a/src/client/pages/explore.vue b/src/client/pages/explore.vue
index d6ca0d7b6f..9dd439f480 100644
--- a/src/client/pages/explore.vue
+++ b/src/client/pages/explore.vue
@@ -1,7 +1,6 @@
 <template>
 <div>
-	<portal to="icon"><fa :icon="faHashtag"/></portal>
-	<portal to="title">{{ $t('explore') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faHashtag"/>{{ $t('explore') }}</teleport>
 
 	<div class="localfedi7 _panel" v-if="meta && stats && tag == null" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
 		<header><span>{{ $t('explore', { host: meta.name || 'Misskey' }) }}</span></header>
diff --git a/src/client/pages/favorites.vue b/src/client/pages/favorites.vue
index c235ce5ae3..8fdaefa0b9 100644
--- a/src/client/pages/favorites.vue
+++ b/src/client/pages/favorites.vue
@@ -1,7 +1,6 @@
 <template>
 <div>
-	<portal to="icon"><fa :icon="faStar"/></portal>
-	<portal to="title">{{ $t('favorites') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faStar"/>{{ $t('favorites') }}</teleport>
 	<x-notes :pagination="pagination" :detail="true" :prop="'note'" @before="before()" @after="after()"/>
 </div>
 </template>
diff --git a/src/client/pages/featured.vue b/src/client/pages/featured.vue
index 5be5d878d5..3e65f13882 100644
--- a/src/client/pages/featured.vue
+++ b/src/client/pages/featured.vue
@@ -1,7 +1,6 @@
 <template>
 <div>
-	<portal to="icon"><fa :icon="faFireAlt"/></portal>
-	<portal to="title">{{ $t('featured') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faFireAlt"/>{{ $t('featured') }}</teleport>
 	<x-notes ref="notes" :pagination="pagination" @before="before" @after="after"/>
 </div>
 </template>
diff --git a/src/client/pages/follow-requests.vue b/src/client/pages/follow-requests.vue
index 8483c655b0..f37f060d37 100644
--- a/src/client/pages/follow-requests.vue
+++ b/src/client/pages/follow-requests.vue
@@ -1,7 +1,6 @@
 <template>
 <div>
-	<portal to="icon"><fa :icon="faUserClock"/></portal>
-	<portal to="title">{{ $t('followRequests') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faUserClock"/>{{ $t('followRequests') }}</teleport>
 
 	<mk-pagination :pagination="pagination" class="mk-follow-requests" ref="list">
 		<template #empty>
diff --git a/src/client/pages/index.home.vue b/src/client/pages/index.home.vue
index 45d613162d..2562158fde 100644
--- a/src/client/pages/index.home.vue
+++ b/src/client/pages/index.home.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="mk-home" v-hotkey.global="keymap">
-	<portal to="header" v-if="showTitle">
+	<teleport to="#_teleport_header" v-if="showTitle">
 		<button @click="choose" class="_button _kjvfvyph_">
 			<i><fa v-if="$store.state.i.hasUnreadAntenna || $store.state.i.hasUnreadChannel" :icon="faCircle"/></i>
 			<fa v-if="src === 'home'" :icon="faHome"/>
@@ -13,7 +13,7 @@
 			<span style="margin-left: 8px;">{{ src === 'list' ? list.name : src === 'antenna' ? antenna.name : src === 'channel' ? channel.name : $t('_timelines.' + src) }}</span>
 			<fa :icon="menuOpened ? faAngleUp : faAngleDown" style="margin-left: 8px;"/>
 		</button>
-	</portal>
+	</teleport>
 
 	<div class="new" v-if="queue > 0" :style="{ width: width + 'px' }"><button class="_buttonPrimary" @click="top()">{{ $t('newNoteRecived') }}</button></div>
 
diff --git a/src/client/pages/index.welcome.vue b/src/client/pages/index.welcome.vue
index f09f70cd9c..8d35a370b1 100644
--- a/src/client/pages/index.welcome.vue
+++ b/src/client/pages/index.welcome.vue
@@ -1,6 +1,6 @@
 <template>
 <div v-if="meta" class="mk-welcome">
-	<portal to="title">{{ instanceName }}</portal>
+	<teleport to="#_teleport_header">{{ instanceName }}</teleport>
 	<x-setup v-if="meta.requireSetup"/>
 	<x-entrance v-else/>
 </div>
diff --git a/src/client/pages/instance/announcements.vue b/src/client/pages/instance/announcements.vue
index 314f0cdc46..574d260fcc 100644
--- a/src/client/pages/instance/announcements.vue
+++ b/src/client/pages/instance/announcements.vue
@@ -1,7 +1,6 @@
 <template>
 <div class="ztgjmzrw">
-	<portal to="icon"><fa :icon="faBroadcastTower"/></portal>
-	<portal to="title">{{ $t('announcements') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faBroadcastTower"/>{{ $t('announcements') }}</teleport>
 	<mk-button @click="add()" primary style="margin: 0 auto 16px auto;"><fa :icon="faPlus"/> {{ $t('add') }}</mk-button>
 	<section class="_card announcements">
 		<div class="_content announcement" v-for="announcement in announcements">
diff --git a/src/client/pages/instance/emojis.vue b/src/client/pages/instance/emojis.vue
index 70f9466a35..9a73a810a1 100644
--- a/src/client/pages/instance/emojis.vue
+++ b/src/client/pages/instance/emojis.vue
@@ -1,7 +1,6 @@
 <template>
 <div class="mk-instance-emojis">
-	<portal to="icon"><fa :icon="faLaugh"/></portal>
-	<portal to="title">{{ $t('customEmojis') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faLaugh"/>{{ $t('customEmojis') }}</teleport>
 
 	<section class="_card _vMargin local">
 		<div class="_title"><fa :icon="faLaugh"/> {{ $t('customEmojis') }}</div>
diff --git a/src/client/pages/instance/federation.vue b/src/client/pages/instance/federation.vue
index 2e77586ddb..0f6932dd6e 100644
--- a/src/client/pages/instance/federation.vue
+++ b/src/client/pages/instance/federation.vue
@@ -1,7 +1,6 @@
 <template>
 <div class="mk-federation">
-	<portal to="icon"><fa :icon="faGlobe"/></portal>
-	<portal to="title">{{ $t('federation') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faGlobe"/>{{ $t('federation') }}</teleport>
 
 	<section class="_card instances">
 		<div class="_content">
diff --git a/src/client/pages/instance/index.vue b/src/client/pages/instance/index.vue
index 2e2bd0c3fc..bdb15fb1b5 100644
--- a/src/client/pages/instance/index.vue
+++ b/src/client/pages/instance/index.vue
@@ -1,7 +1,6 @@
 <template>
 <div v-if="meta" class="xhexznfu" v-size="{ min: [1600] }">
-	<portal to="icon"><fa :icon="faServer"/></portal>
-	<portal to="title">{{ $t('instance') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faServer"/>{{ $t('instance') }}</teleport>
 
 	<mk-folder>
 		<template #header><fa :icon="faTachometerAlt"/> {{ $t('overview') }}</template>
diff --git a/src/client/pages/instance/queue.vue b/src/client/pages/instance/queue.vue
index 04a228fcfe..0cc7964b7b 100644
--- a/src/client/pages/instance/queue.vue
+++ b/src/client/pages/instance/queue.vue
@@ -1,7 +1,6 @@
 <template>
 <div>
-	<portal to="icon"><fa :icon="faExchangeAlt"/></portal>
-	<portal to="title">{{ $t('jobQueue') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faExchangeAlt"/>{{ $t('jobQueue') }}</teleport>
 
 	<x-queue :connection="connection" domain="inbox">
 		<template #title><fa :icon="faExchangeAlt"/> In</template>
diff --git a/src/client/pages/instance/relays.vue b/src/client/pages/instance/relays.vue
index d410dce273..a41bc8ea6d 100644
--- a/src/client/pages/instance/relays.vue
+++ b/src/client/pages/instance/relays.vue
@@ -1,7 +1,6 @@
 <template>
 <div class="relaycxt">
-	<portal to="icon"><fa :icon="faProjectDiagram"/></portal>
-	<portal to="title">{{ $t('relays') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faProjectDiagram"/>{{ $t('relays') }}</teleport>
 
 	<section class="_card _vMargin add">
 		<div class="_title"><fa :icon="faPlus"/> {{ $t('addRelay') }}</div>
diff --git a/src/client/pages/instance/settings.vue b/src/client/pages/instance/settings.vue
index 5453e79ada..2cfbeb50b8 100644
--- a/src/client/pages/instance/settings.vue
+++ b/src/client/pages/instance/settings.vue
@@ -1,7 +1,6 @@
 <template>
 <div v-if="meta">
-	<portal to="icon"><fa :icon="faCog"/></portal>
-	<portal to="title">{{ $t('settings') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faCog"/>{{ $t('settings') }}</teleport>
 
 	<section class="_card _vMargin info">
 		<div class="_title"><fa :icon="faInfoCircle"/> {{ $t('basicInfo') }}</div>
diff --git a/src/client/pages/instance/users.user.vue b/src/client/pages/instance/users.user.vue
index 17c78f841f..f42cb21527 100644
--- a/src/client/pages/instance/users.user.vue
+++ b/src/client/pages/instance/users.user.vue
@@ -1,7 +1,6 @@
 <template>
 <div class="vrcsvlkm" v-if="user && info">
-	<portal to="title" v-if="user"><mk-user-name :user="user" :nowrap="false" class="name"/></portal>
-	<portal to="avatar" v-if="user"><mk-avatar class="avatar" :user="user" :disable-preview="true"/></portal>
+	<teleport to="#_teleport_header" v-if="user"><mk-avatar class="avatar" :user="user" :disable-preview="true"/><mk-user-name :user="user" :nowrap="false" class="name"/></teleport>
 
 	<section class="_card">
 		<div class="_title">
diff --git a/src/client/pages/instance/users.vue b/src/client/pages/instance/users.vue
index 0167d7aa24..08e2709807 100644
--- a/src/client/pages/instance/users.vue
+++ b/src/client/pages/instance/users.vue
@@ -1,7 +1,6 @@
 <template>
 <div class="mk-instance-users">
-	<portal to="icon"><fa :icon="faUsers"/></portal>
-	<portal to="title">{{ $t('users') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faUsers"/>{{ $t('users') }}</teleport>
 
 	<section class="_card _vMargin lookup">
 		<div class="_title"><fa :icon="faSearch"/> {{ $t('lookup') }}</div>
diff --git a/src/client/pages/mentions.vue b/src/client/pages/mentions.vue
index 9fea3afd83..99a3f93538 100644
--- a/src/client/pages/mentions.vue
+++ b/src/client/pages/mentions.vue
@@ -1,7 +1,6 @@
 <template>
 <div>
-	<portal to="icon"><fa :icon="faAt"/></portal>
-	<portal to="title">{{ $t('mentions') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faAt"/>{{ $t('mentions') }}</teleport>
 	<x-notes :pagination="pagination" @before="before()" @after="after()"/>
 </div>
 </template>
diff --git a/src/client/pages/messages.vue b/src/client/pages/messages.vue
index 49ac32e827..bfeb6b190c 100644
--- a/src/client/pages/messages.vue
+++ b/src/client/pages/messages.vue
@@ -1,7 +1,6 @@
 <template>
 <div>
-	<portal to="icon"><fa :icon="faEnvelope"/></portal>
-	<portal to="title">{{ $t('directNotes') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faEnvelope"/>{{ $t('directNotes') }}</teleport>
 	<x-notes :pagination="pagination" @before="before()" @after="after()"/>
 </div>
 </template>
diff --git a/src/client/pages/messaging/index.vue b/src/client/pages/messaging/index.vue
index f5fac791a8..22614f5fcb 100644
--- a/src/client/pages/messaging/index.vue
+++ b/src/client/pages/messaging/index.vue
@@ -1,7 +1,6 @@
 <template>
 <div class="mk-messaging" v-size="{ max: [400] }">
-	<portal to="icon"><fa :icon="faComments"/></portal>
-	<portal to="title">{{ $t('messaging') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faComments"/>{{ $t('messaging') }}</teleport>
 
 	<mk-button @click="start" primary class="start"><fa :icon="faPlus"/> {{ $t('startMessaging') }}</mk-button>
 
diff --git a/src/client/pages/messaging/messaging-room.vue b/src/client/pages/messaging/messaging-room.vue
index f93c2a2bb5..376b6f06d6 100644
--- a/src/client/pages/messaging/messaging-room.vue
+++ b/src/client/pages/messaging/messaging-room.vue
@@ -4,12 +4,10 @@
 	@drop.prevent.stop="onDrop"
 >
 	<template v-if="!fetching && user">
-		<portal to="title"><mk-user-name :user="user" :nowrap="false" class="name"/></portal>
-		<portal to="avatar"><mk-avatar class="avatar" :user="user" :disable-preview="true"/></portal>
+		<teleport to="#_teleport_header"><mk-avatar class="avatar" :user="user" :disable-preview="true"/><mk-user-name :user="user" :nowrap="false" class="name"/></teleport>
 	</template>
 	<template v-if="!fetching && group">
-		<portal to="icon"><fa :icon="faUsers"/></portal>
-		<portal to="title">{{ group.name }}</portal>
+		<teleport to="#_teleport_header"><fa :icon="faUsers"/>{{ group.name }}</teleport>
 	</template>
 
 	<div class="body">
diff --git a/src/client/pages/my-antennas/index.vue b/src/client/pages/my-antennas/index.vue
index 7943161c94..9f3e70046c 100644
--- a/src/client/pages/my-antennas/index.vue
+++ b/src/client/pages/my-antennas/index.vue
@@ -1,7 +1,6 @@
 <template>
 <div class="ieepwinx">
-	<portal to="icon"><fa :icon="faSatellite"/></portal>
-	<portal to="title">{{ $t('manageAntennas') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faSatellite"/>{{ $t('manageAntennas') }}</teleport>
 
 	<mk-button @click="create" primary class="add"><fa :icon="faPlus"/> {{ $t('add') }}</mk-button>
 
diff --git a/src/client/pages/my-groups/group.vue b/src/client/pages/my-groups/group.vue
index ad01fd5c11..14cddc865e 100644
--- a/src/client/pages/my-groups/group.vue
+++ b/src/client/pages/my-groups/group.vue
@@ -1,7 +1,6 @@
 <template>
 <div class="mk-group-page">
-	<portal to="icon"><fa :icon="faUsers"/></portal>
-	<portal to="title">{{ group.name }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faUsers"/>{{ group.name }}</teleport>
 
 	<transition name="zoom" mode="out-in">
 		<div v-if="group" class="_card _vMargin">
diff --git a/src/client/pages/my-groups/index.vue b/src/client/pages/my-groups/index.vue
index 88f63e49c5..88d7efb8f2 100644
--- a/src/client/pages/my-groups/index.vue
+++ b/src/client/pages/my-groups/index.vue
@@ -1,7 +1,6 @@
 <template>
 <div class="">
-	<portal to="icon"><fa :icon="faUsers"/></portal>
-	<portal to="title">{{ $t('groups') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faUsers"/>{{ $t('groups') }}</teleport>
 
 	<mk-button @click="create" primary style="margin: 0 auto var(--margin) auto;"><fa :icon="faPlus"/> {{ $t('createGroup') }}</mk-button>
 
diff --git a/src/client/pages/my-lists/index.vue b/src/client/pages/my-lists/index.vue
index edca872eda..8f50aee9d4 100644
--- a/src/client/pages/my-lists/index.vue
+++ b/src/client/pages/my-lists/index.vue
@@ -1,7 +1,6 @@
 <template>
 <div class="qkcjvfiv">
-	<portal to="icon"><fa :icon="faListUl"/></portal>
-	<portal to="title">{{ $t('manageLists') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faListUl"/>{{ $t('manageLists') }}</teleport>
 
 	<mk-button @click="create" primary class="add"><fa :icon="faPlus"/> {{ $t('createList') }}</mk-button>
 
diff --git a/src/client/pages/my-lists/list.vue b/src/client/pages/my-lists/list.vue
index dcf368882e..6a4d4a7743 100644
--- a/src/client/pages/my-lists/list.vue
+++ b/src/client/pages/my-lists/list.vue
@@ -1,7 +1,6 @@
 <template>
 <div class="mk-list-page">
-	<portal to="icon"><fa :icon="faListUl"/></portal>
-	<portal to="title">{{ list.name }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faListUl"/>{{ list.name }}</teleport>
 
 	<transition name="zoom" mode="out-in">
 		<div v-if="list" class="_card _vMargin">
diff --git a/src/client/pages/my-settings/index.vue b/src/client/pages/my-settings/index.vue
index 3a48d4b85c..bce73c695c 100644
--- a/src/client/pages/my-settings/index.vue
+++ b/src/client/pages/my-settings/index.vue
@@ -1,7 +1,6 @@
 <template>
 <div>
-	<portal to="icon"><fa :icon="faCog"/></portal>
-	<portal to="title">{{ $t('accountSettings') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faCog"/>{{ $t('accountSettings') }}</teleport>
 
 	<x-profile-setting class="_vMargin"/>
 	<x-privacy-setting class="_vMargin"/>
diff --git a/src/client/pages/not-found.vue b/src/client/pages/not-found.vue
index b4142cf225..8cdffd08f5 100644
--- a/src/client/pages/not-found.vue
+++ b/src/client/pages/not-found.vue
@@ -1,7 +1,6 @@
 <template>
 <div class="ipledcug">
-	<portal to="icon"><fa :icon="faExclamationTriangle"/></portal>
-	<portal to="title">{{ $t('notFound') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faExclamationTriangle"/>{{ $t('notFound') }}</teleport>
 
 	<div class="_fullinfo">
 		<img src="https://xn--931a.moe/assets/not-found.jpg" class="_ghost"/>
diff --git a/src/client/pages/note.vue b/src/client/pages/note.vue
index 458d2d8c98..d3b2093c0c 100644
--- a/src/client/pages/note.vue
+++ b/src/client/pages/note.vue
@@ -1,12 +1,12 @@
 <template>
 <div class="mk-note-page">
-	<portal to="avatar" v-if="note"><mk-avatar class="avatar" :user="note.user" :disable-preview="true"/></portal>
-	<portal to="title" v-if="note">
+	<teleport to="#_teleport_header" v-if="note">
+		<mk-avatar class="avatar" :user="note.user" :disable-preview="true"/>
 		<mfm 
 			:text="$t('noteOf', { user: note.user.name || note.user.username })"
 			:plain="true" :nowrap="true" :custom-emojis="note.user.emojis" :is-note="false"
 		/>
-	</portal>
+	</teleport>
 
 	<div v-if="note">
 		<button class="_panel _button" v-if="hasNext && !showNext" @click="showNext = true" style="margin: 0 auto var(--margin) auto;"><fa :icon="faChevronUp"/></button>
diff --git a/src/client/pages/notifications.vue b/src/client/pages/notifications.vue
index 04ca4e1ba6..6591cf4e80 100644
--- a/src/client/pages/notifications.vue
+++ b/src/client/pages/notifications.vue
@@ -1,7 +1,6 @@
 <template>
 <div>
-	<portal to="icon"><fa :icon="faBell"/></portal>
-	<portal to="title">{{ $t('notifications') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faBell"/>{{ $t('notifications') }}</teleport>
 	<x-notifications @before="before" @after="after" page/>
 </div>
 </template>
diff --git a/src/client/pages/page.vue b/src/client/pages/page.vue
index fafa217a26..d1fa7917a3 100644
--- a/src/client/pages/page.vue
+++ b/src/client/pages/page.vue
@@ -1,7 +1,6 @@
 <template>
 <div class="xcukqgmh">
-	<portal to="avatar" v-if="page"><mk-avatar class="avatar" :user="page.user" :disable-preview="true"/></portal>
-	<portal to="title" v-if="page">{{ page.title || page.name }}</portal>
+	<teleport to="#_teleport_header" v-if="page"><mk-avatar class="avatar" :user="page.user" :disable-preview="true"/>{{ page.title || page.name }}</teleport>
 
 	<div class="_card" v-if="page" :key="page.id">
 		<div class="_title">{{ page.title }}</div>
diff --git a/src/client/pages/pages.vue b/src/client/pages/pages.vue
index 94d8744fc1..6a31e1d354 100644
--- a/src/client/pages/pages.vue
+++ b/src/client/pages/pages.vue
@@ -1,7 +1,6 @@
 <template>
 <div>
-	<portal to="icon"><fa :icon="faStickyNote"/></portal>
-	<portal to="title">{{ $t('pages') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faStickyNote"/>{{ $t('pages') }}</teleport>
 
 	<mk-tab v-model="tab" :items="[{ label: $t('_pages.my'), value: 'my', icon: faEdit }, { label: $t('_pages.liked'), value: 'liked', icon: faHeart }]"/>
 
diff --git a/src/client/pages/preferences/index.vue b/src/client/pages/preferences/index.vue
index 82f08f3ffd..9b48d19fed 100644
--- a/src/client/pages/preferences/index.vue
+++ b/src/client/pages/preferences/index.vue
@@ -1,7 +1,6 @@
 <template>
 <div>
-	<portal to="icon"><fa :icon="faCog"/></portal>
-	<portal to="title">{{ $t('clinetSettings') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faCog"/>{{ $t('clinetSettings') }}</teleport>
 
 	<router-link v-if="$store.getters.isSignedIn" class="_panel _buttonPrimary" to="/my/settings" style="margin-bottom: var(--margin);">{{ $t('accountSettings') }}</router-link>
 
diff --git a/src/client/pages/room/room.vue b/src/client/pages/room/room.vue
index 6e82cdb441..fbf4c6f913 100644
--- a/src/client/pages/room/room.vue
+++ b/src/client/pages/room/room.vue
@@ -1,12 +1,12 @@
 <template>
 <div class="hveuntkp">
-	<portal to="avatar" v-if="user"><mk-avatar class="avatar" :user="user" :disable-preview="true"/></portal>
-	<portal to="title" v-if="user">
+	<teleport to="#_teleport_header" v-if="user">
+		<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
 		<mfm 
 			:text="$t('_rooms.roomOf', { user: user.name || user.username })"
 			:plain="true" :nowrap="true" :custom-emojis="user.emojis" :is-note="false"
 		/>
-	</portal>
+	</teleport>
 
 	<div class="controller _card _vMargin" v-if="objectSelected">
 		<div class="_content">
diff --git a/src/client/pages/scratchpad.vue b/src/client/pages/scratchpad.vue
index 8c77f6d535..8bac8c8fe5 100644
--- a/src/client/pages/scratchpad.vue
+++ b/src/client/pages/scratchpad.vue
@@ -1,7 +1,6 @@
 <template>
 <div class="">
-	<portal to="icon"><fa :icon="faTerminal"/></portal>
-	<portal to="title">{{ $t('scratchpad') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faTerminal"/>{{ $t('scratchpad') }}</teleport>
 
 	<div class="_panel">
 		<prism-editor v-model="code" :line-numbers="false" language="js"/>
diff --git a/src/client/pages/search.vue b/src/client/pages/search.vue
index 33ef687c80..8c80308c82 100644
--- a/src/client/pages/search.vue
+++ b/src/client/pages/search.vue
@@ -1,7 +1,6 @@
 <template>
 <div>
-	<portal to="icon"><fa :icon="faSearch"/></portal>
-	<portal to="title">{{ $t('searchWith', { q: $route.query.q }) }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faSearch"/>{{ $t('searchWith', { q: $route.query.q }) }}</teleport>
 	<x-notes ref="notes" :pagination="pagination" @before="before" @after="after"/>
 </div>
 </template>
diff --git a/src/client/pages/share.vue b/src/client/pages/share.vue
index be813af9a6..a6112f994e 100644
--- a/src/client/pages/share.vue
+++ b/src/client/pages/share.vue
@@ -1,7 +1,6 @@
 <template>
 <div class="">
-	<portal to="icon"><fa :icon="faShareAlt"/></portal>
-	<portal to="title">{{ $t('share') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faShareAlt"/>{{ $t('share') }}</teleport>
 
 	<section class="_card">
 		<div class="_title" v-if="title">{{ title }}</div>
diff --git a/src/client/pages/tag.vue b/src/client/pages/tag.vue
index 0571dab575..5b0325fe54 100644
--- a/src/client/pages/tag.vue
+++ b/src/client/pages/tag.vue
@@ -1,7 +1,6 @@
 <template>
 <div>
-	<portal to="icon"><fa :icon="faHashtag"/></portal>
-	<portal to="title">{{ $route.params.tag }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faHashtag"/>{{ $route.params.tag }}</teleport>
 
 	<x-notes ref="notes" :pagination="pagination" @before="before" @after="after"/>
 </div>
diff --git a/src/client/pages/theme-editor.vue b/src/client/pages/theme-editor.vue
index 5c61b53949..bdd59042ea 100644
--- a/src/client/pages/theme-editor.vue
+++ b/src/client/pages/theme-editor.vue
@@ -1,7 +1,6 @@
 <template>
 <div class="t9makv94">
-	<portal to="icon"><fa :icon="faPalette"/></portal>
-	<portal to="title">{{ $t('themeEditor') }}</portal>
+	<teleport to="#_teleport_header"><fa :icon="faPalette"/>{{ $t('themeEditor') }}</teleport>
 
 	<section class="_card">
 		<div class="_content">
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index 1c1a63565a..3e8df6bc2a 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -1,7 +1,6 @@
 <template>
 <div class="mk-user-page" v-if="user" v-size="{ max: [500] }">
-	<portal to="title" v-if="user"><mk-user-name :user="user" :nowrap="false" class="name"/></portal>
-	<portal to="avatar" v-if="user"><mk-avatar class="avatar" :user="user" :disable-preview="true"/></portal>
+	<teleport to="#_teleport_header" v-if="user"><mk-avatar class="avatar" :user="user" :disable-preview="true"/><mk-user-name :user="user" :nowrap="false" class="name"/></teleport>
 
 	<mk-remote-caution v-if="user.host != null" :href="user.url" style="margin-bottom: var(--margin)"/>
 	<div class="punished _panel" v-if="user.isSuspended"><fa :icon="faExclamationTriangle" style="margin-right: 8px;"/> {{ $t('userSuspended') }}</div>