tweak client

Fix #8856

4 files changed, 119 insertions, 116 deletions

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>
-				<div class="user">
-					<MkAvatar :user="page.user" class="avatar"/>
-					<div class="name">
-						<MkUserName :user="page.user" style="display: block;"/>
-						<MkAcct :user="page.user"/>
+					<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>
-					<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>