From b5df90c797bf8b1f46089beea871733980bcf6e0 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Fri, 9 Sep 2022 15:42:17 -0700
Subject: [PATCH] Add swiper for instance info, fix MkSpacer

---
 packages/client/src/pages/about.vue         |  42 ++--
 packages/client/src/pages/admin-file.vue    |  36 ++-
 packages/client/src/pages/channels.vue      |  36 ++-
 packages/client/src/pages/instance-info.vue | 249 +++++++++++---------
 4 files changed, 193 insertions(+), 170 deletions(-)

diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue
index 65ae86f1e3..4bddbb505d 100644
--- a/packages/client/src/pages/about.vue
+++ b/packages/client/src/pages/about.vue
@@ -1,15 +1,15 @@
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<swiper
-		:modules="[Virtual]"
-		:space-between="20"
-		:virtual="true"
-		@swiper="setSwiperRef"
-		@slide-change="onSlideChange"
-	>
-		<swiper-slide>
-			<MkSpacer :content-max="600" :margin-min="20">
+	<MkSpacer :content-max="600" :margin-min="20">
+		<swiper
+			:modules="[Virtual]"
+			:space-between="20"
+			:virtual="true"
+			@swiper="setSwiperRef"
+			@slide-change="onSlideChange"
+		>
+			<swiper-slide>
 				<div class="_formRoot">
 					<div class="_formBlock fwhjspax" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
 						<div class="content">
@@ -74,24 +74,18 @@
 						</div>
 					</FormSection>
 				</div>
-			</MkSpacer>
-		</swiper-slide>
-		<swiper-slide>
-			<MkSpacer :content-max="1000" :margin-min="20">
+			</swiper-slide>
+			<swiper-slide>
 				<XEmojis/>
-			</MkSpacer>
-		</swiper-slide>
-		<swiper-slide>
-			<MkSpacer :content-max="1000" :margin-min="20">
+			</swiper-slide>
+			<swiper-slide>
 				<XFederation/>
-			</MkSpacer>
-		</swiper-slide>
-		<swiper-slide>
-			<MkSpacer :content-max="1000" :margin-min="20">
+			</swiper-slide>
+			<swiper-slide>
 				<MkInstanceStats :chart-limit="500" :detailed="true"/>
-			</MkSpacer>
-		</swiper-slide>
-	</swiper>
+			</swiper-slide>
+		</swiper>
+	</MkSpacer>
 </MkStickyContainer>
 </template>
 
diff --git a/packages/client/src/pages/admin-file.vue b/packages/client/src/pages/admin-file.vue
index 40a868c1b0..ed21552b9a 100644
--- a/packages/client/src/pages/admin-file.vue
+++ b/packages/client/src/pages/admin-file.vue
@@ -1,15 +1,15 @@
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<swiper
-		:modules="[Virtual]"
-		:space-between="20"
-		:virtual="true"
-		@swiper="setSwiperRef"
-		@slide-change="onSlideChange"
-	>
-		<swiper-slide>
-			<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
+	<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
+		<swiper
+			:modules="[Virtual]"
+			:space-between="20"
+			:virtual="true"
+			@swiper="setSwiperRef"
+			@slide-change="onSlideChange"
+		>
+			<swiper-slide>
 				<div class="cxqhhsmd _formRoot">
 					<a class="_formBlock thumbnail" :href="file.url" target="_blank">
 						<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
@@ -47,10 +47,8 @@
 						<MkButton danger @click="del"><i class="fas fa-trash-alt"></i> {{ i18n.ts.delete }}</MkButton>
 					</div>
 				</div>
-			</MkSpacer>
-		</swiper-slide>
-		<swiper-slide>
-			<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
+			</swiper-slide>
+			<swiper-slide>
 				<div v-if="info" class="_formRoot">
 					<MkInfo v-if="!iAmAdmin" warn>{{ i18n.ts.requireAdminForView }}</MkInfo>
 					<MkKeyValue v-if="info.requestIp" class="_formBlock _monospace" :copy="info.requestIp" oneline>
@@ -65,17 +63,15 @@
 						</MkKeyValue>
 					</FormSection>
 				</div>
-			</MkSpacer>
-		</swiper-slide>
-		<swiper-slide>
-			<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
+			</swiper-slide>
+			<swiper-slide>
 				<div class="_formRoot">
 					<MkObjectView v-if="info" tall :value="info">
 					</MkObjectView>
 				</div>
-			</MkSpacer>
-		</swiper-slide>
-	</swiper>
+			</swiper-slide>
+		</swiper>
+	</MkSpacer>
 </MkStickyContainer>
 </template>
 
diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue
index 3989f5e770..3080dda349 100644
--- a/packages/client/src/pages/channels.vue
+++ b/packages/client/src/pages/channels.vue
@@ -1,42 +1,38 @@
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<swiper
-		:modules="[Virtual]"
-		:space-between="20"
-		:virtual="true"
-		@swiper="setSwiperRef"
-		@slide-change="onSlideChange"
-	>
-		<swiper-slide>
-			<MkSpacer :content-max="700">
+	<MkSpacer :content-max="700">
+		<swiper
+			:modules="[Virtual]"
+			:space-between="20"
+			:virtual="true"
+			@swiper="setSwiperRef"
+			@slide-change="onSlideChange"
+		>
+			<swiper-slide>
 				<div class="_content grwlizim featured">
 					<MkPagination v-slot="{items}" :pagination="featuredPagination">
 						<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
 					</MkPagination>
 				</div>
-			</MkSpacer>
-		</swiper-slide>
-		<swiper-slide>
-			<MkSpacer :content-max="700">
+			</swiper-slide>
+			<swiper-slide>
 				<div class="_content grwlizim following">
 					<MkPagination v-slot="{items}" :pagination="followingPagination">
 						<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
 					</MkPagination>
 				</div>
-			</MkSpacer>
-		</swiper-slide>
-		<swiper-slide>
-			<MkSpacer :content-max="700">
+			</swiper-slide>
+			<swiper-slide>
 				<div class="_content grwlizim owned">
 					<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
 					<MkPagination v-slot="{items}" :pagination="ownedPagination">
 						<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
 					</MkPagination>
 				</div>
-			</MkSpacer>
-		</swiper-slide>
-	</swiper>
+			</swiper-slide>
+		</swiper>
+	</MkSpacer>
 </MkStickyContainer>
 </template>
 
diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue
index c5378a2842..b393d9ba4b 100644
--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/instance-info.vue
@@ -2,120 +2,138 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer v-if="instance" :content-max="600" :margin-min="16" :margin-max="32">
-		<div v-if="tab === 'overview'" class="_formRoot">
-			<div class="fnfelxur">
-				<img :src="instance.iconUrl || instance.faviconUrl" alt="" class="icon"/>
-				<span class="name">{{ instance.name || `(${i18n.ts.unknown})` }}</span>
-			</div>
-			<MkKeyValue :copy="host" oneline style="margin: 1em 0;">
-				<template #key>Host</template>
-				<template #value><span class="_monospace"><MkLink :url="`https://${host}`">{{ host }}</MkLink></span></template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0;">
-				<template #key>{{ i18n.ts.software }}</template>
-				<template #value><span class="_monospace">{{ instance.softwareName || `(${i18n.ts.unknown})` }} / {{ instance.softwareVersion || `(${i18n.ts.unknown})` }}</span></template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0;">
-				<template #key>{{ i18n.ts.administrator }}</template>
-				<template #value>{{ instance.maintainerName || `(${i18n.ts.unknown})` }} ({{ instance.maintainerEmail || `(${i18n.ts.unknown})` }})</template>
-			</MkKeyValue>
-			<MkKeyValue>
-				<template #key>{{ i18n.ts.description }}</template>
-				<template #value>{{ instance.description }}</template>
-			</MkKeyValue>
-
-			<FormSection v-if="iAmModerator">
-				<template #label>Moderation</template>
-				<FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ i18n.ts.stopActivityDelivery }}</FormSwitch>
-				<FormSwitch v-model="isBlocked" class="_formBlock" @update:modelValue="toggleBlock">{{ i18n.ts.blockThisInstance }}</FormSwitch>
-				<MkButton @click="refreshMetadata"><i class="fas fa-refresh"></i> Refresh metadata</MkButton>
-			</FormSection>
-
-			<FormSection>
-				<MkKeyValue oneline style="margin: 1em 0;">
-					<template #key>{{ i18n.ts.registeredAt }}</template>
-					<template #value><MkTime mode="detail" :time="instance.caughtAt"/></template>
-				</MkKeyValue>
-				<MkKeyValue oneline style="margin: 1em 0;">
-					<template #key>{{ i18n.ts.updatedAt }}</template>
-					<template #value><MkTime mode="detail" :time="instance.infoUpdatedAt"/></template>
-				</MkKeyValue>
-				<MkKeyValue oneline style="margin: 1em 0;">
-					<template #key>{{ i18n.ts.latestRequestSentAt }}</template>
-					<template #value><MkTime v-if="instance.latestRequestSentAt" :time="instance.latestRequestSentAt"/><span v-else>N/A</span></template>
-				</MkKeyValue>
-				<MkKeyValue oneline style="margin: 1em 0;">
-					<template #key>{{ i18n.ts.latestStatus }}</template>
-					<template #value>{{ instance.latestStatus ? instance.latestStatus : 'N/A' }}</template>
-				</MkKeyValue>
-				<MkKeyValue oneline style="margin: 1em 0;">
-					<template #key>{{ i18n.ts.latestRequestReceivedAt }}</template>
-					<template #value><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></template>
-				</MkKeyValue>
-			</FormSection>
-
-			<FormSection>
-				<MkKeyValue oneline style="margin: 1em 0;">
-					<template #key>Following (Pub)</template>
-					<template #value>{{ number(instance.followingCount) }}</template>
-				</MkKeyValue>
-				<MkKeyValue oneline style="margin: 1em 0;">
-					<template #key>Followers (Sub)</template>
-					<template #value>{{ number(instance.followersCount) }}</template>
-				</MkKeyValue>
-			</FormSection>
-
-			<FormSection>
-				<template #label>Well-known resources</template>
-				<FormLink :to="`https://${host}/.well-known/host-meta`" external style="margin-bottom: 8px;">host-meta</FormLink>
-				<FormLink :to="`https://${host}/.well-known/host-meta.json`" external style="margin-bottom: 8px;">host-meta.json</FormLink>
-				<FormLink :to="`https://${host}/.well-known/nodeinfo`" external style="margin-bottom: 8px;">nodeinfo</FormLink>
-				<FormLink :to="`https://${host}/robots.txt`" external style="margin-bottom: 8px;">robots.txt</FormLink>
-				<FormLink :to="`https://${host}/manifest.json`" external style="margin-bottom: 8px;">manifest.json</FormLink>
-			</FormSection>
-		</div>
-		<div v-else-if="tab === 'chart'" class="_formRoot">
-			<div class="cmhjzshl">
-				<div class="selects">
-					<MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
-						<option value="instance-requests">{{ i18n.ts._instanceCharts.requests }}</option>
-						<option value="instance-users">{{ i18n.ts._instanceCharts.users }}</option>
-						<option value="instance-users-total">{{ i18n.ts._instanceCharts.usersTotal }}</option>
-						<option value="instance-notes">{{ i18n.ts._instanceCharts.notes }}</option>
-						<option value="instance-notes-total">{{ i18n.ts._instanceCharts.notesTotal }}</option>
-						<option value="instance-ff">{{ i18n.ts._instanceCharts.ff }}</option>
-						<option value="instance-ff-total">{{ i18n.ts._instanceCharts.ffTotal }}</option>
-						<option value="instance-drive-usage">{{ i18n.ts._instanceCharts.cacheSize }}</option>
-						<option value="instance-drive-usage-total">{{ i18n.ts._instanceCharts.cacheSizeTotal }}</option>
-						<option value="instance-drive-files">{{ i18n.ts._instanceCharts.files }}</option>
-						<option value="instance-drive-files-total">{{ i18n.ts._instanceCharts.filesTotal }}</option>
-					</MkSelect>
+		<swiper
+			:modules="[Virtual]"
+			:space-between="20"
+			:virtual="true"
+			@swiper="setSwiperRef"
+			@slide-change="onSlideChange"
+		>
+			<swiper-slide>
+				<div class="_formRoot">
+					<div class="fnfelxur">
+						<img :src="instance.iconUrl || instance.faviconUrl" alt="" class="icon"/>
+						<span class="name">{{ instance.name || `(${i18n.ts.unknown})` }}</span>
+					</div>
+					<MkKeyValue :copy="host" oneline style="margin: 1em 0;">
+						<template #key>Host</template>
+						<template #value><span class="_monospace"><MkLink :url="`https://${host}`">{{ host }}</MkLink></span></template>
+					</MkKeyValue>
+					<MkKeyValue oneline style="margin: 1em 0;">
+						<template #key>{{ i18n.ts.software }}</template>
+						<template #value><span class="_monospace">{{ instance.softwareName || `(${i18n.ts.unknown})` }} / {{ instance.softwareVersion || `(${i18n.ts.unknown})` }}</span></template>
+					</MkKeyValue>
+					<MkKeyValue oneline style="margin: 1em 0;">
+						<template #key>{{ i18n.ts.administrator }}</template>
+						<template #value>{{ instance.maintainerName || `(${i18n.ts.unknown})` }} ({{ instance.maintainerEmail || `(${i18n.ts.unknown})` }})</template>
+					</MkKeyValue>
+					<MkKeyValue>
+						<template #key>{{ i18n.ts.description }}</template>
+						<template #value>{{ instance.description }}</template>
+					</MkKeyValue>
+	
+					<FormSection v-if="iAmModerator">
+						<template #label>Moderation</template>
+						<FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ i18n.ts.stopActivityDelivery }}</FormSwitch>
+						<FormSwitch v-model="isBlocked" class="_formBlock" @update:modelValue="toggleBlock">{{ i18n.ts.blockThisInstance }}</FormSwitch>
+						<MkButton @click="refreshMetadata"><i class="fas fa-refresh"></i> Refresh metadata</MkButton>
+					</FormSection>
+	
+					<FormSection>
+						<MkKeyValue oneline style="margin: 1em 0;">
+							<template #key>{{ i18n.ts.registeredAt }}</template>
+							<template #value><MkTime mode="detail" :time="instance.caughtAt"/></template>
+						</MkKeyValue>
+						<MkKeyValue oneline style="margin: 1em 0;">
+							<template #key>{{ i18n.ts.updatedAt }}</template>
+							<template #value><MkTime mode="detail" :time="instance.infoUpdatedAt"/></template>
+						</MkKeyValue>
+						<MkKeyValue oneline style="margin: 1em 0;">
+							<template #key>{{ i18n.ts.latestRequestSentAt }}</template>
+							<template #value><MkTime v-if="instance.latestRequestSentAt" :time="instance.latestRequestSentAt"/><span v-else>N/A</span></template>
+						</MkKeyValue>
+						<MkKeyValue oneline style="margin: 1em 0;">
+							<template #key>{{ i18n.ts.latestStatus }}</template>
+							<template #value>{{ instance.latestStatus ? instance.latestStatus : 'N/A' }}</template>
+						</MkKeyValue>
+						<MkKeyValue oneline style="margin: 1em 0;">
+							<template #key>{{ i18n.ts.latestRequestReceivedAt }}</template>
+							<template #value><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></template>
+						</MkKeyValue>
+					</FormSection>
+	
+					<FormSection>
+						<MkKeyValue oneline style="margin: 1em 0;">
+							<template #key>Following (Pub)</template>
+							<template #value>{{ number(instance.followingCount) }}</template>
+						</MkKeyValue>
+						<MkKeyValue oneline style="margin: 1em 0;">
+							<template #key>Followers (Sub)</template>
+							<template #value>{{ number(instance.followersCount) }}</template>
+						</MkKeyValue>
+					</FormSection>
+	
+					<FormSection>
+						<template #label>Well-known resources</template>
+						<FormLink :to="`https://${host}/.well-known/host-meta`" external style="margin-bottom: 8px;">host-meta</FormLink>
+						<FormLink :to="`https://${host}/.well-known/host-meta.json`" external style="margin-bottom: 8px;">host-meta.json</FormLink>
+						<FormLink :to="`https://${host}/.well-known/nodeinfo`" external style="margin-bottom: 8px;">nodeinfo</FormLink>
+						<FormLink :to="`https://${host}/robots.txt`" external style="margin-bottom: 8px;">robots.txt</FormLink>
+						<FormLink :to="`https://${host}/manifest.json`" external style="margin-bottom: 8px;">manifest.json</FormLink>
+					</FormSection>
 				</div>
-				<div class="charts">
-					<div class="label">{{ i18n.t('recentNHours', { n: 90 }) }}</div>
-					<MkChart class="chart" :src="chartSrc" span="hour" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
-					<div class="label">{{ i18n.t('recentNDays', { n: 90 }) }}</div>
-					<MkChart class="chart" :src="chartSrc" span="day" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
+			</swiper-slide>
+			<swiper-slide>
+				<div class="_formRoot">
+					<div class="cmhjzshl">
+						<div class="selects">
+							<MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
+								<option value="instance-requests">{{ i18n.ts._instanceCharts.requests }}</option>
+								<option value="instance-users">{{ i18n.ts._instanceCharts.users }}</option>
+								<option value="instance-users-total">{{ i18n.ts._instanceCharts.usersTotal }}</option>
+								<option value="instance-notes">{{ i18n.ts._instanceCharts.notes }}</option>
+								<option value="instance-notes-total">{{ i18n.ts._instanceCharts.notesTotal }}</option>
+								<option value="instance-ff">{{ i18n.ts._instanceCharts.ff }}</option>
+								<option value="instance-ff-total">{{ i18n.ts._instanceCharts.ffTotal }}</option>
+								<option value="instance-drive-usage">{{ i18n.ts._instanceCharts.cacheSize }}</option>
+								<option value="instance-drive-usage-total">{{ i18n.ts._instanceCharts.cacheSizeTotal }}</option>
+								<option value="instance-drive-files">{{ i18n.ts._instanceCharts.files }}</option>
+								<option value="instance-drive-files-total">{{ i18n.ts._instanceCharts.filesTotal }}</option>
+							</MkSelect>
+						</div>
+						<div class="charts">
+							<div class="label">{{ i18n.t('recentNHours', { n: 90 }) }}</div>
+							<MkChart class="chart" :src="chartSrc" span="hour" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
+							<div class="label">{{ i18n.t('recentNDays', { n: 90 }) }}</div>
+							<MkChart class="chart" :src="chartSrc" span="day" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
+						</div>
+					</div>
 				</div>
-			</div>
-		</div>
-		<div v-else-if="tab === 'users'" class="_formRoot">
-			<MkPagination v-slot="{items}" :pagination="usersPagination" style="display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); grid-gap: 12px;">
-				<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${new Date(user.updatedAt).toLocaleString()}`" class="user" :to="`/user-info/${user.id}`">
-					<MkUserCardMini :user="user"/>
-				</MkA>
-			</MkPagination>
-		</div>
-		<div v-else-if="tab === 'raw'" class="_formRoot">
-			<MkObjectView tall :value="instance">
-			</MkObjectView>
-		</div>
+			</swiper-slide>
+			<swiper-slide>
+				<div class="_formRoot">
+					<MkPagination v-slot="{items}" :pagination="usersPagination" style="display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); grid-gap: 12px;">
+						<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${new Date(user.updatedAt).toLocaleString()}`" class="user" :to="`/user-info/${user.id}`">
+							<MkUserCardMini :user="user"/>
+						</MkA>
+					</MkPagination>
+				</div>
+			</swiper-slide>
+			<swiper-slide>
+				<div class="_formRoot">
+					<MkObjectView tall :value="instance">
+					</MkObjectView>
+				</div>
+			</swiper-slide>
+		</swiper>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
+import { Virtual } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/vue';
 import * as misskey from 'misskey-js';
 import MkChart from '@/components/MkChart.vue';
 import MkObjectView from '@/components/MkObjectView.vue';
@@ -134,12 +152,16 @@ import { definePageMetadata } from '@/scripts/page-metadata';
 import { i18n } from '@/i18n';
 import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import MkPagination from '@/components/MkPagination.vue';
+import 'swiper/scss';
+import 'swiper/scss/virtual';
 
 const props = defineProps<{
 	host: string;
 }>();
 
 let tab = $ref('overview');
+let tabs = ['overview'];
+if (iAmModerator) tabs.push('chart', 'users', 'raw');
 let chartSrc = $ref('instance-requests');
 let meta = $ref<misskey.entities.DetailedInstanceMetadata | null>(null);
 let instance = $ref<misskey.entities.Instance | null>(null);
@@ -228,6 +250,21 @@ definePageMetadata({
 	title: props.host,
 	icon: 'fas fa-server',
 });
+
+let swiperRef = null;
+
+function setSwiperRef(swiper) {
+	swiperRef = swiper;
+	syncSlide(tabs.indexOf(tab));
+}
+
+function onSlideChange() {
+	tab = tabs[swiperRef.activeIndex];
+}
+
+function syncSlide(index) {
+	swiperRef.slideTo(index);
+}
 </script>
 
 <style lang="scss" scoped>