2 files changed, 50 insertions, 87 deletions

diff --git a/src/state/models/profile-view.ts b/src/state/models/profile-view.ts
index 8630eae52..0988367b6 100644
--- a/src/state/models/profile-view.ts
+++ b/src/state/models/profile-view.ts
@@ -1,5 +1,5 @@
 import {makeAutoObservable, runInAction} from 'mobx'
-import {PickedMedia} from 'view/com/util/images/image-crop-picker/ImageCropPicker'
+import {PickedMedia} from 'lib/media/picker'
 import {
   AppBskyActorGetProfile as GetProfile,
   AppBskyActorProfile as Profile,
@@ -137,11 +137,10 @@ export class ProfileViewModel {
     newUserBanner: PickedMedia | undefined,
   ) {
     if (newUserAvatar) {
-      const res = await this.rootStore.api.com.atproto.blob.upload(
-        newUserAvatar.path, // this will be special-cased by the fetch monkeypatch in /src/state/lib/api.ts
-        {
-          encoding: newUserAvatar.mime,
-        },
+      const res = await apilib.uploadBlob(
+        this.rootStore,
+        newUserAvatar.path,
+        newUserAvatar.mime,
       )
       updates.avatar = {
         cid: res.data.cid,
@@ -149,11 +148,10 @@ export class ProfileViewModel {
       }
     }
     if (newUserBanner) {
-      const res = await this.rootStore.api.com.atproto.blob.upload(
-        newUserBanner.path, // this will be special-cased by the fetch monkeypatch in /src/state/lib/api.ts
-        {
-          encoding: newUserBanner.mime,
-        },
+      const res = await apilib.uploadBlob(
+        this.rootStore,
+        newUserBanner.path,
+        newUserBanner.mime,
       )
       updates.banner = {
         cid: res.data.cid,
diff --git a/src/state/models/shell-ui.ts b/src/state/models/shell-ui.ts
index b9f480ecd..640bed0b3 100644
--- a/src/state/models/shell-ui.ts
+++ b/src/state/models/shell-ui.ts
@@ -2,75 +2,57 @@ import {RootStoreModel} from './root-store'
 import {makeAutoObservable} from 'mobx'
 import {ProfileViewModel} from './profile-view'
 import {isObj, hasProp} from 'lib/type-guards'
-import {PickedMedia} from 'view/com/util/images/image-crop-picker/types'
+import {PickedMedia} from 'lib/media/types'
 
-export class ConfirmModal {
-  name = 'confirm'
-
-  constructor(
-    public title: string,
-    public message: string | (() => JSX.Element),
-    public onPressConfirm: () => void | Promise<void>,
-  ) {
-    makeAutoObservable(this)
-  }
+export interface ConfirmModal {
+  name: 'confirm'
+  title: string
+  message: string | (() => JSX.Element)
+  onPressConfirm: () => void | Promise<void>
 }
 
-export class EditProfileModal {
-  name = 'edit-profile'
-
-  constructor(
-    public profileView: ProfileViewModel,
-    public onUpdate?: () => void,
-  ) {
-    makeAutoObservable(this)
-  }
+export interface EditProfileModal {
+  name: 'edit-profile'
+  profileView: ProfileViewModel
+  onUpdate?: () => void
 }
 
-export class ServerInputModal {
-  name = 'server-input'
-
-  constructor(
-    public initialService: string,
-    public onSelect: (url: string) => void,
-  ) {
-    makeAutoObservable(this)
-  }
+export interface ServerInputModal {
+  name: 'server-input'
+  initialService: string
+  onSelect: (url: string) => void
 }
 
-export class ReportPostModal {
-  name = 'report-post'
-
-  constructor(public postUri: string, public postCid: string) {
-    makeAutoObservable(this)
-  }
+export interface ReportPostModal {
+  name: 'report-post'
+  postUri: string
+  postCid: string
 }
 
-export class ReportAccountModal {
-  name = 'report-account'
-
-  constructor(public did: string) {
-    makeAutoObservable(this)
-  }
+export interface ReportAccountModal {
+  name: 'report-account'
+  did: string
 }
 
-export class CropImageModal {
-  name = 'crop-image'
-
-  constructor(
-    public uri: string,
-    public onSelect: (img?: PickedMedia) => void,
-  ) {}
+export interface CropImageModal {
+  name: 'crop-image'
+  uri: string
+  onSelect: (img?: PickedMedia) => void
 }
 
-export class DeleteAccountModal {
-  name = 'delete-account'
-
-  constructor() {
-    makeAutoObservable(this)
-  }
+export interface DeleteAccountModal {
+  name: 'delete-account'
 }
 
+export type Modal =
+  | ConfirmModal
+  | EditProfileModal
+  | ServerInputModal
+  | ReportPostModal
+  | ReportAccountModal
+  | CropImageModal
+  | DeleteAccountModal
+
 interface LightboxModel {}
 
 export class ProfileImageLightbox implements LightboxModel {
@@ -111,15 +93,7 @@ export class ShellUiModel {
   minimalShellMode = false
   isMainMenuOpen = false
   isModalActive = false
-  activeModal:
-    | ConfirmModal
-    | EditProfileModal
-    | ServerInputModal
-    | ReportPostModal
-    | ReportAccountModal
-    | CropImageModal
-    | DeleteAccountModal
-    | undefined
+  activeModals: Modal[] = []
   isLightboxActive = false
   activeLightbox: ProfileImageLightbox | ImagesLightbox | undefined
   isComposerActive = false
@@ -159,24 +133,15 @@ export class ShellUiModel {
     this.isMainMenuOpen = v
   }
 
-  openModal(
-    modal:
-      | ConfirmModal
-      | EditProfileModal
-      | ServerInputModal
-      | ReportPostModal
-      | ReportAccountModal
-      | CropImageModal
-      | DeleteAccountModal,
-  ) {
+  openModal(modal: Modal) {
     this.rootStore.emitNavigation()
     this.isModalActive = true
-    this.activeModal = modal
+    this.activeModals.push(modal)
   }
 
   closeModal() {
-    this.isModalActive = false
-    this.activeModal = undefined
+    this.activeModals.pop()
+    this.isModalActive = this.activeModals.length > 0
   }
 
   openLightbox(lightbox: ProfileImageLightbox | ImagesLightbox) {