feat: show only the latest plugin release notes and cap long ones

src/ui/tests/plugins/PluginReleaseNotes.test.tsx

@@ -1,5 +1,11 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
 import i18next from "i18next";
 import { I18nextProvider, initReactI18next } from "react-i18next";
 import type { PluginEntry } from "@/plugins/plugin-model";
@@ -27,6 +33,9 @@ async function i18n() {
               releaseNotes: "Release notes",
               installedBadge: "Installed",
               changeTypes: { added: "Added", fixed: "Fixed" },
+              showOlderReleases: "Older releases ({{count}})",
+              hideOlderReleases: "Hide older releases",
+              showMoreChanges: "Show {{count}} more",
               videoTitle: "{{name}} video",
             },
           },
@@ -71,6 +80,43 @@ describe("PluginReleaseNotes", () => {
     expect(screen.getByText("Installed")).toBeTruthy();
   });
 
+  it("shows only the newest release until older ones are opened", async () => {
+    getPluginChangelog.mockResolvedValue([
+      { version: "1.1.0", changes: [{ type: "fixed", text: "Newest" }] },
+      { version: "1.0.0", changes: [{ type: "added", text: "Oldest" }] },
+    ]);
+    render(
+      <I18nextProvider i18n={await i18n()}>
+        <PluginReleaseNotes plugin={plugin({ version: "1.1.0" })} />
+      </I18nextProvider>,
+    );
+    await waitFor(() => expect(screen.getByText("Newest")).toBeTruthy());
+    expect(screen.queryByText("Oldest")).toBeNull();
+    fireEvent.click(screen.getByText("Older releases (1)"));
+    expect(screen.getByText("Oldest")).toBeTruthy();
+  });
+
+  it("cuts a long release down until it is opened up", async () => {
+    getPluginChangelog.mockResolvedValue([
+      {
+        version: "1.0.0",
+        changes: Array.from({ length: 12 }, (_, i) => ({
+          type: "added",
+          text: `Change ${i}`,
+        })),
+      },
+    ]);
+    render(
+      <I18nextProvider i18n={await i18n()}>
+        <PluginReleaseNotes plugin={plugin()} />
+      </I18nextProvider>,
+    );
+    await waitFor(() => expect(screen.getByText("Change 7")).toBeTruthy());
+    expect(screen.queryByText("Change 8")).toBeNull();
+    fireEvent.click(screen.getByText("Show 4 more"));
+    expect(screen.getByText("Change 11")).toBeTruthy();
+  });
+
   it("renders nothing for a plugin with no versions", async () => {
     const { container } = render(
       <I18nextProvider i18n={await i18n()}>