Modals: wire nice-modal bridge saga + bridge createModal opens

Two fixes to the Wave D modal bridge that previously left several modals
unable to open:

1. The bridge saga (`niceModalBridgeSagas`) was defined in `common` but
   never spawned by web or mobile rootSagas, so even the existing
   `setVisibility(id, true) → showNiceModal(id)` translation was dead
   code. Add it to both rootSagas and re-export from
   `@audius/common/services` so consumers can import it directly.

2. createModal-driven modals (LeavingAudiusModal, ArtistPickModal, etc.)
   open via `useFooModal().onOpen()` which dispatches
   `modals/{id}/open` — not the parent `setVisibility`. The bridge only
   listened for `setVisibility`, so these modals never reached
   `showNiceModal`. Add `watchOpenViaCreateModal` that matches the
   generic `modals/{id}/(open|close|closed)` action shape and bridges to
   `showNiceModal` / `hideNiceModal` when the id is in the registry.

Together this restores Wave D's NiceModal-managed modals and unblocks
migrating the remaining createModal-based modals in subsequent waves.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: dylanjeffers

packages/common/src/services/nice-modal-bridge/index.ts

@@ -70,3 +70,5 @@ export const registerNiceModalId = (id: string) => {
 }
 
 export const isNiceModalId = (id: string): boolean => niceModalIds.has(id)
+
+export { default as niceModalBridgeSagas } from './sagas'

packages/common/src/services/nice-modal-bridge/sagas.ts

@@ -1,30 +1,41 @@
+import { Action } from '@reduxjs/toolkit'
+import { takeEvery as untypedTakeEvery } from 'redux-saga/effects'
 import { takeEvery, call } from 'typed-redux-saga'
 
 import { setVisibility } from '~/store/ui/modals/parentSlice'
 
-import {
-  hideNiceModal,
-  isNiceModalId,
-  showNiceModal
-} from './index'
+import { hideNiceModal, isNiceModalId, showNiceModal } from './index'
 
 /**
- * Bridge saga: translates legacy redux-driven `setVisibility(id, true|false)`
- * actions into `showNiceModal(id)` / `hideNiceModal(id)` for any modal id
- * that has registered itself via `registerNiceModalId(...)`.
+ * Bridge saga: translates legacy redux-driven modal trigger actions into
+ * `showNiceModal(id)` / `hideNiceModal(id)` for any modal id that has
+ * registered itself via `registerNiceModalId(...)`.
+ *
+ * Two trigger shapes need to bridge:
+ *
+ *   1. `parentSlice.setVisibility({ modal, visible })` — used by hand-written
+ *      trigger sites that dispatch directly against the parent registry.
+ *
+ *   2. `modals/{reducerPath}/open` — emitted by the per-modal hooks created
+ *      by `createModal()`. e.g. `useLeavingAudiusModal().onOpen({ link })`
+ *      dispatches `modals/LeavingAudiusModal/open`. We watch this generic
+ *      action shape so createModal-driven modals migrate without editing
+ *      every trigger site.
  *
  * This lets NiceModal-managed modals coexist with the legacy modal registry
- * — every existing trigger site that dispatches `setVisibility` keeps
- * working unchanged, and migrating a modal to NiceModal becomes:
+ * — every existing trigger site keeps working unchanged, and migrating a
+ * modal to NiceModal becomes:
  *   1. Wrap with `NiceModal.create(...)`
- *   2. `NiceModal.register('X', Component)`
- *   3. `registerNiceModalId('X')`
- *   4. Add a side-effect import to `registerNiceModals.ts`
- *   5. Remove from web `Modals.tsx` / mobile `Drawers.tsx` (avoid double-mount)
+ *   2. `NiceModal.register('X', Component)` + `registerNiceModalId('X')`
+ *   3. Side-effect import in `registerNiceModals.ts`
+ *   4. Remove from web `Modals.tsx` / mobile `Drawers.tsx` (avoid double-mount)
  *
  * Once every caller has been moved to call `showNiceModal` directly, this
  * bridge can be deleted.
  */
+
+const CREATE_MODAL_ACTION_RE = /^modals\/(.+)\/(open|close|closed)$/
+
 function* watchOpenViaSetVisibility() {
   yield takeEvery(
     setVisibility,
@@ -43,6 +54,26 @@ function* watchOpenViaSetVisibility() {
   )
 }
 
+function* watchOpenViaCreateModal() {
+  // Match every action and filter inside. We use plain redux-saga's
+  // `takeEvery('*', ...)` here because typed-redux-saga's takeEvery typings
+  // and runtime path don't reliably accept the wildcard pattern.
+  yield untypedTakeEvery('*', function* (action: Action) {
+    if (typeof action?.type !== 'string') return
+    const match = action.type.match(CREATE_MODAL_ACTION_RE)
+    if (!match) return
+    const [, modalId, kind] = match
+    if (!isNiceModalId(modalId)) return
+    if (kind === 'open') {
+      yield call(showNiceModal, modalId)
+    } else {
+      // 'close' / 'closed' — NiceModal owns its own exit animation, so
+      // just hide. modal.remove() is called automatically.
+      yield call(hideNiceModal, modalId)
+    }
+  })
+}
+
 export default function niceModalBridgeSagas() {
-  return [watchOpenViaSetVisibility]
+  return [watchOpenViaSetVisibility, watchOpenViaCreateModal]
 }

packages/mobile/src/store/sagas.ts

@@ -1,3 +1,4 @@
+import { niceModalBridgeSagas } from '@audius/common/services'
 import {
   buyUSDCSagas,
   castSagas,
@@ -82,6 +83,7 @@ export default function* rootSaga() {
     ...stripeModalUISagas(),
 
     ...modalsSagas(),
+    ...niceModalBridgeSagas(),
 
     // Pages
     ...trackPageSagas(),

packages/web/src/store/sagas.ts

@@ -1,3 +1,4 @@
+import { niceModalBridgeSagas } from '@audius/common/services'
 import {
   buyUSDCSagas,
   castSagas,
@@ -80,6 +81,7 @@ export default function* rootSaga() {
     trackPageSagas(),
 
     modalsSagas(),
+    niceModalBridgeSagas(),
 
     // Cache
     collectionsSagas(),