diff --git a/src/app/features/albums/AlbumView.tsx b/src/app/features/albums/AlbumView.tsx index b670ee2b..e60f9533 100644 --- a/src/app/features/albums/AlbumView.tsx +++ b/src/app/features/albums/AlbumView.tsx @@ -15,6 +15,7 @@ import { getBlobSafeMimeType } from '../../utils/mimeTypes'; import { timeDayMonYear } from '../../utils/time'; import { getMemberDisplayName } from '../../utils/room'; import { Album, AlbumFile } from './buildAlbums'; +import { folderOf, listFolder, pathLabel } from './albumFolders'; import { FileReadBy } from './FileReadBy'; import { ShareSet, useShareEnabled } from './ShareSet'; import { useAlbums } from './useAlbums'; @@ -91,6 +92,7 @@ export function AlbumView({ room, onTimeline }: AlbumViewProps) { const { loading, error, albums } = useAlbums(room); const [dateFormat] = useSetting(settingsAtom, 'dateFormatString'); const [openId, setOpenId] = useState(); + const [path, setPath] = useState([]); const open: Album | undefined = albums.find((a) => a.id === openId); const authorOf = (a: Album) => getMemberDisplayName(room, a.author) ?? a.author; const encrypted = room.hasEncryptionStateEvent(); @@ -103,8 +105,17 @@ export function AlbumView({ room, onTimeline }: AlbumViewProps) { const images = open.files.length > 0 && open.files.every((f) => f.kind === 'image'); body = ( <> - {open.title} @@ -120,16 +131,43 @@ export function AlbumView({ room, onTimeline }: AlbumViewProps) { ); } else if (encrypted) body = This zone is encrypted, so its albums cannot be listed here.; - else if (albums.length === 0) body = No albums yet.; + else if (albums.length === 0 && path.length === 0) body = No albums yet.; else { - body = albums.map((a) => ( - - )); + const here = listFolder(albums, path); + body = ( + <> + {path.length > 0 && ( + + )} + {path.length > 0 && {pathLabel(path)}} + {here.folders.map((f) => ( + + ))} + {here.albums.map(({ album: a, leaf }) => ( + + ))} + {here.folders.length === 0 && here.albums.length === 0 && Nothing here.} + + ); } return ( @@ -139,7 +177,7 @@ export function AlbumView({ room, onTimeline }: AlbumViewProps) { {/* Stays mounted while an album is open, so a running send keeps its progress. */} {canShare && ( )}