diff --git a/docs/superpowers/specs/2026-06-06-css-mui-migration-design.md b/docs/superpowers/specs/2026-06-06-css-mui-migration-design.md index 29b30dd..555a6e8 100644 --- a/docs/superpowers/specs/2026-06-06-css-mui-migration-design.md +++ b/docs/superpowers/specs/2026-06-06-css-mui-migration-design.md @@ -39,7 +39,7 @@ The premise "we want dark/light mode" is largely **already met**. The audit foun | Look | **"Soft-SaaS shell (B) + dense data tables (D)"** — airy modern chrome, dense efficient tables | | Theming | Existing CSS-var tokens become the source; one `data-theme` attribute drives both MUI and legacy CSS (mechanism verified against MUI v7 docs — §4.1) | | Roll-out | Incremental, foundation-first; each phase is one or more normal releases | -| Pilot page | A focused CRUD page (Vozidla _or_ Uživatelé) | +| Pilot page | **Vozidla** (vehicles) — focused CRUD pilot | | Heavy tables | MUI `Table` styled dense, reusing existing `useTableSort` + `usePaginatedQuery` hooks (no DataGrid, no paid license) | --- @@ -170,8 +170,8 @@ Each phase is **one or more** normal `v1.x` releases (realistic total: ~a dozen - **Phase 0 — Foundation.** Install MUI v7 + Emotion + MUI X v8 Pickers; reconcile `@types/react` with the React 18 runtime (§14); write `theme.ts` from tokens **and apply the token-level palette refresh app-wide** (§7); author the dark palette; wire `ScopedCssBaseline` + the `ThemeContext`↔`setMode()` sync; build the `src/admin/ui/` kit; add the **dev-only** `/ui-kit` showcase route (guarded by `import.meta.env.DEV`, tree-shaken from prod). Layout/structure unchanged; colors shift slightly app-wide. Deletes no per-page CSS yet. - **Phase 1 — `` (chrome).** Migrate sidebar/topbar/theme-toggle to the soft-SaaS shell. Every page _inside the AdminLayout route_ sits in the new frame; unmigrated content still uses its own CSS inside it. Retires most of `layout.css`. **Login is NOT touched here** — it is a sibling route outside `AdminLayout` (`AdminApp.tsx:100`) with its own full-screen layout; see Phase 3. -- **Phase 2 — Pilot CRUD page** (Vozidla _or_ Uživatelé). Full end-to-end: list, dense ``, filters, create/edit ``. Battle-tests and tunes the foundation. Deletes that page's CSS. -- **Phase 3 — Simple CRUD + Login.** The non-pilot of Users/Vehicles, Projects, Settings, and **Login** (migrated standalone — keeps its own full-screen layout, theme toggle, and 2FA two-step + shake/animate-out flow; deletes `login.css`). +- **Phase 2 — Pilot CRUD page (Vozidla / vehicles).** Full end-to-end: list, dense ``, filters, create/edit ``. Battle-tests and tunes the foundation. Deletes that page's CSS. +- **Phase 3 — Simple CRUD + Login.** Uživatelé (users), Projects, Settings, and **Login** (migrated standalone — keeps its own full-screen layout, theme toggle, and 2FA two-step + shake/animate-out flow; deletes `login.css`). - **Phase 4 — List-heavy** (Offers, Invoices lists). Hammers ``. Invoice/offer **on-screen detail** (Quill, the detail page) re-themed, not rebuilt. (Generated PDFs are out of scope — §13.) - **Phase 5 — Attendance & Leave/Trips** (grids + forms). - **Phase 6 — Warehouse, then Plan + Dashboard polish.** @@ -243,9 +243,7 @@ This is a UI restyle, so behavior must stay identical (except the deliberate mod - Confirm **MUI v7** + **MUI X v8** as the pinned versions and re-verify the `cssVariables.colorSchemeSelector` + `colorSchemes` API against the installed version's docs. - **Reconcile `@types/react`** with the React 18.3 runtime (or deliberately validate the chosen MUI version against React-18-runtime-with-React-19-types) before committing the kit. -- Verify each of the three MUI X picker variants under the `date-fns` `cs` adapter: `DatePicker` (date), `DatePicker` month/year views (replacing `showMonthYearPicker`), `TimePicker` (replacing `showTimeSelectOnly`). -- Final pilot page choice between **Vozidla** and **Uživatelé**. -- Audit the 8 `useModalLock` call sites and decide migrate-now vs keep-until-page-migrates for each. +- Verify each of the three MUI X picker variants under the `date-fns` `cs` adapter: `DatePicker` (date), `DatePicker` month/year views (replacing `showMonthYearPicker`), `TimePicker` (replacing `showTimeSelectOnly`).- Audit the 8 `useModalLock` call sites and decide migrate-now vs keep-until-page-migrates for each. - Bundle-size budget/target to check against after Phase 0. > **Note:** `CLAUDE.md` references a hook named `useListData` that does not exist (the real hook is `usePaginatedQuery`); this spec uses the correct name. Correcting `CLAUDE.md` is advisable but outside this spec's scope.