refactor(frontend): the flat components/ folder moves into shell/, modules/<page>/ and features/<name>/

A pure move (git mv, history kept): 333 files leave components/, which now holds only the platform layer (ui/) and the legal pages. The shell is the frame (App, header, nav rail, palette, boot); each page lives in modules/<page>/ with its rail, store and tests; what several pages share sits in features/<name>/; the shared-link page is watch/. Domain-free helpers went straight to ui/ (ViewSwitcher, FilterRail, the confirm dialog, the language switcher, the copy rows). Every relative specifier was rewritten (imports, dynamic imports, vi.mock, new URL), and the contract tests that scan sources now scan the whole app source, not only components/ — each glob was counted before and after so none went green over fewer files. The locale-format rule matched `/src/components/` only, so the move would have taken ~300 files out from under its i18n-singleton check; it now covers every folder that holds components, with a test per folder.
2026-10-22 23:12:45 +02:00
parent fdf8076013
commit 63a0fecc8b
356 changed files with 2433 additions and 2332 deletions
@@ -0,0 +1,109 @@
+// @vitest-environment jsdom
+//
+// "Saját napló" shows this tab's own log live, newest first, filters it by level group and
+// text, and copies exactly what is filtered (oldest first, one JSON event per line).
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { act, cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+
+import { clear, log, setLevel } from "../../lib/log";
+
+vi.mock("react-i18next", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-i18next")>();
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string, opts?: { count?: number }) =>
+        opts?.count != null ? `${key}:${opts.count}` : key,
+    }),
+  };
+});
+const copied: string[] = [];
+vi.mock("../../lib/clipboard", () => ({
+  copyText: (text: string) => {
+    copied.push(text);
+    return Promise.resolve(true);
+  },
+}));
+
+import MyLogViewer from "./MyLogViewer";
+
+beforeEach(() => {
+  setLevel("DEBUG");
+  log.info("nav.view", "push feed", { page: "feed" });
+  log.warn("http.request", "GET /api/feed 503", { status: 503 });
+  log.debug("ui.click", "click feed-refresh", { control: "feed-refresh" });
+});
+afterEach(() => {
+  cleanup();
+  clear();
+  setLevel("INFO");
+  copied.length = 0;
+});
+
+const rows = () =>
+  within(screen.getByTestId("my-log-lines"))
+    .queryAllByRole("button")
+    .map((b) => b.textContent);
+
+describe("MyLogViewer", () => {
+  it("lists the tab's events newest first and follows new ones", async () => {
+    render(<MyLogViewer />);
+    expect(rows().map((r) => r!.includes("ui.click"))).toEqual([true, false, false]);
+    await act(async () => {
+      log.error("app.uncaught", "TypeError: x is undefined");
+      await new Promise((r) => requestAnimationFrame(() => r(null)));
+    });
+    expect(rows()[0]).toContain("app.uncaught");
+  });
+
+  it("a row keeps its place and the focus as new events arrive above it", async () => {
+    render(<MyLogViewer />);
+    const row = within(screen.getByTestId("my-log-lines")).getAllByRole("button")[0]!;
+    row.focus();
+    fireEvent.click(row); // at Részletes this click is itself a new event in real use
+    await act(async () => {
+      log.debug("ui.click", "a newer event");
+      await new Promise((r) => requestAnimationFrame(() => r(null)));
+    });
+    expect(row.isConnected).toBe(true);
+    expect(document.activeElement).toBe(row);
+    expect(row.getAttribute("aria-expanded")).toBe("true");
+  });
+
+  it("filters by level group and by text, and copies only what is shown", async () => {
+    render(<MyLogViewer />);
+    fireEvent.click(screen.getByRole("button", { name: /settings\.myLog\.filters\.warning/ }));
+    expect(rows()).toHaveLength(1);
+    expect(rows()[0]).toContain("GET /api/feed 503");
+
+    fireEvent.click(screen.getByRole("button", { name: /settings\.myLog\.filters\.all/ }));
+    fireEvent.change(screen.getByRole("searchbox"), { target: { value: "FEED-REFRESH" } });
+    expect(rows()).toHaveLength(1);
+
+    const copy = async () => {
+      await act(async () => {
+        fireEvent.click(screen.getByRole("button", { name: "settings.myLog.copy" }));
+      });
+      return copied[copied.length - 1]!.split("\n").map((l) => JSON.parse(l).event);
+    };
+    expect(await copy()).toEqual(["ui.click"]); // only what the search left
+
+    fireEvent.change(screen.getByRole("searchbox"), { target: { value: "" } });
+    expect(await copy()).toEqual(["nav.view", "http.request", "ui.click"]); // oldest first
+  });
+
+  it("opens a row to its details and clears the log", async () => {
+    render(<MyLogViewer />);
+    const first = within(screen.getByTestId("my-log-lines")).getAllByRole("button")[0]!;
+    fireEvent.click(first);
+    expect(first.getAttribute("aria-expanded")).toBe("true");
+    expect(screen.getByTestId("my-log-lines").textContent).toContain('"control": "feed-refresh"');
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "settings.myLog.clear" }));
+      await new Promise((r) => requestAnimationFrame(() => r(null)));
+    });
+    expect(rows()).toEqual([]);
+    expect(screen.getByText("settings.myLog.emptyAll")).toBeTruthy();
+  });
+});