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)}