0249938459
Creates `tasks/new/2026-0825.01.jul.story.arch.ui-decomposition-roadmap-2300.md` containing the architectural analysis and phased execution plan for modularizing `ui/` monoliths into pure SSR JSX components while maintaining testability. Co-authored-by: mrteye <1945243+mrteye@users.noreply.github.com>
93 lines
4.5 KiB
Markdown
93 lines
4.5 KiB
Markdown
# TASK METADATA
|
|
|
|
- **Target Files:** `ui/components/SessionsPage.tsx`,
|
|
`ui/components/AdminInvitesPage.tsx`,
|
|
`ui/components/AdminUserDetailsPage.tsx`, `ui/components/AdminRolesPage.tsx`,
|
|
`ui/components/AdminAppsPage.tsx`, `ui/components/PasskeysPage.tsx`,
|
|
`ui/components/RegisterPage.tsx`, `ui/components/AuthenticatedLayout.tsx`,
|
|
`ui/public/ui/utils/bip39_wordlist.ts`, `ui/utils/bip39_wordlist.ts`
|
|
- **Core Objective:** Conduct a deep architectural investigation of the `ui/`
|
|
directory and draft a comprehensive, phased UI Component Decomposition &
|
|
Client Script Modularization Roadmap to eliminate remaining monoliths (> 350
|
|
lines).
|
|
- **Dependencies:** None.
|
|
- **Additional Important Notes:**
|
|
- Strictly 100% pure Hono SSR JSX (zero React or virtual DOM).
|
|
- Client scripts must be extracted as pure SSR JSX script components (e.g.,
|
|
rendering `<script dangerouslySetInnerHTML={{ __html: ... }}>`) to prevent
|
|
static asset race conditions and maintain testability.
|
|
- Must preserve all existing HTML DOM IDs, CSS classes, and form bindings.
|
|
- Must pass all quality gates (`deno fmt`, `deno task lint`,
|
|
`deno task check`, and `ui/ui_scripts.test.ts`).
|
|
|
|
---
|
|
|
|
## Architectural Considerations & Risks
|
|
|
|
- **Risks:**
|
|
- **DOM Binding Breakage:** Extracting structural components (e.g., Drawers,
|
|
Navbars) alongside their corresponding Vanilla JS controller scripts carries
|
|
a high risk of breaking DOM IDs, CSS class selectors, or form bindings if
|
|
not done synchronously.
|
|
- **Script Scope Leaks & Reference Errors:** Since `ui_scripts.test.ts`
|
|
validates syntax in-memory, extracting monolithic scripts into modular SSR
|
|
JSX script blocks could introduce undeclared variables if inter-script
|
|
dependencies are broken.
|
|
- **Validation Collision:** In zero-framework forms (especially in tabs or
|
|
drawers), ensuring distinct HTML5 `<form>` elements are preserved during
|
|
extraction is critical to avoid 'required' field validation collisions.
|
|
|
|
- **Alternatives:**
|
|
- Instead of extracting `.js` as static HTTP assets (which could improve
|
|
caching but introduce loading race conditions and break
|
|
`ui_scripts.test.ts`), we deliberately chose **SSR JSX Script Components**.
|
|
This approach encapsulates the vanilla JS alongside the component,
|
|
preserving hermetic testing capability and avoiding external browser network
|
|
overhead.
|
|
|
|
## Proposed Implementation
|
|
|
|
### Phase 1: Sessions & Layout Extraction (Targeting `AuthenticatedLayout.tsx` and `SessionsPage.tsx`)
|
|
|
|
- **Layout Componentization:**
|
|
- Create `ui/components/layout/Navbar.tsx`.
|
|
- Create `ui/components/layout/MobileSidebar.tsx`.
|
|
- Create `ui/components/layout/UserMenu.tsx`.
|
|
- Refactor `AuthenticatedLayout.tsx` to compose these modular components.
|
|
- **Sessions Componentization:**
|
|
- Create `ui/components/sessions/` directory.
|
|
- Extract the active session table and deck rendering logic into distinct
|
|
subcomponents (e.g., `SessionTable.tsx`, `SessionDeck.tsx`).
|
|
- Extract the embedded Vanilla JS block from `SessionsPage.tsx` into
|
|
`ui/components/sessions/SessionsScript.tsx` using the
|
|
`dangerouslySetInnerHTML` pattern.
|
|
|
|
### Phase 2: Admin Drawers Modularization (Targeting `Admin*Page.tsx`)
|
|
|
|
- **Drawer Componentization:**
|
|
- Create `ui/components/admin/drawers/` directory.
|
|
- Extract `InviteDrawer.tsx` from `AdminInvitesPage.tsx`.
|
|
- Extract `GrantDrawer.tsx` from `AdminUserDetailsPage.tsx`.
|
|
- Extract `RoleEditorDrawer.tsx` from `AdminRolesPage.tsx`.
|
|
- Extract `AppDrawer.tsx` from `AdminAppsPage.tsx`.
|
|
- **Script Modularization:**
|
|
- Extract the embedded client scripts from each admin page into dedicated SSR
|
|
JSX script components (e.g., `AdminInvitesScript.tsx`,
|
|
`AdminAppsScript.tsx`) within `ui/components/admin/`.
|
|
|
|
### Phase 3: WebAuthn Client Scripts & Asset Deduplication (Targeting `PasskeysPage.tsx`, `RegisterPage.tsx`, and assets)
|
|
|
|
- **WebAuthn Script Extraction:**
|
|
- Create `ui/components/auth/` directory.
|
|
- Consolidate and extract the shared WebAuthn client ceremony helper scripts
|
|
(`webauthn.client.js` equivalent) from both `PasskeysPage.tsx` and
|
|
`RegisterPage.tsx` into `ui/components/auth/WebAuthnScript.tsx`.
|
|
- Move related structural subcomponents (like a `PasskeyTable.tsx`) to
|
|
`ui/components/auth/` as needed.
|
|
- **Wordlist Asset Deduplication:**
|
|
- Delete `ui/public/ui/utils/bip39_wordlist.ts`.
|
|
- Update any import statements referencing the deleted file to point to the
|
|
canonical `ui/utils/bip39_wordlist.ts`.
|
|
- Verify that `deno task check` and `deno test` still pass to ensure all
|
|
references are correctly updated.
|