A Media gallery page for user/group accounts

CHANGELOG.md

@@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [1.146.0] - Not released
+### Added
+- "All media" page for users and groups with single gallery of all visual
+  attachments from all page's posts.
+- Lightbox captions on "All media" showing author avatar, username, and a post
+  text excerpt with a link to the original post.
 
 ## [1.145.0] - 2026-02-21
 ### Added

src/app.jsx

@@ -41,6 +41,7 @@ const Subscriptions = lazyLoad(() => import('./components/subscriptions'));
 const Summary = lazyLoad(() => import('./components/summary'));
 const Groups = lazyLoad(() => import('./components/groups'));
 const BacklinksFeed = lazyLoad(() => import('./components/backlinks-feed'));
+const UserMedia = lazyLoad(() => import('./components/user-media'));
 
 Sentry.init({
   dsn: CONFIG.sentry.publicDSN,
@@ -419,6 +420,12 @@ function App() {
                 component={User}
                 {...generateRouteHooks(boundRouteActions('userLikes'))}
               />
+              <Route
+                name="userMedia"
+                path="/:userName/media"
+                component={UserMedia}
+                {...generateRouteHooks(boundRouteActions('userMedia'))}
+              />
               <Route path="/.well-known/change-password">
                 <Redirect to="/settings/sign-in" />
               </Route>

src/components/layout.jsx

@@ -20,6 +20,7 @@ import { LayoutHeader } from './layout-header';
 import { UIScaleSetter } from './ui-scale-setter';
 import { UndoContainer } from './undo/undo-container';
 import { RtlTextSetter } from './rtl-text-setter';
+import { LightboxLinkInterceptor } from './lightbox-link-interceptor';
 
 const loadingPageMessage = (
   <Delayed>
@@ -153,6 +154,7 @@ class Layout extends Component {
           <UIScaleSetter />
           <RtlTextSetter />
           <SVGSymbolDeclarations />
+          <LightboxLinkInterceptor />
 
           <LayoutHeader />
 

src/components/lightbox-link-interceptor.jsx

@@ -0,0 +1,42 @@
+import { useEffect } from 'react';
+import { useNouter } from '../services/nouter';
+
+/**
+ * Intercepts clicks on .pswp-caption__link elements (inside the PhotoSwipe
+ * lightbox) and navigates via the SPA router instead of a full page reload.
+ */
+export function LightboxLinkInterceptor() {
+  const { navigate } = useNouter();
+
+  useEffect(() => {
+    const handler = (e) => {
+      const link = e.target.closest?.('.pswp-caption__link');
+      if (!link) {
+        return;
+      }
+      // Let the browser handle modified clicks and non-left-button clicks
+      if (e.shiftKey || e.metaKey || e.ctrlKey || e.altKey || e.button !== 0) {
+        return;
+      }
+
+      const href = link.getAttribute('href');
+      if (!href || !href.startsWith('/')) {
+        return;
+      }
+      e.preventDefault();
+
+      // The lightbox pushes a history entry on open and calls history.back()
+      // on destroy (unless closed by navigation). Triggering history.back()
+      // here makes the lightbox's popstate handler close it with the
+      // closedByNavigation flag, so it won't call history.back() again.
+      // We then navigate after the small timeout to allow the lightbox cleanup.
+      history.back();
+      setTimeout(() => navigate(href), 500);
+    };
+
+    document.addEventListener('click', handler);
+    return () => document.removeEventListener('click', handler);
+  }, [navigate]);
+
+  return null;
+}

src/components/post/attachments/visual/container-editable.jsx

@@ -24,10 +24,11 @@ export function VisualContainerEditable({
   removeAttachment,
   reorderImageAttachments,
   postId,
+  lightboxOptions,
 }) {
   const withSortable = attachments.length > 1;
   const lightboxItems = useLightboxItems(attachments, postId);
-  const handleClick = useItemClickHandler(lightboxItems);
+  const handleClick = useItemClickHandler(lightboxItems, lightboxOptions);
 
   const setSortedList = useEvent((list) => reorderImageAttachments(list.map((a) => a.id)));
 

src/components/post/attachments/visual/container-static.jsx

@@ -17,12 +17,13 @@ export function VisualContainerStatic({
   reorderImageAttachments,
   postId,
   isExpanded,
+  lightboxOptions,
 }) {
   const containerRef = useRef(null);
   const containerWidth = useWidthOf(containerRef);
 
   const lightboxItems = useLightboxItems(attachments, postId);
-  const handleClick = useItemClickHandler(lightboxItems);
+  const handleClick = useItemClickHandler(lightboxItems, lightboxOptions);
 
   const sizes = attachments.map((a) => ({
     width: a.previewWidth ?? a.width,
@@ -89,7 +90,7 @@ export function VisualContainerStatic({
             removeAttachment={removeAttachment}
             reorderImageAttachments={reorderImageAttachments}
             postId={postId}
-            isNSFW={isNSFW}
+            isNSFW={a.isNSFW ?? isNSFW}
             width={row.items[i].width}
             height={row.items[i].height}
             pictureId={lightboxItems[n + i].pid}

src/components/post/attachments/visual/hooks.js

@@ -63,18 +63,19 @@ export function useLightboxItems(attachments, postId) {
         width: a.previewWidth ?? a.width,
         height: a.previewHeight ?? a.height,
         pid: `${postId?.slice(0, 8) ?? 'new-post'}-${a.id.slice(0, 8)}`,
+        ...(a.caption ? { caption: a.caption } : {}),
       })),
     [attachments, postId],
   );
 }
 
-export function useItemClickHandler(lightboxItems) {
+export function useItemClickHandler(lightboxItems, lightboxOptions) {
   return useEvent(
     handleLeftClick((e) => {
       e.preventDefault();
       const { currentTarget: el } = e;
       const index = lightboxItems.findIndex((i) => i.pid === el.dataset.pid);
-      openLightbox(index, lightboxItems, el.target);
+      openLightbox(index, lightboxItems, lightboxOptions);
     }),
   );
 }

src/components/select-utils.js

@@ -83,15 +83,7 @@ export const joinPostData = (state) => (postId) => {
   }
 
   // Get the list of post's recipients
-  const recipients = post.postedTo
-    .map((subscriptionId) => {
-      const userId = (state.subscriptions[subscriptionId] || {}).user;
-      const subscriptionType = (state.subscriptions[subscriptionId] || {}).name;
-      const isDirectToSelf = userId === post.createdBy && subscriptionType === 'Directs';
-      return !isDirectToSelf ? userId : false;
-    })
-    .map((userId) => state.subscribers[userId] || state.users[userId])
-    .filter((user) => user);
+  const recipients = getPostRecipients(post, state);
 
   // All recipient names and the post's author name.
   // Sorted alphabetically but author name is always comes first.
@@ -119,11 +111,7 @@ export const joinPostData = (state) => (postId) => {
   // Can the current user fully delete this post?
   const isDeletable = isEditable || canBeRemovedFrom.length === recipients.length;
 
-  const isNSFW =
-    !state.isNSFWVisible &&
-    [post.body, ...recipients.map((r) => r.description)].some((text) =>
-      tokenizeHashtags(text).some((t) => t.text.toLowerCase() === '#nsfw'),
-    );
+  const isNSFW = isPostNSFW(post, state, recipients);
 
   const attachments = post.attachments || emptyArray;
   const postViewState = state.postsViewState[post.id];
@@ -247,6 +235,28 @@ export function userActions(dispatch) {
   };
 }
 
+export function getPostRecipients(post, state) {
+  return post.postedTo
+    .map((subscriptionId) => {
+      const userId = (state.subscriptions[subscriptionId] || {}).user;
+      const subscriptionType = (state.subscriptions[subscriptionId] || {}).name;
+      const isDirectToSelf = userId === post.createdBy && subscriptionType === 'Directs';
+      return !isDirectToSelf ? userId : false;
+    })
+    .map((userId) => state.subscribers[userId] || state.users[userId])
+    .filter((user) => user);
+}
+
+export function isPostNSFW(post, state, recipients) {
+  if (state.isNSFWVisible || !post) {
+    return false;
+  }
+  const recips = recipients || getPostRecipients(post, state);
+  return [post.body, ...recips.map((r) => r.description)].some((text) =>
+    tokenizeHashtags(text).some((t) => t.text.toLowerCase() === '#nsfw'),
+  );
+}
+
 /**
  * Returns privacy flags of non-direct post posted to the given
  * destinations. Destinations should be a current users feed or groups.