hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

biome format --write

Browse source
This commit is contained in:
Henry Jameson 2026-01-06 16:22:52 +02:00
commit 9262e803ec
415 changed files with 54076 additions and 17419 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/notifications/notification_filters.vue
View file

@ -110,27 +110,25 @@ import Popover from '../popover/popover.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faFilter } from '@fortawesome/free-solid-svg-icons'
library.add(
faFilter
)
library.add(faFilter)
export default {
components: { Popover },
computed: {
filters () {
filters() {
return this.$store.getters.mergedConfig.notificationVisibility
}
},
},
methods: {
toggleNotificationFilter (type) {
toggleNotificationFilter(type) {
this.$store.dispatch('setOption', {
name: 'notificationVisibility',
value: {
...this.filters,
[type]: !this.filters[type]
}
[type]: !this.filters[type],
},
})
}
}
},
},
}
</script>

158
src/components/notifications/notifications.js
View file

@ -10,19 +10,19 @@ import {
filteredNotificationsFromStore,
unseenNotificationsFromStore,
countExtraNotifications,
ACTIONABLE_NOTIFICATION_TYPES
ACTIONABLE_NOTIFICATION_TYPES,
} from '../../services/notification_utils/notification_utils.js'
import FaviconService from '../../services/favicon_service/favicon_service.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCircleNotch, faArrowUp, faMinus } from '@fortawesome/free-solid-svg-icons'
import {
faCircleNotch,
faArrowUp,
faMinus,
} from '@fortawesome/free-solid-svg-icons'
import { useInterfaceStore } from 'src/stores/interface'
import { useAnnouncementsStore } from 'src/stores/announcements'
library.add(
faCircleNotch,
faArrowUp,
faMinus
)
library.add(faCircleNotch, faArrowUp, faMinus)
const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30
@ -30,7 +30,7 @@ const Notifications = {
components: {
Notification,
NotificationFilters,
ExtraNotifications
ExtraNotifications,
},
props: {
// Disables panel styles, unread mark, potentially other notification-related actions
@ -41,93 +41,110 @@ const Notifications = {
// Do not show extra notifications
noExtra: {
type: Boolean,
default: false
default: false,
},
// Disable teleporting (i.e. for /users/user/notifications)
disableTeleport: Boolean
disableTeleport: Boolean,
},
data () {
data() {
return {
showScrollTop: false,
bottomedOut: false,
// How many seen notifications to display in the list. The more there are,
// the heavier the page becomes. This count is increased when loading
// older notifications, and cut back to default whenever hitting "Read!".
seenToDisplayCount: DEFAULT_SEEN_TO_DISPLAY_COUNT
seenToDisplayCount: DEFAULT_SEEN_TO_DISPLAY_COUNT,
}
},
provide () {
provide() {
return {
popoversZLayer: computed(() => this.popoversZLayer)
popoversZLayer: computed(() => this.popoversZLayer),
}
},
computed: {
mainClass () {
mainClass() {
return this.minimalMode ? '' : 'panel panel-default'
},
notifications () {
notifications() {
return notificationsFromStore(this.$store)
},
error () {
error() {
return this.$store.state.notifications.error
},
unseenNotifications () {
unseenNotifications() {
return unseenNotificationsFromStore(this.$store)
},
filteredNotifications () {
filteredNotifications() {
if (this.unseenAtTop) {
return [
...filteredNotificationsFromStore(this.$store).filter(n => this.shouldShowUnseen(n)),
...filteredNotificationsFromStore(this.$store).filter(n => !this.shouldShowUnseen(n))
...filteredNotificationsFromStore(this.$store).filter((n) =>
this.shouldShowUnseen(n),
),
...filteredNotificationsFromStore(this.$store).filter(
(n) => !this.shouldShowUnseen(n),
),
]
} else {
return filteredNotificationsFromStore(this.$store, this.filterMode)
}
},
unseenCountBadgeText () {
unseenCountBadgeText() {
return `${this.unseenCount ? this.unseenCount : ''}${this.extraNotificationsCount ? '*' : ''}`
},
unseenCount () {
unseenCount() {
return this.unseenNotifications.length
},
ignoreInactionableSeen () { return this.$store.getters.mergedConfig.ignoreInactionableSeen },
extraNotificationsCount () {
ignoreInactionableSeen() {
return this.$store.getters.mergedConfig.ignoreInactionableSeen
},
extraNotificationsCount() {
return countExtraNotifications(this.$store)
},
unseenCountTitle () {
return this.unseenNotifications.length + (this.unreadChatCount) + this.unreadAnnouncementCount
unseenCountTitle() {
return (
this.unseenNotifications.length +
this.unreadChatCount +
this.unreadAnnouncementCount
)
},
loading () {
loading() {
return this.$store.state.notifications.loading
},
noHeading () {
noHeading() {
const { layoutType } = useInterfaceStore()
return this.minimalMode || layoutType === 'mobile'
},
teleportTarget () {
teleportTarget() {
const { layoutType } = useInterfaceStore()
const map = {
wide: '#notifs-column',
mobile: '#mobile-notifications'
mobile: '#mobile-notifications',
}
return map[layoutType] || '#notifs-sidebar'
},
popoversZLayer () {
popoversZLayer() {
const { layoutType } = useInterfaceStore()
return layoutType === 'mobile' ? 'navbar' : null
},
notificationsToDisplay () {
return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount)
notificationsToDisplay() {
return this.filteredNotifications.slice(
0,
this.unseenCount + this.seenToDisplayCount,
)
},
noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
unseenAtTop () { return this.$store.getters.mergedConfig.unseenAtTop },
showExtraNotifications () {
noSticky() {
return this.$store.getters.mergedConfig.disableStickyHeaders
},
unseenAtTop() {
return this.$store.getters.mergedConfig.unseenAtTop
},
showExtraNotifications() {
return !this.noExtra
},
...mapState(useAnnouncementsStore, ['unreadAnnouncementCount']),
...mapGetters(['unreadChatCount'])
...mapGetters(['unreadChatCount']),
},
mounted () {
mounted() {
this.scrollerRef = this.$refs.root.closest('.column.-scrollable')
if (!this.scrollerRef) {
this.scrollerRef = this.$refs.root.closest('.mobile-notifications')
@ -137,12 +154,12 @@ const Notifications = {
}
this.scrollerRef.addEventListener('scroll', this.updateScrollPosition)
},
unmounted () {
unmounted() {
if (!this.scrollerRef) return
this.scrollerRef.removeEventListener('scroll', this.updateScrollPosition)
},
watch: {
unseenCountTitle (count) {
unseenCountTitle(count) {
if (count > 0) {
FaviconService.drawFaviconBadge()
useInterfaceStore().setPageTitle(`(${count})`)
@ -151,10 +168,13 @@ const Notifications = {
useInterfaceStore().setPageTitle('')
}
},
teleportTarget () {
teleportTarget() {
// handle scroller change
this.$nextTick(() => {
this.scrollerRef.removeEventListener('scroll', this.updateScrollPosition)
this.scrollerRef.removeEventListener(
'scroll',
this.updateScrollPosition,
)
this.scrollerRef = this.$refs.root.closest('.column.-scrollable')
if (!this.scrollerRef) {
this.scrollerRef = this.$refs.root.closest('.mobile-notifications')
@ -162,17 +182,18 @@ const Notifications = {
this.scrollerRef.addEventListener('scroll', this.updateScrollPosition)
this.updateScrollPosition()
})
}
},
},
methods: {
scrollToTop () {
scrollToTop() {
const scrollable = this.scrollerRef
scrollable.scrollTo({ top: this.$refs.root.offsetTop })
},
updateScrollPosition () {
this.showScrollTop = this.$refs.root.offsetTop < this.scrollerRef.scrollTop
updateScrollPosition() {
this.showScrollTop =
this.$refs.root.offsetTop < this.scrollerRef.scrollTop
},
shouldShowUnseen (notification) {
shouldShowUnseen(notification) {
if (notification.seen) return false
const actionable = ACTIONABLE_NOTIFICATION_TYPES.has(notification.type)
@ -182,26 +203,29 @@ const Notifications = {
* everything else (likes/repeats/reacts) cannot be acted and therefore we just clear
* the "seen" status upon any clicks on them
*/
notificationClicked (notification) {
notificationClicked(notification) {
const { id } = notification
this.$store.dispatch('notificationClicked', { id })
},
notificationInteracted (notification) {
notificationInteracted(notification) {
const { id } = notification
this.$store.dispatch('markSingleNotificationAsSeen', { id })
},
markAsSeen () {
markAsSeen() {
this.$store.dispatch('markNotificationsAsSeen')
this.seenToDisplayCount = DEFAULT_SEEN_TO_DISPLAY_COUNT
},
fetchOlderNotifications () {
fetchOlderNotifications() {
if (this.loading) {
return
}
const seenCount = this.filteredNotifications.length - this.unseenCount
if (this.seenToDisplayCount < seenCount) {
this.seenToDisplayCount = Math.min(this.seenToDisplayCount + 20, seenCount)
this.seenToDisplayCount = Math.min(
this.seenToDisplayCount + 20,
seenCount,
)
return
} else if (this.seenToDisplayCount > seenCount) {
this.seenToDisplayCount = seenCount
@ -210,19 +234,21 @@ const Notifications = {
const store = this.$store
const credentials = store.state.users.currentUser.credentials
store.commit('setNotificationsLoading', { value: true })
notificationsFetcher.fetchAndUpdate({
store,
credentials,
older: true
}).then(notifs => {
store.commit('setNotificationsLoading', { value: false })
if (notifs.length === 0) {
this.bottomedOut = true
}
this.seenToDisplayCount += notifs.length
})
}
}
notificationsFetcher
.fetchAndUpdate({
store,
credentials,
older: true,
})
.then((notifs) => {
store.commit('setNotificationsLoading', { value: false })
if (notifs.length === 0) {
this.bottomedOut = true
}
this.seenToDisplayCount += notifs.length
})
},
},
}
export default Notifications