Add lists hint

locales/en-US.yml

@@ -83,6 +83,7 @@ exportRequested: "You've requested an export. This may take a while. It will be
   \ to your Drive once completed."
 importRequested: "You've requested an import. This may take a while."
 lists: "Lists"
+listsDesc: "Lists let you create timelines with specified users. They can be accessed from the timelines page."
 noLists: "You don't have any lists"
 note: "Post"
 notes: "Posts"

packages/client/src/components/MkPagination.vue

@@ -490,5 +490,8 @@ defineExpose({
 .list > :deep(._button) {
 	margin-inline: auto;
 	margin-bottom: 16px;
+	&:last-of-type:not(:first-child) {
+		margin-top: 16px;
+	}
 }
 </style>

packages/client/src/pages/my-lists/index.vue

@@ -8,16 +8,17 @@
 		/></template>
 		<MkSpacer :content-max="700">
 			<div class="qkcjvfiv">
-				<div class="buttonWrapper">
+				<MkInfo
+					class="_gap"
+					:icon="'list-bullets'"
+					:card="true"
+				>
+					<p>{{ i18n.ts.listsDesc }}</p>
 					<MkButton primary class="add" @click="create"
 						><i class="ph-plus ph-bold ph-lg"></i>
 						{{ i18n.ts.createList }}</MkButton
 					>
-					<MkButton @click="deleteAll"
-						><i class="ph-trash ph-bold ph-lg"></i>
-						{{ i18n.ts.deleteAll }}</MkButton
-					>
-				</div>
+				</MkInfo>
 
 				<MkPagination
 					v-slot="{ items }"
@@ -34,6 +35,10 @@
 						<div class="name">{{ list.name }}</div>
 						<MkAvatars :user-ids="list.userIds" />
 					</MkA>
+					<MkButton @click="deleteAll"
+						><i class="ph-trash ph-bold ph-lg"></i>
+						{{ i18n.ts.deleteAll }}</MkButton
+					>
 				</MkPagination>
 			</div>
 		</MkSpacer>
@@ -45,6 +50,7 @@ import {} from "vue";
 import MkPagination from "@/components/MkPagination.vue";
 import MkButton from "@/components/MkButton.vue";
 import MkAvatars from "@/components/MkAvatars.vue";
+import MkInfo from "@/components/MkInfo.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
@@ -92,15 +98,6 @@ definePageMetadata({
 
 <style lang="scss" scoped>
 .qkcjvfiv {
-	> .buttonWrapper {
-		display: grid;
-		justify-content: center;
-
-		> .add {
-			margin: 0 auto var(--margin) auto;
-		}
-	}
-
 	> .lists {
 		> .list {
 			display: block;