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.
This commit is contained in:
2026-10-22 23:30:27 +02:00
parent 63a0fecc8b
commit d5867bacca
66 changed files with 453 additions and 109 deletions
+6 -2
View File
@@ -21,8 +21,12 @@ import { LS } from "../lib/storage";
import { usePref } from "../lib/usePref";
import { useVerifyEntry } from "../lib/useVerifyEntry";
import { useNavigation, useNavigationActions } from "../features/navigation/navigationContext";
import { useFeedFilters, useFeedFiltersActions } from "../modules/feed/feedFiltersContext";
import { useFeedView, useFeedViewActions } from "../modules/feed/feedViewContext";
import {
useFeedFilters,
useFeedFiltersActions,
useFeedView,
useFeedViewActions,
} from "../modules/feed";
import { moduleOrder } from "../lib/modules";
import { PAGE_CONTENT, PAGE_RAIL, preloadPages } from "./moduleRegistry";
import { lazyWithPreload } from "../lib/lazyWithPreload";
@@ -57,7 +57,7 @@ vi.mock("../modules/playlists/playlistsContext", () => ({
vi.mock("../features/prefs/prefsContext", () => ({
usePrefs: () => ({ theme: { scheme: "default" }, setTheme: vi.fn() }),
}));
vi.mock("../modules/feed/savedViewsContext", () => ({
vi.mock("../features/filters/savedViewsContext", () => ({
useSavedViews: () => ({ views: [], apply: vi.fn() }),
}));
const requestSurprise = vi.fn();
+2 -2
View File
@@ -24,9 +24,9 @@ import { requestLinkBox } from "../lib/downloadIntake";
import { openRecorderStart } from "../lib/debugRecorder";
import { useDebugRecording } from "../features/diagnostics/useDebugRecording";
import { useNavigationActions } from "../features/navigation/navigationContext";
import { usePlaylistsActions } from "../modules/playlists/playlistsContext";
import { usePlaylistsActions } from "../modules/playlists";
import { usePrefs } from "../features/prefs/prefsContext";
import { useSavedViews } from "../modules/feed/savedViewsContext";
import { useSavedViews } from "../features/filters/savedViewsContext";
// What Ctrl/Cmd+K can reach. The generic list/filter/keyboard shell is `ui/CommandPalette`; this is
// the domain half — the layer boundary says a primitive may not import `lib/api` or a module.
@@ -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);
});
});
+9 -4
View File
@@ -3,16 +3,21 @@ import { useTranslation } from "react-i18next";
import { YouTubeIcon } from "../lib/brandIcons";
import type { Me } from "../lib/api";
import SearchBar from "../features/header/SearchBar";
import { useFiles, useFilesActions } from "../modules/files/filesContext";
import { useFiles, useFilesActions } from "../modules/files";
// eslint-disable-next-line local/layers -- the header still hosts this module's control; it goes once each page renders its own controls into the header's slots.
import PlexSearchBox from "../modules/plex/PlexSearchBox";
// eslint-disable-next-line local/layers -- the header still hosts this module's control; it goes once each page renders its own controls into the header's slots.
import PlexScopeToggle from "../modules/plex/PlexScopeToggle";
// eslint-disable-next-line local/layers -- the header still hosts this module's control; it goes once each page renders its own controls into the header's slots.
import PlexViewToggle from "../modules/plex/PlexViewToggle";
// eslint-disable-next-line local/layers -- the header still hosts this module's control; it goes once each page renders its own controls into the header's slots.
import FeedScopeToggle from "../modules/feed/FeedScopeToggle";
// eslint-disable-next-line local/layers -- the header still hosts this module's control; it goes once each page renders its own controls into the header's slots.
import SyncStatus from "../modules/channels/SyncStatus";
import { useNavigation } from "../features/navigation/navigationContext";
import { useFeedFilters, useFeedFiltersActions } from "../modules/feed/feedFiltersContext";
import { usePlaylists, usePlaylistsActions } from "../modules/playlists/playlistsContext";
import { useChannels, useChannelsActions } from "../modules/channels/channelsContext";
import { useFeedFilters, useFeedFiltersActions } from "../modules/feed";
import { usePlaylists, usePlaylistsActions } from "../modules/playlists";
import { useChannels, useChannelsActions } from "../modules/channels";
import { PaletteLauncher } from "../features/header/PaletteLauncher";
// The floating top header: a row of glass pills over the content — the module's SearchBar where it
+3
View File
@@ -2,8 +2,11 @@ import type { ComponentType } from "react";
import { lazyWithPreload, type PreloadableComponent } from "../lib/lazyWithPreload";
import type { Page } from "../lib/urlState";
import type { PanelId, PanelLayout } from "../lib/panelLayout";
// eslint-disable-next-line local/layers -- a rail (or the feed page's wrapper) the shell still loads eagerly; it goes once every rail loads lazily, like the pages.
import Sidebar from "../modules/feed/Sidebar";
// eslint-disable-next-line local/layers -- a rail (or the feed page's wrapper) the shell still loads eagerly; it goes once every rail loads lazily, like the pages.
import PlaylistsRail from "../modules/playlists/PlaylistsRail";
// eslint-disable-next-line local/layers -- a rail (or the feed page's wrapper) the shell still loads eagerly; it goes once every rail loads lazily, like the pages.
import { Feed, FeedPage } from "../modules/feed/modulePages";
// The RENDER half of the module registry: which component (and side rail) each page renders. The