feat: 🔖 v12.119.0

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc-rc.5.1",
+	"version": "12.119.0-calc",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",

packages/client/src/pages/gallery/index.vue

@@ -1,9 +1,15 @@
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="1400">
+	<MkSpacer :content-max="1200">
-		<div class="_root">
+		<swiper
-			<div v-if="tab === 'explore'">
+			:modules="[Virtual]"
+			:space-between="20"
+			:virtual="true"
+			@swiper="setSwiperRef"
+			@slide-change="onSlideChange"
+		>
+			<swiper-slide>
 				<MkFolder class="_gap">
 					<template #header><i class="fas fa-clock"></i> {{ i18n.ts.recentPosts }}</template>
 					<MkPagination v-slot="{items}" :pagination="recentPostsPagination" :disable-auto-load="true">
@@ -20,41 +26,39 @@
 						</div>
 					</MkPagination>
 				</MkFolder>
-			</div>
+			</swiper-slide>
-			<div v-else-if="tab === 'liked'">
+			<swiper-slide>
 				<MkPagination v-slot="{items}" :pagination="likedPostsPagination">
 					<div class="vfpdbgtk">
 						<MkGalleryPostPreview v-for="like in items" :key="like.id" :post="like.post" class="post"/>
 					</div>
 				</MkPagination>
-			</div>
+			</swiper-slide>
-			<div v-else-if="tab === 'my'">
+			<swiper-slide>
 				<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="fas fa-plus"></i> {{ i18n.ts.postToGallery }}</MkA>
 				<MkPagination v-slot="{items}" :pagination="myPostsPagination">
 					<div class="vfpdbgtk">
 						<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
 					</div>
 				</MkPagination>
-			</div>
+			</swiper-slide>
-		</div>
+		</swiper>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, defineComponent, watch } from 'vue';
-import XUserList from '@/components/MkUserList.vue';
+import { Virtual } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/vue';
 import MkFolder from '@/components/MkFolder.vue';
-import MkInput from '@/components/form/input.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkTab from '@/components/MkTab.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue';
-import number from '@/filters/number';
-import * as os from '@/os';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { i18n } from '@/i18n';
 import { useRouter } from '@/router';
+import 'swiper/scss';
+import 'swiper/scss/virtual';
 
 const router = useRouter();
 
@@ -63,7 +67,7 @@ const props = defineProps<{
 }>();
 
 let tab = $ref('explore');
-let tags = $ref([]);
+const tabs = ['explore', 'liked', 'my'];
 let tagsRef = $ref();
 
 const recentPostsPagination = {
@@ -83,16 +87,6 @@ const likedPostsPagination = {
 	limit: 5,
 };
 
-const tagUsersPagination = $computed(() => ({
-	endpoint: 'hashtags/users' as const,
-	limit: 30,
-	params: {
-		tag: this.tag,
-		origin: 'combined',
-		sort: '+follower',
-	},
-}));
-
 watch(() => props.tag, () => {
 	if (tagsRef) tagsRef.tags.toggleContent(props.tag == null);
 });
@@ -123,6 +117,21 @@ definePageMetadata({
 	title: i18n.ts.gallery,
 	icon: 'fas fa-icons',
 });
+
+let swiperRef = null;
+
+function setSwiperRef(swiper) {
+	swiperRef = swiper;
+	syncSlide(tabs.indexOf(tab));
+}
+
+function onSlideChange() {
+	tab = tabs[swiperRef.activeIndex];
+}
+
+function syncSlide(index) {
+	swiperRef.slideTo(index);
+}
 </script>
 
 <style lang="scss" scoped>

packages/client/src/pages/user/index.vue

@@ -1,35 +1,55 @@
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<div>
-		<transition name="fade" mode="out-in">
 	<div v-if="user">
-				<XHome v-if="tab === 'home'" :user="user"/>
+		<swiper
-				<XReactions v-else-if="tab === 'reactions'" :user="user"/>
+			:modules="[Virtual]"
-				<XClips v-else-if="tab === 'clips'" :user="user"/>
+			:space-between="20"
-				<XPages v-else-if="tab === 'pages'" :user="user"/>
+			:virtual="true"
-				<XGallery v-else-if="tab === 'gallery'" :user="user"/>
+			@swiper="setSwiperRef"
+			@slide-change="onSlideChange"
+		>
+			<swiper-slide>
+				<XHome :user="user"/>
+			</swiper-slide>
+			<swiper-slide>
+				<XLikedPosts :user="user"/>
+			</swiper-slide>
+			<swiper-slide>
+				<XReactions :user="user"/>
+			</swiper-slide>
+			<swiper-slide>
+				<XClips :user="user"/>
+			</swiper-slide>
+			<swiper-slide>
+				<XPages :user="user"/>
+			</swiper-slide>
+			<swiper-slide>
+				<XGallery :user="user"/>
+			</swiper-slide>
+		</swiper>
 	</div>
 	<MkError v-else-if="error" @retry="fetchUser()"/>
 	<MkLoading v-else/>
-		</transition>
+	</swiper>
 	</div>
 </MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { defineAsyncComponent, computed, inject, onMounted, onUnmounted, watch } from 'vue';
-import calcAge from 's-age';
+import { Virtual } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/vue';
 import * as Acct from 'misskey-js/built/acct';
-import * as misskey from 'misskey-js';
+import type * as misskey from 'misskey-js';
-import { getScrollPosition } from '@/scripts/scroll';
-import number from '@/filters/number';
 import { userPage, acct as getAcct } from '@/filters/user';
 import * as os from '@/os';
 import { useRouter } from '@/router';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { i18n } from '@/i18n';
 import { $i } from '@/account';
+import 'swiper/scss';
+import 'swiper/scss/virtual';
 
 const XHome = defineAsyncComponent(() => import('./home.vue'));
 const XReactions = defineAsyncComponent(() => import('./reactions.vue'));
@@ -47,7 +67,14 @@ const props = withDefaults(defineProps<{
 const router = useRouter();
 
 let tab = $ref(props.page);
+let tabs = ['home'];
 let user = $ref<null | misskey.entities.UserDetailed>(null);
+if (($i && ($i.id === user?.id)) || user?.publicReactions) {
+	tabs.push('reactions');
+}
+if ((user?.instance != null)) {
+	tabs.push('clips', 'pages', 'gallery');
+}
 let error = $ref(null);
 
 function fetchUser(): void {
@@ -99,6 +126,21 @@ definePageMetadata(computed(() => user ? {
 		title: user.name,
 	},
 } : null));
+
+let swiperRef = null;
+
+function setSwiperRef(swiper) {
+	swiperRef = swiper;
+	syncSlide(tabs.indexOf(tab));
+}
+
+function onSlideChange() {
+	tab = tabs[swiperRef.activeIndex];
+}
+
+function syncSlide(index) {
+	swiperRef.slideTo(index);
+}
 </script>
 
 <style lang="scss" scoped>