fix: end the related commits' chain on a dot

resources/js/components/related-commits.tsx

@@ -1,6 +1,8 @@
 import { CommitCard } from '@/components/commit-card';
+import { GraphCanvas } from '@/components/graph-canvas';
 import { useRelatedCommits } from '@/hooks/use-related-commits';
 import { laneOf } from '@/lib/utils';
+import type { Commit } from '@/types';
 
 export function RelatedCommits({ commitId }: { commitId: string }) {
     const commits = useRelatedCommits(commitId);
@@ -17,15 +19,31 @@ export function RelatedCommits({ commitId }: { commitId: string }) {
                 </h2>
             </div>
 
-            {commits.map((commit, index) => (
-                <CommitCard
-                    key={commit.id}
-                    commit={commit}
-                    previousLane={
-                        index === 0 ? undefined : laneOf(commits[index - 1])
-                    }
-                />
-            ))}
+            <RelatedCommitList commits={commits} />
         </section>
     );
 }
+
+/**
+ * The related commits chain one after the other in a canvas of their own, below the thread's, and end on a dot below
+ * the last one, as a feed does.
+ */
+export function RelatedCommitList({ commits }: { commits: Commit[] }) {
+    return (
+        <GraphCanvas>
+            {commits.map((commit, index) => {
+                const previous = commits[index - 1];
+
+                return (
+                    <CommitCard
+                        key={commit.id}
+                        commit={commit}
+                        previousLane={previous && laneOf(previous)}
+                        graphAfter={previous?.id}
+                        endsWithDot={index === commits.length - 1}
+                    />
+                );
+            })}
+        </GraphCanvas>
+    );
+}

tests/Unit/StandaloneCommitGraphs.test.tsx

@@ -5,6 +5,7 @@ import { createInertiaApp } from '@inertiajs/react';
 import type { ComponentType } from 'react';
 import { renderToString } from 'react-dom/server';
 import { test } from 'vite-plus/test';
+import { RelatedCommitList } from '../../resources/js/components/related-commits';
 import { TooltipProvider } from '../../resources/js/components/ui/tooltip';
 import Reports from '../../resources/js/pages/moderation/reports';
 import { SearchResults } from '../../resources/js/pages/search/index';
@@ -177,3 +178,20 @@ test('ends the chain of search results on a dot below the last one', async () =>
             html.lastIndexOf('Commit two'),
     );
 });
+
+test('draws related commits in a canvas of their own, chained one after the other and ending on a dot below the last one', async () => {
+    const html = await render(() => (
+        <RelatedCommitList
+            commits={[commit('one', 1), commit('two', 2), commit('three', 3)]}
+        />
+    ));
+
+    assert.equal(html.match(/data-test="graph-canvas"/g)?.length, 1);
+    assert.equal(railPiecesLeftShowing(html), 0);
+    assert.equal(html.match(/data-test="rail-end-dot"/g)?.length, 1);
+    // In the last card: past everything the second one shows.
+    assert.ok(
+        html.indexOf('data-test="rail-end-dot"') >
+            html.lastIndexOf('Commit two'),
+    );
+});