From f573f93d166dbbf2b056cd64d565c8d7571a6871 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Fri, 19 May 2023 14:45:29 -0400
Subject: [PATCH] Make UserCardMini clickable

---
 packages/client/src/components/MkUserCardMini.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/MkUserCardMini.vue b/packages/client/src/components/MkUserCardMini.vue
index 27b3e939fd..908882ec30 100644
--- a/packages/client/src/components/MkUserCardMini.vue
+++ b/packages/client/src/components/MkUserCardMini.vue
@@ -1,10 +1,11 @@
 <template>
-	<div
+	<MkA
 		class="user-card-mini"
 		:class="[
 			$style.root,
 			{ yellow: user.isSilenced, red: user.isSuspended, gray: false },
 		]"
+		:to="userPage(user)"
 	>
 		<MkAvatar
 			class="avatar"
@@ -19,14 +20,14 @@
 			>
 		</div>
 		<MkMiniChart v-if="chartValues" class="chart" :src="chartValues" />
-	</div>
+	</MkA>
 </template>
 
 <script lang="ts" setup>
 import * as misskey from "calckey-js";
 import MkMiniChart from "@/components/MkMiniChart.vue";
 import * as os from "@/os";
-import { acct } from "@/filters/user";
+import { acct, userPage } from "@/filters/user";
 
 const props = withDefaults(defineProps<{
 		user: misskey.entities.User;
@@ -62,6 +63,7 @@ if (props.withChart) {
 	padding: 16px;
 	background: var(--panel);
 	border-radius: 8px;
+	transition: background .2s;
 
 	> :global(.avatar) {
 		display: block;
@@ -102,6 +104,10 @@ if (props.withChart) {
 		height: 30px;
 	}
 
+	&:hover, &:focus {
+		background: var(--panelHighlight);
+	}
+
 	&:global(.yellow) {
 		--c: rgb(255 196 0 / 15%);
 		background-image: linear-gradient(