Files

T

mjasin 2e23a032d3 feat(ui): Hub Navigation, Profile Dashboard and Auth Stability Fixes (#31 )

This PR implements the Hub Navigation system and the Profile Dashboard, while resolving critical session synchronization issues.

### Key Changes
- **Hub Navigation**: Introduced `MainHubLayout` with a premium glassmorphism sidebar, providing access to Dashboard, Library, Concepts Map, and Profile.
- **Profile Dashboard**: Implemented a high-fidelity Profile page (#27) with learning metrics, AI token usage tracking, and system rank visualization.
- **Stability Fixes**:
    - Resolved an infinite network loop on the `/profile` page by implementing request deduplication and in-memory caching in `IdentityService`.
    - Added environment-aware guards to prevent illegal JavaScript interop calls during server-side prerendering.
    - Implemented automatic session invalidation on `401 Unauthorized` responses to handle stale authentication states gracefully.
- **Reader Integration**: Added a "Return to Dashboard" option in the reader toolbar (#26).

Closes #26
Closes #27

Reviewed-on: #31
Co-authored-by: Marek Jasiński <jasins.marek@gmail.com>
Co-committed-by: Marek Jasiński <jasins.marek@gmail.com>

2026-05-10 17:36:35 +00:00

2.5 KiB

Raw Blame History

name, description

name	description
nexus-ui-engine	Design System & Component rules for Blazor

UI Standards

Atomic Design:
- Build reusable components in NexusReader.UI.Shared/Components.
- Atoms: Base elements (NexusButton, NexusIcon, NexusTypography).
- Molecules: Small groups (AiAssistantBubble, KnowledgeCheck).
- Organisms: High-level sections (KnowledgeGraph, ReaderCanvas).
Styling & Isolation:
- Mandatory use of scoped CSS (.razor.css).
- No global CSS except for design tokens in app.css.
- Use ::deep only when absolutely necessary to style child components.
Design System (Nexus Neon):
- Color Palette:
  - Primary Accent: --nexus-neon (#00ff99) - Used for borders, highlights, and icons.
  - Dark Mode: --nexus-bg (#0a0a0a), --nexus-card (#141414).
  - Light Mode: --nexus-bg (#f8f9fa), --nexus-card (#ffffff).
- Typography:
  - UI Elements: Inter (Sans-Serif) for controls, menus, and labels.
  - Reading Content: Merriweather (Serif) with line-height: 1.65 and letter-spacing: -0.01em for high readability.
- Effects:
  - Subtle neon glows (box-shadow: 0 0 15px rgba(0, 255, 153, 0.3)).
  - Glassmorphism for overlays and modals.
Adaptive Layouts:
- Support .platform-mobile and .platform-desktop context classes.
- Handle safe-area insets (--safe-area-inset-*) for mobile devices.
- Immersive Reader (Zen Mode):
  - Centered content flow: max-width: 800px, margin: 0 auto.
  - Paper-white background: #F9F9F9 for light mode reader canvas.
  - Dedicated Scrollbars: Custom styled, thin scrollbars with --nexus-neon accents.
  - Reachability: Large padding-bottom (e.g., 15rem) to ensure comfortable reading of end-of-page content.
Accessibility (A11y):
- Touch Targets: Min 44x44px on mobile (enforced via CSS variables).
- Contrast: Minimum ratio of 4.5:1.
- Semantic HTML: Use appropriate tags (<button>, <article>, <nav>).
Interactive Flow:
- AI Assistant interactions must be non-blocking and smoothly transition using CSS animations.
- Interactive elements must have clear :hover, :active, and :focus states.
- Glass Panel Standard: All primary data panels (.glass-panel) must implement the following interaction signature:
  - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
  - :hover state must include: transform: translateY(-4px), increased background opacity, and a subtle --nexus-neon border highlight (e.g., rgba(0, 255, 153, 0.2)).

2.5 KiB Raw Blame History

UI Standards

2.5 KiB

Raw Blame History