snd: how-it-works modal, API docs, expired hero fix#26
Merged
Conversation
… hero app/ui/notFound.js (rendered when a share link has expired or 404s) was still using assets/notFound.svg -- a Mozilla Firefox Send-era illustration: saturated blue, soft cloud-with-strike-through glyph, decorative. Same off-brand carryover that downloadCompleted.js had before PR #18 fixed it. Replacement uses the existing Vault visual vocabulary, mirroring the download-complete hero from PR #18 so the encrypt/decrypt/expired moments visually rhyme: - Three nested squares (concentric, hairline outer pair). - Inner square in `--snd-mute` (not danger -- expired is not a destructive condition, it's an absent one). - Diagonal slash from corner to corner of the inner square, in mute. - EXPIRED tag eyebrow above the headline. - A `>`-prefixed mono caption -- "share no longer available · file removed from server" -- echoing the Vault comment-line motif. assets/notFound.svg is no longer referenced. Leaving the file in place for now; webpack still emits it but no template loads it. The `assets` import is also dropped since it's no longer used.
Covers all 11 routes (HTTP upload, WS upload, exists, metadata, download, delete, password, params, info, filelist), the send-v1 / owner_token / FxA auth schemes, server limits, status codes, and health/version paths.
Adds a footer link that opens a non-technical explainer modal: a 4-step plain-English walkthrough (lock in browser, store ciphertext, share link, link expires) with a small animated SVG diagram showing a packet flowing you → snd → them and flipping color at the locked stop. Respects prefers-reduced-motion. Wires showHowItWorks through the existing state.modal pattern so it dismisses like every other dialog.
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.
Summary
Three independent changes batched on this branch:
feat: How-it-works footer modal. Adds a How it works link to the footer that opens a non-technical explainer dialog: a 4-step plain-English walkthrough (lock in browser → store ciphertext → share link → link expires) with a small animated SVG diagram (packet flowing you → snd → them, color-flipping at the locked stop). Respectsprefers-reduced-motion. Wires through the existingstate.modalpattern so it dismisses like any other dialog.docs:docs/API.md. Documents all 11 API routes (HTTP upload, WS upload, exists, metadata, download, delete, password, params, info, filelist) plus thesend-v1/owner_token/ FxA auth schemes, server limits with env vars, status codes, and health/version paths.fix: expired-link Vault hero. Replaces the legacy blue cloud on the expired-link screen with the Vault hero — the original purpose of this branch.No new dependencies. All lints pass; webpack build is clean.
Test plan
npm start, open http://localhost:8080, click How it works in the footer → modal opens with the animated diagram and 4 steps.×, the backdrop, and the Got it button.docs/API.mdagainstserver/routes/*.jsfor any spec drift.