Default UI redesign (#7429)

* wip

* wip

* wip

* wip

* Update default.sidebar.vue

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update sticky-sidebar.ts

* wip

* wip

* Update messaging-room.form.vue

* Update timeline.vue

17 files changed, 296 insertions, 295 deletions

diff --git a/src/client/pages/clip.vue b/src/client/pages/clip.vue
index c6e46a9834..9ae41c72f2 100644
--- a/src/client/pages/clip.vue
+++ b/src/client/pages/clip.vue
@@ -142,7 +142,7 @@ export default defineComponent({
 	> .user {
 		$height: 32px;
 		padding: 16px;
-		border-top: solid 1px var(--divider);
+		border-top: solid 0.5px var(--divider);
 		line-height: $height;
 
 		> .avatar {
diff --git a/src/client/pages/doc.vue b/src/client/pages/doc.vue
index 4341cd1f6e..8b8a89efc6 100644
--- a/src/client/pages/doc.vue
+++ b/src/client/pages/doc.vue
@@ -150,7 +150,7 @@ export default defineComponent({
 			font-size: 1.25em;
 			padding: 0 0 0.5em 0;
 			margin: 1.5em 0 1em 0;
-			border-bottom: solid 1px var(--divider);
+			border-bottom: solid 0.5px var(--divider);
 		}
 
 		::v-deep(table) {
@@ -170,7 +170,7 @@ export default defineComponent({
 		::v-deep(kbd.key) {
 			display: inline-block;
 			padding: 6px 8px;
-			border: solid 1px var(--divider);
+			border: solid 0.5px var(--divider);
 			border-radius: 4px;
 			box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 		}
diff --git a/src/client/pages/drive.vue b/src/client/pages/drive.vue
index 754581a8b6..3ca7f60099 100644
--- a/src/client/pages/drive.vue
+++ b/src/client/pages/drive.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import { faCloud, faEllipsisH } from '@fortawesome/free-solid-svg-icons';
+import { faCloud } from '@fortawesome/free-solid-svg-icons';
 import XDrive from '@client/components/drive.vue';
 import * as os from '@client/os';
 
@@ -20,19 +20,10 @@ export default defineComponent({
 			INFO: {
 				title: computed(() => this.folder ? this.folder.name : this.$ts.drive),
 				icon: faCloud,
-				action: {
-					icon: faEllipsisH,
-					handler: this.menu
-				}
+				menu: () => this.$refs.drive.getMenu()
 			},
 			folder: null,
 		};
 	},
-
-	methods: {
-		menu(ev) {
-			os.modalMenu(this.$refs.drive.getMenu(), ev.currentTarget || ev.target);
-		}
-	}
 });
 </script>
diff --git a/src/client/pages/explore.vue b/src/client/pages/explore.vue
index da2eaffb84..dc3d424ba4 100644
--- a/src/client/pages/explore.vue
+++ b/src/client/pages/explore.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="lznhrdub">
+<div class="lznhrdub _root">
 	<div class="_section">
 		<MkInput v-model:value="query" :debounce="true" type="search"><template #icon><Fa :icon="faSearch"/></template><span>{{ $ts.searchUser }}</span></MkInput>
 
diff --git a/src/client/pages/instance/instance.vue b/src/client/pages/instance/instance.vue
index 118e8eae6e..1adb3ab9d2 100644
--- a/src/client/pages/instance/instance.vue
+++ b/src/client/pages/instance/instance.vue
@@ -500,12 +500,12 @@ export default defineComponent({
 		}
 
 		&:not(:first-child) {
-			border-top: solid 1px var(--divider);
+			border-top: solid 0.5px var(--divider);
 		}
 	}
 
 	> .chart {
-		border-top: solid 1px var(--divider);
+		border-top: solid 0.5px var(--divider);
 		padding: 16px 0 12px 0;
 
 		> .header {
diff --git a/src/client/pages/messaging/index.vue b/src/client/pages/messaging/index.vue
index c906b968a4..114a01ec3c 100644
--- a/src/client/pages/messaging/index.vue
+++ b/src/client/pages/messaging/index.vue
@@ -1,40 +1,38 @@
 <template>
-<div class="_section">
-	<div class="mk-messaging _content" v-size="{ max: [400] }">
-		<MkButton @click="start" primary class="start"><Fa :icon="faPlus"/> {{ $ts.startMessaging }}</MkButton>
+<div class="yweeujhr _root" v-size="{ max: [400] }">
+	<MkButton @click="start" primary class="start"><Fa :icon="faPlus"/> {{ $ts.startMessaging }}</MkButton>
 
-		<div class="history" v-if="messages.length > 0">
-			<MkA v-for="(message, i) in messages"
-				class="message _panel"
-				:class="{ isMe: isMe(message), isRead: message.groupId ? message.reads.includes($i.id) : message.isRead }"
-				:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
-				:data-index="i"
-				:key="message.id"
-				v-anim="i"
-			>
-				<div>
-					<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user"/>
-					<header v-if="message.groupId">
-						<span class="name">{{ message.group.name }}</span>
-						<MkTime :time="message.createdAt" class="time"/>
-					</header>
-					<header v-else>
-						<span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span>
-						<span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
-						<MkTime :time="message.createdAt" class="time"/>
-					</header>
-					<div class="body">
-						<p class="text"><span class="me" v-if="isMe(message)">{{ $ts.you }}:</span>{{ message.text }}</p>
-					</div>
+	<div class="history" v-if="messages.length > 0">
+		<MkA v-for="(message, i) in messages"
+			class="message _block _isolated"
+			:class="{ isMe: isMe(message), isRead: message.groupId ? message.reads.includes($i.id) : message.isRead }"
+			:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
+			:data-index="i"
+			:key="message.id"
+			v-anim="i"
+		>
+			<div>
+				<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user"/>
+				<header v-if="message.groupId">
+					<span class="name">{{ message.group.name }}</span>
+					<MkTime :time="message.createdAt" class="time"/>
+				</header>
+				<header v-else>
+					<span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span>
+					<span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
+					<MkTime :time="message.createdAt" class="time"/>
+				</header>
+				<div class="body">
+					<p class="text"><span class="me" v-if="isMe(message)">{{ $ts.you }}:</span>{{ message.text }}</p>
 				</div>
-			</MkA>
-		</div>
-		<div class="_fullinfo" v-if="!fetching && messages.length == 0">
-			<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
-			<div>{{ $ts.noHistory }}</div>
-		</div>
-		<MkLoading v-if="fetching"/>
+			</div>
+		</MkA>
 	</div>
+	<div class="_fullinfo" v-if="!fetching && messages.length == 0">
+		<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+		<div>{{ $ts.noHistory }}</div>
+	</div>
+	<MkLoading v-if="fetching"/>
 </div>
 </template>
 
@@ -167,10 +165,10 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.mk-messaging {
+.yweeujhr {
 
 	> .start {
-		margin: 0 auto var(--margin) auto;
+		margin: var(--margin) auto var(--margin) auto;
 	}
 
 	> .history {
diff --git a/src/client/pages/messaging/messaging-room.form.vue b/src/client/pages/messaging/messaging-room.form.vue
index 5826b8d0d2..c547e18850 100644
--- a/src/client/pages/messaging/messaging-room.form.vue
+++ b/src/client/pages/messaging/messaging-room.form.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-messaging-form _panel"
+<div class="pemppnzi _block"
 	@dragover.stop="onDragover"
 	@drop.stop="onDrop"
 >
@@ -230,7 +230,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.mk-messaging-form {
+.pemppnzi {
 	position: relative;
 
 	> textarea {
diff --git a/src/client/pages/my-clips/index.vue b/src/client/pages/my-clips/index.vue
index b724dfb6b7..d29d147e87 100644
--- a/src/client/pages/my-clips/index.vue
+++ b/src/client/pages/my-clips/index.vue
@@ -96,7 +96,7 @@ export default defineComponent({
 				> .description {
 					margin-top: 8px;
 					padding-top: 8px;
-					border-top: solid 1px var(--divider);
+					border-top: solid 0.5px var(--divider);
 				}
 			}
 		}
diff --git a/src/client/pages/note.vue b/src/client/pages/note.vue
index eb46c49d8b..6debb611fd 100644
--- a/src/client/pages/note.vue
+++ b/src/client/pages/note.vue
@@ -1,12 +1,12 @@
 <template>
-<div class="fcuexfpr">
+<div class="fcuexfpr _root">
 	<div v-if="note" class="note" v-anim>
-		<div class="_section" v-if="showNext">
+		<div class="_vMargin" v-if="showNext">
 			<XNotes class="_content _noGap_" :pagination="next"/>
 		</div>
 
-		<div class="_section main">
-			<MkButton v-if="!showNext && hasNext" class="load next _content" @click="showNext = true"><Fa :icon="faChevronUp"/></MkButton>
+		<div class="main _vMargin">
+			<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><Fa :icon="faChevronUp"/></MkButton>
 			<div class="_content _vMargin">
 				<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_vMargin"/>
 				<XNoteDetailed v-model:note="note" :key="note.id" class="_vMargin"/>
@@ -21,10 +21,10 @@
 					</div>
 				</MkA>
 			</div>
-			<MkButton v-if="!showPrev && hasPrev" class="load prev _content" @click="showPrev = true"><Fa :icon="faChevronDown"/></MkButton>
+			<MkButton v-if="!showPrev && hasPrev" class="load prev" @click="showPrev = true"><Fa :icon="faChevronDown"/></MkButton>
 		</div>
 
-		<div class="_section" v-if="showPrev">
+		<div class="_vMargin" v-if="showPrev">
 			<XNotes class="_content _noGap_" :pagination="prev"/>
 		</div>
 	</div>
@@ -137,6 +137,7 @@ export default defineComponent({
 		> .main {
 			> .load {
 				min-width: 0;
+				margin: 0 auto;
 				border-radius: 999px;
 
 				&.next {
@@ -165,7 +166,7 @@ export default defineComponent({
 					> .user {
 						$height: 32px;
 						padding-top: 16px;
-						border-top: solid 1px var(--divider);
+						border-top: solid 0.5px var(--divider);
 						line-height: $height;
 
 						> .avatar {
diff --git a/src/client/pages/notifications.vue b/src/client/pages/notifications.vue
index a6d73b4290..19b1726759 100644
--- a/src/client/pages/notifications.vue
+++ b/src/client/pages/notifications.vue
@@ -1,8 +1,6 @@
 <template>
-<div>
-	<div class="_section">
-		<XNotifications class="_content" @before="before" @after="after" page/>
-	</div>
+<div class="_root">
+	<XNotifications class="_content" @before="before" @after="after" page/>
 </div>
 </template>
 
diff --git a/src/client/pages/page-editor/page-editor.vue b/src/client/pages/page-editor/page-editor.vue
index 762ee774ed..79e3bfdf9a 100644
--- a/src/client/pages/page-editor/page-editor.vue
+++ b/src/client/pages/page-editor/page-editor.vue
@@ -1,87 +1,85 @@
 <template>
-<div class="_section">
-	<div class="_content">
-		<MkA class="view" v-if="pageId" :to="`/@${ author.username }/pages/${ currentName }`"><Fa :icon="faExternalLinkSquareAlt"/> {{ $ts._pages.viewPage }}</MkA>
+<div class="_root">
+	<MkA class="view" v-if="pageId" :to="`/@${ author.username }/pages/${ currentName }`"><Fa :icon="faExternalLinkSquareAlt"/> {{ $ts._pages.viewPage }}</MkA>
 
-		<div class="buttons" style="margin: 16px 0;">
-			<MkButton inline @click="save" primary class="save" v-if="!readonly"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
-			<MkButton inline @click="duplicate" class="duplicate" v-if="pageId"><Fa :icon="faCopy"/> {{ $ts.duplicate }}</MkButton>
-			<MkButton inline @click="del" class="delete" v-if="pageId && !readonly"><Fa :icon="faTrashAlt"/> {{ $ts.delete }}</MkButton>
-		</div>
+	<div class="buttons" style="margin: 16px;">
+		<MkButton inline @click="save" primary class="save" v-if="!readonly"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
+		<MkButton inline @click="duplicate" class="duplicate" v-if="pageId"><Fa :icon="faCopy"/> {{ $ts.duplicate }}</MkButton>
+		<MkButton inline @click="del" class="delete" v-if="pageId && !readonly"><Fa :icon="faTrashAlt"/> {{ $ts.delete }}</MkButton>
+	</div>
 
-		<MkContainer :body-togglable="true" :expanded="true" class="_vMargin">
-			<template #header><Fa :icon="faCog"/> {{ $ts._pages.pageSetting }}</template>
-			<div class="_section">
-				<MkInput v-model:value="title">
-					<span>{{ $ts._pages.title }}</span>
-				</MkInput>
+	<MkContainer :body-togglable="true" :expanded="true" class="_vMargin">
+		<template #header><Fa :icon="faCog"/> {{ $ts._pages.pageSetting }}</template>
+		<div style="padding: 16px;">
+			<MkInput v-model:value="title">
+				<span>{{ $ts._pages.title }}</span>
+			</MkInput>
 
-				<MkInput v-model:value="summary">
-					<span>{{ $ts._pages.summary }}</span>
-				</MkInput>
+			<MkInput v-model:value="summary">
+				<span>{{ $ts._pages.summary }}</span>
+			</MkInput>
 
-				<MkInput v-model:value="name">
-					<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
-					<span>{{ $ts._pages.url }}</span>
-				</MkInput>
+			<MkInput v-model:value="name">
+				<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
+				<span>{{ $ts._pages.url }}</span>
+			</MkInput>
 
-				<MkSwitch v-model:value="alignCenter">{{ $ts._pages.alignCenter }}</MkSwitch>
+			<MkSwitch v-model:value="alignCenter">{{ $ts._pages.alignCenter }}</MkSwitch>
 
-				<MkSelect v-model:value="font">
-					<template #label>{{ $ts._pages.font }}</template>
-					<option value="serif">{{ $ts._pages.fontSerif }}</option>
-					<option value="sans-serif">{{ $ts._pages.fontSansSerif }}</option>
-				</MkSelect>
+			<MkSelect v-model:value="font">
+				<template #label>{{ $ts._pages.font }}</template>
+				<option value="serif">{{ $ts._pages.fontSerif }}</option>
+				<option value="sans-serif">{{ $ts._pages.fontSansSerif }}</option>
+			</MkSelect>
 
-				<MkSwitch v-model:value="hideTitleWhenPinned">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch>
+			<MkSwitch v-model:value="hideTitleWhenPinned">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch>
 
-				<div class="eyeCatch">
-					<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><Fa :icon="faPlus"/> {{ $ts._pages.eyeCatchingImageSet }}</MkButton>
-					<div v-else-if="eyeCatchingImage">
-						<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name" style="max-width: 100%;"/>
-						<MkButton @click="removeEyeCatchingImage()" v-if="!readonly"><Fa :icon="faTrashAlt"/> {{ $ts._pages.eyeCatchingImageRemove }}</MkButton>
-					</div>
+			<div class="eyeCatch">
+				<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><Fa :icon="faPlus"/> {{ $ts._pages.eyeCatchingImageSet }}</MkButton>
+				<div v-else-if="eyeCatchingImage">
+					<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name" style="max-width: 100%;"/>
+					<MkButton @click="removeEyeCatchingImage()" v-if="!readonly"><Fa :icon="faTrashAlt"/> {{ $ts._pages.eyeCatchingImageRemove }}</MkButton>
 				</div>
 			</div>
-		</MkContainer>
+		</div>
+	</MkContainer>
 
-		<MkContainer :body-togglable="true" :expanded="true" class="_vMargin">
-			<template #header><Fa :icon="faStickyNote"/> {{ $ts._pages.contents }}</template>
-			<div class="_section">
-				<XBlocks class="content" v-model:value="content" :hpml="hpml"/>
+	<MkContainer :body-togglable="true" :expanded="true" class="_vMargin">
+		<template #header><Fa :icon="faStickyNote"/> {{ $ts._pages.contents }}</template>
+		<div style="padding: 16px;">
+			<XBlocks class="content" v-model:value="content" :hpml="hpml"/>
 
-				<MkButton @click="add()" v-if="!readonly"><Fa :icon="faPlus"/></MkButton>
-			</div>
-		</MkContainer>
+			<MkButton @click="add()" v-if="!readonly"><Fa :icon="faPlus"/></MkButton>
+		</div>
+	</MkContainer>
 
-		<MkContainer :body-togglable="true" class="_vMargin">
-			<template #header><Fa :icon="faMagic"/> {{ $ts._pages.variables }}</template>
-			<div class="qmuvgica">
-				<XDraggable tag="div" class="variables" v-show="variables.length > 0" v-model="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
-					<template #item="{element}">
-						<XVariable
-							:value="element"
-							:removable="true"
-							@remove="() => removeVariable(element)"
-							:hpml="hpml"
-							:name="element.name"
-							:title="element.name"
-							:draggable="true"
-						/>
-					</template>
-				</XDraggable>
+	<MkContainer :body-togglable="true" class="_vMargin">
+		<template #header><Fa :icon="faMagic"/> {{ $ts._pages.variables }}</template>
+		<div class="qmuvgica">
+			<XDraggable tag="div" class="variables" v-show="variables.length > 0" v-model="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
+				<template #item="{element}">
+					<XVariable
+						:value="element"
+						:removable="true"
+						@remove="() => removeVariable(element)"
+						:hpml="hpml"
+						:name="element.name"
+						:title="element.name"
+						:draggable="true"
+					/>
+				</template>
+			</XDraggable>
 
-				<MkButton @click="addVariable()" class="add" v-if="!readonly"><Fa :icon="faPlus"/></MkButton>
-			</div>
-		</MkContainer>
+			<MkButton @click="addVariable()" class="add" v-if="!readonly"><Fa :icon="faPlus"/></MkButton>
+		</div>
+	</MkContainer>
 
-		<MkContainer :body-togglable="true" :expanded="true" class="_vMargin">
-			<template #header><Fa :icon="faCode"/> {{ $ts.script }}</template>
-			<div>
-				<MkTextarea class="_code" v-model:value="script"/>
-			</div>
-		</MkContainer>
-	</div>
+	<MkContainer :body-togglable="true" :expanded="true" class="_vMargin">
+		<template #header><Fa :icon="faCode"/> {{ $ts.script }}</template>
+		<div>
+			<MkTextarea class="_code" v-model:value="script"/>
+		</div>
+	</MkContainer>
 </div>
 </template>
 
diff --git a/src/client/pages/reversi/index.vue b/src/client/pages/reversi/index.vue
index f40990b37c..b6a1db1161 100644
--- a/src/client/pages/reversi/index.vue
+++ b/src/client/pages/reversi/index.vue
@@ -259,7 +259,7 @@ export default defineComponent({
 		> footer {
 			display: flex;
 			align-items: baseline;
-			border-top: solid 1px var(--divider);
+			border-top: solid 0.5px var(--divider);
 			padding: 6px 8px;
 			font-size: 0.9em;
 
diff --git a/src/client/pages/timeline.vue b/src/client/pages/timeline.vue
index e0c0b2995a..0d8e5b0ec3 100644
--- a/src/client/pages/timeline.vue
+++ b/src/client/pages/timeline.vue
@@ -1,39 +1,37 @@
 <template>
-<div class="cmuxhskf" v-hotkey.global="keymap">
+<div class="cmuxhskf _root" v-hotkey.global="keymap">
 	<div class="new" v-if="queue > 0" :style="{ width: width + 'px' }"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
 
-	<div class="_section">
-		<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _content _vMargin"/>
-		<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _panel _content _vMargin" fixed/>
-		<div class="tabs _panel _vMargin">
-			<div class="left">
-				<button class="_button tab" @click="() => { src = 'home'; saveSrc(); }" :class="{ active: src === 'home' }" v-tooltip="$ts._timelines.home"><Fa :icon="faHome"/></button>
-				<button class="_button tab" @click="() => { src = 'local'; saveSrc(); }" :class="{ active: src === 'local' }" v-tooltip="$ts._timelines.local" v-if="isLocalTimelineAvailable"><Fa :icon="faComments"/></button>
-				<button class="_button tab" @click="() => { src = 'social'; saveSrc(); }" :class="{ active: src === 'social' }" v-tooltip="$ts._timelines.social" v-if="isLocalTimelineAvailable"><Fa :icon="faShareAlt"/></button>
-				<button class="_button tab" @click="() => { src = 'global'; saveSrc(); }" :class="{ active: src === 'global' }" v-tooltip="$ts._timelines.global" v-if="isGlobalTimelineAvailable"><Fa :icon="faGlobe"/></button>
-				<span class="divider"></span>
-				<button class="_button tab" @click="() => { src = 'mentions'; saveSrc(); }" :class="{ active: src === 'mentions' }" v-tooltip="$ts.mentions"><Fa :icon="faAt"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadMentions"/></button>
-				<button class="_button tab" @click="() => { src = 'directs'; saveSrc(); }" :class="{ active: src === 'directs' }" v-tooltip="$ts.directNotes"><Fa :icon="faEnvelope"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadSpecifiedNotes"/></button>
-			</div>
-			<div class="right">
-				<button class="_button tab" @click="chooseChannel" :class="{ active: src === 'channel' }" v-tooltip="$ts.channel"><Fa :icon="faSatelliteDish"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadChannel"/></button>
-				<button class="_button tab" @click="chooseAntenna" :class="{ active: src === 'antenna' }" v-tooltip="$ts.antennas"><Fa :icon="faSatellite"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadAntenna"/></button>
-				<button class="_button tab" @click="chooseList" :class="{ active: src === 'list' }" v-tooltip="$ts.lists"><Fa :icon="faListUl"/></button>
-			</div>
+	<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block _isolated"/>
+	<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block _isolated" fixed/>
+	<div class="tabs _block _vMargin">
+		<div class="left">
+			<button class="_button tab" @click="() => { src = 'home'; saveSrc(); }" :class="{ active: src === 'home' }" v-tooltip="$ts._timelines.home"><Fa :icon="faHome"/></button>
+			<button class="_button tab" @click="() => { src = 'local'; saveSrc(); }" :class="{ active: src === 'local' }" v-tooltip="$ts._timelines.local" v-if="isLocalTimelineAvailable"><Fa :icon="faComments"/></button>
+			<button class="_button tab" @click="() => { src = 'social'; saveSrc(); }" :class="{ active: src === 'social' }" v-tooltip="$ts._timelines.social" v-if="isLocalTimelineAvailable"><Fa :icon="faShareAlt"/></button>
+			<button class="_button tab" @click="() => { src = 'global'; saveSrc(); }" :class="{ active: src === 'global' }" v-tooltip="$ts._timelines.global" v-if="isGlobalTimelineAvailable"><Fa :icon="faGlobe"/></button>
+			<span class="divider"></span>
+			<button class="_button tab" @click="() => { src = 'mentions'; saveSrc(); }" :class="{ active: src === 'mentions' }" v-tooltip="$ts.mentions"><Fa :icon="faAt"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadMentions"/></button>
+			<button class="_button tab" @click="() => { src = 'directs'; saveSrc(); }" :class="{ active: src === 'directs' }" v-tooltip="$ts.directNotes"><Fa :icon="faEnvelope"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadSpecifiedNotes"/></button>
+		</div>
+		<div class="right">
+			<button class="_button tab" @click="chooseChannel" :class="{ active: src === 'channel' }" v-tooltip="$ts.channel"><Fa :icon="faSatelliteDish"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadChannel"/></button>
+			<button class="_button tab" @click="chooseAntenna" :class="{ active: src === 'antenna' }" v-tooltip="$ts.antennas"><Fa :icon="faSatellite"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadAntenna"/></button>
+			<button class="_button tab" @click="chooseList" :class="{ active: src === 'list' }" v-tooltip="$ts.lists"><Fa :icon="faListUl"/></button>
 		</div>
-		<XTimeline ref="tl"
-			class="_content _vMargin"
-			:key="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src === 'channel' ? `channel:${channel.id}` : src"
-			:src="src"
-			:list="list ? list.id : null"
-			:antenna="antenna ? antenna.id : null"
-			:channel="channel ? channel.id : null"
-			:sound="true"
-			@before="before()"
-			@after="after()"
-			@queue="queueUpdated"
-		/>
 	</div>
+	<XTimeline ref="tl"
+		class="_vMargin"
+		:key="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src === 'channel' ? `channel:${channel.id}` : src"
+		:src="src"
+		:list="list ? list.id : null"
+		:antenna="antenna ? antenna.id : null"
+		:channel="channel ? channel.id : null"
+		:sound="true"
+		@before="before()"
+		@after="after()"
+		@queue="queueUpdated"
+	/>
 </div>
 </template>
 
@@ -200,6 +198,18 @@ export default defineComponent({
 			});
 		},
 
+		async timetravel() {
+			const { canceled, result: date } = await os.dialog({
+				title: this.$ts.date,
+				input: {
+					type: 'date'
+				}
+			});
+			if (canceled) return;
+
+			this.$refs.tl.timetravel(new Date(date));
+		},
+
 		focus() {
 			(this.$refs.tl as any).focus();
 		}
@@ -221,71 +231,66 @@ export default defineComponent({
 		}
 	}
 
-	> ._section {
-		> .tabs {
-			display: flex;
-			box-sizing: border-box;
-			padding: 0 8px;
-			max-width: var(--baseContentWidth);
-			margin-left: auto;
-			margin-right: auto;
-			white-space: nowrap;
-			overflow: auto;
-
-			// 影の都合上
-			position: relative;
+	> .tabs {
+		display: flex;
+		box-sizing: border-box;
+		padding: 0 8px;
+		white-space: nowrap;
+		overflow: auto;
 
-			> .right {
-				margin-left: auto;
-			}
+		// 影の都合上
+		position: relative;
 
-			> .left, > .right {
-				> .tab {
-					position: relative;
-					height: 50px;
-					padding: 0 12px;
+		> .right {
+			margin-left: auto;
+		}
 
-					&:hover {
-						color: var(--fgHighlighted);
-					}
+		> .left, > .right {
+			> .tab {
+				position: relative;
+				height: 50px;
+				padding: 0 12px;
 
-					&.active {
-						color: var(--fgHighlighted);
+				&:hover {
+					color: var(--fgHighlighted);
+				}
 
-						&:after {
-							content: "";
-							display: block;
-							position: absolute;
-							bottom: 0;
-							left: 0;
-							right: 0;
-							margin: 0 auto;
-							width: calc(100% - 16px);
-							height: 4px;
-							background: var(--accent);
-							border-radius: 8px 8px 0 0;
-						}
-					}
+				&.active {
+					color: var(--fgHighlighted);
 
-					> .i {
+					&:after {
+						content: "";
+						display: block;
 						position: absolute;
-						top: 16px;
-						right: 8px;
-						color: var(--indicator);
-						font-size: 8px;
-						animation: blink 1s infinite;
+						bottom: 0;
+						left: 0;
+						right: 0;
+						margin: 0 auto;
+						width: calc(100% - 16px);
+						height: 4px;
+						background: var(--accent);
+						border-radius: 8px 8px 0 0;
 					}
 				}
 
-				> .divider {
-					display: inline-block;
-					width: 1px;
-					height: 28px;
-					vertical-align: middle;
-					margin: 0 8px;
-					background: var(--divider);
+				> .i {
+					position: absolute;
+					top: 16px;
+					right: 8px;
+					color: var(--indicator);
+					font-size: 8px;
+					animation: blink 1s infinite;
 				}
 			}
+
+			> .divider {
+				display: inline-block;
+				width: 1px;
+				height: 28px;
+				vertical-align: middle;
+				margin: 0 8px;
+				background: var(--divider);
+			}
 		}
 	}
 }
diff --git a/src/client/pages/user/index.timeline.vue b/src/client/pages/user/index.timeline.vue
index 8c824a2111..62f7f7d654 100644
--- a/src/client/pages/user/index.timeline.vue
+++ b/src/client/pages/user/index.timeline.vue
@@ -1,11 +1,11 @@
 <template>
 <div>
-	<MkTab v-model:value="with_" class="_vMargin">
+	<MkTab v-model:value="with_" class="_isolated _section">
 		<option :value="null">{{ $ts.notes }}</option>
 		<option value="replies">{{ $ts.notesAndReplies }}</option>
 		<option value="files">{{ $ts.withFiles }}</option>
 	</MkTab>
-	<XNotes ref="timeline" class="_vMargin" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)"/>
+	<XNotes ref="timeline" class="_section _noGap_" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)"/>
 </div>
 </template>
 
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index 5ca29a3e41..18f78d270a 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -93,15 +93,15 @@
 			</div>
 		</div>
 	</div>
-	<div class="ftskorzw narrow _section" v-else-if="user && narrow === true" v-size="{ max: [500] }">
+	<div class="ftskorzw narrow _root" v-else-if="user && narrow === true" v-size="{ max: [500] }">
 		<!-- TODO -->
 		<!-- <div class="punished" v-if="user.isSuspended"><Fa :icon="faExclamationTriangle" style="margin-right: 8px;"/> {{ $ts.userSuspended }}</div> -->
 		<!-- <div class="punished" v-if="user.isSilenced"><Fa :icon="faExclamationTriangle" style="margin-right: 8px;"/> {{ $ts.userSilenced }}</div> -->
 
-		<div class="profile _content _vMargin">
+		<div class="profile">
 			<MkRemoteCaution v-if="user.host != null" :href="user.url" class="_vMargin"/>
 
-			<div class="_vMargin _panel main" :key="user.id">
+			<div class="_vMargin _block main" :key="user.id">
 				<div class="banner-container" :style="style">
 					<div class="banner" ref="banner" :style="style"></div>
 					<div class="fade"></div>
@@ -177,37 +177,39 @@
 			</div>
 		</div>
 
-		<div class="nav _vMargin">
-			<MkA :to="userPage(user)" :class="{ active: page === 'index' }" class="link">
-				<Fa :icon="faCommentAlt" class="icon"/>
-				<span>{{ $ts.notes }}</span>
-			</MkA>
-			<MkA :to="userPage(user, 'clips')" :class="{ active: page === 'clips' }" class="link">
-				<Fa :icon="faPaperclip" class="icon"/>
-				<span>{{ $ts.clips }}</span>
-			</MkA>
-			<MkA :to="userPage(user, 'pages')" :class="{ active: page === 'pages' }" class="link">
-				<Fa :icon="faFileAlt" class="icon"/>
-				<span>{{ $ts.pages }}</span>
-			</MkA>
-		</div>
+		<div class="contents">
+			<div class="nav _isolated">
+				<MkA :to="userPage(user)" :class="{ active: page === 'index' }" class="link">
+					<Fa :icon="faCommentAlt" class="icon"/>
+					<span>{{ $ts.notes }}</span>
+				</MkA>
+				<MkA :to="userPage(user, 'clips')" :class="{ active: page === 'clips' }" class="link">
+					<Fa :icon="faPaperclip" class="icon"/>
+					<span>{{ $ts.clips }}</span>
+				</MkA>
+				<MkA :to="userPage(user, 'pages')" :class="{ active: page === 'pages' }" class="link">
+					<Fa :icon="faFileAlt" class="icon"/>
+					<span>{{ $ts.pages }}</span>
+				</MkA>
+			</div>
 
-		<template v-if="page === 'index'">
-			<div class="_content _vMargin">
-				<div v-if="user.pinnedNotes.length > 0" class="_vMargin">
-					<XNote v-for="note in user.pinnedNotes" class="note _vMargin" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
+			<template v-if="page === 'index'">
+				<div>
+					<div v-if="user.pinnedNotes.length > 0">
+						<XNote v-for="note in user.pinnedNotes" class="note _block _isolated" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
+					</div>
+					<XPhotos :user="user" :key="user.id"/>
+					<XActivity :user="user" :key="user.id"/>
 				</div>
-				<XPhotos :user="user" :key="user.id" class="_vMargin"/>
-				<XActivity :user="user" :key="user.id" class="_vMargin"/>
-			</div>
-			<div class="_content _vMargin">
-				<XUserTimeline :user="user" class="_content"/>
-			</div>
-		</template>
-		<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_content _vMargin"/>
-		<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_content _vMargin"/>
-		<XClips v-else-if="page === 'clips'" :user="user" class="_vMargin"/>
-		<XPages v-else-if="page === 'pages'" :user="user" class="_vMargin"/>
+				<div>
+					<XUserTimeline :user="user"/>
+				</div>
+			</template>
+			<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_content _vMargin"/>
+			<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_content _vMargin"/>
+			<XClips v-else-if="page === 'clips'" :user="user" class="_vMargin"/>
+			<XPages v-else-if="page === 'pages'" :user="user" class="_vMargin"/>
+		</div>
 	</div>
 	<div v-else-if="error">
 		<MkError @retry="fetch()"/>
@@ -234,6 +236,7 @@ import { getUserMenu } from '@client/scripts/get-user-menu';
 import number from '../../filters/number';
 import { userPage, acct as getAcct } from '../../filters/user';
 import * as os from '@client/os';
+import { url } from '@client/config';
 
 export default defineComponent({
 	components: {
@@ -268,6 +271,10 @@ export default defineComponent({
 			INFO: computed(() => this.user ? {
 				userName: this.user,
 				avatar: this.user,
+				share: {
+					title: this.user.name,
+					url: `${url}/@${this.user.username}`
+				},
 				action: {
 					icon: faEllipsisH,
 					handler: this.menu
@@ -304,7 +311,7 @@ export default defineComponent({
 
 	mounted() {
 		window.requestAnimationFrame(this.parallaxLoop);
-		this.narrow = this.$el.clientWidth < 1000;
+		this.narrow = true; //this.$el.clientWidth < 1000;
 	},
 
 	beforeUnmount() {
@@ -415,7 +422,7 @@ export default defineComponent({
 					font-size: 80%;
 					padding: 8px 12px;
 					margin-bottom: 20px;
-					border: solid 1px var(--divider);
+					border: solid 0.5px var(--divider);
 					border-radius: 999px;
 				}
 			}
@@ -423,7 +430,7 @@ export default defineComponent({
 			> .status {
 				display: flex;
 				padding: 20px 16px;
-				border-top: solid 1px var(--divider);
+				border-top: solid 0.5px var(--divider);
 				font-size: 90%;
 
 				> a {
@@ -451,13 +458,13 @@ export default defineComponent({
 
 			> .description {
 				padding: 20px 16px;
-				border-top: solid 1px var(--divider);
+				border-top: solid 0.5px var(--divider);
 				font-size: 90%;
 			}
 
 			> .fields {
 				padding: 20px 16px;
-				border-top: solid 1px var(--divider);
+				border-top: solid 0.5px var(--divider);
 				font-size: 90%;
 
 				> .field {
@@ -540,9 +547,9 @@ export default defineComponent({
 }
 
 .ftskorzw.narrow {
-	max-width: 100vw;
 	box-sizing: border-box;
 	overflow: hidden;
+	overflow: clip;
 
 	> .punished {
 		font-size: 0.8em;
@@ -654,7 +661,7 @@ export default defineComponent({
 				text-align: center;
 				padding: 50px 8px 16px 8px;
 				font-weight: bold;
-				border-bottom: solid 1px var(--divider);
+				border-bottom: solid 0.5px var(--divider);
 
 				> .bottom {
 					> * {
@@ -689,7 +696,7 @@ export default defineComponent({
 			> .fields {
 				padding: 24px;
 				font-size: 0.9em;
-				border-top: solid 1px var(--divider);
+				border-top: solid 0.5px var(--divider);
 
 				> .field {
 					display: flex;
@@ -726,7 +733,7 @@ export default defineComponent({
 			> .status {
 				display: flex;
 				padding: 24px;
-				border-top: solid 1px var(--divider);
+				border-top: solid 0.5px var(--divider);
 
 				> a {
 					flex: 1;
@@ -753,41 +760,42 @@ export default defineComponent({
 		}
 	}
 
-	> .nav {
-		display: flex;
-		align-items: center;
-		margin-top: var(--margin);
-		//font-size: 120%;
-		font-weight: bold;
+	> .contents {
+		> .nav {
+			display: flex;
+			align-items: center;
+			//font-size: 120%;
+			font-weight: bold;
 
-		> .link {
-			flex: 1;
-			display: inline-block;
-			padding: 16px;
-			text-align: center;
-			border-bottom: solid 3px transparent;
+			> .link {
+				flex: 1;
+				display: inline-block;
+				padding: 16px;
+				text-align: center;
+				border-bottom: solid 3px transparent;
 
-			&:hover {
-				text-decoration: none;
-			}
+				&:hover {
+					text-decoration: none;
+				}
 
-			&.active {
-				color: var(--accent);
-				border-bottom-color: var(--accent);
-			}
+				&.active {
+					color: var(--accent);
+					border-bottom-color: var(--accent);
+				}
 
-			&:not(.active):hover {
-				color: var(--fgHighlighted);
-			}
+				&:not(.active):hover {
+					color: var(--fgHighlighted);
+				}
 
-			> .icon {
-				margin-right: 6px;
+				> .icon {
+					margin-right: 6px;
+				}
 			}
 		}
-	}
 
-	> .content {
-		margin-bottom: var(--margin);
+		> .content {
+			margin-bottom: var(--margin);
+		}
 	}
 
 	&.max-width_500px {
@@ -831,8 +839,10 @@ export default defineComponent({
 			}
 		}
 
-		> .nav {
-			font-size: 80%;
+		> .contents {
+			> .nav {
+				font-size: 80%;
+			}
 		}
 	}
 }
diff --git a/src/client/pages/welcome.entrance.a.vue b/src/client/pages/welcome.entrance.a.vue
index 01b3038312..7b02c44923 100644
--- a/src/client/pages/welcome.entrance.a.vue
+++ b/src/client/pages/welcome.entrance.a.vue
@@ -283,7 +283,7 @@ export default defineComponent({
 				}
 
 				> .status {
-					border-top: solid 1px var(--divider);
+					border-top: solid 0.5px var(--divider);
 					padding: 32px;
 					font-size: 90%;
 
@@ -291,7 +291,7 @@ export default defineComponent({
 						> span:not(:last-child) {
 							padding-right: 1em;
 							margin-right: 1em;
-							border-right: solid 1px var(--divider);
+							border-right: solid 0.5px var(--divider);
 						}
 					}
 
diff --git a/src/client/pages/welcome.entrance.c.vue b/src/client/pages/welcome.entrance.c.vue
index 4e4c0ed210..47ddf9e5ed 100644
--- a/src/client/pages/welcome.entrance.c.vue
+++ b/src/client/pages/welcome.entrance.c.vue
@@ -255,7 +255,7 @@ export default defineComponent({
 					}
 
 					> .status {
-						border-top: solid 1px var(--divider);
+						border-top: solid 0.5px var(--divider);
 						padding: 32px;
 						font-size: 90%;
 
@@ -263,7 +263,7 @@ export default defineComponent({
 							> span:not(:last-child) {
 								padding-right: 1em;
 								margin-right: 1em;
-								border-right: solid 1px var(--divider);
+								border-right: solid 0.5px var(--divider);
 							}
 						}