From ef06faf259782cd7f82711415bb52e4555324083 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sun, 30 Apr 2023 21:03:09 +0800 Subject: [PATCH] Notifications popover, for larger screens --- src/components/nav-menu.jsx | 2 + src/components/notification.jsx | 250 ++++++++++++++++++++++++++ src/pages/home.jsx | 158 ++++++++++++++-- src/pages/notifications-menu.css | 51 ++++++ src/pages/notifications.jsx | 287 +----------------------------- src/utils/group-notifications.jsx | 43 +++++ 6 files changed, 493 insertions(+), 298 deletions(-) create mode 100644 src/components/notification.jsx create mode 100644 src/pages/notifications-menu.css create mode 100644 src/utils/group-notifications.jsx diff --git a/src/components/nav-menu.jsx b/src/components/nav-menu.jsx index f1927059..402331d9 100644 --- a/src/components/nav-menu.jsx +++ b/src/components/nav-menu.jsx @@ -97,6 +97,8 @@ function NavMenu(props) { {...props} overflow="auto" viewScroll="close" + position="anchor" + align="center" boundingBoxPadding="8 8 8 8" unmountOnClose > diff --git a/src/components/notification.jsx b/src/components/notification.jsx new file mode 100644 index 00000000..b9e6b747 --- /dev/null +++ b/src/components/notification.jsx @@ -0,0 +1,250 @@ +import states from '../utils/states'; +import store from '../utils/store'; + +import Avatar from './avatar'; +import Icon from './icon'; +import Link from './link'; +import NameText from './name-text'; +import RelativeTime from './relative-time'; +import Status from './status'; + +const NOTIFICATION_ICONS = { + mention: 'comment', + status: 'notification', + reblog: 'rocket', + follow: 'follow', + follow_request: 'follow-add', + favourite: 'heart', + poll: 'poll', + update: 'pencil', +}; + +/* +Notification types +================== +mention = Someone mentioned you in their status +status = Someone you enabled notifications for has posted a status +reblog = Someone boosted one of your statuses +follow = Someone followed you +follow_request = Someone requested to follow you +favourite = Someone favourited one of your statuses +poll = A poll you have voted in or created has ended +update = A status you interacted with has been edited +admin.sign_up = Someone signed up (optionally sent to admins) +admin.report = A new report has been filed +*/ + +const contentText = { + mention: 'mentioned you in their post.', + status: 'published a post.', + reblog: 'boosted your post.', + follow: 'followed you.', + follow_request: 'requested to follow you.', + favourite: 'favourited your post.', + poll: 'A poll you have voted in or created has ended.', + 'poll-self': 'A poll you have created has ended.', + 'poll-voted': 'A poll you have voted in has ended.', + update: 'A post you interacted with has been edited.', + 'favourite+reblog': 'boosted & favourited your post.', +}; + +function Notification({ notification, instance }) { + const { id, status, account, _accounts } = notification; + let { type } = notification; + + // status = Attached when type of the notification is favourite, reblog, status, mention, poll, or update + const actualStatusID = status?.reblog?.id || status?.id; + + const currentAccount = store.session.get('currentAccount'); + const isSelf = currentAccount === account?.id; + const isVoted = status?.poll?.voted; + + let favsCount = 0; + let reblogsCount = 0; + if (type === 'favourite+reblog') { + for (const account of _accounts) { + if (account._types?.includes('favourite')) { + favsCount++; + } + if (account._types?.includes('reblog')) { + reblogsCount++; + } + } + if (!reblogsCount && favsCount) type = 'favourite'; + if (!favsCount && reblogsCount) type = 'reblog'; + } + + const text = + type === 'poll' + ? contentText[isSelf ? 'poll-self' : isVoted ? 'poll-voted' : 'poll'] + : contentText[type]; + + return ( +
+
+ {type === 'favourite+reblog' ? ( + <> + + + + ) : ( + + )} +
+
+ {type !== 'mention' && ( + <> +

+ {!/poll|update/i.test(type) && ( + <> + {_accounts?.length > 1 ? ( + <> + {_accounts.length} people{' '} + + ) : ( + <> + {' '} + + )} + + )} + {text} + {type === 'mention' && ( + + {' '} + •{' '} + + + )} +

+ {type === 'follow_request' && ( + { + loadNotifications(true); + }} + /> + )} + + )} + {_accounts?.length > 1 && ( +

+ {_accounts.map((account, i) => ( + <> +

{' '} + + ))} +

+ )} + {status && ( + + + + )} +
+
+ ); +} + +function FollowRequestButtons({ accountID, onChange }) { + const { masto } = api(); + const [uiState, setUIState] = useState('default'); + return ( +

+ {' '} + +

+ ); +} + +export default Notification; diff --git a/src/pages/home.jsx b/src/pages/home.jsx index 850f4098..eb7bd862 100644 --- a/src/pages/home.jsx +++ b/src/pages/home.jsx @@ -1,13 +1,20 @@ +import './notifications-menu.css'; + +import { ControlledMenu } from '@szhsin/react-menu'; import { memo } from 'preact/compat'; -import { useEffect } from 'preact/hooks'; +import { useEffect, useRef, useState } from 'preact/hooks'; import { useSnapshot } from 'valtio'; import Columns from '../components/columns'; import Icon from '../components/icon'; import Link from '../components/link'; +import Loader from '../components/loader'; +import Notification from '../components/notification'; +import { api } from '../utils/api'; import db from '../utils/db'; +import groupNotifications from '../utils/group-notifications'; import openCompose from '../utils/open-compose'; -import states from '../utils/states'; +import states, { saveStatus } from '../utils/states'; import { getCurrentAccountNS } from '../utils/store-utils'; import Following from './following'; @@ -27,6 +34,9 @@ function Home() { })(); }, []); + const notificationLinkRef = useRef(); + const [menuState, setMenuState] = useState('closed'); + return ( <> {(snapStates.settings.shortcutsColumnsMode || @@ -40,17 +50,31 @@ function Home() { id="home" headerStart={false} headerEnd={ - { - e.stopPropagation(); - }} - > - - + <> + { + e.stopPropagation(); + if (window.matchMedia('(min-width: calc(40em))').matches) { + e.preventDefault(); + setMenuState((state) => + state === 'closed' ? 'open' : 'closed', + ); + } + }} + > + + + setMenuState('closed')} + /> + } /> )} @@ -76,4 +100,112 @@ function Home() { ); } +const NOTIFICATIONS_LIMIT = 30; +const NOTIFICATIONS_DISPLAY_LIMIT = 5; +function NotificationsMenu({ anchorRef, state, onClose }) { + const { masto, instance } = api(); + const snapStates = useSnapshot(states); + const [uiState, setUIState] = useState('default'); + + const notificationsIterator = masto.v1.notifications.list({ + limit: NOTIFICATIONS_LIMIT, + }); + + async function fetchNotifications() { + const allNotifications = await notificationsIterator.next(); + const notifications = allNotifications.value; + + if (notifications?.length) { + notifications.forEach((notification) => { + saveStatus(notification.status, instance, { + skipThreading: true, + }); + }); + + const groupedNotifications = groupNotifications(notifications); + + states.notificationsLast = notifications[0]; + states.notifications = groupedNotifications; + } + + states.notificationsShowNew = false; + states.notificationsLastFetchTime = Date.now(); + return allNotifications; + } + + function loadNotifications() { + setUIState('loading'); + (async () => { + try { + await fetchNotifications(); + setUIState('default'); + } catch (e) { + setUIState('error'); + } + })(); + } + + useEffect(() => { + loadNotifications(); + }, []); + + return ( + +
+

Notifications

+
+ {snapStates.notifications.length ? ( + <> + {snapStates.notifications + .slice(0, NOTIFICATIONS_DISPLAY_LIMIT) + .map((notification) => ( + + ))} + + ) : uiState === 'loading' ? ( +
+ +
+ ) : ( + uiState === 'error' && ( +
+

Unable to fetch notifications.

+

+ +

+
+ ) + )} +
+ + Mentions + + + See all + +
+ + ); +} + export default memo(Home); diff --git a/src/pages/notifications-menu.css b/src/pages/notifications-menu.css new file mode 100644 index 00000000..39e87f0e --- /dev/null +++ b/src/pages/notifications-menu.css @@ -0,0 +1,51 @@ +@keyframes bell { + 0% { + transform: rotate(0deg); + } + 33% { + transform: rotate(5deg); + } + 66% { + transform: rotate(-10deg); + } + 100% { + transform: rotate(0deg); + } +} +.notifications-button.open { + animation: bell 0.3s ease-out both; + transform-origin: 50% 0; +} + +.notifications-menu { + width: 23em; + font-size: 90%; + padding: 0; + height: 40em; + overflow: auto; +} +.notifications-menu header { + padding: 16px; + margin: 0; + border-bottom: var(--hairline-width) solid var(--outline-color); +} +.notifications-menu header h2 { + margin: 0; + padding: 0; + font-size: 1.2em; +} +.notifications-menu .notification { + animation: appear-smooth 0.3s ease-out 0.1s both; +} +.notifications-menu footer { + animation: slide-up 0.3s ease-out 0.2s both; + position: sticky; + bottom: 0; + border-top: var(--hairline-width) solid var(--outline-color); + background-color: var(--bg-blur-color); + backdrop-filter: blur(16px); + padding: 16px; + gap: 8px; + display: flex; + justify-content: space-between; +} diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx index 01312fc9..d1a983b4 100644 --- a/src/pages/notifications.jsx +++ b/src/pages/notifications.jsx @@ -4,61 +4,18 @@ import { memo } from 'preact/compat'; import { useEffect, useRef, useState } from 'preact/hooks'; import { useSnapshot } from 'valtio'; -import Avatar from '../components/avatar'; import Icon from '../components/icon'; import Link from '../components/link'; import Loader from '../components/loader'; -import NameText from '../components/name-text'; import NavMenu from '../components/nav-menu'; -import RelativeTime from '../components/relative-time'; -import Status from '../components/status'; +import Notification from '../components/notification'; import { api } from '../utils/api'; +import groupNotifications from '../utils/group-notifications'; import niceDateTime from '../utils/nice-date-time'; import states, { saveStatus } from '../utils/states'; -import store from '../utils/store'; import useScroll from '../utils/useScroll'; import useTitle from '../utils/useTitle'; -/* -Notification types -================== -mention = Someone mentioned you in their status -status = Someone you enabled notifications for has posted a status -reblog = Someone boosted one of your statuses -follow = Someone followed you -follow_request = Someone requested to follow you -favourite = Someone favourited one of your statuses -poll = A poll you have voted in or created has ended -update = A status you interacted with has been edited -admin.sign_up = Someone signed up (optionally sent to admins) -admin.report = A new report has been filed -*/ - -const contentText = { - mention: 'mentioned you in their post.', - status: 'published a post.', - reblog: 'boosted your post.', - follow: 'followed you.', - follow_request: 'requested to follow you.', - favourite: 'favourited your post.', - poll: 'A poll you have voted in or created has ended.', - 'poll-self': 'A poll you have created has ended.', - 'poll-voted': 'A poll you have voted in has ended.', - update: 'A post you interacted with has been edited.', - 'favourite+reblog': 'boosted & favourited your post.', -}; - -const NOTIFICATION_ICONS = { - mention: 'comment', - status: 'notification', - reblog: 'rocket', - follow: 'follow', - follow_request: 'follow-add', - favourite: 'heart', - poll: 'poll', - update: 'pencil', -}; - const LIMIT = 30; // 30 is the maximum limit :( function Notifications() { @@ -287,245 +244,5 @@ function Notifications() { ); } -function Notification({ notification, instance }) { - const { id, status, account, _accounts } = notification; - let { type } = notification; - - // status = Attached when type of the notification is favourite, reblog, status, mention, poll, or update - const actualStatusID = status?.reblog?.id || status?.id; - - const currentAccount = store.session.get('currentAccount'); - const isSelf = currentAccount === account?.id; - const isVoted = status?.poll?.voted; - - let favsCount = 0; - let reblogsCount = 0; - if (type === 'favourite+reblog') { - for (const account of _accounts) { - if (account._types?.includes('favourite')) { - favsCount++; - } - if (account._types?.includes('reblog')) { - reblogsCount++; - } - } - if (!reblogsCount && favsCount) type = 'favourite'; - if (!favsCount && reblogsCount) type = 'reblog'; - } - - const text = - type === 'poll' - ? contentText[isSelf ? 'poll-self' : isVoted ? 'poll-voted' : 'poll'] - : contentText[type]; - - return ( -
-
- {type === 'favourite+reblog' ? ( - <> - - - - ) : ( - - )} -
-
- {type !== 'mention' && ( - <> -

- {!/poll|update/i.test(type) && ( - <> - {_accounts?.length > 1 ? ( - <> - {_accounts.length} people{' '} - - ) : ( - <> - {' '} - - )} - - )} - {text} - {type === 'mention' && ( - - {' '} - •{' '} - - - )} -

- {type === 'follow_request' && ( - { - loadNotifications(true); - }} - /> - )} - - )} - {_accounts?.length > 1 && ( -

- {_accounts.map((account, i) => ( - <> -

{' '} - - ))} -

- )} - {status && ( - - - - )} -
-
- ); -} - -function FollowRequestButtons({ accountID, onChange }) { - const { masto } = api(); - const [uiState, setUIState] = useState('default'); - return ( -

- {' '} - -

- ); -} - -function groupNotifications(notifications) { - // Create new flat list of notifications - // Combine sibling notifications based on type and status id - // Concat all notification.account into an array of _accounts - const notificationsMap = {}; - const cleanNotifications = []; - for (let i = 0, j = 0; i < notifications.length; i++) { - const notification = notifications[i]; - const { status, account, type, createdAt } = notification; - const date = new Date(createdAt).toLocaleDateString(); - let virtualType = type; - if (type === 'favourite' || type === 'reblog') { - virtualType = 'favourite+reblog'; - } - const key = `${status?.id}-${virtualType}-${date}`; - const mappedNotification = notificationsMap[key]; - if (virtualType === 'follow_request') { - cleanNotifications[j++] = notification; - } else if (mappedNotification?.account) { - const mappedAccount = mappedNotification._accounts.find( - (a) => a.id === account.id, - ); - if (mappedAccount) { - mappedAccount._types.push(type); - mappedAccount._types.sort().reverse(); - } else { - account._types = [type]; - mappedNotification._accounts.push(account); - } - } else { - account._types = [type]; - let n = (notificationsMap[key] = { - ...notification, - type: virtualType, - _accounts: [account], - }); - cleanNotifications[j++] = n; - } - } - return cleanNotifications; -} export default memo(Notifications); diff --git a/src/utils/group-notifications.jsx b/src/utils/group-notifications.jsx new file mode 100644 index 00000000..eff19181 --- /dev/null +++ b/src/utils/group-notifications.jsx @@ -0,0 +1,43 @@ +function groupNotifications(notifications) { + // Create new flat list of notifications + // Combine sibling notifications based on type and status id + // Concat all notification.account into an array of _accounts + const notificationsMap = {}; + const cleanNotifications = []; + for (let i = 0, j = 0; i < notifications.length; i++) { + const notification = notifications[i]; + const { status, account, type, createdAt } = notification; + const date = new Date(createdAt).toLocaleDateString(); + let virtualType = type; + if (type === 'favourite' || type === 'reblog') { + virtualType = 'favourite+reblog'; + } + const key = `${status?.id}-${virtualType}-${date}`; + const mappedNotification = notificationsMap[key]; + if (virtualType === 'follow_request') { + cleanNotifications[j++] = notification; + } else if (mappedNotification?.account) { + const mappedAccount = mappedNotification._accounts.find( + (a) => a.id === account.id, + ); + if (mappedAccount) { + mappedAccount._types.push(type); + mappedAccount._types.sort().reverse(); + } else { + account._types = [type]; + mappedNotification._accounts.push(account); + } + } else { + account._types = [type]; + let n = (notificationsMap[key] = { + ...notification, + type: virtualType, + _accounts: [account], + }); + cleanNotifications[j++] = n; + } + } + return cleanNotifications; +} + +export default groupNotifications;