From 1ed9438972ad67ca57e52b0bf8a07f2f044066f9 Mon Sep 17 00:00:00 2001
From: freeplay <freeplay@duck.com>
Date: Thu, 13 Jul 2023 19:26:44 -0400
Subject: [PATCH 1/4] style: user card design

---
 packages/client/src/components/MkUserInfo.vue | 320 +++++++++++++-----
 1 file changed, 244 insertions(+), 76 deletions(-)

diff --git a/packages/client/src/components/MkUserInfo.vue b/packages/client/src/components/MkUserInfo.vue
index 9c2763e53..9ff5f8b6c 100644
--- a/packages/client/src/components/MkUserInfo.vue
+++ b/packages/client/src/components/MkUserInfo.vue
@@ -1,151 +1,319 @@
 <template>
-	<div class="_panel vjnjpkug">
+	<article class="_panel user-card">
 		<div
 			class="banner"
 			:style="
 				user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''
 			"
+			:class="{ detailed }"
 		></div>
-		<MkAvatar
-			class="avatar"
-			:user="user"
-			:disable-preview="true"
-			:show-indicator="true"
-		/>
-		<div class="title">
+		<h3 class="title">
+			<MkAvatar
+				class="avatar"
+				:user="user"
+				:disable-preview="true"
+				:show-indicator="true"
+			/>
 			<MkA class="name" :to="userPage(user)"
-				><MkUserName :user="user" :nowrap="false"
+				><MkUserName :user="user" :nowrap="true"
 			/></MkA>
 			<p class="username"><MkAcct :user="user" /></p>
-		</div>
-		<div class="description">
-			<div v-if="user.description" class="mfm">
-				<Mfm
-					:text="user.description"
-					:author="user"
-					:i="$i"
-					:custom-emojis="user.emojis"
-				/>
-			</div>
+		</h3>
+		<div 
+			class="description"
+			:class="{ collapsed: isLong && collapsed, truncate: !detailed }"
+		>
+			<Mfm
+				v-if="user.description"
+				class="mfm"
+				:text="user.description"
+				:author="user"
+				:i="$i"
+				:custom-emojis="user.emojis"
+			/>
 			<span v-else style="opacity: 0.7">{{
 				i18n.ts.noAccountDescription
 			}}</span>
 		</div>
+		<XShowMoreButton
+			v-if="isLong"
+			v-model="collapsed"
+		></XShowMoreButton>
+		<div v-if="user.fields.length > 0 && detailed" class="fields">
+			<dl
+				v-for="(field, i) in user.fields"
+				:key="i"
+				class="field"
+			>
+				<dt class="name">
+					<Mfm
+						:text="field.name"
+						:plain="true"
+						:custom-emojis="user.emojis"
+						:colored="false"
+					/>
+				</dt>
+				<dd class="value">
+					<Mfm
+						:text="field.value"
+						:author="user"
+						:i="$i"
+						:custom-emojis="user.emojis"
+						:colored="false"
+					/>
+				</dd>
+			</dl>
+		</div>
 		<div class="status">
-			<div>
-				<p>{{ i18n.ts.notes }}</p>
+			<p>
 				<MkNumber :value="user.notesCount" />
-			</div>
-			<div>
-				<p>{{ i18n.ts.following }}</p>
+				{{ i18n.ts.notes }}
+			</p>
+			<p>
 				<MkNumber :value="user.followingCount" />
-			</div>
-			<div>
-				<p>{{ i18n.ts.followers }}</p>
+				{{ i18n.ts.following }}
+			</p>
+			<p>
 				<MkNumber :value="user.followersCount" />
-			</div>
+				{{ i18n.ts.followers }}
+			</p>
 		</div>
-		<div class="koudoku-button">
-			<MkFollowButton v-if="$i && user.id != $i.id" :user="user" />
+		<div class="buttons">
+			<slot>
+				<MkFollowButton v-if="$i && user.id != $i.id" :user="user" />
+			</slot>
 		</div>
-	</div>
+	</article>
 </template>
 
 <script lang="ts" setup>
 import * as misskey from "calckey-js";
 import MkFollowButton from "@/components/MkFollowButton.vue";
+import XShowMoreButton from "@/components/MkShowMoreButton.vue";
 import MkNumber from "@/components/MkNumber.vue";
 import { userPage } from "@/filters/user";
 import { i18n } from "@/i18n";
 
-defineProps<{
+const props = defineProps<{
 	user: misskey.entities.UserDetailed;
+	detailed?: boolean;
 }>();
+
+let isLong = $ref(
+	props.detailed &&
+	(
+		props.user.description.split("\n").length > 9 ||
+		props.user.description.length > 400
+	)
+);
+let collapsed = $ref(isLong);
 </script>
 
 <style lang="scss" scoped>
-.vjnjpkug {
+.user-card {
 	position: relative;
+	display: flex;
+	flex-direction: column;
 
-	> .banner {
-		height: 84px;
+	.banner {
+		height: 94px;
 		background-color: rgba(0, 0, 0, 0.1);
 		background-size: cover;
 		background-position: center;
+		margin-bottom: calc(0px - var(--radius));
+		&::before {
+			content: "";
+			position: absolute;
+			inset: 0;
+			z-index: 2;
+			height: inherit;
+			background: linear-gradient(
+				-125deg,
+				rgba(0, 0, 0, 0.7),
+				transparent,
+				transparent
+			);
+		}
+		&.detailed::after {
+			content: "";
+			background-image: var(--blur, inherit);
+			position: fixed;
+			inset: 0;
+			background-size: cover;
+			background-position: center;
+			pointer-events: none;
+			opacity: 0.1;
+			filter: var(--blur, blur(10px));
+			z-index: 5;
+		}
 	}
 
-	> .avatar {
+	
+	.title {
+		position: relative;
 		display: block;
-		position: absolute;
-		top: 62px;
-		left: 13px;
-		z-index: 2;
-		width: 58px;
-		height: 58px;
-		border: solid 4px var(--panel);
-	}
-
-	> .title {
-		display: block;
-		padding: 10px 0 10px 88px;
-
-		> .name {
+		padding: 10px 10px 10px 84px;
+		margin: 0;
+		font-size: 1em;
+		border-radius: var(--radius);
+		background: var(--panel);
+		line-height: 1;
+		z-index: 4;
+		
+		.avatar {
+			display: block;
+			position: absolute;
+			bottom: 6px;
+			left: 10px;
+			z-index: 2;
+			width: 58px;
+			height: 58px;
+			background: var(--panel);
+			border: solid 4px var(--panel);
+		}
+		.name {
 			display: inline-block;
 			margin: 0;
 			font-weight: bold;
 			line-height: 16px;
-			word-break: break-all;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			height: 1.5em;
+			margin-block: -0.5em;
+			padding-block: 0.5em 0.25em;
+			max-width: 100%;
 		}
 
-		> .username {
+		.username {
 			display: block;
 			margin: 0;
 			line-height: 16px;
 			font-size: 0.8em;
 			color: var(--fg);
+			font-weight: 500;
 			opacity: 0.7;
+			line-height: 1;
 		}
 	}
 
-	> .description {
-		padding: 16px;
+	.description {
+		overflow: hidden;
+		padding-inline: 16px;
+		margin-bottom: 10px;
 		font-size: 0.8em;
-		border-top: solid 0.5px var(--divider);
-
-		> .mfm {
+		&.truncate {
 			display: -webkit-box;
-			-webkit-line-clamp: 3;
+			-webkit-line-clamp: 6;
 			-webkit-box-orient: vertical;
-			overflow: hidden;
+		}
+		&.collapsed {
+			position: relative;
+			max-height: calc(9em + 50px);
+			mask: linear-gradient(black calc(100% - 64px), transparent);
+			-webkit-mask: linear-gradient(
+				black calc(100% - 64px),
+				transparent
+			);
+		}
+		&.collapsed, &.truncate {
+			:deep(br) {
+				display: none; // collapse white spaces
+			}
 		}
 	}
-
-	> .status {
-		padding: 10px 16px;
-		border-top: solid 0.5px var(--divider);
-
-		> div {
+	:deep(.fade) {
+		position: relative;
+		display: block;
+		width: 100%;
+		margin-top: -4.5em;
+		z-index: 2;
+		> span {
 			display: inline-block;
-			width: 33%;
-
-			> p {
-				margin: 0;
-				font-size: 0.7em;
-				color: var(--fg);
-			}
-
+			background: var(--panel);
+			padding: 0.4em 1em;
+			font-size: 0.8em;
+			border-radius: 999px;
+			box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
+		}
+		&:hover {
 			> span {
-				font-size: 1em;
-				color: var(--accent);
+				background: var(--panelHighlight);
 			}
 		}
 	}
+	:deep(.showLess) {
+		width: 100%;
+		position: sticky;
+		bottom: var(--stickyBottom);
 
-	> .koudoku-button {
+		> span {
+			display: inline-block;
+			background: var(--panel);
+			padding: 6px 10px;
+			font-size: 0.8em;
+			border-radius: 999px;
+			box-shadow: 0 0 7px 7px var(--bg);
+		}
+	}
+	> .fields {
+		padding-inline: 16px;
+		font-size: 0.8em;
+		padding-block: 1em;
+		border-top: 1px solid var(--divider);
+
+		> .field {
+			display: flex;
+			padding: 0;
+			margin: 0;
+			align-items: center;
+
+			&:not(:last-child) {
+				margin-bottom: 8px;
+			}
+
+			:deep(span) {
+				white-space: nowrap !important;
+			}
+
+			> .name {
+				width: 30%;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				font-weight: bold;
+				text-align: center;
+				padding-right: 10px;
+			}
+
+			> .value {
+				width: 70%;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				margin: 0;
+			}
+		}
+	}
+	.status {
+		display: flex;
+		gap: 1em;
+		padding-inline: 16px;
+		font-size: 0.8em;
+		margin-top: auto;
+		border-top: 1px solid var(--divider);
+		> p > :deep(span) {
+			font-weight: 700;
+			color: var(--accent);
+		}
+	}
+
+	.buttons {
 		position: absolute;
 		top: 8px;
 		right: 8px;
 		margin-bottom: 1rem;
+		z-index: 3;
+		color: white;
 	}
 }
 </style>

From f26f70413965fb06feaade7112f66758955c78b8 Mon Sep 17 00:00:00 2001
From: freeplay <freeplay@duck.com>
Date: Thu, 13 Jul 2023 19:27:00 -0400
Subject: [PATCH 2/4] refactor: use new card design in user popup

---
 .../client/src/components/MkUserPreview.vue   | 303 +-----------------
 1 file changed, 2 insertions(+), 301 deletions(-)

diff --git a/packages/client/src/components/MkUserPreview.vue b/packages/client/src/components/MkUserPreview.vue
index 6c3838fd2..60a91c11b 100644
--- a/packages/client/src/components/MkUserPreview.vue
+++ b/packages/client/src/components/MkUserPreview.vue
@@ -19,96 +19,7 @@
 				}
 			"
 		>
-			<div v-if="user != null" class="info">
-				<div
-					class="banner"
-					:style="
-						user.bannerUrl
-							? `background-image: url(${user.bannerUrl})`
-							: ''
-					"
-				>
-					<span
-						v-if="$i && $i.id != user.id && user.isFollowed"
-						class="followed"
-						>{{ i18n.ts.followsYou }}</span
-					>
-				</div>
-				<MkAvatar
-					class="avatar"
-					:user="user"
-					:disable-preview="true"
-					:show-indicator="true"
-				/>
-				<div class="title">
-					<MkA class="name" :to="userPage(user)"
-						><MkUserName :user="user" :nowrap="true"
-					/></MkA>
-					<p class="username"><MkAcct :user="user" /></p>
-				</div>
-				<div
-					class="description"
-					:class="{ collapsed: isLong && collapsed }"
-				>
-					<Mfm
-						v-if="user.description"
-						:text="user.description"
-						:author="user"
-						:i="$i"
-						:custom-emojis="user.emojis"
-					/>
-				</div>
-				<XShowMoreButton
-					v-if="isLong"
-					v-model="collapsed"
-				></XShowMoreButton>
-				<div v-if="user.fields.length > 0" class="fields">
-					<dl
-						v-for="(field, i) in user.fields"
-						:key="i"
-						class="field"
-					>
-						<dt class="name">
-							<Mfm
-								:text="field.name"
-								:plain="true"
-								:custom-emojis="user.emojis"
-								:colored="false"
-							/>
-						</dt>
-						<dd class="value">
-							<Mfm
-								:text="field.value"
-								:author="user"
-								:i="$i"
-								:custom-emojis="user.emojis"
-								:colored="false"
-							/>
-						</dd>
-					</dl>
-				</div>
-				<div class="status">
-					<div>
-						<p>{{ i18n.ts.notes }}</p>
-						<span>{{ user.notesCount }}</span>
-					</div>
-					<div>
-						<p>{{ i18n.ts.following }}</p>
-						<span>{{ user.followingCount }}</span>
-					</div>
-					<div>
-						<p>{{ i18n.ts.followers }}</p>
-						<span>{{ user.followersCount }}</span>
-					</div>
-				</div>
-				<div class="follow-button-container">
-					<MkFollowButton
-						v-if="$i && user.id != $i.id"
-						:user="user"
-						mini
-					/>
-				</div>
-			</div>
+			<MkUserInfo v-if="user != null" :user="user" :detailed="true" />
 			<div v-else>
 				<MkLoading />
 			</div>
@@ -118,14 +29,10 @@
 
 <script lang="ts" setup>
 import { onMounted } from "vue";
+import MkUserInfo from "@/components/MkUserInfo.vue";
 import * as Acct from "calckey-js/built/acct";
 import type * as misskey from "calckey-js";
-import MkFollowButton from "@/components/MkFollowButton.vue";
-import { userPage } from "@/filters/user";
-import XShowMoreButton from "@/components/MkShowMoreButton.vue";
 import * as os from "@/os";
-import { $i } from "@/account";
-import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	showing: boolean;
@@ -144,15 +51,9 @@ let user = $ref<misskey.entities.UserDetailed | null>(null);
 let top = $ref(0);
 let left = $ref(0);
 
-let isLong = $ref(false);
-let collapsed = $ref(!isLong);
-
 onMounted(() => {
 	if (typeof props.q === "object") {
 		user = props.q;
-		isLong =
-			user.description.split("\n").length > 9 ||
-			user.description.length > 400;
 	} else {
 		const query = props.q.startsWith("@")
 			? Acct.parse(props.q.substr(1))
@@ -161,9 +62,6 @@ onMounted(() => {
 		os.api("users/show", query).then((res) => {
 			if (!props.showing) return;
 			user = res;
-			isLong =
-				user.description.split("\n").length > 9 ||
-				user.description.length > 400;
 		});
 	}
 
@@ -196,202 +94,5 @@ onMounted(() => {
 	overflow: hidden;
 	transform-origin: center top;
 
-	> .info {
-		> .banner {
-			height: 84px;
-			background-color: rgba(0, 0, 0, 0.1);
-			background-size: cover;
-			background-position: center;
-			> .followed {
-				position: absolute;
-				top: 12px;
-				left: 12px;
-				padding: 4px 8px;
-				color: #fff;
-				background: rgba(0, 0, 0, 0.7);
-				font-size: 0.7em;
-				border-radius: 6px;
-			}
-
-			&::before {
-				content: "";
-				position: absolute;
-				inset: 0;
-				z-index: 2;
-				height: 84px;
-				background: linear-gradient(
-					-125deg,
-					rgba(0, 0, 0, 0.7),
-					transparent,
-					transparent
-				);
-			}
-
-			&::after {
-				content: "";
-				background-image: var(--blur, inherit);
-				position: fixed;
-				inset: 0;
-				background-size: cover;
-				background-position: center;
-				pointer-events: none;
-				opacity: 0.1;
-				filter: var(--blur, blur(10px));
-			}
-		}
-
-		> .avatar {
-			display: block;
-			position: absolute;
-			top: 70px;
-			left: 13px;
-			z-index: 2;
-			width: 58px;
-			height: 58px;
-			border: solid 3px var(--face);
-			border-radius: 8px;
-		}
-
-		> .title {
-			display: block;
-			padding: 8px 0 8px 82px;
-
-			> .name {
-				display: inline-block;
-				margin: 0;
-				font-weight: bold;
-				line-height: 16px;
-				word-break: break-all;
-			}
-
-			> .username {
-				display: block;
-				margin: 0;
-				line-height: 16px;
-				font-size: 0.8em;
-				color: var(--fg);
-				opacity: 0.7;
-			}
-		}
-
-		> .description {
-			padding: 0 16px;
-			font-size: 0.8em;
-			color: var(--fg);
-			&.collapsed {
-				position: relative;
-				max-height: calc(9em + 50px);
-				mask: linear-gradient(black calc(100% - 64px), transparent);
-				-webkit-mask: linear-gradient(
-					black calc(100% - 64px),
-					transparent
-				);
-			}
-		}
-		:deep(.fade) {
-			position: relative;
-			display: block;
-			width: 100%;
-			margin-top: -2.5em;
-			z-index: 2;
-			> span {
-				display: inline-block;
-				background: var(--panel);
-				padding: 0.4em 1em;
-				font-size: 0.8em;
-				border-radius: 999px;
-				box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
-			}
-			&:hover {
-				> span {
-					background: var(--panelHighlight);
-				}
-			}
-		}
-		:deep(.showLess) {
-			width: 100%;
-			margin-top: 1em;
-			position: sticky;
-			bottom: var(--stickyBottom);
-
-			> span {
-				display: inline-block;
-				background: var(--panel);
-				padding: 6px 10px;
-				font-size: 0.8em;
-				border-radius: 999px;
-				box-shadow: 0 0 7px 7px var(--bg);
-			}
-		}
-
-		> .fields {
-			padding: 0 16px;
-			font-size: 0.8em;
-			margin-top: 1em;
-
-			> .field {
-				display: flex;
-				padding: 0;
-				margin: 0;
-				align-items: center;
-
-				&:not(:last-child) {
-					margin-bottom: 8px;
-				}
-
-				:deep(span) {
-					white-space: nowrap !important;
-				}
-
-				> .name {
-					width: 30%;
-					overflow: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-					font-weight: bold;
-					text-align: center;
-				}
-
-				> .value {
-					width: 70%;
-					overflow: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-					margin: 0;
-				}
-			}
-		}
-
-		> .status {
-			padding: 8px 16px;
-
-			> div {
-				display: inline-block;
-				width: 33%;
-
-				> p {
-					margin: 0;
-					font-size: 0.7em;
-					color: var(--fg);
-				}
-
-				> span {
-					font-size: 1em;
-					color: var(--accent);
-					:deep(span) {
-						white-space: nowrap;
-					}
-				}
-			}
-		}
-
-		> .follow-button-container {
-			position: absolute;
-			top: 8px;
-			right: 8px;
-			z-index: 3;
-			color: white;
-		}
-	}
 }
 </style>

From 450eae74c18d12e0a15a65f531b322b6fc0b8fdd Mon Sep 17 00:00:00 2001
From: freeplay <freeplay@duck.com>
Date: Thu, 13 Jul 2023 19:30:22 -0400
Subject: [PATCH 3/4] chore: format

---
 packages/client/src/components/MkUserInfo.vue | 30 ++++++-------------
 .../client/src/components/MkUserPreview.vue   |  1 -
 2 files changed, 9 insertions(+), 22 deletions(-)

diff --git a/packages/client/src/components/MkUserInfo.vue b/packages/client/src/components/MkUserInfo.vue
index 9ff5f8b6c..ad3602330 100644
--- a/packages/client/src/components/MkUserInfo.vue
+++ b/packages/client/src/components/MkUserInfo.vue
@@ -19,7 +19,7 @@
 			/></MkA>
 			<p class="username"><MkAcct :user="user" /></p>
 		</h3>
-		<div 
+		<div
 			class="description"
 			:class="{ collapsed: isLong && collapsed, truncate: !detailed }"
 		>
@@ -35,16 +35,9 @@
 				i18n.ts.noAccountDescription
 			}}</span>
 		</div>
-		<XShowMoreButton
-			v-if="isLong"
-			v-model="collapsed"
-		></XShowMoreButton>
+		<XShowMoreButton v-if="isLong" v-model="collapsed"></XShowMoreButton>
 		<div v-if="user.fields.length > 0 && detailed" class="fields">
-			<dl
-				v-for="(field, i) in user.fields"
-				:key="i"
-				class="field"
-			>
+			<dl v-for="(field, i) in user.fields" :key="i" class="field">
 				<dt class="name">
 					<Mfm
 						:text="field.name"
@@ -101,10 +94,8 @@ const props = defineProps<{
 
 let isLong = $ref(
 	props.detailed &&
-	(
-		props.user.description.split("\n").length > 9 ||
-		props.user.description.length > 400
-	)
+		(props.user.description.split("\n").length > 9 ||
+			props.user.description.length > 400),
 );
 let collapsed = $ref(isLong);
 </script>
@@ -148,7 +139,6 @@ let collapsed = $ref(isLong);
 		}
 	}
 
-	
 	.title {
 		position: relative;
 		display: block;
@@ -159,7 +149,7 @@ let collapsed = $ref(isLong);
 		background: var(--panel);
 		line-height: 1;
 		z-index: 4;
-		
+
 		.avatar {
 			display: block;
 			position: absolute;
@@ -210,12 +200,10 @@ let collapsed = $ref(isLong);
 			position: relative;
 			max-height: calc(9em + 50px);
 			mask: linear-gradient(black calc(100% - 64px), transparent);
-			-webkit-mask: linear-gradient(
-				black calc(100% - 64px),
-				transparent
-			);
+			-webkit-mask: linear-gradient(black calc(100% - 64px), transparent);
 		}
-		&.collapsed, &.truncate {
+		&.collapsed,
+		&.truncate {
 			:deep(br) {
 				display: none; // collapse white spaces
 			}
diff --git a/packages/client/src/components/MkUserPreview.vue b/packages/client/src/components/MkUserPreview.vue
index 60a91c11b..894e3dfb8 100644
--- a/packages/client/src/components/MkUserPreview.vue
+++ b/packages/client/src/components/MkUserPreview.vue
@@ -93,6 +93,5 @@ onMounted(() => {
 	width: 300px;
 	overflow: hidden;
 	transform-origin: center top;
-
 }
 </style>

From d9d8cb31cf648b33102fbf3930d1a7876388668d Mon Sep 17 00:00:00 2001
From: freeplay <freeplay@duck.com>
Date: Thu, 13 Jul 2023 19:32:35 -0400
Subject: [PATCH 4/4] fix: collapsing white space

---
 packages/client/src/components/MkUserInfo.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/MkUserInfo.vue b/packages/client/src/components/MkUserInfo.vue
index ad3602330..55979a229 100644
--- a/packages/client/src/components/MkUserInfo.vue
+++ b/packages/client/src/components/MkUserInfo.vue
@@ -205,7 +205,7 @@ let collapsed = $ref(isLong);
 		&.collapsed,
 		&.truncate {
 			:deep(br) {
-				display: none; // collapse white spaces
+				display: block; // collapse white spaces
 			}
 		}
 	}