161sh/trashposs
1
0
Fork 0
mirror of https://iceshrimp.dev/crimekillz/trashposs synced 2024-11-24 01:39:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

Move liked Journals, Reels and Reactions to Snippets

Browse Source
This commit is contained in:
Crimekillz 2024-05-18 23:51:35 +02:00
parent aeef0feb99
commit dcde1ed36f
10 changed files with 87 additions and 504 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/client/src/navbar.ts
View File

@ -55,22 +55,6 @@ export const navbarItemDef = reactive({
show: computed(() => $i != null), show: computed(() => $i != null),
to: "/my/snippets", to: "/my/snippets",
}, },
pages: {
title: "pages",
icon: "ph-file-text ph-bold ph-lg",
to: "/pages",
},
gallery: {
title: "gallery",
icon: "ph-film-strip ph-bold ph-lg",
to: "/gallery",
},
achievements: {
title: "achievements",
icon: "ph-medal-military ph-bold ph-lg",
show: computed(() => $i != null),
to: "/my/achievements",
},
space: { space: {
title: "space", title: "space",
icon: "ph-rocket-launch ph-bold ph-lg", icon: "ph-rocket-launch ph-bold ph-lg",

25
packages/client/src/pages/achievements.vue
View File

@ -1,25 +0,0 @@
<template>
<MkStickyContainer>
<template #header><MkPageHeader :display-back-button="true" /></template>
<MkSpacer :content-max="1200">
<MkAchievements :user="$i"/>
</MkSpacer>
</MkStickyContainer>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import MkAchievements from '@/components/MkAchievements.vue';
import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata';
import { $i } from '@/account';
definePageMetadata({
title: i18n.ts.achievements,
icon: 'ph-medal-military ph-bold ph-lg',
});
</script>
<style lang="scss" module>
</style>

2
packages/client/src/pages/discover.vue
View File

@ -125,8 +125,8 @@
import { computed, watch, onMounted, onActivated } from "vue"; import { computed, watch, onMounted, onActivated } from "vue";
import { Virtual } from "swiper/modules"; import { Virtual } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue"; import { Swiper, SwiperSlide } from "swiper/vue";
import MkChannelPreview from "@/components/MkChannelPreview.vue";
import MkChannelList from "@/components/MkChannelList.vue"; import MkChannelList from "@/components/MkChannelList.vue";
import MkFolder from "@/components/MkFolder.vue";
import MkPagePreview from "@/components/MkPagePreview.vue"; import MkPagePreview from "@/components/MkPagePreview.vue";
import MkGalleryPostPreview from "@/components/MkGalleryPostPreview.vue"; import MkGalleryPostPreview from "@/components/MkGalleryPostPreview.vue";
import MkPagination from "@/components/MkPagination.vue"; import MkPagination from "@/components/MkPagination.vue";

241
packages/client/src/pages/gallery/index.vue
View File

@ -1,241 +0,0 @@
<template>
<MkStickyContainer>
<template #header
><MkPageHeader
v-model:tab="tab"
:actions="headerActions"
:tabs="headerTabs"
:display-back-button="true"
/></template>
<MkSpacer :content-max="1200">
<swiper
:round-lengths="true"
:touch-angle="25"
:threshold="10"
:centeredSlides="true"
:modules="[Virtual]"
:space-between="20"
:virtual="true"
:allow-touch-move="
defaultStore.state.swipeOnMobile &&
(deviceKind !== 'desktop' ||
defaultStore.state.swipeOnDesktop)
"
@swiper="setSwiperRef"
@slide-change="onSlideChange"
>
<swiper-slide>
<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="likedPostsPagination"
>
<div class="vfpdbgtk">
<MkGalleryPostPreview
v-for="like in items"
:key="like.id"
:post="like.post"
class="post"
/>
</div>
</MkPagination>
</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="myPostsPagination"
>
<div class="vfpdbgtk">
<MkGalleryPostPreview
v-for="mypost in items"
:key="mypost.id"
:post="mypost"
class="post"
/>
</div>
</MkPagination>
</template>
</swiper-slide>
</swiper>
</MkSpacer>
</MkStickyContainer>
</template>
<script lang="ts" setup>
import { computed, defineComponent, watch, onMounted } from "vue";
import { Virtual } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import MkFolder from "@/components/MkFolder.vue";
import MkPagination from "@/components/MkPagination.vue";
import MkGalleryPostPreview from "@/components/MkGalleryPostPreview.vue";
import { definePageMetadata } from "@/scripts/page-metadata";
import { deviceKind } from "@/scripts/device-kind";
import { i18n } from "@/i18n";
import { useRouter } from "@/router";
import { defaultStore } from "@/store";
import "swiper/scss";
import "swiper/scss/virtual";
import MkButton from "@/components/MkButton.vue";
const router = useRouter();
const props = defineProps<{
tag?: string;
}>();
const tabs = ["explore", "liked", "my"];
let tab = $ref(tabs[0]);
watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
let tagsRef = $ref();
const recentPostsPagination = {
endpoint: "gallery/posts" as const,
limit: 6,
};
const popularPostsPagination = {
endpoint: "gallery/featured" as const,
limit: 5,
};
const myPostsPagination = {
endpoint: "i/gallery/posts" as const,
limit: 5,
};
const likedPostsPagination = {
endpoint: "i/gallery/likes" as const,
limit: 5,
};
watch(
() => props.tag,
() => {
if (tagsRef) tagsRef.tags.toggleContent(props.tag == null);
},
);
const headerActions = $computed(() => [
{
icon: "ph-plus ph-bold ph-lg",
text: i18n.ts.create,
handler: () => {
router.push("/gallery/new");
},
},
]);
const headerTabs = $computed(() => [
{
key: "explore",
title: i18n.ts.gallery,
icon: "ph-image-square ph-bold ph-lg",
},
{
key: "liked",
title: i18n.ts._gallery.liked,
icon: "ph-heart ph-bold ph-lg",
},
{
key: "my",
title: i18n.ts._gallery.my,
icon: "ph-crown-simple ph-bold ph-lg",
},
]);
definePageMetadata({
title: i18n.ts.gallery,
icon: "ph-image-square ph-bold ph-lg",
});
let swiperRef = null;
function setSwiperRef(swiper) {
swiperRef = swiper;
syncSlide(tabs.indexOf(tab));
}
function onSlideChange() {
tab = tabs[swiperRef.activeIndex];
}
function syncSlide(index) {
swiperRef.slideTo(index);
}
onMounted(() => {
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));
grid-gap: 12px;
margin: 0 var(--margin);
> .post {
}
}
</style>

29
packages/client/src/pages/my-snippets/index.vue
View File

@ -83,6 +83,18 @@
</MkPagination> </MkPagination>
</div> </div>
</swiper-slide> </swiper-slide>
<swiper-slide>
<div class="_content qtcaoidl reactions">
<MkTab v-model="subtab" style="margin-bottom: var(--margin)">
<option value="notes">{{ i18n.ts.notes }}</option>
<option value="reels">{{ i18n.ts._gallery.liked }}</option>
<option value="journals">{{ i18n.ts._pages.liked }}</option>
</MkTab>
<XReactions v-if="tab === 'reactions' && subtab === 'notes'" :user="$i" />
<XLikedReels v-else-if="tab === 'reactions' && subtab === 'reels'" />
<XLikedJournals v-else-if="tab === 'reactions' && subtab === 'journals'" />
</div>
</swiper-slide>
</swiper> </swiper>
</MkSpacer> </MkSpacer>
</div> </div>
@ -90,27 +102,33 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted, watch } from "vue"; import { ref, onMounted, watch, defineAsyncComponent } from "vue";
import { Virtual } from "swiper/modules"; import { Virtual } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue"; import { Swiper, SwiperSlide } from "swiper/vue";
import MkPagination from "@/components/MkPagination.vue"; import MkPagination from "@/components/MkPagination.vue";
import MkButton from "@/components/MkButton.vue"; import MkTab from "@/components/MkTab.vue";
import MkInfo from "@/components/MkInfo.vue"; import MkInfo from "@/components/MkInfo.vue";
import XNote from "@/components/MkNote.vue"; import XNote from "@/components/MkNote.vue";
import XList from "@/components/MkDateSeparatedList.vue"; import XList from "@/components/MkDateSeparatedList.vue";
import XReactions from "@/pages/user/reactions.vue";
import XLikedJournals from "@/pages/my-snippets/liked-journals.vue";
import XLikedReels from "@/pages/my-snippets/liked-reels.vue";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { definePageMetadata } from "@/scripts/page-metadata"; import { definePageMetadata } from "@/scripts/page-metadata";
import { $i } from "@/account";
import {instance} from "@/instance"; import {instance} from "@/instance";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
import { deviceKind } from "@/scripts/device-kind"; import { deviceKind } from "@/scripts/device-kind";
import "swiper/scss"; import "swiper/scss";
import "swiper/scss/virtual"; import "swiper/scss/virtual";
const tabs = ["favorites", "clips"]; const tabs = ["favorites", "clips", "reactions"];
let tab = $ref(tabs[0]); let tab = $ref(tabs[0]);
watch($$(tab), () => syncSlide(tabs.indexOf(tab))); watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
let subtab = $ref("notes");
const MOBILE_THRESHOLD = 500; const MOBILE_THRESHOLD = 500;
const isMobile = ref( const isMobile = ref(
deviceKind === "smartphone" || window.innerWidth <= MOBILE_THRESHOLD, deviceKind === "smartphone" || window.innerWidth <= MOBILE_THRESHOLD,
@ -178,6 +196,11 @@ const headerTabs = $computed(() => [
title: i18n.ts.clips, title: i18n.ts.clips,
icon: "ph-paperclip ph-bold ph-lg", icon: "ph-paperclip ph-bold ph-lg",
}, },
{
key: "reactions",
title: i18n.ts.reaction,
icon: "ph-smiley ph-bold ph-lg",
},
]); ]);
let swiperRef = null; let swiperRef = null;

24
packages/client/src/pages/my-snippets/liked-journals.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<MkSpacer :content-max="800">
<MkPagination v-slot="{ items }" ref="list" :pagination="pagination">
<MkPagePreview
v-for="like in items"
:key="like.page.id"
:page="like.page"
class="_gap"
/>
</MkPagination>
</MkSpacer>
</template>
<script lang="ts" setup>
import MkPagePreview from "@/components/MkPagePreview.vue";
import MkPagination from "@/components/MkPagination.vue";
const pagination = {
endpoint: "i/page-likes" as const,
limit: 20,
};
</script>
<style lang="scss" scoped></style>

33
packages/client/src/pages/my-snippets/liked-reels.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<MkSpacer :content-max="800">
<MkPagination v-slot="{ items }" :pagination="pagination">
<div class="jrnovfpt">
<MkGalleryPostPreview
v-for="like in items"
:key="like.id"
:post="like.post"
class="post"
/>
</div>
</MkPagination>
</MkSpacer>
</template>
<script lang="ts" setup>
import MkGalleryPostPreview from "@/components/MkGalleryPostPreview.vue";
import MkPagination from "@/components/MkPagination.vue";
const pagination = {
endpoint: "i/gallery/likes" as const,
limit: 6,
};
</script>
<style lang="scss" scoped>
.jrnovfpt {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
grid-gap: 12px;
margin: var(--margin);
}
</style>

202
packages/client/src/pages/pages.vue
View File

@ -1,202 +0,0 @@
<template>
<MkStickyContainer>
<template #header
><MkPageHeader
v-model:tab="tab"
:actions="headerActions"
:tabs="headerTabs"
/></template>
<MkSpacer :content-max="700">
<swiper
:round-lengths="true"
:touch-angle="25"
:threshold="10"
:centeredSlides="true"
:modules="[Virtual]"
:space-between="20"
:virtual="true"
:allow-touch-move="
defaultStore.state.swipeOnMobile &&
(deviceKind !== 'desktop' ||
defaultStore.state.swipeOnDesktop)
"
@swiper="setSwiperRef"
@slide-change="onSlideChange"
>
<swiper-slide>
<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>
</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>
</MkStickyContainer>
</template>
<script lang="ts" setup>
import { computed, watch, onMounted } from "vue";
import { Virtual } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import MkPagePreview from "@/components/MkPagePreview.vue";
import MkPagination from "@/components/MkPagination.vue";
import MkButton from "@/components/MkButton.vue";
import { useRouter } from "@/router";
import { i18n } from "@/i18n";
import { definePageMetadata } from "@/scripts/page-metadata";
import { deviceKind } from "@/scripts/device-kind";
import { defaultStore } from "@/store";
import "swiper/scss";
import "swiper/scss/virtual";
const router = useRouter();
const tabs = ["featured", "liked", "my"];
let tab = $ref(tabs[0]);
watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
const featuredPagesPagination = {
endpoint: "pages/featured" as const,
limit: 10,
};
const likedPagesPagination = {
endpoint: "i/page-likes" as const,
limit: 10,
};
const myPagesPagination = {
endpoint: "i/pages" as const,
limit: 10,
};
function create() {
router.push("/pages/new");
}
const headerActions = $computed(() => [
{
icon: "ph-plus ph-bold ph-lg",
text: i18n.ts.create,
handler: create,
},
]);
const headerTabs = $computed(() => [
{
key: "featured",
title: i18n.ts._pages.featured,
icon: "ph-fire-simple ph-bold ph-lg",
},
{
key: "liked",
title: i18n.ts._pages.liked,
icon: "ph-heart ph-bold ph-lg",
},
{
key: "my",
title: i18n.ts._pages.my,
icon: "ph-crown-simple ph-bold ph-lg",
},
]);
definePageMetadata(
computed(() => ({
title: i18n.ts.pages,
icon: "ph-file-text ph-bold ph-lg",
})),
);
let swiperRef = null;
function setSwiperRef(swiper) {
swiperRef = swiper;
syncSlide(tabs.indexOf(tab));
}
function onSlideChange() {
tab = tabs[swiperRef.activeIndex];
}
function syncSlide(index) {
swiperRef.slideTo(index);
}
onMounted(() => {
syncSlide(tabs.indexOf(tab));
});
</script>
<style lang="scss" scoped>
.rknalgpo {
> .buttoncontainer {
display: grid;
justify-content: center;
margin-bottom: 1rem;
}
&.my .ckltabjg:first-child {
margin-top: 16px;
}
.ckltabjg:not(:last-child) {
margin-bottom: 8px;
}
@media (min-width: 500px) {
.ckltabjg:not(:last-child) {
margin-bottom: 16px;
}
}
}
</style>

6
packages/client/src/pages/user/index.vue
View File

@ -92,12 +92,12 @@ const headerTabs = $computed(() =>
title: i18n.ts.overview, title: i18n.ts.overview,
icon: "ph-user ph-bold ph-lg", icon: "ph-user ph-bold ph-lg",
}, },
...(user.host == null ? [{ ...((!$i || $i.id !== user.id) && user.host == null ? [{
key: 'achievements', key: 'achievements',
title: i18n.ts.achievements, title: i18n.ts.achievements,
icon: 'ph-medal-military ph-bold ph-lg', icon: 'ph-medal-military ph-bold ph-lg',
}] : []), }] : []),
...(($i && $i.id === user.id) || user.publicReactions ...((!$i || $i.id !== user.id) && user.publicReactions
? [ ? [
{ {
key: "reactions", key: "reactions",
@ -106,7 +106,7 @@ const headerTabs = $computed(() =>
}, },
] ]
: []), : []),
...(user.instance == null ...((!$i || $i.id !== user.id) && user.instance == null
? [ ? [
{ {
key: "clips", key: "clips",

13
packages/client/src/router.ts
View File

@ -412,10 +412,6 @@ export const routes = [
component: page(() => import("./pages/page-editor/page-editor.vue")), component: page(() => import("./pages/page-editor/page-editor.vue")),
loginRequired: true, loginRequired: true,
}, },
{
path: "/pages",
component: page(() => import("./pages/pages.vue")),
},
{ {
path: "/gallery/:postId/edit", path: "/gallery/:postId/edit",
component: page(() => import("./pages/gallery/edit.vue")), component: page(() => import("./pages/gallery/edit.vue")),
@ -430,10 +426,6 @@ export const routes = [
path: "/gallery/:postId", path: "/gallery/:postId",
component: page(() => import("./pages/gallery/post.vue")), component: page(() => import("./pages/gallery/post.vue")),
}, },
{
path: "/gallery",
component: page(() => import("./pages/gallery/index.vue")),
},
{ {
path: "/channels/:channelId/edit", path: "/channels/:channelId/edit",
component: page(() => import("./pages/channel-editor.vue")), component: page(() => import("./pages/channel-editor.vue")),
@ -594,11 +586,6 @@ export const routes = [
component: page(() => import("./pages/my-snippets/index.vue")), component: page(() => import("./pages/my-snippets/index.vue")),
loginRequired: true, loginRequired: true,
}, },
{
path: '/my/achievements',
component: page(() => import('./pages/achievements.vue')),
loginRequired: true,
},
{ {
name: "messaging", name: "messaging",
path: "/my/messaging", path: "/my/messaging",