From 8a642be6d9b7681428585257a7c9161911057e62 Mon Sep 17 00:00:00 2001
From: Laura Hausmann <laura@hausmann.dev>
Date: Fri, 8 Dec 2023 13:45:32 +0100
Subject: [PATCH] [client] Fix pages and gallery tab navigation

This also adds a much nicer "add new gallery post" button to the gallery page
---
 packages/client/src/pages/gallery/index.vue | 133 +++++++++++---------
 packages/client/src/pages/pages.vue         | 105 ++++++++--------
 2 files changed, 132 insertions(+), 106 deletions(-)

diff --git a/packages/client/src/pages/gallery/index.vue b/packages/client/src/pages/gallery/index.vue
index 45e7bd7ae..b47d8a954 100644
--- a/packages/client/src/pages/gallery/index.vue
+++ b/packages/client/src/pages/gallery/index.vue
@@ -25,80 +25,88 @@
 				@slide-change="onSlideChange"
 			>
 				<swiper-slide>
-					<MkFolder class="_gap">
-						<template #header
-							><i class="ph-clock ph-bold ph-lg"></i>
-							{{ i18n.ts.recentPosts }}</template
-						>
+					<template v-if="tab == 'explore'">
+						<MkFolder class="_gap">
+							<template #header
+								><i class="ph-clock ph-bold ph-lg"></i>
+								{{ i18n.ts.recentPosts }}</template
+							>
+							<MkPagination
+								v-slot="{ items }"
+								:pagination="recentPostsPagination"
+								:disable-auto-load="true"
+							>
+								<div class="vfpdbgtk">
+									<MkGalleryPostPreview
+										v-for="post in items"
+										:key="post.id"
+										:post="post"
+										class="post"
+									/>
+								</div>
+							</MkPagination>
+						</MkFolder>
+						<MkFolder class="_gap">
+							<template #header
+								><i class="ph-fire-simple ph-bold ph-lg"></i>
+								{{ i18n.ts.popularPosts }}</template
+							>
+							<MkPagination
+								v-slot="{ items }"
+								:pagination="popularPostsPagination"
+								:disable-auto-load="true"
+							>
+								<div class="vfpdbgtk">
+									<MkGalleryPostPreview
+										v-for="post in items"
+										:key="post.id"
+										:post="post"
+										class="post"
+									/>
+								</div>
+							</MkPagination>
+						</MkFolder>
+					</template>
+				</swiper-slide>
+				<swiper-slide>
+					<template v-if="tab == 'liked'">
 						<MkPagination
 							v-slot="{ items }"
-							:pagination="recentPostsPagination"
-							:disable-auto-load="true"
+							:pagination="likedPostsPagination"
 						>
 							<div class="vfpdbgtk">
 								<MkGalleryPostPreview
-									v-for="post in items"
-									:key="post.id"
-									:post="post"
+									v-for="like in items"
+									:key="like.id"
+									:post="like.post"
 									class="post"
 								/>
 							</div>
 						</MkPagination>
-					</MkFolder>
-					<MkFolder class="_gap">
-						<template #header
-							><i class="ph-fire-simple ph-bold ph-lg"></i>
-							{{ i18n.ts.popularPosts }}</template
-						>
+					</template>
+				</swiper-slide>
+				<swiper-slide>
+					<template v-if="tab == 'my'">
+						<div class="buttoncontainer">
+							<MkButton class="new primary" @click="create()"
+							><i class="ph-plus ph-bold ph-lg"></i>
+								{{ i18n.ts.postToGallery }}</MkButton
+							>
+						</div>
 						<MkPagination
 							v-slot="{ items }"
-							:pagination="popularPostsPagination"
-							:disable-auto-load="true"
+							:pagination="myPostsPagination"
 						>
 							<div class="vfpdbgtk">
 								<MkGalleryPostPreview
-									v-for="post in items"
-									:key="post.id"
-									:post="post"
+									v-for="mypost in items"
+									:key="mypost.id"
+									:post="mypost"
 									class="post"
 								/>
 							</div>
 						</MkPagination>
-					</MkFolder>
-				</swiper-slide>
-				<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>
-				</swiper-slide>
-				<swiper-slide>
-					<MkA to="/gallery/new" class="_link" style="margin: 16px"
-						><i class="ph-plus ph-bold ph-lg"></i>
-						{{ i18n.ts.postToGallery }}</MkA
-					>
-					<MkPagination
-						v-slot="{ items }"
-						:pagination="myPostsPagination"
-					>
-						<div class="vfpdbgtk">
-							<MkGalleryPostPreview
-								v-for="mypost in items"
-								:key="mypost.id"
-								:post="mypost"
-								class="post"
-							/>
-						</div>
-					</MkPagination>
+					</template>
 				</swiper-slide>
 			</swiper>
 		</MkSpacer>
@@ -119,6 +127,7 @@ import { useRouter } from "@/router";
 import { defaultStore } from "@/store";
 import "swiper/scss";
 import "swiper/scss/virtual";
+import MkButton from "@/components/MkButton.vue";
 
 const router = useRouter();
 
@@ -205,11 +214,21 @@ function syncSlide(index) {
 }
 
 onMounted(() => {
-	syncSlide(tabs.indexOf(swiperRef.activeIndex));
+	syncSlide(tabs.indexOf(tab));
 });
+
+function create() {
+	router.push("/gallery/new");
+}
 </script>
 
 <style lang="scss" scoped>
+.buttoncontainer {
+	display: grid;
+	justify-content: center;
+	margin-bottom: 1rem;
+}
+
 .vfpdbgtk {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
diff --git a/packages/client/src/pages/pages.vue b/packages/client/src/pages/pages.vue
index 6b051f683..cdb9247c5 100644
--- a/packages/client/src/pages/pages.vue
+++ b/packages/client/src/pages/pages.vue
@@ -24,55 +24,62 @@
 				@slide-change="onSlideChange"
 			>
 				<swiper-slide>
-					<div class="rknalgpo">
-						<MkPagination
-							v-slot="{ items }"
-							:pagination="featuredPagesPagination"
-						>
-							<MkPagePreview
-								v-for="page in items"
-								:key="page.id"
-								class="ckltabjg"
-								:page="page"
-							/>
-						</MkPagination>
-					</div>
-				</swiper-slide>
-				<swiper-slide>
-					<div class="rknalgpo liked">
-						<MkPagination
-							v-slot="{ items }"
-							:pagination="likedPagesPagination"
-						>
-							<MkPagePreview
-								v-for="like in items"
-								:key="like.page.id"
-								class="ckltabjg"
-								:page="like.page"
-							/>
-						</MkPagination>
-					</div>
-				</swiper-slide>
-				<swiper-slide>
-					<div class="rknalgpo my">
-						<div class="buttoncontainer">
-							<MkButton class="new primary" @click="create()"
-								><i class="ph-plus ph-bold ph-lg"></i>
-								{{ i18n.ts._pages.newPage }}</MkButton
+					<template v-if="tab == 'featured'">
+						<div class="rknalgpo">
+							<MkPagination
+								v-slot="{ items }"
+								:pagination="featuredPagesPagination"
 							>
+								<MkPagePreview
+									v-for="page in items"
+									:key="page.id"
+									class="ckltabjg"
+									:page="page"
+								/>
+							</MkPagination>
 						</div>
-						<MkPagination
-							v-slot="{ items }"
-							:pagination="myPagesPagination"
-						>
-							<MkPagePreview
-								v-for="mypage in items"
-								:key="mypage.id"
-								class="ckltabjg"
-								:page="mypage"
-							/>
-						</MkPagination>
-					</div>
+					</template>
+				</swiper-slide>
+				<swiper-slide>
+					<template v-if="tab == 'liked'">
+						<div class="rknalgpo liked">
+							<MkPagination
+								v-slot="{ items }"
+								:pagination="likedPagesPagination"
+								key="likedPagesPagination"
+							>
+								<MkPagePreview
+									v-for="like in items"
+									:key="like.page.id"
+									class="ckltabjg"
+									:page="like.page"
+								/>
+							</MkPagination>
+						</div>
+					</template>
+				</swiper-slide>
+				<swiper-slide>
+					<template v-if="tab == 'my'">
+						<div class="rknalgpo my">
+							<div class="buttoncontainer">
+								<MkButton class="new primary" @click="create()"
+									><i class="ph-plus ph-bold ph-lg"></i>
+									{{ i18n.ts._pages.newPage }}</MkButton
+								>
+							</div>
+							<MkPagination
+								v-slot="{ items }"
+								:pagination="myPagesPagination"
+							>
+								<MkPagePreview
+									v-for="mypage in items"
+									:key="mypage.id"
+									class="ckltabjg"
+									:page="mypage"
+								/>
+							</MkPagination>
+						</div>
+					</template>
 				</swiper-slide>
 			</swiper>
 		</MkSpacer>
@@ -96,8 +103,8 @@ import "swiper/scss/virtual";
 
 const router = useRouter();
 
-let tab = $ref("featured");
 const tabs = ["featured", "liked", "my"];
+let tab = $ref(tabs[0]);
 watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
 
 const featuredPagesPagination = {
@@ -166,7 +173,7 @@ function syncSlide(index) {
 }
 
 onMounted(() => {
-	syncSlide(tabs.indexOf(swiperRef.activeIndex));
+	syncSlide(tabs.indexOf(tab));
 });
 </script>