Skip to content

feat: desktop/web UX alignment, window lifecycle sync, responsive layouts & layout audit tests - #84

Merged
spelech merged 8 commits into
mainfrom
feat/desktop-web-ux-alignment
Sep 22, 2026
Merged

spelech merged 8 commits into
mainfrom
feat/desktop-web-ux-alignment

Conversation

@spelech

@spelech spelech commented Sep 22, 2026

Copy link
Copy Markdown
Owner

Summary

This PR addresses UI/UX divergence between Desktop and Web, fixes companion window lifecycle synchronization, introduces a responsive collapsible telemetry ribbon, resolves chat and documentation layout crowding, and adds automated layout audit tests.

Key Changes

  1. Desktop Window Lifecycle & Synchronization:
    • Wired companion windows (\DocumentationWindow, \AiAssistWindow) with ownership (\Owner = MainWindow) for OS taskbar cohesion.
    • Synchronized minimize/restore lifecycle via \WindowSnapManager: minimizing MainWindow minimizes both attached and detached companions; restoring MainWindow restores companions and realigns attached ones.
    • Minimizing an attached companion window synchronizes MainWindow minimization.
    • Desktop tab buttons directly toggle native companion windows rather than opening in-app drawers.
  2. Non-Modal Web Drawers:
    • Removed the blocking modal dimmer backdrop on Web so users can interact with the app while referencing documentation or chatting.
  3. Responsive Collapsible Telemetry Header:
    • Added \IsCollapsed\ ribbon mode to \TelemetryHeaderControl\ collapsing into a slim 32px status ribbon with engine status indicators and a compact VRAM badge, preventing vertical crowding on mobile and horizontal tablets.
  4. Responsive AI Assistant Chat UI:
    • Restructured header to wrap subtitle and status pills cleanly.
    • Replaced rigid 3-column setup wizard with an adaptive layout.
    • Stacked composer toolbar into two tiers (input + model selector on Tier 1, send/stop on Tier 2), eliminating button collisions at 440px width.
    • Added automated \AiAssistantTabControl_LayoutAudit\ covering 440px, 480px, and 1280px.
  5. Adaptive Master-Detail Documentation:
    • Implemented responsive Master-Detail view for widths < 600px: full-width Topics list and full-width Detail view with \← Back to Topics\ button, eliminating horizontal text squishing.
    • Maintained two-column side-by-side view on wider screens (≥ 600px).
    • Added automated \DocumentationTabControl_LayoutAudit\ covering master and detail modes with 100/100 layout health.
  6. Playwright Browser Automation with Video Recording:
    • Configured \PlaywrightScreenshotGenerator\ to record browser interaction sessions into \docs/images/videos/\ (.webm) and generate drawer screenshots.

Verification


  • pm run lint\ (0 errors)

  • px tsc --noEmit\ (0 errors)
  • \dotnet test --filter 'FullyQualifiedName~AvaloniaLayoutAuditTests'\ (7/7 passed, 100/100 layout health score, 0 collisions, 0 boundary overflows)
  • \dotnet test --filter 'FullyQualifiedName~PlaywrightScreenshotGenerator'\ (1/1 passed, video and screenshots generated)

@spelech
spelech merged commit bfd3373 into main Sep 22, 2026
2 checks passed
@spelech
spelech deleted the feat/desktop-web-ux-alignment branch September 22, 2026 02:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant