feat: remember the last used note list mode

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<Event[]>([])
   const [hasMore, setHasMore] = useState<boolean>(true)
   const [refreshing, setRefreshing] = useState(true)
-  const [listMode, setListMode] = useState<TListMode>('posts')
+  const [listMode, setListMode] = useState<TNoteListMode>(() => storage.getNoteListMode())
   const bottomRef = useRef<HTMLDivElement | null>(null)
   const isPictures = useMemo(() => listMode === 'pictures', [listMode])
   const noteFilter = useMemo(() => {
@@ -171,7 +171,13 @@ export default function NoteList({
 
   return (
     <div className={cn('space-y-2 sm:space-y-2', className)}>
-      <ListModeSwitch listMode={listMode} setListMode={setListMode} />
+      <ListModeSwitch
+        listMode={listMode}
+        setListMode={(listMode) => {
+          setListMode(listMode)
+          storage.setNoteListMode(listMode)
+        }}
+      />
       <PullToRefresh
         onRefresh={async () => {
           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()
 

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 = [

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<string, Event | undefined> = {} // pubkey -> relayListEvent
   private accountFollowListEventMap: Record<string, Event | undefined> = {} // pubkey -> followListEvent
   private accountMuteListEventMap: Record<string, Event | undefined> = {} // 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
   }

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'