tweak client

Fix #8856

packages/client/src/components/abuse-report.vue

@@ -1,13 +1,19 @@
 <template>
-<div class="bcekxzvu _card _gap">
+<div class="bcekxzvu _gap _panel">
-	<div class="_content target">
+	<div class="target">
-		<MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true"/>
+		<MkA v-user-preview="report.targetUserId" class="info" :to="`/user-info/${report.targetUserId}`" :behavior="'window'">
-		<MkA v-user-preview="report.targetUserId" class="info" :to="userPage(report.targetUser)">
+			<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;"/>
-		</MkA>
 			</div>
-	<div class="_content">
+		</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="detail">
 		<div>
 			<Mfm :text="report.comment"/>
 		</div>
@@ -18,8 +24,7 @@
 			<MkAcct :user="report.assignee"/>
 		</div>
 		<div><MkTime :time="report.createdAt"/></div>
-	</div>
+		<div class="action">
-	<div class="_footer">
 			<MkSwitch v-model="forward" :disabled="report.targetUser.host == null || report.resolved">
 				{{ $ts.forwardReport }}
 				<template #caption>{{ $ts.forwardReportIsAnonymous }}</template>
@@ -27,68 +32,62 @@
 			<MkButton v-if="!report.resolved" primary @click="resolve">{{ $ts.abuseMarkAsResolved }}</MkButton>
 		</div>
 	</div>
+</div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
-
 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({
+const props = defineProps<{
-	components: {
+	report: any;
-		MkButton,
+}>();
-		MkSwitch,
-	},
 
-	props: {
+const emit = defineEmits<{
-		report: {
+	(ev: 'resolved', reportId: string): void;
-			type: Object,
+}>();
-			required: true,
-		}
-	},
 
-	emits: ['resolved'],
+let forward = $ref(props.report.forwarded);
 
-	data() {
+function resolve() {
-		return {
-			forward: this.report.forwarded,
-		};
-	},
-
-	methods: {
-		acct,
-		userPage,
-
-		resolve() {
 	os.apiWithDialog('admin/resolve-abuse-user-report', {
-				forward: this.forward,
+		forward: forward,
-				reportId: this.report.id,
+		reportId: props.report.id,
 	}).then(() => {
-				this.$emit('resolved', this.report.id);
+		emit('resolved', props.report.id);
 	});
 }
-	}
-});
 </script>
 
 <style lang="scss" scoped>
 .bcekxzvu {
-	> .target {
 	display: flex;
-		width: 100%;
+
+	> .target {
+		width: 35%;
 		box-sizing: border-box;
 		text-align: left;
+		padding: 24px;
+		border-right: solid 1px var(--divider);
+
+		> .info {
+			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;
 
 			> .avatar {
 				width: 42px;
 				height: 42px;
 			}
 
-		> .info {
+			> .names {
 				margin-left: 0.3em;
 				padding: 0 8px;
 				flex: 1;
@@ -99,4 +98,10 @@ export default defineComponent({
 			}
 		}
 	}
+
+	> .detail {
+		flex: 1;
+		padding: 24px;
+	}
+}
 </style>

packages/client/src/nirax.ts

@@ -107,13 +107,18 @@ 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].substring(p.startsWith.length));
+							parts.shift();
+						} else {
 							props.set(p.name, parts[0]);
 							parts.shift();
 						}
 					}
 				}
+			}
 
 			if (parts.length !== 0) continue forEachRouteLoop;
 

packages/client/src/pages/page-editor/page-editor.vue

@@ -151,21 +151,21 @@ watch($$(eyeCatchingImageId), async () => {
 
 function getSaveOptions() {
 	return {
-		title: tatitle.trim(),
+		title: title.trim(),
-		name: taname.trim(),
+		name: name.trim(),
-		summary: tasummary,
+		summary: summary,
-		font: tafont,
+		font: font,
-		script: tascript,
+		script: script,
-		hideTitleWhenPinned: tahideTitleWhenPinned,
+		hideTitleWhenPinned: hideTitleWhenPinned,
-		alignCenter: taalignCenter,
+		alignCenter: alignCenter,
-		content: tacontent,
+		content: content,
-		variables: tavariables,
+		variables: variables,
-		eyeCatchingImageId: taeyeCatchingImageId,
+		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) {
+	if (pageId) {
-		options.pageId = tapageId;
+		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;
+			pageId = created.id;
-			tacurrentName = name.trim();
+			currentName = name.trim();
 			os.alert({
 				type: 'success',
 				text: i18n.ts._pages.created,
@@ -227,11 +227,11 @@ function del() {
 }
 
 function duplicate() {
-	tatitle = tatitle + ' - copy';
+	title = title + ' - copy';
-	taname = taname + '-copy';
+	name = name + '-copy';
-	os.api('pages/create', tagetSaveOptions()).then(created => {
+	os.api('pages/create', getSaveOptions()).then(created => {
-		tapageId = created.id;
+		pageId = created.id;
-		tacurrentName = taname.trim();
+		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) {

packages/client/src/pages/page.vue

@@ -1,4 +1,5 @@
-<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">
@@ -54,10 +55,11 @@
 					</MkPagination>
 				</MkContainer>
 			</div>
-		<MkError v-else-if="error" @retry="fetch()"/>
+			<MkError v-else-if="error" @retry="fetchPage()"/>
 			<MkLoading v-else/>
 		</transition>
-</MkSpacer></MkStickyContainer>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>

packages/client/src/pages/timeline.vue

@@ -109,23 +109,7 @@ function focus(): void {
 	tlComponent.focus();
 }
 
-const headerActions = $computed(() => [{
+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 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,

packages/client/src/pages/user-list-timeline.vue

@@ -1,5 +1,7 @@
 <template>
-<div ref="rootEl" v-hotkey.global="keymap" v-size="{ min: [800] }" class="eqqrhokj">
+<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
@@ -12,6 +14,7 @@
 			/>
 		</div>
 	</div>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -61,15 +64,7 @@ async function timetravel() {
 	tlEl.timetravel(date);
 }
 
-const headerActions = $computed(() => []);
+const headerActions = $computed(() => list ? [{
-
-const headerTabs = $computed(() => []);
-
-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,
@@ -77,7 +72,14 @@ definePageMetadata(computed(() => list ? {
 	icon: 'fas fa-cog',
 	text: i18n.ts.settings,
 	handler: settings,
-	}],
+}] : []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => list ? {
+	title: list.name,
+	icon: 'fas fa-list-ul',
+	bg: 'var(--bg)',
 } : null));
 </script>