Pictures open in the app

A tap on a picture opened its file in a new tab, leaving the app (and, on a phone, its place in the feed). It now opens
MediaViewer: the whole screen on a phone, a large dialog from md, the picture whole with its alt text under it, the
post's other pictures by the previous and next buttons or the arrow keys, and "Open original" for whoever wants the
file. Phone flow: a picture of a town post opens the viewer over the whole screen, which closes from its button.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw

Components/Content.razor

@@ -525,6 +525,7 @@
 
 	bool isReplying;
 	bool isDetailsOpen;
+	MediaAttachment viewingPicture;
 	bool isQuoting;
 	bool isEditing;
 	bool isActing;
@@ -626,6 +627,11 @@
 			</div>
 		}
 
+		@if (viewingPicture is { } picture)
+		{
+			<MediaViewer Pictures="Pictures(status)" Start="Pictures(status).IndexOf(picture)" OnClose="() => viewingPicture = null" />
+		}
+
 		@if (status.Card is { } card && status.MediaAttachments.Count == 0)
 		{
 			<a class="flex gap-3 rounded-lg p-2 neo-inset neo-2xs min-w-0" href="@card.Url" target="_blank" rel="noopener noreferrer">
@@ -762,10 +768,11 @@
 
 	RenderFragment Media(MediaAttachment media, bool several) => media.Type switch
 	{
-		"image" => @<a class="block w-full" href="@media.Url" target="_blank" rel="noopener noreferrer">
+		"image" => @<button type="button" class="block w-full cursor-zoom-in" @onclick="() => OpenPicture(media)"
+								 aria-label="@(media.Description ?? Localizer["Picture"])" data-picture>
 			<img alt="@media.Description" title="@media.Description" loading="lazy" class="w-full rounded-lg object-cover @(several ? "aspect-square" : "max-h-[60vh]")"
 				 src="@(media.PreviewUrl ?? media.Url)" data-blurhash="@media.Blurhash" style="@FocalPoint(media)" />
-		</a>,
+		</button>,
 		"gifv" => @<video class="w-full rounded-lg" autoplay muted loop playsinline title="@media.Description" src="@media.Url"></video>,
 		"video" => @<video class="w-full max-h-[50vh] aspect-video rounded-lg neo-inset neo-2xs" controls playsinline preload="metadata"
 						  poster="@media.PreviewUrl" title="@media.Description" src="@media.Url"></video>,
@@ -1036,6 +1043,10 @@
 		await OnReplied.InvokeAsync(reply);
 	}
 
+	static List<MediaAttachment> Pictures(Status status) => [.. status.MediaAttachments.Where(m => m.Type == "image")];
+
+	void OpenPicture(MediaAttachment media) => viewingPicture = media;
+
 	async Task OpenDetails()
 	{
 		isDetailsOpen = true;