refactor(frontend): PageWithHeaderにMkSwiperを持たせるように

1 files changed, 113 insertions, 116 deletions

diff --git a/packages/frontend/src/pages/instance-info.vue b/packages/frontend/src/pages/instance-info.vue
index fde462944c..be77799eb6 100644
--- a/packages/frontend/src/pages/instance-info.vue
+++ b/packages/frontend/src/pages/instance-info.vue
@@ -4,129 +4,127 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs">
+<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :swipable="true">
 	<MkSpacer v-if="instance" :contentMax="600" :marginMin="16" :marginMax="32">
-		<MkSwiper v-model:tab="tab" :tabs="headerTabs">
-			<div v-if="tab === 'overview'" class="_gaps_m">
-				<div class="fnfelxur">
-					<img :src="faviconUrl" alt="" class="icon"/>
-					<span class="name">{{ instance.name || `(${i18n.ts.unknown})` }}</span>
-				</div>
-				<div style="display: flex; flex-direction: column; gap: 1em;">
-					<MkKeyValue :copy="host" oneline>
-						<template #key>Host</template>
-						<template #value><span class="_monospace"><MkLink :url="`https://${host}`">{{ host }}</MkLink></span></template>
-					</MkKeyValue>
-					<MkKeyValue oneline>
-						<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>
-						<template #key>{{ i18n.ts.administrator }}</template>
-						<template #value>{{ instance.maintainerName || `(${i18n.ts.unknown})` }} ({{ instance.maintainerEmail || `(${i18n.ts.unknown})` }})</template>
-					</MkKeyValue>
-				</div>
-				<MkKeyValue>
-					<template #key>{{ i18n.ts.description }}</template>
-					<template #value>{{ instance.description }}</template>
+		<div v-if="tab === 'overview'" class="_gaps_m">
+			<div class="fnfelxur">
+				<img :src="faviconUrl" alt="" class="icon"/>
+				<span class="name">{{ instance.name || `(${i18n.ts.unknown})` }}</span>
+			</div>
+			<div style="display: flex; flex-direction: column; gap: 1em;">
+				<MkKeyValue :copy="host" oneline>
+					<template #key>Host</template>
+					<template #value><span class="_monospace"><MkLink :url="`https://${host}`">{{ host }}</MkLink></span></template>
 				</MkKeyValue>
+				<MkKeyValue oneline>
+					<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>
+					<template #key>{{ i18n.ts.administrator }}</template>
+					<template #value>{{ instance.maintainerName || `(${i18n.ts.unknown})` }} ({{ instance.maintainerEmail || `(${i18n.ts.unknown})` }})</template>
+				</MkKeyValue>
+			</div>
+			<MkKeyValue>
+				<template #key>{{ i18n.ts.description }}</template>
+				<template #value>{{ instance.description }}</template>
+			</MkKeyValue>
 
-				<FormSection v-if="iAmModerator">
-					<template #label>Moderation</template>
-					<div class="_gaps_s">
-						<MkKeyValue>
-							<template #key>
-								{{ i18n.ts._delivery.status }}
-							</template>
-							<template #value>
-								{{ i18n.ts._delivery._type[suspensionState] }}
-							</template>
-						</MkKeyValue>
-						<MkButton v-if="suspensionState === 'none'" :disabled="!instance" danger @click="stopDelivery">{{ i18n.ts._delivery.stop }}</MkButton>
-						<MkButton v-if="suspensionState !== 'none'" :disabled="!instance" @click="resumeDelivery">{{ i18n.ts._delivery.resume }}</MkButton>
-						<MkSwitch v-model="isBlocked" :disabled="!meta || !instance" @update:modelValue="toggleBlock">{{ i18n.ts.blockThisInstance }}</MkSwitch>
-						<MkSwitch v-model="isSilenced" :disabled="!meta || !instance" @update:modelValue="toggleSilenced">{{ i18n.ts.silenceThisInstance }}</MkSwitch>
-						<MkSwitch v-model="isMediaSilenced" :disabled="!meta || !instance" @update:modelValue="toggleMediaSilenced">{{ i18n.ts.mediaSilenceThisInstance }}</MkSwitch>
-						<MkButton @click="refreshMetadata"><i class="ti ti-refresh"></i> Refresh metadata</MkButton>
-						<MkTextarea v-model="moderationNote" manualSave>
-							<template #label>{{ i18n.ts.moderationNote }}</template>
-							<template #caption>{{ i18n.ts.moderationNoteDescription }}</template>
-						</MkTextarea>
-					</div>
-				</FormSection>
-
-				<FormSection>
-					<MkKeyValue oneline style="margin: 1em 0;">
-						<template #key>{{ i18n.ts.registeredAt }}</template>
-						<template #value><MkTime mode="detail" :time="instance.firstRetrievedAt"/></template>
+			<FormSection v-if="iAmModerator">
+				<template #label>Moderation</template>
+				<div class="_gaps_s">
+					<MkKeyValue>
+						<template #key>
+							{{ i18n.ts._delivery.status }}
+						</template>
+						<template #value>
+							{{ i18n.ts._delivery._type[suspensionState] }}
+						</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.latestRequestReceivedAt }}</template>
-						<template #value><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></template>
-					</MkKeyValue>
-				</FormSection>
+					<MkButton v-if="suspensionState === 'none'" :disabled="!instance" danger @click="stopDelivery">{{ i18n.ts._delivery.stop }}</MkButton>
+					<MkButton v-if="suspensionState !== 'none'" :disabled="!instance" @click="resumeDelivery">{{ i18n.ts._delivery.resume }}</MkButton>
+					<MkSwitch v-model="isBlocked" :disabled="!meta || !instance" @update:modelValue="toggleBlock">{{ i18n.ts.blockThisInstance }}</MkSwitch>
+					<MkSwitch v-model="isSilenced" :disabled="!meta || !instance" @update:modelValue="toggleSilenced">{{ i18n.ts.silenceThisInstance }}</MkSwitch>
+					<MkSwitch v-model="isMediaSilenced" :disabled="!meta || !instance" @update:modelValue="toggleMediaSilenced">{{ i18n.ts.mediaSilenceThisInstance }}</MkSwitch>
+					<MkButton @click="refreshMetadata"><i class="ti ti-refresh"></i> Refresh metadata</MkButton>
+					<MkTextarea v-model="moderationNote" manualSave>
+						<template #label>{{ i18n.ts.moderationNote }}</template>
+						<template #caption>{{ i18n.ts.moderationNoteDescription }}</template>
+					</MkTextarea>
+				</div>
+			</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>
+				<MkKeyValue oneline style="margin: 1em 0;">
+					<template #key>{{ i18n.ts.registeredAt }}</template>
+					<template #value><MkTime mode="detail" :time="instance.firstRetrievedAt"/></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.latestRequestReceivedAt }}</template>
+					<template #value><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></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="_gaps_m">
-				<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.tsx.recentNHours({ n: 90 }) }}</div>
-						<MkChart class="chart" :src="chartSrc" span="hour" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
-						<div class="label">{{ i18n.tsx.recentNDays({ n: 90 }) }}</div>
-						<MkChart class="chart" :src="chartSrc" span="day" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
-					</div>
+			<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="_gaps_m">
+			<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.tsx.recentNHours({ n: 90 }) }}</div>
+					<MkChart class="chart" :src="chartSrc" span="hour" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
+					<div class="label">{{ i18n.tsx.recentNDays({ n: 90 }) }}</div>
+					<MkChart class="chart" :src="chartSrc" span="day" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
 				</div>
 			</div>
-			<div v-else-if="tab === 'users'" class="_gaps_m">
-				<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: ${dateString(user.updatedAt)}`" class="user" :to="`/admin/user/${user.id}`">
-						<MkUserCardMini :user="user"/>
-					</MkA>
-				</MkPagination>
-			</div>
-			<div v-else-if="tab === 'raw'" class="_gaps_m">
-				<MkObjectView tall :value="instance">
-				</MkObjectView>
-			</div>
-		</MkSwiper>
+		</div>
+		<div v-else-if="tab === 'users'" class="_gaps_m">
+			<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: ${dateString(user.updatedAt)}`" class="user" :to="`/admin/user/${user.id}`">
+					<MkUserCardMini :user="user"/>
+				</MkA>
+			</MkPagination>
+		</div>
+		<div v-else-if="tab === 'raw'" class="_gaps_m">
+			<MkObjectView tall :value="instance">
+			</MkObjectView>
+		</div>
 	</MkSpacer>
 </PageWithHeader>
 </template>
@@ -153,7 +151,6 @@ import { definePage } from '@/page.js';
 import { i18n } from '@/i18n.js';
 import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import MkPagination from '@/components/MkPagination.vue';
-import MkSwiper from '@/components/MkSwiper.vue';
 import { getProxiedImageUrlNullable } from '@/utility/media-proxy.js';
 import { dateString } from '@/filters/date.js';
 import MkTextarea from '@/components/MkTextarea.vue';