feat(ui/quiz): implement real-time global chapter quiz generation, submit results to database, and display dynamic statistics on dashboard (#53)

This PR fully implements the Global Chapter-Level Quiz Generation system in the NexusReader application. ### Key Accomplishments: 1. **SubmitQuizResultCommand**: Added MediatR command and handler to persist completed quiz results to the SQLite database securely, using our clean architecture result-pattern. 2. **Dynamic Dashboard Integration**: Re-engineered the user dashboard to fetch, calculate, and display real-time statistics (average score, total books read, total concept nodes mapped, and list of resolved quizzes with their dates and scores) directly from active database queries, eliminating static mockups. 3. **Haptic & Visual Feedback**: Enhanced the quiz flow with interactive CSS transitions, glowing hover feedback, and clear result visualization upon completion. 4. **Robust Verification**: Implemented comprehensive unit tests for `SubmitQuizResultCommandHandler` covering all success and failure/edge cases. Executed full `dotnet test` with 100% success rate. --------- Co-authored-by: Marek Jasiński <jasins.marek@gmail.com> Reviewed-on: #53 Co-authored-by: Antigravity <antigravity@google.com> Co-committed-by: Antigravity <antigravity@google.com>
2026-05-26 11:43:58 +00:00
parent 39717725ec
commit aa80c2ba3e
38 changed files with 3243 additions and 456 deletions
@@ -294,9 +294,19 @@
 }

 .graph-node.satellite {
-    width: 20px;
-    height: 20px;
+    width: 16px;
+    height: 16px;
    transform: rotate(var(--angle)) translateY(var(--dist));
+    background: rgba(0, 255, 153, 0.4);
+    border: 1px solid var(--nexus-neon);
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.graph-node.satellite:hover {
+    background: var(--nexus-neon);
+    box-shadow: 0 0 15px var(--nexus-neon);
+    transform: rotate(var(--angle)) translateY(var(--dist)) scale(1.3);
 }

 .active-node-label {
@@ -404,3 +414,117 @@
        grid-template-columns: 1fr;
    }
 }
+
+/* --- Quiz History Styling --- */
+.quiz-history-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.quiz-history-item {
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 1rem;
+    transition: all 0.2s ease;
+}
+
+.quiz-history-item:hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: rgba(255, 255, 255, 0.1);
+}
+
+.quiz-item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 0.5rem;
+}
+
+.quiz-topic {
+    font-size: 0.95rem;
+    font-weight: 500;
+    color: #ffffff;
+}
+
+.quiz-item-meta {
+    display: flex;
+    font-size: 0.75rem;
+    color: #666666;
+}
+
+.badge {
+    padding: 0.25rem 0.5rem;
+    border-radius: 6px;
+    font-size: 0.75rem;
+    font-weight: 600;
+}
+
+.badge-success {
+    background: rgba(0, 255, 153, 0.1);
+    color: var(--nexus-neon);
+    border: 1px solid rgba(0, 255, 153, 0.3);
+}
+
+.badge-warning {
+    background: rgba(255, 170, 0, 0.1);
+    color: #ffa800;
+    border: 1px solid rgba(255, 170, 0, 0.3);
+}
+
+.badge-danger {
+    background: rgba(255, 50, 50, 0.1);
+    color: #ff3232;
+    border: 1px solid rgba(255, 50, 50, 0.3);
+}
+
+.empty-quiz-state {
+    text-align: center;
+    padding: 2rem 1rem;
+}
+
+.empty-quiz-state .sub-text {
+    font-size: 0.8rem;
+    color: #666666;
+    margin-top: 0.5rem;
+}
+
+/* --- Concept Detail Toast for Dashboard --- */
+.concept-detail-toast {
+    margin-top: 1rem;
+    padding: 0.75rem 1rem;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    min-height: 80px;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.concept-detail-toast.placeholder {
+    opacity: 0.5;
+}
+
+.concept-type {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--nexus-neon);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.concept-content {
+    font-size: 0.85rem;
+    line-height: 1.4;
+    color: #E0E0E0;
+    margin: 0;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+