Add dropdown to the user comparison button to quickly select common comparison versions

src/logic/VersionComparisons.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+import type { VersionListEntry } from "./MinecraftApi";
+import { getVersionComparisons } from "./VersionComparisons";
+
+function version(id: string, type: string): VersionListEntry {
+    return { id, type, url: "", time: "", releaseTime: "", sha1: "" };
+}
+
+describe("getVersionComparisons", () => {
+    it("offers current snapshot and release comparisons", () => {
+        const versions = [
+            version("snapshot-2", "snapshot"),
+            version("snapshot-1", "snapshot"),
+            version("release-2", "release"),
+            version("old-snapshot", "snapshot"),
+            version("release-1", "release"),
+        ];
+
+        expect(getVersionComparisons(versions)).toEqual([
+            { key: "snapshot-release", label: "Compare latest snapshot with last release", left: "release-2", right: "snapshot-2" },
+            { key: "snapshots", label: "Compare last two snapshots", left: "snapshot-1", right: "snapshot-2" },
+            { key: "releases", label: "Compare last two releases", left: "release-1", right: "release-2" },
+        ]);
+    });
+
+    it("only offers release comparisons when there are no current snapshots", () => {
+        const versions = [
+            version("release-2", "release"),
+            version("old-snapshot", "snapshot"),
+            version("release-1", "release"),
+        ];
+
+        expect(getVersionComparisons(versions)).toEqual([
+            { key: "releases", label: "Compare last two releases", left: "release-1", right: "release-2" },
+        ]);
+    });
+
+    it("offers snapshot comparisons when no release is available", () => {
+        const versions = [version("snapshot-2", "snapshot"), version("snapshot-1", "snapshot")];
+
+        expect(getVersionComparisons(versions)).toEqual([
+            { key: "snapshots", label: "Compare last two snapshots", left: "snapshot-1", right: "snapshot-2" },
+        ]);
+    });
+});

src/logic/VersionComparisons.ts

@@ -0,0 +1,43 @@
+import type { VersionListEntry } from "./MinecraftApi";
+
+export interface VersionComparison {
+    key: string;
+    label: string;
+    left: string;
+    right: string;
+}
+
+export function getVersionComparisons(versions: VersionListEntry[]): VersionComparison[] {
+    const latestReleaseIndex = versions.findIndex(version => version.type === "release");
+    const releases = versions.filter(version => version.type === "release");
+    const recentVersions = latestReleaseIndex < 0 ? versions : versions.slice(0, latestReleaseIndex);
+    const snapshots = recentVersions.filter(version => version.type === "snapshot");
+    const comparisons: VersionComparison[] = [];
+
+    if (snapshots.length > 0 && releases.length > 0) {
+        comparisons.push({
+            key: "snapshot-release",
+            label: "Compare latest snapshot with last release",
+            left: releases[0].id,
+            right: snapshots[0].id,
+        });
+    }
+    if (snapshots.length > 1) {
+        comparisons.push({
+            key: "snapshots",
+            label: "Compare last two snapshots",
+            left: snapshots[1].id,
+            right: snapshots[0].id,
+        });
+    }
+    if (releases.length > 1) {
+        comparisons.push({
+            key: "releases",
+            label: "Compare last two releases",
+            left: releases[1].id,
+            right: releases[0].id,
+        });
+    }
+
+    return comparisons;
+}

src/ui/VersionComparisonMenu.tsx

@@ -0,0 +1,32 @@
+import { Dropdown } from "antd";
+import type { ReactElement } from "react";
+import type { VersionListEntry } from "../logic/MinecraftApi";
+import { getVersionComparisons, type VersionComparison } from "../logic/VersionComparisons";
+
+interface VersionComparisonMenuProps {
+    versions: VersionListEntry[];
+    onSelect: (comparison: VersionComparison) => void;
+    children: ReactElement;
+}
+
+export default function VersionComparisonMenu({ versions, onSelect, children }: VersionComparisonMenuProps) {
+    const comparisons = getVersionComparisons(versions);
+
+    return (
+        <Dropdown
+            disabled={comparisons.length === 0}
+            trigger={["contextMenu"]}
+            menu={{
+                items: comparisons.map(({ key, label }) => ({ key, label })),
+                onClick: ({ key }) => {
+                    const comparison = comparisons.find(item => item.key === key);
+                    if (comparison) {
+                        onSelect(comparison);
+                    }
+                },
+            }}
+        >
+            {children}
+        </Dropdown>
+    );
+}

src/ui/diff/DiffVersionSelection.tsx

@@ -1,26 +1,40 @@
 import { Flex, Button, Tooltip } from "antd";
 import { SwapOutlined } from "@ant-design/icons";
 import { getLeftDiff, getRightDiff } from "../../logic/Diff";
+import { minecraftVersions } from "../../logic/MinecraftApi";
 import VersionSelector from "../VersionSelector";
 import { swapDiffSelectionSideIfPresent } from "../../logic/State";
+import { useObservable } from "../../utils/UseObservable";
+import VersionComparisonMenu from "../VersionComparisonMenu";
 
 const DiffVersionSelection = () => {
+    const versions = useObservable(minecraftVersions) ?? [];
+
     return (
         <Flex align="center" gap={8}>
             <VersionSelector selectedVersion={getLeftDiff().selectedVersion} minWidth={96} />
-            <Tooltip title="Swap versions">
-                <Button
-                    icon={<SwapOutlined />}
-                    size="small"
-                    onClick={() => {
-                        const left = getLeftDiff().selectedVersion.getValue();
-                        const right = getRightDiff().selectedVersion.getValue();
-                        getLeftDiff().selectedVersion.next(right);
-                        getRightDiff().selectedVersion.next(left);
-
-                        swapDiffSelectionSideIfPresent();
+            <Tooltip title="Swap versions (right-click for common comparisons)">
+                <VersionComparisonMenu
+                    versions={versions}
+                    onSelect={({ left, right }) => {
+                        getLeftDiff().selectedVersion.next(left);
+                        getRightDiff().selectedVersion.next(right);
                     }}
-                />
+                >
+                    <Button
+                        aria-label="Swap versions"
+                        icon={<SwapOutlined />}
+                        size="small"
+                        onClick={() => {
+                            const left = getLeftDiff().selectedVersion.getValue();
+                            const right = getRightDiff().selectedVersion.getValue();
+                            getLeftDiff().selectedVersion.next(right);
+                            getRightDiff().selectedVersion.next(left);
+
+                            swapDiffSelectionSideIfPresent();
+                        }}
+                    />
+                </VersionComparisonMenu>
             </Tooltip>
             <VersionSelector selectedVersion={getRightDiff().selectedVersion} minWidth={96} />
         </Flex>

src/ui/meta/VersionMetadata.tsx

@@ -6,6 +6,7 @@ import {
     launcherVersionList, launcherVersions, updateLauncherSelection,
 } from "../../logic/LauncherMeta";
 import VersionSelector from "../VersionSelector";
+import VersionComparisonMenu from "../VersionComparisonMenu";
 import JsonView from "./JsonView";
 import VersionSummary from "./VersionSummary";
 
@@ -56,12 +57,23 @@ export default function VersionMetadata() {
                     ariaLabel="Launcher version"
                     minWidth={200}
                 />
-                <Button
-                    aria-label="Swap launcher versions"
-                    icon={<SwapOutlined />}
-                    disabled={!comparing}
-                    onClick={swapVersions}
-                />
+                <VersionComparisonMenu
+                    versions={versions?.status === "ready" ? versions.data : []}
+                    onSelect={({ left, right }) => {
+                        launcherLeftVersion.next(left);
+                        launcherRightVersion.next(right);
+                    }}
+                >
+                    <span style={{ display: "inline-flex" }} title="Right-click for common comparisons">
+                        <Button
+                            aria-label="Swap launcher versions"
+                            icon={<SwapOutlined />}
+                            disabled={!comparing}
+                            style={!comparing ? { pointerEvents: "none" } : undefined}
+                            onClick={swapVersions}
+                        />
+                    </span>
+                </VersionComparisonMenu>
                 <VersionSelector
                     selectedVersion={launcherRightVersion}
                     versions={launcherVersionList}

tests/diff.spec.ts

@@ -38,4 +38,17 @@ test.describe('Diff View', () => {
         await expect(editor).toBeVisible();
         await expect(editor).toContainText('net.minecraft.client.renderer');
     });
+
+    test('Selects the latest two snapshots from the swap button menu', async ({ page }) => {
+        await page.goto('/');
+        await waitForBlockingModalToClose(page);
+        await page.getByRole('button', { name: 'Compare' }).click();
+
+        await page.getByRole('button', { name: 'Swap versions' }).click({ button: 'right' });
+        await page.getByRole('menuitem', { name: 'Compare last two snapshots' }).click();
+
+        const selectors = page.locator('.diff-sidebar-panel button:has(.anticon-down)');
+        await expect(selectors.nth(0)).toContainText('26.1-mock-2');
+        await expect(selectors.nth(1)).toContainText('26.1-mock-3');
+    });
 });

tests/launcher-meta.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test';
+import { setupTest, waitForBlockingModalToClose } from './test-utils';
+
+test('Selects a comparison from the launcher swap button before comparing', async ({ page }) => {
+    await setupTest(page);
+    await page.goto('/');
+    await waitForBlockingModalToClose(page);
+
+    await page.getByRole('button', { name: 'Settings' }).click();
+    await page.getByRole('menuitem', { name: 'Tools' }).click();
+    await page.getByRole('button', { name: 'Open metadata explorer' }).click();
+
+    const swapButton = page.getByRole('button', { name: 'Swap launcher versions' });
+    await expect(swapButton).toBeDisabled();
+    await swapButton.locator('..').click({ button: 'right' });
+    await page.getByRole('menuitem', { name: 'Compare last two snapshots' }).click();
+
+    const dialog = page.getByRole('dialog', { name: 'Minecraft launcher metadata' });
+    await expect(dialog.getByRole('button', { name: 'Launcher version', exact: true })).toContainText('26.1-mock-2');
+    await expect(dialog.getByRole('button', { name: 'Compare launcher version', exact: true })).toContainText('26.1-mock-3');
+    await expect(swapButton).toBeEnabled();
+});