diff --git a/src/components/MediaGrid.tsx b/src/components/MediaCollage.tsx similarity index 97% rename from src/components/MediaGrid.tsx rename to src/components/MediaCollage.tsx index f3f05321..bc91c934 100644 --- a/src/components/MediaGrid.tsx +++ b/src/components/MediaCollage.tsx @@ -1,5 +1,5 @@ /** - * MediaGrid — justified row-based collage for Nostr media events (Google Photos style). + * MediaCollage — justified row-based collage for Nostr media events (Google Photos style). * Supports images, video, and audio. Images respect their aspect ratios from imeta `dim` tags. * All media across all events is flattened into one array so the Lightbox strip swipe * just advances through them in order. @@ -313,7 +313,7 @@ const SKELETON_ROWS_MOBILE = [ [1.5, 0.8], ]; -export function MediaGridSkeleton({ count = 15 }: { count?: number }) { +export function MediaCollageSkeleton({ count = 15 }: { count?: number }) { const isMobile = useIsMobile(); const skeletonRows = isMobile ? SKELETON_ROWS_MOBILE : SKELETON_ROWS_DESKTOP; const perRow = isMobile ? 2 : 3; @@ -346,9 +346,9 @@ export function MediaGridSkeleton({ count = 15 }: { count?: number }) { ); } -// ── MediaGrid ───────────────────────────────────────────────────────────────── +// ── MediaCollage ───────────────────────────────────────────────────────────────── -interface MediaGridProps { +interface MediaCollageProps { events: NostrEvent[]; className?: string; /** If set, the lightbox opens at this URL on mount (used by sidebar click). */ @@ -362,7 +362,7 @@ interface MediaGridProps { isFetchingNextPage?: boolean; } -export function MediaGrid({ events, className, initialOpenUrl, onInitialOpenConsumed, onNearEnd, hasNextPage }: MediaGridProps) { +export function MediaCollage({ events, className, initialOpenUrl, onInitialOpenConsumed, onNearEnd, hasNextPage }: MediaCollageProps) { const isMobile = useIsMobile(); const items = useMemo( diff --git a/src/components/ProfileRightSidebar.tsx b/src/components/ProfileRightSidebar.tsx index 577481ba..a18b5483 100644 --- a/src/components/ProfileRightSidebar.tsx +++ b/src/components/ProfileRightSidebar.tsx @@ -16,7 +16,7 @@ import QRCode from 'qrcode'; import { useAppContext } from '@/hooks/useAppContext'; import { getContentWarning } from '@/lib/contentWarning'; import { MiniAudioPlayer, isAudioUrl } from '@/components/MiniAudioPlayer'; -import { parseDimToAspectRatio } from '@/components/MediaGrid'; +import { parseDimToAspectRatio } from '@/components/MediaCollage'; /** Simple email regex for display purposes. */ const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; diff --git a/src/pages/PhotosFeedPage.tsx b/src/pages/PhotosFeedPage.tsx index fd5080cc..25da1c6c 100644 --- a/src/pages/PhotosFeedPage.tsx +++ b/src/pages/PhotosFeedPage.tsx @@ -3,7 +3,7 @@ * * - Follows tab: useFeed (relay pool, chronological) * - Global tab: useInfiniteHotFeed (sort:hot via relay.ditto.pub) - * - Infinite-scroll 3-column grid via the shared MediaGrid component + * - Infinite-scroll justified collage via the shared MediaCollage component */ import { useEffect, useMemo } from 'react'; @@ -26,7 +26,7 @@ import { sidebarItemIcon } from '@/lib/sidebarItems'; import { getExtraKindDef } from '@/lib/extraKinds'; import { cn } from '@/lib/utils'; import type { FeedItem } from '@/lib/feedUtils'; -import { MediaGrid, MediaGridSkeleton, eventToMediaItem } from '@/components/MediaGrid'; +import { MediaCollage, MediaCollageSkeleton, eventToMediaItem } from '@/components/MediaCollage'; const PHOTO_KIND = 20; const photosDef = getExtraKindDef('photos')!; @@ -130,7 +130,7 @@ export function PhotosFeedPage() { {/* Grid */} {showSkeleton ? ( - + ) : photoEvents.length === 0 ? ( ) : ( <> - {mediaPending ? ( - + ) : mediaEvents.length > 0 ? ( <> - setSidebarMediaUrl(null)}