feat: filter profile photos by public/private visibility (#628)

Author: juanmahidalgo

src/components/Reels/ImageActions/ImageActions.spec.tsx

@@ -35,6 +35,7 @@ const fakeImage = {
   id: 'img-1',
   url: 'https://image.url/blob',
   thumbnailUrl: '',
+  isPublic: true,
   metadata: {
     userName: 'alice',
     userAddress: '0xa',

src/components/Reels/ImageViewer/ImageViewer.spec.tsx

@@ -18,6 +18,7 @@ const fakeImage = {
   id: 'img-1',
   url: 'https://image.url/foo.jpg',
   thumbnailUrl: '',
+  isPublic: true,
   metadata: {
     userName: 'alice',
     userAddress: '0xa',

src/components/profile/ProfileTabs/useProfileTabAvailability.spec.ts

@@ -3,22 +3,19 @@ import { useGetProfileAssetsQuery } from '../../../features/profile/profile.asse
 import { useGetProfileCreationsQuery } from '../../../features/profile/profile.creations.client'
 import { useGetProfilePlacesQuery } from '../../../features/profile/profile.places.client'
 import { useGetProfileCommunitiesQuery } from '../../../features/profile/profile.social.client'
-import { useAuthIdentity } from '../../../hooks/useAuthIdentity'
 import { useReelImagesByUser } from '../../../hooks/useReelImagesByUser'
 import { useProfileTabAvailability } from './useProfileTabAvailability'
 
 jest.mock('../../../features/profile/profile.assets.client', () => ({ useGetProfileAssetsQuery: jest.fn() }))
 jest.mock('../../../features/profile/profile.creations.client', () => ({ useGetProfileCreationsQuery: jest.fn() }))
 jest.mock('../../../features/profile/profile.places.client', () => ({ useGetProfilePlacesQuery: jest.fn() }))
 jest.mock('../../../features/profile/profile.social.client', () => ({ useGetProfileCommunitiesQuery: jest.fn() }))
-jest.mock('../../../hooks/useAuthIdentity', () => ({ useAuthIdentity: jest.fn() }))
 jest.mock('../../../hooks/useReelImagesByUser', () => ({ useReelImagesByUser: jest.fn() }))
 
 const mockedUsePlaces = useGetProfilePlacesQuery as jest.MockedFunction<typeof useGetProfilePlacesQuery>
 const mockedUseCreations = useGetProfileCreationsQuery as jest.MockedFunction<typeof useGetProfileCreationsQuery>
 const mockedUseAssets = useGetProfileAssetsQuery as jest.MockedFunction<typeof useGetProfileAssetsQuery>
 const mockedUseCommunities = useGetProfileCommunitiesQuery as jest.MockedFunction<typeof useGetProfileCommunitiesQuery>
-const mockedUseAuthIdentity = useAuthIdentity as jest.MockedFunction<typeof useAuthIdentity>
 const mockedUseReelImages = useReelImagesByUser as jest.MockedFunction<typeof useReelImagesByUser>
 
 const ADDRESS = '0xaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
@@ -28,7 +25,6 @@ const emptyPhotosResult = { images: [], total: 0, isLoading: false, error: null
 
 describe('useProfileTabAvailability', () => {
   beforeEach(() => {
-    mockedUseAuthIdentity.mockReturnValue({ identity: undefined } as unknown as ReturnType<typeof useAuthIdentity>)
     mockedUsePlaces.mockReturnValue(emptyQueryResult as unknown as ReturnType<typeof useGetProfilePlacesQuery>)
     mockedUseCreations.mockReturnValue(emptyQueryResult as unknown as ReturnType<typeof useGetProfileCreationsQuery>)
     mockedUseAssets.mockReturnValue(emptyQueryResult as unknown as ReturnType<typeof useGetProfileAssetsQuery>)
@@ -116,5 +112,11 @@ describe('useProfileTabAvailability', () => {
 
       expect(result.current.hidden.size).toBe(0)
     })
+
+    it('should probe photos unsigned so private snapshots never reveal the tab', () => {
+      renderHook(() => useProfileTabAvailability(ADDRESS, true))
+
+      expect(mockedUseReelImages).toHaveBeenCalledWith(ADDRESS, { limit: 1, offset: 0 })
+    })
   })
 })

src/components/profile/ProfileTabs/useProfileTabAvailability.ts

@@ -3,7 +3,6 @@ import { useGetProfileAssetsQuery } from '../../../features/profile/profile.asse
 import { useGetProfileCreationsQuery } from '../../../features/profile/profile.creations.client'
 import { useGetProfilePlacesQuery } from '../../../features/profile/profile.places.client'
 import { useGetProfileCommunitiesQuery } from '../../../features/profile/profile.social.client'
-import { useAuthIdentity } from '../../../hooks/useAuthIdentity'
 import { useReelImagesByUser } from '../../../hooks/useReelImagesByUser'
 import type { ProfileTab } from './ProfileTabs.types'
 
@@ -17,16 +16,17 @@ interface TabAvailability {
 const PROBE_OPTIONS = { limit: 1, offset: 0 } as const
 
 function useProfileTabAvailability(address: string, isOwnProfile: boolean): TabAvailability {
-  const { identity } = useAuthIdentity()
-
   const places = useGetProfilePlacesQuery({ address, limit: 1, offset: 0 })
   const wearables = useGetProfileCreationsQuery({ address, category: 'wearable', limit: 1, offset: 0 }, { skip: isOwnProfile })
   const emotes = useGetProfileCreationsQuery({ address, category: 'emote', limit: 1, offset: 0 }, { skip: isOwnProfile })
   const assets = useGetProfileAssetsQuery({ address, limit: 1, offset: 0 }, { skip: !isOwnProfile })
   // Member view gets the target user's publicly visible communities (public + listed) — the
   // endpoint only returns the full list (incl. private/unlisted) for the member themselves.
   const communities = useGetProfileCommunitiesQuery({ address, limit: 1, offset: 0 })
-  const photos = useReelImagesByUser(address, PROBE_OPTIONS, isOwnProfile ? identity : undefined)
+  // Probe public photos only (unsigned) so the photos tab is revealed on a member profile solely
+  // when the user has public snapshots — matching what the gallery actually renders. On the own
+  // profile the tab is always shown (see below), so this probe's result is unused there.
+  const photos = useReelImagesByUser(address, PROBE_OPTIONS)
 
   return useMemo(() => {
     // Reveal-on-data model: on a MEMBER profile every data-driven tab starts hidden and only

src/features/reels/reels.client.spec.ts

@@ -1,8 +1,9 @@
+const fetchWithIdentityMock = jest.fn()
 jest.mock('../../utils/signedFetch', () => ({
-  fetchWithIdentity: jest.fn(),
-  fetchWithOptionalIdentity: jest.fn()
+  fetchWithIdentity: (...args: unknown[]) => fetchWithIdentityMock(...args)
 }))
 
+import type { AuthIdentity } from '@dcl/crypto'
 import { clearImageCache, enrichWearables, fetchImageById, fetchImagesByUser, fetchProfileFaces, isMaticUrn } from './reels.client'
 
 const envMock = jest.fn<string | undefined, [string]>((key: string) => {
@@ -32,6 +33,7 @@ afterAll(() => {
 
 beforeEach(() => {
   fetchMock.mockReset()
+  fetchWithIdentityMock.mockReset()
   clearImageCache()
 })
 
@@ -74,6 +76,24 @@ describe('reels.client', () => {
       fetchMock.mockResolvedValue({ ok: false })
       await expect(fetchImagesByUser('0xabc', { limit: 24, offset: 0 })).rejects.toThrow()
     })
+
+    it('should sign the request with the identity when one is provided (owner gallery)', async () => {
+      const identity = { authChain: [] } as unknown as AuthIdentity
+      fetchWithIdentityMock.mockResolvedValue({ ok: true, json: async () => ({ images: [], currentImages: 0, maxImages: 0 }) })
+      const signal = new AbortController().signal
+
+      await fetchImagesByUser('0xabc', { limit: 24, offset: 0 }, signal, identity)
+
+      expect(fetchWithIdentityMock).toHaveBeenCalledWith(
+        'https://reels-test.local/api/users/0xabc/images?limit=24&offset=0',
+        identity,
+        'GET',
+        undefined,
+        undefined,
+        signal
+      )
+      expect(fetchMock).not.toHaveBeenCalled()
+    })
   })
 
   describe('when classifying a URN as matic vs ethereum', () => {

src/features/reels/reels.client.ts

@@ -26,6 +26,11 @@ async function fetchImageById(id: string, signal?: AbortSignal): Promise<Image>
   return image
 }
 
+// camera-reel-service has no visibility query param — it gates visibility purely by auth: a request
+// signed as the owner returns ALL images (public + private, each carrying `isPublic`), an unsigned
+// request returns only public ones. So pass `identity` ONLY when fetching the owner's own gallery
+// (so they can filter public/private client-side); never pass it for someone else's gallery, or it
+// would leak that user's private snapshots.
 async function fetchImagesByUser(
   address: string,
   options: FetchListOptions,

src/features/reels/reels.types.ts

@@ -38,6 +38,10 @@ interface Image {
   id: string
   url: string
   thumbnailUrl: string
+  // Whether the owner published this snapshot to their public gallery. Only meaningful when the
+  // listing was fetched signed-as-owner (the unsigned listing already excludes private images);
+  // drives the owner-only visibility filter in the profile "My Photos" tab.
+  isPublic: boolean
   metadata: ImageMetadata
 }
 

src/hooks/useReelImagesByUser.spec.ts

@@ -41,5 +41,13 @@ describe('useReelImagesByUser', () => {
       expect(result.current.error?.message).toBe('boom')
       expect(result.current.images).toEqual([])
     })
+
+    it('should forward the identity to the fetch so the owner gallery is signed', async () => {
+      const identity = { authChain: [] } as unknown as Parameters<typeof useReelImagesByUser>[2]
+      reelsMock.fetchImagesByUser.mockResolvedValue({ images: [], currentImages: 0, maxImages: 0 })
+      renderHook(() => useReelImagesByUser('0xabc', { limit: 24, offset: 0 }, identity))
+      await waitFor(() => expect(reelsMock.fetchImagesByUser).toHaveBeenCalled())
+      expect(reelsMock.fetchImagesByUser).toHaveBeenCalledWith('0xabc', { limit: 24, offset: 0 }, expect.anything(), identity)
+    })
   })
 })

src/hooks/useReelImagesByUser.ts

@@ -10,6 +10,8 @@ interface ReelImagesState {
   error: Error | null
 }
 
+// Pass `identity` only to fetch the signed-in user's OWN gallery (returns public + private). Leave it
+// undefined for anyone else's gallery so the unsigned listing returns public images only.
 const useReelImagesByUser = (address: string | undefined, options: FetchListOptions, identity?: AuthIdentity): ReelImagesState => {
   const [state, setState] = useState<ReelImagesState>({
     images: [],

src/intl/en.json

@@ -1583,7 +1583,11 @@
       "empty_member": "This member has not taken any photos yet.",
       "count": "{count} photos",
       "empty_owner_subtitle": "Jump in and start collecting memories! Press 'C' to open the Camera and 'Space bar' to snap a photo.",
-      "empty_owner_cta": "Jump in"
+      "empty_owner_cta": "Jump in",
+      "filter_all": "All",
+      "filter_public": "Public",
+      "filter_private": "Private",
+      "empty_filter": "No photos match this filter."
     },
     "referral_rewards": {
       "anonymous": "Sign in to invite friends and unlock rewards.",