diff --git a/src/components/NoteList/index.tsx b/src/components/NoteList/index.tsx index 31f78e33..3201e680 100644 --- a/src/components/NoteList/index.tsx +++ b/src/components/NoteList/index.tsx @@ -7,6 +7,8 @@ import { useMuteList } from '@/providers/MuteListProvider' import { useNostr } from '@/providers/NostrProvider' import { useScreenSize } from '@/providers/ScreenSizeProvider' import client from '@/services/client.service' +import storage from '@/services/storage.service' +import { TNoteListMode } from '@/types' import dayjs from 'dayjs' import { Event, Filter, kinds } from 'nostr-tools' import { ReactNode, useEffect, useMemo, useRef, useState } from 'react' @@ -19,8 +21,6 @@ const NORMAL_RELAY_LIMIT = 100 const ALGO_RELAY_LIMIT = 500 const PICTURE_NOTE_LIMIT = 30 -type TListMode = 'posts' | 'postsAndReplies' | 'pictures' - export default function NoteList({ relayUrls, filter = {}, @@ -43,7 +43,7 @@ export default function NoteList({ const [newEvents, setNewEvents] = useState([]) const [hasMore, setHasMore] = useState(true) const [refreshing, setRefreshing] = useState(true) - const [listMode, setListMode] = useState('posts') + const [listMode, setListMode] = useState(() => storage.getNoteListMode()) const bottomRef = useRef(null) const isPictures = useMemo(() => listMode === 'pictures', [listMode]) const noteFilter = useMemo(() => { @@ -171,7 +171,13 @@ export default function NoteList({ return (
- + { + setListMode(listMode) + storage.setNoteListMode(listMode) + }} + /> { setRefreshCount((count) => count + 1) @@ -223,8 +229,8 @@ function ListModeSwitch({ listMode, setListMode }: { - listMode: TListMode - setListMode: (listMode: TListMode) => void + listMode: TNoteListMode + setListMode: (listMode: TNoteListMode) => void }) { const { t } = useTranslation() diff --git a/src/constants.ts b/src/constants.ts index 4c8d564e..2eadaeb4 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -5,12 +5,13 @@ export const StorageKey = { FEED_TYPE: 'feedType', ACCOUNTS: 'accounts', CURRENT_ACCOUNT: 'currentAccount', + ADD_CLIENT_TAG: 'addClientTag', + NOTE_LIST_MODE: 'noteListMode', ACCOUNT_RELAY_LIST_EVENT_MAP: 'accountRelayListEventMap', ACCOUNT_FOLLOW_LIST_EVENT_MAP: 'accountFollowListEventMap', ACCOUNT_MUTE_LIST_EVENT_MAP: 'accountMuteListEventMap', ACCOUNT_MUTE_DECRYPTED_TAGS_MAP: 'accountMuteDecryptedTagsMap', - ACCOUNT_PROFILE_EVENT_MAP: 'accountProfileEventMap', - ADD_CLIENT_TAG: 'addClientTag' + ACCOUNT_PROFILE_EVENT_MAP: 'accountProfileEventMap' } export const BIG_RELAY_URLS = [ diff --git a/src/services/storage.service.ts b/src/services/storage.service.ts index ce4ee015..5d66f298 100644 --- a/src/services/storage.service.ts +++ b/src/services/storage.service.ts @@ -1,7 +1,14 @@ import { StorageKey } from '@/constants' import { isSameAccount } from '@/lib/account' import { randomString } from '@/lib/random' -import { TAccount, TAccountPointer, TFeedType, TRelaySet, TThemeSetting } from '@/types' +import { + TAccount, + TAccountPointer, + TFeedType, + TNoteListMode, + TRelaySet, + TThemeSetting +} from '@/types' import { Event } from 'nostr-tools' const DEFAULT_RELAY_SETS: TRelaySet[] = [ @@ -26,6 +33,7 @@ class StorageService { private themeSetting: TThemeSetting = 'system' private accounts: TAccount[] = [] private currentAccount: TAccount | null = null + private noteListMode: TNoteListMode = 'posts' private accountRelayListEventMap: Record = {} // pubkey -> relayListEvent private accountFollowListEventMap: Record = {} // pubkey -> followListEvent private accountMuteListEventMap: Record = {} // pubkey -> muteListEvent @@ -52,6 +60,11 @@ class StorageService { this.currentAccount = currentAccountStr ? JSON.parse(currentAccountStr) : null const feedTypeStr = window.localStorage.getItem(StorageKey.FEED_TYPE) this.feedType = feedTypeStr ? JSON.parse(feedTypeStr) : 'relays' + const noteListModeStr = window.localStorage.getItem(StorageKey.NOTE_LIST_MODE) + this.noteListMode = + noteListModeStr && ['posts', 'postsAndReplies', 'pictures'].includes(noteListModeStr) + ? (noteListModeStr as TNoteListMode) + : 'posts' const accountRelayListEventMapStr = window.localStorage.getItem( StorageKey.ACCOUNT_RELAY_LIST_EVENT_MAP @@ -156,6 +169,15 @@ class StorageService { this.themeSetting = themeSetting } + getNoteListMode() { + return this.noteListMode + } + + setNoteListMode(mode: TNoteListMode) { + window.localStorage.setItem(StorageKey.NOTE_LIST_MODE, mode) + this.noteListMode = mode + } + getAccounts() { return this.accounts } diff --git a/src/types.ts b/src/types.ts index 5ea9006c..e83a9cd0 100644 --- a/src/types.ts +++ b/src/types.ts @@ -93,3 +93,5 @@ export type TFeedType = 'following' | 'relays' | 'temporary' export type TLanguage = 'en' | 'zh' export type TImageInfo = { url: string; blurHash?: string; dim?: { width: number; height: number } } + +export type TNoteListMode = 'posts' | 'postsAndReplies' | 'pictures'