-
- {urls.map((url, index) => (
-
-
-
- -
- ))}
-
-
+ {urls.map((url, index) => (
+
- + + + + ))} +
{!isDeleted(commit) && commit.is_saved !== undefined && (
- (openEvent, { detail: { images, index } }),
+ );
+}
+
+/**
+ * The one viewer that posted images open in, mounted once for the whole app.
+ */
+export function ImageViewerHost() {
+ const [request, setRequest] = useState(null);
+
+ useEffect(() => {
+ const open = (event: Event) =>
+ setRequest((event as CustomEvent).detail);
+
+ window.addEventListener(openEvent, open);
+
+ return () => window.removeEventListener(openEvent, open);
+ }, []);
+
+ return (
+
+ setRequest((current) =>
+ index === null || current === null
+ ? null
+ : { ...current, index },
+ )
+ }
+ />
+ );
+}
+
+/**
+ * A focused look at images: dims the page instead of reflowing it, fills the screen on phones, and steps through
+ * images with the arrows, ←/→, or a swipe. Esc, the close button, or a click beside the image returns to the page.
+ */
+export function ImageViewer({
+ images,
+ index,
+ onIndexChange,
+ onRemove,
+}: {
+ images: ViewerImage[];
+ index: number | null;
+ onIndexChange: (index: number | null) => void;
+ onRemove?: (index: number) => void;
+}) {
+ const swipeStart = useRef(null);
+ const [dimensions, setDimensions] = useState(null);
+ const isOpen = index !== null && index < images.length;
+ const current = isOpen ? index : 0;
+ const image = images[current] as ViewerImage | undefined;
+ const hasMany = images.length > 1;
+
+ const step = (by: 1 | -1) => {
+ if (!isOpen || !hasMany) {
+ return;
+ }
+
+ onIndexChange((current + by + images.length) % images.length);
+ };
+
+ return (
+ {
+ if (!open) {
+ onIndexChange(null);
+ }
+ }}
+ >
+
+ {
+ if (event.key === 'ArrowRight') {
+ event.preventDefault();
+ step(1);
+ } else if (event.key === 'ArrowLeft') {
+ event.preventDefault();
+ step(-1);
+ }
+ }}
+ onPointerDown={(event) => {
+ swipeStart.current = event.clientX;
+ }}
+ onPointerUp={(event) => {
+ if (swipeStart.current === null) {
+ return;
+ }
+
+ const distance = event.clientX - swipeStart.current;
+ swipeStart.current = null;
+
+ if (
+ event.pointerType !== 'mouse' &&
+ Math.abs(distance) > swipeThreshold
+ ) {
+ step(distance < 0 ? 1 : -1);
+ }
+ }}
+ className="fixed inset-0 z-50 flex flex-col text-white outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 motion-reduce:animate-none sm:inset-6 md:inset-10"
+ data-test="image-viewer"
+ >
+
+ Image {current + 1} of {images.length}
+
+
+ Use the arrow keys to switch images, and Escape to
+ close.
+
+
+
+
+ {current + 1}/{images.length}
+
+
+ {[image?.details, dimensions]
+ .filter(Boolean)
+ .join(' · ')}
+
+
+
+
+
+
+
+
+ );
+}
+
+function ViewerArrow({
+ label,
+ onClick,
+ className,
+ children,
+}: {
+ label: string;
+ onClick: () => void;
+ className?: string;
+ children: ReactNode;
+}) {
+ return (
+
+ );
+}
diff --git a/resources/js/components/keyboard-shortcuts-dialog.tsx b/resources/js/components/keyboard-shortcuts-dialog.tsx
index 1e3c72488..c531955bb 100644
--- a/resources/js/components/keyboard-shortcuts-dialog.tsx
+++ b/resources/js/components/keyboard-shortcuts-dialog.tsx
@@ -14,6 +14,8 @@ const shortcuts: Shortcut[] = [
{ keys: ['↵'], label: 'Open the focused commit' },
{ keys: ['r'], label: 'Reply to commit' },
{ keys: ['q'], label: 'Quote commit' },
+ { keys: ['s'], label: 'Star or unstar commit' },
+ { keys: ['b'], label: 'Save or unsave commit' },
{ keys: ['o'], label: 'Show or hide replies' },
{ keys: ['c'], label: 'Write a commit' },
{ keys: ['⌘', 'K'], label: 'Search developers' },
diff --git a/resources/js/components/quoted-commit.tsx b/resources/js/components/quoted-commit.tsx
index 5bd8bd65c..196232f43 100644
--- a/resources/js/components/quoted-commit.tsx
+++ b/resources/js/components/quoted-commit.tsx
@@ -4,7 +4,11 @@ import { CommitBodyExcerpt } from '@/components/commit-body';
import { UserAvatar } from '@/components/user-avatar';
import { useNow } from '@/hooks/use-now';
import { cn, formatRelativeTime, isDeleted } from '@/lib/utils';
-import type { DeletedCommit, QuotedCommit as QuotedCommitData } from '@/types';
+import type {
+ CommitImage,
+ DeletedCommit,
+ QuotedCommit as QuotedCommitData,
+} from '@/types';
export function QuotedCommit({
commit,
@@ -30,6 +34,7 @@ export function QuotedCommit({
);
}
+ const images = commit.images ?? [];
const className = 'mt-2 block rounded-lg border px-3 py-2';
const content = (
@@ -66,10 +71,13 @@ export function QuotedCommit({
)}
- 
+
+ {images.length > 1 && (
+
+ +{images.length - 1}
+
+ )}
+
+ {images.length === 1
+ ? 'With 1 image'
+ : `With ${images.length} images`}
+
+
+ );
+}
diff --git a/resources/js/lib/scroll-to-top.ts b/resources/js/lib/scroll-to-top.ts
new file mode 100644
index 000000000..cb78a6ed6
--- /dev/null
+++ b/resources/js/lib/scroll-to-top.ts
@@ -0,0 +1,14 @@
+const event = 'devnull:scroll-to-top';
+
+/**
+ * Clicking the nav item for the page you are already on asks that page to go back to the top.
+ */
+export function requestScrollToTop(): void {
+ window.dispatchEvent(new Event(event));
+}
+
+export function onScrollToTopRequest(callback: () => void): () => void {
+ window.addEventListener(event, callback);
+
+ return () => window.removeEventListener(event, callback);
+}
diff --git a/resources/js/pages/log/show.tsx b/resources/js/pages/log/show.tsx
index 2402a6992..7a398dbb7 100644
--- a/resources/js/pages/log/show.tsx
+++ b/resources/js/pages/log/show.tsx
@@ -15,6 +15,7 @@ import { useLastVisit } from '@/hooks/use-last-visit';
import { useUser } from '@/hooks/use-user';
import AppLayout from '@/layouts/app-layout';
import { emojify } from '@/lib/emoji';
+import { onScrollToTopRequest } from '@/lib/scroll-to-top';
import { readStorage, writeStorage } from '@/lib/storage';
import type { Commit, CursorPaginated, Log } from '@/types';
@@ -109,6 +110,15 @@ export default function Show({
onSuccess: () => window.scrollTo({ top: 0, behavior: 'smooth' }),
});
+ // Clicking Log while already on it goes back to the top, picking up new commits on the way, like X.
+ useEffect(() =>
+ onScrollToTopRequest(() =>
+ newCommitsCount > 0
+ ? showNewCommits()
+ : window.scrollTo({ top: 0, behavior: 'smooth' }),
+ ),
+ );
+
return (
<>
diff --git a/resources/js/types/commit.ts b/resources/js/types/commit.ts
index 238e7ed90..521c4ffad 100644
--- a/resources/js/types/commit.ts
+++ b/resources/js/types/commit.ts
@@ -64,6 +64,7 @@ export type QuotedCommit = Pick<
| 'deleted_at'
| 'user'
| 'replies_count'
+ | 'images'
>;
export type DeletedCommit = {
diff --git a/tests/Feature/Controllers/LogControllerTest.php b/tests/Feature/Controllers/LogControllerTest.php
index d3294af75..f200b2254 100644
--- a/tests/Feature/Controllers/LogControllerTest.php
+++ b/tests/Feature/Controllers/LogControllerTest.php
@@ -7,6 +7,7 @@
use App\Enums\Log;
use App\Http\Middleware\HandleInertiaRequests;
use App\Models\Commit;
+use App\Models\CommitImage;
use App\Models\LinkPreview;
use App\Models\User;
use App\Queries\LatestLogCommitsQuery;
@@ -410,6 +411,26 @@
->assertDontSee('A deleted quoted commit');
})->with(Log::cases());
+it('includes the images of quoted commits, but never of deleted ones', function (Log $log): void {
+ $user = User::factory()->create();
+ $quoted = Commit::factory()->create(['created_at' => now()->subHour()]);
+ $image = CommitImage::factory()->for($quoted)->create();
+ $deleted = Commit::factory()->create(['created_at' => now()->subHour()]);
+ CommitImage::factory()->for($deleted)->create();
+ Commit::factory()->for($user)->for($quoted, 'quotedCommit')->create(['created_at' => now()->subMinutes(2)]);
+ Commit::factory()->for($user)->for($deleted, 'quotedCommit')->create(['created_at' => now()->subMinute()]);
+ $deleted->delete();
+
+ $response = $this->actingAs($user)
+ ->get(route('log.show', $log));
+
+ $response->assertOk()
+ ->assertInertia(fn ($page) => $page
+ ->missing('commits.data.0.quoted_commit.images')
+ ->where('commits.data.1.quoted_commit.images.0.id', $image->id)
+ ->where('commits.data.1.quoted_commit.images.0.url', route('commit-image.show', $image)));
+})->with(Log::cases());
+
it('loads the quoted commits of a log without a query per commit', function (Log $log): void {
$user = User::factory()->create(['log' => $log]);
diff --git a/tests/Unit/CommitImagePicker.test.tsx b/tests/Unit/CommitImagePicker.test.tsx
new file mode 100644
index 000000000..738caf304
--- /dev/null
+++ b/tests/Unit/CommitImagePicker.test.tsx
@@ -0,0 +1,35 @@
+/// undefined} />,
+ ),
+ '',
+ );
+});
+
+void test('makes every attached image open the preview, with its own remove button', () => {
+ const html = renderToString(
+ undefined}
+ />,
+ );
+
+ assert.equal(
+ html.match(/data-test="attached-image-preview-button"/g)?.length,
+ 2,
+ );
+ assert.match(html, /aria-label="Preview image 1"/);
+ assert.match(html, /aria-label="Remove image 2"/);
+ assert.doesNotMatch(html, /data-test="image-viewer"/);
+});
{
+ if (event.target === event.currentTarget) {
+ onIndexChange(null);
+ }
+ }}
+ >
+ {image && (
+ 
+ setDimensions(
+ `${event.currentTarget.naturalWidth}×${event.currentTarget.naturalHeight}`,
+ )
+ }
+ draggable={false}
+ className="max-h-full max-w-full rounded-md object-contain shadow-2xl select-none motion-safe:animate-in motion-safe:duration-200 motion-safe:fade-in-0 motion-safe:zoom-in-[0.97]"
+ data-test="image-viewer-image"
+ />
+ )}
+
+ {hasMany && (
+ <>
+ step(-1)}
+ className="left-2 sm:left-3"
+ >
+
+ step(1)}
+ className="right-2 sm:right-3"
+ >
+
+
+ )}
+
+
+
+
+
);
@@ -94,3 +102,42 @@ export function QuotedCommit({
);
}
+
+/**
+ * A teaser of the quoted commit's images, not the gallery: one thumbnail on the side, dimmed by a gradient and
+ * counting the rest, so the full picture stays one click away on the original commit.
+ */
+function QuotedMedia({ images }: { images: CommitImage[] }) {
+ const [first] = images;
+
+ return (
+
+