rudeshark.net/packages/client/src/pages/notifications.vue

151 lines
3.7 KiB
Vue
Raw Normal View History

2020-02-18 22:16:49 +01:00
<template>
<MkStickyContainer>
2022-08-28 00:49:10 +02:00
<template #header>
<MkPageHeader
v-model:tab="tab"
:actions="headerActions"
:tabs="headerTabs"
:display-my-avatar="true"
/>
</template>
<MkSpacer :content-max="800">
2022-09-10 00:44:55 +02:00
<swiper
:modules="[Virtual]"
:space-between="20"
:virtual="true"
:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
2022-09-10 00:44:55 +02:00
@swiper="setSwiperRef"
@slide-change="onSlideChange"
>
<swiper-slide>
<XNotifications class="notifications" :include-types="includeTypes" :unread-only="false"/>
</swiper-slide>
<swiper-slide>
<XNotifications class="notifications" :include-types="includeTypes" :unread-only="true"/>
</swiper-slide>
<swiper-slide>
<XNotes :pagination="mentionsPagination"/>
</swiper-slide>
<swiper-slide>
<XNotes :pagination="directNotesPagination"/>
</swiper-slide>
</swiper>
</MkSpacer>
</MkStickyContainer>
2020-02-18 22:16:49 +01:00
</template>
<script lang="ts" setup>
2022-10-26 04:48:25 +02:00
import { computed, ref, watch } from 'vue';
2022-09-10 00:44:55 +02:00
import { Virtual } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { notificationTypes } from 'misskey-js';
import XNotifications from '@/components/MkNotifications.vue';
import XNotes from '@/components/MkNotes.vue';
2021-11-11 18:02:25 +01:00
import * as os from '@/os';
import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata';
2022-08-20 09:02:15 +02:00
import { deviceKind } from '@/scripts/device-kind';
import { defaultStore } from '@/store';
2022-09-10 00:44:55 +02:00
import 'swiper/scss';
import 'swiper/scss/virtual';
2022-09-08 01:18:04 +02:00
2022-09-10 00:44:55 +02:00
const tabs = ['all', 'unread', 'mentions', 'directNotes'];
2022-10-26 04:19:42 +02:00
let tab = $ref(tabs[0]);
watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
let includeTypes = $ref<string[] | null>(null);
let unreadOnly = $computed(() => tab === 'unread');
os.api('notifications/mark-all-as-read');
2022-08-20 09:02:15 +02:00
const MOBILE_THRESHOLD = 500;
const isMobile = ref(
2022-09-08 01:18:04 +02:00
deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD
2022-08-20 09:02:15 +02:00
);
window.addEventListener('resize', () => {
isMobile.value =
deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
});
const mentionsPagination = {
endpoint: 'notes/mentions' as const,
limit: 10,
};
const directNotesPagination = {
endpoint: 'notes/mentions' as const,
limit: 10,
params: {
visibility: 'specified',
},
};
2020-02-18 22:16:49 +01:00
function setFilter(ev) {
const typeItems = notificationTypes.map(t => ({
text: i18n.t(`_notification._types.${t}`),
active: includeTypes && includeTypes.includes(t),
action: () => {
includeTypes = [t];
},
}));
const items = includeTypes != null ? [{
2022-11-07 03:49:47 +01:00
icon: 'ph-x-bold ph-lg',
text: i18n.ts.clear,
action: () => {
includeTypes = null;
},
}, null, ...typeItems] : typeItems;
2022-01-28 03:53:12 +01:00
os.popupMenu(items, ev.currentTarget ?? ev.target);
}
const headerActions = $computed(() => [tab === 'all' ? {
text: i18n.ts.filter,
2022-11-07 03:49:47 +01:00
icon: 'ph-funnel-bold ph-lg',
highlighted: includeTypes != null,
handler: setFilter,
} : undefined, tab === 'all' ? {
text: i18n.ts.markAllAsRead,
2022-11-07 03:49:47 +01:00
icon: 'ph-check-bold ph-lg',
handler: () => {
os.apiWithDialog('notifications/mark-all-as-read');
},
} : undefined].filter(x => x !== undefined));
const headerTabs = $computed(() => [{
key: 'all',
title: i18n.ts.all,
2022-11-07 03:49:47 +01:00
icon: 'ph-bell-bold ph-lg',
}, {
key: 'unread',
title: i18n.ts.unread,
2022-11-07 03:49:47 +01:00
icon: 'ph-circle-wavy-warning-bold ph-lg',
}, {
key: 'mentions',
title: i18n.ts.mentions,
2022-11-07 03:49:47 +01:00
icon: 'ph-at-bold ph-lg',
}, {
key: 'directNotes',
title: i18n.ts.directNotes,
2022-11-07 03:49:47 +01:00
icon: 'ph-envelope-simple-open-bold ph-lg',
}]);
definePageMetadata(computed(() => ({
title: i18n.ts.notifications,
2022-11-07 03:49:47 +01:00
icon: 'ph-bell-bold ph-lg',
})));
2022-09-10 00:44:55 +02:00
let swiperRef = null;
function setSwiperRef(swiper) {
swiperRef = swiper;
syncSlide(tabs.indexOf(tab));
}
function onSlideChange() {
tab = tabs[swiperRef.activeIndex];
}
function syncSlide(index) {
swiperRef.slideTo(index);
}
2020-02-18 22:16:49 +01:00
</script>