Mobile: fix /playlists/:id deep link routing (#14092)

<!-- CURSOR_AGENT_PR_BODY_BEGIN -->
### What’s going on
On mobile, the deep-link handler was treating opaque playlist ID URLs
like `/playlists/:id` as **profile** links. It navigated to the
`Profile` screen with `id` set to the playlist id, which leaves the
profile page stuck showing its skeleton.

### Fix
- Route `/playlists/:id` to the `Collection` screen with `{ id }`.
- Extracted the deeplink path parsing into a small utility so it can be
unit-tested.

### Tests
- Added a focused Jest test covering `/users/:id` → `Profile` and
`/playlists/:id` → `Collection`.
  - Run with: `npx jest -c packages/mobile/jest.deeplink.config.js`
<!-- CURSOR_AGENT_PR_BODY_END -->

<div><a
href="https://cursor.com/agents/bc-37346ac6-0218-419a-8300-7005d3f2530b"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/assets/images/open-in-web-dark.png"><source
media="(prefers-color-scheme: light)"
srcset="https://cursor.com/assets/images/open-in-web-light.png"><img
alt="Open in Web" width="114" height="28"
src="https://cursor.com/assets/images/open-in-web-dark.png"></picture></a>&nbsp;<a
href="https://cursor.com/background-agent?bcId=bc-37346ac6-0218-419a-8300-7005d3f2530b"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/assets/images/open-in-cursor-dark.png"><source
media="(prefers-color-scheme: light)"
srcset="https://cursor.com/assets/images/open-in-cursor-light.png"><img
alt="Open in Cursor" width="131" height="28"
src="https://cursor.com/assets/images/open-in-cursor-dark.png"></picture></a>&nbsp;</div>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Dylan Jeffers <dylanjeffers@users.noreply.github.com>

Author: dylanjeffers

packages/mobile/babel.config.js

@@ -10,6 +10,7 @@ module.exports = (api) => {
         extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
         root: ['.'],
         alias: {
+          app: './src',
           '@audius/common/adapters': '../common/src/adapters',
           '@audius/common/messages': '../common/src/messages',
           '@audius/common/hooks': '../common/src/hooks',

packages/mobile/jest.deeplink.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  testMatch: ['<rootDir>/src/components/navigation-container/**/*.test.ts'],
+  testEnvironment: 'node',
+  setupFilesAfterEnv: [],
+  transformIgnorePatterns: ['/node_modules/'],
+  moduleNameMapper: {
+    '^react-native$': '<rootDir>/__mocks__/react-native.js',
+    '^react-native/(.*)$': '<rootDir>/__mocks__/react-native.js',
+    '^~/(.*)$': '<rootDir>/src/$1',
+    '^app/(.*)$': '<rootDir>/src/$1',
+    '^@audius/sdk$': '<rootDir>/../sdk/src',
+    '^@audius/sdk/(.*)$': '<rootDir>/../sdk/src/$1'
+  }
+}
+

packages/mobile/jest.setup.js

@@ -0,0 +1 @@
+require('@testing-library/jest-native/extend-expect')

packages/mobile/package.json

@@ -217,8 +217,13 @@
   },
   "jest": {
     "preset": "react-native",
-    "setupFilesAfterEnv": [
-      "@testing-library/jest-native/extend-expect"
+    "setupFilesAfterEnv": ["<rootDir>/jest.setup.js"],
+    "moduleNameMapper": {
+      "^react-native$": "<rootDir>/node_modules/react-native",
+      "^@testing-library/react-native$": "<rootDir>/node_modules/@testing-library/react-native"
+    },
+    "transformIgnorePatterns": [
+      "node_modules/(?!((jest-)?react-native|@react-native(-community)?|react-native-reanimated)/)"
     ],
     "moduleFileExtensions": [
       "ts",

packages/mobile/src/components/navigation-container/NavigationContainer.test.ts

@@ -0,0 +1,60 @@
+import { getNavigationStateFromDeeplinkPath } from 'app/utils/deeplink/getNavigationStateFromDeeplinkPath'
+
+const stubGetStateFromPath = (path: string) =>
+  path.startsWith('/track/')
+    ? { routes: [{ name: 'Track' }] }
+    : path.startsWith('/profile')
+      ? { routes: [{ name: 'UserProfile' }] }
+      : path.includes('/collection/')
+        ? { routes: [{ name: 'Collection' }] }
+        : { routes: [{ name: path }] }
+
+const getLeafRouteName = (state: any): string | undefined => {
+  let current: any = state
+  while (current?.routes?.length) {
+    current = current.routes[current.index ?? 0]
+    if (current?.state) current = current.state
+  }
+  return current?.name
+}
+
+describe('getNavigationStateFromDeeplinkPath', () => {
+  test('routes /users/:id to Profile', () => {
+    const state = getNavigationStateFromDeeplinkPath({
+      path: '/users/Nz9yBb4',
+      options: undefined,
+      hasAccount: true,
+      accountHandle: 'someone',
+      routeName: '/trending',
+      getStateFromPath: stubGetStateFromPath as any
+    })
+
+    expect(getLeafRouteName(state)).toBe('Profile')
+  })
+
+  test('routes /playlists/:id to Collection', () => {
+    const state = getNavigationStateFromDeeplinkPath({
+      path: '/playlists/Nz9yBb4',
+      options: undefined,
+      hasAccount: true,
+      accountHandle: 'someone',
+      routeName: '/trending',
+      getStateFromPath: stubGetStateFromPath as any
+    })
+
+    expect(getLeafRouteName(state)).toBe('Collection')
+  })
+
+  test('does not rewrite current user playlist permalink to /profile', () => {
+    const state = getNavigationStateFromDeeplinkPath({
+      path: '/Audius/playlist/140',
+      options: undefined,
+      hasAccount: true,
+      accountHandle: 'Audius',
+      routeName: '/trending',
+      getStateFromPath: stubGetStateFromPath as any
+    })
+
+    expect(getLeafRouteName(state)).toBe('Collection')
+  })
+})