UX revamp: image-gallery + rag-document-qa-svelte#1681
Closed
IEvangelist wants to merge 4 commits into
Closed
Conversation
Replace the generic purple-gradient React UI with "Lumina", a bright, productized media-library identity for the image-gallery frontend. - CSS Modules + design tokens with light/dark themes (honors prefers-color-scheme, persisted theme toggle, no-flash inline script). - Heroicons icon set; airy aqua/slate palette, productized app shell, card grid, status badges and a keyboard-operable lightbox. - Accessibility: skip link, landmarks, labelled controls, visible focus, aria-live status, reduced-motion support, inline SVG favicon. WCAG 2.2 AA verified with zero violations and zero AAA color-contrast issues in both themes (axe-core 4.11.3), zero console errors. - Preserve every flow and security control: XSRF antiforgery token on upload/delete, image validation, 3s thumbnail polling, drag-and-drop. - Pin latest deps (react 19.2, vite 8, @heroicons/react 2.2); add vite-env.d.ts for CSS module typings. Verified npm run build. - Add light + dark screenshots and README theme-switch markup. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Give the RAG Document Q&A Svelte sample a distinct scholarly identity: a dark academic reading-room (warm ink + brass, serif headings, opaque panels) with a calm light "daytime" counterpart, replacing the generic purple-gradient look. - Svelte 5 scoped styles + custom design tokens (app.css); Phosphor icons (phosphor-svelte deep imports, tree-shaken). - Accessibility: skip link, landmarks, labelled controls, aria-live regions, role=alert errors, visible focus, honors prefers-reduced-motion and prefers-color-scheme. axe-core (wcag2a/2aa/21a/21aa/22aa) passes with zero AA violations and zero AAA enhanced-contrast issues in light + dark. - Inline SVG favicon (no /favicon.ico 404); no-flash theme bootstrap defaulting to the dark reading room. - Branding uses "Aspire" (not ".NET Aspire"). - Preserves all functionality: /documents, /upload (.txt validation, drag/drop), /ask flow and fetch logic unchanged; converted alert() to an inline aria-live error banner. - Pinned latest deps (svelte 5, vite 8, phosphor-svelte 3). - New deterministic 2880x2048 light + dark screenshots; README uses GitHub theme-switch image markup. Validated locally via Aspire (Qdrant + FastAPI + Vite) with Playwright: empty-state and real upload error-state (credential-gated) exercised against the live backend; the populated catalogue/answer/citations screenshots use stubbed responses because OpenAI credentials are not available, so real embeddings/answers are not validated. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Address review feedback on the UX revamp: - image-gallery: make the lightbox close button fully opaque (was a 62% translucent dark over the displayed image, where a white icon could drop toward ~3.8:1 over a bright photo). Make the sticky header opaque too. The lightbox content/info bar where filename text lives was already on an opaque surface; no other overlay/popover carries text. - rag-document-qa-svelte: make the sticky masthead opaque. Answers, cited passages, and the catalogue already render on opaque cards; there is no lightbox/overlay/popover. - rag README: caption the catalogue/answer/citation screenshots as illustrative (an OpenAI API key is required for live embeddings/answers); note the empty and upload-error states are captured against the real backend. Sticky headers are visually identical at scroll-0 and the close button is not in the gallery screenshot, so the committed screenshots are unchanged. Both frontends rebuild cleanly; the changes only increase contrast. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Eliminate the last semi-transparent text background: the thumbnail status badge previously sat on an 88%-opaque surface over the image. Make it fully opaque so its label can never lose contrast over arbitrary thumbnail content (zero translucent text backgrounds anywhere now). Re-validated image-gallery end to end via Aspire + Playwright (upload/XSRF, thumbnail polling, lightbox, delete): 0 axe AA violations, 0 AAA enhanced-contrast issues, 0 console errors in light and dark. Refreshed the 2880x2048 light + dark screenshots to reflect the solid badge. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Member
Author
|
Consolidated into the single umbrella UX-revamp PR #1682. The image-gallery (Lumina) and rag-document-qa-svelte (Athenaeum) commits have been merged into ievangelist/samples-ux-revamp (merge e56a6b8); all fleet work now lands in one branch/PR. Closing in favor of #1682 — branch ievangelist/ux-revamp-gallery-and-rag preserved, no history rewrite. |
17 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Part of the coordinated effort to give every Aspire sample frontend a distinct, accessible, secure identity (they all shared the same purple gradient). This PR revamps two samples, each with its own CSS approach and icon pack:
1.
samples/image-gallery— "Lumina" bright media-library SaaSwwwrootviaPublishWithContainerFiles(verifiednpm run buildoutput lands in the API target).alert()replaced by an inlinearia-liveerror banner.2.
samples/rag-document-qa-svelte— "Athenaeum" scholarly reading room/documents,/upload(.txt validation, drag/drop), and/askflows verbatim.Accessibility
Both apps validated with axe-core 4.11.3 (
wcag2a/2aa/21a/21aa/22aa+color-contrast-enhanced) in light and dark:aria-liveregions, honorsprefers-reduced-motion+prefers-color-scheme./favicon.ico404); zero console errors during driven flows.Validation
aspire run; all resources reported Healthy (image-gallery; rag = Qdrant + FastAPI + Vite).#gh-light-mode-only/#gh-dark-mode-only).Credential-gated note (rag-document-qa-svelte)
OpenAI credentials were not available, so real embeddings/answers are not validated. Against the live backend I verified the empty catalogue state and the real upload error-state (backend returns 401/500 without a valid key, surfaced as the error banner). The populated catalogue / answer / citation screenshots use stubbed
/documents,/upload, and/askresponses (Playwright route interception) to depict a representative populated reading room. No secrets are committed.Notes
Co-authored-by: Copilottrailer.tests/SamplesIntegrationTests/AppHostTests.cs(/,/health,/alive) are unaffected; routing unchanged.Opening as draft for review.