feat: save scroll positions between home timelines

packages/client/src/components/MkNotes.vue

@@ -35,13 +35,13 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, onActivated, onDeactivated, nextTick } from "vue";
 import type { Paging } from "@/components/MkPagination.vue";
 import XNote from "@/components/MkNote.vue";
 import XList from "@/components/MkDateSeparatedList.vue";
 import MkPagination from "@/components/MkPagination.vue";
 import { i18n } from "@/i18n";
-import { scroll } from "@/scripts/scroll";
+import { getScrollPosition, scroll } from "@/scripts/scroll";
 
 const tlEl = ref<HTMLElement>();
 
@@ -60,6 +60,18 @@ defineExpose({
 	pagingComponent,
 	scrollTop,
 });
+
+let scrollContainer = $ref(tlEl.value);
+let scrollPos = $ref(0);
+
+onDeactivated(() => {
+	scrollPos =  getScrollPosition( scrollContainer );
+})
+onActivated(() => {
+	nextTick(() => {
+		scroll(scrollContainer, { top: scrollPos, behavior: "instant" });
+	})
+})
 </script>
 
 <style lang="scss" scoped>

packages/client/src/components/MkTimeline.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, computed, provide, onUnmounted } from "vue";
+import { computed, provide, onUnmounted } from "vue";
 import XNotes from "@/components/MkNotes.vue";
 import MkInfo from "@/components/MkInfo.vue";
 import * as os from "@/os";

packages/client/src/components/global/MkPageHeader.vue

@@ -82,7 +82,7 @@
 						active: tab.key != null && tab.key === props.tab,
 					}"
 					@mousedown="(ev) => onTabMousedown(tab, ev)"
-					@click="(ev) => onTabClick(tab, ev)"
+					@click.stop="(ev) => onTabClick(tab, ev)"
 				>
 					<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
 					<span class="title">{{ tab.title }}</span>
@@ -227,6 +227,9 @@ const onClick = () => {
 };
 
 function onTabMousedown(tab: Tab, ev: MouseEvent): void {
+	if (tab.key != null && tab.key === props.tab) {
+		scrollToTop(el, { behavior: "smooth" });
+	}
 	// ユーザビリティの観点からmousedown時にはonClickは呼ばない
 	if (tab.key) {
 		emit("update:tab", tab.key);

packages/client/src/pages/timeline.vue

@@ -31,9 +31,7 @@
 						:touch-angle="25"
 						:threshold="10"
 						:centeredSlides="true"
-						:modules="[Virtual]"
 						:space-between="20"
-						:virtual="true"
 						:allow-touch-move="
 							defaultStore.state.swipeOnMobile &&
 							(deviceKind !== 'desktop' ||
@@ -45,16 +43,18 @@
 						<swiper-slide
 							v-for="index in timelines"
 							:key="index"
-							:virtual-index="index"
+							v-slot="{ isActive }"
 						>
-							<XTimeline
+							<KeepAlive>
-								v-if="index == timelines[swiperRef.activeIndex]"
+								<XTimeline
-								ref="tl"
+									v-if="isActive"
-								:key="src"
+									ref="tl"
-								class="tl"
+									:key="src"
-								:src="src"
+									class="tl"
-								:sound="true"
+									:src="src"
-							/>
+									:sound="true"
+								/>
+							</KeepAlive>
 						</swiper-slide>
 					</swiper>
 				</div>
@@ -64,8 +64,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, onMounted } from "vue";
+import { computed, ref, onMounted, onUnmounted } from "vue";
-import { Virtual } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import XTutorial from "@/components/MkTutorialDialog.vue";
 import XTimeline from "@/components/MkTimeline.vue";
@@ -302,6 +301,10 @@ function syncSlide(index) {
 	swiperRef.slideTo(index);
 }
 
+onUnmounted(() => {
+	console.log("The timelines page has been unmounted");
+});
+
 onMounted(() => {
 	syncSlide(timelines.indexOf(swiperRef.activeIndex));
 });