From ce6cc21bcd5db7d8b454f91f5db884da71c4536f Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 21 Jun 2022 14:12:39 +0900
Subject: [PATCH] tweak client

Fix #8856
---
 .../client/src/components/abuse-report.vue    | 129 +++++++++---------
 packages/client/src/nirax.ts                  |  11 +-
 .../src/pages/page-editor/page-editor.vue     |  54 ++++----
 packages/client/src/pages/page.vue            | 102 +++++++-------
 packages/client/src/pages/timeline.vue        |  35 +++--
 .../client/src/pages/user-list-timeline.vue   |  46 ++++---
 6 files changed, 195 insertions(+), 182 deletions(-)

diff --git a/packages/client/src/components/abuse-report.vue b/packages/client/src/components/abuse-report.vue
index a947406f88..86eccd6276 100644
--- a/packages/client/src/components/abuse-report.vue
+++ b/packages/client/src/components/abuse-report.vue
@@ -1,13 +1,19 @@
 <template>
-<div class="bcekxzvu _card _gap">
-	<div class="_content target">
-		<MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true"/>
-		<MkA v-user-preview="report.targetUserId" class="info" :to="userPage(report.targetUser)">
-			<MkUserName class="name" :user="report.targetUser"/>
-			<MkAcct class="acct" :user="report.targetUser" style="display: block;"/>
+<div class="bcekxzvu _gap _panel">
+	<div class="target">
+		<MkA v-user-preview="report.targetUserId" class="info" :to="`/user-info/${report.targetUserId}`" :behavior="'window'">
+			<MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true" :disable-link="true"/>
+			<div class="names">
+				<MkUserName class="name" :user="report.targetUser"/>
+				<MkAcct class="acct" :user="report.targetUser" style="display: block;"/>
+			</div>
 		</MkA>
+		<MkKeyValue class="_formBlock">
+			<template #key>{{ $ts.registeredDate }}</template>
+			<template #value>{{ new Date(report.targetUser.createdAt).toLocaleString() }} (<MkTime :time="report.targetUser.createdAt"/>)</template>
+		</MkKeyValue>
 	</div>
-	<div class="_content">
+	<div class="detail">
 		<div>
 			<Mfm :text="report.comment"/>
 		</div>
@@ -18,85 +24,84 @@
 			<MkAcct :user="report.assignee"/>
 		</div>
 		<div><MkTime :time="report.createdAt"/></div>
-	</div>
-	<div class="_footer">
-		<MkSwitch v-model="forward" :disabled="report.targetUser.host == null || report.resolved">
-			{{ $ts.forwardReport }}
-			<template #caption>{{ $ts.forwardReportIsAnonymous }}</template>
-		</MkSwitch>
-		<MkButton v-if="!report.resolved" primary @click="resolve">{{ $ts.abuseMarkAsResolved }}</MkButton>
+		<div class="action">
+			<MkSwitch v-model="forward" :disabled="report.targetUser.host == null || report.resolved">
+				{{ $ts.forwardReport }}
+				<template #caption>{{ $ts.forwardReportIsAnonymous }}</template>
+			</MkSwitch>
+			<MkButton v-if="!report.resolved" primary @click="resolve">{{ $ts.abuseMarkAsResolved }}</MkButton>
+		</div>
 	</div>
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
+<script lang="ts" setup>
 import MkButton from '@/components/ui/button.vue';
 import MkSwitch from '@/components/form/switch.vue';
+import MkKeyValue from '@/components/key-value.vue';
 import { acct, userPage } from '@/filters/user';
 import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		MkButton,
-		MkSwitch,
-	},
+const props = defineProps<{
+	report: any;
+}>();
 
-	props: {
-		report: {
-			type: Object,
-			required: true,
-		}
-	},
+const emit = defineEmits<{
+	(ev: 'resolved', reportId: string): void;
+}>();
 
-	emits: ['resolved'],
+let forward = $ref(props.report.forwarded);
 
-	data() {
-		return {
-			forward: this.report.forwarded,
-		};
-	},
-
-	methods: {
-		acct,
-		userPage,
-
-		resolve() {
-			os.apiWithDialog('admin/resolve-abuse-user-report', {
-				forward: this.forward,
-				reportId: this.report.id,
-			}).then(() => {
-				this.$emit('resolved', this.report.id);
-			});
-		}
-	}
-});
+function resolve() {
+	os.apiWithDialog('admin/resolve-abuse-user-report', {
+		forward: forward,
+		reportId: props.report.id,
+	}).then(() => {
+		emit('resolved', props.report.id);
+	});
+}
 </script>
 
 <style lang="scss" scoped>
 .bcekxzvu {
+	display: flex;
+
 	> .target {
-		display: flex;
-		width: 100%;
+		width: 35%;
 		box-sizing: border-box;
 		text-align: left;
-		align-items: center;
-
-		> .avatar {
-			width: 42px;
-			height: 42px;
-		}
+		padding: 24px;
+		border-right: solid 1px var(--divider);
 
 		> .info {
-			margin-left: 0.3em;
-			padding: 0 8px;
-			flex: 1;
+			display: flex;
+			box-sizing: border-box;
+			align-items: center;
+			padding: 14px;
+			border-radius: 8px;
+			background-image: linear-gradient(45deg, rgb(255 196 0 / 15%) 16.67%, transparent 16.67%, transparent 50%, rgb(255 196 0 / 15%) 50%, rgb(255 196 0 / 15%) 66.67%, transparent 66.67%, transparent 100%);
+			background-size: 16px 16px;
 
-			> .name {
-				font-weight: bold;
+			> .avatar {
+				width: 42px;
+				height: 42px;
+			}
+
+			> .names {
+				margin-left: 0.3em;
+				padding: 0 8px;
+				flex: 1;
+
+				> .name {
+					font-weight: bold;
+				}
 			}
 		}
 	}
+
+	> .detail {
+		flex: 1;
+		padding: 24px;
+	}
 }
 </style>
diff --git a/packages/client/src/nirax.ts b/packages/client/src/nirax.ts
index 6840483c21..a0cdb03482 100644
--- a/packages/client/src/nirax.ts
+++ b/packages/client/src/nirax.ts
@@ -107,10 +107,15 @@ export class Router extends EventEmitter<{
 						}
 						break pathMatchLoop;
 					} else {
-						if (p.startsWith && (parts[0] == null || !parts[0].startsWith(p.startsWith))) continue forEachRouteLoop;
+						if (p.startsWith) {
+							if (parts[0] == null || !parts[0].startsWith(p.startsWith)) continue forEachRouteLoop;
 
-						props.set(p.name, parts[0]);
-						parts.shift();
+							props.set(p.name, parts[0].substring(p.startsWith.length));
+							parts.shift();
+						} else {
+							props.set(p.name, parts[0]);
+							parts.shift();
+						}
 					}
 				}
 			}
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
index 1061e19dce..c09d9af734 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -151,21 +151,21 @@ watch($$(eyeCatchingImageId), async () => {
 
 function getSaveOptions() {
 	return {
-		title: tatitle.trim(),
-		name: taname.trim(),
-		summary: tasummary,
-		font: tafont,
-		script: tascript,
-		hideTitleWhenPinned: tahideTitleWhenPinned,
-		alignCenter: taalignCenter,
-		content: tacontent,
-		variables: tavariables,
-		eyeCatchingImageId: taeyeCatchingImageId,
+		title: title.trim(),
+		name: name.trim(),
+		summary: summary,
+		font: font,
+		script: script,
+		hideTitleWhenPinned: hideTitleWhenPinned,
+		alignCenter: alignCenter,
+		content: content,
+		variables: variables,
+		eyeCatchingImageId: eyeCatchingImageId,
 	};
 }
 
 function save() {
-	const options = tagetSaveOptions();
+	const options = getSaveOptions();
 
 	const onError = err => {
 		if (err.id == '3d81ceae-475f-4600-b2a8-2bc116157532') {
@@ -184,11 +184,11 @@ function save() {
 		}
 	};
 
-	if (tapageId) {
-		options.pageId = tapageId;
+	if (pageId) {
+		options.pageId = pageId;
 		os.api('pages/update', options)
 		.then(page => {
-			tacurrentName = taname.trim();
+			currentName = name.trim();
 			os.alert({
 				type: 'success',
 				text: i18n.ts._pages.updated,
@@ -197,8 +197,8 @@ function save() {
 	} else {
 		os.api('pages/create', options)
 		.then(created => {
-			tapageId = created.id;
-			tacurrentName = name.trim();
+			pageId = created.id;
+			currentName = name.trim();
 			os.alert({
 				type: 'success',
 				text: i18n.ts._pages.created,
@@ -227,11 +227,11 @@ function del() {
 }
 
 function duplicate() {
-	tatitle = tatitle + ' - copy';
-	taname = taname + '-copy';
-	os.api('pages/create', tagetSaveOptions()).then(created => {
-		tapageId = created.id;
-		tacurrentName = taname.trim();
+	title = title + ' - copy';
+	name = name + '-copy';
+	os.api('pages/create', getSaveOptions()).then(created => {
+		pageId = created.id;
+		currentName = name.trim();
 		os.alert({
 			type: 'success',
 			text: i18n.ts._pages.created,
@@ -244,12 +244,12 @@ async function add() {
 	const { canceled, result: type } = await os.select({
 		type: null,
 		title: i18n.ts._pages.chooseBlock,
-		groupedItems: tagetPageBlockList(),
+		groupedItems: getPageBlockList(),
 	});
 	if (canceled) return;
 
 	const id = uuid();
-	tacontent.push({ id, type });
+	content.push({ id, type });
 }
 
 async function addVariable() {
@@ -260,7 +260,7 @@ async function addVariable() {
 
 	name = name.trim();
 
-	if (tahpml.isUsedName(name)) {
+	if (hpml.isUsedName(name)) {
 		os.alert({
 			type: 'error',
 			text: i18n.ts._pages.variableNameIsAlreadyUsed,
@@ -269,11 +269,11 @@ async function addVariable() {
 	}
 
 	const id = uuid();
-	tavariables.push({ id, name, type: null });
+	variables.push({ id, name, type: null });
 }
 
 function removeVariable(v) {
-	tavariables = tavariables.filter(x => x.name !== v.name);
+	variables = variables.filter(x => x.name !== v.name);
 }
 
 function getPageBlockList() {
@@ -352,7 +352,7 @@ function setEyeCatchingImage(e) {
 }
 
 function removeEyeCatchingImage() {
-	taeyeCatchingImageId = null;
+	eyeCatchingImageId = null;
 }
 
 function highlighter(code) {
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index 71b404bbf4..c60b7069e9 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -1,63 +1,65 @@
-<template><MkStickyContainer>
+<template>
+<MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-		<MkSpacer :content-max="700">
-	<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
-		<div v-if="page" :key="page.id" v-size="{ max: [450] }" class="xcukqgmh">
-			<div class="_block main">
-				<!--
+	<MkSpacer :content-max="700">
+		<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
+			<div v-if="page" :key="page.id" v-size="{ max: [450] }" class="xcukqgmh">
+				<div class="_block main">
+					<!--
 				<div class="header">
 					<h1>{{ page.title }}</h1>
 				</div>
 				-->
-				<div class="banner">
-					<img v-if="page.eyeCatchingImageId" :src="page.eyeCatchingImage.url"/>
-				</div>
-				<div class="content">
-					<XPage :page="page"/>
-				</div>
-				<div class="actions">
-					<div class="like">
-						<MkButton v-if="page.isLiked" v-tooltip="$ts._pages.unlike" class="button" primary @click="unlike()"><i class="fas fa-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
-						<MkButton v-else v-tooltip="$ts._pages.like" class="button" @click="like()"><i class="far fa-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
+					<div class="banner">
+						<img v-if="page.eyeCatchingImageId" :src="page.eyeCatchingImage.url"/>
 					</div>
-					<div class="other">
-						<button v-tooltip="$ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
-						<button v-tooltip="$ts.share" v-click-anime class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
+					<div class="content">
+						<XPage :page="page"/>
+					</div>
+					<div class="actions">
+						<div class="like">
+							<MkButton v-if="page.isLiked" v-tooltip="$ts._pages.unlike" class="button" primary @click="unlike()"><i class="fas fa-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
+							<MkButton v-else v-tooltip="$ts._pages.like" class="button" @click="like()"><i class="far fa-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
+						</div>
+						<div class="other">
+							<button v-tooltip="$ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
+							<button v-tooltip="$ts.share" v-click-anime class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
+						</div>
+					</div>
+					<div class="user">
+						<MkAvatar :user="page.user" class="avatar"/>
+						<div class="name">
+							<MkUserName :user="page.user" style="display: block;"/>
+							<MkAcct :user="page.user"/>
+						</div>
+						<MkFollowButton v-if="!$i || $i.id != page.user.id" :user="page.user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
+					</div>
+					<div class="links">
+						<MkA :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ $ts._pages.viewSource }}</MkA>
+						<template v-if="$i && $i.id === page.userId">
+							<MkA :to="`/pages/edit/${page.id}`" class="link">{{ $ts._pages.editThisPage }}</MkA>
+							<button v-if="$i.pinnedPageId === page.id" class="link _textButton" @click="pin(false)">{{ $ts.unpin }}</button>
+							<button v-else class="link _textButton" @click="pin(true)">{{ $ts.pin }}</button>
+						</template>
 					</div>
 				</div>
-				<div class="user">
-					<MkAvatar :user="page.user" class="avatar"/>
-					<div class="name">
-						<MkUserName :user="page.user" style="display: block;"/>
-						<MkAcct :user="page.user"/>
-					</div>
-					<MkFollowButton v-if="!$i || $i.id != page.user.id" :user="page.user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
-				</div>
-				<div class="links">
-					<MkA :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ $ts._pages.viewSource }}</MkA>
-					<template v-if="$i && $i.id === page.userId">
-						<MkA :to="`/pages/edit/${page.id}`" class="link">{{ $ts._pages.editThisPage }}</MkA>
-						<button v-if="$i.pinnedPageId === page.id" class="link _textButton" @click="pin(false)">{{ $ts.unpin }}</button>
-						<button v-else class="link _textButton" @click="pin(true)">{{ $ts.pin }}</button>
-					</template>
+				<div class="footer">
+					<div><i class="far fa-clock"></i> {{ $ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
+					<div v-if="page.createdAt != page.updatedAt"><i class="far fa-clock"></i> {{ $ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
 				</div>
+				<MkAd :prefer="['horizontal', 'horizontal-big']"/>
+				<MkContainer :max-height="300" :foldable="true" class="other">
+					<template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
+					<MkPagination v-slot="{items}" :pagination="otherPostsPagination">
+						<MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/>
+					</MkPagination>
+				</MkContainer>
 			</div>
-			<div class="footer">
-				<div><i class="far fa-clock"></i> {{ $ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
-				<div v-if="page.createdAt != page.updatedAt"><i class="far fa-clock"></i> {{ $ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
-			</div>
-			<MkAd :prefer="['horizontal', 'horizontal-big']"/>
-			<MkContainer :max-height="300" :foldable="true" class="other">
-				<template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
-				<MkPagination v-slot="{items}" :pagination="otherPostsPagination">
-					<MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/>
-				</MkPagination>
-			</MkContainer>
-		</div>
-		<MkError v-else-if="error" @retry="fetch()"/>
-		<MkLoading v-else/>
-	</transition>
-</MkSpacer></MkStickyContainer>
+			<MkError v-else-if="error" @retry="fetchPage()"/>
+			<MkLoading v-else/>
+		</transition>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index e0f0a1f151..111451632c 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -109,23 +109,7 @@ function focus(): void {
 	tlComponent.focus();
 }
 
-const headerActions = $computed(() => [{
-	icon: 'fas fa-list-ul',
-	text: i18n.ts.lists,
-	handler: chooseList,
-}, {
-	icon: 'fas fa-satellite',
-	text: i18n.ts.antennas,
-	handler: chooseAntenna,
-}, {
-	icon: 'fas fa-satellite-dish',
-	text: i18n.ts.channel,
-	handler: chooseChannel,
-}, {
-	icon: 'fas fa-calendar-alt',
-	text: i18n.ts.jumpToSpecifiedDate,
-	handler: timetravel,
-}]);
+const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => [{
 	active: src === 'home',
@@ -151,7 +135,22 @@ const headerTabs = $computed(() => [{
 	icon: 'fas fa-globe',
 	iconOnly: true,
 	onClick: () => { saveSrc('global'); },
-}] : [])]);
+}] : []), {
+	icon: 'fas fa-list-ul',
+	title: i18n.ts.lists,
+	iconOnly: true,
+	onClick: chooseList,
+}, {
+	icon: 'fas fa-satellite',
+	title: i18n.ts.antennas,
+	iconOnly: true,
+	onClick: chooseAntenna,
+}, {
+	icon: 'fas fa-satellite-dish',
+	title: i18n.ts.channel,
+	iconOnly: true,
+	onClick: chooseChannel,
+}]);
 
 definePageMetadata(computed(() => ({
 	title: i18n.ts.timeline,
diff --git a/packages/client/src/pages/user-list-timeline.vue b/packages/client/src/pages/user-list-timeline.vue
index 9783088a19..07d5a166e9 100644
--- a/packages/client/src/pages/user-list-timeline.vue
+++ b/packages/client/src/pages/user-list-timeline.vue
@@ -1,17 +1,20 @@
 <template>
-<div ref="rootEl" v-hotkey.global="keymap" v-size="{ min: [800] }" class="eqqrhokj">
-	<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
-	<div class="tl _block">
-		<XTimeline
-			ref="tlEl" :key="listId"
-			class="tl"
-			src="list"
-			:list="listId"
-			:sound="true"
-			@queue="queueUpdated"
-		/>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<div ref="rootEl" v-size="{ min: [800] }" class="eqqrhokj">
+		<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
+		<div class="tl _block">
+			<XTimeline
+				ref="tlEl" :key="listId"
+				class="tl"
+				src="list"
+				:list="listId"
+				:sound="true"
+				@queue="queueUpdated"
+			/>
+		</div>
 	</div>
-</div>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -61,7 +64,15 @@ async function timetravel() {
 	tlEl.timetravel(date);
 }
 
-const headerActions = $computed(() => []);
+const headerActions = $computed(() => list ? [{
+	icon: 'fas fa-calendar-alt',
+	text: i18n.ts.jumpToSpecifiedDate,
+	handler: timetravel,
+}, {
+	icon: 'fas fa-cog',
+	text: i18n.ts.settings,
+	handler: settings,
+}] : []);
 
 const headerTabs = $computed(() => []);
 
@@ -69,15 +80,6 @@ definePageMetadata(computed(() => list ? {
 	title: list.name,
 	icon: 'fas fa-list-ul',
 	bg: 'var(--bg)',
-	actions: [{
-		icon: 'fas fa-calendar-alt',
-		text: i18n.ts.jumpToSpecifiedDate,
-		handler: timetravel,
-	}, {
-		icon: 'fas fa-cog',
-		text: i18n.ts.settings,
-		handler: settings,
-	}],
 } : null));
 </script>