27 خطوط
1.8 KiB
Markdown
27 خطوط
1.8 KiB
Markdown
# Screen Architecture
|
|
|
|
Screens orchestrate reusable components and route-level data boundaries. They do not own domain logic or duplicate server state.
|
|
|
|
## Workspaces
|
|
|
|
- `/admin`: SaaS operations and platform health
|
|
- `/app`: Course Designer creative and monitoring workspace
|
|
- `/manager`: authorized team analytics
|
|
- `/learn`: mobile-first assigned learning
|
|
|
|
Designer navigation includes `/app/skills-taxonomy` and Monitoring > Skills & Competencies. Contextual `LearningMappingPanel` is reused for Course, Module, Lesson, Block, Question, and Assessment.
|
|
|
|
Every meaningful route renders loading, empty, populated, error, and permission-denied states. Offline state is explicit where supported. Mutations expose pending, success, and failure.
|
|
|
|
Desktop uses persistent workspace navigation. Tablet uses collapsible panels. Designer mobile uses a drawer; the full Builder is not compressed into an unusable layout. Learner mobile uses at most five labeled bottom-navigation destinations.
|
|
|
|
## Course Builder
|
|
|
|
- Real route: `/app/courses/:courseId/versions/:versionId/lessons/:lessonId/builder`
|
|
- UI-review route: `/app/builder-preview` (clearly labelled local-only sample data)
|
|
- Physical desktop layout: block library, canvas, contextual inspector, and course structure; content inside each panel follows the active document direction.
|
|
- TanStack Query owns server documents and mutations. Zustand owns selection, panel, and device-preview state only.
|
|
- DnD is progressive enhancement: every library block has a semantic button for click/keyboard insertion and canvas handles have accessible labels.
|
|
- Inspector edits are debounced before the API mutation. The server remains authoritative through `expectedRevision`; conflict responses are HTTP 409 and include the current block.
|
|
- Widths below 760px show a clear larger-screen requirement instead of a misleading compressed authoring surface.
|