Lists updates: curate lists and blocklists (#1689)

* Add lists screen

* Update Lists screen and List create/edit modal to support curate lists

* Rework the ProfileList screen and add curatelist support

* More ProfileList progress

* Update list modals

* Rename mutelists to modlists

* Layout updates/fixes

* More layout fixes

* Modal fixes

* List list screen updates

* Update feed page to give more info

* Layout fixes to ListAddUser modal

* Layout fixes to FlatList and Feed on desktop

* Layout fix to LoadLatestBtn on Web

* Handle did resolution before showing the ProfileList screen

* Rename the CustomFeed routes to ProfileFeed for consistency

* Fix layout issues with the pager and feeds

* Factor out some common code

* Fix UIs for mobile

* Fix user list rendering

* Fix: dont bubble custom feed errors in the merge feed

* Refactor feed models to reduce usage of the SavedFeeds model

* Replace CustomFeedModel with FeedSourceModel which abstracts feed-generators and lists

* Add the ability to pin lists

* Add pinned lists to mobile

* Remove dead code

* Rework the ProfileScreenHeader to create more real-estate for action buttons

* Improve layout behavior on web mobile breakpoints

* Refactor feed & list pages to use new Tabs layout component

* Refactor to ProfileSubpageHeader

* Implement modlist block and mute

* Switch to new api and just modify state on modlist actions

* Fix some UI overflows

* Fix: dont show edit buttons on lists you dont own

* Fix alignment issue on long titles

* Improve loading and error states for feeds & lists

* Update list dropdown icons for ios

* Fetch feed display names in the mergefeed

* Improve rendering off offline feeds in the feed-listing page

* Update Feeds listing UI to react to changes in saved/pinned state

* Refresh list and feed on posts tab press

* Fix pinned feed ordering UI

* Fixes to list pinning

* Remove view=simple qp

* Add list to feed tuners

* Render richtext

* Add list href

* Add 'view avatar'

* Remove unused import

* Fix missing import

* Correctly reflect block by list state

* Replace the <Tabs> component with the more effective <PagerWithHeader> component

* Improve the responsiveness of the PagerWithHeader

* Fix visual jank in the feed loading state

* Improve performance of the PagerWithHeader

* Fix a case that would cause the header to animate too aggressively

* Add the ability to scroll to top by tapping the selected tab

* Fix unit test runner

* Update modlists test

* Add curatelist tests

* Fix: remove link behavior in ListAddUser modal

* Fix some layout jank in the PagerWithHeader on iOS

* Simplify ListItems header rendering

* Wait for the appview to recognize the list before proceeding with list creation

* Fix glitch in the onPageSelecting index of the Pager

* Fix until()

* Copy fix

Co-authored-by: Eric Bailey <git@esb.lol>

---------

Co-authored-by: Eric Bailey <git@esb.lol>

4 files changed, 101 insertions, 133 deletions

diff --git a/src/state/models/ui/my-feeds.ts b/src/state/models/ui/my-feeds.ts
index 6b017709e..58f2e7f65 100644
--- a/src/state/models/ui/my-feeds.ts
+++ b/src/state/models/ui/my-feeds.ts
@@ -1,6 +1,7 @@
-import {makeAutoObservable} from 'mobx'
+import {makeAutoObservable, reaction} from 'mobx'
+import {SavedFeedsModel} from './saved-feeds'
 import {FeedsDiscoveryModel} from '../discovery/feeds'
-import {CustomFeedModel} from '../feeds/custom-feed'
+import {FeedSourceModel} from '../content/feed-source'
 import {RootStoreModel} from '../root-store'
 
 export type MyFeedsItem =
@@ -29,7 +30,7 @@ export type MyFeedsItem =
   | {
       _reactKey: string
       type: 'saved-feed'
-      feed: CustomFeedModel
+      feed: FeedSourceModel
     }
   | {
       _reactKey: string
@@ -46,21 +47,19 @@ export type MyFeedsItem =
   | {
       _reactKey: string
       type: 'discover-feed'
-      feed: CustomFeedModel
+      feed: FeedSourceModel
     }
 
 export class MyFeedsUIModel {
+  saved: SavedFeedsModel
   discovery: FeedsDiscoveryModel
 
   constructor(public rootStore: RootStoreModel) {
     makeAutoObservable(this)
+    this.saved = new SavedFeedsModel(this.rootStore)
     this.discovery = new FeedsDiscoveryModel(this.rootStore)
   }
 
-  get saved() {
-    return this.rootStore.me.savedFeeds
-  }
-
   get isRefreshing() {
     return !this.saved.isLoading && this.saved.isRefreshing
   }
@@ -78,6 +77,21 @@ export class MyFeedsUIModel {
     }
   }
 
+  registerListeners() {
+    const dispose1 = reaction(
+      () => this.rootStore.preferences.savedFeeds,
+      () => this.saved.refresh(),
+    )
+    const dispose2 = reaction(
+      () => this.rootStore.preferences.pinnedFeeds,
+      () => this.saved.refresh(),
+    )
+    return () => {
+      dispose1()
+      dispose2()
+    }
+  }
+
   async refresh() {
     return Promise.all([this.saved.refresh(), this.discovery.refresh()])
   }
diff --git a/src/state/models/ui/preferences.ts b/src/state/models/ui/preferences.ts
index 6ca19b4b7..7714d65df 100644
--- a/src/state/models/ui/preferences.ts
+++ b/src/state/models/ui/preferences.ts
@@ -194,7 +194,7 @@ export class PreferencesModel {
   /**
    * This function fetches preferences and sets defaults for missing items.
    */
-  async sync({clearCache}: {clearCache?: boolean} = {}) {
+  async sync() {
     await this.lock.acquireAsync()
     try {
       // fetch preferences
@@ -252,8 +252,6 @@ export class PreferencesModel {
     } finally {
       this.lock.release()
     }
-
-    await this.rootStore.me.savedFeeds.updateCache(clearCache)
   }
 
   async syncLegacyPreferences() {
@@ -286,6 +284,9 @@ export class PreferencesModel {
     }
   }
 
+  // languages
+  // =
+
   hasContentLanguage(code2: string) {
     return this.contentLanguages.includes(code2)
   }
@@ -358,6 +359,9 @@ export class PreferencesModel {
     return all.join(', ')
   }
 
+  // moderation
+  // =
+
   async setContentLabelPref(
     key: keyof LabelPreferencesModel,
     value: LabelPreference,
@@ -409,6 +413,13 @@ export class PreferencesModel {
     }
   }
 
+  // feeds
+  // =
+
+  isPinnedFeed(uri: string) {
+    return this.pinnedFeeds.includes(uri)
+  }
+
   async _optimisticUpdateSavedFeeds(
     saved: string[],
     pinned: string[],
@@ -474,6 +485,9 @@ export class PreferencesModel {
     )
   }
 
+  // other
+  // =
+
   async setBirthDate(birthDate: Date) {
     this.birthDate = birthDate
     await this.lock.acquireAsync()
@@ -602,7 +616,7 @@ export class PreferencesModel {
   }
 
   getFeedTuners(
-    feedType: 'home' | 'following' | 'author' | 'custom' | 'likes',
+    feedType: 'home' | 'following' | 'author' | 'custom' | 'list' | 'likes',
   ) {
     if (feedType === 'custom') {
       return [
@@ -610,6 +624,9 @@ export class PreferencesModel {
         FeedTuner.preferredLangOnly(this.contentLanguages),
       ]
     }
+    if (feedType === 'list') {
+      return [FeedTuner.dedupReposts]
+    }
     if (feedType === 'home' || feedType === 'following') {
       const feedTuners = []
 
diff --git a/src/state/models/ui/saved-feeds.ts b/src/state/models/ui/saved-feeds.ts
index 2dd72980d..4156f792a 100644
--- a/src/state/models/ui/saved-feeds.ts
+++ b/src/state/models/ui/saved-feeds.ts
@@ -2,7 +2,7 @@ import {makeAutoObservable, runInAction} from 'mobx'
 import {RootStoreModel} from '../root-store'
 import {bundleAsync} from 'lib/async/bundle'
 import {cleanError} from 'lib/strings/errors'
-import {CustomFeedModel} from '../feeds/custom-feed'
+import {FeedSourceModel} from '../content/feed-source'
 import {track} from 'lib/analytics/analytics'
 
 export class SavedFeedsModel {
@@ -13,7 +13,7 @@ export class SavedFeedsModel {
   error = ''
 
   // data
-  _feedModelCache: Record<string, CustomFeedModel> = {}
+  all: FeedSourceModel[] = []
 
   constructor(public rootStore: RootStoreModel) {
     makeAutoObservable(
@@ -38,20 +38,11 @@ export class SavedFeedsModel {
   }
 
   get pinned() {
-    return this.rootStore.preferences.pinnedFeeds
-      .map(uri => this._feedModelCache[uri] as CustomFeedModel)
-      .filter(Boolean)
+    return this.all.filter(feed => feed.isPinned)
   }
 
   get unpinned() {
-    return this.rootStore.preferences.savedFeeds
-      .filter(uri => !this.isPinned(uri))
-      .map(uri => this._feedModelCache[uri] as CustomFeedModel)
-      .filter(Boolean)
-  }
-
-  get all() {
-    return [...this.pinned, ...this.unpinned]
+    return this.all.filter(feed => !feed.isPinned)
   }
 
   get pinnedFeedNames() {
@@ -62,120 +53,38 @@ export class SavedFeedsModel {
   // =
 
   /**
-   * Syncs the cached models against the current state
-   * - Should only be called by the preferences model after syncing state
-   */
-  updateCache = bundleAsync(async (clearCache?: boolean) => {
-    let newFeedModels: Record<string, CustomFeedModel> = {}
-    if (!clearCache) {
-      newFeedModels = {...this._feedModelCache}
-    }
-
-    // collect the feed URIs that havent been synced yet
-    const neededFeedUris = []
-    for (const feedUri of this.rootStore.preferences.savedFeeds) {
-      if (!(feedUri in newFeedModels)) {
-        neededFeedUris.push(feedUri)
-      }
-    }
-
-    // early exit if no feeds need to be fetched
-    if (!neededFeedUris.length || neededFeedUris.length === 0) {
-      return
-    }
-
-    // fetch the missing models
-    try {
-      for (let i = 0; i < neededFeedUris.length; i += 25) {
-        const res = await this.rootStore.agent.app.bsky.feed.getFeedGenerators({
-          feeds: neededFeedUris.slice(i, 25),
-        })
-        for (const feedInfo of res.data.feeds) {
-          newFeedModels[feedInfo.uri] = new CustomFeedModel(
-            this.rootStore,
-            feedInfo,
-          )
-        }
-      }
-    } catch (error) {
-      console.error('Failed to fetch feed models', error)
-      this.rootStore.log.error('Failed to fetch feed models', error)
-    }
-
-    // merge into the cache
-    runInAction(() => {
-      this._feedModelCache = newFeedModels
-    })
-  })
-
-  /**
    * Refresh the preferences then reload all feed infos
    */
   refresh = bundleAsync(async () => {
     this._xLoading(true)
     try {
-      await this.rootStore.preferences.sync({clearCache: true})
+      await this.rootStore.preferences.sync()
+      const uris = dedup(
+        this.rootStore.preferences.pinnedFeeds.concat(
+          this.rootStore.preferences.savedFeeds,
+        ),
+      )
+      const feeds = uris.map(uri => new FeedSourceModel(this.rootStore, uri))
+      await Promise.all(feeds.map(f => f.setup()))
+      runInAction(() => {
+        this.all = feeds
+        this._updatePinSortOrder()
+      })
       this._xIdle()
     } catch (e: any) {
       this._xIdle(e)
     }
   })
 
-  async save(feed: CustomFeedModel) {
-    try {
-      await feed.save()
-      await this.updateCache()
-    } catch (e: any) {
-      this.rootStore.log.error('Failed to save feed', e)
-    }
-  }
-
-  async unsave(feed: CustomFeedModel) {
-    const uri = feed.uri
-    try {
-      if (this.isPinned(feed)) {
-        await this.rootStore.preferences.removePinnedFeed(uri)
-      }
-      await feed.unsave()
-    } catch (e: any) {
-      this.rootStore.log.error('Failed to unsave feed', e)
-    }
-  }
-
-  async togglePinnedFeed(feed: CustomFeedModel) {
-    if (!this.isPinned(feed)) {
-      track('CustomFeed:Pin', {
-        name: feed.data.displayName,
-        uri: feed.uri,
-      })
-      return this.rootStore.preferences.addPinnedFeed(feed.uri)
-    } else {
-      track('CustomFeed:Unpin', {
-        name: feed.data.displayName,
-        uri: feed.uri,
-      })
-      return this.rootStore.preferences.removePinnedFeed(feed.uri)
-    }
-  }
-
-  async reorderPinnedFeeds(feeds: CustomFeedModel[]) {
-    return this.rootStore.preferences.setSavedFeeds(
+  async reorderPinnedFeeds(feeds: FeedSourceModel[]) {
+    this._updatePinSortOrder(feeds.map(f => f.uri))
+    await this.rootStore.preferences.setSavedFeeds(
       this.rootStore.preferences.savedFeeds,
-      feeds.filter(feed => this.isPinned(feed)).map(feed => feed.uri),
+      feeds.filter(feed => feed.isPinned).map(feed => feed.uri),
     )
   }
 
-  isPinned(feedOrUri: CustomFeedModel | string) {
-    let uri: string
-    if (typeof feedOrUri === 'string') {
-      uri = feedOrUri
-    } else {
-      uri = feedOrUri.uri
-    }
-    return this.rootStore.preferences.pinnedFeeds.includes(uri)
-  }
-
-  async movePinnedFeed(item: CustomFeedModel, direction: 'up' | 'down') {
+  async movePinnedFeed(item: FeedSourceModel, direction: 'up' | 'down') {
     const pinned = this.rootStore.preferences.pinnedFeeds.slice()
     const index = pinned.indexOf(item.uri)
     if (index === -1) {
@@ -194,8 +103,9 @@ export class SavedFeedsModel {
       this.rootStore.preferences.savedFeeds,
       pinned,
     )
+    this._updatePinSortOrder()
     track('CustomFeed:Reorder', {
-      name: item.data.displayName,
+      name: item.displayName,
       uri: item.uri,
       index: pinned.indexOf(item.uri),
     })
@@ -219,4 +129,20 @@ export class SavedFeedsModel {
       this.rootStore.log.error('Failed to fetch user feeds', err)
     }
   }
+
+  // helpers
+  // =
+
+  _updatePinSortOrder(order?: string[]) {
+    order ??= this.rootStore.preferences.pinnedFeeds.concat(
+      this.rootStore.preferences.savedFeeds,
+    )
+    this.all.sort((a, b) => {
+      return order!.indexOf(a.uri) - order!.indexOf(b.uri)
+    })
+  }
+}
+
+function dedup(strings: string[]): string[] {
+  return Array.from(new Set(strings))
 }
diff --git a/src/state/models/ui/shell.ts b/src/state/models/ui/shell.ts
index a8937b84c..9c0cc6e30 100644
--- a/src/state/models/ui/shell.ts
+++ b/src/state/models/ui/shell.ts
@@ -1,4 +1,4 @@
-import {AppBskyEmbedRecord, ModerationUI} from '@atproto/api'
+import {AppBskyEmbedRecord, AppBskyActorDefs, ModerationUI} from '@atproto/api'
 import {RootStoreModel} from '../root-store'
 import {makeAutoObservable, runInAction} from 'mobx'
 import {ProfileModel} from '../content/profile'
@@ -60,17 +60,25 @@ export type ReportModal = {
   | {did: string}
 )
 
-export interface CreateOrEditMuteListModal {
-  name: 'create-or-edit-mute-list'
+export interface CreateOrEditListModal {
+  name: 'create-or-edit-list'
+  purpose?: string
   list?: ListModel
   onSave?: (uri: string) => void
 }
 
-export interface ListAddRemoveUserModal {
-  name: 'list-add-remove-user'
+export interface UserAddRemoveListsModal {
+  name: 'user-add-remove-lists'
   subject: string
   displayName: string
-  onUpdate?: () => void
+  onAdd?: (listUri: string) => void
+  onRemove?: (listUri: string) => void
+}
+
+export interface ListAddUserModal {
+  name: 'list-add-user'
+  list: ListModel
+  onAdd?: (profile: AppBskyActorDefs.ProfileViewBasic) => void
 }
 
 export interface EditImageModal {
@@ -180,8 +188,11 @@ export type Modal =
   // Moderation
   | ModerationDetailsModal
   | ReportModal
-  | CreateOrEditMuteListModal
-  | ListAddRemoveUserModal
+
+  // Lists
+  | CreateOrEditListModal
+  | UserAddRemoveListsModal
+  | ListAddUserModal
 
   // Posts
   | AltTextImageModal