From 59f8f44776928e5470de4b4df45e8f847acfacc0 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Wed, 14 Aug 2024 20:12:39 +0800 Subject: [PATCH] Use v2 notifications policy API and new UI Reference: https://github.com/mastodon/mastodon/pull/31342 Very MVP, not a lot of explanations. Maybe revisit later. --- src/index.css | 2 +- src/locales/en.po | 103 ++++++++++++++++++-------------- src/pages/notifications.css | 17 ++++++ src/pages/notifications.jsx | 116 +++++++++++++++++------------------- 4 files changed, 132 insertions(+), 106 deletions(-) diff --git a/src/index.css b/src/index.css index a9bcf28d..45b1eed1 100644 --- a/src/index.css +++ b/src/index.css @@ -389,7 +389,7 @@ textarea:disabled { width: 100%; } -:is(button, .button).small { +:is(button, .button, select).small { font-size: 90%; padding: 4px 8px; } diff --git a/src/locales/en.po b/src/locales/en.po index ca91a761..a207b009 100644 --- a/src/locales/en.po +++ b/src/locales/en.po @@ -424,8 +424,8 @@ msgstr "" #: src/pages/catchup.jsx:1548 #: src/pages/filters.jsx:224 #: src/pages/list.jsx:274 -#: src/pages/notifications.jsx:823 -#: src/pages/notifications.jsx:1055 +#: src/pages/notifications.jsx:840 +#: src/pages/notifications.jsx:1051 #: src/pages/settings.jsx:69 #: src/pages/status.jsx:1256 msgid "Close" @@ -499,7 +499,7 @@ msgstr "" #: src/components/list-add-edit.jsx:147 #: src/components/shortcuts-settings.jsx:712 #: src/pages/filters.jsx:554 -#: src/pages/notifications.jsx:910 +#: src/pages/notifications.jsx:906 msgid "Save" msgstr "" @@ -527,7 +527,7 @@ msgstr "" #: src/pages/filters.jsx:89 #: src/pages/followed-hashtags.jsx:40 #: src/pages/home.jsx:52 -#: src/pages/notifications.jsx:488 +#: src/pages/notifications.jsx:505 msgid "Home" msgstr "" @@ -915,6 +915,7 @@ msgid "Open in new window" msgstr "" #: src/components/follow-request-buttons.jsx:42 +#: src/pages/notifications.jsx:890 msgid "Accept" msgstr "" @@ -923,7 +924,7 @@ msgid "Reject" msgstr "" #: src/components/follow-request-buttons.jsx:75 -#: src/pages/notifications.jsx:1171 +#: src/pages/notifications.jsx:1167 msgid "Accepted" msgstr "" @@ -946,7 +947,7 @@ msgstr "" #: src/components/generic-accounts.jsx:205 #: src/components/timeline.jsx:513 #: src/pages/list.jsx:293 -#: src/pages/notifications.jsx:803 +#: src/pages/notifications.jsx:820 #: src/pages/search.jsx:454 #: src/pages/status.jsx:1289 msgid "Show more…" @@ -1207,8 +1208,8 @@ msgstr "" #: src/pages/filters.jsx:24 #: src/pages/home.jsx:83 #: src/pages/home.jsx:183 -#: src/pages/notifications.jsx:89 -#: src/pages/notifications.jsx:492 +#: src/pages/notifications.jsx:106 +#: src/pages/notifications.jsx:509 msgid "Notifications" msgstr "" @@ -2256,7 +2257,7 @@ msgstr "" #: src/components/timeline.jsx:548 #: src/pages/home.jsx:212 -#: src/pages/notifications.jsx:779 +#: src/pages/notifications.jsx:796 #: src/pages/status.jsx:945 #: src/pages/status.jsx:1318 msgid "Try again" @@ -3013,113 +3014,125 @@ msgstr "" msgid "Unable to load mentions." msgstr "" -#: src/pages/notifications.jsx:506 -#: src/pages/notifications.jsx:827 +#: src/pages/notifications.jsx:97 +msgid "You don't follow" +msgstr "" + +#: src/pages/notifications.jsx:98 +msgid "Who don't follow you" +msgstr "" + +#: src/pages/notifications.jsx:99 +msgid "With a new account" +msgstr "" + +#: src/pages/notifications.jsx:100 +msgid "Who unsolicitedly private mention you" +msgstr "" + +#: src/pages/notifications.jsx:101 +msgid "Who are limited by server moderators" +msgstr "" + +#: src/pages/notifications.jsx:523 +#: src/pages/notifications.jsx:844 msgid "Notifications settings" msgstr "" -#: src/pages/notifications.jsx:524 +#: src/pages/notifications.jsx:541 msgid "New notifications" msgstr "" -#: src/pages/notifications.jsx:535 +#: src/pages/notifications.jsx:552 msgid "{0, plural, one {Announcement} other {Announcements}}" msgstr "" -#: src/pages/notifications.jsx:582 +#: src/pages/notifications.jsx:599 #: src/pages/settings.jsx:1016 msgid "Follow requests" msgstr "" -#: src/pages/notifications.jsx:587 +#: src/pages/notifications.jsx:604 msgid "{0, plural, one {# follow request} other {# follow requests}}" msgstr "" -#: src/pages/notifications.jsx:642 +#: src/pages/notifications.jsx:659 msgid "{0, plural, one {Filtered notifications from # person} other {Filtered notifications from # people}}" msgstr "" -#: src/pages/notifications.jsx:708 +#: src/pages/notifications.jsx:725 msgid "Only mentions" msgstr "" -#: src/pages/notifications.jsx:712 +#: src/pages/notifications.jsx:729 msgid "Today" msgstr "" -#: src/pages/notifications.jsx:716 +#: src/pages/notifications.jsx:733 msgid "You're all caught up." msgstr "" -#: src/pages/notifications.jsx:739 +#: src/pages/notifications.jsx:756 msgid "Yesterday" msgstr "" -#: src/pages/notifications.jsx:775 +#: src/pages/notifications.jsx:792 msgid "Unable to load notifications" msgstr "" -#: src/pages/notifications.jsx:854 +#: src/pages/notifications.jsx:871 msgid "Notifications settings updated" msgstr "" -#: src/pages/notifications.jsx:862 +#: src/pages/notifications.jsx:879 msgid "Filter out notifications from people:" msgstr "" -#: src/pages/notifications.jsx:872 -msgid "You don't follow" +#: src/pages/notifications.jsx:893 +msgid "Filter" msgstr "" -#: src/pages/notifications.jsx:883 -msgid "Who don't follow you" +#: src/pages/notifications.jsx:896 +msgid "Ignore" msgstr "" -#: src/pages/notifications.jsx:894 -msgid "With a new account" -msgstr "" - -#: src/pages/notifications.jsx:905 -msgid "Who unsolicitedly private mention you" -msgstr "" - -#: src/pages/notifications.jsx:973 +#: src/pages/notifications.jsx:969 msgid "Updated <0>{0}" msgstr "" -#: src/pages/notifications.jsx:1041 +#: src/pages/notifications.jsx:1037 msgid "View notifications from @{0}" msgstr "" -#: src/pages/notifications.jsx:1059 +#: src/pages/notifications.jsx:1055 msgid "Notifications from @{0}" msgstr "" -#: src/pages/notifications.jsx:1123 +#: src/pages/notifications.jsx:1119 msgid "Notifications from @{0} will not be filtered from now on." msgstr "" -#: src/pages/notifications.jsx:1128 +#: src/pages/notifications.jsx:1124 msgid "Unable to accept notification request" msgstr "" -#: src/pages/notifications.jsx:1133 +#: src/pages/notifications.jsx:1129 msgid "Allow" msgstr "" -#: src/pages/notifications.jsx:1153 +#: src/pages/notifications.jsx:1149 msgid "Notifications from @{0} will not show up in Filtered notifications from now on." msgstr "" -#: src/pages/notifications.jsx:1158 +#: src/pages/notifications.jsx:1154 msgid "Unable to dismiss notification request" msgstr "" -#: src/pages/notifications.jsx:1163 +#: src/pages/notifications.jsx:1159 msgid "Dismiss" msgstr "" -#: src/pages/notifications.jsx:1178 +#: src/pages/notifications.jsx:1174 msgid "Dismissed" msgstr "" diff --git a/src/pages/notifications.css b/src/pages/notifications.css index e20752cd..0a32260f 100644 --- a/src/pages/notifications.css +++ b/src/pages/notifications.css @@ -560,9 +560,26 @@ display: flex; gap: 8px; align-items: center; + justify-content: space-between; input[type='checkbox'] { flex-shrink: 0; } } + + .notification-policy-fields { + display: flex; + flex-direction: column; + gap: 8px; + + select:has(option[value='accept']:checked) { + box-shadow: 0 0 0 2px var(--green-color); + } + select:has(option[value='filter']:checked) { + box-shadow: 0 0 0 2px var(--orange-color); + } + select:has(option[value='drop']:checked) { + box-shadow: 0 0 0 2px var(--red-color); + } + } } diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx index c2a15c27..80b3f343 100644 --- a/src/pages/notifications.jsx +++ b/src/pages/notifications.jsx @@ -1,6 +1,7 @@ import './notifications.css'; -import { Plural, t, Trans } from '@lingui/macro'; +import { msg, Plural, t, Trans } from '@lingui/macro'; +import { useLingui } from '@lingui/react'; import { Fragment } from 'preact'; import { memo } from 'preact/compat'; import { useCallback, useEffect, useRef, useState } from 'preact/hooks'; @@ -85,7 +86,23 @@ export function getGroupedNotifications(notifications) { } } +const NOTIFICATIONS_POLICIES = [ + 'forNotFollowing', + 'forNotFollowers', + 'forNewAccounts', + 'forPrivateMentions', + 'forLimitedAccounts', +]; +const NOTIFICATIONS_POLICIES_TEXT = { + forNotFollowing: msg`You don't follow`, + forNotFollowers: msg`Who don't follow you`, + forNewAccounts: msg`With a new account`, + forPrivateMentions: msg`Who unsolicitedly private mention you`, + forLimitedAccounts: msg`Who are limited by server moderators`, +}; + function Notifications({ columnMode }) { + const { _ } = useLingui(); useTitle(t`Notifications`, '/notifications'); const { masto, instance } = api(); const snapStates = useSnapshot(states); @@ -222,7 +239,7 @@ function Notifications({ columnMode }) { useState(false); const [notificationsPolicy, setNotificationsPolicy] = useState({}); function fetchNotificationsPolicy() { - return masto.v1.notifications.policy.fetch().catch(() => {}); + return masto.v2.notifications.policy.fetch().catch(() => {}); } function loadNotificationsPolicy() { fetchNotificationsPolicy() @@ -832,25 +849,25 @@ function Notifications({ columnMode }) { onSubmit={(e) => { e.preventDefault(); const { - filterNotFollowing, - filterNotFollowers, - filterNewAccounts, - filterPrivateMentions, + forNotFollowing, + forNotFollowers, + forNewAccounts, + forPrivateMentions, + forLimitedAccounts, } = e.target; - const allFilters = { - filterNotFollowing: filterNotFollowing.checked, - filterNotFollowers: filterNotFollowers.checked, - filterNewAccounts: filterNewAccounts.checked, - filterPrivateMentions: filterPrivateMentions.checked, - }; - setNotificationsPolicy({ + const newPolicy = { ...notificationsPolicy, - ...allFilters, - }); + forNotFollowing: forNotFollowing.value, + forNotFollowers: forNotFollowers.value, + forNewAccounts: forNewAccounts.value, + forPrivateMentions: forPrivateMentions.value, + forLimitedAccounts: forLimitedAccounts.value, + }; + setNotificationsPolicy(newPolicy); setShowNotificationsSettings(false); (async () => { try { - await masto.v1.notifications.policy.update(allFilters); + await masto.v2.notifications.policy.update(newPolicy); showToast(t`Notifications settings updated`); } catch (e) { console.error(e); @@ -861,50 +878,29 @@ function Notifications({ columnMode }) {

Filter out notifications from people:

-

- -

-

- -

-

- -

-

- -

+
+ {NOTIFICATIONS_POLICIES.map((key) => { + const value = notificationsPolicy[key]; + return ( +
+ +
+ ); + })} +