From fc138609a1f2f523f588f339ceba21cc3a979e3b Mon Sep 17 00:00:00 2001 From: codytseng Date: Sat, 6 Sep 2025 13:49:13 +0800 Subject: [PATCH] feat: add setting for notification list style --- src/App.tsx | 7 ++- .../NotificationItem/MentionNotification.tsx | 4 ++ .../NotificationItem/Notification.tsx | 59 ++++++++++++++++--- src/components/NotificationList/index.tsx | 6 +- src/constants.ts | 6 ++ src/i18n/locales/ar.ts | 7 ++- src/i18n/locales/de.ts | 8 ++- src/i18n/locales/en.ts | 7 ++- src/i18n/locales/es.ts | 7 ++- src/i18n/locales/fa.ts | 7 ++- src/i18n/locales/fr.ts | 8 ++- src/i18n/locales/it.ts | 7 ++- src/i18n/locales/ja.ts | 7 ++- src/i18n/locales/ko.ts | 7 ++- src/i18n/locales/pl.ts | 7 ++- src/i18n/locales/pt-BR.ts | 7 ++- src/i18n/locales/pt-PT.ts | 7 ++- src/i18n/locales/ru.ts | 8 ++- src/i18n/locales/th.ts | 7 ++- src/i18n/locales/zh.ts | 7 ++- .../secondary/GeneralSettingsPage/index.tsx | 26 ++++++++ src/providers/UserPreferencesProvider.tsx | 40 +++++++++++++ src/services/local-storage.service.ts | 25 +++++++- src/types/index.d.ts | 5 +- 24 files changed, 257 insertions(+), 29 deletions(-) create mode 100644 src/providers/UserPreferencesProvider.tsx diff --git a/src/App.tsx b/src/App.tsx index 9d341a4..fee7dd5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -16,6 +16,7 @@ import { ReplyProvider } from '@/providers/ReplyProvider' import { ScreenSizeProvider } from '@/providers/ScreenSizeProvider' import { ThemeProvider } from '@/providers/ThemeProvider' import { TranslationServiceProvider } from '@/providers/TranslationServiceProvider' +import { UserPreferencesProvider } from '@/providers/UserPreferencesProvider' import { UserTrustProvider } from '@/providers/UserTrustProvider' import { ZapProvider } from '@/providers/ZapProvider' import { PageManager } from './PageManager' @@ -38,8 +39,10 @@ export default function App(): JSX.Element { - - + + + + diff --git a/src/components/NotificationList/NotificationItem/MentionNotification.tsx b/src/components/NotificationList/NotificationItem/MentionNotification.tsx index f6c6972..43e7d36 100644 --- a/src/components/NotificationList/NotificationItem/MentionNotification.tsx +++ b/src/components/NotificationList/NotificationItem/MentionNotification.tsx @@ -1,8 +1,10 @@ import ParentNotePreview from '@/components/ParentNotePreview' +import { NOTIFICATION_LIST_STYLE } from '@/constants' import { getEmbeddedPubkeys, getParentBech32Id } from '@/lib/event' import { toNote } from '@/lib/link' import { useSecondaryPage } from '@/PageManager' import { useNostr } from '@/providers/NostrProvider' +import { useUserPreferences } from '@/providers/UserPreferencesProvider' import { AtSign, MessageCircle, Quote } from 'lucide-react' import { Event } from 'nostr-tools' import { useMemo } from 'react' @@ -19,6 +21,7 @@ export function MentionNotification({ const { t } = useTranslation() const { push } = useSecondaryPage() const { pubkey } = useNostr() + const { notificationListStyle } = useUserPreferences() const isMention = useMemo(() => { if (!pubkey) return false const mentions = getEmbeddedPubkeys(notification) @@ -42,6 +45,7 @@ export function MentionNotification({ sentAt={notification.created_at} targetEvent={notification} middle={ + notificationListStyle === NOTIFICATION_LIST_STYLE.DETAILED && parentEventId && ( isNew && !isNotificationRead(notificationId), [isNew, isNotificationRead, notificationId] ) + const handleClick = () => { + markNotificationAsRead(notificationId) + if (targetEvent) { + push(toNote(targetEvent.id)) + } else if (pubkey) { + push(toProfile(pubkey)) + } + } + + if (notificationListStyle === NOTIFICATION_LIST_STYLE.COMPACT) { + return ( +
+
+ + {icon} + {middle} + {targetEvent && ( + + )} +
+
+ +
+
+ ) + } + return (
{ - markNotificationAsRead(notificationId) - if (targetEvent) { - push(toNote(targetEvent.id)) - } else if (pubkey) { - push(toProfile(pubkey)) - } - }} + onClick={handleClick} >
{icon} @@ -95,6 +127,17 @@ export default function Notification({ } export function NotificationSkeleton() { + const { notificationListStyle } = useUserPreferences() + + if (notificationListStyle === NOTIFICATION_LIST_STYLE.COMPACT) { + return ( +
+ + +
+ ) + } + return (
diff --git a/src/components/NotificationList/index.tsx b/src/components/NotificationList/index.tsx index 31a1b56..93d5e4b 100644 --- a/src/components/NotificationList/index.tsx +++ b/src/components/NotificationList/index.tsx @@ -1,8 +1,9 @@ -import { BIG_RELAY_URLS, ExtendedKind } from '@/constants' +import { BIG_RELAY_URLS, ExtendedKind, NOTIFICATION_LIST_STYLE } from '@/constants' import { compareEvents } from '@/lib/event' import { usePrimaryPage } from '@/PageManager' import { useNostr } from '@/providers/NostrProvider' import { useNotification } from '@/providers/NotificationProvider' +import { useUserPreferences } from '@/providers/UserPreferencesProvider' import { useUserTrust } from '@/providers/UserTrustProvider' import client from '@/services/client.service' import noteStatsService from '@/services/note-stats.service' @@ -34,6 +35,7 @@ const NotificationList = forwardRef((_, ref) => { const { pubkey } = useNostr() const { hideUntrustedNotifications, isUserTrusted } = useUserTrust() const { getNotificationsSeenAt } = useNotification() + const { notificationListStyle } = useUserPreferences() const [notificationType, setNotificationType] = useState('all') const [lastReadTime, setLastReadTime] = useState(0) const [refreshCount, setRefreshCount] = useState(0) @@ -262,7 +264,7 @@ const NotificationList = forwardRef((_, ref) => { }} pullingContent="" > -
+
{visibleNotifications.map((notification) => ( { setHideContentMentioningMutedUsers } = useContentPolicy() const { hideUntrustedNotes, updateHideUntrustedNotes } = useUserTrust() + const { notificationListStyle, updateNotificationListStyle } = useUserPreferences() const handleLanguageChange = (value: TLanguage) => { i18n.changeLanguage(value) @@ -66,6 +69,29 @@ const GeneralSettingsPage = forwardRef(({ index }: { index?: number }, ref) => { + + + +