Move user menu to MkFollowButton

packages/client/src/components/MkFollowButton.vue

@@ -1,4 +1,13 @@
 <template>
+	<button
+		class="menu _button"
+		@click="menu"
+		v-tooltip="i18n.ts.menu"
+	>
+		<i
+			class="ph-dots-three-outline ph-bold ph-lg"
+		></i>
+	</button>
 	<button
 		v-if="$i != null && $i.id != user.id"
 		class="kpoogebi _button follow-button"
@@ -60,6 +69,11 @@ import * as os from "@/os";
 import { stream } from "@/stream";
 import { i18n } from "@/i18n";
 import { $i } from "@/account";
+import { getUserMenu } from "@/scripts/get-user-menu";
+import { useRouter } from "@/router";
+
+const router = useRouter();
+
 
 const emit = defineEmits(["refresh"]);
 const props = withDefaults(
@@ -151,6 +165,13 @@ async function onClick() {
 	}
 }
 
+function menu(ev) {
+	os.popupMenu(
+		getUserMenu(props.user, router),
+		ev.currentTarget ?? ev.target
+	);
+}
+
 onMounted(() => {
 	connection.on("follow", onFollowChange);
 	connection.on("unfollow", onFollowChange);
@@ -176,6 +197,7 @@ onBeforeUnmount(() => {
 	height: 2em;
 	border-radius: 100px;
 	background: var(--bg);
+	margin-left: 14px;
 
 	&.full {
 		padding: 0.2em 0.7em;

packages/client/src/components/MkUserPreview.vue

@@ -101,12 +101,13 @@
 						<span>{{ user.followersCount }}</span>
 					</div>
 				</div>
-				<MkFollowButton
-					v-if="$i && user.id != $i.id"
-					class="koudoku-button"
-					:user="user"
-					mini
-				/>
+				<div class="follow-button-container">
+					<MkFollowButton
+						v-if="$i && user.id != $i.id"
+						:user="user"
+						mini
+					/>
+				</div>
 			</div>
 			<div v-else>
 				<MkLoading />
@@ -210,6 +211,15 @@ onMounted(() => {
 				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);
@@ -368,10 +378,11 @@ onMounted(() => {
 			}
 		}
 
-		> .koudoku-button {
+		> .follow-button-container {
 			position: absolute;
 			top: 8px;
 			right: 8px;
+			z-index: 3;
 		}
 	}
 }

packages/client/src/pages/user/home.vue

@@ -162,15 +162,6 @@
 						</div>
 						<div class="follow-container">
 							<div class="actions">
-								<button
-									class="menu _button"
-									@click="menu"
-									v-tooltip="i18n.ts.menu"
-								>
-									<i
-										class="ph-dots-three-outline ph-bold ph-lg"
-									></i>
-								</button>
 								<MkFollowButton
 									:user="user"
 									@refresh="emit('refresh')"
@@ -345,11 +336,9 @@ import MkRemoteCaution from "@/components/MkRemoteCaution.vue";
 import MkInfo from "@/components/MkInfo.vue";
 import MkMoved from "@/components/MkMoved.vue";
 import { getScrollPosition } from "@/scripts/scroll";
-import { getUserMenu } from "@/scripts/get-user-menu";
 import number from "@/filters/number";
 import { userPage } from "@/filters/user";
 import * as os from "@/os";
-import { useRouter } from "@/router";
 import { i18n } from "@/i18n";
 import { $i } from "@/account";
 import { host } from "@/config";
@@ -365,8 +354,6 @@ const props = withDefaults(
 	{}
 );
 
-const router = useRouter();
-
 let parallaxAnimationId = $ref<null | number>(null);
 let narrow = $ref<null | boolean>(null);
 let rootEl = $ref<null | HTMLElement>(null);
@@ -423,13 +410,6 @@ const timeForThem = $computed(() => {
 
 const patrons = await os.api("patrons");
 
-function menu(ev) {
-	os.popupMenu(
-		getUserMenu(props.user, router),
-		ev.currentTarget ?? ev.target
-	);
-}
-
 function parallaxLoop() {
 	parallaxAnimationId = window.requestAnimationFrame(parallaxLoop);
 	parallax();
@@ -599,17 +579,6 @@ onUnmounted(() => {
 						display: flex;
 						justify-content: center;
 						align-items: center;
-
-						> .menu {
-							height: 31px;
-							width: 31px;
-							color: --fg;
-							font-size: 16px;
-						}
-
-						> :deep(.follow-button) {
-							margin-left: 8px;
-						}
 					}
 
 					> .title {

packages/client/src/scripts/get-user-menu.ts

@@ -225,6 +225,10 @@ export function getUserMenu(user, router: Router = mainRouter) {
 	}
 
 	let menu = [
+		{
+			type: "label",
+			text: user.host ? `@${user.username}@${user.host || host}` : `@${user.username}`
+		},
 		{
 			icon: "ph-at ph-bold ph-lg",
 			text: i18n.ts.copyUsername,