From 1c3e54c895d4a952edbc0888cab549a63cd5cbdf Mon Sep 17 00:00:00 2001 From: codytseng Date: Mon, 14 Apr 2025 12:41:57 +0800 Subject: [PATCH] refactor: new notes button --- src/components/NewNotesButton/index.tsx | 104 ++++++++++-------------- src/components/NoteList/index.tsx | 39 +++------ src/i18n/locales/ar.ts | 3 +- src/i18n/locales/de.ts | 3 +- src/i18n/locales/en.ts | 3 +- src/i18n/locales/es.ts | 3 +- src/i18n/locales/fr.ts | 3 +- src/i18n/locales/it.ts | 3 +- src/i18n/locales/ja.ts | 3 +- src/i18n/locales/pl.ts | 3 +- src/i18n/locales/pt-BR.ts | 3 +- src/i18n/locales/pt-PT.ts | 3 +- src/i18n/locales/ru.ts | 3 +- src/i18n/locales/zh.ts | 3 +- src/index.css | 2 + tailwind.config.js | 3 +- 16 files changed, 82 insertions(+), 102 deletions(-) diff --git a/src/components/NewNotesButton/index.tsx b/src/components/NewNotesButton/index.tsx index d940682..9e6167d 100644 --- a/src/components/NewNotesButton/index.tsx +++ b/src/components/NewNotesButton/index.tsx @@ -1,84 +1,68 @@ -import React, { useState, useEffect } from 'react' -import UserAvatar from '@/components/UserAvatar' +import { Button } from '@/components/ui/button' +import { SimpleUserAvatar } from '@/components/UserAvatar' +import { cn } from '@/lib/utils' import { useScreenSize } from '@/providers/ScreenSizeProvider' -import { useDeepBrowsing } from '@/providers/DeepBrowsingProvider' +import { Event } from 'nostr-tools' +import { useMemo } from 'react' +import { useTranslation } from 'react-i18next' -export type User = { - pubkey: string -} - -interface NewNotesButtonProps { - users?: User[] - eventCount?: number - onShowEvents?: () => void -} - -const NewNotesButton: React.FC = ({ - users = [], - eventCount: initialEventCount = 0, - onShowEvents -}) => { - const [newNotesCount, setNewNotesCount] = useState(initialEventCount) +export default function NewNotesButton({ + newEvents = [], + onClick +}: { + newEvents?: Event[] + onClick?: () => void +}) { + const { t } = useTranslation() const { isSmallScreen } = useScreenSize() - const { deepBrowsing } = useDeepBrowsing() - - useEffect(() => { - setNewNotesCount(initialEventCount) - }, [initialEventCount]) - - const handleClick = () => { - if (onShowEvents) { - onShowEvents() - } else { - console.log('Showing new notes...') + const pubkeys = useMemo(() => { + const arr: string[] = [] + for (const event of newEvents) { + if (!arr.includes(event.pubkey)) { + arr.push(event.pubkey) + } + if (arr.length >= 3) break } - setNewNotesCount(0) - } - - const getDesktopPosition = () => { - return deepBrowsing - ? 'absolute left-0 right-0 top-[3.5rem] w-full flex justify-center z-50' - : 'absolute left-0 right-0 top-[6.5rem] w-full flex justify-center z-50' - } + return arr + }, [newEvents]) return ( <> - {newNotesCount > 0 && ( + {newEvents.length > 0 && (
- +
+ {t('Show n new notes', { n: newEvents.length > 99 ? '99+' : newEvents.length })} +
+
)} ) } - -export default NewNotesButton diff --git a/src/components/NoteList/index.tsx b/src/components/NoteList/index.tsx index 1b31281..da43ee2 100644 --- a/src/components/NoteList/index.tsx +++ b/src/components/NoteList/index.tsx @@ -59,6 +59,14 @@ export default function NoteList({ } }, [JSON.stringify(filter), isPictures]) const topRef = useRef(null) + const filteredNewEvents = useMemo(() => { + return newEvents.filter((event: Event) => { + return ( + (!filterMutedNotes || !mutePubkeys.includes(event.pubkey)) && + (listMode !== 'posts' || !isReplyNoteEvent(event)) + ) + }) + }, [newEvents, listMode, filterMutedNotes, mutePubkeys]) useEffect(() => { if (relayUrls.length === 0 && !noteFilter.authors?.length) return @@ -168,29 +176,6 @@ export default function NoteList({ setNewEvents([]) } - const newUsers = useMemo(() => { - return newEvents - .filter((event: Event) => { - return ( - (!filterMutedNotes || !mutePubkeys.includes(event.pubkey)) && - (listMode !== 'posts' || !isReplyNoteEvent(event)) - ) - }) - .slice(0, 3) - .map((event) => { - return { - pubkey: event.pubkey - } - }) - }, [newEvents, filterMutedNotes, mutePubkeys, listMode]) - - const filteredNewEventsCount = newEvents.filter((event: Event) => { - return ( - (!filterMutedNotes || !mutePubkeys.includes(event.pubkey)) && - (listMode !== 'posts' || !isReplyNoteEvent(event)) - ) - }).length - return (
- {filteredNewEventsCount > 0 && ( - + {filteredNewEvents.length > 0 && ( + )} { diff --git a/src/i18n/locales/ar.ts b/src/i18n/locales/ar.ts index 4b89edf..e50e048 100644 --- a/src/i18n/locales/ar.ts +++ b/src/i18n/locales/ar.ts @@ -216,6 +216,7 @@ export default { 'Media upload service': 'خدمة تحميل الوسائط', 'Choose a relay': 'اختر ريلاي', 'no relays found': 'لم يتم العثور على ريلايات', - video: 'فيديو' + video: 'فيديو', + 'Show n new notes': 'عرض {{n}} ملاحظات جديدة' } } diff --git a/src/i18n/locales/de.ts b/src/i18n/locales/de.ts index bb0f1af..c6e7071 100644 --- a/src/i18n/locales/de.ts +++ b/src/i18n/locales/de.ts @@ -220,6 +220,7 @@ export default { 'Media upload service': 'Medien-Upload-Service', 'Choose a relay': 'Wähle ein Relay', 'no relays found': 'Keine Relays gefunden', - video: 'Video' + video: 'Video', + 'Show n new notes': 'Zeige {{n}} neue Notizen' } } diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts index 9a87bac..95f7a50 100644 --- a/src/i18n/locales/en.ts +++ b/src/i18n/locales/en.ts @@ -216,6 +216,7 @@ export default { 'Media upload service': 'Media upload service', 'Choose a relay': 'Choose a relay', 'no relays found': 'no relays found', - video: 'video' + video: 'video', + 'Show n new notes': 'Show {{n}} new notes' } } diff --git a/src/i18n/locales/es.ts b/src/i18n/locales/es.ts index d298c3a..c3617d0 100644 --- a/src/i18n/locales/es.ts +++ b/src/i18n/locales/es.ts @@ -220,6 +220,7 @@ export default { 'Media upload service': 'Servicio de carga de medios', 'Choose a relay': 'Selecciona un relé', 'no relays found': 'no se encontraron relés', - video: 'video' + video: 'video', + 'Show n new notes': 'Mostrar {{n}} nuevas notas' } } diff --git a/src/i18n/locales/fr.ts b/src/i18n/locales/fr.ts index a8f073d..10009bf 100644 --- a/src/i18n/locales/fr.ts +++ b/src/i18n/locales/fr.ts @@ -219,6 +219,7 @@ export default { 'Media upload service': 'Service de téléchargement de médias', 'Choose a relay': 'Choisir un relais', 'no relays found': 'aucun relais trouvé', - video: 'vidéo' + video: 'vidéo', + 'Show n new notes': 'Afficher {{n}} nouvelles notes' } } diff --git a/src/i18n/locales/it.ts b/src/i18n/locales/it.ts index 4e0d0df..eb03741 100644 --- a/src/i18n/locales/it.ts +++ b/src/i18n/locales/it.ts @@ -219,6 +219,7 @@ export default { 'Media upload service': 'Servizio di caricamento media', 'Choose a relay': 'Scegli un relay', 'no relays found': 'Nessun relay trovato', - video: 'video' + video: 'video', + 'Show n new notes': 'Mostra {{n}} nuove note' } } diff --git a/src/i18n/locales/ja.ts b/src/i18n/locales/ja.ts index f20af6f..ee125e7 100644 --- a/src/i18n/locales/ja.ts +++ b/src/i18n/locales/ja.ts @@ -217,6 +217,7 @@ export default { 'Media upload service': 'メディアアップロードサービス', 'Choose a relay': 'リレイを選択', 'no relays found': 'リレイが見つかりません', - video: 'ビデオ' + video: 'ビデオ', + 'Show n new notes': '新しいノートを{{n}}件表示' } } diff --git a/src/i18n/locales/pl.ts b/src/i18n/locales/pl.ts index dc320f1..2d7a3ae 100644 --- a/src/i18n/locales/pl.ts +++ b/src/i18n/locales/pl.ts @@ -218,6 +218,7 @@ export default { 'Media upload service': 'Usługa przesyłania mediów', 'Choose a relay': 'Wybierz transmiter', 'no relays found': 'Nie znaleziono transmiterów', - video: 'wideo' + video: 'wideo', + 'Show n new notes': 'Pokaż {{n}} nowych wpisów' } } diff --git a/src/i18n/locales/pt-BR.ts b/src/i18n/locales/pt-BR.ts index 6980178..7c7ba70 100644 --- a/src/i18n/locales/pt-BR.ts +++ b/src/i18n/locales/pt-BR.ts @@ -218,6 +218,7 @@ export default { 'Media upload service': 'Serviço de upload de mídia', 'Choose a relay': 'Escolher um relé', 'no relays found': 'nenhum relé encontrado', - video: 'vídeo' + video: 'vídeo', + 'Show n new notes': 'Mostrar {{n}} novas notas' } } diff --git a/src/i18n/locales/pt-PT.ts b/src/i18n/locales/pt-PT.ts index 7c2fb69..9bbb7ed 100644 --- a/src/i18n/locales/pt-PT.ts +++ b/src/i18n/locales/pt-PT.ts @@ -219,6 +219,7 @@ export default { 'Media upload service': 'Serviço de Upload de Mídia', 'Choose a relay': 'Escolher um Relé', 'no relays found': 'nenhum relé encontrado', - video: 'vídeo' + video: 'vídeo', + 'Show n new notes': 'Mostrar {{n}} novas notas' } } diff --git a/src/i18n/locales/ru.ts b/src/i18n/locales/ru.ts index 9bd851b..12e8c2e 100644 --- a/src/i18n/locales/ru.ts +++ b/src/i18n/locales/ru.ts @@ -220,6 +220,7 @@ export default { 'Media upload service': 'Служба загрузки медиафайлов', 'Choose a relay': 'Выберите ретранслятор', 'no relays found': 'ретрансляторы не найдены', - video: 'видео' + video: 'видео', + 'Show n new notes': 'Показать {{n}} новых заметок' } } diff --git a/src/i18n/locales/zh.ts b/src/i18n/locales/zh.ts index 4c9c48b..fac4742 100644 --- a/src/i18n/locales/zh.ts +++ b/src/i18n/locales/zh.ts @@ -217,6 +217,7 @@ export default { 'Media upload service': '媒体上传服务', 'Choose a relay': '选择一个服务器', 'no relays found': '未找到服务器', - video: '视频' + video: '视频', + 'Show n new notes': '显示 {{n}} 条新笔记' } } diff --git a/src/index.css b/src/index.css index a3a3841..8bb3ca7 100644 --- a/src/index.css +++ b/src/index.css @@ -56,6 +56,7 @@ --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 259 43% 56%; + --primary-hover: 259 43% 65%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; @@ -83,6 +84,7 @@ --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 259 43% 56%; + --primary-hover: 259 43% 65%; --primary-foreground: 240 5.9% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; diff --git a/tailwind.config.js b/tailwind.config.js index d4e82bc..44ea9f7 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -22,7 +22,8 @@ export default { }, primary: { DEFAULT: 'hsl(var(--primary))', - foreground: 'hsl(var(--primary-foreground))' + foreground: 'hsl(var(--primary-foreground))', + hover: 'hsl(var(--primary-hover))', }, secondary: { DEFAULT: 'hsl(var(--secondary))',