feat(frontend): the folders are layers — an import only goes down, a module is reached through its index.ts

`local/layers` (eslint.config.js) resolves every import to its file and refuses one that goes up (lib/ → components/ui/ → features/ → modules/ → shell/) or that reaches into another module's own files. A module's index.ts is its public face: the stores, mounted at the root and read app-wide, which features/ may read too; a page is still opened lazily by import(). Its contract test probes every edge, and three mutants of the rule (off, no face check, a door for everyone) each turn it red. Six modules got that face; the shared channel UI (about, tags, tag manager) moved to features/channel, the filter chips and the saved-views context to features/filters, and the prefs store's controller type moved next to the store instead of importing it from its own page. The header's per-module controls and the eagerly loaded rails keep eight inline suppressions, each naming why: they go when the header gets slots and every rail loads lazily. `chunkGuard` fails the production build when a lazily imported module lands in a boot chunk (the entry, the shell, what they import) — e.g. a page re-exported from an index.ts, which makes its import() a silent no-op. Proved on a build with that mutant; today's build has none.
2026-10-22 23:30:27 +02:00
parent 63a0fecc8b
commit d5867bacca
66 changed files with 453 additions and 109 deletions
@@ -0,0 +1,77 @@
+// @vitest-environment jsdom
+//
+// Ctrl/Cmd+K had no visible entry point (debt burn B28). The owner's pick: a key cap in the header's
+// search field, and a "Jump to…" pill in its place on a page that has no search field.
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup, act } from "@testing-library/react";
+
+vi.mock("react-i18next", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react-i18next")>()),
+  useTranslation: () => ({ t: (k: string) => k, i18n: { language: "en" } }),
+}));
+
+let page = "home";
+vi.mock("../features/navigation/navigationContext", () => ({ useNavigation: () => ({ page }) }));
+vi.mock("../modules/feed/feedFiltersContext", () => ({
+  useFeedFilters: () => ({ q: "", sort: "newest" }),
+  useFeedFiltersActions: () => ({ setFilters: vi.fn() }),
+}));
+vi.mock("../modules/playlists/playlistsContext", () => ({
+  usePlaylists: () => ({ search: "" }),
+  usePlaylistsActions: () => ({ setSearch: vi.fn() }),
+}));
+vi.mock("../modules/channels/channelsContext", () => ({
+  useChannels: () => ({ search: "" }),
+  useChannelsActions: () => ({ setSearch: vi.fn(), goToFullHistory: vi.fn() }),
+}));
+vi.mock("../modules/channels/SyncStatus", () => ({ default: () => null }));
+
+import Header from "./Header";
+import { closePalette, usePaletteOpen } from "../lib/keymap";
+import type { Me } from "../lib/api";
+
+afterEach(() => {
+  cleanup();
+  act(() => closePalette());
+});
+
+function mount() {
+  let open = false;
+  function Probe() {
+    open = usePaletteOpen();
+    return null;
+  }
+  render(
+    <>
+      <Header me={{ plex_enabled: false } as Me} onYtSearch={() => {}} />
+      <Probe />
+    </>,
+  );
+  return () => open;
+}
+
+describe("the command palette's visible entry", () => {
+  it("is a key cap inside the search field, naming the chord the palette row binds", () => {
+    page = "feed";
+    const isOpen = mount();
+    const cap = screen.getByRole("button", { name: /^palette\.open \((Ctrl|⌘) K\)$/ });
+    // Label in Name: the name carries what the cap shows, so "click Ctrl K" finds it.
+    expect(cap.getAttribute("aria-label")).toContain(cap.textContent);
+    // …and a tooltip equal to that name, so a screen reader does not read it again as a description.
+    expect(cap.getAttribute("title")).toBe(cap.getAttribute("aria-label"));
+    expect(screen.getByRole("textbox")).toBeTruthy();
+    fireEvent.click(cap);
+    expect(isOpen()).toBe(true);
+  });
+
+  it("is a Jump-to pill on a page with no search field", () => {
+    page = "home";
+    const isOpen = mount();
+    expect(screen.queryByRole("textbox")).toBeNull();
+    // Named by what it shows ("Jump to…" and its key cap), not by a label that replaced it.
+    const pill = screen.getByRole("button", { name: /^palette\.title ?(Ctrl|⌘) K$/ });
+    expect(pill.getAttribute("title")).toBe("palette.open");
+    fireEvent.click(pill);
+    expect(isOpen()).toBe(true);
+  });
+});