auth-yes/tasks/wip/2026-0825.01.jul.story.arch.ui-decomposition-roadmap-2300.ph2.md
Tyler Gillispie 2d25e33515 wip(ui): preserve in-flight admin drawers and scripts extraction
- Preserves extracted components: AppDrawer, InviteDrawer, RoleEditorDrawer
- Preserves extracted SSR JSX scripts: AdminAppsScript, AdminInvitesScript, AdminRolesScript
- Parks Phase 2 task spec in tasks/wip/
- Checkpoint preserved AS IS from session 3615485303186036917
2026-08-26 10:37:57 -07:00

2.2 KiB

TASK METADATA

  • Target Files: ui/components/AdminInvitesPage.tsx, ui/components/AdminUserDetailsPage.tsx, ui/components/AdminRolesPage.tsx, ui/components/AdminAppsPage.tsx, ui/components/admin/drawers/*.tsx, ui/components/admin/*.tsx, ui/ui_scripts.test.ts
  • Core Objective: Phase 2 (Admin Drawers & Scripts): Decompose large admin pages by extracting form drawers under ui/components/admin/drawers/ and client script blocks into dedicated SSR JSX script components under ui/components/admin/.
  • Dependencies: tasks/new/2026-0825.01.jul.story.arch.ui-decomposition-roadmap-2300.md
  • Additional Important Notes: Strictly 100% pure Hono SSR JSX. Preserve all form submit handlers, action endpoints, and pass ui/ui_scripts.test.ts.

2. Architectural Considerations & Risks

  • Risks:
    • Breaking admin drawer open/close functions or invite generation triggers if script functions are missing or mismatched.
  • Mitigation:
    • Encapsulate scripts into dedicated SSR JSX script components (AdminInvitesScript.tsx, AdminAppsScript.tsx, etc.) and ensure all client IDs match.

3. Proposed Implementation

  1. Extract Admin Drawers (ui/components/admin/drawers/):

    • InviteDrawer.tsx: Invite creation form and options from AdminInvitesPage.tsx.
    • GrantDrawer.tsx: Permission grant assignment form from AdminUserDetailsPage.tsx.
    • RoleEditorDrawer.tsx: Role creation/editing form and permission picker from AdminRolesPage.tsx.
    • AppDrawer.tsx: Connected application registration drawer from AdminAppsPage.tsx.
  2. Extract Admin Script Components (ui/components/admin/):

    • AdminInvitesScript.tsx: Client-side handlers for invite generation, clipboard copy, and redemption modal.
    • AdminAppsScript.tsx: Client-side handlers for app registration, edit prefill, and delete.
    • AdminRolesScript.tsx: Client-side handlers for role save and permission checkboxes.
    • AdminUserDetailsScript.tsx: Client-side handlers for grant revoke and session kill.
  3. Quality Gates & Validation:

    • Run deno fmt, deno task lint, deno task check.
    • Run deno test --allow-all (ensure ui/ui_scripts.test.ts passes).