From aead731e6322ad6eb215b8df72bec587e1db4bad Mon Sep 17 00:00:00 2001
From: freeplay <freeplay@duck.com>
Date: Sat, 1 Jul 2023 21:35:05 -0400
Subject: [PATCH] fix/refactor: move new posts button to MkTimeline

---
 packages/client/src/components/MkTimeline.vue |  89 +++++++++++++++-
 .../client/src/pages/antenna-timeline.vue     |  32 +-----
 packages/client/src/pages/timeline.vue        | 100 +-----------------
 .../client/src/pages/user-list-timeline.vue   |  31 ------
 4 files changed, 89 insertions(+), 163 deletions(-)

diff --git a/packages/client/src/components/MkTimeline.vue b/packages/client/src/components/MkTimeline.vue
index c3366c17ac..f126581d6c 100644
--- a/packages/client/src/components/MkTimeline.vue
+++ b/packages/client/src/components/MkTimeline.vue
@@ -9,16 +9,26 @@
 			<template #icon></template>
 		</I18n>
 	</MkInfo>
+	<div v-if="queue > 0" class="new">
+		<button
+			class="_buttonPrimary _shadow"
+			@click="scrollTop"
+			:class="{ instant: !$store.state.animation }"
+		>
+			{{ i18n.ts.newNoteRecived }}
+			<i class="ph-arrow-up ph-bold"></i>
+		</button>
+	</div>
 	<XNotes
 		ref="tlComponent"
 		:no-gap="!$store.state.showGapBetweenNotesInTimeline"
 		:pagination="pagination"
-		@queue="emit('queue', $event)"
+		@queue="(x) => queue = x"
 	/>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, provide, onUnmounted } from "vue";
+import { ref, watch, computed, provide, onUnmounted } from "vue";
 import XNotes from "@/components/MkNotes.vue";
 import MkInfo from "@/components/MkInfo.vue";
 import * as os from "@/os";
@@ -27,6 +37,7 @@ import * as sound from "@/scripts/sound";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
+import { scroll } from "@/scripts/scroll";
 
 const props = defineProps<{
 	src: string;
@@ -36,6 +47,8 @@ const props = defineProps<{
 	sound?: boolean;
 }>();
 
+let queue = $ref(0);
+
 const emit = defineEmits<{
 	(ev: "note"): void;
 	(ev: "queue", count: number): void;
@@ -210,6 +223,9 @@ function closeHint() {
 			break;
 	}
 }
+function scrollTop() {
+	scroll(tlComponent, { top: 0, behavior: 'smooth' })
+}
 
 const pagination = {
 	endpoint: endpoint,
@@ -229,3 +245,72 @@ const timetravel = (date?: Date) => {
 };
 */
 </script>
+<style lang="scss" scoped>
+@keyframes slideUp {
+	to {
+		transform: translateY(-100%);
+		opacity: 0;
+	}
+}
+.new {
+	position: sticky;
+	display: flex;
+	justify-content: center;
+	top: calc(var(--stickyTop, 0px) - 60px);
+	width: 600px;
+	max-width: 100%;
+	height: 60px;
+	pointer-events: none;
+	margin: auto;
+	margin-top: -60px;
+	z-index: 1001;
+	box-shadow: 0 24px 24px -20px var(--accentedBg);
+	&::after {
+		content: "";
+		position: absolute;
+		inset: -2px 0;
+		border: 2px solid var(--accentDarken);
+		mask: linear-gradient(
+			to right,
+			transparent,
+			black 40% 60%,
+			transparent
+		);
+		-webkit-mask: linear-gradient(
+			to right,
+			transparent,
+			black 40% 60%,
+			transparent
+		);
+	}
+	> button {
+		display: flex;
+		position: absolute;
+		top: 120%;
+		margin-inline: auto;
+		border-radius: 2em;
+		padding: 0.5em 1.2em;
+		background: var(--accentedBg);
+		border: 0;
+		color: var(--accent);
+		overflow: hidden;
+		pointer-events: all;
+		transform: translateY(-100%);
+		opacity: 0;
+		animation: reset 0.4s forwards cubic-bezier(0, 0.4, 0, 1.1),
+			slideUp 1s 5s forwards cubic-bezier(1, 0, 1, 1);
+		&::before {
+			content: "";
+			position: absolute;
+			inset: 0;
+			background: var(--bg);
+			z-index: -1;
+		}
+		i {
+			margin-left: 0.7em;
+			border-left: 1px solid var(--accentedBg);
+			padding-left: 0.4em;
+		}
+	}
+}
+</style>
diff --git a/packages/client/src/pages/antenna-timeline.vue b/packages/client/src/pages/antenna-timeline.vue
index 2100be8bff..fbee993d32 100644
--- a/packages/client/src/pages/antenna-timeline.vue
+++ b/packages/client/src/pages/antenna-timeline.vue
@@ -9,11 +9,6 @@
 			v-size="{ min: [800] }"
 			class="tqmomfks"
 		>
-			<div v-if="queue > 0" class="new">
-				<button class="_buttonPrimary" @click="top()">
-					{{ i18n.ts.newNoteRecived }}
-				</button>
-			</div>
 			<div class="tl _block">
 				<XTimeline
 					ref="tlEl"
@@ -22,7 +17,6 @@
 					src="antenna"
 					:antenna="antennaId"
 					:sound="true"
-					@queue="queueUpdated"
 				/>
 			</div>
 		</div>
@@ -32,7 +26,6 @@
 <script lang="ts" setup>
 import { computed, inject, watch } from "vue";
 import XTimeline from "@/components/MkTimeline.vue";
-import { scroll } from "@/scripts/scroll";
 import * as os from "@/os";
 import { useRouter } from "@/router";
 import { definePageMetadata } from "@/scripts/page-metadata";
@@ -45,21 +38,12 @@ const props = defineProps<{
 }>();
 
 let antenna = $ref(null);
-let queue = $ref(0);
 let rootEl = $ref<HTMLElement>();
 let tlEl = $ref<InstanceType<typeof XTimeline>>();
 const keymap = $computed(() => ({
 	t: focus,
 }));
 
-function queueUpdated(q) {
-	queue = q;
-}
-
-function top() {
-	scroll(rootEl, { top: 0 });
-}
-
 async function timetravel() {
 	const { canceled, result: date } = await os.inputDate({
 		title: i18n.ts.date,
@@ -142,21 +126,7 @@ definePageMetadata(
 <style lang="scss" scoped>
 .tqmomfks {
 	padding: var(--margin);
-
-	> .new {
-		position: sticky;
-		top: calc(var(--stickyTop, 0px) + 16px);
-		z-index: 1000;
-		width: 100%;
-
-		> button {
-			display: block;
-			margin: var(--margin) auto 0 auto;
-			padding: 8px 16px;
-			border-radius: 32px;
-		}
-	}
-
+	
 	> .tl {
 		background: none;
 		border-radius: var(--radius);
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index c786f016bb..479d836eb1 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -15,17 +15,6 @@
 					class="post-form _block"
 					fixed
 				/>
-
-				<div v-if="queue > 0" class="new">
-					<button
-						class="_buttonPrimary _shadow"
-						@click="top()"
-						:class="{ instant: !$store.state.animation }"
-					>
-						{{ i18n.ts.newNoteRecived }}
-						<i class="ph-arrow-up ph-bold"></i>
-					</button>
-				</div>
 				<!-- <div v-if="!isMobile" class="tl _block">
 				<XTimeline
 					ref="tl"
@@ -65,7 +54,6 @@
 								class="tl"
 								:src="src"
 								:sound="true"
-								@queue="queueUpdated"
 							/>
 						</swiper-slide>
 					</swiper>
@@ -76,13 +64,12 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, ref, onMounted } from "vue";
+import { computed, ref, onMounted } from "vue";
 import { Virtual } from "swiper";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import XTutorial from "@/components/MkTutorialDialog.vue";
 import XTimeline from "@/components/MkTimeline.vue";
 import XPostForm from "@/components/MkPostForm.vue";
-import { scroll } from "@/scripts/scroll";
 import * as os from "@/os";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
@@ -137,7 +124,6 @@ window.addEventListener("resize", () => {
 const tlComponent = $ref<InstanceType<typeof XTimeline>>();
 const rootEl = $ref<HTMLElement>();
 
-let queue = $ref(0);
 const src = $computed({
 	get: () => defaultStore.reactiveState.tl.value.src,
 	set: (x) => {
@@ -146,16 +132,6 @@ const src = $computed({
 	},
 });
 
-watch($$(src), () => (queue = 0));
-
-function queueUpdated(q: number): void {
-	queue = q;
-}
-
-function top(): void {
-	scroll(rootEl, { top: 0 });
-}
-
 const lists = os.api("users/lists/list");
 async function chooseList(ev: MouseEvent) {
 	await lists.then((res) => {
@@ -332,84 +308,10 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-@keyframes slideUp {
-	to {
-		transform: translateY(-100%);
-		opacity: 0;
-	}
-}
 .cmuxhskf {
 	--swiper-theme-color: var(--accent);
-
-	> .new {
-		position: sticky;
-		display: flex;
-		justify-content: center;
-		top: calc(var(--stickyTop, 0px) - 60px);
-		width: 600px;
-		max-width: 100%;
-		height: 60px;
-		pointer-events: none;
-		margin: auto;
-		margin-bottom: -60px;
-		z-index: 1001;
-		box-shadow: 0 24px 24px -20px var(--accentedBg);
-		&::after {
-			content: "";
-			position: absolute;
-			inset: 0;
-			border: 2px solid var(--accentDarken);
-			mask: linear-gradient(
-				to right,
-				transparent,
-				black 40% 60%,
-				transparent
-			);
-			-webkit-mask: linear-gradient(
-				to right,
-				transparent,
-				black 40% 60%,
-				transparent
-			);
-		}
-		> button {
-			display: flex;
-			position: absolute;
-			top: 120%;
-			margin-inline: auto;
-			border-radius: 2em;
-			padding: 0.5em 1.2em;
-			background: var(--accentedBg);
-			border: 0;
-			color: var(--accent);
-			overflow: hidden;
-			pointer-events: all;
-			transform: translateY(-100%);
-			opacity: 0;
-			animation: reset 0.4s forwards cubic-bezier(0, 0.4, 0, 1.1),
-				slideUp 1s 5s forwards cubic-bezier(1, 0, 1, 1);
-			&::before {
-				content: "";
-				position: absolute;
-				inset: 0;
-				background: var(--bg);
-				z-index: -1;
-			}
-			i {
-				margin-left: 0.7em;
-				border-left: 1px solid var(--accentedBg);
-				padding-left: 0.4em;
-			}
-		}
-	}
-
-	> .post-form {
-		border-radius: var(--radius);
-	}
-
 	> .tl {
 		background: none;
-		border-radius: var(--radius);
 	}
 }
 </style>
diff --git a/packages/client/src/pages/user-list-timeline.vue b/packages/client/src/pages/user-list-timeline.vue
index 7b33e8c282..839b1a6afa 100644
--- a/packages/client/src/pages/user-list-timeline.vue
+++ b/packages/client/src/pages/user-list-timeline.vue
@@ -4,11 +4,6 @@
 			><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()">
-					{{ i18n.ts.newNoteRecived }}
-				</button>
-			</div>
 			<div class="tl _block">
 				<XTimeline
 					ref="tlEl"
@@ -17,7 +12,6 @@
 					src="list"
 					:list="listId"
 					:sound="true"
-					@queue="queueUpdated"
 				/>
 			</div>
 		</div>
@@ -27,7 +21,6 @@
 <script lang="ts" setup>
 import { computed, watch, inject } from "vue";
 import XTimeline from "@/components/MkTimeline.vue";
-import { scroll } from "@/scripts/scroll";
 import * as os from "@/os";
 import { useRouter } from "@/router";
 import { definePageMetadata } from "@/scripts/page-metadata";
@@ -40,7 +33,6 @@ const props = defineProps<{
 }>();
 
 let list = $ref(null);
-let queue = $ref(0);
 let tlEl = $ref<InstanceType<typeof XTimeline>>();
 let rootEl = $ref<HTMLElement>();
 
@@ -54,14 +46,6 @@ watch(
 	{ immediate: true }
 );
 
-function queueUpdated(q) {
-	queue = q;
-}
-
-function top() {
-	scroll(rootEl, { top: 0 });
-}
-
 function settings() {
 	router.push(`/my/lists/${props.listId}`);
 }
@@ -109,21 +93,6 @@ definePageMetadata(
 <style lang="scss" scoped>
 .eqqrhokj {
 	padding: var(--margin);
-
-	> .new {
-		position: sticky;
-		top: calc(var(--stickyTop, 0px) + 16px);
-		z-index: 1000;
-		width: 100%;
-
-		> button {
-			display: block;
-			margin: var(--margin) auto 0 auto;
-			padding: 8px 16px;
-			border-radius: 32px;
-		}
-	}
-
 	> .tl {
 		background: none;
 		border-radius: var(--radius);