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

2 files changed, 82 insertions, 72 deletions

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%;
+			}
 		}
 	}
 }