From c0eba655274c195f809438c2e23f95b4c3f87691 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 7 Jul 2022 20:19:50 +0900
Subject: [PATCH] chore(client): tweak ui

---
 packages/client/src/pages/follow-requests.vue | 57 ++++++++++---------
 .../client/src/ui/_common_/statusbars.vue     |  4 ++
 .../client/src/widgets/instance-cloud.vue     |  2 +-
 3 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/packages/client/src/pages/follow-requests.vue b/packages/client/src/pages/follow-requests.vue
index f21c68c4c..1f4dc9e93 100644
--- a/packages/client/src/pages/follow-requests.vue
+++ b/packages/client/src/pages/follow-requests.vue
@@ -1,34 +1,37 @@
 <template>
-<div>
-	<MkPagination ref="paginationComponent" :pagination="pagination">
-		<template #empty>
-			<div class="_fullinfo">
-				<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
-				<div>{{ $ts.noFollowRequests }}</div>
-			</div>
-		</template>
-		<template #default="{items}">
-			<div class="mk-follow-requests">
-				<div v-for="req in items" :key="req.id" class="user _panel">
-					<MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/>
-					<div class="body">
-						<div class="name">
-							<MkA v-user-preview="req.follower.id" class="name" :to="userPage(req.follower)"><MkUserName :user="req.follower"/></MkA>
-							<p class="acct">@{{ acct(req.follower) }}</p>
-						</div>
-						<div v-if="req.follower.description" class="description" :title="req.follower.description">
-							<Mfm :text="req.follower.description" :is-note="false" :author="req.follower" :i="$i" :custom-emojis="req.follower.emojis" :plain="true" :nowrap="true"/>
-						</div>
-						<div class="actions">
-							<button class="_button" @click="accept(req.follower)"><i class="fas fa-check"></i></button>
-							<button class="_button" @click="reject(req.follower)"><i class="fas fa-times"></i></button>
+<MkStickyContainer>
+	<template #header><MkPageHeader/></template>
+	<MkSpacer :content-max="800">
+		<MkPagination ref="paginationComponent" :pagination="pagination">
+			<template #empty>
+				<div class="_fullinfo">
+					<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+					<div>{{ $ts.noFollowRequests }}</div>
+				</div>
+			</template>
+			<template #default="{items}">
+				<div class="mk-follow-requests">
+					<div v-for="req in items" :key="req.id" class="user _panel">
+						<MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/>
+						<div class="body">
+							<div class="name">
+								<MkA v-user-preview="req.follower.id" class="name" :to="userPage(req.follower)"><MkUserName :user="req.follower"/></MkA>
+								<p class="acct">@{{ acct(req.follower) }}</p>
+							</div>
+							<div v-if="req.follower.description" class="description" :title="req.follower.description">
+								<Mfm :text="req.follower.description" :is-note="false" :author="req.follower" :i="$i" :custom-emojis="req.follower.emojis" :plain="true" :nowrap="true"/>
+							</div>
+							<div class="actions">
+								<button class="_button" @click="accept(req.follower)"><i class="fas fa-check"></i></button>
+								<button class="_button" @click="reject(req.follower)"><i class="fas fa-times"></i></button>
+							</div>
 						</div>
 					</div>
 				</div>
-			</div>
-		</template>
-	</MkPagination>
-</div>
+			</template>
+		</MkPagination>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/client/src/ui/_common_/statusbars.vue b/packages/client/src/ui/_common_/statusbars.vue
index c448b0956..80949665b 100644
--- a/packages/client/src/ui/_common_/statusbars.vue
+++ b/packages/client/src/ui/_common_/statusbars.vue
@@ -71,6 +71,10 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
 			padding: 0 var(--nameMargin);
 			font-weight: bold;
 			color: var(--accent);
+
+			&:empty {
+				display: none;
+			}
 		}
 
 		> .body {
diff --git a/packages/client/src/widgets/instance-cloud.vue b/packages/client/src/widgets/instance-cloud.vue
index 7dc4b4ce9..597ce0e82 100644
--- a/packages/client/src/widgets/instance-cloud.vue
+++ b/packages/client/src/widgets/instance-cloud.vue
@@ -2,7 +2,7 @@
 <MkContainer :naked="widgetProps.transparent" :show-header="false" class="mkw-instance-cloud">
 	<div class="">
 		<MkTagCloud v-if="activeInstances">
-			<li v-for="instance in activeInstances">
+			<li v-for="instance in activeInstances" :key="instance.id">
 				<a @click.prevent="onInstanceClick(instance)">
 					<img style="width: 32px;" :src="instance.iconUrl">
 				</a>