From 8e20e27ff91b7ef81b3994abcd3f7846f8258b71 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 20 Jun 2022 19:49:51 +0900
Subject: [PATCH] fix client

---
 packages/client/src/pages/instance-info.vue   | 221 +++++++++---------
 .../src/pages/page-editor/page-editor.vue     | 165 ++++++-------
 2 files changed, 194 insertions(+), 192 deletions(-)

diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue
index 31d3d4ac8..9d7af4fc7 100644
--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/instance-info.vue
@@ -1,109 +1,111 @@
-<template><MkStickyContainer>
+<template>
+<MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-		<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
-	<div v-if="instance" class="_formRoot">
-		<div class="fnfelxur">
-			<img :src="instance.iconUrl || instance.faviconUrl" alt="" class="icon"/>
-		</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>Name</template>
-			<template #value>{{ instance.name || `(${$ts.unknown})` }}</template>
-		</MkKeyValue>
-		<MkKeyValue>
-			<template #key>{{ $ts.description }}</template>
-			<template #value>{{ instance.description }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ $ts.software }}</template>
-			<template #value><span class="_monospace">{{ instance.softwareName || `(${$ts.unknown})` }} / {{ instance.softwareVersion || `(${$ts.unknown})` }}</span></template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ $ts.administrator }}</template>
-			<template #value>{{ instance.maintainerName || `(${$ts.unknown})` }} ({{ instance.maintainerEmail || `(${$ts.unknown})` }})</template>
-		</MkKeyValue>
-
-		<FormSection v-if="iAmModerator">
-			<template #label>Moderation</template>
-			<FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ $ts.stopActivityDelivery }}</FormSwitch>
-			<FormSwitch v-model="isBlocked" class="_formBlock" @update:modelValue="toggleBlock">{{ $ts.blockThisInstance }}</FormSwitch>
-			<MkButton @click="refreshMetadata">Refresh metadata</MkButton>
-		</FormSection>
-
-		<FormSection>
-			<MkKeyValue oneline style="margin: 1em 0;">
-				<template #key>{{ $ts.registeredAt }}</template>
-				<template #value><MkTime mode="detail" :time="instance.caughtAt"/></template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0;">
-				<template #key>{{ $ts.updatedAt }}</template>
-				<template #value><MkTime mode="detail" :time="instance.infoUpdatedAt"/></template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0;">
-				<template #key>{{ $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>{{ $ts.latestStatus }}</template>
-				<template #value>{{ instance.latestStatus ? instance.latestStatus : 'N/A' }}</template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0;">
-				<template #key>{{ $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>Open Registrations</template>
-				<template #value>{{ instance.openRegistrations ? $ts.yes : $ts.no }}</template>
-			</MkKeyValue>
-		</FormSection>
-
-		<FormSection>
-			<template #label>{{ $ts.statistics }}</template>
-			<div class="cmhjzshl">
-				<div class="selects">
-					<MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
-						<option value="instance-requests">{{ $ts._instanceCharts.requests }}</option>
-						<option value="instance-users">{{ $ts._instanceCharts.users }}</option>
-						<option value="instance-users-total">{{ $ts._instanceCharts.usersTotal }}</option>
-						<option value="instance-notes">{{ $ts._instanceCharts.notes }}</option>
-						<option value="instance-notes-total">{{ $ts._instanceCharts.notesTotal }}</option>
-						<option value="instance-ff">{{ $ts._instanceCharts.ff }}</option>
-						<option value="instance-ff-total">{{ $ts._instanceCharts.ffTotal }}</option>
-						<option value="instance-drive-usage">{{ $ts._instanceCharts.cacheSize }}</option>
-						<option value="instance-drive-usage-total">{{ $ts._instanceCharts.cacheSizeTotal }}</option>
-						<option value="instance-drive-files">{{ $ts._instanceCharts.files }}</option>
-						<option value="instance-drive-files-total">{{ $ts._instanceCharts.filesTotal }}</option>
-					</MkSelect>
-					<MkSelect v-model="chartSpan" style="margin: 0;">
-						<option value="hour">{{ $ts.perHour }}</option>
-						<option value="day">{{ $ts.perDay }}</option>
-					</MkSelect>
-				</div>
-				<div class="chart">
-					<MkChart :src="chartSrc" :span="chartSpan" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
-				</div>
+	<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
+		<div v-if="instance" class="_formRoot">
+			<div class="fnfelxur">
+				<img :src="instance.iconUrl || instance.faviconUrl" alt="" class="icon"/>
 			</div>
-		</FormSection>
+			<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>Name</template>
+				<template #value>{{ instance.name || `(${$ts.unknown})` }}</template>
+			</MkKeyValue>
+			<MkKeyValue>
+				<template #key>{{ $ts.description }}</template>
+				<template #value>{{ instance.description }}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0;">
+				<template #key>{{ $ts.software }}</template>
+				<template #value><span class="_monospace">{{ instance.softwareName || `(${$ts.unknown})` }} / {{ instance.softwareVersion || `(${$ts.unknown})` }}</span></template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0;">
+				<template #key>{{ $ts.administrator }}</template>
+				<template #value>{{ instance.maintainerName || `(${$ts.unknown})` }} ({{ instance.maintainerEmail || `(${$ts.unknown})` }})</template>
+			</MkKeyValue>
 
-		<MkObjectView tall :value="instance">
-		</MkObjectView>
+			<FormSection v-if="iAmModerator">
+				<template #label>Moderation</template>
+				<FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ $ts.stopActivityDelivery }}</FormSwitch>
+				<FormSwitch v-model="isBlocked" class="_formBlock" @update:modelValue="toggleBlock">{{ $ts.blockThisInstance }}</FormSwitch>
+				<MkButton @click="refreshMetadata">Refresh metadata</MkButton>
+			</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>
-</MkSpacer></MkStickyContainer>
+			<FormSection>
+				<MkKeyValue oneline style="margin: 1em 0;">
+					<template #key>{{ $ts.registeredAt }}</template>
+					<template #value><MkTime mode="detail" :time="instance.caughtAt"/></template>
+				</MkKeyValue>
+				<MkKeyValue oneline style="margin: 1em 0;">
+					<template #key>{{ $ts.updatedAt }}</template>
+					<template #value><MkTime mode="detail" :time="instance.infoUpdatedAt"/></template>
+				</MkKeyValue>
+				<MkKeyValue oneline style="margin: 1em 0;">
+					<template #key>{{ $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>{{ $ts.latestStatus }}</template>
+					<template #value>{{ instance.latestStatus ? instance.latestStatus : 'N/A' }}</template>
+				</MkKeyValue>
+				<MkKeyValue oneline style="margin: 1em 0;">
+					<template #key>{{ $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>Open Registrations</template>
+					<template #value>{{ instance.openRegistrations ? $ts.yes : $ts.no }}</template>
+				</MkKeyValue>
+			</FormSection>
+
+			<FormSection>
+				<template #label>{{ $ts.statistics }}</template>
+				<div class="cmhjzshl">
+					<div class="selects">
+						<MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
+							<option value="instance-requests">{{ $ts._instanceCharts.requests }}</option>
+							<option value="instance-users">{{ $ts._instanceCharts.users }}</option>
+							<option value="instance-users-total">{{ $ts._instanceCharts.usersTotal }}</option>
+							<option value="instance-notes">{{ $ts._instanceCharts.notes }}</option>
+							<option value="instance-notes-total">{{ $ts._instanceCharts.notesTotal }}</option>
+							<option value="instance-ff">{{ $ts._instanceCharts.ff }}</option>
+							<option value="instance-ff-total">{{ $ts._instanceCharts.ffTotal }}</option>
+							<option value="instance-drive-usage">{{ $ts._instanceCharts.cacheSize }}</option>
+							<option value="instance-drive-usage-total">{{ $ts._instanceCharts.cacheSizeTotal }}</option>
+							<option value="instance-drive-files">{{ $ts._instanceCharts.files }}</option>
+							<option value="instance-drive-files-total">{{ $ts._instanceCharts.filesTotal }}</option>
+						</MkSelect>
+						<MkSelect v-model="chartSpan" style="margin: 0;">
+							<option value="hour">{{ $ts.perHour }}</option>
+							<option value="day">{{ $ts.perDay }}</option>
+						</MkSelect>
+					</div>
+					<div class="chart">
+						<MkChart :src="chartSrc" :span="chartSpan" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
+					</div>
+				</div>
+			</FormSection>
+
+			<MkObjectView tall :value="instance">
+			</MkObjectView>
+
+			<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>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -169,7 +171,13 @@ function refreshMetadata() {
 
 fetch();
 
-const headerActions = $computed(() => []);
+const headerActions = $computed(() => [{
+	text: `https://${props.host}`,
+	icon: 'fas fa-external-link-alt',
+	handler: () => {
+		window.open(`https://${props.host}`, '_blank');
+	},
+}]);
 
 const headerTabs = $computed(() => []);
 
@@ -177,13 +185,6 @@ definePageMetadata({
 	title: props.host,
 	icon: 'fas fa-info-circle',
 	bg: 'var(--bg)',
-	actions: [{
-		text: `https://${props.host}`,
-		icon: 'fas fa-external-link-alt',
-		handler: () => {
-			window.open(`https://${props.host}`, '_blank');
-		},
-	}],
 });
 </script>
 
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
index 97c278e5e..1061e19dc 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -1,82 +1,84 @@
-<template><MkStickyContainer>
+<template>
+<MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-		<MkSpacer :content-max="700">
-	<div class="jqqmcavi">
-		<MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="fas fa-external-link-square-alt"></i> {{ $ts._pages.viewPage }}</MkButton>
-		<MkButton v-if="!readonly" inline primary class="button" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
-		<MkButton v-if="pageId" inline class="button" @click="duplicate"><i class="fas fa-copy"></i> {{ $ts.duplicate }}</MkButton>
-		<MkButton v-if="pageId && !readonly" inline class="button" danger @click="del"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
-	</div>
+	<MkSpacer :content-max="700">
+		<div class="jqqmcavi">
+			<MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="fas fa-external-link-square-alt"></i> {{ $ts._pages.viewPage }}</MkButton>
+			<MkButton v-if="!readonly" inline primary class="button" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+			<MkButton v-if="pageId" inline class="button" @click="duplicate"><i class="fas fa-copy"></i> {{ $ts.duplicate }}</MkButton>
+			<MkButton v-if="pageId && !readonly" inline class="button" danger @click="del"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
+		</div>
 
-	<div v-if="tab === 'settings'">
-		<div class="_formRoot">
-			<MkInput v-model="title" class="_formBlock">
-				<template #label>{{ $ts._pages.title }}</template>
-			</MkInput>
+		<div v-if="tab === 'settings'">
+			<div class="_formRoot">
+				<MkInput v-model="title" class="_formBlock">
+					<template #label>{{ $ts._pages.title }}</template>
+				</MkInput>
 
-			<MkInput v-model="summary" class="_formBlock">
-				<template #label>{{ $ts._pages.summary }}</template>
-			</MkInput>
+				<MkInput v-model="summary" class="_formBlock">
+					<template #label>{{ $ts._pages.summary }}</template>
+				</MkInput>
 
-			<MkInput v-model="name" class="_formBlock">
-				<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
-				<template #label>{{ $ts._pages.url }}</template>
-			</MkInput>
+				<MkInput v-model="name" class="_formBlock">
+					<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
+					<template #label>{{ $ts._pages.url }}</template>
+				</MkInput>
 
-			<MkSwitch v-model="alignCenter" class="_formBlock">{{ $ts._pages.alignCenter }}</MkSwitch>
+				<MkSwitch v-model="alignCenter" class="_formBlock">{{ $ts._pages.alignCenter }}</MkSwitch>
 
-			<MkSelect v-model="font" class="_formBlock">
-				<template #label>{{ $ts._pages.font }}</template>
-				<option value="serif">{{ $ts._pages.fontSerif }}</option>
-				<option value="sans-serif">{{ $ts._pages.fontSansSerif }}</option>
-			</MkSelect>
+				<MkSelect v-model="font" class="_formBlock">
+					<template #label>{{ $ts._pages.font }}</template>
+					<option value="serif">{{ $ts._pages.fontSerif }}</option>
+					<option value="sans-serif">{{ $ts._pages.fontSansSerif }}</option>
+				</MkSelect>
 
-			<MkSwitch v-model="hideTitleWhenPinned" class="_formBlock">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch>
+				<MkSwitch v-model="hideTitleWhenPinned" class="_formBlock">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch>
 
-			<div class="eyeCatch">
-				<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="fas fa-plus"></i> {{ $ts._pages.eyeCatchingImageSet }}</MkButton>
-				<div v-else-if="eyeCatchingImage">
-					<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name" style="max-width: 100%;"/>
-					<MkButton v-if="!readonly" @click="removeEyeCatchingImage()"><i class="fas fa-trash-alt"></i> {{ $ts._pages.eyeCatchingImageRemove }}</MkButton>
+				<div class="eyeCatch">
+					<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="fas fa-plus"></i> {{ $ts._pages.eyeCatchingImageSet }}</MkButton>
+					<div v-else-if="eyeCatchingImage">
+						<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name" style="max-width: 100%;"/>
+						<MkButton v-if="!readonly" @click="removeEyeCatchingImage()"><i class="fas fa-trash-alt"></i> {{ $ts._pages.eyeCatchingImageRemove }}</MkButton>
+					</div>
 				</div>
 			</div>
 		</div>
-	</div>
 
-	<div v-else-if="tab === 'contents'">
-		<div>
-			<XBlocks v-model="content" class="content" :hpml="hpml"/>
+		<div v-else-if="tab === 'contents'">
+			<div>
+				<XBlocks v-model="content" class="content" :hpml="hpml"/>
 
-			<MkButton v-if="!readonly" @click="add()"><i class="fas fa-plus"></i></MkButton>
+				<MkButton v-if="!readonly" @click="add()"><i class="fas fa-plus"></i></MkButton>
+			</div>
 		</div>
-	</div>
 
-	<div v-else-if="tab === 'variables'">
-		<div class="qmuvgica">
-			<XDraggable v-show="variables.length > 0" v-model="variables" tag="div" class="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
-				<template #item="{element}">
-					<XVariable
-						:model-value="element"
-						:removable="true"
-						:hpml="hpml"
-						:name="element.name"
-						:title="element.name"
-						:draggable="true"
-						@remove="() => removeVariable(element)"
-					/>
-				</template>
-			</XDraggable>
+		<div v-else-if="tab === 'variables'">
+			<div class="qmuvgica">
+				<XDraggable v-show="variables.length > 0" v-model="variables" tag="div" class="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
+					<template #item="{element}">
+						<XVariable
+							:model-value="element"
+							:removable="true"
+							:hpml="hpml"
+							:name="element.name"
+							:title="element.name"
+							:draggable="true"
+							@remove="() => removeVariable(element)"
+						/>
+					</template>
+				</XDraggable>
 
-			<MkButton v-if="!readonly" class="add" @click="addVariable()"><i class="fas fa-plus"></i></MkButton>
+				<MkButton v-if="!readonly" class="add" @click="addVariable()"><i class="fas fa-plus"></i></MkButton>
+			</div>
 		</div>
-	</div>
 
-	<div v-else-if="tab === 'script'">
-		<div>
-			<MkTextarea v-model="script" class="_code"/>
+		<div v-else-if="tab === 'script'">
+			<div>
+				<MkTextarea v-model="script" class="_code"/>
+			</div>
 		</div>
-	</div>
-</MkSpacer></MkStickyContainer>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -408,7 +410,27 @@ init();
 
 const headerActions = $computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = $computed(() => [{
+	active: tab === 'settings',
+	title: i18n.ts._pages.pageSetting,
+	icon: 'fas fa-cog',
+	onClick: () => { tab = 'settings'; },
+}, {
+	active: tab === 'contents',
+	title: i18n.ts._pages.contents,
+	icon: 'fas fa-sticky-note',
+	onClick: () => { tab = 'contents'; },
+}, {
+	active: tab === 'variables',
+	title: i18n.ts._pages.variables,
+	icon: 'fas fa-magic',
+	onClick: () => { tab = 'variables'; },
+}, {
+	active: tab === 'script',
+	title: i18n.ts.script,
+	icon: 'fas fa-code',
+	onClick: () => { tab = 'script'; },
+}]);
 
 definePageMetadata(computed(() => {
 	let title = i18n.ts._pages.newPage;
@@ -422,27 +444,6 @@ definePageMetadata(computed(() => {
 		title: title,
 		icon: 'fas fa-pencil-alt',
 		bg: 'var(--bg)',
-		tabs: [{
-			active: tab === 'settings',
-			title: i18n.ts._pages.pageSetting,
-			icon: 'fas fa-cog',
-			onClick: () => { tab = 'settings'; },
-		}, {
-			active: tab === 'contents',
-			title: i18n.ts._pages.contents,
-			icon: 'fas fa-sticky-note',
-			onClick: () => { tab = 'contents'; },
-		}, {
-			active: tab === 'variables',
-			title: i18n.ts._pages.variables,
-			icon: 'fas fa-magic',
-			onClick: () => { tab = 'variables'; },
-		}, {
-			active: tab === 'script',
-			title: i18n.ts.script,
-			icon: 'fas fa-code',
-			onClick: () => { tab = 'script'; },
-		}],
 	};
 }));
 </script>